@qoretechnologies/reqraft 0.10.19 → 0.10.20

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

@@ -59,6 +59,7 @@ import {
   getHashEntries,
   getReadFirstStatus,
   getValueType,
+  isFixedCompactAllowedValueOption,
   isOptionValueEmpty,
   optionHasImages,
 } from './readFirst';
@@ -95,7 +96,7 @@ const COMPACT_COMPLEX_TYPES = new Set([
 
 // 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 ✕ is the single source). Structural/multi-input
+// 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
@@ -520,7 +521,11 @@ export const CompactRow = memo(
           />
         </span>
       : null;
-    const editType = ((schema?.ui_type as string) || (schema?.type as string)) ?? '';
+    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 inlineEditable =
@@ -573,8 +578,9 @@ export const CompactRow = memo(
     // — 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. Neutral (not danger): it's a
-    // reversible step, undone by Revert or by re-typing.
+    // 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
@@ -587,6 +593,17 @@ export const CompactRow = memo(
       // 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
@@ -594,12 +611,11 @@ export const CompactRow = memo(
           size='small'
           flat
           minimal
-          icon='CloseLine'
+          icon='DeleteBinLine'
+          intent='danger'
+          aria-label='Clear value'
           tooltip='Clear value'
-          onClick={(e: React.MouseEvent) => {
-            e.stopPropagation();
-            handleValueChange(optionName, undefined);
-          }}
+          onClick={confirmClearValue}
         />
       : null;
     // Batched commit: a changed row is a draft until Save — mark it with the
@@ -619,6 +635,21 @@ export const CompactRow = memo(
           effect={{ uppercase: true, spaced: 1 }}
         />
       : null;
+    const isPassiveCloseAction = fixedAllowedValueOption || readOnly;
+    const closeExpandedFieldButton = (
+      <ReqoreButton
+        className='options-readfirst-done'
+        size='small'
+        intent={!isPassiveCloseAction ? '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 ⓘ.
@@ -860,15 +891,7 @@ export const CompactRow = memo(
                 renderInjectedOptionAction(action, index)
               )}
               {moreMenu}
-              <ReqoreButton
-                className='options-readfirst-done'
-                size='small'
-                intent='success'
-                fixed
-                icon='CheckLine'
-                tooltip='Done'
-                onClick={collapse}
-              />
+              {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
@@ -1021,25 +1044,19 @@ export const CompactRow = memo(
               {hasValue && !readOnly ?
                 <ReqoreButton
                   size='small'
-                  icon='CloseLine'
+                  icon='DeleteBinLine'
                   minimal
                   flat
                   fixed
+                  intent='danger'
                   className='options-readfirst-clear'
+                  aria-label='Clear value'
                   tooltip='Clear value'
-                  onClick={() => handleValueChange(optionName, undefined)}
+                  onClick={confirmClearValue}
                 />
               : null}
               {moreMenu}
-              <ReqoreButton
-                size='small'
-                icon={readOnly ? 'CloseLine' : 'CheckLine'}
-                intent='success'
-                fixed
-                className='options-readfirst-done'
-                tooltip={readOnly ? 'Close' : 'Done'}
-                onClick={() => toggleExpandedOption(optionName)}
-              />
+              {closeExpandedFieldButton}
             </ReqoreControlGroup>
           </div>
           {/* Same fullscreen focused-editing affordance as the classic cards —

package/src/components/form/engine/FormEngine.stories.tsx

@@ -5,6 +5,7 @@ import { Meta, StoryObj } from '@storybook/react-vite';
 import { ChangeEvent, useState } from 'react';
 import { expect, fireEvent, fn, userEvent, waitFor, within } from 'storybook/test';
 import { validateField } from '../../../helpers/validations';
+import { defaultQorusTypes } from '../../../hooks/useQorusTypes';
 import {
   _testsChangeRichText,
   _testsChangeStringField,
@@ -90,6 +91,29 @@ const meta: Meta<typeof FormEngine> = {
     chromatic: {
       viewports: [2560],
     },
+    // `useQorusTypes` resolves the type catalogue as `size(data) ? data : defaultQorusTypes`,
+    // so a reachable, authenticated instance *replaces* the built-in list rather than
+    // supplementing it. These stories never opt into live data (no `live: true`), but the
+    // request fires anyway — which made `Option With Any Type` pass locally (401 → built-in
+    // list, so "Boolean" exists) and fail in CI, where the token is valid and the server's
+    // list decides the labels. Pin the catalogue so the type names the plays click are ours.
+    mockData: [
+      {
+        // `query()` builds `${instance}api/latest/${url}`, and the hook's url is
+        // `/system/qorus-type-info` — hence the doubled slash. Both spellings are listed
+        // so the mock keeps matching if that leading slash is ever dropped.
+        url: 'https://hq.qoretechnologies.com:8092/api/latest//system/qorus-type-info',
+        method: 'GET',
+        status: 200,
+        response: defaultQorusTypes,
+      },
+      {
+        url: 'https://hq.qoretechnologies.com:8092/api/latest/system/qorus-type-info',
+        method: 'GET',
+        status: 200,
+        response: defaultQorusTypes,
+      },
+    ],
   },
   render: ({ value, onChange, ...rest }: IFormEngineProps) => {
     const [val, setValue] = useState(value);
@@ -622,7 +646,7 @@ export const OptionWithAnyType: Story = {
     // and switch it to a specific custom type (Boolean).
     await _testsOpenTemplateMenu(4);
     await _testsClickButton({ label: 'Set Custom Value' });
-    await _testsClickButton({ label: 'True or False' });
+    await _testsClickButton({ label: 'Boolean' });
   },
 };
 
@@ -3361,6 +3385,57 @@ const langImg = (color: string, letter: string): string =>
     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="${color}"/><text x="16" y="23" font-size="20" fill="white" text-anchor="middle" font-family="sans-serif">${letter}</text></svg>`
   )}`;
 
+const assertFixedChoiceCanCloseWithoutClearing = async (field: string, expectedLabel: string) => {
+  const cardSelector = `.options-readfirst-card[data-field="${field}"]`;
+  const rowSelector = `.readfirst-row[data-field="${field}"]`;
+
+  let card: HTMLElement | null = null;
+  await waitFor(
+    () => {
+      card = document.querySelector(cardSelector);
+      expect(card).toBeTruthy();
+    },
+    { timeout: 10000 }
+  );
+
+  const clearButton = card!.querySelector(
+    '.options-readfirst-clear[aria-label="Clear value"]'
+  ) as HTMLElement;
+  const closeButton = card!.querySelector(
+    '.options-readfirst-done[aria-label="Close field"]'
+  ) as HTMLElement;
+  await expect(clearButton).toBeInTheDocument();
+  await expect(closeButton).toBeInTheDocument();
+  // Clear is destructive and visually distinct from the adjacent passive
+  // actions. It must not mutate the value until the Reqore confirmation is
+  // accepted; cancelling keeps both the value and expanded editor intact.
+  await expect(getComputedStyle(clearButton).color).not.toBe(getComputedStyle(closeButton).color);
+  await fireEvent.click(clearButton);
+  await waitFor(() => expect(document.querySelector('.reqore-confirmation-modal')).toBeTruthy(), {
+    timeout: 10000,
+  });
+  await expect(document.querySelector('.reqore-confirmation-modal')?.textContent).toContain(
+    'Clear value'
+  );
+  await _testsClickButton({ label: 'Cancel' });
+  await waitFor(() => expect(document.querySelector('.reqore-confirmation-modal')).toBeNull());
+  await expect(document.querySelector(cardSelector)).toBeTruthy();
+
+  await fireEvent.click(closeButton);
+  await waitFor(() => expect(document.querySelector(cardSelector)).toBeNull(), {
+    timeout: 10000,
+  });
+
+  const row = document.querySelector(rowSelector) as HTMLElement;
+  expect(row?.textContent).toContain(expectedLabel);
+
+  // Re-open so the story's visual snapshot still covers the expanded fixed-choice card.
+  await fireEvent.click(row);
+  await waitFor(() => expect(document.querySelector(cardSelector)).toBeTruthy(), {
+    timeout: 10000,
+  });
+};
+
 /**
  * Enum field with per-value images (the IDE `language` field shape: `type:
  * 'enum'` + `items: [{ value, title, image }]`). Read-first shows the selected
@@ -3426,6 +3501,7 @@ export const CompactEnumWithImages: Story = {
       },
       { timeout: 10000 }
     );
+    await assertFixedChoiceCanCloseWithoutClearing('lang', 'Qore');
   },
 };
 
@@ -3502,6 +3578,7 @@ export const CompactEnumRichtextValue: Story = {
       },
       { timeout: 10000 }
     );
+    await assertFixedChoiceCanCloseWithoutClearing('lang', 'Qore');
   },
 };
 
@@ -4163,8 +4240,28 @@ export const CompactFieldTypesEditing: Story = {
       editRow('enabled').querySelector('.options-readfirst-revert')
     ).not.toBeInTheDocument();
 
-    // Clear it → the value empties, so Clear is replaced by Revert in place.
+    // Clear is destructive: cancelling its Reqore confirmation leaves the
+    // value untouched, while confirming empties it and swaps Clear for Revert.
+    await fireEvent.click(editRow('enabled').querySelector('.options-readfirst-clear')!);
+    await waitFor(() => expect(document.querySelector('.reqore-confirmation-modal')).toBeTruthy(), {
+      timeout: 10000,
+    });
+    await _testsClickButton({ label: 'Cancel' });
+    await waitFor(() => expect(document.querySelector('.reqore-confirmation-modal')).toBeNull());
+    await expect(editRow('enabled').querySelector('.options-readfirst-clear')).toBeInTheDocument();
+
     await fireEvent.click(editRow('enabled').querySelector('.options-readfirst-clear')!);
+    let confirmationModal: HTMLElement | null = null;
+    await waitFor(
+      () => {
+        confirmationModal = document.querySelector('.reqore-confirmation-modal');
+        expect(confirmationModal).toBeTruthy();
+      },
+      { timeout: 10000 }
+    );
+    await userEvent.click(
+      within(confirmationModal!).getByRole('button', { name: 'Clear value' })
+    );
     await waitFor(() => {
       expect(editRow('enabled').querySelector('.options-readfirst-clear')).not.toBeInTheDocument();
       expect(editRow('enabled').querySelector('.options-readfirst-revert')).toBeInTheDocument();

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

@@ -101,7 +101,8 @@ import {
   getReadFirstCompletion,
   getReadFirstStatus,
   isOptionValueEmpty,
-  shouldAutoCollapseCompactAllowedValueOption,
+  isFixedCompactAllowedValueOption,
+  shouldAutoCollapseCompactOption,
 } from './readFirst';
 
 // Re-export types for consumers
@@ -282,7 +283,9 @@ const getOptionSchemaStorageType = (
   option?: TQorusFormFieldSchema,
   isRendererOnly: TRendererOnlyCheck = isRendererOnlyUiType
 ): TQorusType =>
-  ((isRendererOnly(option?.ui_type)
+  ((isFixedCompactAllowedValueOption(option)
+    ? option?.type || option?.ui_type
+    : isRendererOnly(option?.ui_type)
     ? option?.type || option?.ui_type
     : option?.ui_type || option?.type) || 'any') as TQorusType;
 
@@ -556,6 +559,11 @@ export interface IFormEngineProps extends Omit<IReqoreCollectionProps, 'onChange
   /** Opt-in: fetch global templates from `system/getContextData` for this context. */
   interfaceContext?: string;
   templateFieldProps?: Partial<ITemplateFieldProps>;
+  /**
+   * Force single-value selectors to use inline dropdowns even when their
+   * allowed values carry descriptions.
+   */
+  forceDropdown?: boolean;
   showTypeToggle?: boolean;
   /**
    * Compact (read-first) mode: each option renders as a row with its formatted
@@ -707,6 +715,7 @@ export const FormEngine = ({
   allowTemplates = true,
   interfaceContext,
   templateFieldProps,
+  forceDropdown,
   showTypeToggle = true,
   compact,
   compactFlush = false,
@@ -836,9 +845,12 @@ export const FormEngine = ({
       // same tick targets the stale (pre-move) layout, so the page doesn't budge.
       // A rAF lets the new position settle first.
       requestAnimationFrame(() => {
-        document
-          .querySelector(`.readfirst-row[data-field="${optionNames[0]}"]`)
-          ?.scrollIntoView({ block: 'center', behavior: 'smooth' });
+        const target = document.querySelector<HTMLElement>(
+          `.readfirst-row[data-field="${optionNames[0]}"]`
+        );
+        if (typeof target?.scrollIntoView === 'function') {
+          target.scrollIntoView({ block: 'center', behavior: 'smooth' });
+        }
       });
     }
     setFlashedOptions(optionNames);
@@ -1161,7 +1173,7 @@ export const FormEngine = ({
         if (
           compact &&
           !readOnly &&
-          shouldAutoCollapseCompactAllowedValueOption(options?.[optionName], val)
+          shouldAutoCollapseCompactOption(options?.[optionName], val)
         ) {
           setExpandedOptions((prev) => prev.filter((name) => name !== optionName));
         }
@@ -1909,14 +1921,23 @@ export const FormEngine = ({
       //
       // The trailing fallbacks keep the row rendering when a server-driven
       // schema has not arrived yet (`type` undefined) instead of crashing.
-      const schemaUiType = options?.[optionName]?.ui_type as TQorusType;
+      const optionSchema = options?.[optionName];
+      const schemaUiType = optionSchema?.ui_type as TQorusType;
       const uiTypeIsAnyLike = schemaUiType === 'any' || schemaUiType === 'auto';
       const resolvedType =
-        (schemaUiType && !uiTypeIsAnyLike ? schemaUiType : undefined) ||
+        (isFixedCompactAllowedValueOption(optionSchema)
+          ? getOptionSchemaStorageType(optionSchema, isRendererOnly)
+          : schemaUiType && !uiTypeIsAnyLike
+            ? schemaUiType
+            : undefined) ||
         type ||
         schemaUiType ||
-        (options?.[optionName]?.type as TQorusType) ||
+        (optionSchema?.type as TQorusType) ||
         'any';
+      const effectiveForceDropdown =
+        forceDropdown ??
+        (templateFieldProps as { forceDropdown?: boolean } | undefined)?.forceDropdown;
+
       return (
         <>
           {(() => {
@@ -2057,8 +2078,16 @@ export const FormEngine = ({
             // reqraft: form-level expression fields get the Visual/Text shell
             // (DPQL text mode); opt out per-form via `templateFieldProps`.
             allowTextExpressions
+            // A fixed allowed-value field still needs its selector even when
+            // arbitrary custom values are forbidden. TemplateField uses this
+            // flag to decide whether to mount AutoFormField at all; treating
+            // `supports_custom_values: false` as "no input" left dependent
+            // delivery fields (Discord server/channel, for example) as empty
+            // control groups. The allowed-values renderer itself enforces the
+            // fixed catalogue and never exposes free-form entry.
             allowCustomValues={
-              options?.[optionName]?.supports_custom_values !== false && resolvedType !== 'any'
+              isFixedCompactAllowedValueOption(optionSchema) ||
+              (options?.[optionName]?.supports_custom_values !== false && resolvedType !== 'any')
             }
             templates={templates.value}
             {...getTypeAndCanBeNull(
@@ -2088,6 +2117,7 @@ export const FormEngine = ({
             default_value={getDefaultValue(options?.[optionName])}
             isDefaultTemplate={options?.[optionName]?.default_view === 'template'}
             allowed_values={options?.[optionName]?.allowed_values}
+            allowed_values_creatable={options?.[optionName]?.allowed_values_creatable}
             disabled={
               options?.[optionName]?.disabled ||
               readOnly ||
@@ -2105,6 +2135,7 @@ export const FormEngine = ({
               : undefined
             }
             {...templateFieldProps}
+            forceDropdown={effectiveForceDropdown}
           />
           <OptionFieldMessages
             schema={options || {}}
@@ -2148,6 +2179,7 @@ export const FormEngine = ({
       uniqueName,
       componentOverrides,
       templateFieldProps,
+      forceDropdown,
       availableOptions,
       fixedValue,
       // Depend on the specific `rest` values used, not the whole `rest` object

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

@@ -220,7 +220,8 @@ export const StyledEditCard = styled.div<{ $bg: string; $border: string }>`
 
   /* Single-value editors (operators, long-string, markdown, richtext, byte-size)
      carry the card's own "Clear value" action, so suppress the value input's
-     built-in ReqoreInput clear — ReqoreInput has no prop to hide it, and two ✕
+     built-in ReqoreInput clear — ReqoreInput has no prop to hide it, and a
+     separate input ✕ plus the row-level trash action
      read as a duplicate. Multi-input cards (hash/list/…) are not marked single,
      so their per-sub-field clears stay. */
   &.options-readfirst-card-single .reqore-clear-input-button {

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

@@ -87,11 +87,10 @@ export const isOptionValueEmpty = (value: unknown): boolean =>
   value === '' ||
   (Array.isArray(value) && value.length === 0);
 
-export const shouldAutoCollapseCompactAllowedValueOption = (
-  schema: TQorusFormFieldSchema | undefined,
-  value: unknown
+export const isFixedCompactAllowedValueOption = (
+  schema: TQorusFormFieldSchema | undefined
 ): boolean => {
-  if (!schema || isOptionValueEmpty(value)) {
+  if (!schema) {
     return false;
   }
 
@@ -108,6 +107,28 @@ export const shouldAutoCollapseCompactAllowedValueOption = (
   );
 };
 
+export const shouldAutoCollapseCompactAllowedValueOption = (
+  schema: TQorusFormFieldSchema | undefined,
+  value: unknown
+): boolean => !isOptionValueEmpty(value) && isFixedCompactAllowedValueOption(schema);
+
+/** Boolean fields have three meaningful states: unset, Yes, and No. Once the
+ * user chooses either boolean value in compact mode, the choice is complete
+ * and the inline editor can close without a separate confirmation. */
+export const isCompactBooleanOption = (
+  schema: TQorusFormFieldSchema | undefined
+): boolean => {
+  const type = (schema?.ui_type || schema?.type)?.toLowerCase();
+  return type === 'bool' || type === 'boolean';
+};
+
+export const shouldAutoCollapseCompactOption = (
+  schema: TQorusFormFieldSchema | undefined,
+  value: unknown
+): boolean =>
+  !isOptionValueEmpty(value) &&
+  (isCompactBooleanOption(schema) || isFixedCompactAllowedValueOption(schema));
+
 /** Prefer the matching allowed_values entry's display_name (fallback `name`)
  * over the raw stored value. */
 const findAllowedOption = (value: unknown, schema?: TQorusFormFieldSchema): any | undefined => {

package/src/components/form/expressions/ExpressionField.stories.tsx

@@ -23,6 +23,16 @@ const SAMPLE: IExpression = {
 const meta = {
   component: ExpressionField,
   title: 'Components/Form/Expressions/ExpressionField',
+  parameters: {
+    mockData: [
+      {
+        url: 'https://hq.qoretechnologies.com:8092/api/latest/system?action=expressions&context=ui',
+        method: 'GET',
+        status: 200,
+        response: mockExpressions,
+      },
+    ],
+  },
   args: {
     onChange: fn(),
     expressions: mockExpressions,

package/src/components/form/expressions/builder/ExpressionBuilder.stories.tsx

@@ -16,7 +16,8 @@ import { ExpressionBuilder } from './index';
 // --- inlined test helpers (equivalents of the IDE `../Tests/utils`) ---------
 
 /** Count regular expression cards (`.expression`). */
-const expressionCount = () => document.querySelectorAll('.expression').length;
+const expressionCount = (scope: ParentNode = document) =>
+  scope.querySelectorAll('.expression').length;
 
 /** Click a ReqoreButton by visible label (anywhere in the document). */
 const clickButtonByLabel = async (label: string) => {
@@ -26,14 +27,14 @@ const clickButtonByLabel = async (label: string) => {
 };
 
 /** Click a button by CSS selector. */
-const clickSelector = async (selector: string, nth = 0) => {
-  const els = document.querySelectorAll(selector);
+const clickSelector = async (selector: string, nth = 0, scope: ParentNode = document) => {
+  const els = scope.querySelectorAll(selector);
   await fireEvent.click(els[nth]);
 };
 
 /** Wait for some text to appear in the document. */
-const waitForText = async (text: string | RegExp) => {
-  const body = within(document.body);
+const waitForText = async (text: string | RegExp, scope: HTMLElement = document.body) => {
+  const body = within(scope);
   await waitFor(() => expect(body.queryAllByText(text)[0]).toBeTruthy(), { timeout: 10000 });
 };
 
@@ -44,15 +45,19 @@ const waitForText = async (text: string | RegExp) => {
  * toolkit `Select` opens a `SelectFieldCollection` modal (not an inline
  * dropdown) — the item is a collection button with the display name as text.
  */
-const selectOperation = async (currentLabel: string, itemLabel: string) => {
-  const body = within(document.body);
+const selectOperation = async (
+  currentLabel: string,
+  itemLabel: string,
+  ownerDocument: Document = document
+) => {
+  const body = within(ownerDocument.body);
   // Open the picker (placeholder when empty, or the current operation name).
   const trigger = await body.findByText(currentLabel, undefined, { timeout: 10000 });
   await fireEvent.click(trigger);
   // Click the item inside the now-open collection modal.
   const item = await waitFor(
     () => {
-      const el = within(document.body).queryAllByText(itemLabel)[0];
+      const el = within(ownerDocument.body).queryAllByText(itemLabel)[0];
       if (!el) throw new Error(`collection item "${itemLabel}" not ready`);
       return el;
     },
@@ -121,8 +126,8 @@ export const Default: Story = {
       },
     },
   },
-  play: async () => {
-    await waitFor(() => expect(expressionCount()).toBe(1), { timeout: 10000 });
+  play: async ({ canvasElement }) => {
+    await waitFor(() => expect(expressionCount(canvasElement)).toBe(1), { timeout: 10000 });
   },
 };
 
@@ -630,19 +635,19 @@ export const ExpressionCanBeWrapped: Story = {
       },
     },
   },
-  play: async () => {
+  play: async ({ canvasElement }) => {
     // Seeded base op + its operand render.
-    await waitFor(() => expect(expressionCount()).toBe(1), { timeout: 10000 });
-    await waitForText('Value To Convert');
+    await waitFor(() => expect(expressionCount(canvasElement)).toBe(1), { timeout: 10000 });
+    await waitForText('Value To Convert', canvasElement);
 
     // Hover the card to reveal the floating "Wrap" picker, then wrap it in
     // `Join List Elements` — the wrapped op becomes its first operand and the
     // outer card shows "List To Join". The card count goes 1 → 2.
-    await userEvent.hover(document.querySelectorAll('.expression')[0]);
+    await userEvent.hover(canvasElement.querySelectorAll('.expression')[0]);
     await sleep(500);
-    await selectOperation('Wrap', 'Join List Elements');
-    await waitForText('List To Join');
-    await waitFor(() => expect(expressionCount()).toBe(2), { timeout: 10000 });
+    await selectOperation('Wrap', 'Join List Elements', canvasElement.ownerDocument);
+    await waitForText('List To Join', canvasElement);
+    await waitFor(() => expect(expressionCount(canvasElement)).toBe(2), { timeout: 10000 });
   },
 };
 
@@ -662,11 +667,13 @@ export const ExpressionCanBeUnwrapped: Story = {
     await ExpressionCanBeWrapped.play!(args);
 
     // Unwrap the outer op (keep the child) — the `.expression-unwrap` action.
-    await userEvent.hover(document.querySelectorAll('.expression')[0]);
+    await userEvent.hover(args.canvasElement.querySelectorAll('.expression')[0]);
     await sleep(500);
+    // The card's actions are ReQore *floating* actions, so they are portalled out
+    // of the canvas — this one lookup stays document-scoped on purpose.
     await clickSelector('.expression-unwrap');
 
-    await waitFor(() => expect(expressionCount()).toBe(1), { timeout: 10000 });
+    await waitFor(() => expect(expressionCount(args.canvasElement)).toBe(1), { timeout: 10000 });
   },
 };
 

package/src/components/form/expressions/builder/index.tsx

@@ -651,7 +651,10 @@ export const Expression = ({
     return value.value?.args?.some((arg) => arg?.types_mismatch);
   }, [JSON.stringify(value)]);
 
-  if (expressions.loading || types.loading) {
+  // The type hook is seeded with the complete built-in catalogue and refreshes
+  // it in the background.  Do not hide an otherwise usable expression behind
+  // a skeleton while that optional refresh is in flight.
+  if (expressions.loading || (types.loading && !size(types.value))) {
     return <ReqorePanelSkeleton size='small' />;
   }
 
@@ -687,6 +690,11 @@ export const Expression = ({
           fluid={false}
           fixed={true}
           flat
+          // The operation catalogue is long and every entry carries a description,
+          // so it belongs in the searchable collection modal rather than an inline
+          // dropdown. `SelectFormField` defaults `forceDropdown` to `true`, which
+          // would otherwise collapse this picker into the dropdown presentation.
+          forceDropdown={false}
           minimal
           items={defaultItems}
           onChange={handleOperatorChange}
@@ -732,6 +740,9 @@ export const Expression = ({
             transparent: false,
             fixed: true,
             minimal: false,
+            // Same catalogue as the operation selector above — keep the collection
+            // modal rather than the `forceDropdown` default's inline dropdown.
+            forceDropdown: false,
             items: defaultItems,
             hideItemCount: true,
             onChange: handleWrapExpressionClick,

package/src/components/form/expressions/useExpressions.ts

@@ -84,7 +84,10 @@ export const useExpressions = (
 
   return {
     expressions,
-    loading: system.loading || extra.loading,
+    // `extra` is deliberately not loaded without an expressions URL.  The
+    // generic fetch hook keeps an unstarted request in its initial loading
+    // state, so only include it when that request is actually enabled.
+    loading: system.loading || (!!expressionsUrl && extra.loading),
     error: errorOverride ?? system.error ?? extra.error,
     reload: () => {
       system.load();