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

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

@@ -49,7 +49,12 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
 import { useMeasure, useMount, useUpdateEffect } from 'react-use';
 import styled from 'styled-components';
 import { createContext } from 'use-context-selector';
-import { getDefaultValue, insertAtIndex, richtextToString } from '../../../helpers/common';
+import {
+  fixOperatorValue,
+  getDefaultValue,
+  insertAtIndex,
+  richtextToString,
+} from '../../../helpers/common';
 import { getRequiredOptionMessage } from '../../../helpers/options';
 import {
   IValidationResult,
@@ -120,6 +125,21 @@ import {
 } from './readFirst';
 
 // Re-export types for consumers
+/** The compact form's three status boxes. */
+export type TFormEngineBoxKey = 'attention' | 'set' | 'optional';
+
+/** Which parts of the compact toolbar to render — see `compactToolbar`. */
+export interface IFormEngineToolbarParts {
+  /** The "Ready / 4 of 6 set / 67%" line and its meter. */
+  completion?: boolean;
+  /** The "Filter fields…" input. */
+  search?: boolean;
+  /** The field-picker dropdown (add optional fields, reset, revert). */
+  fields?: boolean;
+  /** The help button that opens the options dialog. */
+  help?: boolean;
+}
+
 export type IOptions = TQorusForm;
 export type TFlatOptions = TQorusFlatForm;
 export type TOption = IQorusFormField;
@@ -292,9 +312,10 @@ const getTypeFromOperator = (
   return (operators[last(operatorData) as string]?.type as TQorusType) || null;
 };
 
-export const fixOperatorValue = (operator: TOperatorValue): (string | null | undefined)[] => {
-  return isArray(operator) ? operator : [operator];
-};
+/** Re-exported from `helpers/common` so existing importers keep working; it
+ *  lives there because `helpers/validations` needs it and cannot import this
+ *  module (this module imports the validators). */
+export { fixOperatorValue } from '../../../helpers/common';
 
 /**
  * The renderer-only predicate. Defaults to reqraft's built-ins; a FormEngine
@@ -373,6 +394,23 @@ export const fixOptions = (
         (fixedValue[name] as IQorusFormField)?.value === undefined
       ) {
         obj = option.default_value as IQorusFormField;
+      } else if (
+        option.default_view === 'expression' &&
+        (fixedValue[name] as IQorusFormField)?.value === undefined
+      ) {
+        // A field the schema declares as opening in expression mode starts as an
+        // EMPTY expression, not as its raw default. `isDefaultFunction` already
+        // makes the renderer open that way, so without this the data disagreed
+        // with what the operator was looking at: an expression editor whose
+        // value was still the plain default, and no `is_expression` on the field
+        // until the first edit.
+        obj = {
+          type,
+          value: {
+            args: [],
+          },
+          is_expression: true,
+        };
       } else {
         obj = {
           type,
@@ -438,9 +476,19 @@ export const fixOptions = (
       // every value declared the bare way: the collapsed row still showed its
       // display name while the editor showed "—" and the value never reached
       // the submitted data.
+      // `allowed_values: []` is NOT "no value is permitted" — it is the server
+      // saying it has no reference values to offer right now (the app-action
+      // catalogue ships exactly that, with an
+      // `option_reference_values_unavailable` message attached). An empty array
+      // is truthy, so testing the array itself made every such option erase the
+      // operator's stored value on the first render, before the
+      // connection-refreshed schema arrived to say otherwise — and the emptied
+      // form then autosaved over the draft, so the value was gone for good.
+      // Only an option that actually declares choices can have a value that is
+      // not one of them.
       if (
         newOption.value !== undefined &&
-        options?.[optionName]?.allowed_values &&
+        options?.[optionName]?.allowed_values?.length &&
         !findAllowedValueOption(newOption.value, options?.[optionName]) &&
         !isValueTemplate(newOption.value) &&
         !options?.[optionName]?.multiselect &&
@@ -626,6 +674,37 @@ export interface IFormEngineProps extends Omit<IReqoreCollectionProps, 'onChange
    * No-op in classic (non-compact) mode.
    */
   compactPanelProps?: IReqorePanelProps;
+  /**
+   * Compact mode only: which status boxes start collapsed. Defaults to
+   * `['optional']` — a form opens on what is in use.
+   *
+   * Pass `['set', 'optional']` where the form is one item in a longer list and
+   * the reader is choosing WHICH to open rather than reading this one, e.g. a
+   * template's per-action option forms stacked in a drawer.
+   *
+   * Two escapes override this and are not negotiable: a box always opens while
+   * a search query is running (`ReqorePanel` unmounts collapsed content, so a
+   * match inside a closed box would be unreachable), and the Optional box stays
+   * open when every row is optional, because collapsing it would render a card
+   * that looks empty and broken.
+   */
+  compactCollapsedGroups?: TFormEngineBoxKey[];
+  /**
+   * Compact mode only: which parts of the form's toolbar to show. `true`
+   * (default) shows all of it; `false` hides the whole thing.
+   *
+   * The parts already hide themselves when they have nothing to say — the
+   * completion meter needs at least one counted option, and the search and
+   * field-picker need more than one option to pick between — so reach for this
+   * only to hide something that WOULD have rendered. A per-action form asking
+   * for one value, say, has a meter reading 0/1 that tells the reader nothing
+   * they cannot see in the row below it.
+   *
+   * Hiding `search` removes the only way to run a query, which is what forces
+   * a collapsed box open; `compactCollapsedGroups` then fully determines what
+   * is open.
+   */
+  compactToolbar?: boolean | IFormEngineToolbarParts;
   /** Compact mode only: per-group display metadata (label / icon / subtitle /
    * order) — the server only sends the bare group key. */
   groups?: Record<string, IFormEngineGroup>;
@@ -792,6 +871,8 @@ const FormEngineImpl = ({
   compactFlush = false,
   compactNested = false,
   compactPanelProps,
+  compactCollapsedGroups = ['optional'],
+  compactToolbar = true,
   commitMode = 'immediate',
   expandMode = 'single',
   onCommit,
@@ -2307,6 +2388,11 @@ const FormEngineImpl = ({
             allowed_values_creatable={options?.[optionName]?.allowed_values_creatable}
             disabled={
               options?.[optionName]?.disabled ||
+              // a system-owned field states that as `readonly`; only the older
+              // compat projection also sent `disabled`, so honouring only
+              // `disabled` rendered an editable control for a value the user
+              // cannot change (see CompactRow's `fieldReadonly`)
+              (options?.[optionName] as { readonly?: boolean } | undefined)?.readonly ||
               readOnly ||
               !hasAllDependenciesFullfilled(
                 options?.[optionName]?.depends_on,
@@ -2503,6 +2589,14 @@ const FormEngineImpl = ({
     ]
   );
 
+  // `compactToolbar` resolved to a full object, so neither the context type nor
+  // the toolbar itself has to re-default anything. `null` means no toolbar.
+  const compactToolbarParts = useMemo(() => {
+    if (compactToolbar === false) return null;
+    const all = { completion: true, search: true, fields: true, help: true };
+    return compactToolbar === true ? all : { ...all, ...compactToolbar };
+  }, [JSON.stringify(compactToolbar)]);
+
   const compactToolbarContextValue = useMemo<ICompactToolbarContext>(
     () => ({
       readOnly,
@@ -2511,6 +2605,7 @@ const FormEngineImpl = ({
       completion: readFirstCompletion,
       showInvalidOnly: showInvalidOptionsOnly,
       onToggleInvalidOnly: handleToggleInvalidOnly,
+      parts: compactToolbarParts ?? { completion: false, search: false, fields: false, help: false },
       hasMultipleOptions: size(availableOptions) > 1,
       compactQuery,
       setCompactQuery,
@@ -2561,10 +2656,14 @@ const FormEngineImpl = ({
 
   // The engine's own toolbar action, plus whatever the consumer added through
   // `compactPanelProps.actions` — appended, so an outside action can never
-  // knock the form's toolbar out of the header.
+  // knock the form's toolbar out of the header. Only `compactToolbar={false}`
+  // removes it, and then the header carries just the consumer's own actions.
   const compactHeaderActions = useMemo(
-    () => [{ as: CompactToolbar, responsive: false }, ...(compactPanelProps?.actions || [])],
-    [compactPanelProps?.actions]
+    () => [
+      ...(compactToolbarParts ? [{ as: CompactToolbar, responsive: false }] : []),
+      ...(compactPanelProps?.actions || []),
+    ],
+    [compactPanelProps?.actions, compactToolbarParts]
   );
   const renderCompact = () => {
     const headerBg = `${changeDarkness(getMainBackgroundColor(theme), 0.02)}${percentToHexAlpha(88)}`;
@@ -2577,9 +2676,40 @@ const FormEngineImpl = ({
       if (requiredOnly && !(schema?.required || schema?.required_groups)) {
         return false;
       }
-      return matchesQuery(optionName);
+      // A field that absorbs a sibling also answers for it: searching
+      // "language" has to surface the row that now holds the language control,
+      // or the field becomes unreachable through the filter.
+      if (matchesQuery(optionName)) return true;
+      const absorb = (schema as { absorb_fields?: string[] } | undefined)?.absorb_fields;
+      return !!absorb?.some((absorbedName) => matchesQuery(absorbedName));
     };
 
+    // Fields a sibling absorbs into its own container.
+    //
+    // A field declaring `absorb_fields: ['language']` renders that sibling's
+    // control inside its own row instead of letting it have a row of its own.
+    // The pair this exists for is a code editor and its language: they are one
+    // decision — "what is this code, and in what language" — and reading them
+    // as two unrelated rows one above the other is what the layout used to say.
+    //
+    // Absorbed fields stay in `grouped`, and therefore in the Set / Optional /
+    // Needs-attention counts and in the completion meter. Only the ROW is
+    // skipped. Dropping them from the buckets instead would leave the meter
+    // ("13/18 set", computed from `availableOptions`) disagreeing with the box
+    // badge beside it, which counts row entries.
+    const absorbedBy: Record<string, string> = {};
+    forEach(options, (option, optionName) => {
+      const absorb = (option as { absorb_fields?: string[] } | undefined)?.absorb_fields;
+      if (!absorb?.length) return;
+      absorb.forEach((absorbedName) => {
+        // Only absorb a sibling that exists and is not already spoken for; a
+        // schema naming a missing field must not make the field disappear.
+        if (options?.[absorbedName] && !absorbedBy[absorbedName]) {
+          absorbedBy[absorbedName] = optionName;
+        }
+      });
+    });
+
     // Group the options by their raw `group` key, remembering the order groups
     // first appear in the schema. Each row carries a `hidden` flag.
     const groupOrder: string[] = [];
@@ -2668,17 +2798,16 @@ const FormEngineImpl = ({
     // schema-group order (thin sub-labels) and the required-group clustering: an
     // unmet one-of group's members all land in attention and still rail up.
     type TRowEntry = { name: string; hidden: boolean };
-    type TBucketKey = 'attention' | 'set' | 'optional';
-    const buckets: Record<TBucketKey, Record<string, TRowEntry[]>> = {
+    const buckets: Record<TFormEngineBoxKey, Record<string, TRowEntry[]>> = {
       attention: {},
       set: {},
       optional: {},
     };
-    const bucketGroups: Record<TBucketKey, string[]> = { attention: [], set: [], optional: [] };
+    const bucketGroups: Record<TFormEngineBoxKey, string[]> = { attention: [], set: [], optional: [] };
     // Freeze the box of any field currently being edited (or whose one-of group
     // has an edited member) to its last settled box — so finishing an edit that
     // flips its status doesn't remount it in another box and steal focus.
-    const stableBucketOf = (entry: TRowEntry): TBucketKey => {
+    const stableBucketOf = (entry: TRowEntry): TFormEngineBoxKey => {
       const fresh = getOptionBucket(entry.name, entry.hidden);
       const groupBeingEdited =
         !entry.hidden &&
@@ -2702,7 +2831,7 @@ const FormEngineImpl = ({
         buckets[b][groupName].push(entry);
       });
     });
-    const bucketCount = (b: TBucketKey) =>
+    const bucketCount = (b: TFormEngineBoxKey) =>
       bucketGroups[b].reduce((n, g) => n + buckets[b][g].length, 0);
 
     // "Is the Optional box the whole form?" — when nothing needs attention and
@@ -2718,7 +2847,7 @@ const FormEngineImpl = ({
     const showGroupSubLabel = (groupName: string) =>
       (groupName !== 'general' && groupName !== 'optional') || !!groups?.[groupName];
     const STATUS_BOXES: Array<{
-      key: TBucketKey;
+      key: TFormEngineBoxKey;
       label: string;
       intent?: 'warning' | 'success';
       icon: IReqoreIconName;
@@ -2732,6 +2861,11 @@ const FormEngineImpl = ({
     // together at the first member's slot and rendered as a connected rail (flat
     // rows — no wrapper — so the value surface applies normally; the rail + nodes
     // are drawn per member). Narrow stacks fall back to flat rows.
+    // The absorbed siblings a host row must render, in schema order. Empty for
+    // every row that absorbs nothing, which is all of them by default.
+    const absorbedNamesFor = (hostName: string): string[] =>
+      Object.keys(absorbedBy).filter((absorbedName) => absorbedBy[absorbedName] === hostName);
+
     const renderGroupRows = (names: Array<{ name: string; hidden: boolean }>) => {
       const renderRow = (
         entry: { name: string; hidden?: boolean },
@@ -2754,6 +2888,9 @@ const FormEngineImpl = ({
           clustered={clustered}
           clusterFirst={clusterFirst}
           clusterLast={clusterLast}
+          // The siblings this row renders inside itself instead of leaving
+          // them a row of their own — see `absorbedBy`.
+          absorbedFields={absorbedNamesFor(entry.name)}
         />
       );
       // (Clustering runs in narrow mode too now — the "One of the below is
@@ -2762,6 +2899,10 @@ const FormEngineImpl = ({
       const emitted = new Set<string>();
       const groupOf = (name: string) =>
         (options?.[name]?.required_groups as string[] | undefined)?.[0];
+      // An absorbed field keeps its place in the buckets — so the Set /
+      // Optional counts and the completion meter still see it — but its host
+      // renders its control, so it gets no row of its own here.
+      names = names.filter((entry) => !absorbedBy[entry.name]);
       return names.map((entry) => {
         const grp = groupOf(entry.name);
         if (!grp) return renderRow(entry, false);
@@ -2812,6 +2953,10 @@ const FormEngineImpl = ({
                 $flush={compactFlush || compactNested}
               >
                 <StyledCompactPanel
+                  // Mirrors the toolbar's own search-row gate: when no search
+                  // row renders, the header is a thin strip and sits tight to
+                  // the first status box (see StyledCompactPanel).
+                  $tightHeader={!(compactToolbarParts?.search && size(availableOptions) > 1)}
                   // The top-level form scrolls, so its toolbar STICKS and carries a
                   // dark blurred backdrop so content ghosts cleanly beneath it. A
                   // nested (arg_schema) sub-form owns no scroll context — drop the
@@ -2878,24 +3023,29 @@ const FormEngineImpl = ({
                         minimal
                         collapseButtonProps={{ flat: true, minimal: true, size: 'small' }}
                         collapsible
-                        // The Optional box now holds every not-yet-added field, so
-                        // it starts COLLAPSED to keep the form focused on what's in
-                        // use. But a SEARCH must surface matching addable fields —
-                        // and ReqorePanel unmounts collapsed content — so force it
-                        // open whenever a query is active. (isCollapsed is the
-                        // panel's controllable state; manual toggling still works
-                        // when no query is set.)
-                        // The Optional box starts collapsed so a form opens on what
-                        // is in use — but only when there IS something else to
-                        // open on. When every field is optional it is the whole
-                        // form, and collapsing it renders a card that looks empty
-                        // and broken: an auth profile's Authorization block, whose
-                        // nine requirement fields are all optional, showed as a
-                        // titled card containing one collapsed "Optional 9" strip
-                        // and nothing else. A search still forces it open
-                        // (ReqorePanel unmounts collapsed content, so a match
-                        // inside it would be unreachable otherwise).
-                        isCollapsed={box.key === 'optional' && !query && !onlyOptionalRows}
+                        // Which boxes start closed is the consumer's call
+                        // (`compactCollapsedGroups`, default `['optional']`: the
+                        // Optional box holds every not-yet-added field, so a form
+                        // opens on what is in use). Two rules override it:
+                        //
+                        // A SEARCH forces every box open — ReqorePanel unmounts
+                        // collapsed content, so a match inside a closed box would
+                        // be unreachable. (isCollapsed is the panel's controllable
+                        // state; manual toggling still works with no query set.)
+                        //
+                        // The Optional box stays open when it is the ONLY box,
+                        // because collapsing it renders a card that looks empty and
+                        // broken: an auth profile's Authorization block, whose nine
+                        // requirement fields are all optional, showed as a titled
+                        // card containing one collapsed "Optional 9" strip and
+                        // nothing else. This does not generalise to the other two —
+                        // a lone Set box collapsed is a deliberate ask, and its
+                        // header still reports what is in there.
+                        isCollapsed={
+                          compactCollapsedGroups.includes(box.key) &&
+                          !query &&
+                          !(box.key === 'optional' && onlyOptionalRows)
+                        }
                         label={
                           <StyledGroupHeader>
                             <ReqoreP effect={{ weight: 'bold' }} size='normal'>

package/src/components/form/engine/_structuredData/SchemaDataView.stories.tsx

@@ -1,7 +1,5 @@
-import { ReqoreControlGroup, ReqoreP, ReqorePanel } from '@qoretechnologies/reqore';
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { expect } from 'storybook/test';
-import styled from 'styled-components';
 import { SchemaDataView } from './SchemaDataView';
 
 /**
@@ -57,6 +55,78 @@ const methodValue = [
   { type: 'hash', value: { name: 'onConnect', desc: 'connection lifecycle hook' } },
 ];
 
+/**
+ * A schema whose hash values hold hash values of their own — three levels, not
+ * one.
+ *
+ * Every other fixture here is a flat record, and a flat record cannot show what
+ * this view does with depth: whether a nested level is legible, whether the
+ * rules stack sensibly, whether a heading two levels down still reads as a
+ * heading. Judging the treatment on a single `key: value` pair is what the
+ * review said was impossible, and it was right.
+ */
+const NestedSchema = {
+  name: { type: 'string', display_name: 'Endpoint' },
+  auth: {
+    type: 'hash',
+    display_name: 'Authentication',
+    arg_schema: {
+      scheme: {
+        type: 'string',
+        display_name: 'Scheme',
+        allowed_values: [
+          { value: 'oauth2', display_name: 'OAuth2' },
+          { value: 'basic', display_name: 'Basic' },
+        ],
+      },
+      token: {
+        type: 'hash',
+        display_name: 'Token',
+        arg_schema: {
+          url: { type: 'string', display_name: 'Token URL' },
+          ttl: { type: 'int', display_name: 'Lifetime (s)' },
+          rotate: { type: 'bool', display_name: 'Rotate Automatically' },
+        },
+      },
+    },
+  },
+  retry: {
+    type: 'hash',
+    display_name: 'Retry Policy',
+    arg_schema: {
+      attempts: { type: 'int', display_name: 'Attempts' },
+      backoff: { type: 'string', display_name: 'Backoff' },
+    },
+  },
+} as never;
+
+const nestedValue = [
+  {
+    type: 'hash',
+    value: {
+      name: 'POST /orders',
+      auth: {
+        scheme: 'oauth2',
+        token: {
+          url: 'https://auth.example.com/oauth2/token',
+          ttl: 3600,
+          rotate: true,
+        },
+      },
+      retry: { attempts: 3, backoff: 'exponential' },
+    },
+  },
+  {
+    // A second record that fills only part of the tree: the nested level is
+    // present but shallow, which is where "no data under the label" shows up.
+    type: 'hash',
+    value: {
+      name: 'GET /orders/{id}',
+      auth: { scheme: 'basic' },
+    },
+  },
+];
+
 const colors = { key: '#f1f0ee', muted: '#a0a0a0', border: '#a0a0a066', accent: '#3b8eea' };
 
 export const Schemes: Story = {
@@ -108,119 +178,56 @@ export const Undescribed: Story = {
   },
   play: async ({ canvasElement }) => {
     await expect(canvasElement.textContent).toContain('legacy_flag');
+
+    // A field name renders on ONE line. The label column is measured from the
+    // longest name, and the label carries `overflow-wrap: anywhere` — so an
+    // under-measured column does not ellipsise, it breaks the name in half.
+    // That is exactly what happened when the labels became uppercase and the
+    // measurement was still in `ch`, which knows nothing about the tracking:
+    // `LEGACY_FLAG` came out over two lines.
+    //
+    // Asserted as geometry rather than as a width, because the width is the
+    // thing that keeps being wrong — the invariant is that the name fits.
+    const label = [...canvasElement.querySelectorAll<HTMLElement>('.schema-view-fields > *')].find(
+      (element) => (element.textContent ?? '').trim().toLowerCase() === 'legacy_flag'
+    );
+
+    await expect(label).toBeTruthy();
+
+    const lineHeight = parseFloat(getComputedStyle(label!).lineHeight) || 16;
+
+    await expect(label!.offsetHeight).toBeLessThan(lineHeight * 1.6);
   },
 };
 
-/* ------------------------------------------------------------------------- *
- * Heading-emphasis prototypes
- *
- * The identifying value is the thing a reader scans for, and size alone was not
- * carrying it far enough. These render the SAME data under candidate
- * treatments, side by side, so the choice is made by looking rather than by
- * describing.
+/**
+ * The deeper case: hash values holding hash values.
  *
- * The overrides live in the story, NOT in the component: this is a comparison,
- * and only the winner should reach `SchemaDataView`. Raw colours are used here
- * for the same reason — a prototype is allowed to be literal, but the shipped
- * version takes its colour from a Reqore intent (see BRAND_DESIGN §1: colour
- * meaning comes from intents, emphasis from effects, never per-app hex).
- * ------------------------------------------------------------------------- */
-
-const StyledVariant = styled.div`
-  /* B — tinted background: the heading sits on its own surface. */
-  &.variant-background .schema-view-item-title {
-    display: inline-block;
-    background: #ffffff0f;
-    border-radius: 4px;
-    padding: 1px 8px;
-    margin-left: -8px;
-  }
-
-  /* C — indented rows: the heading keeps the left edge to itself, and the
-     supporting fields step in under it. Costs no colour at all. */
-  &.variant-indent .schema-view-fields {
-    padding-left: 14px;
-  }
-
-  /* D — accent bar: a rule of its own beside the heading, in the app's accent.
-     Sanctioned emphasis (BRAND_DESIGN §1 names accent bars explicitly). */
-  &.variant-accent .schema-view-item-title {
-    border-left: 3px solid #7c5cff;
-    padding-left: 8px;
-    margin-left: -11px;
-  }
-
-  /* E — everything: accent bar + tinted surface + indented rows. */
-  &.variant-all .schema-view-item-title {
-    display: inline-block;
-    background: #7c5cff1f;
-    border-left: 3px solid #7c5cff;
-    border-radius: 0 4px 4px 0;
-    padding: 1px 8px;
-    margin-left: -11px;
-  }
-  &.variant-all .schema-view-fields {
-    padding-left: 14px;
-  }
-
-  /* F — colour only, applied as a FILL behind the text rather than to the text
-     itself: an intent used as text fails contrast (a muted label reads at
-     1.3:1), which is why this is a chip and not a coloured word. */
-  &.variant-tint .schema-view-item-title {
-    display: inline-block;
-    background: #2e7d5b33;
-    border-radius: 4px;
-    padding: 1px 8px;
-    margin-left: -8px;
-  }
-`;
-
-const VARIANTS: { key: string; label: string; note: string }[] = [
-  { key: 'variant-none', label: 'A — shipped treatment', note: 'accent bar + tinted fill + indented rows' },
-  { key: 'variant-indent', label: 'B — indent the rows', note: 'no colour; heading owns the edge' },
-  { key: 'variant-background', label: 'C — neutral fill', note: 'white 6% chip behind the name' },
-  { key: 'variant-accent', label: 'D — accent bar', note: 'brand bar beside the name' },
-  { key: 'variant-tint', label: 'E — coloured fill', note: 'intent as a FILL, never as text' },
-  { key: 'variant-all', label: 'F — bar + fill + indent', note: 'all three together' },
-];
-
-export const HeadingEmphasisPrototypes: Story = {
+ * Asked for in review because the flat fixtures could not answer whether the
+ * treatment survives nesting — three levels here (endpoint → authentication →
+ * token), plus a second record that stops after one, so a nested level with
+ * nothing under it renders beside one that is full.
+ */
+export const NestedSchemas: Story = {
   parameters: {
-    // Six variants stacked do not fit the default 720px capture, and a
-    // comparison you have to scroll is not a comparison. Qlip's capture viewport
-    // is a separate setting from Storybook's preview viewport, so it is pinned
-    // here explicitly — setting only the preview one yields a full-height story
-    // and a cropped snapshot.
-    qlip: { viewport: { width: 1280, height: 1100 } },
     docs: {
       description: {
         story:
-          'Candidate treatments for the item heading, rendered over identical data so they can be compared directly. A prototype surface — only the chosen treatment is meant to reach the component.',
+          'A described list whose records nest two levels deeper: an endpoint carrying an Authentication hash, which itself carries a Token hash of URL, lifetime and a bool. The second record fills only the first nested level, so a shallow branch sits next to a full one.',
       },
     },
   },
-  // Two items per variant, not three: six stacked variants have to fit one
-  // screen or they cannot be compared at a glance, which is the whole point.
-  args: { value: methodValue.slice(0, 2), schema: MethodSchema, colors },
-  render: (args) => (
-    <ReqoreControlGroup vertical fluid gapSize='big'>
-      {VARIANTS.map((variant) => (
-        <ReqorePanel key={variant.key} label={variant.label} minimal flat padded size='small'>
-          <ReqoreP size='small' effect={{ opacity: 0.6 }} style={{ marginBottom: 6 }}>
-            {variant.note}
-          </ReqoreP>
-          <StyledVariant className={variant.key}>
-            <SchemaDataView {...args} />
-          </StyledVariant>
-        </ReqorePanel>
-      ))}
-    </ReqoreControlGroup>
-  ),
+  args: { value: nestedValue, schema: NestedSchema, colors },
   play: async ({ canvasElement }) => {
-    // Every variant renders the same three items — the comparison is only
-    // meaningful if none of the treatments changed the content.
-    await expect(canvasElement.querySelectorAll('.schema-view-item-title')).toHaveLength(
-      VARIANTS.length * 2
+    const titles = [...canvasElement.querySelectorAll('.schema-view-item-title')].map((element) =>
+      (element.textContent ?? '').trim()
     );
+
+    await expect(titles).toEqual(['POST /orders', 'GET /orders/{id}']);
+    // The deepest level actually rendered: a label from the third tier, and the
+    // bool beneath it resolved to a word rather than printed as `true`.
+    await expect(canvasElement.textContent).toContain('Token URL');
+    await expect(canvasElement.textContent).toContain('Lifetime (s)');
+    await expect(canvasElement.textContent).not.toContain('[object Object]');
   },
 };