@qoretechnologies/reqraft 0.10.41-pr.95.g294e5aa → 0.10.41

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

@@ -0,0 +1,99 @@
+import { ReqoreModal, ReqoreTextarea, useReqoreProperty } from '@qoretechnologies/reqore';
+import { IReqoreModalProps } from '@qoretechnologies/reqore/dist/components/Modal';
+import { CSSProperties, memo, useCallback } from 'react';
+
+export interface IReqraftTemplateExampleValueModalProps extends Partial<IReqoreModalProps> {
+  /** The template field's display name — the modal heading. */
+  label?: string;
+  /** The FULL serialized example value. */
+  value: string;
+  /** Copy-action label. @default 'Copy' */
+  copyLabel?: string;
+  /**
+   * Notification shown after a successful copy (prop-overridable so consumers
+   * can pass translated copy — same contract as `ReqoreExportModal`).
+   * @default 'Example value copied to clipboard'
+   */
+  copyNotificationContent?: string;
+  /** Notification shown when the browser denies clipboard access. @default 'Could not copy to clipboard' */
+  copyFailedNotificationContent?: string;
+}
+
+/* Fill the modal's fixed-height body instead of scaling with content: a
+   content-scaled textarea either stops short of the body (dead space below, a
+   partial-height scrollbar) or explodes it on huge values. Filling hands the
+   whole body to the textarea, so its scrollbar spans the modal body. Module
+   scope for stable identity. */
+const FILL_STYLE: CSSProperties = { height: '100%' };
+
+/**
+ * Full example-value viewer for template/context-data items whose
+ * `example_value` is too long for the picker's item description (a
+ * binary-carrying field's example can be an entire base64 file). Opened by the
+ * "?" item action wired in `helpers/templates.ts` via reqore's global
+ * `modalStore.addModal()` — the modals wrapper injects `isOpen`/`onClose`, so
+ * this component stays presentation-only (pass `isOpen` yourself only when
+ * rendering it standalone, e.g. in a story).
+ */
+export const ReqraftTemplateExampleValueModal = memo(
+  ({
+    label,
+    value,
+    copyLabel = 'Copy',
+    copyNotificationContent = 'Example value copied to clipboard',
+    copyFailedNotificationContent = 'Could not copy to clipboard',
+    ...rest
+  }: IReqraftTemplateExampleValueModalProps) => {
+    const addNotification = useReqoreProperty('addNotification');
+
+    const handleCopyClick = useCallback(async () => {
+      // Clipboard access can be denied (permissions, insecure context) — the
+      // failure surfaces as a notification instead of an unhandled rejection.
+      try {
+        await navigator.clipboard.writeText(value);
+        addNotification({
+          content: copyNotificationContent,
+          intent: 'success',
+          duration: 3000,
+        });
+      } catch (error) {
+        addNotification({
+          content: copyFailedNotificationContent,
+          intent: 'danger',
+          duration: 3000,
+        });
+      }
+    }, [value, addNotification, copyNotificationContent, copyFailedNotificationContent]);
+
+    return (
+      <ReqoreModal
+        label={label || 'Example value'}
+        icon='FileTextLine'
+        height='70vh'
+        className='reqraft-template-example-value-modal'
+        bottomActions={[
+          {
+            position: 'right',
+            label: copyLabel,
+            icon: 'ClipboardLine',
+            onClick: () => {
+              handleCopyClick();
+            },
+          },
+        ]}
+        {...rest}
+      >
+        <ReqoreTextarea
+          readOnly
+          value={value}
+          minimal
+          fluid
+          style={FILL_STYLE}
+          wrapperStyle={FILL_STYLE}
+        />
+      </ReqoreModal>
+    );
+  }
+);
+
+ReqraftTemplateExampleValueModal.displayName = 'ReqraftTemplateExampleValueModal';

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

@@ -2,7 +2,11 @@ import { ReqoreTag, ReqoreTagGroup } from '@qoretechnologies/reqore';
 import { IReqoreFormTemplates } from '@qoretechnologies/reqore/dist/components/Textarea';
 import { TSizes } from '@qoretechnologies/reqore/dist/constants/sizes';
 import { memo } from 'react';
