@qoretechnologies/reqraft 0.10.13 → 0.10.15

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

@@ -573,6 +573,30 @@ export const CompactRow = memo(
     // "descriptions" toggle is engaged (and inside the editor when expanded).
     const showLabelDesc = !!labelShortDesc && showAllDescriptions === true;
 
+    // The `?` that opens the long-form help dialog. Shared by the read row AND
+    // the inline editor: opening a field used to drop it, leaving an editing row
+    // 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 ?
+        <ReqoreIcon
+          icon='QuestionLine'
+          size='12px'
+          effect={{ opacity: 0.55 }}
+          margin='left'
+          marginSize='tiny'
+          role='button'
+          tabIndex={-1}
+          aria-label='Help'
+          className='options-readfirst-help'
+          style={{ cursor: 'help' }}
+          onClick={(event) => {
+            event.stopPropagation();
+            handleOptionLabelClick(optionName);
+          }}
+        />
+      : null;
+
     const renderInfoStrip = (m: TInfoMsg, index: number) => (
       <ReqoreMessage
         key={`${m.content}-${index}`}
@@ -688,11 +712,13 @@ export const CompactRow = memo(
               >
                 {label}
                 {required ? <ReqoreIcon icon='Asterisk' color='danger' size='10px' /> : null}
+                {helpIcon}
               </StyledRowLabel>
-              {/* Keep the short_desc visible while editing inline when the global
-                  descriptions toggle is on — read rows show it, so opening a field
-                  shouldn't make it vanish. */}
-              {showLabelDesc ?
+              {/* An OPEN field always shows its short_desc — that's where the hint
+                  is needed and there's no per-row button to reveal it (the edit
+                  card does the same). The global descriptions toggle governs READ
+                  rows only, so collapsing the field is what hides it again. */}
+              {labelShortDesc ?
                 <StyledLabelDesc
                   className='options-readfirst-label-desc'
                   size='small'
@@ -753,6 +779,27 @@ export const CompactRow = memo(
             className={clusterBlockClass || undefined}
           >
             {editingRow}
+            {/* Focused editing for an INLINE row. The edit card wraps its editor
+                in <FocusedEditing>, which renders the field in place AND in the
+                modal; an inline row already renders its editor in the row grid,
+                so it mounts the modal alone. Without this the More menu's "Edit
+                fullscreen" set the state and nothing appeared — the modal simply
+                had no mount point on this branch. */}
+            {focusedEditing === optionName ?
+              <FocusedEditing
+                isFullscreen
+                modalOnly
+                onClose={() => setFocusedEditing(undefined)}
+                description={(schema?.display_name as string) || optionName}
+              >
+                <Description
+                  longDescription={schema?.desc}
+                  shortDescription={schema?.short_desc}
+                  longDescriptionShownByDefault
+                />
+                {renderOption(optionName, optionField)}
+              </FocusedEditing>
+            : null}
           </StyledColumn>
         );
       }
@@ -1122,24 +1169,7 @@ export const CompactRow = memo(
               {required ?
                 <ReqoreIcon icon='Asterisk' color='danger' size='10px' margin='left' marginSize='tiny' />
               : null}
-              {schema?.desc ?
-                <ReqoreIcon
-                  icon='QuestionLine'
-                  size='12px'
-                  effect={{ opacity: 0.55 }}
-                  margin='left'
-                  marginSize='tiny'
-                  role='button'
-                  tabIndex={-1}
-                  aria-label='Help'
-                  className='options-readfirst-help'
-                  style={{ cursor: 'help' }}
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    handleOptionLabelClick(optionName);
-                  }}
-                />
-              : null}
+              {helpIcon}
             </span>
             {typeLabel ?
               <ReqoreTag size='tiny' minimal label={typeLabel} labelEffect={{ opacity: 0.55 }} />

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

@@ -4,15 +4,15 @@ import {
   ReqoreDropdown,
   ReqoreInput,
 } from '@qoretechnologies/reqore';
-import { useReqoreTheme } from '@qoretechnologies/reqore/dist/hooks/useTheme';
 import { IReqoreControlGroupProps } from '@qoretechnologies/reqore/dist/components/ControlGroup';
 import {
   IReqoreDropdownItem,
   TReqoreDropdownItems,
 } from '@qoretechnologies/reqore/dist/components/Dropdown/list';
+import { useReqoreTheme } from '@qoretechnologies/reqore/dist/hooks/useTheme';
 import React, { memo } from 'react';
-import { useContext } from 'use-context-selector';
 import styled from 'styled-components';
+import { useContext } from 'use-context-selector';
 import { CompactToolbarContext, TCompactSort } from './compactToolbarContext';
 
 // Field sort modes, listed in the Fields menu's "Sort by" submenu. 'schema' is
@@ -40,7 +40,13 @@ const StyledCompletionLine = styled.div`
   gap: 10px;
   flex-wrap: wrap;
 `;
-const StyledMeter = styled.div<{ $set: number; $attention: number; $track: string; $set_c: string; $att_c: string }>`
+const StyledMeter = styled.div<{
+  $set: number;
+  $attention: number;
+  $track: string;
+  $set_c: string;
+  $att_c: string;
+}>`
   position: relative;
   height: 4px;
   border-radius: 3px;
@@ -180,114 +186,115 @@ export const CompactToolbar = memo((reqoreProps: Partial<IReqoreControlGroupProp
       {hasMultipleOptions || (invalidCount && !readOnly) ?
         <ReqoreControlGroup vertical fluid gapSize='normal'>
           {hasMultipleOptions ?
-          <ReqoreControlGroup fluid verticalAlign='center'>
-          <ReqoreInput
-            fluid
-            pill
-            icon='Search2Line'
-            iconColor='muted'
-            placeholder='Filter fields...'
-            value={compactQuery}
-            intent={compactQuery ? 'info' : undefined}
-            className='options-readfirst-search'
-            onChange={(event: React.FormEvent<HTMLInputElement>) =>
-              setCompactQuery(event.currentTarget.value)
-            }
-            onClearClick={() => setCompactQuery('')}
-          />
-          {!readOnly ?
-            <ReqoreDropdown
-              fixed
-              flat
-              filterable
-              icon='Filter3Line'
-              tooltip='Fields'
-              className='options-readfirst-fields'
-              intent={requiredOnly ? 'info' : undefined}
-              badge={requiredOnly ? 'Required only' : undefined}
-              onItemSelect={(item: IReqoreDropdownItem) =>
-                item.value && onAddOptionalField(item.value)
-              }
-              items={
-                [
-                  {
-                    label: 'Required only',
-                    selected: requiredOnly,
-                    icon: requiredOnly ? 'CheckboxCircleLine' : 'CheckboxBlankCircleLine',
-                    tooltip: 'Show only required fields',
-                    onClick: () => setRequiredOnly((value) => !value),
-                  },
-                  {
-                    label: 'Show field types',
-                    selected: showFieldTypes,
-                    icon: showFieldTypes ? 'CheckboxCircleLine' : 'CheckboxBlankCircleLine',
-                    tooltip: 'Annotate each field with its type',
-                    onClick: onToggleFieldTypes,
-                  },
-                  // Sort by — a submenu (collapsed by default) so the five modes
-                  // don't crowd the Fields menu. Reorders fields WITHIN each group
-                  // (groups + required-group rails preserved); the active non-
-                  // default mode shows as a badge on the parent.
-                  {
-                    label: 'Sort by',
-                    icon: 'ArrowUpDownLine',
-                    intent: compactSort !== 'schema' ? 'info' : undefined,
-                    badge:
-                      compactSort !== 'schema' ?
-                        SORT_MODES.find((mode) => mode.value === compactSort)?.label
-                      : undefined,
-                    items: SORT_MODES.map((mode) => ({
-                      label: mode.label,
-                      tooltip: mode.tooltip,
-                      selected: compactSort === mode.value,
-                      icon:
-                        compactSort === mode.value ?
-                          'CheckboxCircleLine'
-                        : 'CheckboxBlankCircleLine',
-                      onClick: () => setCompactSort(mode.value),
-                    })),
-                  },
-                  {
-                    label: 'Select all',
-                    icon: 'MenuAddLine',
-                    tooltip: 'Add every optional field',
-                    disabled: filteredCount === 0,
-                    onClick: onAddAll,
-                  },
-                  {
-                    label: 'Default fields',
-                    icon: 'RestartLine',
-                    tooltip: 'Reset to the default set of fields',
-                    onClick: onResetDefaults,
-                  },
-                  {
-                    label: 'Revert all changes',
-                    icon: 'HistoryLine',
-                    tooltip: 'Undo all edits back to the loaded values',
-                    disabled: !canRevert,
-                    onClick: onRevertAll,
-                  },
-                  // The individual not-yet-added fields are no longer listed here —
-                  // they render as addable rows in the Optional box instead. The
-                  // menu keeps only the bulk actions above (Select all / Default
-                  // fields / filters).
-                ] as TReqoreDropdownItems
-              }
-            />
+            <ReqoreControlGroup fluid verticalAlign='center'>
+              <ReqoreInput
+                fluid
+                pill
+                icon='Search2Line'
+                iconColor='muted'
+                placeholder='Filter fields...'
+                value={compactQuery}
+                intent={compactQuery ? 'info' : undefined}
+                className='options-readfirst-search'
+                onChange={(event: React.FormEvent<HTMLInputElement>) =>
+                  setCompactQuery(event.currentTarget.value)
+                }
+                onClearClick={() => setCompactQuery('')}
+              />
+              {!readOnly ?
+                <ReqoreDropdown
+                  fixed
+                  flat
+                  filterable
+                  icon='Filter3Line'
+                  tooltip='Fields'
+                  className='options-readfirst-fields'
+                  intent={requiredOnly ? 'info' : undefined}
+                  badge={requiredOnly ? 'Required only' : undefined}
+                  onItemSelect={(item: IReqoreDropdownItem) =>
+                    item.value && onAddOptionalField(item.value)
+                  }
+                  items={
+                    [
+                      {
+                        label: 'Required only',
+                        selected: requiredOnly,
+                        icon: requiredOnly ? 'CheckboxCircleLine' : 'CheckboxBlankCircleLine',
+                        tooltip: 'Show only required fields',
+                        onClick: () => setRequiredOnly((value) => !value),
+                      },
+                      {
+                        label: 'Show field types',
+                        selected: showFieldTypes,
+                        icon: showFieldTypes ? 'CheckboxCircleLine' : 'CheckboxBlankCircleLine',
+                        tooltip: 'Annotate each field with its type',
+                        onClick: onToggleFieldTypes,
+                      },
+                      // Sort by — a submenu (collapsed by default) so the five modes
+                      // don't crowd the Fields menu. Reorders fields WITHIN each group
+                      // (groups + required-group rails preserved); the active non-
+                      // default mode shows as a badge on the parent.
+                      {
+                        label: 'Sort by',
+                        icon: 'ArrowUpDownLine',
+                        intent: compactSort !== 'schema' ? 'info' : undefined,
+                        badge:
+                          compactSort !== 'schema' ?
+                            SORT_MODES.find((mode) => mode.value === compactSort)?.label
+                          : undefined,
+                        items: SORT_MODES.map((mode) => ({
+                          label: mode.label,
+                          tooltip: mode.tooltip,
+                          selected: compactSort === mode.value,
+                          icon:
+                            compactSort === mode.value ?
+                              'CheckboxCircleLine'
+                            : 'CheckboxBlankCircleLine',
+                          onClick: () => setCompactSort(mode.value),
+                        })),
+                      },
+                      {
+                        label: 'Select all',
+                        icon: 'MenuAddLine',
+                        tooltip: 'Add every optional field',
+                        disabled: filteredCount === 0,
+                        onClick: onAddAll,
+                      },
+                      {
+                        label: 'Default fields',
+                        icon: 'RestartLine',
+                        tooltip: 'Reset to the default set of fields',
+                        onClick: onResetDefaults,
+                      },
+                      {
+                        label: 'Revert all changes',
+                        icon: 'HistoryLine',
+                        tooltip: 'Undo all edits back to the loaded values',
+                        disabled: !canRevert,
+                        onClick: onRevertAll,
+                      },
+                      // The individual not-yet-added fields are no longer listed here —
+                      // they render as addable rows in the Optional box instead. The
+                      // menu keeps only the bulk actions above (Select all / Default
+                      // fields / filters).
+                    ] as TReqoreDropdownItems
+                  }
+                />
+              : null}
+              <ReqoreButton
+                fixed
+                flat
+                minimal={showAllDescriptions === true}
+                icon={showAllDescriptions ? 'InformationFill' : 'InformationLine'}
+                className='options-readfirst-descriptions'
+                intent={showAllDescriptions ? 'info' : undefined}
+                tooltip={
+                  showAllDescriptions ? 'Hide all field information' : 'Show all field information'
+                }
+                onClick={onToggleAllDescriptions}
+              />
+            </ReqoreControlGroup>
           : null}
-          <ReqoreButton
-            fixed
-            flat
-            minimal={showAllDescriptions === true}
-            icon={showAllDescriptions ? 'InformationFill' : 'InformationLine'}
-            className='options-readfirst-descriptions'
-            active={showAllDescriptions}
-            intent={showAllDescriptions ? 'info' : undefined}
-            tooltip={showAllDescriptions ? 'Hide all field information' : 'Show all field information'}
-            onClick={onToggleAllDescriptions}
-          />
-        </ReqoreControlGroup>
-      : null}
         </ReqoreControlGroup>
       : null}
     </ReqoreControlGroup>

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

@@ -1680,6 +1680,114 @@ export const Compact: Story = {
   },
 };
 
+// `name` gains a long-form `desc` so the `?` help affordance has something to
+// open — the rest of the compact fixture is unchanged.
+const CompactHelpSchema: Record<string, TCompactField> = {
+  ...CompactSchema,
+  name: {
+    ...CompactSchema.name,
+    desc: 'The unique identifier for this interface. It is used in URLs, logs and cross-references, so it cannot be changed once the interface is deployed.',
+  },
+};
+
+export const CompactFocusedEditingInline: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the compact form, opens the Name row for inline editing and picks "Edit fullscreen" from its More menu — the Focused Editing modal opens over that single scalar field with its long description above the editor.',
+      },
+    },
+    chromatic: { disable: true },
+  },
+  args: {
+    ...Compact.args,
+    options: CompactHelpSchema,
+  },
+  play: async () => {
+    // Name is a scalar, so it edits INLINE in the row (no expanded card) — the
+    // branch whose More menu used to set the focused state with nothing mounted
+    // to render the modal. (CompactFocusedEditing covers the card branch.)
+    await _testsClickText('order-fulfilment');
+    await _testsWaitForInputValue('order-fulfilment', '.options-readfirst-inline .reqore-textarea');
+    await _testsClickButton({ selector: '.options-readfirst-more' });
+    let fsItem: Element | undefined;
+    await waitFor(
+      () => {
+        fsItem = Array.from(document.querySelectorAll('.reqore-menu-item')).find((element) =>
+          element.textContent?.includes('Edit fullscreen')
+        );
+        expect(fsItem).toBeTruthy();
+      },
+      { timeout: 10000 }
+    );
+    await fireEvent.click(fsItem as Element);
+    // The modal mounts, carrying the field's long description with it.
+    await waitFor(() => expect(document.querySelector('.reqore-modal')).toBeTruthy(), {
+      timeout: 10000,
+    });
+    await _testsWaitForText(/unique identifier for this interface/i);
+  },
+};
+
+export const CompactEditingShowsDescription: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders the compact form with the descriptions toggle off — a collapsed row hides its short description, and opening the row for editing reveals it under the field name along with the `?` help affordance.",
+      },
+    },
+  },
+  args: {
+    ...Compact.args,
+    options: CompactHelpSchema,
+  },
+  play: async () => {
+    // Collapsed: the global descriptions toggle is off, so no short_desc on the
+    // read row (the label carries it as a title attribute only).
+    await _testsWaitForText('order-fulfilment');
+    await _testsWaitForTextToNotExist('Unique identifier for this interface');
+    // Open it: the short description appears without the user clicking anything…
+    await _testsClickText('order-fulfilment');
+    await _testsWaitForInputValue('order-fulfilment', '.options-readfirst-inline .reqore-textarea');
+    await _testsWaitForText('Unique identifier for this interface');
+    // …and the `?` (long-form help) stays reachable while editing.
+    await waitFor(() =>
+      expect(
+        document.querySelector('.options-readfirst-inline .options-readfirst-help')
+      ).toBeTruthy()
+    );
+  },
+};
+
+export const CompactWithPanelProps: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders the Compact fixture with `compactPanelProps` — the read-first form's outer ReqorePanel is dressed from the outside with a label, icon, intent and an extra header action. The engine's own toolbar survives: `actions` append after it and `contentStyle` merges over the engine's flex-column layout instead of replacing either.",
+      },
+    },
+  },
+  args: {
+    ...Compact.args,
+    compactPanelProps: {
+      label: 'Connection settings',
+      icon: 'Settings3Line',
+      intent: 'info',
+      actions: [{ label: 'Docs', icon: 'BookLine', responsive: false }],
+    },
+  },
+  play: async () => {
+    // The outside-supplied panel chrome renders…
+    await _testsWaitForText('Connection settings');
+    await _testsWaitForText('Docs');
+    // …and the engine's own toolbar + rows are untouched by it.
+    await _testsWaitForText('order-fulfilment');
+  },
+};
+
 export const CompactReadOnly: Story = {
   parameters: {
     docs: {

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

@@ -21,13 +21,13 @@ import {
 } from '@qoretechnologies/reqore/dist/components/Panel';
 import { IReqoreFormTemplates } from '@qoretechnologies/reqore/dist/components/Textarea';
 import { TReqoreIntent } from '@qoretechnologies/reqore/dist/constants/theme';
-import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
 import {
   changeDarkness,
   getMainBackgroundColor,
   getReadableColor,
   percentToHexAlpha,
 } from '@qoretechnologies/reqore/dist/helpers/colors';
+import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
 import {
   IQorusFormField,
   IQorusFormFieldMessage,
@@ -48,11 +48,10 @@ import reduce from 'lodash/reduce';
 import size from 'lodash/size';
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useMeasure, useMount, useUpdateEffect } from 'react-use';
-import { createContext } from 'use-context-selector';
 import styled from 'styled-components';
+import { createContext } from 'use-context-selector';
 import { getDefaultValue, insertAtIndex, richtextToString } from '../../../helpers/common';
 import { getRequiredOptionMessage } from '../../../helpers/options';
-import { query } from '../../../utils/fetch';
 import {
   IValidationResult,
   hasAllDependenciesFullfilled,
@@ -61,6 +60,7 @@ import {
 } from '../../../helpers/validations';
 import { useQorusTypes } from '../../../hooks/useQorusTypes';
 import { useTemplates } from '../../../hooks/useTemplates';
+import { query } from '../../../utils/fetch';
 import { Description } from '../../Description';
 import { FocusedEditing } from '../../FocusedEditing';
 import { SelectFormField } from '../fields/select/Select';
@@ -72,12 +72,6 @@ import {
 } from '../fields/template/TemplateField';
 import { CompactRow } from './CompactRow';
 import { CompactRowContext, ICompactRowContext } from './compactRowContext';
-import { CompactToolbar } from './CompactToolbar';
-import {
-  CompactToolbarContext,
-  ICompactToolbarContext,
-  TCompactSort,
-} from './compactToolbarContext';
 import {
   GROUP_INDENT,
   LABEL_COL_MAX,
@@ -91,9 +85,16 @@ import {
   StyledStatusBox,
   StyledStatusBoxGroupLabel,
 } from './compactRowStyles';
+import { CompactToolbar } from './CompactToolbar';
+import {
+  CompactToolbarContext,
+  ICompactToolbarContext,
+  TCompactSort,
+} from './compactToolbarContext';
 import { OptionFieldMessages } from './OptionFieldMessages';
 import { OptionsHelpDialog } from './OptionsHelpDialog';
 import {
+  TReadFirstStatus,
   getFirstAttentionOptionName,
   getOptionGroup,
   getOptionGroupLabel,
@@ -101,7 +102,6 @@ import {
   getReadFirstCompletion,
   getReadFirstStatus,
   isOptionValueEmpty,
-  TReadFirstStatus,
 } from './readFirst';
 
 // Re-export types for consumers
@@ -201,13 +201,6 @@ const StyledCompactWrap = styled.div<{ $flush?: boolean }>`
      engage instead of overflowing the container horizontally. */
   min-width: 0;
   max-width: 100%;
-  /* A bit of horizontal breathing room for the whole form (header + content
-     alike). Horizontal only — top padding would break the sticky toolbar's
-     flush pin (see the scroll-context note below). Dropped to flush via the
-     compactFlush prop, for embeds that own their own gutters (e.g. the
-     SchemaDefinition tab body). */
-  padding: ${({ $flush }) => ($flush ? '0' : '0 12px')};
-
   /* Own our scroll context instead of borrowing the host's. The sticky toolbar
      pins to whatever scrolls; if that scroller carries top padding (e.g. a
      ReqorePanel/ReqoreContent body), sticky \`top: 0\` resolves against its
@@ -525,6 +518,18 @@ export interface IFormEngineProps extends Omit<IReqoreCollectionProps, 'onChange
    * transparently inside the parent's edit card. Default `false`.
    */
   compactNested?: boolean;
+  /**
+   * Compact mode only: props forwarded to the read-first form's outer
+   * `ReqorePanel` — the panel that carries the sticky toolbar header and holds
+   * the status boxes. Spread AFTER the engine's own defaults, so anything set
+   * here wins (`flat`, `raised`, `minimal`, `stickyHeader`, `label`, `icon`,
+   * `intent`, `padded`, `size`, …). Two props merge instead of replacing, so a
+   * consumer can add to the panel without dismantling the form:
+   * - `actions` — appended after the engine's toolbar action.
+   * - `contentStyle` — merged over the engine's flex-column layout.
+   * No-op in classic (non-compact) mode.
+   */
+  compactPanelProps?: IReqorePanelProps;
   /** Compact mode only: per-group display metadata (label / icon / subtitle /
    * order) — the server only sends the bare group key. */
   groups?: Record<string, IFormEngineGroup>;
@@ -609,6 +614,7 @@ export const FormEngine = ({
   compact,
   compactFlush = false,
   compactNested = false,
+  compactPanelProps,
   commitMode = 'immediate',
   expandMode = 'single',
   onCommit,
@@ -1709,8 +1715,13 @@ export const FormEngine = ({
         <>
           {(() => {
             const schemaMsgs = (
-              suppressSchemaMessages ? [] : (options?.[optionName] as any)?.messages || []
-            ) as { intent?: string; title?: string; content?: string }[];
+              suppressSchemaMessages ?
+                []
+              : (options?.[optionName] as any)?.messages || []) as {
+              intent?: string;
+              title?: string;
+              content?: string;
+            }[];
             if (!schemaMsgs.length) return null;
             const items = schemaMsgs.map(({ intent, title, content }, index) => (
               <ReqoreMessage
@@ -2114,7 +2125,13 @@ export const FormEngine = ({
     ]
   );
 
-  const compactHeaderActions = useMemo(() => [{ as: CompactToolbar, responsive: false }], []);
+  // 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.
+  const compactHeaderActions = useMemo(
+    () => [{ as: CompactToolbar, responsive: false }, ...(compactPanelProps?.actions || [])],
+    [compactPanelProps?.actions]
+  );
   const renderCompact = () => {
     const headerBg = `${changeDarkness(getMainBackgroundColor(theme), 0.02)}${percentToHexAlpha(88)}`;
     // Toolbar filters narrow the listed rows; the meter reflects the full set.
@@ -2357,22 +2374,24 @@ export const FormEngine = ({
                   $headerBg={compactNested ? 'transparent' : headerBg}
                   $nested={compactNested}
                   flat
+                  raised
+                  minimal
                   // No panel background: the form sits transparently on whatever
                   // hosts it (page, drawer, or — for an arg_schema field — the
                   // parent's edit card) instead of stacking its own dark surface.
                   // The status boxes keep their own tints; the sticky toolbar keeps
                   // its blurred header via the $headerBg override.
-                  transparent
                   stickyHeader={!compactNested}
-                  padded={false}
+                  // Consumer overrides land last so they win over every default
+                  // above; `actions` and `contentStyle` below merge rather than
+                  // replace (see `compactPanelProps`).
+                  {...compactPanelProps}
                   actions={compactHeaderActions}
                   contentStyle={{
                     display: 'flex',
                     flexFlow: 'column',
                     gap: '10px',
-                    // Nested sub-form: no surrounding panel padding (it's flush in
-                    // the parent card); top-level keeps a small bottom gutter.
-                    padding: compactNested ? '0' : '0 0 12px',
+                    ...compactPanelProps?.contentStyle,
                   }}
                 >
                   {size(groupKeys) === 0 ?