@qoretechnologies/reqraft 0.10.44-pr.95.gb67bfb7 → 0.10.44

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

@@ -1,17 +1,31 @@
 import { ReqoreTextarea } from '@qoretechnologies/reqore';
 import { IReqoreTextareaProps } from '@qoretechnologies/reqore/dist/components/Textarea';
-import { ChangeEvent, useCallback, useEffect, useState } from 'react';
+import { ChangeEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
 import { useDebounce } from 'react-use';
+import {
+  flattenToSingleLine,
+  hasLineBreak,
+  isSingleLineStringType,
+} from '../../../../helpers/singleLineString';
 
 export interface ILongStringFormFieldProps extends Omit<IReqoreTextareaProps, 'onChange'> {
   value?: string;
   onChange?: (value: string, event?: ChangeEvent<HTMLTextAreaElement>) => void;
+  /**
+   * The field's declared type, which decides whether it holds one line.
+   *
+   * Without it every string field is a growing textarea, so a technical name, a
+   * version and an IP address all accept Enter — and become YAML keys, class
+   * names and URLs with a newline in them. See `helpers/singleLineString`.
+   */
+  type?: string;
 }
 
 export const LongStringFormField = ({
   value,
   onChange,
   onClearClick,
+  type,
   ...rest
 }: ILongStringFormFieldProps) => {
   const [localValue, setLocalValue] = useState<string>(value ?? '');
@@ -32,9 +46,32 @@ export const LongStringFormField = ({
     [localValue, onChange]
   );
 
-  const handleChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>): void => {
-    setLocalValue(event.target.value);
-  }, []);
+  const singleLine = isSingleLineStringType(type);
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLTextAreaElement>): void => {
+      const raw = event.target.value;
+      // 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);
+    },
+    [singleLine]
+  );
+
+  // Stop Enter before it inserts anything, so the caret does not jump to a
+  // second line that is then flattened away under the cursor.
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLTextAreaElement>): void => {
+      if (singleLine && event.key === 'Enter') {
+        event.preventDefault();
+      }
+      (rest as { onKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void }).onKeyDown?.(
+        event
+      );
+    },
+    [singleLine, rest.onKeyDown]
+  );
 
   const handleClearClick = useCallback(() => {
     setLocalValue('');
@@ -44,12 +81,16 @@ export const LongStringFormField = ({
 
   return (
     <ReqoreTextarea
-      scaleWithContent
+      // A one-line field must not grow, and must not offer a resize grip that
+      // implies it can hold more than it will keep.
+      scaleWithContent={!singleLine}
+      rows={singleLine ? 1 : undefined}
       fluid
       value={localValue}
       onChange={handleChange}
       onClearClick={handleClearClick}
       {...rest}
+      onKeyDown={handleKeyDown}
     />
   );
 };

package/src/components/form/fields/schema-definition/SchemaDefinitionField.stories.tsx

@@ -55,6 +55,11 @@ export const Empty: Story = {
     await expect(canvas.getByText('Tables')).toBeInTheDocument();
     await expect(canvas.getByText('Sequences')).toBeInTheDocument();
     await expect(canvas.getByText('Migrations')).toBeInTheDocument();
+    // The form rows fade in after the chrome — wait for the Schema tab's own
+    // catalogue rows, or the capture shows empty shells where the form goes
+    // (rejected on build #123 for exactly that).
+    await expect(await canvas.findByText('Schema Name')).toBeInTheDocument();
+    await expect(await canvas.findByText('Version')).toBeInTheDocument();
   },
 };
 

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

@@ -0,0 +1,114 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, fireEvent, fn, waitFor } from 'storybook/test';
+import { LONG_EXAMPLE_VALUE } from './__fixtures__/longExampleValue';
+import { ReqraftTemplateExampleValueModal } from './ExampleValueModal';
+
+const meta = {
+  component: ReqraftTemplateExampleValueModal,
+  title: 'Components/Form/TemplateExampleValueModal',
+  args: {
+    // Standalone render — in the app the modal rides reqore's global modal
+    // queue, whose wrapper injects `isOpen`/`onClose` itself.
+    isOpen: true,
+    label: 'Attachment Body',
+    value: LONG_EXAMPLE_VALUE,
+    onClose: fn(),
+  },
+} as Meta<typeof ReqraftTemplateExampleValueModal>;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The full example-value viewer for template items whose value is too long for the picker: the whole value in a selectable, scrollable textarea filling the modal body, with a Copy action. Copy surfaces a notification either way — success, or a danger notice when the browser denies clipboard access — never an unhandled rejection.',
+      },
+    },
+  },
+  play: async () => {
+    const modal = await waitFor(
+      () => {
+        const el = document.querySelector('.reqraft-template-example-value-modal');
+        if (!el) throw new Error('modal not rendered yet');
+        return el;
+      },
+      { timeout: 10000 }
+    );
+
+    // The modal holds the WHOLE value — down to the sentinel at the very end.
+    const textarea = modal.querySelector('textarea') as HTMLTextAreaElement;
+    await expect(textarea.value).toBe(LONG_EXAMPLE_VALUE);
+    await expect(textarea.value.endsWith('THE_VERY_END')).toBe(true);
+
+    // Copy notifies (success locally, clipboard-denied danger in headless CI).
+    const copy = Array.from(modal.querySelectorAll('button')).find((button) =>
+      button.textContent?.includes('Copy')
+    );
+    await expect(copy).toBeTruthy();
+    fireEvent.click(copy);
+    await waitFor(
+      () => {
+        if (!document.querySelector('.reqore-notification')) {
+          throw new Error('no notification yet');
+        }
+      },
+      { timeout: 10000 }
+    );
+  },
+};
+
+export const Mobile: StoryObj<typeof meta> = {
+  args: {
+    // The overridable strings double as the prop-passthrough coverage: the
+    // play below asserts THIS notification text, proving consumers (e.g.
+    // qorus-ide under Lingui) can supply translated copy.
+    copyLabel: 'Copy value',
+    copyNotificationContent: 'Value copied',
+    copyFailedNotificationContent: 'Copy was blocked',
+  },
+  parameters: {
+    qlip: { viewport: { width: 390, height: 844 } },
+    docs: {
+      description: {
+        story:
+          'The phone presentation of the full-value modal — the textarea still fills the modal body at phone width, and every user-visible string (Copy label, both notifications) is prop-overridden here, which doubles as coverage that consumers can pass translated copy.',
+      },
+    },
+  },
+  play: async () => {
+    const modal = await waitFor(
+      () => {
+        const el = document.querySelector('.reqraft-template-example-value-modal');
+        if (!el) throw new Error('modal not rendered yet');
+        return el;
+      },
+      { timeout: 10000 }
+    );
+
+    const textarea = modal.querySelector('textarea') as HTMLTextAreaElement;
+    await expect(textarea.value).toBe(LONG_EXAMPLE_VALUE);
+
+    // The overridden copy label renders…
+    const copy = Array.from(modal.querySelectorAll('button')).find((button) =>
+      button.textContent?.includes('Copy value')
+    );
+    await expect(copy).toBeTruthy();
+
+    // …and the overridden notification content is what surfaces (success or
+    // clipboard-denied, both prop-supplied).
+    fireEvent.click(copy);
+    await waitFor(
+      () => {
+        const notification = document.querySelector('.reqore-notification');
+        if (!notification) throw new Error('no notification yet');
+        const text = notification.textContent || '';
+        if (!text.includes('Value copied') && !text.includes('Copy was blocked')) {
+          throw new Error(`unexpected notification: ${text}`);
+        }
+      },
+      { timeout: 10000 }
+    );
+  },
+};

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');
+  },
+};