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

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.
@@ -35,10 +46,11 @@ import { isUiEncodedValue } from './structuredData';
  * So a described value is rendered the way the form asked for it, in the form's
  * own clothes:
  *
- * - Field names use `StyledRowLabel` and values use `StyledRowValue` — the very
- *   components the option rows above are built from. Not a copy of their CSS: a
- *   copy is a second definition of "what a form label looks like", and the two
- *   drift the first time either is touched.
+ * - Field names use `StyledFieldLabel` (a `StyledRowLabel` in the read-only
+ *   eyebrow treatment) and values use `StyledRowValue` — the very components the
+ *   option rows above are built from. Not a copy of their CSS: a copy is a
+ *   second definition of "what a form label looks like", and the two drift the
+ *   first time either is touched.
  * - Values are formatted by the same `formatOptionValue` the rows use, so an
  *   `allowed_values` entry resolves to its display name, a bool to Yes/No, a
  *   date to the app's format. The same words appear in the summary, the preview
@@ -138,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;
 `;
 
@@ -153,6 +193,30 @@ const StyledItemFields = styled.div<{ $border: string }>`
  * and leave the items ragged against each other, which reads as a rendering
  * fault rather than as a list.
  */
+/**
+ * A record field's name, in the detail-page vocabulary.
+ *
+ * Uppercase, tracked and dimmed, so a field name reads as furniture and the
+ * VALUE beside it is what the eye lands on. Same treatment the read-only
+ * interface panels use, which is the point: an in-editor list of records and a
+ * detail-page panel showing the same shape should not look like two components.
+ *
+ * A variant rather than a change to `StyledRowLabel`: that one is the FORM's own
+ * option-row label, and the form's fields are not read-only furniture — they are
+ * the things you are about to edit. Composing it keeps the colour, weight base
+ * and wrapping behaviour in one place instead of copying them.
+ *
+ * Applies to the label only. A VALUE is never uppercased: values are frequently
+ * case-sensitive — a service method is `onOrderStatus`, not `ONORDERSTATUS` —
+ * and the item heading is a value.
+ */
+const StyledFieldLabel = styled(StyledRowLabel)`
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  opacity: 0.55;
+`;
+
 const StyledFields = styled.div`
   /* The supporting fields step in under the heading, so the heading keeps the
      left edge to itself. This is the half that answers "the name is written in
@@ -242,6 +306,12 @@ const isRecord = (value: unknown): value is Record<string, unknown> =>
  * the `%` ceiling stops one long name from taking the whole row when the inset
  * is narrow — a phone, or a deeply nested level.
  */
+/** Approximate rendered width of one label character, in px. See `labelColumn`. */
+const LABEL_CHAR_PX = 9.5;
+
+/** Gap to the value, so the longest label is not flush against it. */
+const LABEL_SLACK_PX = 14;
+
 const labelColumn = (value: unknown, schema: IQorusFormSchema): string => {
   const inner = unwrap(value);
   const records = (Array.isArray(inner) ? inner.map(unwrap) : [inner]).filter(isRecord);
@@ -253,9 +323,26 @@ const labelColumn = (value: unknown, schema: IQorusFormSchema): string => {
     );
     return Math.max(widest, own);
   }, 0);
-  return longest ? `min(${longest + 1}ch, 45%)` : '140px';
+  // px, not `ch`. `ch` is the base font's `0` advance and knows nothing about
+  // the label's own treatment — uppercase, semibold, `letter-spacing: 0.06em`,
+  // at 12px — so it under-measures by about a tenth. With `overflow-wrap:
+  // anywhere` on the label, an under-measured column does not ellipsise, it
+  // BREAKS THE NAME IN HALF: `LEGACY_FLAG` came out over two lines the moment
+  // the labels became uppercase. Erring high costs a few px of gap; erring low
+  // costs a broken word.
+  return longest ? `min(${Math.ceil(longest * LABEL_CHAR_PX + LABEL_SLACK_PX)}px, 45%)` : '140px';
 };
 
+/**
+ * `true` when a value is an address a browser can open.
+ *
+ * Deliberately per VALUE, not per field: a field named `url` frequently holds
+ * something that is not one — a bare path, a regex, a template — and offering
+ * those a link promises a destination there is not.
+ */
+const isNavigableUrl = (value: unknown): value is string =>
+  typeof value === 'string' && /^(https?|wss?|ftps?):\/\//i.test(value);
+
 /** One field's value, rendered the way its row above renders it. */
 const FieldValue = ({
   field,
@@ -301,7 +388,22 @@ const FieldValue = ({
               style={{ flexShrink: 0, marginRight: 6, verticalAlign: 'middle' }}
             />
           : null}
-          {formatted}
+          {isNavigableUrl(field.value) ?
+            // 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'
+              onClick={(event: React.MouseEvent) => event.stopPropagation()}
+            >
+              {formatted}
+            </ReqoreLink>
+          : formatted}
         </span>
       }
     </StyledRowValue>
@@ -326,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>
-              <StyledRowLabel $color={colors.key}>{labelWithType}</StyledRowLabel>
-            </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>
-              <StyledRowLabel $color={colors.key}>{labelWithType}</StyledRowLabel>
-            </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}>
-          <StyledRowLabel $color={colors.key} title={label}>
-            {labelWithType}
-          </StyledRowLabel>
-          <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>
   );
 };
 
@@ -437,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
@@ -690,3 +703,27 @@ export const StyledGroupBody = styled.div<{
     padding-bottom: 0;
   }
 `;
+
+// One absorbed sibling, rendered inside its host row's container rather than
+// on a row of its own (see `absorb_fields`). The pair this exists for is a code
+// editor and its language: reading them as two unrelated rows one above the
+// other said they were separate decisions, and they are not.
+//
+// Laid out as label-then-control on one line so it reads as a property of the
+// element it now sits in, and separated from the editor below it by a hairline
+// rather than a gap — the two share one container, so the seam has to look like
+// a division inside it and not like two stacked things.
+export const StyledAbsorbedField = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding-bottom: 8px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid ${({ theme }) => `${theme.main}22`};
+`;
+
+export const StyledAbsorbedLabel = styled(ReqoreP)`
+  flex: 0 0 auto;
+  margin: 0;
+`;

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;