@qoretechnologies/reqraft 0.10.65 → 0.10.66-pr.145.g124fc92

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

@@ -27,6 +27,7 @@ import { useContextSelector } from 'use-context-selector';
 import { hasAllDependenciesFullfilled, parseDependency } from '../../../helpers/validations';
 import { findTemplate, isValueTemplate } from '../../../helpers/templates';
 import { getDefaultValue, richtextToSegments, richtextToString } from '../../../helpers/common';
+import { fieldHasLongDescription } from '../../../helpers/fieldDescription';
 import { hasTemplateText, templateTextSegments } from '../../../helpers/templateText';
 import { ReadOnlyTemplateTag } from '../fields/template/ReadOnlyTemplateTag';
 import { TemplateText } from '../fields/template/TemplateText';
@@ -35,6 +36,7 @@ import { Description } from '../../Description';
 import { useMarkdownRenderer } from '../../Description/markdownRendererContext';
 import { FocusedEditing } from '../../FocusedEditing';
 import { CompactRowContext } from './compactRowContext';
+import { CALM_REQUIRED_LABEL, CALM_REQUIRED_READ_LABEL, useIsCalmForm } from './formAppearance';
 import { revealRow } from './revealRow';
 import {
   StyledActionSlot,
@@ -192,8 +194,17 @@ export const CompactRow = memo(
     clusterLast?: boolean;
   }) => {
     const readOnly = useContextSelector(CompactRowContext, (v) => v.readOnly);
+    // The look only — see `TFormEngineAppearance`. Nothing a row DOES reads it.
+    const calm = useIsCalmForm();
     const commitMode = useContextSelector(CompactRowContext, (v) => v.commitMode);
     const options = useContextSelector(CompactRowContext, (v) => v.options);
+    // Whether this field's emptiness is a fault yet: the person has opened it and left,
+    // or the host reported a submit attempt. Before that a required field is only to
+    // fill in, and says so in the quiet colour.
+    const visited = useContextSelector(
+      CompactRowContext,
+      (v) => v.revealRequired || !!v.visitedOptions?.includes(optionName)
+    );
 
     // An absorbed field keeps its own name — it is a different field, not a
     // property of its host — so the label comes from its schema exactly as it
@@ -296,6 +307,11 @@ export const CompactRow = memo(
     const cDanger = useContextSelector(CompactRowContext, (v) => v.cDanger);
     const cWarning = useContextSelector(CompactRowContext, (v) => v.cWarning);
     const cInfo = useContextSelector(CompactRowContext, (v) => v.cInfo);
+    const cText = useContextSelector(CompactRowContext, (v) => v.cText);
+    // A field's NAME: full text colour by default; grey in the calm look, so the
+    // value beside it is what the eye lands on. One colour for the read row, the
+    // open row and the edit card, so a name does not change as its field opens.
+    const cLabel = calm ? `${cText}b3` : cKey;
     // A markdown value renders as a document in the row's inset; the host's
     // renderer when it supplied one, reqraft's own otherwise.
 
@@ -402,6 +418,11 @@ export const CompactRow = memo(
       }
 
       if (valueType === 'bool' || valueType === 'boolean') {
+        // Calm: Yes and No are words. Neither is a status — "No" is not a
+        // failure — so neither is coloured.
+        if (calm) {
+          return <span style={textStyle}>{formatted}</span>;
+        }
         const truthy = field?.value === true || field?.value === 'true';
         return (
           <ReqoreTag
@@ -701,8 +722,11 @@ export const CompactRow = memo(
       );
     };
     const required = !!(schema?.required || schema?.required_groups);
-    // The asterisk says "you have to fill this in". Read-only, nobody does.
-    const requiredMark = required && !readOnly;
+    // The asterisk says "you have to fill this in". Read-only, nobody does. The
+    // calm look draws none at all: an empty required field says so in its
+    // value column instead ("Required · add a value"), and a filled one has
+    // nothing left to ask for.
+    const requiredMark = required && !readOnly && !calm;
     const removable =
       !readOnly && !schema?.preselected && !schema?.required && !schema?.required_groups;
     const changed = !hidden && !readOnly && hasOptionChanged(optionField?.value, optionName);
@@ -767,8 +791,15 @@ export const CompactRow = memo(
             minimal
             flat
             compact
-            effect={{ uppercase: true, spaced: 1 }}
-            intent={groupResolved ? 'success' : 'warning'}
+            effect={calm ? undefined : { uppercase: true, spaced: 1 }}
+            // Calm: a met group is nothing to point at — only the unmet one is
+            // coloured.
+            intent={
+              groupResolved ?
+                calm ? undefined
+                : 'success'
+              : 'warning'
+            }
             icon={groupResolved ? 'CheckLine' : 'LinkM'}
             label={
               !groupResolved ? 'One of'
@@ -921,16 +952,39 @@ export const CompactRow = memo(
       const editor = editorRef.current;
       if (!editor) return undefined;
       let settled = false;
+      /* A control that is not a text box holds the caret PROVISIONALLY. An editor that
+         takes text can mount after the row opens (a code editor loads late), and until
+         it does the only control there is its chrome: a fullscreen toggle. When the
+         text box arrives it takes the caret, unless the reader has moved it since. A
+         row that never grows one (a pick-one) simply keeps its control. */
+      let provisional: HTMLElement | null = null;
       const takeCaret = (): boolean => {
         if (settled) return true;
         const active = document.activeElement as HTMLElement | null;
+        if (provisional) {
+          if (active !== provisional) {
+            // The reader moved the caret themselves. Leave it there.
+            settled = true;
+            return true;
+          }
+          const textEntry = findRowFocusTarget(editor, { textEntryOnly: true });
+          if (!textEntry) return false;
+          textEntry.focus({ preventScroll: true });
+          // An editor's text box can be in the DOM before it can take focus (Monaco's
+          // edit area, mid-layout), and `focus()` then does nothing. Only a caret
+          // that landed counts; otherwise try again on the editor's next change.
+          if (document.activeElement !== textEntry) return false;
+          settled = true;
+          return true;
+        }
         if (active && active !== document.body && !rowRef.current?.contains(active)) {
           // Someone else holds the caret — a field the reader moved into while
           // this row's editor was still arriving. Leave it where it is.
           settled = true;
           return true;
         }
-        const control = findRowFocusTarget(editor);
+        // A card hands the caret only to where text goes (see `findRowFocusTarget`).
+        const control = findRowFocusTarget(editor, { textEntryOnly: !inlineEditable });
         if (!control) return false;
         // The least scroll that shows the row clear of the pinned box header,
         // and none when it is already in view (see `revealRow`).
@@ -940,6 +994,9 @@ export const CompactRow = memo(
         // `preventScroll`, because the reveal above has already put the row
         // where it belongs; letting focus scroll as well moves it twice.
         control.focus({ preventScroll: true });
+        // A control that cannot take focus yet (still laying out) did not take
+        // the caret: try again on the editor's next change.
+        if (document.activeElement !== control) return false;
         /* …and if the control the row offers is a PICKER, open it.
          *
          * A closed picker prints the value it holds, which is exactly what the
@@ -957,6 +1014,13 @@ export const CompactRow = memo(
         if (openedByAuthor.current && inlineEditable && isClosedPickerTrigger(control)) {
           openedByAuthor.current = false;
           setOpenThePicker(true);
+          settled = true;
+          return true;
+        }
+        if (findRowFocusTarget(editor, { textEntryOnly: true }) !== control) {
+          // Not a text box: hold it until one arrives (see `provisional`).
+          provisional = control;
+          return false;
         }
         settled = true;
         return true;
@@ -965,7 +1029,9 @@ export const CompactRow = memo(
       const observer = new MutationObserver(() => {
         if (takeCaret()) observer.disconnect();
       });
-      observer.observe(editor, { childList: true, subtree: true });
+      // Attributes too: an editor's text box can become focusable by an attribute or
+      // style change after it is inserted (see the `focus()` checks above).
+      observer.observe(editor, { childList: true, subtree: true, attributes: true });
       return () => observer.disconnect();
     }, [isExpanded, optionName, inlineEditable]);
 
@@ -1150,7 +1216,7 @@ export const CompactRow = memo(
           fixed
           flat
           compact
-          effect={{ uppercase: true, spaced: 1 }}
+          effect={calm ? undefined : { uppercase: true, spaced: 1 }}
         />
       : null;
     const isPassiveCloseAction = fixedAllowedValueOption;
@@ -1174,7 +1240,7 @@ export const CompactRow = memo(
           minimal
           fixed
           icon='CloseLine'
-          intent='warning'
+          intent={calm ? undefined : 'warning'}
           // "Cancel edit", not "Cancel": a bare Cancel collides with the one
           // in Reqore's confirmation modal, and this one is specifically about
           // abandoning the edit rather than dismissing a dialog.
@@ -1195,7 +1261,9 @@ export const CompactRow = memo(
       <ReqoreButton
         className='options-readfirst-done'
         size='small'
-        intent={!isPassiveCloseAction ? 'success' : undefined}
+        // Calm: a neutral button. Closing a field is not a healthy figure and
+        // not the page's one primary action, so it takes neither colour.
+        intent={!isPassiveCloseAction && !calm ? 'success' : undefined}
         flat={isPassiveCloseAction}
         minimal={isPassiveCloseAction}
         fixed
@@ -1236,6 +1304,10 @@ export const CompactRow = memo(
           allOptions: availableOptions,
           getType: getTypeForOption,
           isRendererOnly,
+          calm,
+          readOnly,
+          // Until the person has been to the field, its requirement is stated plainly.
+          requirementPending: !visited,
         }).map((m) => ({ intent: m.intent as string, content: String(m.label) }))
       : [];
     // TWO display channels, matching the Focus prototype:
@@ -1274,7 +1346,7 @@ export const CompactRow = memo(
     // with no route to the field's description at all. Stops propagation because
     // both labels are click targets themselves (the row expands / collapses).
     const helpIcon =
-      schema?.desc ?
+      fieldHasLongDescription(schema) ?
         <ReqoreIcon
           icon='QuestionLine'
           size='12px'
@@ -1317,7 +1389,14 @@ export const CompactRow = memo(
         size='small'
         opaque={false}
         flat
-        intent={m.intent as never}
+        // Calm: a note that only informs takes no colour — blue is kept for "a
+        // filter is on", green for a healthy figure. A warning or a failure
+        // keeps its intent: those are what a person has to act on.
+        intent={
+          (calm && (!m.intent || m.intent === 'info' || m.intent === 'success') ?
+            undefined
+          : m.intent) as never
+        }
         title={m.title}
         style={{ marginBottom: 8 }}
       >
@@ -1493,7 +1572,7 @@ export const CompactRow = memo(
                 tabIndex={0}
                 aria-label={`Collapse ${label}`}
                 title={schema?.short_desc || undefined}
-                $color={cKey}
+                $color={cLabel}
                 $pointer
                 onClick={collapse}
                 onKeyDown={(event) => {
@@ -1504,7 +1583,7 @@ export const CompactRow = memo(
                 }}
               >
                 {label}
-                {required ?
+                {required && !calm ?
                   <ReqoreIcon icon='Asterisk' color='danger' size='10px' />
                 : null}
                 {helpIcon}
@@ -1526,6 +1605,7 @@ export const CompactRow = memo(
             </StyledLabelBlock>
             <div
               ref={editorRef}
+              className='options-readfirst-row-editor'
               style={{ minWidth: 0 }}
               onKeyDown={(event) => {
                 if (event.key === 'Escape') {
@@ -1664,6 +1744,7 @@ export const CompactRow = memo(
       return (
         <StyledEditCard
           key={optionName}
+          ref={rowRef}
           data-field={optionName}
           className={
             COMPACT_SINGLE_VALUE_TYPES.has(editType) ?
@@ -1672,6 +1753,7 @@ export const CompactRow = memo(
           }
           $bg={cHover}
           $border={schemaIntentColor ? `${schemaIntentColor}66` : `${cInfo}66`}
+          $calm={calm}
         >
           <div
             style={{
@@ -1682,7 +1764,7 @@ export const CompactRow = memo(
             }}
           >
             <StyledCardHeading>
-              <StyledCardLabel $color={cKey}>
+              <StyledCardLabel $color={cLabel}>
                 {(
                   (schema as { icon?: string } | undefined)?.icon ||
                   (schema as { image?: string } | undefined)?.image
@@ -1695,7 +1777,7 @@ export const CompactRow = memo(
                 : null}
                 <span>
                   {label}
-                  {required ?
+                  {required && !calm ?
                     <ReqoreIcon icon='Asterisk' color='danger' size='10px' />
                   : null}
                   {/* The `?` belongs here too. The read row and the inline
@@ -1802,6 +1884,11 @@ export const CompactRow = memo(
               keystroke a silent commit. Same handler, same `cancelEdit()`, so
               the two shapes cannot diverge. */}
           <div
+            // The card's editor, as the inline row's is: an opened card takes the
+            // caret too (the tap-to-edit rule above), so opening Description or
+            // Source Code by a click or by a blocked submit puts the cursor in it.
+            ref={editorRef}
+            className='options-readfirst-row-editor'
             style={{ display: 'contents' }}
             onKeyDown={(event) => {
               if (event.key === 'Escape') {
@@ -1861,7 +1948,7 @@ export const CompactRow = memo(
     const valueReasons: TInfoMsg[] = [
       ...inlineMessages,
       ...(empty && coveredByLabel ?
-        [{ content: `Covered by “${coveredByLabel}”`, intent: 'success' }]
+        [{ content: `Covered by “${coveredByLabel}”`, intent: calm ? undefined : 'success' }]
       : []),
     ];
     // A hash row reveals its sub-fields as read-only sub-rows under a "view
@@ -2207,10 +2294,28 @@ export const CompactRow = memo(
       covered: !!coveredByLabel || groupResolved,
       invalid: worstIntent === 'danger',
       warned: worstIntent === 'warning',
+      visited,
     });
     // No dot at all in a read-only form: the dot reports progress on the
     // form, and a read view has no progress to report.
-    const dotStatus = hidden || fieldDisabled || readOnly ? undefined : rowStatus;
+    //
+    // Calm: no dot on a healthy row, and none on an empty required one either —
+    // its value column already says "Required · add a value" in amber, and one
+    // thing is said once. Only a failing value keeps the red dot beside the
+    // reason it gives.
+    const dotStatus =
+      hidden || fieldDisabled || readOnly || (calm && rowStatus !== 'invalid') ?
+        undefined
+      : rowStatus;
+    // Calm: an empty required value is said IN the value column, in amber,
+    // where the value would be — instead of a dash plus a red reason beside it.
+    // Not on a locked field (its lock and reason speak for it) or one that
+    // shows the default it will fall back to.
+    const calmRequiredWord =
+      calm && empty && !hidden && !!schema?.required && !fieldDisabled && !formattedDefault ?
+        readOnly ? CALM_REQUIRED_READ_LABEL
+        : CALM_REQUIRED_LABEL
+      : undefined;
     const dotColor =
       dotStatus === 'invalid' ? cDanger
       : dotStatus === 'todo' ? cWarning
@@ -2252,7 +2357,7 @@ export const CompactRow = memo(
       >
         {clusterNode}
         <StyledLabelBlock className='options-readfirst-label-block'>
-          <StyledRowLabel title={schema?.short_desc || undefined} $color={cKey}>
+          <StyledRowLabel title={schema?.short_desc || undefined} $color={cLabel}>
             {rowChromeIcon}
             {/* label + asterisk + help flow as ONE inline run, so the asterisk
                 stays right after the last word even when the name wraps. */}
@@ -2322,8 +2427,15 @@ export const CompactRow = memo(
           // actual data — crucial when stacked under a (muted) description on
           // mobile, where a dim value blends into the prose. The bold name still
           // outranks it; the empty dash stays faint.
-          $color={empty || hidden ? `${cMuted}66` : cKey}
-          $empty={empty || hidden}
+          $color={
+            calmRequiredWord ?
+              rowStatus === 'pending' ?
+                `${cMuted}a6`
+              : cWarning
+            : empty || hidden ? `${cMuted}66`
+            : cKey
+          }
+          $empty={(empty || hidden) && !calmRequiredWord}
         >
           {/* A markdown value with a host renderer draws in full in the inset
               below, so the row prints no value line at all: the stripped-prose
@@ -2358,13 +2470,16 @@ export const CompactRow = memo(
             null
           : <span className='options-readfirst-valuetext'>
               {hidden || empty ?
-                formattedDefault || '—'
+                calmRequiredWord || formattedDefault || '—'
               : renderReadFirstValue(optionField, schema, formatted, readOnly)}
             </span>}
           {readOnlyChoiceDesc ?
             <span className='options-readfirst-choice-desc'>{readOnlyChoiceDesc}</span>
           : null}
-          {valueReasons.map((m, i) => (
+          {(calmRequiredWord ?
+            valueReasons.filter((m) => m.content !== calmRequiredWord)
+          : valueReasons
+          ).map((m, i) => (
             <span
               key={`${m.content}-${i}`}
               className='options-readfirst-reason'
@@ -2606,7 +2721,12 @@ export const CompactRow = memo(
                 }}
               />
             : dotColor ?
-              <StyledStatusDot $color={dotColor} $ring={dotStatus !== 'set'} aria-hidden />
+              <StyledStatusDot
+                className='options-readfirst-status-dot'
+                $color={dotColor}
+                $ring={dotStatus !== 'set'}
+                aria-hidden
+              />
             : null}
           </StyledActionSlot>
         </StyledRowActions>

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

@@ -11,9 +11,10 @@ import {
 } from '@qoretechnologies/reqore/dist/components/Dropdown/list';
 import { useReqoreTheme } from '@qoretechnologies/reqore/dist/hooks/useTheme';
 import React, { memo } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { useContext } from 'use-context-selector';
 import { CompactToolbarContext, TCompactSort } from './compactToolbarContext';
+import { useIsCalmForm } from './formAppearance';
 
 // Field sort modes, listed in the Fields menu's "Sort by" submenu. 'schema' is
 // the default (the schema's declared order); the rest reorder within each group.
@@ -28,11 +29,21 @@ const SORT_MODES: { value: TCompactSort; label: string; tooltip: string }[] = [
 // "Focus" header: a summary line ({pct}% complete · {set}/{total} set ·
 // {attention} need attention →) above a SEGMENTED meter — a green run (set) then
 // an amber run (needs attention) then the empty remainder.
-const StyledCompletion = styled.div`
+const StyledCompletion = styled.div<{ $calm?: boolean }>`
   display: flex;
   flex-flow: column;
   gap: 8px;
   padding: 0 2px;
+  /* Calm: one line — the summary, then a short meter beside it — that wraps
+     the meter under the words where there is no room for both. */
+  ${({ $calm }) =>
+    $calm ?
+      css`
+        flex-flow: row wrap;
+        align-items: center;
+        gap: 6px 14px;
+      `
+    : ''}
 `;
 const StyledCompletionLine = styled.div`
   display: flex;
@@ -46,11 +57,20 @@ const StyledMeter = styled.div<{
   $track: string;
   $set_c: string;
   $att_c: string;
+  /** Calm: a short meter beside the summary instead of a full-width bar. */
+  $calm?: boolean;
 }>`
   position: relative;
   height: 4px;
-  border-radius: 3px;
+  border-radius: ${({ $calm }) => ($calm ? 2 : 3)}px;
   width: 100%;
+  ${({ $calm }) =>
+    $calm ?
+      css`
+        flex: 1 1 160px;
+        max-width: 360px;
+      `
+    : ''}
   overflow: hidden;
   background: ${({ $track }) => $track};
   /* No per-segment radius — the container's overflow:hidden + radius rounds only
@@ -113,7 +133,9 @@ export const CompactToolbar = memo((reqoreProps: Partial<IReqoreControlGroupProp
     readOnly,
     invalidCount,
     attentionCount,
+    attentionFaultCount,
     completion,
+    showInvalidOnly,
     onToggleInvalidOnly,
     hasMultipleOptions,
     compactQuery,
@@ -135,16 +157,40 @@ export const CompactToolbar = memo((reqoreProps: Partial<IReqoreControlGroupProp
   } = useContext(CompactToolbarContext);
 
   const theme = useReqoreTheme();
+  const calm = useIsCalmForm();
   const intents = (theme.intents || {}) as Record<string, string>;
+  /* "N need attention →" / "N to fill in →" is a toggle (show only those fields), so it
+     is one: a button a keyboard reaches, which says whether it is on. A host that turns
+     it on for a person (a blocked submit) reads `aria-pressed` rather than guessing,
+     since the toolbar draws a different link once something becomes a fault. */
+  const attentionToggleProps = {
+    className: 'options-readfirst-attention-link',
+    role: 'button',
+    tabIndex: 0,
+    'aria-pressed': !!showInvalidOnly,
+    onClick: onToggleInvalidOnly,
+    onKeyDown: (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        onToggleInvalidOnly?.();
+      }
+    },
+  };
   const cSuccess = intents.success || '#4a7110';
   const cWarning = intents.warning || '#d17c29';
   const cText = (theme.text?.color as string) || '#e8e8e8';
   const cTrack = `${cText}1f`;
+  // Calm: what is done is grey — finished work needs nobody — and only the
+  // outstanding part (the amber run, the "need attention" link) is coloured.
+  const cDone = calm ? `${cText}8c` : cSuccess;
+  const cQuiet = `${cText}a6`;
   // The GREEN run is what is done, not merely what has a value: a field that is
   // set but flagged belongs to the amber run, and counting it twice pushed that
   // run off the end of the track.
   const setPct = completion.total ? (completion.done / completion.total) * 100 : 0;
-  const attentionPct = completion.total ? (attentionCount / completion.total) * 100 : 0;
+  // The amber run is what is WRONG. On a new form the required fields are only still
+  // to fill in, so the track shows them as not done yet, without amber.
+  const attentionPct = completion.total ? (attentionFaultCount / completion.total) * 100 : 0;
 
   return (
     <ReqoreControlGroup
@@ -161,11 +207,19 @@ export const CompactToolbar = memo((reqoreProps: Partial<IReqoreControlGroupProp
           work. The read view lists what is set, and that is the whole
           answer. */}
       {parts.completion && completion.total && !readOnly ?
-        <StyledCompletion className='options-readfirst-completion'>
+        <StyledCompletion className='options-readfirst-completion' $calm={calm}>
           <StyledCompletionLine>
             <StyledSummary
               className='options-readfirst-status'
-              $color={invalidCount || attentionCount ? cWarning : cSuccess}
+              // Calm: the word in the text colour. "Ready" is not a healthy
+              // figure to celebrate in green, and "Incomplete" is said in amber
+              // by the link beside it — only the outstanding part is coloured.
+              $color={
+                calm ? cText
+                : invalidCount || attentionFaultCount ? cWarning
+                : attentionCount ? cText
+                : cSuccess
+              }
               style={{ fontWeight: 600 }}
             >
               {/* "Ready" is a claim about the whole form, so anything the form
@@ -179,28 +233,43 @@ export const CompactToolbar = memo((reqoreProps: Partial<IReqoreControlGroupProp
                   batched mode's per-row chip alone. */}
               {invalidCount || attentionCount ? 'Incomplete' : 'Ready'}
             </StyledSummary>
-            <StyledSummary style={{ opacity: 0.5 }}>
+            <StyledSummary style={calm ? { color: cQuiet } : { opacity: 0.5 }}>
               · {completion.set}/{completion.total} set
               {attentionCount ? ' ·' : ''}
             </StyledSummary>
-            {attentionCount ?
-              <StyledAttentionLink
-                $color={cWarning}
-                className='options-readfirst-attention-link'
-                onClick={onToggleInvalidOnly}
-              >
-                {attentionCount} need attention →
+            {/* Amber only for what is a fault. A new form's required fields are still to
+                fill in, which is the next step, not a warning: they are counted apart,
+                in the quiet colour. */}
+            {attentionFaultCount ?
+              <StyledAttentionLink $color={cWarning} {...attentionToggleProps}>
+                {attentionFaultCount} need attention →
               </StyledAttentionLink>
             : null}
-            <StyledPct>{completion.pct}%</StyledPct>
+            {attentionCount > attentionFaultCount ?
+              attentionFaultCount ?
+                <StyledSummary style={{ color: cQuiet }}>
+                  · {attentionCount - attentionFaultCount} to fill in
+                </StyledSummary>
+              : <StyledAttentionLink $color={cQuiet} {...attentionToggleProps}>
+                  {attentionCount} to fill in →
+                </StyledAttentionLink>
+            : null}
+            {/* Calm: the percentage is one more quiet figure on the line, not
+                a large bold number pinned to the far edge. */}
+            {calm ?
+              <StyledSummary className='options-readfirst-pct' style={{ color: cQuiet }}>
+                · {completion.pct}%
+              </StyledSummary>
+            : <StyledPct className='options-readfirst-pct'>{completion.pct}%</StyledPct>}
           </StyledCompletionLine>
           <StyledMeter
             className='options-readfirst-completion-bar'
             $set={setPct}
             $attention={attentionPct}
             $track={cTrack}
-            $set_c={cSuccess}
+            $set_c={cDone}
             $att_c={cWarning}
+            $calm={calm}
           />
         </StyledCompletion>
       : null}