@qoretechnologies/reqraft 0.10.46-pr.95.ge595a13 → 0.10.46

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

@@ -55,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 = {
@@ -127,3 +199,35 @@ export const Undescribed: Story = {
     await expect(label!.offsetHeight).toBeLessThan(lineHeight * 1.6);
   },
 };
+
+/**
+ * The deeper case: hash values holding hash values.
+ *
+ * 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: {
+    docs: {
+      description: {
+        story:
+          '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.',
+      },
+    },
+  },
+  args: { value: nestedValue, schema: NestedSchema, colors },
+  play: async ({ canvasElement }) => {
+    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]');
+  },
+};

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

@@ -1,4 +1,10 @@
-import { ReqoreCollapsibleContent, ReqoreIcon, ReqoreP, ReqoreTag } from '@qoretechnologies/reqore';
+import {
+  ReqoreCollapsibleContent,
+  ReqoreIcon,
+  ReqoreLink,
+  ReqoreP,
+  ReqoreTag,
+} from '@qoretechnologies/reqore';
 import {
   IQorusFormField,
   IQorusFormSchema,
@@ -8,7 +14,12 @@ import React from 'react';
 import styled from 'styled-components';
 import { useContextSelector } from 'use-context-selector';
 import { CompactRowContext } from '../compactRowContext';
-import { MONO_FONT_STACK, StyledCodePreview, StyledRowLabel, StyledRowValue } from '../compactRowStyles';
+import {
+  MONO_FONT_STACK,
+  StyledCodePreview,
+  StyledRowLabel,
+  StyledRowValue,
+} from '../compactRowStyles';
 import {
   fieldLabel,
   findAllowedValueOption,
@@ -19,7 +30,7 @@ import {
   recordIdentity,
   titleKeyFor,
 } from '../readFirst';
-import { isUiEncodedValue } from './structuredData';
+import { isEmptyUiEnvelope, isUiEncodedValue } from './structuredData';
 
 /**
  * A read-only rendering of a value THROUGH the schema that describes it.
@@ -139,10 +150,38 @@ const StyledItemTitle = styled.div<{ $color: string; $mono: boolean; $accent: st
   ${({ $mono }) => ($mono ? `font-family: ${MONO_FONT_STACK}; font-size: 15px;` : '')}
 `;
 
-/** The rule tying an item's fields to its number. */
-const StyledItemFields = styled.div<{ $border: string }>`
-  border-left: 1px solid ${({ $border }) => $border};
-  padding-left: 10px;
+/**
+ * Does this record have anything to show BELOW its heading?
+ *
+ * The heading consumes the identifying field, so a record holding only that has
+ * an empty body — and a rule drawn down an empty body is a line to nowhere.
+ */
+const hasContentUnderHeading = (record: unknown, schema?: IQorusFormSchema): boolean => {
+  if (!isRecord(record)) {
+    return true;
+  }
+  const titleKey = titleKeyFor(record, schema);
+
+  return Object.entries(record).some(
+    ([key, value]) => key !== titleKey && value !== undefined && value !== null && value !== ''
+  );
+};
+
+/** The rule tying an item's fields to its number.
+ *
+ * Same 3px as the heading's accent bar directly above it: at 1px the two read as
+ * two different devices stacked on each other rather than one rule running down
+ * the item, and the padding drops to 8px so the text stays on the same column.
+ *
+ * The rule is drawn only when something is actually under the heading. The
+ * heading is pulled left of the rule by its own negative margin, so an item
+ * whose record holds nothing but its identity showed a 1-2px sliver of line and
+ * nothing else — which reads as a rendering artefact, because that is what it
+ * was. It keeps a transparent border in that case so the column does not shift.
+ */
+const StyledItemFields = styled.div<{ $border: string; $rule: boolean }>`
+  border-left: 3px solid ${({ $border, $rule }) => ($rule ? $border : 'transparent')};
+  padding-left: 8px;
   min-width: 0;
 `;
 
@@ -349,24 +388,22 @@ const FieldValue = ({
               style={{ flexShrink: 0, marginRight: 6, verticalAlign: 'middle' }}
             />
           : null}
-          {formatted}
           {isNavigableUrl(field.value) ?
-            // The read-only detail views make an address openable, and a
-            // preview that shows the same value should not be the one place it
-            // is inert. A real anchor, so middle-click and "copy link address"
-            // work; `stopPropagation` because the row around it toggles.
-            <a
+            // The address IS the link — it used to render as inert text with a
+            // separate icon button beside it to open it, which is two things
+            // where there is one. ReqoreLink renders a real anchor, so
+            // middle-click and "copy link address" still work;
+            // `stopPropagation` because the row around it toggles.
+            <ReqoreLink
               className='schema-view-open-url'
               href={field.value}
               target='_blank'
               rel='noreferrer noopener'
-              aria-label='Open in a new tab'
-              style={{ marginLeft: 4, verticalAlign: 'middle' }}
-              onClick={(event) => event.stopPropagation()}
+              onClick={(event: React.MouseEvent) => event.stopPropagation()}
             >
-              <ReqoreIcon icon='ExternalLinkLine' size='11px' />
-            </a>
-          : null}
+              {formatted}
+            </ReqoreLink>
+          : formatted}
         </span>
       }
     </StyledRowValue>
@@ -391,92 +428,109 @@ const SchemaRecord = ({
   // The SAME host renderer the row above uses for a `code-editor` field. Read
   // from context rather than threaded through props: a nested level is arbitrarily
   // deep, and the renderer is a property of the form, not of any one level.
-  const codePreviewRenderer = useContextSelector(
-    CompactRowContext,
-    (v) => v.codePreviewRenderer
-  );
+  const codePreviewRenderer = useContextSelector(CompactRowContext, (v) => v.codePreviewRenderer);
   const cHover = useContextSelector(CompactRowContext, (v) => v.cHover);
 
   return (
-  <StyledFields className='schema-view-fields'>
-    {orderedKeys(record, schema)
-      .filter((key) => key !== skipKey)
-      .map((key) => {
-      const fieldSchema = schema[key] as TQorusFormFieldSchema | undefined;
-      const nested = (fieldSchema as { arg_schema?: IQorusFormSchema } | undefined)?.arg_schema;
-      const value = unwrap(record[key]);
-      const label = fieldLabel(key, fieldSchema);
-      const labelWithType =
-        showTypes && fieldSchema?.type ? `${label} · ${fieldSchema.type}` : label;
-
-      // A field that describes its own level renders AS that level, indented
-      // under its name — the same decision, one step down.
-      if (nested && (isRecord(value) || Array.isArray(value))) {
-        return (
-          <React.Fragment key={key}>
-            <StyledNestedLabel>
-              <StyledFieldLabel $color={colors.key}>{labelWithType}</StyledFieldLabel>
-            </StyledNestedLabel>
-            <StyledNested $border={colors.border}>
-              <SchemaLevel value={value} schema={nested} showTypes={showTypes} colors={colors} />
-            </StyledNested>
-          </React.Fragment>
-        );
-      }
-
-      // A code value is source, and source is read as source: the host's renderer
-      // gives it the syntax highlighting (and read-only LSP hover) it has in the
-      // Source Code field, and "Show more" keeps a long body from taking over the
-      // preview. Flattening it to one mono line — which is what a plain value cell
-      // does — throws all of that away for a field whose whole content is code.
-      if (isCodeField(fieldSchema) && typeof value === 'string') {
-        return (
-          <React.Fragment key={key}>
-            <StyledNestedLabel>
-              <StyledFieldLabel $color={colors.key}>{labelWithType}</StyledFieldLabel>
-            </StyledNestedLabel>
-            <StyledCodeCell onClick={(event) => event.stopPropagation()}>
-              <ReqoreCollapsibleContent
-                maxCollapsedHeight={96}
-                buttonProps={{ className: 'options-readfirst-viewmore' }}
-              >
-                {codePreviewRenderer ?
-                  codePreviewRenderer({
-                    value,
-                    name: key,
-                    schema: fieldSchema,
-                    options: schema,
-                    values: record as never,
-                  })
-                : <StyledCodePreview
-                    className='options-readfirst-code'
-                    $bg={cHover}
-                    $border={`${colors.border}88`}
-                    $fg={colors.key}
+    <StyledFields className='schema-view-fields'>
+      {orderedKeys(record, schema)
+        .filter((key) => key !== skipKey)
+        .map((key) => {
+          const fieldSchema = schema[key] as TQorusFormFieldSchema | undefined;
+          const nested = (fieldSchema as { arg_schema?: IQorusFormSchema } | undefined)?.arg_schema;
+          // A schema-declared field the form materialised but never filled in
+          // arrives as `{type: 'int'}` with no `value` key. `unwrap` cannot see
+          // that — `isUiEncodedValue` requires a `value` — so it fell through as
+          // CONTENT and was wrapped as one below, and `formatOptionValue` counted
+          // the envelope's own `type` key: an untouched Runtime Defaults read
+          // "Timeout (Seconds) 1 field" three times over while the sub-form it
+          // previews correctly said 0/3 set. `fieldSchema` is what licenses the
+          // reading: the schema declares this field, so a `{type}`-only object
+          // under it is an empty envelope, never somebody's data.
+          const raw = record[key];
+          // `!nested` is the discriminator, and it is not a detail: a field that
+      // declares its OWN level describes what is inside it, so `{type: 'default'}`
+      // there is content — the scheme's Scheme Type, reading "Default RBAC" —
+      // not an envelope. Only a leaf can be empty in this sense.
+      const value =
+        fieldSchema && !nested && isEmptyUiEnvelope(raw) ? undefined : unwrap(raw);
+          const label = fieldLabel(key, fieldSchema);
+          const labelWithType =
+            showTypes && fieldSchema?.type ? `${label} · ${fieldSchema.type}` : label;
+
+          // A field that describes its own level renders AS that level, indented
+          // under its name — the same decision, one step down.
+          if (nested && (isRecord(value) || Array.isArray(value))) {
+            return (
+              <React.Fragment key={key}>
+                <StyledNestedLabel>
+                  <StyledFieldLabel $color={colors.key}>{labelWithType}</StyledFieldLabel>
+                </StyledNestedLabel>
+                <StyledNested $border={colors.border}>
+                  <SchemaLevel
+                    value={value}
+                    schema={nested}
+                    showTypes={showTypes}
+                    colors={colors}
+                  />
+                </StyledNested>
+              </React.Fragment>
+            );
+          }
+
+          // A code value is source, and source is read as source: the host's renderer
+          // gives it the syntax highlighting (and read-only LSP hover) it has in the
+          // Source Code field, and "Show more" keeps a long body from taking over the
+          // preview. Flattening it to one mono line — which is what a plain value cell
+          // does — throws all of that away for a field whose whole content is code.
+          if (isCodeField(fieldSchema) && typeof value === 'string') {
+            return (
+              <React.Fragment key={key}>
+                <StyledNestedLabel>
+                  <StyledFieldLabel $color={colors.key}>{labelWithType}</StyledFieldLabel>
+                </StyledNestedLabel>
+                <StyledCodeCell onClick={(event) => event.stopPropagation()}>
+                  <ReqoreCollapsibleContent
+                    maxCollapsedHeight={96}
+                    buttonProps={{ className: 'options-readfirst-viewmore' }}
                   >
-                    {value}
-                  </StyledCodePreview>
-                }
-              </ReqoreCollapsibleContent>
-            </StyledCodeCell>
-          </React.Fragment>
-        );
-      }
+                    {codePreviewRenderer ?
+                      codePreviewRenderer({
+                        value,
+                        name: key,
+                        schema: fieldSchema,
+                        options: schema,
+                        values: record as never,
+                      })
+                    : <StyledCodePreview
+                        className='options-readfirst-code'
+                        $bg={cHover}
+                        $border={`${colors.border}88`}
+                        $fg={colors.key}
+                      >
+                        {value}
+                      </StyledCodePreview>
+                    }
+                  </ReqoreCollapsibleContent>
+                </StyledCodeCell>
+              </React.Fragment>
+            );
+          }
 
-      return (
-        <React.Fragment key={key}>
-          <StyledFieldLabel $color={colors.key} title={label}>
-            {labelWithType}
-          </StyledFieldLabel>
-          <FieldValue
-            field={{ type: fieldSchema?.type, value } as IQorusFormField}
-            fieldSchema={fieldSchema}
-            color={colors.key}
-          />
-        </React.Fragment>
-      );
-    })}
-  </StyledFields>
+          return (
+            <React.Fragment key={key}>
+              <StyledFieldLabel $color={colors.key} title={label}>
+                {labelWithType}
+              </StyledFieldLabel>
+              <FieldValue
+                field={{ type: fieldSchema?.type, value } as IQorusFormField}
+                fieldSchema={fieldSchema}
+                color={colors.key}
+              />
+            </React.Fragment>
+          );
+        })}
+    </StyledFields>
   );
 };
 
@@ -502,7 +556,10 @@ const SchemaLevel = ({
           return (
             <StyledItem key={index} className='schema-view-item'>
               <StyledMarker $color={colors.muted}>{index + 1}.</StyledMarker>
-              <StyledItemFields $border={colors.border}>
+              <StyledItemFields
+                $border={colors.border}
+                $rule={hasContentUnderHeading(record, schema)}
+              >
                 {isRecord(record) ?
                   <>
                     {(() => {

package/src/components/form/engine/_structuredData/structuredData.ts

@@ -52,6 +52,26 @@ export const isRecord = (value: unknown): value is Record<string, unknown> =>
 export const isStructuredContainerValue = (value: unknown): boolean =>
   Array.isArray(value) || isRecord(value);
 
+/**
+ * A field the form materialised but left UNSET: `{type: 'int'}`, no `value` key.
+ *
+ * `fixOptions` omits the key entirely when the value is undefined, so this is
+ * what an untouched sub-field of a schema-declared hash looks like on the wire.
+ * It is an EMPTY ENVELOPE, never content — and every renderer has to agree on
+ * that, because the ones that do not count the envelope's own `type` key and
+ * report an unset field as "1 field" while the sub-form correctly says 0 set.
+ *
+ * Deliberately separate from {@link isUiEncodedValue}, which requires a `value`
+ * and therefore cannot see this shape. Callers gate on knowing the field is
+ * schema-declared: without a schema saying so, a `{type: …}` object could
+ * legitimately be somebody's data.
+ */
+export const isEmptyUiEnvelope = (value: unknown): boolean =>
+  isRecord(value) &&
+  typeof value.type === 'string' &&
+  !('value' in value) &&
+  Object.keys(value).every((key) => UI_ENVELOPE_KEYS.has(key));
+
 export const isUiEncodedValue = (value: unknown): value is IUiEncodedValue => {
   if (!isRecord(value) || typeof value.type !== 'string' || !('value' in value)) {
     return false;

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

@@ -61,6 +61,9 @@ export const PANEL_LEFT_CSS = `calc(${LABEL_COL} + ${COMPACT_ROW_PAD_X + COMPACT
 export const StyledCompactPanel = styled(ReqorePanel)<{
   $headerBg: string;
   $nested?: boolean;
+  /** True when the toolbar renders no search row (hidden via `compactToolbar`,
+   *  self-hidden on a single-option form, or no toolbar at all). */
+  $tightHeader?: boolean;
 }>`
   > .reqore-panel-title {
     /* The blur + translateZ exist only to make the STICKY top-level toolbar ghost
@@ -71,7 +74,17 @@ export const StyledCompactPanel = styled(ReqorePanel)<{
         'backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transform: translateZ(0);'
       )}
     padding-top: ${GAP_FROM_SIZE[HEADER_GAP]}px;
-    padding-bottom: ${GAP_FROM_SIZE[HEADER_GAP]}px;
+    /* A header with a SEARCH ROW keeps the \`big\` gap below it — a tall
+       interactive control earns separation from the content it filters. A
+       header without one (search hidden via \`compactToolbar\`, self-hidden on
+       a single-option form, or no toolbar at all) is a thin strip, and at
+       \`big\` its padding stacked onto the panel content's own 8px into a 26px
+       dead band between the completion meter and the first status box —
+       rejected on build #140 as "unnecessarily big". \`normal\` lands it at
+       the boxes' own 10px rhythm, and scoping the change here keeps every
+       search-bearing form pixel-identical. */
+    padding-bottom: ${({ $tightHeader }) =>
+      $tightHeader ? GAP_FROM_SIZE.normal : GAP_FROM_SIZE[HEADER_GAP]}px;
   }
 
   /* Group framing. The HORIZONTAL rule is a real element in the header
@@ -437,6 +450,10 @@ export const StyledGroupBody = styled.div<{
   $success: string;
   $rowBg: string;
   $lineColor: string;
+  /** Edge colour for the "N more fields" row. Its own value because the row
+      HAS to be seen — the divider tint that separates two fields is ~8% of the
+      text colour, which disappears entirely as a 1px dashed border. */
+  $moreBorder: string;
 }>`
   display: flex;
   flex-flow: column;
@@ -516,6 +533,43 @@ export const StyledGroupBody = styled.div<{
   .readfirst-row-hidden {
     opacity: 0.65;
   }
+  /* The "N more fields" control IS a field row — same grid, same padding, same
+     hover — so it lines up with the rows above instead of floating as a scrap
+     of text in the box's corner. A dashed edge and a lower-contrast label are
+     what say it is not itself a field: nothing here can be set.
+
+     It spans both content columns because it has no label/value split, and it
+     drops the inter-row hairline (the ::after rule) since it always sits last. */
+  .readfirst-more-row {
+    grid-template-columns: 1fr auto;
+    border: 1px dashed ${({ $moreBorder }) => $moreBorder};
+    background: transparent;
+    width: 100%;
+    text-align: left;
+    font: inherit;
+    color: inherit;
+    /* The dashed edge replaces the hairline; two lines would read as a divider
+       AND a border stacked. */
+    margin-top: 2px;
+  }
+  .readfirst-more-row::after {
+    display: none;
+  }
+  .readfirst-more-row:hover {
+    background: ${({ $hover }) => $hover};
+    border-style: solid;
+  }
+  .readfirst-more-row:focus-visible {
+    outline: 2px solid ${({ $focus }) => $focus};
+    outline-offset: -2px;
+  }
+  /* The chevron points the way the click goes: down to reveal, up to fold. */
+  .readfirst-more-row .readfirst-more-chevron {
+    transition: transform 0.15s ease;
+  }
+  .readfirst-more-row[aria-expanded='true'] .readfirst-more-chevron {
+    transform: rotate(180deg);
+  }
   /* A disabled field (schema disabled flag or unmet dependencies) is not a
      click target — no hover invite, not-allowed cursor; a lock replaces the
      pencil. */

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

@@ -24,6 +24,14 @@ export interface ICompactToolbarOptionalField {
  */
 export interface ICompactToolbarContext {
   readOnly?: boolean;
+  /** Which parts to render, already resolved from the engine's `compactToolbar`
+   *  prop — every key present, no undefined to re-default here. */
+  parts: {
+    completion: boolean;
+    search: boolean;
+    fields: boolean;
+    help: boolean;
+  };
   // Completion meter
   invalidCount: number;
   attentionCount: number;