-import { findTemplate, getTemplateTagStyle, TTemplateMeta } from '../../../../helpers/templates';
+import {
+  getTemplateTagStyle,
+  describeTemplateReference,
+  TTemplateMeta,
+} from '../../../../helpers/templates';
 
 export interface IReadOnlyTemplateTagProps {
   /** The template reference value, e.g. `$local:test`. */
@@ -22,14 +26,14 @@ export interface IReadOnlyTemplateTagProps {
  */
 export const ReadOnlyTemplateTag = memo(
   ({ value, templates, size }: IReadOnlyTemplateTagProps) => {
-    const template = templates ? findTemplate(templates, value) : undefined;
-    const metadata = template?.metadata as TTemplateMeta | undefined;
+    const { label, item } = describeTemplateReference(templates, value);
+    const metadata = item?.metadata as TTemplateMeta | undefined;
     return (
       <ReqoreTagGroup size={size}>
         <ReqoreTag
           icon='ExchangeDollarLine'
           leftIconProps={{ image: metadata?.image }}
-          label={template?.label || value}
+          label={label}
           tooltip={value}
           {...getTemplateTagStyle(metadata)}
         />

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

@@ -19,6 +19,7 @@ import { AutoFormField as auto } from '../auto/AutoFormField';
 import LongStringFormField from '../long-string/LongString';
 import NumberFormField from '../number/Number';
 import { StringFormField } from '../string/String';
+import { LONG_EXAMPLE_VALUE } from './__fixtures__/longExampleValue';
 import { TemplateField } from './TemplateField';
 import multiLevelTemplates from './__fixtures__/multiLevelTemplates.json';
 import templates from './__fixtures__/templates.json';
@@ -307,6 +308,158 @@ export const TemplateValue: StoryObj<typeof meta> = {
   },
 };
 
+/** REGRESSION — a rehydrated whole-token template value (the FSM state-output
+ *  `$data:{…}` form above all) must render as the picker CHIP, not as its raw
+ *  token text in a string editor. */
+export const BracedTemplateValue: StoryObj<typeof meta> = {
+  args: {
+    component: LongStringField,
+    type: 'string',
+    allowTemplates: true,
+    allowCustomValues: true,
+    value: '$data:{W2n_BuSHbaNrbvV1MkfPF.filename}',
+    templates: buildTemplates({
+      state_outputs: {
+        display_name: 'Context Data',
+        short_desc: 'Outputs of previous states',
+        app: 'GoogleDrive',
+        items: [
+          {
+            name: 'filename',
+            display_name: 'Filename',
+            short_desc: 'The uploaded file name',
+            desc: 'The uploaded file name',
+            value: '$data:{W2n_BuSHbaNrbvV1MkfPF.filename}',
+            type: 'string',
+          },
+        ],
+      },
+    } as any),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField for a string field whose saved value is a braced state-output reference ($data:{id.filename}) — the field shows the resolved picker chip ("Filename"), never the raw token in a textarea, which is what rehydrated drafts degraded to before the token grammar learned braces.',
+      },
+    },
+  },
+  play: async () => {
+    await waitFor(() => {
+      const chip = Array.from(document.querySelectorAll('.reqore-button')).find((button) =>
+        button.textContent?.includes('Filename')
+      );
+      expect(chip, 'the braced value renders as the labeled picker chip').toBeTruthy();
+    });
+    const rawTextareas = Array.from(document.querySelectorAll('textarea')).filter((textarea) =>
+      textarea.value.includes('$data:{')
+    );
+    expect(rawTextareas, 'no textarea holds the raw token').toHaveLength(0);
+  },
+};
+
+/** A template-authored Qog keys its states `'1'`, `'2'`, … while each state
+ *  carries its own id, and its saved `$data:{…}` refs use that id — so the
+ *  catalogue (spelled with the key) and the value (spelled with the id) never
+ *  match as text. The producer supplies the alternate spelling as an alias so
+ *  the chip still resolves to a name instead of printing the raw token. */
+export const AliasedStateTemplateValue: StoryObj<typeof meta> = {
+  args: {
+    component: LongStringField,
+    type: 'string',
+    allowTemplates: true,
+    allowCustomValues: true,
+    // what the Qog has saved — the state's own id
+    value: '$data:{dc_ai_reply.choices}',
+    templates: {
+      items: [
+        {
+          label: 'Generate AI Reply',
+          description: 'Outputs of the Groq chat-completion state',
+          items: [
+            {
+              label: 'Choices',
+              // what the server's catalogue offers — the states-hash key
+              value: '$data:{3.choices}',
+              badge: 'list',
+              metadata: { aliasValues: ['$data:{dc_ai_reply.choices}'] },
+            },
+          ],
+        },
+      ],
+    } as any,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField holding a state-output reference spelled with the state id ($data:{dc_ai_reply.choices}) while the catalogue offers the same item spelled with the states-hash key ($data:{3.choices}) — the chip resolves through the item alias and shows "Choices", where it used to print the raw token.',
+      },
+    },
+  },
+  play: async () => {
+    await waitFor(() => {
+      const chip = Array.from(document.querySelectorAll('.reqore-button')).find((button) =>
+        button.textContent?.includes('Choices')
+      );
+      expect(chip, 'the aliased value resolves to the labeled picker chip').toBeTruthy();
+    });
+    const rawChips = Array.from(document.querySelectorAll('.reqore-button')).filter((button) =>
+      button.textContent?.includes('$data:{')
+    );
+    expect(rawChips, 'no chip prints the raw token').toHaveLength(0);
+  },
+};
+
+/** A catalogue can only offer what the action's output type declares, so it
+ *  stops at a list — `choices` is offered, `choices[0].message.content` is
+ *  hand-written past it. Such a value has no item of its own and used to
+ *  render as its raw token; it is now named after its nearest ancestor. */
+export const ExtendedPathTemplateValue: StoryObj<typeof meta> = {
+  args: {
+    component: LongStringField,
+    type: 'string',
+    allowTemplates: true,
+    allowCustomValues: true,
+    value: '$data:{dc_ai_reply.choices[0].message.content}',
+    templates: {
+      items: [
+        {
+          label: 'Generate AI Reply',
+          items: [
+            {
+              label: 'Choices',
+              value: '$data:{3.choices}',
+              badge: 'list',
+              metadata: { aliasValues: ['$data:{dc_ai_reply.choices}'] },
+            },
+          ],
+        },
+      ],
+    } as any,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField holding a path extended past the named field it starts from ($data:{dc_ai_reply.choices[0].message.content}, where the catalogue only offers "choices") — the chip is named after its nearest ancestor as "Choices[0].message.content" instead of printing the raw token.',
+      },
+    },
+  },
+  play: async () => {
+    await waitFor(() => {
+      const chip = Array.from(document.querySelectorAll('.reqore-button')).find((button) =>
+        button.textContent?.includes('Choices[0].message.content')
+      );
+      expect(chip, 'the extended path is named after its ancestor').toBeTruthy();
+    });
+    const rawChips = Array.from(document.querySelectorAll('.reqore-button')).filter((button) =>
+      button.textContent?.includes('$data:{')
+    );
+    expect(rawChips, 'no chip prints the raw token').toHaveLength(0);
+  },
+};
+
 export const ElementTypeInListShowsCorrectTemplates: StoryObj<typeof meta> = {
   args: {
     component: auto,
@@ -521,7 +674,7 @@ export const TemplateCanBeSelected: StoryObj<typeof meta> = {
     docs: {
       description: {
         story:
-          'Renders TemplateField for a string, opens the templates popover and clicks the Interface ID template — the field switches to the $local:id template value.',
+          'Renders TemplateField for a string, opens the templates popover and clicks the Interface ID template — the field switches to the $local:id template value inside the template-offering input (plain word tokens stay typeable; only braced context refs chip).',
       },
     },
   },
@@ -652,3 +805,163 @@ export const TemplateWithItemsCanBeSelected: StoryObj<typeof meta> = {
     await _testsWaitForText('Testing Hash');
   },
 };
+
+/* One group, four items covering every affordance combination:
+   - "Attachment Body"       — leaf, LONG example  → "?" (right) only
+   - "Attachment Name"       — leaf, short example → no actions at all
+   - "Message Author Props"  — hash with children, LONG example (the whole
+     object) → BOTH: the "+" select action (left) and the "?" (right)
+   - "Delivery Flags"        — hash with children, short example → "+" only
+   The sentinel at the very end proves truncation in the picker and
+   completeness in the modal. */
+const longExampleTemplates = {
+  gmail_attachment: {
+    display_name: 'New Attachment',
+    short_desc: 'Data from the attachment trigger',
+    app: 'Gmail',
+    items: [
+      {
+        name: 'attachment_body',
+        display_name: 'Attachment Body',
+        value: '$data:{on_attachment.data}',
+        type: 'data',
+        example_value: LONG_EXAMPLE_VALUE,
+      },
+      {
+        name: 'attachment_name',
+        display_name: 'Attachment Name',
+        value: '$data:{on_attachment.name}',
+        type: 'string',
+        example_value: 'invoice.pdf',
+      },
+      {
+        name: 'author',
+        display_name: 'Message Author Properties',
+        value: '$data:{on_attachment.author}',
+        type: 'hash',
+        // A parent's example is the whole object, so it goes long almost by
+        // definition — this is the "+ AND ?" case.
+        example_value: {
+          name: 'Ada Lovelace',
+          email: 'ada@example.com',
+          signature: LONG_EXAMPLE_VALUE.slice(0, 600),
+        },
+        items: [
+          {
+            name: 'author_name',
+            display_name: 'Name',
+            value: '$data:{on_attachment.author.name}',
+            type: 'string',
+            example_value: 'Ada Lovelace',
+          },
+          {
+            name: 'author_email',
+            display_name: 'Email',
+            value: '$data:{on_attachment.author.email}',
+            type: 'string',
+            example_value: 'ada@example.com',
+          },
+        ],
+      },
+      {
+        name: 'flags',
+        display_name: 'Delivery Flags',
+        value: '$data:{on_attachment.flags}',
+        type: 'hash',
+        // Small object: the serialized example stays under the preview
+        // threshold, so this parent keeps ONLY the "+" select action.
+        example_value: { read: true },
+        items: [
+          {
+            name: 'flags_read',
+            display_name: 'Read',
+            value: '$data:{on_attachment.flags.read}',
+            type: 'bool',
+            example_value: true,
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export const LongExampleValueTruncatedWithModal: StoryObj<typeof meta> = {
+  args: {
+    component: LongStringField,
+    value: 'Some string',
+    type: 'string',
+    templates: buildTemplates(longExampleTemplates as any),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Every item-affordance combination in one picker: a leaf with a whole-base64-file example gets a single-line ellipsized preview (cut at the popover\'s actual width — no breakpoints) and the "?" action (right) opening the full value in a modal; a hash parent whose own example object is long gets BOTH the "+" select action (left) and the "?"; a small hash parent keeps only the "+"; and a short leaf keeps its full wrapped preview with no actions. Neither previewing nor copying ever selects an item.',
+      },
+    },
+  },
+  play: async ({ args }) => {
+    await _testsOpenTemplates();
+    await _testsWaitForText('Attachment Body');
+
+    // The picker shows TRUNCATED previews — the long value's tail sentinel
+    // must not be in the popover…
+    const popover = document.querySelector('.reqore-popover-content');
+    await expect(popover.textContent).toContain('Example value: "JVBERi0x');
+    await expect(popover.textContent).not.toContain('THE_VERY_END');
+
+    // …and the affordances land exactly by shape: "?" on the long leaf AND
+    // the long-example hash parent (2), "+" on both hash parents (2) — the
+    // long-example parent carries both at once. The short leaf and the small
+    // parent's example stay modal-free.
+    await expect(popover.querySelectorAll('.reqore-menu-item-right-action').length).toBe(2);
+    await expect(popover.querySelectorAll('.reqore-menu-item-left-action').length).toBe(2);
+
+    // Long previews are single-line ellipsized at the RENDERED width
+    // (container-intrinsic — the same item adapts to any popover width);
+    // short previews keep normal wrapping.
+    const descriptions = popover.querySelectorAll('.reqore-button-description');
+    const longDescription = Array.from(descriptions).find((el) =>
+      el.textContent?.includes('JVBERi0x')
+    ) as HTMLElement;
+    const shortDescription = Array.from(descriptions).find((el) =>
+      el.textContent?.includes('invoice.pdf')
+    ) as HTMLElement;
+    await expect(getComputedStyle(longDescription).whiteSpace).toBe('nowrap');
+    await expect(longDescription.scrollWidth).toBeGreaterThan(longDescription.clientWidth);
+    await expect(getComputedStyle(shortDescription).whiteSpace).not.toBe('nowrap');
+
+    await _testsClickButton({ selector: '.reqore-menu-item-right-action' });
+
+    const modal = await waitFor(
+      () => {
+        const el = document.querySelector('.reqraft-template-example-value-modal');
+        if (!el) throw new Error('modal not open yet');
+        return el;
+      },
+      { timeout: 10000 }
+    );
+
+    // The modal holds the WHOLE value, down to the sentinel.
+    const textarea = modal.querySelector('textarea') as HTMLTextAreaElement;
+    await expect(textarea.value.endsWith('THE_VERY_END"')).toBe(true);
+
+    // Close it; opening/previewing must never have selected the item.
+    fireEvent.click(modal.querySelector('.reqore-drawer-close-button'));
+    await waitFor(
+      () => {
+        if (document.querySelector('.reqraft-template-example-value-modal')) {
+          throw new Error('modal still open');
+        }
+      },
+      { timeout: 10000 }
+    );
+    await expect(args.onChange).not.toHaveBeenCalled();
+
+    // End on the informative frame for the visual snapshot: the popover with
+    // the truncated preview and its "?" action visible (the assertions above
+    // close everything, which would leave the capture showing an empty field).
+    await _testsOpenTemplates();
+    await _testsWaitForText('Attachment Body');
+  },
+};

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

@@ -30,9 +30,11 @@ import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import {
   filterTemplatesByType as templatesFilterFunc,
-  findTemplate,
   getTemplateKey,
   getTemplateValue,
+  isBracedTemplateToken,
+  isCompleteTemplateToken,
+  describeTemplateReference,
   isValueTemplate,
 } from '../../../../helpers/templates';
 import { getTypeFromValue } from '../../../../helpers/validations';
@@ -72,8 +74,17 @@ export const TemplatesListProps: IReqoreDropdownProps = {
 // markup stays verbatim. `type`/`level`/`allowTemplates` are destructured
 // only to keep them off the underlying ReQore component / DOM.
 /* eslint-disable @typescript-eslint/no-unused-vars */
+// `type` is FORWARDED here, unlike the other wrappers below: the long-string
+// field consumes it to decide whether it holds one line (a `string` does, a
+// `long-string`, `hash` or `list` does not) and never spreads it to the DOM.
+// Dropping it made every string field in every FormEngine form a growing
+// textarea, so an alert rule's Internal Name took Enter.
 const LongStringField = ({ name, onChange, type, level, allowTemplates, ...rest }: any) => (
-  <LongStringFormField {...rest} onChange={(value: string) => onChange?.(name, value)} />
+  <LongStringFormField
+    {...rest}
+    type={type}
+    onChange={(value: string) => onChange?.(name, value)}
+  />
 );
 const Number = ({ name, onChange, type, level, allowTemplates, ...rest }: any) => (
   <NumberFormField {...rest} onChange={(value: number | string) => onChange?.(name, value)} />
@@ -216,8 +227,13 @@ export const TemplateDropdownSelector = memo(
     size,
     ...rest
   }: ITemplateDropdownSelectorProps) => {
-    const template = findTemplate(templates, value);
-    const label = template?.label || value || rest.label || 'Select Template';
+    // One resolver for every surface that names a reference — the picker chip
+    // here, the read-only tag, and the compact row's expression summary. The
+    // row and this editor must agree: a reference that reads as its path when
+    // the row is closed cannot read as `$data:{…}` the moment it is opened.
+    const resolved = describeTemplateReference(templates, value);
+    const template = resolved.item;
+    const label = resolved.label || rest.label || 'Select Template';
     const leftIconProps = useMemo(
       (): IReqoreButtonProps['leftIconProps'] => ({
         image: template?.metadata?.image,
@@ -335,8 +351,15 @@ export const TemplateField = memo(
 
     useEffect(() => {
       if (!isTemplate && isValueTemplate(value) && allowTemplates) {
-        // Do not set the template value if the value is a string in auto mode
-        if (type === 'auto' && getTypeFromValue(value) === 'string') {
+        // In auto mode, leave user-typed dollar-strings alone ('$foo: hello'
+        // passes the loose check) — but a string that IS one well-formed token
+        // ($data:{…}, $config:item) must still flip into template mode, or an
+        // arg whose value hydrates after mount is stuck rendering raw text.
+        if (
+          type === 'auto' &&
+          getTypeFromValue(value) === 'string' &&
+          !isCompleteTemplateToken(value)
+        ) {
           return;
         }
 
@@ -359,6 +382,15 @@ export const TemplateField = memo(
 
     const showTemplateToggle = allowCustomValues && allowTemplates && !rest.arg_schema;
 
+    // Only a BRACED context ref (`$data:{…}` — machine-written, nobody types
+    // one) renders as the picker chip (named via `resolveTemplateLabel`)
+    // rather than as its raw text in a string editor. Plain word-path tokens
+    // (`$local:id`) are typeable, so per the build #123 review they keep the
+    // input that offers templates while typing. Mixed text-and-token strings
+    // keep the string editor too; the chip-in-editor treatment arrives with
+    // the rich-text string mode.
+    const templateValueIsBracedToken = isBracedTemplateToken(templateValue);
+
     const templateSupportsCustomValues =
       allowCustomValues && type === 'string' && !hasOnlyAllowedValues;
     const showTemplatesDropdown =
@@ -374,6 +406,11 @@ export const TemplateField = memo(
       showTemplatesDropdown;
 
     const Component = componentFromType ? ComponentMap[type] : Comp;
+    // Only a ComponentMap component gets `type`: it is ours and CONSUMES the
+    // prop (the long-string field needs it to know whether it holds one line)
+    // rather than spreading it onto the DOM. A caller-supplied `Comp` is someone
+    // else's, which is why `type` was kept off this call in the first place.
+    const componentTypeProp = componentFromType ? { type } : {};
     const fieldAriaLabel = rest['aria-label'] ?? label ?? rest.display_name ?? name;
 
     const filteredTemplates = useMemo<IReqoreFormTemplates>(():
@@ -746,13 +783,14 @@ export const TemplateField = memo(
             name={name}
             level={level}
             {...rest}
+            {...componentTypeProp}
             aria-label={fieldAriaLabel}
             className={`${className} template-selector`}
             templates={componentTemplates}
           />
         ) : null}
 
-        {isTemplate && templateSupportsCustomValues ? (
+        {isTemplate && templateSupportsCustomValues && !templateValueIsBracedToken ? (
           <LongStringField
             className='template-selector'
             type='string'
@@ -769,7 +807,8 @@ export const TemplateField = memo(
           />
         ) : null}
 
-        {showTemplatesDropdown ? (
+        {showTemplatesDropdown ||
+        (isTemplate && templateSupportsCustomValues && templateValueIsBracedToken) ? (
           <TemplateDropdownSelector
             allowCustomValues={allowCustomValues}
             templates={templates}

package/src/components/form/fields/template/__fixtures__/longExampleValue.ts

@@ -0,0 +1,7 @@
+/* A deterministic "whole base64 file" example value — the payload class the
+   example-value modal exists for (an email attachment body). No spaces on
+   purpose: the unbroken run is what breaks naive rendering. The sentinel
+   proves a consumer holds the value to the very end. */
+export const LONG_EXAMPLE_VALUE = `${'JVBERi0xLjcKJcTl8uXrp9Og0MTGCjQgMCBvYmoKPDwvRmlsdGVyL0ZsYXRlRGVjb2RlCg=='.repeat(
+  90
+)}THE_VERY_END`;

package/src/components/form/index.tsx

@@ -21,6 +21,7 @@ export * from './fields/rich-text/RichText';
 export * from './fields/select/Select';
 export * from './fields/select/SelectCollection';
 export * from './fields/string/String';
+export * from './fields/template/ExampleValueModal';
 export * from './fields/template/TemplateField';
 export * from './engine/FormEngine';
 export * from './engine/optionActions';

package/src/helpers/common.ts

@@ -1,5 +1,5 @@
 import { IReqoreRichTextEditorProps } from '@qoretechnologies/reqore/dist/components/RichTextEditor';
-import { TQorusFormFieldSchema } from '@qoretechnologies/ts-toolkit';
+import { TQorusFormFieldSchema, TQorusFormOperatorValue } from '@qoretechnologies/ts-toolkit';
 import yaml from 'js-yaml';
 
 // ─── Typed ↔ YAML helpers ──────────────────────────────────────────────────────
@@ -163,6 +163,16 @@ export const richtextToSegments = (
   return segments;
 };
 
+/**
+ * An operator value as the list it logically is.
+ *
+ * An option's `op` holds either one operator or a chain of them, and both
+ * spellings are legitimate on the wire. Every reader wants the list.
+ */
+export const fixOperatorValue = (
+  operator: TQorusFormOperatorValue
+): (string | null | undefined)[] => (Array.isArray(operator) ? operator : [operator]);
+
 export const insertAtIndex = (array: any[] = [], index = 0, value: any): any[] => {
   return [...array.slice(0, index), value, ...array.slice(index)];
 };