@qoretechnologies/reqraft 0.10.66-pr.145.gcb1e59d → 0.10.66

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

@@ -1,2740 +0,0 @@
-import {
-  ReqoreButton,
-  ReqoreCollapsibleContent,
-  ReqoreControlGroup,
-  ReqoreDropdown,
-  ReqoreIcon,
-  ReqoreMessage,
-  ReqoreP,
-  ReqoreTag,
-  ReqoreTagGroup,
-} from '@qoretechnologies/reqore';
-import { IReqoreDropdownItem } from '@qoretechnologies/reqore/dist/components/Dropdown/list';
-import { RowMenuContext, useRowMenuRegistry } from './rowMenuContext';
-import { IReqorePanelAction } from '@qoretechnologies/reqore/dist/components/Panel';
-import { optionActionAsMenuItem, resolveOptionActions, splitOptionActions } from './optionActions';
-import {
-  IQorusFormField,
-  IQorusFormSchema,
-  TQorusForm,
-  TQorusFormFieldSchema,
-} from '@qoretechnologies/ts-toolkit';
-import flatten from 'lodash/flatten';
-import isEqual from 'lodash/isEqual';
-import size from 'lodash/size';
-import React, { memo } from 'react';
-import { useContextSelector } from 'use-context-selector';
-import { hasAllDependenciesFullfilled, parseDependency } from '../../../helpers/validations';
-import { findTemplate, isValueTemplate } from '../../../helpers/templates';
-import { getDefaultValue, richtextToSegments, richtextToString } from '../../../helpers/common';
-import { fieldHasLongDescription } from '../../../helpers/fieldDescription';
-import { hasTemplateText, templateTextSegments } from '../../../helpers/templateText';
-import { ReadOnlyTemplateTag } from '../fields/template/ReadOnlyTemplateTag';
-import { TemplateText } from '../fields/template/TemplateText';
-import { describeCodeSize, formatCodeChars, formatCodeLines } from '../../codeSize';
-import { Description } from '../../Description';
-import { useMarkdownRenderer } from '../../Description/markdownRendererContext';
-import { FocusedEditing } from '../../FocusedEditing';
-import { CompactRowContext } from './compactRowContext';
-import { CALM_REQUIRED_LABEL, CALM_REQUIRED_READ_LABEL, useIsCalmForm } from './formAppearance';
-import { revealRow } from './revealRow';
-import {
-  StyledActionSlot,
-  StyledCardHeading,
-  StyledCardLabel,
-  StyledCodePreview,
-  StyledColorSwatch,
-  StyledColumn,
-  StyledEditCard,
-  StyledLabelBlock,
-  StyledAbsorbedField,
-  StyledLabelDesc,
-  StyledRowActions,
-  StyledRowInset,
-  StyledRowLabel,
-  StyledRowValue,
-  StyledStatusDot,
-} from './compactRowStyles';
-import { getShownSchemaMessages, getOptionFieldMessages } from './OptionFieldMessages';
-import { findRowFocusTarget, isClosedPickerTrigger } from './rowFocus';
-import { RowOpenPickerContext } from './rowOpenPicker';
-import { SchemaDataView, canRenderWithSchema } from './_structuredData/SchemaDataView';
-import { queryUnlessCancelled } from '../../../utils/queryUnlessCancelled';
-import {
-  colorToCss,
-  findAllowedValueOption,
-  formatBytes,
-  formatOptionValue,
-  getAllowedValueIcon,
-  getAllowedValueImage,
-  getFileSize,
-  getHashEntries,
-  getReadFirstStatus,
-  getValueType,
-  isFixedCompactAllowedValueOption,
-  isOptionValueEmpty,
-  optionHasImages,
-  getExpressionAst,
-} from './readFirst';
-import { StructuredDataView } from './_structuredData/StructuredDataView';
-import { DpqlRendering } from '../expressions/DpqlRendering';
-import { TFieldWithOwnTemplates } from './rendererTypes';
-
-/**
- * Does this markdown value have more document in it than one row can show?
- *
- * Blank trailing lines do not count: a textarea leaves them behind constantly,
- * and a one-line description that gained a stray newline must not suddenly
- * grow an inset.
- */
-const isMultilineMarkdown = (value: string): boolean => value.trim().includes('\n');
-
-// Types that are not hashes by declaration but hold a plain object as their
-// value, and so get the hash row's structured preview under their summary.
-// Kept explicit: a `schema` or `richtext` value is an object too, and each of
-// those already has a preview of its own.
-const OBJECT_VALUED_PREVIEW_TYPES = new Set([
-  'data-provider',
-  'options',
-  'system-options',
-  'processor-mappings',
-]);
-
-// Types whose editors are too tall/nested to edit in-row — these keep the edit
-// card; `arg_schema` and operator fields are excluded separately.
-const COMPACT_COMPLEX_TYPES = new Set([
-  'hash',
-  'free-hash',
-  'list',
-  'free-list',
-  'array',
-  'array-auto',
-  'file',
-  'file-string',
-  'richtext',
-  'long-string',
-  'any',
-  'auto',
-  'schema',
-  'schema-definition',
-  'data-provider',
-  'processor-mappings',
-  'options',
-  'system-options',
-  'byte-size',
-  'timeout',
-  'markdown',
-  'method-name',
-  'class-connectors',
-  'class-array',
-  'yaml',
-]);
-
-// Card editors that hold a SINGLE value through one text-bearing input — their
-// built-in ReqoreInput clear duplicates the card's own "Clear value" action, so
-// we suppress it (the card trash action is the single source). Structural/multi-input
-// editors (hash, list, schema…) and polymorphic ones (auto/any) are NOT listed:
-// their per-sub-field clears are distinct affordances and must stay, while the
-// card ✕ clears the whole value. (Operators force a card on a scalar value, so
-// 'string' covers them — and `expr`, which is ui_type 'string'.)
-const COMPACT_SINGLE_VALUE_TYPES = new Set([
-  'string',
-  'long-string',
-  'markdown',
-  'richtext',
-  'byte-size',
-  'timeout',
-  'method-name',
-]);
-
-// One read-first row: label | value | action collapsed; the real editor (the
-// classic renderOption) expanded. `hidden` = search-surfaced optional —
-// activating the row adds the field first.
-/**
- * The text inside a rich-text envelope, when a list item is one.
- *
- * An option like Gmail's `to` is `type: "list"`, `element_type: "string"`,
- * `supports_templates: true`: each element is a plain string that may carry
- * template tags, so its editor is a rich-text one and the element value arrives
- * wrapped as `{type: "richtext", value: [{type: "paragraph", …}]}`.
- *
- * That envelope is a string in a coat, not structured data. The hash-list test
- * unwraps `item.value`, found the Slate document — an object — and classed a
- * list of email addresses as a list of hashes, so the row drew an expandable
- * `type / children / text` tree instead of the address the operator typed.
- */
-export const richtextItemText = (item: unknown): string | undefined =>
-  item && typeof item === 'object' && (item as { type?: unknown }).type === 'richtext' ?
-    richtextToString((item as { value?: Parameters<typeof richtextToString>[0] }).value)
-  : undefined;
-
-export const CompactRow = memo(
-  ({
-    optionName,
-    optionField,
-    hidden = false,
-    clustered = false,
-    clusterFirst = false,
-    clusterLast = false,
-    absorbedFields,
-  }: {
-    optionName: string;
-    optionField: IQorusFormField;
-    hidden?: boolean;
-    /** Siblings this row renders inside its own container instead of leaving
-     *  them a row each — declared by the schema's `absorb_fields`. The pair it
-     *  exists for is a code editor and its language: one decision, so one
-     *  element. */
-    absorbedFields?: string[];
-    // Rendered inside a required-group cluster: leading status node + rail, and no
-    // per-row "one of" chip (the cluster header carries it). first/last trim the
-    // rail segment so it spans node-to-node, not past the end members.
-    clustered?: boolean;
-    clusterFirst?: boolean;
-    clusterLast?: boolean;
-  }) => {
-    const readOnly = useContextSelector(CompactRowContext, (v) => v.readOnly);
-    // The look only — see `TFormEngineAppearance`. Nothing a row DOES reads it.
-    const calm = useIsCalmForm();
-    const commitMode = useContextSelector(CompactRowContext, (v) => v.commitMode);
-    const options = useContextSelector(CompactRowContext, (v) => v.options);
-    // Whether this field's emptiness is a fault yet: the person has opened it and left,
-    // or the host reported a submit attempt. Before that a required field is only to
-    // fill in, and says so in the quiet colour.
-    const visited = useContextSelector(
-      CompactRowContext,
-      (v) => v.revealRequired || !!v.visitedOptions?.includes(optionName)
-    );
-
-    // An absorbed field keeps its own name — it is a different field, not a
-    // property of its host — so the label comes from its schema exactly as it
-    // would on its own row.
-    const getAbsorbedLabel = (absorbedName: string): string =>
-      (options?.[absorbedName] as { display_name?: string } | undefined)?.display_name ||
-      absorbedName;
-    const codePreviewRenderer = useContextSelector(CompactRowContext, (v) => v.codePreviewRenderer);
-    const markdownRenderer = useMarkdownRenderer();
-    const operators = useContextSelector(CompactRowContext, (v) => v.operators);
-    const focusedEditing = useContextSelector(CompactRowContext, (v) => v.focusedEditing);
-    const showFieldTypes = useContextSelector(CompactRowContext, (v) => v.showFieldTypes);
-    const showAllDescriptions = useContextSelector(CompactRowContext, (v) => v.showAllDescriptions);
-    const isExpanded = useContextSelector(CompactRowContext, (v) =>
-      v.expandedOptions.includes(optionName)
-    );
-    const isHighlighted = useContextSelector(CompactRowContext, (v) =>
-      v.highlightedOptions.includes(optionName)
-    );
-    const isFlashed = useContextSelector(CompactRowContext, (v) =>
-      v.flashedOptions.includes(optionName)
-    );
-    const setHighlightedOptions = useContextSelector(
-      CompactRowContext,
-      (v) => v.setHighlightedOptions
-    );
-    const setFocusedEditing = useContextSelector(CompactRowContext, (v) => v.setFocusedEditing);
-    const readRowHeights = useContextSelector(CompactRowContext, (v) => v.readRowHeights);
-    const onReadOnlyActivate = useContextSelector(
-      CompactRowContext,
-      (v) => v.onReadOnlyActivate
-    );
-
-    /**
-     * The floor recorded when a row is opened lasts until the author changes
-     * something.
-     *
-     * `activate()` measures the row as it was READ and pins that as the
-     * editing row's `min-height`, so opening a row cannot yank the content
-     * below it up under the pointer. That is right for the transition and
-     * wrong for the rest of the session: a row that was tall because it
-     * carried a warning keeps that height after the author fixes the very
-     * thing the warning was about, leaving a large empty box where the
-     * explanation used to be — reported as "the chip is removed, but the
-     * vertical size of the option remains the same".
-     *
-     * Released on the first change to the value, which is exactly the moment
-     * the author has acted and the row should settle to what it now holds.
-     * Nothing is yanked by that: the author caused it and is looking at it.
-     *
-     * Keyed on a STRING rather than the value itself. A form value is often a
-     * fresh object on every render (`{source, value}` for a reference), so a
-     * dependency on its identity would drop the floor on the first re-render
-     * and the transition it exists for would never be smoothed at all.
-     */
-    const valueKey =
-      optionField?.value === null || typeof optionField?.value !== 'object' ?
-        String(optionField?.value)
-      : JSON.stringify(optionField?.value);
-
-    /* `valueKey` alone, deliberately - see above. No eslint-disable: this repo
-       does not load `react-hooks`, so a suppression for a rule that is not
-       there is itself an error, and the pre-push lint refuses the push. */
-    React.useEffect(() => {
-      delete readRowHeights.current[optionName];
-    }, [valueKey]);
-    const originalValue = useContextSelector(CompactRowContext, (v) => v.originalValue);
-    const availableOptions = useContextSelector(CompactRowContext, (v) => v.availableOptions);
-    const requiredGroupsInfo = useContextSelector(CompactRowContext, (v) => v.requiredGroupsInfo);
-    const handleValueChange = useContextSelector(CompactRowContext, (v) => v.handleValueChange);
-    const toggleExpandedOption = useContextSelector(
-      CompactRowContext,
-      (v) => v.toggleExpandedOption
-    );
-    const flashOption = useContextSelector(CompactRowContext, (v) => v.flashOption);
-    const hasOptionChanged = useContextSelector(CompactRowContext, (v) => v.hasOptionChanged);
-    const handleOptionLabelClick = useContextSelector(
-      CompactRowContext,
-      (v) => v.handleOptionLabelClick
-    );
-    const removeSelectedOption = useContextSelector(
-      CompactRowContext,
-      (v) => v.removeSelectedOption
-    );
-    const getTypeForOption = useContextSelector(CompactRowContext, (v) => v.getTypeForOption);
-    const isRendererOnly = useContextSelector(CompactRowContext, (v) => v.isRendererOnly);
-    const confirmAction = useContextSelector(CompactRowContext, (v) => v.confirmAction);
-    const optionActions = useContextSelector(CompactRowContext, (v) => v.optionActions);
-    const collapseOptionActions = useContextSelector(
-      CompactRowContext,
-      (v) => v.collapseOptionActions
-    );
-    const renderOption = useContextSelector(CompactRowContext, (v) => v.renderOption);
-    const theme = useContextSelector(CompactRowContext, (v) => v.theme);
-    const cMuted = useContextSelector(CompactRowContext, (v) => v.cMuted);
-    const templates = useContextSelector(CompactRowContext, (v) => v.templates);
-    const cKey = useContextSelector(CompactRowContext, (v) => v.cKey);
-    const cDivider = useContextSelector(CompactRowContext, (v) => v.cDivider);
-    const cHover = useContextSelector(CompactRowContext, (v) => v.cHover);
-    const cDanger = useContextSelector(CompactRowContext, (v) => v.cDanger);
-    const cWarning = useContextSelector(CompactRowContext, (v) => v.cWarning);
-    const cInfo = useContextSelector(CompactRowContext, (v) => v.cInfo);
-    const cText = useContextSelector(CompactRowContext, (v) => v.cText);
-    // A field's NAME: full text colour by default; grey in the calm look, so the
-    // value beside it is what the eye lands on. One colour for the read row, the
-    // open row and the edit card, so a name does not change as its field opens.
-    const cLabel = calm ? `${cText}b3` : cKey;
-    // A markdown value renders as a document in the row's inset; the host's
-    // renderer when it supplied one, reqraft's own otherwise.
-
-    // Value-cell content: colour adds a swatch, file an icon + size; hash keeps
-    // its "N fields" summary (sub-fields reveal beneath the row).
-    const renderReadFirstValue = (
-      field: IQorusFormField,
-      schema: TQorusFormFieldSchema | undefined,
-      formatted: string,
-      // An editable row gets one line and an ellipsis — its value line is a
-      // summary you click to open. A read-only row is the only rendering the
-      // value gets, so it wraps.
-      full = false
-    ): React.ReactNode => {
-      const valueType = getValueType(field, schema);
-      const wrapStyle: React.CSSProperties = {
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: 6,
-        minWidth: 0,
-        maxWidth: '100%',
-        ...(full ? { flexWrap: 'wrap' } : {}),
-      };
-      const textStyle: React.CSSProperties =
-        full ?
-          { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }
-        : { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
-
-      /* A row has to SAY when its value is an expression.
-      
-         Reported from the live IDE: an author accepted the *Use as expression*
-         offer on one field and not on the other, and the two rows read exactly
-         the same - `1 + 2` and `2 + 1`, both plain text - so there was no way
-         to tell which had been converted. The assertion then compared the
-         string `"1 + 2"` against the number `3` and the author had no way to
-         see why.
-      
-         The same Σ the expression editor uses, so the mark means the same thing
-         wherever it appears. */
-      const withExpressionMarker = (rendered: React.ReactNode): React.ReactNode => {
-        if (!(field as { is_expression?: boolean })?.is_expression) {
-          return rendered;
-        }
-
-        return (
-          <span style={{ ...wrapStyle, gap: 4 }}>
-            <ReqoreIcon
-              icon='Functions'
-              size='tiny'
-              /* A stable hook: reqore renders every icon as a bare
-                 `.reqore-icon`, so without this there is nothing to select the
-                 mark by — in a test or in a consumer's stylesheet. */
-              className='reqraft-expression-marker'
-              /* Opacity through `effect`, which is how this repo dims a reqore
-                 component (see the card's `short_desc` below); only the flex
-                 rule, which reqore has no prop for, stays inline. */
-              effect={{ opacity: 0.7 }}
-              style={{ flexShrink: 0 }}
-              tooltip='This value is an expression'
-            />
-            {rendered}
-          </span>
-        );
-      };
-
-      if (valueType === 'rgbcolor') {
-        const swatch = colorToCss(field?.value);
-        return (
-          <span
-            style={
-              swatch ?
-                {
-                  ...wrapStyle,
-                  // a slight wash of the chosen colour behind the swatch + hex
-                  background: `color-mix(in srgb, ${swatch} 14%, transparent)`,
-                  padding: '1px 8px',
-                  borderRadius: 4,
-                }
-              : wrapStyle
-            }
-          >
-            {swatch ?
-              <StyledColorSwatch aria-hidden $color={swatch} $border={cDivider} />
-            : null}
-            <span style={textStyle}>{formatted}</span>
-          </span>
-        );
-      }
-
-      if (valueType === 'file') {
-        const fileSize = getFileSize(field?.value);
-        // Match the File editor's chip: info-blue, FileLine icon, size as the
-        // trailing key pill (the editor renders it as a ReqoreButton badge).
-        return (
-          <ReqoreTag
-            size='small'
-            minimal
-            intent='info'
-            icon='FileLine'
-            label={formatted}
-            labelKey={fileSize !== undefined ? formatBytes(fileSize) : undefined}
-          />
-        );
-      }
-
-      if (valueType === 'bool' || valueType === 'boolean') {
-        // Calm: Yes and No are words. Neither is a status — "No" is not a
-        // failure — so neither is coloured.
-        if (calm) {
-          return <span style={textStyle}>{formatted}</span>;
-        }
-        const truthy = field?.value === true || field?.value === 'true';
-        return (
-          <ReqoreTag
-            size='small'
-            minimal
-            intent={truthy ? 'success' : 'danger'}
-            label={formatted}
-          />
-        );
-      }
-
-      // A test's cases read as CHIPS here, the same as the names in the table
-      // this row opens (`CasesTable`, qorus-ide). `test-cases` is a
-      // renderer-only ui_type, so it reached none of the branches above and
-      // fell through to the generic summary, which flattens the array of case
-      // hashes to a comma-joined string — "case_1, resolved_expected_values".
-      // A case name is an identifier the author types into `$.` references and
-      // skip conditions, and a chip is how the rest of the product writes an
-      // identifier down; the table already agreed, so the collapsed row was the
-      // only surface still printing them as prose.
-      //
-      // `intent` is a FILL, which is what a tag is — the hazard the other
-      // branches warn about is only ever using an intent as a TEXT colour.
-      //
-      // Falls through to the plain summary unless EVERY entry yields a name: a
-      // partly-chipped row would read as though the unnamed cases were missing.
-      if (valueType === 'test-cases' && Array.isArray(field?.value)) {
-        const caseNames = (field.value as unknown[]).map((item) => {
-          const name = (item as { name?: unknown } | null | undefined)?.name;
-          return typeof name === 'string' ? name.trim() : '';
-        });
-        if (caseNames.length > 0 && caseNames.every((name) => name !== '')) {
-          return (
-            <ReqoreControlGroup
-              gapSize='tiny'
-              verticalAlign='center'
-              // An editable row is ONE line: further chips clip with the row
-              // instead of growing it. A read-only row is the only rendering
-              // the value gets, so it wraps and shows every case.
-              wrap={full}
-              style={full ? undefined : { minWidth: 0, overflow: 'hidden' }}
-            >
-              {caseNames.map((name, index) => (
-                <ReqoreTag
-                  key={`${name}-${index}`}
-                  className='options-readfirst-case-tag'
-                  size='small'
-                  minimal
-                  intent='info'
-                  label={name}
-                />
-              ))}
-            </ReqoreControlGroup>
-          );
-        }
-      }
-
-      // Code-editor read summary: replace the truncated string with a chip
-      // showing line count + character count. The actual code renders below
-      // the row as a monospace `<pre>` inside a `ReqoreCollapsibleContent` —
-      // see `showCodePreview` below. Keeps the row height fixed while making
-      // multi-line source readable without opening the full editor.
-      if (valueType === 'code-editor' && typeof field?.value === 'string') {
-        // An absorbed sibling has no row of its own, so a COLLAPSED host has to
-        // carry its value or it disappears from the form entirely when closed.
-        // It reads as a chip beside the size chip — "Qore · 62 lines" — which
-        // is the same summary the read-only interface pages already show.
-        return (
-          <ReqoreControlGroup gapSize='tiny' verticalAlign='center' wrap>
-            {(absorbedFields ?? []).map((absorbedName) => {
-              const absorbedValue = (
-                availableOptions?.[absorbedName] as IQorusFormField | undefined
-              )?.value;
-              if (absorbedValue === undefined || absorbedValue === null || absorbedValue === '') {
-                return null;
-              }
-              return (
-                <ReqoreTag
-                  key={absorbedName}
-                  className='options-readfirst-absorbed-tag'
-                  size='small'
-                  minimal
-                  label={String(absorbedValue)}
-                  tooltip={getAbsorbedLabel(absorbedName)}
-                />
-              );
-            })}
-          </ReqoreControlGroup>
-        );
-      }
-
-      // Markdown read summary: the row prints the value's prose (the markdown
-      // markers are stripped by `formatOptionValue`), so a multi-line document
-      // gets a chip carrying what the one truncated line cannot -- how much
-      // more there is -- and renders in full in the inset below, exactly as a
-      // code value does. A single-line value needs neither: its one line IS
-      // the whole document, already rendered as prose.
-      if (
-        valueType === 'markdown' &&
-        typeof field?.value === 'string' &&
-        isMultilineMarkdown(field.value)
-      ) {
-        // Prose only. The line count is metadata ABOUT the field, so it sits
-        // under the field's name (see `lineCountNote`) rather than in front of
-        // its content — the value column carries the value and nothing else.
-        //
-        // This branch is reached only when no host renderer is present; with one,
-        // the whole value line is suppressed in favour of the rendered document
-        // below (see `showMarkdownPreview` at the value span).
-        return <span style={textStyle}>{formatted}</span>;
-      }
-
-      // Selected allowed-value / enum item with a logo (e.g. language images):
-      // render it beside the value, where it belongs — not as the field's icon.
-      const allowedImage = getAllowedValueImage(field?.value, schema);
-      if (allowedImage) {
-        return (
-          <span style={wrapStyle}>
-            <ReqoreIcon image={allowedImage} size='16px' style={{ flexShrink: 0 }} />
-            <span style={textStyle}>{formatted}</span>
-          </span>
-        );
-      }
-
-      // The same, for an option whose mark is an ICON rather than a logo. Only
-      // images were drawn here, so a list whose entries are told apart by their
-      // icon — every interface kind is a bare word, `Service`, `Job`, `Qog` —
-      // showed the mark while choosing and lost it the moment the row went
-      // read-only, which is where a reader spends most of their time.
-      const allowedIcon = getAllowedValueIcon(field?.value, schema);
-      if (allowedIcon) {
-        return (
-          <span style={wrapStyle}>
-            <ReqoreIcon icon={allowedIcon as any} size='16px' style={{ flexShrink: 0 }} />
-            <span style={textStyle}>{formatted}</span>
-          </span>
-        );
-      }
-
-      // Template value ($local:…): the read-only template picker — the SAME chip
-      // TemplateField renders when disabled, so a template reads identically here
-      // and in the editor (qorus-ide intent scheme: info / qorus purple).
-      //
-      // A field may also declare templates OF ITS OWN, and a value drawn from
-      // that list is just as much a template even when it does not look like
-      // `$name:key` — `isValueTemplate` is a guess at the shape of the built-in
-      // grammar, and a host's own grammar (a Qorus test's `$.order.id`) fails it.
-      // Asking the field's list whether it CONTAINS the value settles it without
-      // guessing at syntax, and hands back the entry whose label the chip prints,
-      // so a reference reads as the name it was chosen by here as well as in the
-      // editor rather than as a raw path.
-      const ownTemplates = (schema as TFieldWithOwnTemplates | undefined)?.templates ?? templates;
-      // The grammar the field declares its references in, when it speaks one of
-      // its own — the same schema key its rich-text editor is given.
-      const templateGrammar = (schema as TFieldWithOwnTemplates | undefined)?.templateToken;
-      if (
-        typeof field?.value === 'string' &&
-        !(field as { is_expression?: boolean }).is_expression &&
-        (isValueTemplate(field.value) || !!findTemplate(ownTemplates ?? {}, field.value))
-      ) {
-        return <ReadOnlyTemplateTag value={field.value} templates={ownTemplates} size='small' />;
-      }
-
-      // A LIST whose elements are rich-text envelopes is a list of strings, so it
-      // reads as those strings. Without this the row fell through to the generic
-      // list summary and printed a bare count ("1 item") above the structured
-      // tree, never the address itself.
-      if (
-        Array.isArray(field?.value) &&
-        field.value.some((item) => richtextItemText(item) !== undefined)
-      ) {
-        const texts = field.value.map((item) => richtextItemText(item) ?? String(item ?? ''));
-        return <span style={textStyle}>{texts.filter((text) => text !== '').join(', ')}</span>;
-      }
-
-      // Richtext read-first summary: inline $-chips for embedded template tags
-      // with the prose around them (the IDE intent scheme via getTemplateTagStyle),
-      // kept lightweight instead of mounting the full editor — that lives in the
-      // expanded card. Pure-text richtext (no tags) falls through to the plain
-      // `formatted` string and keeps the single-line ellipsis.
-      if (valueType === 'richtext' && Array.isArray(field?.value)) {
-        const segments = richtextToSegments(field.value as never);
-        if (segments.some((segment) => segment.kind === 'tag')) {
-          return <TemplateText segments={segments} templates={ownTemplates} full={full} />;
-        }
-      }
-
-      // An expression reads as DPQL wherever it is shown without being edited:
-      // the same rendering its Explain panel and Preview use — monospace,
-      // coloured by the language server, template references as chips — so a
-      // collapsed row and the editor it opens never disagree about what the
-      // value looks like. See `DpqlRendering`.
-      if ((field as { is_expression?: boolean })?.is_expression && formatted) {
-        return withExpressionMarker(
-          <span style={{ minWidth: 0, flex: '1 1 auto', ...(full ? {} : { overflow: 'hidden' }) }}>
-            <DpqlRendering text={formatted} templates={ownTemplates} />
-          </span>
-        );
-      }
-
-      /* A value that MENTIONS a reference rather than being one.
-      
-         The branch above answers "is this value a template?", and a predicate is
-         not: `$._case.mode != 'simulate'` is a comparison the author wrote with a
-         reference inside it. So it fell all the way through to the plain string
-         and the row printed the engine's own spelling of a value the author had
-         picked by name — the one thing the template mechanism exists to stop.
-         Reported against the Skip-when field of a test case, where the list
-         above the drawer already named it and the drawer contradicted it.
-      
-         Drawn from `formatted` rather than from the raw value, so everything the
-         formatter already did — a joined list, a sensitive value's dots — still
-         holds, and only the references inside the resulting line become chips.
-         The author's own text around them survives exactly as typed. */
-      const templateSegments =
-        typeof formatted === 'string' && formatted ?
-          templateTextSegments(formatted, ownTemplates, templateGrammar)
-        : [];
-      if (templateSegments.some((segment) => segment.kind === 'tag')) {
-        return withExpressionMarker(
-          <TemplateText segments={templateSegments} templates={ownTemplates} full={full} />
-        );
-      }
-
-      return withExpressionMarker(full ? <span style={textStyle}>{formatted}</span> : formatted);
-    };
-
-    const schema = options?.[optionName];
-    const label = schema?.display_name || optionName;
-    const injectedOptionActions = React.useMemo<IReqorePanelAction[]>(
-      () =>
-        schema ?
-          resolveOptionActions(optionActions, {
-            name: optionName,
-            schema,
-            value: availableOptions?.[optionName],
-          }).filter((action) => action.show !== false)
-        : [],
-      [availableOptions?.[optionName], optionActions, optionName, schema]
-    );
-    // Which injected actions stay as inline buttons, and which move into the
-    // overflow menu — see `splitOptionActions`.
-    const [inlineOptionActions, menuOptionActions] = React.useMemo<
-      [IReqorePanelAction[], IReqorePanelAction[]]
-    >(
-      () => splitOptionActions(injectedOptionActions, !!collapseOptionActions),
-      [collapseOptionActions, injectedOptionActions]
-    );
-    const injectedOptionActionMenuItems = React.useMemo<IReqoreDropdownItem[]>(
-      () => menuOptionActions.map(optionActionAsMenuItem),
-      [menuOptionActions]
-    );
-    const renderInjectedOptionAction = (
-      action: IReqorePanelAction,
-      index: number,
-      size: 'tiny' | 'small' = 'small'
-    ) => {
-      // `show` drives visibility here instead of reaching the DOM. The classic
-      // path hands these to ReqorePanel, which honours `show: 'hover'` itself;
-      // the compact slots render plain buttons, so 'hover' becomes a CSS gate on
-      // the containing row/card (see compactRowStyles) — same config, same
-      // behaviour in both modes.
-      // `size` is destructured out and deliberately NOT honoured: the row owns
-      // its action strip's rhythm, and a consumer-supplied size made the
-      // injected button visibly smaller than the revert / more / confirm
-      // buttons beside it. The contextual `size` argument is the row's own
-      // (small when editing or in a card, tiny on a read row), so injected
-      // actions always match their neighbours.
-      const {
-        label: actionLabel,
-        onClick,
-        show,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        size: _ignoredSize,
-        className,
-        ...actionProps
-      } = action;
-
-      return (
-        <ReqoreButton
-          key={`${optionName}-injected-action-${index}`}
-          size={size}
-          minimal
-          flat
-          fixed
-          {...actionProps}
-          className={`${className ? `${className} ` : ''}options-injected-action${
-            show === 'hover' ? ' options-injected-action-hover' : ''
-          }`}
-          onClick={(event: React.MouseEvent<HTMLElement>) => {
-            event.stopPropagation();
-            onClick?.();
-          }}
-        >
-          {actionLabel}
-        </ReqoreButton>
-      );
-    };
-    const required = !!(schema?.required || schema?.required_groups);
-    // The asterisk says "you have to fill this in". Read-only, nobody does. The
-    // calm look draws none at all: an empty required field says so in its
-    // value column instead ("Required · add a value"), and a filled one has
-    // nothing left to ask for.
-    const requiredMark = required && !readOnly && !calm;
-    const removable =
-      !readOnly && !schema?.preselected && !schema?.required && !schema?.required_groups;
-    const changed = !hidden && !readOnly && hasOptionChanged(optionField?.value, optionName);
-    // "Has a value" = set to anything non-empty. Drives the edit-row Clear
-    // button and the cluster node's filled state (see `memberSet`).
-    /* "Is there anything to clear?" — this predicate has exactly one job, and
-       both of its uses are the Clear-value button.
-    
-       An empty list is not a value. `[]` is neither `undefined`, `null` nor `''`,
-       so a field whose last item had just been removed went on offering to clear
-       it, and the confirmation asked whether to clear nothing. A test's cases
-       table is where this shows: delete the last case and a red clear-all sat
-       above an empty table, guarding a no-op.
-    
-       Deliberately arrays only. An empty hash is arguable — "present but empty"
-       can be a real state for a hash — and nothing has demonstrated the same
-       defect there, so widening this predicate would be a guess. */
-    const hasValue =
-      optionField?.value !== undefined &&
-      optionField?.value !== null &&
-      optionField?.value !== '' &&
-      !(Array.isArray(optionField.value) && optionField.value.length === 0);
-    // Required-group membership shows a PERSISTENT chip on every member: amber
-    // "One of" while the group is unmet (tap → flash siblings), then a muted-green
-    // resolution once satisfied — "Covers" on the field that satisfied it,
-    // "Covered by <X>" on the rest. The resolution folds in what used to be a
-    // separate value-slot note.
-    const memberGroups: string[] = (schema?.required_groups as string[]) || [];
-    const unmetGroups = memberGroups.filter(
-      (groupName) => !requiredGroupsInfo.satisfiedBy[groupName]
-    );
-    const coveredByGroup = memberGroups.find(
-      (groupName) =>
-        requiredGroupsInfo.satisfiedBy[groupName] &&
-        requiredGroupsInfo.satisfiedBy[groupName] !== optionName
-    );
-    const coveredByLabel =
-      coveredByGroup && !schema?.required ?
-        (options?.[requiredGroupsInfo.satisfiedBy[coveredByGroup] as string]
-          ?.display_name as string) || requiredGroupsInfo.satisfiedBy[coveredByGroup]
-      : undefined;
-    // Unmet → drive the chip off the unmet groups; resolved → keep listing the
-    // members so the "covers / covered by" chip stays a locate-the-siblings
-    // dropdown rather than going inert.
-    const chipGroups = unmetGroups.length ? unmetGroups : memberGroups;
-    const groupResolved = !!memberGroups.length && !unmetGroups.length;
-    const requiredGroupChip =
-      !hidden && !readOnly && memberGroups.length && !schema?.required ?
-        <span
-          style={{ display: 'inline-flex' }}
-          role='presentation'
-          onClick={(e) => e.stopPropagation()}
-          onKeyDown={(e) => e.stopPropagation()}
-          onMouseEnter={() =>
-            setHighlightedOptions(requiredGroupsInfo.members[chipGroups[0]] || [])
-          }
-          onMouseLeave={() => setHighlightedOptions([])}
-        >
-          <ReqoreDropdown
-            className='options-readfirst-required-group'
-            size='tiny'
-            minimal
-            flat
-            compact
-            effect={calm ? undefined : { uppercase: true, spaced: 1 }}
-            // Calm: a met group is nothing to point at — only the unmet one is
-            // coloured.
-            intent={
-              groupResolved ?
-                calm ? undefined
-                : 'success'
-              : 'warning'
-            }
-            icon={groupResolved ? 'CheckLine' : 'LinkM'}
-            label={
-              !groupResolved ? 'One of'
-              : coveredByLabel ?
-                `Covered by “${coveredByLabel}”`
-              : 'Covers'
-            }
-            filterable={
-              chipGroups.reduce((n, g) => n + requiredGroupsInfo.members[g].length, 0) > 6
-            }
-            items={chipGroups.flatMap((groupName): IReqoreDropdownItem[] => [
-              ...(chipGroups.length > 1 ?
-                [{ divider: true, label: groupName, dividerAlign: 'left' } as IReqoreDropdownItem]
-              : []),
-              ...requiredGroupsInfo.members[groupName].map((member): IReqoreDropdownItem => ({
-                label: (options?.[member]?.display_name as string) || member,
-                icon: member === optionName ? 'MapPinLine' : 'ArrowRightLine',
-                selected: member === optionName,
-                disabled: member === optionName,
-                onClick: member === optionName ? undefined : () => flashOption(member),
-              })),
-            ])}
-          />
-        </span>
-      : null;
-    const fixedAllowedValueOption = isFixedCompactAllowedValueOption(schema);
-    const editType =
-      (fixedAllowedValueOption ?
-        (schema?.type as string) || (schema?.ui_type as string)
-      : (schema?.ui_type as string) || (schema?.type as string)) ?? '';
-    // Scalars edit in place inside the row; complex fields (tall or nested
-    // editors) still open the expanded card below.
-    const inlineEditableNow =
-      !readOnly &&
-      !schema?.arg_schema &&
-      !(operators && size(operators)) &&
-      // Expression fields open the builder/DPQL editor — too tall for inline.
-      !(optionField as { is_expression?: boolean }).is_expression &&
-      // A choice with per-option logos (e.g. language) reads better collapsed.
-      !optionHasImages(schema) &&
-      !COMPACT_COMPLEX_TYPES.has(editType);
-
-    /* Which of the two editors a row gets is settled when the row OPENS.
-     *
-     * Every term above reads the VALUE or a schema derived from it, so the
-     * answer can change while the author is inside the control — and the two
-     * branches are different subtrees, so a changed answer does not restyle
-     * the editor, it unmounts one and mounts the other. Everything the old one
-     * held goes with it: what was typed, the caret, and any state the editor
-     * keeps about how it was entered.
-     *
-     * `is_expression` is the term that actually fires, and it fires on the one
-     * interaction that exists to keep the author where they are: accepting
-     * "Use as expression" is the moment the value becomes an expression, and
-     * the expression shell opens on its Text view precisely because the author
-     * has just written the expression as text. The remount discarded that and
-     * dropped them into the visual builder, so the sentence they had typed was
-     * nowhere on screen. Clicking Text then appeared to work and bounced back,
-     * because the next value change remounted the row again.
-     *
-     * So the row keeps the editor it opened with for as long as it is open,
-     * and asks the question again when it is next opened — the same trade
-     * `editEntryValue` above makes for a different reason, and the one
-     * qorus-ide's `referenceEditorLatch` makes for this exact one. A field that
-     * already holds an expression when it is opened still gets the card; it is
-     * only a field that BECOMES one under the author that stays put.
-     *
-     * Held in a ref and settled during render rather than in an effect: an
-     * effect lands one render late, and one render late is a visible flash of
-     * the wrong editor — which is the thing being fixed.
-     */
-    const inlineEditableLatch = React.useRef<boolean | undefined>(undefined);
-    /* Whether THIS opening was the author asking to change the value.
-     *
-     * A click (or Enter/Space) on a closed row means "let me edit this"; a row
-     * opened by the form itself — `initialExpandedOptions` from an address, the
-     * first-attention row, a diagram opening the step it is showing — means
-     * "here it is". Only the first answers the question the picker answers, so
-     * only the first opens one (see the caret effect below). A ref, because it
-     * is read by the effect that runs after the open and must not itself cause
-     * a render. */
-    const openedByAuthor = React.useRef(false);
-    if (!isExpanded) {
-      inlineEditableLatch.current = undefined;
-    } else if (inlineEditableLatch.current === undefined) {
-      inlineEditableLatch.current = inlineEditableNow;
-    }
-    const inlineEditable = isExpanded ? !!inlineEditableLatch.current : inlineEditableNow;
-
-    /* The author's intent survives until the row is closed again, and no longer.
-     *
-     * An EFFECT, keyed on the row actually closing, rather than a line in the
-     * render body: between the click and the row opening there is a committed
-     * render that still reads `expandedOptions` without this row in it (the
-     * context propagates a beat after the handler runs), and clearing the flag
-     * on every collapsed render cleared it in that gap — the picker then never
-     * opened, which is the defect this whole mechanism exists to fix. Keyed on
-     * `isExpanded`, the transient render is not a change and the effect does
-     * not run; a genuine collapse is, and it does. */
-    React.useEffect(() => {
-      if (!isExpanded) {
-        openedByAuthor.current = false;
-      }
-    }, [isExpanded]);
-
-    /* The instruction the row gives its editor when it opens into a picker.
-     *
-     * State, not a call on the control: reqore's popover binds its own click
-     * listener in an effect keyed on the trigger element arriving, so a
-     * synthetic click dispatched from the row's own effect lands before
-     * anything is listening and does nothing at all. The editor opening itself
-     * from a prop has no such ordering to lose. */
-    const [openThePicker, setOpenThePicker] = React.useState(false);
-    React.useEffect(() => {
-      // One shot: true for the commit the editor acts on, false again after.
-      if (openThePicker) {
-        setOpenThePicker(false);
-      }
-    }, [openThePicker]);
-
-    // Put the caret in the row's editor when the row opens, so the reader can
-    // answer straight away (the prototype's tap-to-edit feel) — and so
-    // `autoFocusFirstRequired` means what it says.
-    //
-    // Whatever control the row OFFERS: `findRowFocusTarget` knows a pick-one is
-    // a set of `[tabindex]` checkboxes and a selector is a `<button>`, which a
-    // text-only scan skipped — so the engine opened the right row and the caret
-    // never moved. That is most of the first questions a form asks.
-    //
-    // The row is revealed before the caret lands in it, `block: 'nearest'` on
-    // the ROW. A caret nobody can see is not a caret: a form opened by a click
-    // usually mounts below the fold, and focusing something 700px down changes
-    // nothing on screen while the next keystroke goes somewhere invisible.
-    // `nearest` is by spec a no-op for a row already in view, so a form on
-    // screen never jumps, and it is the row that carries the label saying what
-    // the question is. A caller that wants the row opened WITHOUT the caret
-    // has `expandFirstRequired` for exactly that.
-    //
-    // A MutationObserver, not a timer: a host editor that resolves a catalogue
-    // before it can draw a control mounts it several commits after this effect
-    // runs, and there is no fixed time to wait for it — the control appearing
-    // IS the event. The 60ms timer this replaces missed every such editor, and
-    // fired too early or too late for every other one. One shot, and it gives
-    // up the moment the caret belongs to someone outside this row, so it can
-    // never pull a reader out of a control they moved into themselves.
-    const editorRef = React.useRef<HTMLDivElement>(null);
-    const rowRef = React.useRef<HTMLDivElement>(null);
-    React.useEffect(() => {
-      if (!isExpanded) return undefined;
-      const editor = editorRef.current;
-      if (!editor) return undefined;
-      let settled = false;
-      /* A control that is not a text box holds the caret PROVISIONALLY. An editor that
-         takes text can mount after the row opens (a code editor loads late), and until
-         it does the only control there is its chrome: a fullscreen toggle. When the
-         text box arrives it takes the caret, unless the reader has moved it since. A
-         row that never grows one (a pick-one) simply keeps its control. */
-      let provisional: HTMLElement | null = null;
-      const takeCaret = (): boolean => {
-        if (settled) return true;
-        const active = document.activeElement as HTMLElement | null;
-        if (provisional) {
-          if (active !== provisional) {
-            // The reader moved the caret themselves. Leave it there.
-            settled = true;
-            return true;
-          }
-          const textEntry = findRowFocusTarget(editor, { textEntryOnly: true });
-          if (!textEntry) return false;
-          textEntry.focus({ preventScroll: true });
-          // An editor's text box can be in the DOM before it can take focus (Monaco's
-          // edit area, mid-layout), and `focus()` then does nothing. Only a caret
-          // that landed counts; otherwise try again on the editor's next change.
-          if (document.activeElement !== textEntry) return false;
-          settled = true;
-          return true;
-        }
-        if (active && active !== document.body && !rowRef.current?.contains(active)) {
-          // Someone else holds the caret — a field the reader moved into while
-          // this row's editor was still arriving. Leave it where it is.
-          settled = true;
-          return true;
-        }
-        // A card hands the caret only to where text goes (see `findRowFocusTarget`).
-        const control = findRowFocusTarget(editor, { textEntryOnly: !inlineEditable });
-        if (!control) return false;
-        // The least scroll that shows the row clear of the pinned box header,
-        // and none when it is already in view (see `revealRow`).
-        if (rowRef.current) {
-          revealRow(rowRef.current, 'auto');
-        }
-        // `preventScroll`, because the reveal above has already put the row
-        // where it belongs; letting focus scroll as well moves it twice.
-        control.focus({ preventScroll: true });
-        // A control that cannot take focus yet (still laying out) did not take
-        // the caret: try again on the editor's next change.
-        if (document.activeElement !== control) return false;
-        /* …and if the control the row offers is a PICKER, open it.
-         *
-         * A closed picker prints the value it holds, which is exactly what the
-         * read row printed — so the row opened, nothing on screen changed, and
-         * changing the value still cost a second click. Read-first is the
-         * COLLAPSED row's job; an open row is the editor.
-         *
-         * Narrow on purpose, and each term is a case where read-first is still
-         * right: only a row the author opened themselves (a form that opens a
-         * row to SHOW it must not throw a list over it), only an inline scalar
-         * row (a complex field opens a card that is a form in its own right —
-         * its first control is one of several and nobody asked for it), and
-         * only a control that declares itself a picker, so nothing else is
-         * ever clicked on the author's behalf. */
-        if (openedByAuthor.current && inlineEditable && isClosedPickerTrigger(control)) {
-          openedByAuthor.current = false;
-          setOpenThePicker(true);
-          settled = true;
-          return true;
-        }
-        if (findRowFocusTarget(editor, { textEntryOnly: true }) !== control) {
-          // Not a text box: hold it until one arrives (see `provisional`).
-          provisional = control;
-          return false;
-        }
-        settled = true;
-        return true;
-      };
-      if (takeCaret() || typeof MutationObserver === 'undefined') return undefined;
-      const observer = new MutationObserver(() => {
-        if (takeCaret()) observer.disconnect();
-      });
-      // Attributes too: an editor's text box can become focusable by an attribute or
-      // style change after it is inserted (see the `focus()` checks above).
-      observer.observe(editor, { childList: true, subtree: true, attributes: true });
-      return () => observer.disconnect();
-    }, [isExpanded, optionName, inlineEditable]);
-
-    // What the field held when it was opened — the baseline Cancel restores.
-    //
-    // Deliberately NOT `originalValue`, which is the whole form's load-time
-    // snapshot. That answers "undo every change ever made to this field", which
-    // is a different question from "forget what I just typed"; a Cancel sitting
-    // next to Done has to mean the second one, or it silently throws away edits
-    // the user made earlier and had already accepted.
-    //
-    // The dependency list is `isExpanded` alone on purpose: adding the value
-    // would re-take the snapshot on every keystroke, leaving nothing to cancel.
-    const editEntryValue = React.useRef<{ value: any; type?: string } | undefined>(undefined);
-    React.useEffect(() => {
-      if (isExpanded) {
-        editEntryValue.current = { value: optionField?.value, type: optionField?.type };
-      } else {
-        editEntryValue.current = undefined;
-      }
-    }, [isExpanded]);
-
-    // True while the open editor holds something other than what it opened with.
-    const editedSinceOpened =
-      isExpanded &&
-      !!editEntryValue.current &&
-      !isEqual(editEntryValue.current.value, optionField?.value);
-
-    // Discard whatever was typed since the field was opened and close it. Used
-    // by both the Cancel button and Escape, so the two cannot diverge.
-    const cancelEdit = React.useCallback(() => {
-      const snapshot = editEntryValue.current;
-      if (snapshot && !isEqual(snapshot.value, optionField?.value)) {
-        handleValueChange(optionName, snapshot.value, snapshot.type);
-      }
-      toggleExpandedOption(optionName);
-    }, [handleValueChange, optionField?.value, optionName, toggleExpandedOption]);
-
-    // The sub-schema describing this field's value, when it has one. A value the
-    // form knows the shape of is previewed THROUGH that shape (see
-    // `SchemaDataView`); only genuinely undescribed data falls through to the
-    // untyped data tree.
-    //
-    // The server does NOT inline that sub-schema. `encodeFieldsForUi()` registers
-    // it and sends an id string in its place, which the consumer fetches back —
-    // exactly what AutoFormField does to build the editor ("Some arg schemas are
-    // not provided as objects, but as strings so we need to fetch them"). A
-    // preview that understood only the inline object therefore fell through to
-    // the untyped tree for every field a real server describes: the schema view
-    // worked against hand-written story fixtures and nowhere else.
-    //
-    // Resolved here rather than beside the preview it feeds: the preview renders
-    // below an early return, so a hook placed there would run conditionally.
-    const rawArgSchema = (schema as { arg_schema?: IQorusFormSchema | string } | undefined)
-      ?.arg_schema;
-    const argSchemaId = typeof rawArgSchema === 'string' ? rawArgSchema : undefined;
-    const [resolvedArgSchema, setResolvedArgSchema] = React.useState<IQorusFormSchema | undefined>(
-      undefined
-    );
-
-    // Only worth a request when there is a described value to preview: a row whose
-    // value is unset or scalar renders no inset, so fetching its schema would buy
-    // a round trip per row and show nothing. `query` caches GETs, so rows sharing
-    // an id (every row of one list) cost one request between them.
-    const valueLooksStructured = !!optionField?.value && typeof optionField.value === 'object';
-
-    React.useEffect(() => {
-      if (!argSchemaId || !valueLooksStructured) {
-        return undefined;
-      }
-      let cancelled = false;
-      (async () => {
-        const response = await queryUnlessCancelled<IQorusFormSchema>({
-          url: `dataprovider/arg_schemas/${argSchemaId}`,
-          method: 'GET',
-        });
-        // A failed fetch is not an error state here: the preview simply stays the
-        // untyped tree, which is what it was before the schema view existed. Nor
-        // is an abandoned one (no response).
-        if (!cancelled && response?.ok) {
-          setResolvedArgSchema(response.data as IQorusFormSchema);
-        }
-      })();
-      return () => {
-        cancelled = true;
-      };
-    }, [argSchemaId, valueLooksStructured]);
-
-    const previewArgSchema =
-      argSchemaId ? resolvedArgSchema : (rawArgSchema as IQorusFormSchema | undefined);
-    const previewWithSchema = React.useMemo(
-      () => canRenderWithSchema(optionField?.value, previewArgSchema),
-      [optionField?.value, previewArgSchema]
-    );
-
-    // The form-load revert: back to the value the FORM was loaded with.
-    //
-    // In an open editor this is offered only when it would do something
-    // `cancelEditButton` does not — that is, when the field was already
-    // modified BEFORE it was opened, so "undo this edit" and "undo every edit"
-    // are different answers. On the usual path (open an untouched field, type,
-    // change your mind) the two are identical, and two buttons with the same
-    // effect and different names are worse than one.
-    //
-    // It is unconditional on the READ row, where it renders inline in the
-    // status-dot column — there is no edit in progress there to cancel, so the
-    // whole-field revert is the only undo that makes sense.
-    const revertButton =
-      changed ?
-        <ReqoreButton
-          className='options-readfirst-revert'
-          size='small'
-          flat
-          minimal
-          icon='HistoryLine'
-          tooltip='Revert changes'
-          onClick={(e: React.MouseEvent) => {
-            e.stopPropagation();
-            handleValueChange(
-              optionName,
-              originalValue.current?.[optionName]?.value,
-              originalValue.current?.[optionName]?.type
-            );
-          }}
-        />
-      : null;
-    // Clear-value: empties a set field (keeps the field; the value goes blank)
-    // — distinct from the read-row "Remove field" (which deletes an optional
-    // field entirely). Once cleared, `changed` flips on and `hasValue` off, so
-    // this button gives way to `revertButton` in the same slot — the morph the
-    // edit row's actions are designed around. Clearing is destructive even
-    // though it can be reverted before saving, so both the trigger and its
-    // confirmation use danger intent.
-    //
-    // Only editors with NO built-in clear of their own get this button —
-    // toggles and fixed-choice pickers. The text/number/date inputs already
-    // render ReqoreInput's ✕ (which itself trips `changed`, so `revertButton`
-    // takes over once emptied), so adding ours there would double the ✕.
-    const editorLacksOwnClear =
-      editType === 'bool' ||
-      editType === 'boolean' ||
-      // Non-creatable allowed_values render a radio/select (no input clear); a
-      // CREATABLE one still renders the raw input (with its own ✕), so it keeps
-      // its clear — matching the dispatch in AutoFormField/TemplateField.
-      (!!size(schema?.allowed_values) && !schema?.allowed_values_creatable);
-    const confirmClearValue = (event?: React.MouseEvent) => {
-      event?.stopPropagation();
-      confirmAction({
-        title: 'Clear value',
-        description: `Clear the current value of "${label}"?`,
-        confirmLabel: 'Clear value',
-        confirmButtonIntent: 'danger',
-        intent: 'danger',
-        onConfirm: () => handleValueChange(optionName, undefined),
-      });
-    };
-    const clearValueButton =
-      hasValue && !readOnly && editorLacksOwnClear ?
-        <ReqoreButton
-          className='options-readfirst-clear'
-          size='small'
-          flat
-          minimal
-          icon='DeleteBinLine'
-          intent='danger'
-          aria-label='Clear value'
-          tooltip='Clear value'
-          onClick={confirmClearValue}
-        />
-      : null;
-    // Batched commit: a changed row is a draft until Save — mark it with the
-    // product's Draft chip (always visible, unlike the hover-revealed revert).
-    const draftChip =
-      commitMode === 'batched' && changed ?
-        <ReqoreTag
-          className='options-readfirst-draft'
-          label='Draft'
-          intent='warning'
-          icon='EditLine'
-          size='tiny'
-          minimal
-          fixed
-          flat
-          compact
-          effect={calm ? undefined : { uppercase: true, spaced: 1 }}
-        />
-      : null;
-    const isPassiveCloseAction = fixedAllowedValueOption;
-    // Cancel — the counterpart to Done, and the answer to "how do I get out of
-    // here without keeping this". Done was the only way to leave an open field,
-    // so every way out committed: the check, clicking away, and Escape (which
-    // closed without discarding, so it committed too, silently).
-    //
-    // Shown only while there is something to discard. On an untouched field
-    // Cancel and Done would do exactly the same thing, and two buttons that
-    // differ in name but not in effect are worse than one.
-    //
-    // Not offered when the close action is passive (a fixed choice) —
-    // nothing can have been typed, so there is nothing to cancel.
-    const cancelEditButton =
-      !isPassiveCloseAction && editedSinceOpened ?
-        <ReqoreButton
-          className='options-readfirst-cancel'
-          size='small'
-          flat
-          minimal
-          fixed
-          icon='CloseLine'
-          intent={calm ? undefined : 'warning'}
-          // "Cancel edit", not "Cancel": a bare Cancel collides with the one
-          // in Reqore's confirmation modal, and this one is specifically about
-          // abandoning the edit rather than dismissing a dialog.
-          aria-label='Cancel edit'
-          tooltip='Cancel edit — discard the changes made since this field was opened'
-          onClick={(event: React.MouseEvent) => {
-            event.stopPropagation();
-            cancelEdit();
-          }}
-        />
-      : null;
-    // See `revertButton` above for why this is conditional in the edit row.
-    const openedWithFormLoadValue =
-      !editEntryValue.current ||
-      isEqual(editEntryValue.current.value, originalValue.current?.[optionName]?.value);
-    const editRowRevertButton = openedWithFormLoadValue ? null : revertButton;
-    const closeExpandedFieldButton = (
-      <ReqoreButton
-        className='options-readfirst-done'
-        size='small'
-        // Calm: a neutral button. Closing a field is not a healthy figure and
-        // not the page's one primary action, so it takes neither colour.
-        intent={!isPassiveCloseAction && !calm ? 'success' : undefined}
-        flat={isPassiveCloseAction}
-        minimal={isPassiveCloseAction}
-        fixed
-        icon={isPassiveCloseAction ? 'CloseLine' : 'CheckLine'}
-        aria-label={isPassiveCloseAction ? 'Close field' : 'Done'}
-        tooltip={isPassiveCloseAction ? 'Close field' : 'Done'}
-        onClick={() => toggleExpandedOption(optionName)}
-      />
-    );
-
-    // Info tiers: Tier 1 (danger/warning + dependency hints) must be visible
-    // without interaction; Tier 2 (info/success, default notes) sits behind ⓘ.
-    const infoActive = !hidden;
-    type TInfoMsg = { intent?: string; title?: string; content: string };
-    const schemaMessages: TInfoMsg[] =
-      infoActive ?
-        (getShownSchemaMessages((schema as any)?.messages as any[], availableOptions, options).map(
-          (m) => ({
-            intent: m.intent,
-            title: m.title,
-            content: m.content,
-          })
-        ) as TInfoMsg[])
-      : [];
-    // A row states what is wrong with what it holds, read-only or not: "This
-    // field is required" under an empty required field, a value that is not a
-    // choice, an unmet dependency. A read-only reader is often the one who has
-    // to get the record fixed, and a view that hides why it is incomplete
-    // leaves them guessing. The value slot of an empty field keeps its plain
-    // "—" (or the default it falls back to), so the message is the only place
-    // the requirement is said: once, and the same way in both modes.
-    const fieldMessages: TInfoMsg[] =
-      infoActive ?
-        getOptionFieldMessages({
-          schema: options || {},
-          option: optionField || ({} as IQorusFormField),
-          name: optionName,
-          allOptions: availableOptions,
-          getType: getTypeForOption,
-          isRendererOnly,
-          calm,
-          readOnly,
-          // Until the person has been to the field, its requirement is stated plainly.
-          requirementPending: !visited,
-        }).map((m) => ({ intent: m.intent as string, content: String(m.label) }))
-      : [];
-    // TWO display channels, matching the Focus prototype:
-    //  • dedicated schema `messages` → prominent coloured PANELS below the row;
-    //  • everything else (validation reasons, the unmet-dependency hint, the
-    //    default-value note) → a compact INLINE reason strip — not a panel.
-    const panelMessages = schemaMessages;
-    const inlineMessages: TInfoMsg[] = [
-      ...fieldMessages,
-      ...(infoActive && schema?.default_value_desc ?
-        [
-          {
-            content:
-              `Default: ${schema.default_value_display_name || ''} — ${schema.default_value_desc}`.trim(),
-          },
-        ]
-      : []),
-    ];
-    const allMsgs = [...panelMessages, ...inlineMessages];
-    const worstIntent =
-      allMsgs.some((m) => m.intent === 'danger') ? 'danger'
-      : allMsgs.some((m) => m.intent === 'warning') ? 'warning'
-      : undefined;
-    const intentColor =
-      worstIntent === 'danger' ? cDanger
-      : worstIntent === 'warning' ? cWarning
-      : undefined;
-    const showStripe = infoActive && !!intentColor;
-    const labelShortDesc = schema?.short_desc;
-    // The per-row ⓘ is gone: short_desc shows under the name only when the global
-    // "descriptions" toggle is engaged (and inside the editor when expanded).
-    const showLabelDesc = !!labelShortDesc && showAllDescriptions === true;
-
-    // The `?` that opens the long-form help dialog. Shared by the read row AND
-    // the inline editor: opening a field used to drop it, leaving an editing row
-    // with no route to the field's description at all. Stops propagation because
-    // both labels are click targets themselves (the row expands / collapses).
-    const helpIcon =
-      fieldHasLongDescription(schema) ?
-        <ReqoreIcon
-          icon='QuestionLine'
-          size='12px'
-          effect={{ opacity: 0.55 }}
-          margin='left'
-          marginSize='tiny'
-          role='button'
-          tabIndex={-1}
-          aria-label='Help'
-          className='options-readfirst-help'
-          style={{ cursor: 'help' }}
-          onClick={(event) => {
-            event.stopPropagation();
-            handleOptionLabelClick(optionName);
-          }}
-        />
-      : null;
-
-    // The gap rides on the message itself rather than on the panel around it:
-    // the panel is a vertical ReqoreControlGroup, which owns its own layout and
-    // stacks children flush, and the class rule that used to carry a 4px gap
-    // never reached this element at all — which is why two messages read as one
-    // two-tone block with no space between them.
-    /* A message is PROSE, so it is drawn by the host's prose renderer.
-    
-       `markdownRendererContext` says this package renders markdown "in exactly
-       one place — a field's description". That was one place short: a schema
-       message is written by the same author, in the same dialect, and it landed
-       here as a raw string. A Qorus warning reading "Give that step a **Fixture
-       Output**" showed the asterisks, and every reference inside it stayed a raw
-       `$.` path where the editor two lines above renders it as a named chip.
-    
-       `compact` for the same reason the row inset asks for it: this is a strip
-       inside a row, never a page, and markdown authored as a document opens with
-       a heading that would outgrow the field label above it. Without a host
-       renderer the string is drawn as it always was. */
-    const renderInfoStrip = (m: TInfoMsg, index: number) => (
-      <ReqoreMessage
-        key={`${m.content}-${index}`}
-        size='small'
-        opaque={false}
-        flat
-        // Calm: a note that only informs takes no colour — blue is kept for "a
-        // filter is on", green for a healthy figure. A warning or a failure
-        // keeps its intent: those are what a person has to act on.
-        intent={
-          (calm && (!m.intent || m.intent === 'info' || m.intent === 'success') ?
-            undefined
-          : m.intent) as never
-        }
-        title={m.title}
-        style={{ marginBottom: 8 }}
-      >
-        {markdownRenderer && typeof m.content === 'string' ?
-          markdownRenderer({ value: m.content, compact: true })
-        : m.content}
-      </ReqoreMessage>
-    );
-    const reasonColor = (intent?: string) =>
-      intent === 'danger' ? cDanger
-      : intent === 'warning' ? cWarning
-      : intent === 'success' ?
-        (theme?.intents as Record<string, string> | undefined)?.success || cInfo
-      : `${cMuted}cc`;
-
-    const infoToggle = null;
-
-    // Cluster (required-group connection) — shared by the read row, its block
-    // wrapper AND the inline editor, so the rail/node/highlight persist across
-    // view↔edit. The node is opaque (it masks the rail behind it); hovering any
-    // member lights up the whole group via the shared highlight state.
-    const clusterGroup =
-      clustered ? (schema?.required_groups as string[] | undefined)?.[0] : undefined;
-    const clusterMembers = clusterGroup ? requiredGroupsInfo.members[clusterGroup] || [] : [];
-    // The group is fulfilled once any member is set — the whole rail then reads
-    // success (not just the satisfying node).
-    const clusterSatisfied = !!(clusterGroup && requiredGroupsInfo.satisfiedBy[clusterGroup]);
-    const clusterBlockClass =
-      clustered ?
-        `readfirst-cluster-rail${clusterFirst ? ' readfirst-cluster-first' : ''}${clusterLast ? ' readfirst-cluster-last' : ''}${clusterSatisfied ? ' readfirst-cluster-satisfied' : ''}`
-      : '';
-    // The connection rail + status nodes are gone — the "One of the below is
-    // required" box (and the Covers / Covered-by chips) carry the grouping now.
-    const clusterNode = null;
-    const clusterHoverProps =
-      clustered && clusterMembers.length ?
-        {
-          onMouseEnter: () => setHighlightedOptions(clusterMembers),
-          onMouseLeave: () => setHighlightedOptions([]),
-        }
-      : {};
-
-    // Items the EDITOR inside this row published — see `rowMenuContext`.
-    const { rowMenu, items: editorMenuItems } = useRowMenuRegistry();
-
-    // Secondary edit actions tuck into a "More" (⋮) menu so the card header stays
-    // calm: Fullscreen always, plus Remove field for a removable option. Rendered
-    // just before the Done ✓ in both expanded layouts.
-    const moreMenu = (
-      <ReqoreDropdown
-        className='options-readfirst-more'
-        icon='More2Fill'
-        flat
-        minimal
-        fixed
-        size='small'
-        tooltip='More actions'
-        items={[
-          {
-            label: 'Edit fullscreen',
-            icon: 'FullscreenLine',
-            onClick: () => setFocusedEditing(optionName),
-          } as IReqoreDropdownItem,
-          ...(removable && !hidden ?
-            [
-              {
-                label: 'Remove field',
-                icon: 'DeleteBinLine',
-                intent: 'danger',
-                onClick: () =>
-                  confirmAction({
-                    title: 'Remove field',
-                    onConfirm: () => removeSelectedOption(optionName),
-                  }),
-              } as IReqoreDropdownItem,
-            ]
-          : []),
-          // Consumer-injected actions that did not fit inline (or collapsed
-          // wholesale on touch) land here — this row already has a menu, so they
-          // reuse it rather than adding a second one beside it.
-          ...injectedOptionActionMenuItems,
-          // ...and for the same reason, so do the editor's own actions. Without
-          // this an editor with affordances of its own had to draw a second ⋮
-          // inside the value cell, beside this one.
-          ...editorMenuItems,
-        ]}
-      />
-    );
-
-    // The absorbed siblings' controls, rendered inside this row.
-    //
-    // Each keeps its own label so it is still identifiable — it is a different
-    // field, not a property of this one — but it sits inside this row's
-    // container, above the editor, so the pair reads as the single decision it
-    // is. `renderOption` is the same function the row uses for its own editor,
-    // so an absorbed field renders exactly as it would have on its own row.
-    const absorbedNodes =
-      absorbedFields?.length ?
-        absorbedFields
-          .map((absorbedName) => {
-            const absorbedField = availableOptions?.[absorbedName] as IQorusFormField | undefined;
-            if (!absorbedField) return null;
-            return (
-              // No label element of its own: the editor now heads itself with
-              // the field's name (see FieldAllowedValuesCheckGroup), so a label
-              // beside it printed the same word twice.
-              <StyledAbsorbedField key={absorbedName} className='options-readfirst-absorbed'>
-                <div style={{ minWidth: 0, flex: 1 }}>
-                  {renderOption(absorbedName, absorbedField, 'small', true)}
-                </div>
-              </StyledAbsorbedField>
-            );
-          })
-          .filter(Boolean)
-      : null;
-
-    // Declared here rather than beside the hash rows below: the `isExpanded`
-    // branch returns before that point, and its editor needs to know whether it is
-    // holding code.
-    const valueType = getValueType(optionField, schema);
-
-    // How much source there is describes the FIELD, not its value, so the count
-    // sits under the field's name — the same rule `lineCountNote` already
-    // follows for a multi-line markdown value, and the same reason: the value
-    // column carries the value and nothing else. It renders on the read row and
-    // the open one alike, because "how much code is here?" is a question that
-    // outlives opening the editor.
-    //
-    // It is a plain monospaced note rather than a tag, and deliberately the same
-    // one `lineCountNote` renders: both answer "how big is this field's value?"
-    // in the same corner of the same column, so stating one as a chip and the
-    // other as text made two spellings of one idea.
-    const codeSizeNode =
-      (
-        valueType === 'code-editor' &&
-        typeof optionField?.value === 'string' &&
-        optionField.value !== ''
-      ) ?
-        (() => {
-          const { lines, chars } = describeCodeSize(optionField.value as string);
-          return (
-            <ReqoreP
-              className='options-readfirst-label-code-size'
-              size='tiny'
-              effect={{ opacity: 0.45, textAlign: 'left' }}
-              style={{ fontFamily: 'monospace' }}
-            >
-              {`${formatCodeChars(chars)} ${formatCodeLines(lines)}`}
-            </ReqoreP>
-          );
-        })()
-      : null;
-
-    if (isExpanded && !readOnly) {
-      if (inlineEditable) {
-        const collapse = () => toggleExpandedOption(optionName);
-        const editingRow = (
-          <div
-            key={optionName}
-            ref={rowRef}
-            data-field={optionName}
-            className='readfirst-row readfirst-row-editing options-readfirst-inline options-readfirst-value'
-            style={
-              readRowHeights.current[optionName] ?
-                { minHeight: readRowHeights.current[optionName] }
-              : undefined
-            }
-            {...clusterHoverProps}
-          >
-            <StyledLabelBlock className='options-readfirst-label-block'>
-              <StyledRowLabel
-                role='button'
-                tabIndex={0}
-                aria-label={`Collapse ${label}`}
-                title={schema?.short_desc || undefined}
-                $color={cLabel}
-                $pointer
-                onClick={collapse}
-                onKeyDown={(event) => {
-                  if (event.key === 'Enter' || event.key === ' ') {
-                    event.preventDefault();
-                    collapse();
-                  }
-                }}
-              >
-                {label}
-                {required && !calm ?
-                  <ReqoreIcon icon='Asterisk' color='danger' size='10px' />
-                : null}
-                {helpIcon}
-              </StyledRowLabel>
-              {/* An OPEN field always shows its short_desc — that's where the hint
-                  is needed and there's no per-row button to reveal it (the edit
-                  card does the same). The global descriptions toggle governs READ
-                  rows only, so collapsing the field is what hides it again. */}
-              {labelShortDesc ?
-                <StyledLabelDesc
-                  className='options-readfirst-label-desc'
-                  size='small'
-                  effect={{ opacity: 0.55 }}
-                >
-                  {labelShortDesc}
-                </StyledLabelDesc>
-              : null}
-              {codeSizeNode}
-            </StyledLabelBlock>
-            <div
-              ref={editorRef}
-              className='options-readfirst-row-editor'
-              style={{ minWidth: 0 }}
-              onKeyDown={(event) => {
-                if (event.key === 'Escape') {
-                  event.stopPropagation();
-                  // Escape discards. It used to call `collapse()`, which closed
-                  // the field and KEPT whatever had been typed — the one
-                  // keystroke every editor treats as "get me out of this
-                  // without saving" was the quietest way to commit.
-                  cancelEdit();
-                }
-              }}
-            >
-              {/* The size chip survives into the editor.
-
-                  Opening a field replaces the whole value cell with its editor, which
-                  for every other type is right — the editor shows the value, so a
-                  summary of it above would say the same thing twice. Code is the
-                  exception: the chip counts lines and characters, which the editor
-                  does not show anywhere. Dropping it lost real information AND moved
-                  everything under it up by the height of a chip, so the editor
-                  appeared to jump as it opened.
-
-                  It renders here, at the top of the value cell, which is exactly where
-                  it sits on the read row — so the switch moves nothing. */}
-              {/* The field's own schema messages follow it into the editor.
-
-                  A message is guidance about the value, so the moment it matters
-                  most is while the value is being changed — and a diagnostic is
-                  useless anywhere else: it names a line the author can only act
-                  on with the editor in front of them. They used to render on the
-                  READ row alone, so opening the field to fix what one said was
-                  what made it disappear. Worse for a host that opens a field on
-                  arrival: the message was never visible at all.
-
-                  Above the editor rather than below it, and above the absorbed
-                  siblings, because it is the reason the author opened the row. */}
-              {panelMessages.length ?
-                <ReqoreControlGroup
-                  className='options-readfirst-info-panel'
-                  vertical
-                  fluid
-                  gapSize='normal'
-                >
-                  {panelMessages.map(renderInfoStrip)}
-                </ReqoreControlGroup>
-              : null}
-              {/* Absorbed siblings sit at the TOP of the value cell, above the
-                  editor they belong to — the language you are writing in is
-                  read before the code, not after it. */}
-              {absorbedNodes}
-              {/* The editor may publish into THIS row's ⋮ — see `rowMenuContext`.
-                  Only the editors rendered in the row are given the channel: the
-                  fullscreen modal below has no row menu on screen, so an editor
-                  there keeps drawing its own control. */}
-              {/* Scoped to the row's OWN editor: the absorbed siblings above
-                  are other fields, which this row did not open. */}
-              <RowOpenPickerContext.Provider value={openThePicker}>
-                <RowMenuContext.Provider value={rowMenu}>
-                  {renderOption(optionName, optionField, 'small', true)}
-                </RowMenuContext.Provider>
-              </RowOpenPickerContext.Provider>
-            </div>
-            <StyledRowActions>
-              {draftChip}
-              {/* No Required tag here: while editing, the editor's own
-                  OptionFieldMessages strip below already says it. */}
-              {editRowRevertButton}
-              {cancelEditButton}
-              {clearValueButton}
-              {inlineOptionActions.map((action, index) =>
-                renderInjectedOptionAction(action, index)
-              )}
-              {moreMenu}
-              {closeExpandedFieldButton}
-            </StyledRowActions>
-            {/* Cluster node is rendered LAST (it's absolutely positioned, so DOM
-                order doesn't move it) — keeping it out of the leading cells lets
-                the `> div:nth-child(1/2/3)` editing-row alignment nudges land on
-                label / editor / actions instead of being shifted by the node. */}
-            {clusterNode}
-          </div>
-        );
-        // ALWAYS wrap the editing row in the same StyledColumn so its parent stays
-        // stable (the editor must not remount and lose focus mid-type). The
-        // message panel is NOT rendered here: the editor's own OptionFieldMessages
-        // strip already shows the field's messages, so a panel would duplicate
-        // them. The wrapper carries the cluster rail class so the connection
-        // persists while a member is being edited.
-        return (
-          <StyledColumn
-            key={optionName}
-            data-field={optionName}
-            className={clusterBlockClass || undefined}
-          >
-            {editingRow}
-            {/* Focused editing for an INLINE row. The edit card wraps its editor
-                in <FocusedEditing>, which renders the field in place AND in the
-                modal; an inline row already renders its editor in the row grid,
-                so it mounts the modal alone. Without this the More menu's "Edit
-                fullscreen" set the state and nothing appeared — the modal simply
-                had no mount point on this branch. */}
-            {focusedEditing === optionName ?
-              <FocusedEditing
-                isFullscreen
-                modalOnly
-                onClose={() => setFocusedEditing(undefined)}
-                description={(schema?.display_name as string) || optionName}
-              >
-                <Description
-                  longDescription={schema?.desc}
-                  shortDescription={schema?.short_desc}
-                  longDescriptionShownByDefault
-                />
-                {renderOption(optionName, optionField)}
-              </FocusedEditing>
-            : null}
-          </StyledColumn>
-        );
-      }
-      // Card chrome: badge / actions / tags render here — the row only fits
-      // icon/image + the intent stripe.
-      const schemaBadge = (schema as { badge?: unknown } | undefined)?.badge;
-      const cardBadges =
-        schemaBadge !== undefined && schemaBadge !== null ?
-          ((Array.isArray(schemaBadge) ? schemaBadge : [schemaBadge]) as unknown[])
-        : [];
-      const cardActions =
-        (schema as { actions?: unknown[] } | undefined)?.actions?.filter(
-          (action) => !!action && typeof action === 'object'
-        ) || [];
-      const cardTags = ((schema as { tags?: unknown[] } | undefined)?.tags || []) as object[];
-      const schemaIntentColor =
-        schema?.intent ?
-          (theme?.intents as Record<string, string> | undefined)?.[schema.intent as string]
-        : undefined;
-      return (
-        <StyledEditCard
-          key={optionName}
-          ref={rowRef}
-          data-field={optionName}
-          className={
-            COMPACT_SINGLE_VALUE_TYPES.has(editType) ?
-              'options-readfirst-card options-readfirst-card-single'
-            : 'options-readfirst-card'
-          }
-          $bg={cHover}
-          $border={schemaIntentColor ? `${schemaIntentColor}66` : `${cInfo}66`}
-          $calm={calm}
-        >
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'flex-start',
-              justifyContent: 'space-between',
-              gap: 12,
-            }}
-          >
-            <StyledCardHeading>
-              <StyledCardLabel $color={cLabel}>
-                {(
-                  (schema as { icon?: string } | undefined)?.icon ||
-                  (schema as { image?: string } | undefined)?.image
-                ) ?
-                  <ReqoreIcon
-                    icon={(schema as { icon?: string } | undefined)?.icon as never}
-                    image={(schema as { image?: string } | undefined)?.image}
-                    size='14px'
-                  />
-                : null}
-                <span>
-                  {label}
-                  {required && !calm ?
-                    <ReqoreIcon icon='Asterisk' color='danger' size='10px' />
-                  : null}
-                  {/* The `?` belongs here too. The read row and the inline
-                      editor both carry it; the edit CARD did not — and the card
-                      is the path every field with an `arg_schema` takes, so a
-                      nested form like an auth profile's Context Mapping opened
-                      with its long description unreachable. Expanding a field
-                      is exactly when its explanation is wanted, so losing the
-                      affordance on the way in is backwards. */}
-                  {helpIcon}
-                </span>
-                {cardBadges.map((badge, index) =>
-                  typeof badge === 'object' ?
-                    <ReqoreTag
-                      size='small'
-                      minimal
-                      key={index}
-                      className='options-readfirst-card-badge'
-                      {...(badge as object)}
-                    />
-                  : <ReqoreTag
-                      size='small'
-                      minimal
-                      key={index}
-                      className='options-readfirst-card-badge'
-                      label={badge as string | number}
-                    />
-                )}
-              </StyledCardLabel>
-              {schema?.short_desc ?
-                <ReqoreP size='small' effect={{ opacity: 0.6 }} style={{ marginTop: 2 }}>
-                  {schema.short_desc}
-                </ReqoreP>
-              : null}
-              {cardTags.length ?
-                <ReqoreTagGroup size='small' className='options-readfirst-card-tags'>
-                  {cardTags.map((tag, index) => (
-                    <ReqoreTag size='small' minimal key={index} {...(tag as object)} />
-                  ))}
-                </ReqoreTagGroup>
-              : null}
-            </StyledCardHeading>
-            <ReqoreControlGroup fixed verticalAlign='center'>
-              {cardActions.map((action, index) => {
-                const { label: actionLabel, ...actionProps } = action as {
-                  label?: string;
-                } & Record<string, unknown>;
-                return (
-                  <ReqoreButton
-                    size='small'
-                    minimal
-                    flat
-                    fixed
-                    key={index}
-                    className='options-readfirst-card-action'
-                    {...(actionProps as object)}
-                  >
-                    {actionLabel}
-                  </ReqoreButton>
-                );
-              })}
-              {inlineOptionActions.map((action, index) =>
-                renderInjectedOptionAction(action, index)
-              )}
-              {/* Revert and Cancel, in the same order and with the same meaning
-                  as the inline row's strip.
-
-                  They were absent here, and which shape a field opens into is
-                  decided by its TYPE — so an `any`-typed option (a test
-                  assertion's Expected Value, a Qog action state option) opened
-                  into this card and had no way out that discarded: Done
-                  committed, clicking away committed, and Escape did nothing at
-                  all because the handler is on the inline row's editor. The
-                  only exit from a card kept whatever had been typed. */}
-              {editRowRevertButton}
-              {cancelEditButton}
-              {/* Clear-value sits before the More menu — the card analog of the
-                  inline row's Clear. Empties the value (keeps the field). */}
-              {hasValue && !readOnly ?
-                <ReqoreButton
-                  size='small'
-                  icon='DeleteBinLine'
-                  minimal
-                  flat
-                  fixed
-                  intent='danger'
-                  className='options-readfirst-clear'
-                  aria-label='Clear value'
-                  tooltip='Clear value'
-                  onClick={confirmClearValue}
-                />
-              : null}
-              {moreMenu}
-              {closeExpandedFieldButton}
-            </ReqoreControlGroup>
-          </div>
-          {/* Absorbed siblings render in the CARD form of an open field too,
-              not only the inline row — which shape a field opens into depends
-              on its type, and absorbing must not depend on that. */}
-          {absorbedNodes}
-          {/* Escape discards here for the same reason it does on the inline
-              row: it is the one keystroke every editor treats as "get me out
-              of this without saving", and a card that ignored it made the
-              keystroke a silent commit. Same handler, same `cancelEdit()`, so
-              the two shapes cannot diverge. */}
-          <div
-            // The card's editor, as the inline row's is: an opened card takes the
-            // caret too (the tap-to-edit rule above), so opening Description or
-            // Source Code by a click or by a blocked submit puts the cursor in it.
-            ref={editorRef}
-            className='options-readfirst-row-editor'
-            style={{ display: 'contents' }}
-            onKeyDown={(event) => {
-              if (event.key === 'Escape') {
-                event.stopPropagation();
-                cancelEdit();
-              }
-            }}
-          >
-            {/* Same fullscreen focused-editing affordance as the classic cards —
-              the modal mounts when this option is focused. */}
-            <FocusedEditing
-              isFullscreen={focusedEditing === optionName}
-              onClose={() => setFocusedEditing(undefined)}
-              description={(schema?.display_name as string) || optionName}
-            >
-              {focusedEditing === optionName ?
-                <Description
-                  longDescription={schema?.desc}
-                  shortDescription={schema?.short_desc}
-                  longDescriptionShownByDefault
-                />
-              : null}
-              <RowMenuContext.Provider value={rowMenu}>
-                {renderOption(optionName, optionField)}
-              </RowMenuContext.Provider>
-            </FocusedEditing>
-          </div>
-        </StyledEditCard>
-      );
-    }
-
-    const formatted = formatOptionValue(optionField, schema);
-    const empty = formatted === '';
-    // A field with no value of its own but a declared default is not simply
-    // unanswered: the default is what the server will use, and an em-dash says
-    // the opposite. Render the default in its place, through the same formatter
-    // so a list or an enum reads the way a real value would.
-    //
-    // This does NOT make the field count as answered. `empty` stays true, so the
-    // row keeps the dimmed italic treatment that distinguishes a default from an
-    // answer, and bucketing — which reads the field's own value, not this — still
-    // files it under Optional and leaves it behind the collapse.
-    //
-    // `hidden` is included deliberately: it marks a field the form has not added
-    // yet, which is the case that benefits most — the row is the author's first
-    // sight of the field, and the default is what it will contribute if left
-    // alone. Both flags only ever route to the em-dash below, so there is no
-    // real value being displaced.
-    const defaultValue = hidden || empty ? getDefaultValue(schema) : undefined;
-    const formattedDefault =
-      defaultValue === undefined || defaultValue === null ?
-        ''
-      : formatOptionValue({ ...optionField, value: defaultValue }, schema);
-    // Inline reasons shown on the value line: validation / dependency / one-of /
-    // default-value hints, plus a read-only covered-by note (editable covered rows
-    // carry that in their chip instead).
-    const valueReasons: TInfoMsg[] = [
-      ...inlineMessages,
-      ...(empty && coveredByLabel ?
-        [{ content: `Covered by “${coveredByLabel}”`, intent: calm ? undefined : 'success' }]
-      : []),
-    ];
-    // A hash row reveals its sub-fields as read-only sub-rows under a "view
-    // more" disclosure; the row itself still expands the real editor on click.
-    /* An EXPRESSION is not a hash, whatever shape it is stored in.
-
-       `{is_expression: true, value: {exp, args}}` is hash-shaped, so a field
-       holding one earned the structured inset and the row printed the syntax
-       tree — `is_expression true / value / exp + / args 1 2` — directly under a
-       summary line that already read `1 + 2`. The AST is how an expression is
-       STORED, not what it is; the row's line is the whole value, and the
-       expression editor is where its parts are looked at. Same exclusion, and
-       for the same reason, as `schema-definition` beside it. */
-    const isExpression = getExpressionAst(optionField) !== undefined;
-    const isPlainHashType =
-      (valueType === 'hash' || valueType === 'free-hash') &&
-      (schema as { ui_type?: string } | undefined)?.ui_type !== 'schema-definition' &&
-      !isExpression;
-    // A row of another declared type whose VALUE is an object (a data provider,
-    // an options hash) gets the same preview: its summary line names the thing,
-    // and the preview shows what it is made of. "11 fields" told the reader
-    // neither, and read as a string that happened to say "fields". The
-    // expression exclusion holds here too: a value stored as an AST is an
-    // expression whatever its declared type.
-    const isObjectValuedType =
-      OBJECT_VALUED_PREVIEW_TYPES.has(valueType) &&
-      !!optionField?.value &&
-      typeof optionField.value === 'object' &&
-      !Array.isArray(optionField.value) &&
-      !isExpression;
-    const hashEntries =
-      !hidden && (isPlainHashType || isObjectValuedType) ?
-        getHashEntries(optionField, schema)
-      : [];
-    // A LIST OF HASHES/objects gets the same expandable structured preview a hash
-    // does — the flat "N items" summary can't convey object contents (and must
-    // never print "[object Object]"). StructuredDataView unwraps each item's
-    // {type,value} envelope. Plain scalar lists keep just their joined summary.
-    const isHashList =
-      !hidden &&
-      (valueType === 'list' || valueType === 'free-list' || valueType === 'array') &&
-      Array.isArray(optionField?.value) &&
-      optionField.value.length > 0 &&
-      optionField.value.some((item) => {
-        if (richtextItemText(item) !== undefined) {
-          return false;
-        }
-        const inner =
-          item && typeof item === 'object' && 'value' in (item as Record<string, unknown>) ?
-            (item as Record<string, unknown>).value
-          : item;
-        return inner !== null && typeof inner === 'object';
-      });
-    const showStructuredPreview = hashEntries.length > 0 || isHashList;
-    // Multi-line code preview: a `code-editor` field with a non-empty string
-    // value gets a `<pre>`-based code block under the row, capped by a
-    // `ReqoreCollapsibleContent` so the collapsed height stays row-sized and
-    // "Show more" reveals the rest.  Sits in the same inset the hash/list
-    // preview uses — mutually exclusive with `showStructuredPreview`.
-    const showCodePreview =
-      !hidden &&
-      valueType === 'code-editor' &&
-      typeof optionField?.value === 'string' &&
-      optionField.value.length > 0;
-    // A richtext value that renders as CHIPS is drawn in full by the row itself:
-    // the chips are the value, and the reader is looking straight at it. The
-    // native `title` below would then hover the raw source of the very thing the
-    // chips replace ("[$fsminput:severity] $fsminput:alert_code") — and, because
-    // each chip carries its own Reqore tooltip, hovering one fires BOTH: the chip
-    // popover and the row's browser tooltip, in different places, saying almost
-    // the same thing. Only the popover shows up in a screenshot, which is what
-    // made the pair hard to report.
-    const showsTemplateChips =
-      !hidden &&
-      valueType === 'richtext' &&
-      Array.isArray(optionField?.value) &&
-      richtextToSegments(optionField.value as never).some((segment) => segment.kind === 'tag');
-    /* The same pair, for a value that IS one template rather than prose with
-       templates embedded in it. `showsTemplateChips` above closed the richtext
-       case and left this one open: a chosen reference renders as
-       `ReadOnlyTemplateTag`, which carries its own popover, while the row went
-       on setting a native `title` holding the raw reference. Hovering fired
-       both — two tooltips in two places, and the one that says something useful
-       is not the one a screenshot captures. */
-    const showsTemplateTag =
-      !hidden &&
-      typeof optionField?.value === 'string' &&
-      !(optionField as { is_expression?: boolean } | undefined)?.is_expression &&
-      (isValueTemplate(optionField.value) ||
-        !!findTemplate(
-          (schema as TFieldWithOwnTemplates | undefined)?.templates ?? templates ?? {},
-          optionField.value
-        ));
-    /* And once more for a value that only MENTIONS references — a predicate, a
-       greeting with a name in it. The row draws those as prose plus chips too,
-       so a native `title` would hover the raw spelling of exactly what the chips
-       replaced, and each chip's own popover would fire alongside it. */
-    const showsTemplateText =
-      !hidden &&
-      !showsTemplateTag &&
-      !!formatted &&
-      hasTemplateText(
-        formatted,
-        (schema as TFieldWithOwnTemplates | undefined)?.templates ?? templates,
-        (schema as TFieldWithOwnTemplates | undefined)?.templateToken
-      );
-    // Markdown reads the same way for the same reason: the row itself can only
-    // show a line of text, and for markdown that line is the SOURCE — the reader
-    // gets `## ` and `**` where the point of the value is what it looks like
-    // rendered. The document renders in the same inset the code preview uses,
-    // through the host's renderer, so the row shows the description the way the
-    // page it describes will.
-    //
-    // Only a MULTI-LINE document earns the inset. A one-liner is already fully
-    // rendered as the row's own text, and a second copy of it below would make
-    // every description row tall for nothing.
-    const showMarkdownPreview =
-      !hidden &&
-      !showCodePreview &&
-      !!markdownRenderer &&
-      // keyed on the schema's ui_type, not on getValueType(): a markdown value
-      // IS a string and the value type says so, which is the whole distinction
-      // between how a value is stored and which editor draws it
-      (schema as { ui_type?: string } | undefined)?.ui_type === 'markdown' &&
-      typeof optionField?.value === 'string' &&
-      isMultilineMarkdown(optionField.value);
-    // Read-only: a long plain-text value is drawn in FULL under the row, in
-    // the same inset and under the same "Show more" cap a code value gets,
-    // instead of one line with an ellipsis and a browser tooltip holding the
-    // rest. The editable row truncates because its value line is a summary
-    // you click to open; a read row is the only rendering the value gets.
-    //
-    // "Plain" is `formatted === value`: the text was rendered verbatim — not
-    // a template resolved to a chip, not an allowed value shown by its label,
-    // not a sensitive value masked, not markdown summarised. Only text that
-    // would not fit the line moves down: a break in it, or more than a short
-    // sentence's worth of characters (a short value wraps in place).
-    const showLongTextInset =
-      readOnly &&
-      !hidden &&
-      !showCodePreview &&
-      !showMarkdownPreview &&
-      !showStructuredPreview &&
-      typeof optionField?.value === 'string' &&
-      formatted === optionField.value &&
-      (optionField.value.includes('\n') || optionField.value.length > 120);
-    // Read-only: a choice reads as the option AND what it means —
-    // "Authenticated users", then "callers must present a token". The picker
-    // showed that description while choosing; a reader has no picker.
-    const chosenOption =
-      readOnly && !hidden && !empty ?
-        (findAllowedValueOption(optionField?.value, schema) as
-          { desc?: string; short_desc?: string } | undefined)
-      : undefined;
-    const readOnlyChoiceDesc = chosenOption?.desc || chosenOption?.short_desc;
-
-    // "9 lines" for a multi-line markdown value, shown under the field's name
-    // rather than in front of its content: it describes the field, not the value,
-    // and the value column is for the value. Rendered whether or not a host
-    // renderer is present — the count is the one thing the row cannot show you by
-    // showing you the text, and it is what tells you there is more below.
-    const lineCountNote =
-      (
-        !hidden &&
-        (schema as { ui_type?: string } | undefined)?.ui_type === 'markdown' &&
-        typeof optionField?.value === 'string' &&
-        isMultilineMarkdown(optionField.value)
-      ) ?
-        `${optionField.value.trim().split('\n').length} lines`
-      : undefined;
-    const typeLabel =
-      showFieldTypes ?
-        `<${(schema?.ui_type as string) || (schema?.type as string) || 'auto'}${(schema as { ui_element_type?: string } | undefined)?.ui_element_type ? `[${(schema as { ui_element_type?: string }).ui_element_type}]` : ''}>`
-      : null;
-    // A `readonly` field is one the system owns — an assigned id, a recorded
-    // provenance. The server states that on the field itself; only the older
-    // compat projection also mapped it to `disabled`, so on this path the form
-    // was handed `readonly` alone and rendered an editable control for a value
-    // no answer of the user's can change.
-    const fieldReadonly = !!(schema as { readonly?: boolean } | undefined)?.readonly;
-    // Disabled rows (schema flag, readonly, or unmet deps) can't open — a lock +
-    // reason renders instead. A form-level readOnly row never opens at all, and
-    // shows no lock either: nothing on a read-only form is locked, it is read.
-    const fieldDisabled =
-      !hidden &&
-      !readOnly &&
-      (!!schema?.disabled ||
-        fieldReadonly ||
-        !hasAllDependenciesFullfilled(schema?.depends_on, availableOptions, options || {}));
-    const fieldDisabledReason =
-      schema?.disabled ? 'This field is disabled'
-      : fieldReadonly ? 'Set by Qorus — not editable'
-      : 'Disabled — dependencies are not fulfilled';
-    // Dependency contract: top-level entries must ALL hold; a nested array
-    // means ANY of its entries; `name=value` requires that exact value, and
-    // `name!=value` requires any other answer. Parsed by the same helper the
-    // predicate uses, so the lock cannot describe a rule the form does not apply.
-    const dependencyEntries =
-      fieldDisabled && !schema?.disabled && !fieldReadonly ?
-        ((schema?.depends_on || []) as (string | string[])[])
-      : [];
-    const describeDependency = (dep: string) => {
-      const { name: depName, op, value: expected } = parseDependency(dep);
-      const depLabel = (options?.[depName]?.display_name as string) || depName;
-      const depValue = (availableOptions as TQorusForm)?.[depName]?.value;
-      return {
-        name: depName,
-        exists: !!options?.[depName],
-        // `!name` compares against nothing — it is satisfied by the sibling
-        // being unanswered — so it says so, rather than going through the
-        // comparison template and reading `Name ≠ undefined`.
-        label:
-          op === '!' ? `${depLabel} unset`
-          : !op ? depLabel
-          : `${depLabel} ${op === '=' ? '=' : '≠'} ${expected}`,
-        fulfilled:
-          op === '!' ? isOptionValueEmpty(depValue)
-          : !op ? !isOptionValueEmpty(depValue)
-          : depValue == null ? false
-          : op === '=' ? String(depValue) === expected
-          : String(depValue) !== expected,
-      };
-    };
-    const depHighlightNames = (flatten(dependencyEntries as never[]) as string[])
-      .map((dep) => describeDependency(dep).name)
-      .filter((depName) => !!options?.[depName]);
-    // Dependency lock, styled to match the required-group chip: a muted
-    // "Depends on" dropdown whose items are the blocking fields (an "any of:"
-    // divider for OR-groups), each clickable to flash/locate the blocker.
-    const dependsOnChip =
-      fieldDisabled && dependencyEntries.length ?
-        <span
-          style={{ display: 'inline-flex' }}
-          role='presentation'
-          onClick={(e) => e.stopPropagation()}
-          onKeyDown={(e) => e.stopPropagation()}
-          onMouseEnter={() => setHighlightedOptions(depHighlightNames)}
-          onMouseLeave={() => setHighlightedOptions([])}
-        >
-          <ReqoreDropdown
-            className='options-readfirst-lock-deps'
-            size='tiny'
-            minimal
-            flat
-            compact
-            icon='LockLine'
-            tooltip='Disabled — depends on other fields. Click to locate them.'
-            items={[
-              { divider: true, label: 'Unlocked by:', dividerAlign: 'left' } as IReqoreDropdownItem,
-              ...dependencyEntries.flatMap((entry): IReqoreDropdownItem[] => [
-                ...(Array.isArray(entry) ?
-                  [{ divider: true, label: 'any of:', dividerAlign: 'left' } as IReqoreDropdownItem]
-                : []),
-                ...(Array.isArray(entry) ? entry : [entry]).flatMap(
-                  (dep): IReqoreDropdownItem[] => {
-                    const info = describeDependency(dep);
-                    return info.exists ?
-                        [
-                          {
-                            label: info.label,
-                            icon: info.fulfilled ? 'CheckLine' : 'ArrowRightLine',
-                            intent: info.fulfilled ? 'success' : undefined,
-                            onClick: () => flashOption(info.name),
-                          } as IReqoreDropdownItem,
-                        ]
-                      : [];
-                  }
-                ),
-              ]),
-            ]}
-          />
-        </span>
-      : null;
-    const activate = (event?: { currentTarget?: Element | null }) => {
-      // A read-only row is not a control. It used to open into the editor
-      // with `readOnly` handed down (an id in a greyed-out input, a choice
-      // that could still be changed); then into a read view of the same
-      // value — which showed nothing the row could not show itself once it
-      // stopped truncating. So it shows everything, and opens nothing HERE.
-      //
-      // Where the consumer says the field is editable somewhere else, the row
-      // is the way in to that place: a reader clicking a value they want to
-      // change has said exactly what they want, and answering with silence
-      // teaches them the surface is broken.
-      if (fieldDisabled || readOnly) {
-        if (readOnly && !fieldDisabled) {
-          onReadOnlyActivate?.(optionName);
-        }
-        return;
-      }
-      const target = event?.currentTarget as HTMLElement | undefined;
-      if (target?.classList?.contains('readfirst-row')) {
-        readRowHeights.current[optionName] = Math.round(target.getBoundingClientRect().height);
-      }
-      // The author asked for this one — so the row opens all the way (a picker
-      // opens its list rather than reprinting the value as a closed trigger).
-      // Only when it is OPENING: the same handler collapses an open row.
-      openedByAuthor.current = !isExpanded;
-      // Optional fields aren't "added" — every one is editable in place. Opening a
-      // not-yet-set field just expands its editor (with an empty value); it joins
-      // the form's output the moment a value is set (and moves to Set / Needs
-      // attention), and drops back to Optional when cleared. No explicit add step.
-      toggleExpandedOption(optionName);
-    };
-
-    // Row chrome: icon/image before the label; schema `intent` as the edge
-    // stripe (message-severity stripes win when both apply).
-    const rowChromeIcon =
-      (
-        (schema as { icon?: string } | undefined)?.icon ||
-        (schema as { image?: string } | undefined)?.image
-      ) ?
-        <ReqoreIcon
-          icon={(schema as { icon?: string } | undefined)?.icon as never}
-          image={(schema as { image?: string } | undefined)?.image}
-          size='14px'
-          className='options-readfirst-row-icon'
-        />
-      : null;
-    const rowSchemaIntentColor =
-      schema?.intent ?
-        (theme?.intents as Record<string, string> | undefined)?.[schema.intent as string]
-      : undefined;
-    const rowStripeColor = (showStripe ? intentColor : undefined) || rowSchemaIntentColor;
-    // Intent stripe on the block ROOT so it spans the field's whole territory:
-    // the info/preview wrapper when one hangs below, else the bare row. It feeds
-    // --readfirst-stripe, which StyledGroupBody paints as the value surface's left
-    // border (the recessed surface starts at the value column).
-    const stripeStyle =
-      rowStripeColor ?
-        ({ ['--readfirst-stripe']: rowStripeColor } as React.CSSProperties)
-      : undefined;
-
-    // "Focus" trailing status dot, derived from the SHARED status helper (the
-    // same one FormEngine uses to bucket rows into the Needs-attention/Set/Optional
-    // boxes — so the dot and the box can never disagree). Hidden (not-yet-added)
-    // and dependency-locked rows show no dot (the add/lock affordance speaks for
-    // them). worstIntent already folds in schema + validation messages.
-    const cSuccess = (theme?.intents as Record<string, string> | undefined)?.success;
-    const rowStatus = getReadFirstStatus({
-      empty,
-      required,
-      covered: !!coveredByLabel || groupResolved,
-      invalid: worstIntent === 'danger',
-      warned: worstIntent === 'warning',
-      visited,
-    });
-    // No dot at all in a read-only form: the dot reports progress on the
-    // form, and a read view has no progress to report.
-    //
-    // Calm: no dot on a healthy row, and none on an empty required one either —
-    // its value column already says "Required · add a value" in amber, and one
-    // thing is said once. Only a failing value keeps the red dot beside the
-    // reason it gives.
-    const dotStatus =
-      hidden || fieldDisabled || readOnly || (calm && rowStatus !== 'invalid') ?
-        undefined
-      : rowStatus;
-    // Calm: an empty required value is said IN the value column, in amber,
-    // where the value would be — instead of a dash plus a red reason beside it.
-    // Not on a locked field (its lock and reason speak for it) or one that
-    // shows the default it will fall back to.
-    const calmRequiredWord =
-      calm && empty && !hidden && !!schema?.required && !fieldDisabled && !formattedDefault ?
-        readOnly ? CALM_REQUIRED_READ_LABEL
-        : CALM_REQUIRED_LABEL
-      : undefined;
-    const dotColor =
-      dotStatus === 'invalid' ? cDanger
-      : dotStatus === 'todo' ? cWarning
-      : dotStatus === 'set' ? cSuccess || cInfo
-      : undefined;
-    /* A read-only row is a control only when the consumer gave it somewhere to
-       go. Then it takes a button's role, focus and keyboard handling, because
-       a thing that acts on a click has to be reachable without a mouse and has
-       to announce what it does — and "Edit X", not "X", is what it does. */
-    const readOnlyIsAWayIn = !!readOnly && !fieldDisabled && !!onReadOnlyActivate;
-    const actsOnClick = !readOnly || readOnlyIsAWayIn;
-
-    const row = (
-      <div
-        key={optionName}
-        data-field={optionName}
-        role={actsOnClick ? 'button' : undefined}
-        tabIndex={actsOnClick ? 0 : undefined}
-        aria-label={
-          readOnlyIsAWayIn ? `Edit ${label}`
-          : readOnly ? undefined
-          : label
-        }
-        className={`readfirst-row options-readfirst-value${readOnly ? ' readfirst-row-read' : ''}${readOnlyIsAWayIn ? ' readfirst-row-way-in' : ''}${hidden ? ' readfirst-row-hidden' : ''}${fieldDisabled ? ' readfirst-row-disabled' : ''}${isHighlighted ? ' readfirst-row-group-highlight' : ''}${isFlashed ? ' readfirst-row-flash' : ''}${showLabelDesc ? ' readfirst-row-info-open' : ''}${panelMessages.length || showStructuredPreview || showCodePreview || showMarkdownPreview || showLongTextInset ? ' readfirst-row-tall' : ''}${clusterBlockClass ? ' ' + clusterBlockClass : ''}`}
-        aria-disabled={fieldDisabled || undefined}
-        style={readOnlyIsAWayIn ? { ...stripeStyle, cursor: 'pointer' } : stripeStyle}
-        onClick={actsOnClick ? activate : undefined}
-        onKeyDown={
-          !actsOnClick ? undefined : (
-            (event) => {
-              if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault();
-                activate(event);
-              }
-            }
-          )
-        }
-        {...clusterHoverProps}
-      >
-        {clusterNode}
-        <StyledLabelBlock className='options-readfirst-label-block'>
-          <StyledRowLabel title={schema?.short_desc || undefined} $color={cLabel}>
-            {rowChromeIcon}
-            {/* label + asterisk + help flow as ONE inline run, so the asterisk
-                stays right after the last word even when the name wraps. */}
-            <span className='options-readfirst-label-text' style={{ minWidth: 0 }}>
-              {label}
-              {requiredMark ?
-                <ReqoreIcon
-                  icon='Asterisk'
-                  color='danger'
-                  size='10px'
-                  margin='left'
-                  marginSize='tiny'
-                />
-              : null}
-              {helpIcon}
-            </span>
-            {typeLabel ?
-              <ReqoreTag size='tiny' minimal label={typeLabel} labelEffect={{ opacity: 0.55 }} />
-            : null}
-          </StyledRowLabel>
-          {showLabelDesc ?
-            <StyledLabelDesc
-              className='options-readfirst-label-desc'
-              size='small'
-              effect={{ opacity: 0.55 }}
-            >
-              {labelShortDesc}
-            </StyledLabelDesc>
-          : null}
-          {codeSizeNode}
-          {lineCountNote ?
-            <ReqoreP
-              className='options-readfirst-label-lines'
-              size='tiny'
-              effect={{ opacity: 0.45, textAlign: 'left' }}
-              style={{ fontFamily: 'monospace' }}
-            >
-              {lineCountNote}
-            </ReqoreP>
-          : null}
-        </StyledLabelBlock>
-        <StyledRowValue
-          // A code field draws its whole value in the preview below, with
-          // "Show more" for the rest, so a hover carrying the same text is
-          // noise -- and a native tooltip holding a few hundred lines is
-          // unreadable anyway. A chipped richtext value is the same case: the row
-          // already draws it in full, and its chips carry their own tooltips.
-          // Every other value keeps its hover, which is the only way to read one
-          // that the row had to truncate.
-          title={
-            (
-              !empty &&
-              !hidden &&
-              // A read row wraps its value, so a hover has nothing to add.
-              !readOnly &&
-              !showCodePreview &&
-              !showMarkdownPreview &&
-              !showsTemplateChips &&
-              !showsTemplateTag &&
-              !showsTemplateText &&
-              typeof formatted === 'string'
-            ) ?
-              formatted
-            : undefined
-          }
-          // A SET value reads at full key brightness so it stands out as the
-          // actual data — crucial when stacked under a (muted) description on
-          // mobile, where a dim value blends into the prose. The bold name still
-          // outranks it; the empty dash stays faint.
-          $color={
-            calmRequiredWord ?
-              rowStatus === 'pending' ?
-                `${cMuted}a6`
-              : cWarning
-            : empty || hidden ? `${cMuted}66`
-            : cKey
-          }
-          $empty={(empty || hidden) && !calmRequiredWord}
-        >
-          {/* A markdown value with a host renderer draws in full in the inset
-              below, so the row prints no value line at all: the stripped-prose
-              copy that used to sit above the document was a second rendering of
-              the same text with the markers taken out (Qlip review, build #97).
-              Without a renderer there is no inset, and the prose IS the value —
-              so the line stays, and `renderReadFirstValue` still produces it.
-
-              A schema-previewed value is the same situation. The summary is a
-              flattened join of the item labels ("Default RBAC, Cookie") sitting
-              directly above a preview that names every one of those items and
-              its fields — the same facts twice, the shorter version first, which
-              reads less like a summary than like a second, disagreeing answer.
-              An UNDESCRIBED value keeps its summary: the data tree beneath it
-              says nothing about what the value MEANS, so the summary is still
-              the only line that does.
-
-              Both suppressions are conditional on the replacement ACTUALLY
-              rendering. `previewWithSchema` only asks whether the value and its
-              `arg_schema` COULD be drawn as a schema preview; whether one is
-              drawn is `showStructuredPreview`, and the two disagree for a field
-              whose value type is a host ui_type rather than a list or a hash —
-              a test's `cases` (`ui_type: "test-cases"`, an array of case hashes
-              with an `arg_schema`) could be previewed but is not, because
-              `isHashList` only recognises `list`/`free-list`/`array`. The row
-              then dropped its summary in favour of a preview that never came
-              and rendered nothing at all: a test with cases read as a bare
-              "Cases" and looked unset until it was opened. */}
-          {(
-            showMarkdownPreview || showLongTextInset || (previewWithSchema && showStructuredPreview)
-          ) ?
-            null
-          : <span className='options-readfirst-valuetext'>
-              {hidden || empty ?
-                calmRequiredWord || formattedDefault || '—'
-              : renderReadFirstValue(optionField, schema, formatted, readOnly)}
-            </span>}
-          {readOnlyChoiceDesc ?
-            <span className='options-readfirst-choice-desc'>{readOnlyChoiceDesc}</span>
-          : null}
-          {(calmRequiredWord ?
-            valueReasons.filter((m) => m.content !== calmRequiredWord)
-          : valueReasons
-          ).map((m, i) => (
-            <span
-              key={`${m.content}-${i}`}
-              className='options-readfirst-reason'
-              style={{ color: reasonColor(m.intent) }}
-            >
-              {m.content}
-            </span>
-          ))}
-          {/* Dedicated schema message PANELS render right here, directly under the
-              value (full width of the value column) — never pushed down by the
-              label's short_desc. */}
-          {panelMessages.length ?
-            <ReqoreControlGroup
-              className='options-readfirst-info-panel'
-              vertical
-              fluid
-              gapSize='normal'
-            >
-              {panelMessages.map(renderInfoStrip)}
-            </ReqoreControlGroup>
-          : null}
-          {/* The structured hash/list preview also lives in the value cell, so it
-              starts directly under the value summary ("N fields"), not below the
-              label's short_desc. */}
-          {showStructuredPreview ?
-            // The inset lives inside the row now, so a click on a value chip would
-            // bubble to the row's onClick and fire activate() a SECOND time (the
-            // chip's onItemClick already calls it) — toggling the editor shut again.
-            // Stop the bubble here; the chip's own handler still opens the editor.
-            <StyledRowInset
-              className='options-readfirst-inset'
-              onClick={(e) => e.stopPropagation()}
-            >
-              <ReqoreCollapsibleContent
-                // The schema view spends more height per datum than a data tree
-                // does — a labelled row rather than a packed chip — but there is
-                // far less of it to read, so it gets enough room to show a
-                // couple of complete items instead of fading out mid-row. A tree
-                // of unknown depth keeps the tighter cap.
-                maxCollapsedHeight={previewWithSchema ? 140 : 96}
-                buttonProps={{ className: 'options-readfirst-viewmore' }}
-              >
-                <div className='options-readfirst-structured'>
-                  {previewWithSchema ?
-                    // The form already knows this value's shape, names and
-                    // choices, so the preview says it rather than making the
-                    // reader decode it: "Scheme Type — Default RBAC", not a data
-                    // tree announcing "Object · 1 field" over `type: default`.
-                    <SchemaDataView
-                      value={optionField?.value}
-                      schema={previewArgSchema!}
-                      showTypes={showFieldTypes}
-                      colors={{
-                        key: cKey,
-                        muted: cMuted,
-                        // Deliberately stronger than `cDivider`. That tier is for
-                        // decorative hairlines between rows, where being nearly
-                        // invisible is the point. This rule is load-bearing — it
-                        // is the only thing saying which fields belong to which
-                        // numbered item — so it gets the muted tier at partial
-                        // alpha: quiet, but actually visible.
-                        border: `${cMuted}66`,
-                        // The identity accent for each item's heading.
-                        //
-                        // `custom1` first: BRAND_DESIGN §1 says apps may register
-                        // their own named intents and reference them like the
-                        // built-ins, and that is where a product's own accent
-                        // lives (qorus-ide registers its brand purple there).
-                        // Falling back to `info` keeps this working for a
-                        // consumer that registers nothing — the heading is
-                        // accented either way, just in the theme's own colour
-                        // rather than one this library picked.
-                        accent:
-                          (theme?.intents as Record<string, string> | undefined)?.custom1 || cInfo,
-                      }}
-                      onItemClick={() => activate()}
-                    />
-                  : <StructuredDataView
-                      value={optionField?.value}
-                      collapsibleRoot={false}
-                      showTypes={showFieldTypes}
-                      defaultExpandDepth={2}
-                      onItemClick={() => activate()}
-                    />
-                  }
-                </div>
-              </ReqoreCollapsibleContent>
-            </StyledRowInset>
-          : null}
-          {/* Code-editor preview: same inset placement as hash/list — a monospace
-              `<pre>` block wrapped in `ReqoreCollapsibleContent` so the collapsed
-              row stays row-height while multi-line source reveals via "Show more".
-              Stopping propagation here (like the structured inset) — a click on
-              the collapse button must not also open the field editor. */}
-          {showCodePreview ?
-            <StyledRowInset
-              className='options-readfirst-inset options-readfirst-code-inset'
-              onClick={(e) => e.stopPropagation()}
-            >
-              <ReqoreCollapsibleContent
-                maxCollapsedHeight={96}
-                buttonProps={{ className: 'options-readfirst-viewmore' }}
-              >
-                {codePreviewRenderer ?
-                  codePreviewRenderer({
-                    value: optionField.value as string,
-                    name: optionName,
-                    schema,
-                    options,
-                    values: availableOptions,
-                  })
-                : <StyledCodePreview
-                    className='options-readfirst-code'
-                    $bg={cHover}
-                    $border={`${cDivider}88`}
-                    $fg={cKey}
-                  >
-                    {optionField.value as string}
-                  </StyledCodePreview>
-                }
-              </ReqoreCollapsibleContent>
-            </StyledRowInset>
-          : null}
-          {/* Markdown preview: same inset, same collapse, drawn by the host's
-              renderer so a description reads identically here and on the page it
-              belongs to. Only rendered when a host supplied one — there is no
-              built-in fallback, because drawing markdown in a dialect nobody
-              chose is the problem this exists to avoid. Propagation stops here
-              for the reason the code inset does it: a click on "Show more", or
-              on a link in the prose, must not also open the field editor. */}
-          {showMarkdownPreview ?
-            <StyledRowInset
-              className='options-readfirst-inset options-readfirst-markdown-inset'
-              onClick={(e) => e.stopPropagation()}
-            >
-              <ReqoreCollapsibleContent
-                maxCollapsedHeight={96}
-                buttonProps={{ className: 'options-readfirst-viewmore' }}
-              >
-                <div className='options-readfirst-markdown'>
-                  {markdownRenderer!({ value: optionField.value as string, compact: true })}
-                </div>
-              </ReqoreCollapsibleContent>
-            </StyledRowInset>
-          : null}
-          {/* Read-only long text: see `showLongTextInset`. No click guard —
-              the read row has no click to guard against. */}
-          {showLongTextInset ?
-            <StyledRowInset className='options-readfirst-inset options-readfirst-text-inset'>
-              <ReqoreCollapsibleContent
-                maxCollapsedHeight={96}
-                buttonProps={{ className: 'options-readfirst-viewmore' }}
-              >
-                <div className='options-readfirst-text'>{optionField.value as string}</div>
-              </ReqoreCollapsibleContent>
-            </StyledRowInset>
-          : null}
-        </StyledRowValue>
-        <StyledRowActions>
-          {/* Column discipline (table treatment): variable-width chips lead and
-              rag INWARD; the lock/add and info slots are fixed-width and pinned at
-              the right, so the ⓘ sits at the same x on every row. Revert is shown
-              whenever a field has changed; delete reveals on hover. */}
-          {/* No generic invalid/required chip: the intent stripe + the field's
-              own message ("This field is required" for an empty required field)
-              already flag it. Only the required-GROUP chip (One of / Covers)
-              stays — it carries info nothing else does. */}
-          {/* Railed (clustered) members: the rail conveys the grouping, so drop
-              the "One of"/"Covers" chip — keep only "Covered by <X>", the one fact
-              the rail can't show. Non-clustered members (split-across-panels or
-              narrow mode, where there's no rail) keep the full chip as a fallback. */}
-          {!hidden && !fieldDisabled && !clustered && !coveredByLabel ? requiredGroupChip : null}
-          {!hidden ? dependsOnChip : null}
-          {draftChip}
-          {/* Remove-field lives in the expanded editor's "More" (⋮) menu now — no
-              standalone delete button on the read row. */}
-          {/* Lock slot BEFORE the info slot so the ⓘ keeps the same far-right x on
-              every row — a disabled field's lock sits to the ⓘ's left rather than
-              pushing it inward. (Not-yet-set optional fields show NO marker now —
-              they're just editable in place, like every other row. Dependency-
-              locked fields show the "Depends on" chip in the chips area instead.) */}
-          {fieldDisabled && !dependencyEntries.length ?
-            <StyledActionSlot className='options-readfirst-trailing-slot' $width={18}>
-              <span title={fieldDisabledReason} style={{ display: 'inline-flex', opacity: 0.45 }}>
-                <ReqoreIcon className='options-readfirst-locked' icon='LockLine' size='14px' />
-              </span>
-            </StyledActionSlot>
-          : null}
-          {infoToggle ?
-            <StyledActionSlot className='options-readfirst-info-slot' $width={26}>
-              {infoToggle}
-            </StyledActionSlot>
-          : null}
-          {inlineOptionActions.map((action, index) =>
-            renderInjectedOptionAction(action, index, 'tiny')
-          )}
-          {injectedOptionActionMenuItems.length ?
-            <StyledActionSlot
-              className='options-readfirst-actions-slot'
-              $width={26}
-              // The read row opens the editor when clicked. Without this the tap
-              // that opens this menu also expands the row, which unmounts the
-              // menu — on touch that made the collapsed actions unreachable,
-              // the exact problem the collapse exists to solve.
-              onClick={(event: React.MouseEvent<HTMLElement>) => event.stopPropagation()}
-            >
-              <ReqoreDropdown
-                className='options-injected-actions-menu'
-                icon='MoreFill'
-                flat
-                minimal
-                fixed
-                size='tiny'
-                tooltip='Field actions'
-                items={injectedOptionActionMenuItems}
-              />
-            </StyledActionSlot>
-          : null}
-          {/* The revert affordance lives in the status-dot column (a changed field
-              swaps its dot for the revert icon) so it sits at the same fixed x as
-              the dot — out of the value's way instead of floating over it. */}
-          <StyledActionSlot className='options-readfirst-statusdot-slot' $width={12}>
-            {changed && !readOnly && !hidden ?
-              <ReqoreButton
-                className='options-readfirst-revert'
-                size='tiny'
-                flat
-                minimal
-                compact
-                icon='HistoryLine'
-                tooltip='Revert changes'
-                onClick={(e: React.MouseEvent) => {
-                  e.stopPropagation();
-                  handleValueChange(
-                    optionName,
-                    originalValue.current?.[optionName]?.value,
-                    originalValue.current?.[optionName]?.type
-                  );
-                }}
-              />
-            : dotColor ?
-              <StyledStatusDot
-                className='options-readfirst-status-dot'
-                $color={dotColor}
-                $ring={dotStatus !== 'set'}
-                aria-hidden
-              />
-            : null}
-          </StyledActionSlot>
-        </StyledRowActions>
-      </div>
-    );
-
-    return row;
-  }
-);
-
-CompactRow.displayName = 'CompactRow';