@open-mercato/ui 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7194.1.ab4fc81f82

package/src/backend/CrudForm.tsx

@@ -378,6 +378,17 @@ export type CrudFormProps<TValues extends Record<string, unknown>> = {
   embedded?: boolean
   // Hide the footer action bar (Save/Cancel/Delete) when embedding in a custom layout
   hideFooterActions?: boolean
+  /**
+   * Vertical rhythm of the form body.
+   *
+   * `default` is the page-width layout every existing host renders today and is
+   * unchanged byte-for-byte. `compact` tightens the between-group and
+   * between-field spacing and the group-card padding for narrow hosts — a docked
+   * inspector rail, a side panel — where the page rhythm reads as airy and costs
+   * the host a third of its column. It changes SPACING only: no label, helper
+   * text, control size or copy differs between the two.
+   */
+  density?: 'default' | 'compact'
   /**
    * Opt-in: track dirty state even when `embedded` is true, AND enable the form's built-in
    * navigation protection (beforeunload, link-click intercept, pushState/replaceState/popstate).
@@ -738,6 +749,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   loadingMessage,
   customEntity = false,
   embedded = false,
+  density = 'default',
   hideFooterActions = false,
   trackDirtyWhenEmbedded = false,
   onDirtyChange,
@@ -1330,6 +1342,13 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   // handles the overflow case on its own: when content scrolls, the footer stays pinned
   // to the dialog's bottom and the user can scroll fields above it.
   const dialogFormPadding = ''
+  // One step down the DS scale each, never an arbitrary value. `default` returns
+  // the exact strings that were inline before this prop existed.
+  const isCompactDensity = density === 'compact'
+  const densityStackLg = isCompactDensity ? 'space-y-3' : 'space-y-4'
+  const densityStackMd = isCompactDensity ? 'space-y-2' : 'space-y-3'
+  const densityCardPadding = isCompactDensity ? 'p-3' : 'p-4'
+  const densityGroupCardPadding = isCompactDensity ? 'px-3 py-2' : 'px-4 py-3'
 
   const buildCustomFieldsManageHref = React.useCallback(
     (targetEntityId: string | null) => {
@@ -3345,7 +3364,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           const sectionKey = `${entityLayout.entityId}:${section.fieldsetCode ?? 'default'}`
           const manageDisabled = !manageHref
           nodes.push(
-            <div key={sectionKey} className="rounded-lg border bg-card p-4 space-y-4">
+            <div key={sectionKey} className={`rounded-lg border bg-card ${densityCardPadding} ${densityStackLg}`}>
               <div className="flex items-start justify-between gap-3">
                 <div className="flex items-start gap-2">
                   {FieldsetIcon ? (
@@ -3587,7 +3606,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
                 fieldCount={customFieldCount}
                 chevronPosition={collapsibleChevronPosition}
               >
-                <div className="space-y-3">
+                <div className={densityStackMd}>
                   {customFieldsInnerNodes}
                 </div>
               </CollapsibleGroup>,
@@ -3641,14 +3660,14 @@ export function CrudForm<TValues extends Record<string, unknown>>({
               fieldCount={groupFields.length}
               chevronPosition={collapsibleChevronPosition}
             >
-              <div className="space-y-3">
+              <div className={densityStackMd}>
                 {groupContent}
               </div>
             </CollapsibleGroup>,
           )
         } else {
           nodes.push(
-            <div key={g.id} className="rounded-lg border bg-card px-4 py-3 space-y-3">
+            <div key={g.id} className={`rounded-lg border bg-card ${densityGroupCardPadding} ${densityStackMd}`}>
               {g.title ? (
                 <div className="text-sm font-medium">{t(g.title, g.title)}</div>
               ) : null}
@@ -3703,7 +3722,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           className={embedded ? 'min-h-[1px]' : 'min-h-[400px]'}
         >
           {wrapFormBody(
-            <form id={formId} onSubmit={handleSubmit} className={`space-y-4 ${dialogFormPadding}`}>
+            <form id={formId} onSubmit={handleSubmit} className={`${densityStackLg} ${dialogFormPadding}`}>
             {resolvedInjectionSpotId ? (
               <InjectionSpot
                 spotId={resolvedInjectionSpotId}
@@ -3722,13 +3741,13 @@ export function CrudForm<TValues extends Record<string, unknown>>({
               {sortableGroupsEnabled ? (
                 <DndContext sensors={sortableSensors} collisionDetection={closestCenter} onDragEnd={handleGroupDragEnd}>
                   <SortableContext items={col1Ids} strategy={verticalListSortingStrategy}>
-                    <div className="space-y-3">{col1Content}</div>
+                    <div className={densityStackMd}>{col1Content}</div>
                   </SortableContext>
                 </DndContext>
               ) : (
-                <div className="space-y-3">{col1Content}</div>
+                <div className={densityStackMd}>{col1Content}</div>
               )}
-              {hasSecondaryColumn ? <div className="space-y-3" data-crud-injection-region>{col2Content}</div> : null}
+              {hasSecondaryColumn ? <div className={densityStackMd} data-crud-injection-region>{col2Content}</div> : null}
             </div>
             {formError && !Object.keys(errors).length ? <div className="text-sm text-status-error-text">{formError}</div> : null}
             {hideFooterActions || formReadOnly ? null : (
@@ -3790,7 +3809,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           <form
             id={formId}
             onSubmit={handleSubmit}
-            className={`${embedded ? 'space-y-4' : 'rounded-lg border bg-card p-4 space-y-4'} ${dialogFormPadding}`}
+            className={`${embedded ? densityStackLg : `rounded-lg border bg-card ${densityCardPadding} ${densityStackLg}`} ${dialogFormPadding}`}
           >
             {resolvedInjectionSpotId ? (
               <InjectionSpot

package/src/backend/DataTable.tsx

@@ -1,12 +1,13 @@
 "use client"
 import * as React from 'react'
 import { useRouter } from 'next/navigation'
-import { flexRender, type RowData, type SortingState, type ColumnVisibilityState as VisibilityState, type RowSelectionState } from '@tanstack/react-table'
-import { useLegacyTable, getCoreRowModel, getSortedRowModel, type LegacyColumnDef as ColumnDef, type LegacyColumn as TableColumn } from '@tanstack/react-table/legacy'
+import { flexRender, type RowData, type SortingState, type ColumnVisibilityState as VisibilityState, type RowSelectionState, type ExpandedState, type OnChangeFn } from '@tanstack/react-table'
+import { useLegacyTable, getCoreRowModel, getSortedRowModel, getExpandedRowModel, type LegacyColumnDef as ColumnDef, type LegacyColumn as TableColumn } from '@tanstack/react-table/legacy'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle, Filter, Columns3, ChevronUp, ChevronDown, ChevronsUpDown, Check, Inbox, Save } from 'lucide-react'
+import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle, Filter, Columns3, ChevronUp, ChevronDown, ChevronRight, ChevronsUpDown, Check, Inbox, Save } from 'lucide-react'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../primitives/table'
 import { Button } from '../primitives/button'
+import { IconButton } from '../primitives/icon-button'
 import { Checkbox } from '../primitives/checkbox'
 import {
   Select,
@@ -222,6 +223,13 @@ export type DataTableExportConfig = {
 
 export type DataTablePerspectiveConfig = {
   tableId: string
+  /**
+   * Where to render the "Views" perspective switcher. Defaults to 'left'
+   * (inside the filter toolbar). When 'right', the switcher moves to the
+   * right-hand actions area and the redundant standalone "Customize columns"
+   * (•••) button is suppressed — the "Views" control already opens that panel.
+   */
+  align?: 'left' | 'right'
   initialState?: {
     response?: PerspectivesIndexResponse
     activePerspectiveId?: string | null
@@ -456,6 +464,23 @@ export type DataTableProps<T extends RowData> = {
     onClearAll: () => void
     onRemoveLast: () => void
   }
+  /**
+   * Opt-in expandable/nested rows (accordion). All expansion props are
+   * additive and default-off — when none are passed, the table renders and
+   * behaves exactly as before (no toggle column, no row model change).
+   *
+   * - `getSubRows`: derive child rows for a given row (TanStack hierarchy source).
+   * - `expandable`: whether a row shows an expand toggle. Pass a predicate to
+   *   show the toggle for rows whose children are not loaded yet (lazy loading);
+   *   defaults to "has sub-rows" when omitted but `getSubRows` is set.
+   * - `expanded` / `onExpandedChange`: controlled expansion state. Provide both
+   *   for lazy-loading hosts that fetch children when a row is expanded; omit
+   *   for self-managed expansion.
+   */
+  getSubRows?: (row: T) => T[] | undefined
+  expandable?: boolean | ((row: T) => boolean)
+  expanded?: ExpandedState
+  onExpandedChange?: OnChangeFn<ExpandedState>
 }
 
 const DEFAULT_EXPORT_FORMATS: DataTableExportFormat[] = ['csv', 'json', 'xml', 'markdown']
@@ -485,7 +510,7 @@ const STICKY_RIGHT_SHADOW_CLASS =
 const STICKY_LEFT_SHADOW_CLASS =
   'md:after:absolute md:after:inset-y-0 md:after:-right-2 md:after:w-2 md:after:bg-gradient-to-r md:after:from-foreground/8 md:after:to-transparent md:after:pointer-events-none'
 
-type BulkActionExecuteResult = {
+export type BulkActionExecuteResult = {
   ok: boolean
   message?: string
   affectedCount?: number
@@ -1282,6 +1307,10 @@ export function DataTable<T extends RowData>({
   columnChooser,
   activeFilterChips,
   filterAwareEmptyState,
+  getSubRows,
+  expandable,
+  expanded: expandedProp,
+  onExpandedChange,
 }: DataTableProps<T>) {
   const t = useT()
   const { confirm, ConfirmDialogElement } = useConfirmDialog()
@@ -1353,6 +1382,7 @@ export function DataTable<T extends RowData>({
   const queryClient = useQueryClient()
   const perspectiveConfig = perspective ?? null
   const perspectiveTableId = perspectiveConfig?.tableId ?? null
+  const perspectiveAlign: 'left' | 'right' = perspectiveConfig?.align ?? 'left'
   const perspectiveEnabled = Boolean(perspectiveTableId)
   // Snapshot from localStorage is read post-mount via useLayoutEffect to avoid SSR/CSR
   // hydration mismatch. Initial render uses only props-derived state (identical on both sides).
@@ -1783,14 +1813,36 @@ export function DataTable<T extends RowData>({
   const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
   const selectionScopeKeyRef = React.useRef<string | undefined>(selectionScopeKey)
   const enableClientSorting = sortable && !manualSorting
+  // Opt-in expansion: enabled only when the host passes any expansion prop, so
+  // existing tables keep their exact row model and rendering.
+  const expansionEnabled = getSubRows !== undefined || expandable !== undefined
+  const [internalExpanded, setInternalExpanded] = React.useState<ExpandedState>({})
+  const expandedState = expandedProp !== undefined ? expandedProp : internalExpanded
+  const handleExpandedChange = React.useCallback<OnChangeFn<ExpandedState>>((updater) => {
+    if (onExpandedChange) {
+      onExpandedChange(updater)
+      return
+    }
+    setInternalExpanded((prev) => (typeof updater === 'function' ? updater(prev) : updater))
+  }, [onExpandedChange])
   const table = useLegacyTable<T>({
     data: clientFilteredData,
     columns: mergedColumns,
     getCoreRowModel: getCoreRowModel(),
     ...(enableClientSorting ? { getSortedRowModel: getSortedRowModel() } : {}),
+    ...(expansionEnabled ? {
+      getSubRows: getSubRows as ((row: T) => T[] | undefined) | undefined,
+      getExpandedRowModel: getExpandedRowModel(),
+      getRowCanExpand: (row) => {
+        if (typeof expandable === 'function') return expandable(row.original as T)
+        if (expandable === true) return true
+        return (row.subRows?.length ?? 0) > 0
+      },
+      onExpandedChange: handleExpandedChange,
+    } : {}),
     manualSorting: manualSorting === true,
     getRowId: resolveDataTableRowId,
-    state: { sorting, columnVisibility, columnOrder, rowSelection },
+    state: { sorting, columnVisibility, columnOrder, rowSelection, ...(expansionEnabled ? { expanded: expandedState } : {}) },
     enableRowSelection: hasInjectedBulkActions,
     onSortingChange: (updater) => {
       const next = typeof updater === 'function' ? updater(sorting) : updater
@@ -3074,14 +3126,61 @@ export function DataTable<T extends RowData>({
     [confirm, extensionTableId, refreshButton, resolvedInjectionContext, router, selectedRows, t],
   )
 
+  /**
+   * Host-owned bulk actions (the `bulkActions` prop) used to DISCARD whatever
+   * they returned. An action that queued server-side work and returned
+   * `{ ok: true, progressJobId }` — the contract `progress/AGENTS.md` requires
+   * — was answered with silence: no toast, no top-bar tracking, and a rejected
+   * promise surfaced as an unhandled rejection instead of an error flash.
+   *
+   * The `void` / `true` / `false` returns keep their exact previous behaviour,
+   * because the callers that use them (customers, messages) already flash from
+   * their own `runBulkMutation` and a second toast would be a regression. Only
+   * a RESULT OBJECT is now acted on.
+   */
   const runPropBulkAction = React.useCallback(
     async (action: BulkAction<T>) => {
-      const result = await action.onExecute(selectedRows)
-      if (result !== false) {
+      try {
+        const result = await action.onExecute(selectedRows)
+        if (result === false) return
+        if (!result || typeof result !== 'object') {
+          setRowSelection({})
+          return
+        }
+
+        if (result.ok === false) {
+          if (result.message === undefined) return
+          flash(result.message, 'error')
+          return
+        }
+
         setRowSelection({})
+        if (result.progressJobId) {
+          trackedBulkProgressJobIdsRef.current.add(result.progressJobId)
+          flash(
+            result.message
+              ?? t('ui.dataTable.bulkAction.started', 'Bulk action started. Track progress in the top bar.'),
+            'success',
+          )
+          return
+        }
+        flash(
+          result.message ?? t('ui.dataTable.bulkAction.success', 'Bulk action completed.'),
+          'success',
+        )
+        if (refreshButton?.onRefresh) {
+          refreshButton.onRefresh()
+        } else {
+          scheduleRouterRefresh(router)
+        }
+      } catch (error) {
+        flash(
+          error instanceof Error ? error.message : t('ui.dataTable.bulkAction.error', 'Bulk action failed.'),
+          'error',
+        )
       }
     },
-    [selectedRows],
+    [refreshButton, router, selectedRows, t],
   )
 
   const builtToolbar = React.useMemo(() => {
@@ -3180,6 +3279,7 @@ export function DataTable<T extends RowData>({
           </div>
         )
         : null
+    const perspectiveButtonLeading = perspectiveAlign === 'right' ? null : perspectiveButton
     const saveViewButton = showSaveViewButton && canUsePerspectives ? (
       <Button
         type="button"
@@ -3203,10 +3303,10 @@ export function DataTable<T extends RowData>({
         ) : null}
       </Button>
     ) : null
-    const leadingItems = advancedFilterButton || perspectiveButton || saveViewButton ? (
+    const leadingItems = advancedFilterButton || perspectiveButtonLeading || saveViewButton ? (
       <div className="flex items-center gap-2">
         {advancedFilterButton}
-        {perspectiveButton}
+        {perspectiveButtonLeading}
         {saveViewButton}
       </div>
     ) : null
@@ -3255,6 +3355,9 @@ export function DataTable<T extends RowData>({
     const searchTrailingNode = searchTrailingInjectionSpotId && onSearchChange ? (
       <InjectionSpot spotId={searchTrailingInjectionSpotId} context={resolvedInjectionContext} />
     ) : null
+    // With the Views switcher moved to the right-hand actions area, the filter
+    // toolbar has nothing left to render — drop it so no empty band appears.
+    if (perspectiveAlign === 'right' && !anySearch && combined.length === 0 && !advancedFilterButton && !saveViewButton && !trailingItems && !fieldsetSelector) return null
     return (
       <FilterBar
         searchValue={searchValue}
@@ -3286,6 +3389,7 @@ export function DataTable<T extends RowData>({
     onFiltersApply,
     onFiltersClear,
     canUsePerspectives,
+    perspectiveAlign,
     embedded,
     supportsCustomFieldFilterFieldsets,
     resolvedEntityIds,
@@ -3415,17 +3519,29 @@ export function DataTable<T extends RowData>({
                     </Button>
                   ) : null}
                   {canUsePerspectives ? (
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => setPerspectiveOpen(true)}
-                      aria-label={t('ui.dataTable.customizeColumns.ariaLabel', 'Customize columns')}
-                      title={t('ui.dataTable.customizeColumns.title', 'Customize columns')}
-                    >
-                      <MoreHorizontal className="h-4 w-4" />
-                      <span className="sr-only">{t('ui.dataTable.customizeColumns.srOnly', 'Customize columns')}</span>
-                    </Button>
+                    perspectiveAlign === 'right' ? (
+                      <ViewSwitcherDropdown
+                        activePerspectiveId={activePerspectiveId}
+                        perspectives={perspectiveData?.perspectives ?? []}
+                        rolePerspectives={perspectiveData?.rolePerspectives ?? []}
+                        onClear={() => applyPerspectiveSettings({}, null)}
+                        onActivate={handlePerspectiveActivate}
+                        onOpenSidebar={() => setPerspectiveOpen(true)}
+                        t={t}
+                      />
+                    ) : (
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => setPerspectiveOpen(true)}
+                        aria-label={t('ui.dataTable.customizeColumns.ariaLabel', 'Customize columns')}
+                        title={t('ui.dataTable.customizeColumns.title', 'Customize columns')}
+                      >
+                        <MoreHorizontal className="h-4 w-4" />
+                        <span className="sr-only">{t('ui.dataTable.customizeColumns.srOnly', 'Customize columns')}</span>
+                      </Button>
+                    )
                   ) : null}
                   {exportConfig && hasExport ? <ExportMenu config={exportConfig} sections={resolvedExportSections} /> : null}
                   {toolbarInjectionSpotId ? (
@@ -3677,13 +3793,51 @@ export function DataTable<T extends RowData>({
                         </TruncatedCell>
                       ) : content
 
+                      // Expansion affordance: only on the first data cell when
+                      // expansion is enabled. Indent by nesting depth so children
+                      // read as nested under their parent; render a fixed-width
+                      // spacer for non-expandable rows to keep columns aligned.
+                      const expandAffordance = expansionEnabled && cellIndex === 0 ? (
+                        <span
+                          className="inline-flex shrink-0 items-center"
+                          style={{ paddingLeft: `${row.depth * 1.25}rem` }}
+                        >
+                          {row.getCanExpand() ? (
+                            <IconButton
+                              type="button"
+                              variant="ghost"
+                              size="xs"
+                              aria-label={row.getIsExpanded()
+                                ? t('ui.dataTable.expand.collapseRow', 'Collapse row')
+                                : t('ui.dataTable.expand.expandRow', 'Expand row')}
+                              aria-expanded={row.getIsExpanded()}
+                              onClick={(event) => {
+                                event.stopPropagation()
+                                row.toggleExpanded()
+                              }}
+                            >
+                              {row.getIsExpanded()
+                                ? <ChevronDown className="size-4" aria-hidden="true" />
+                                : <ChevronRight className="size-4" aria-hidden="true" />}
+                            </IconButton>
+                          ) : (
+                            <span className="inline-block size-6" aria-hidden="true" />
+                          )}
+                        </span>
+                      ) : null
+
                       return (
                         <TableCell
                           key={cell.id}
                           className={responsiveClass(priority, columnMeta?.hidden) + (isStickyCell ? ` md:sticky md:left-0 md:z-10 md:bg-background ${STICKY_LEFT_SHADOW_CLASS}` : '')}
                           style={typeof sizedWidth === 'number' ? { width: sizedWidth, minWidth: sizedWidth, maxWidth: sizedWidth } : undefined}
                         >
-                          {wrappedContent}
+                          {expandAffordance ? (
+                            <span className="flex items-center gap-1.5">
+                              {expandAffordance}
+                              <span className="min-w-0 flex-1">{wrappedContent}</span>
+                            </span>
+                          ) : wrappedContent}
                         </TableCell>
                       )
                     })}

package/src/backend/__tests__/CrudForm.density.test.tsx

@@ -0,0 +1,113 @@
+/** @jest-environment jsdom */
+
+/**
+ * `density` exists for narrow hosts — a docked inspector rail, a side panel —
+ * where the page-width rhythm reads as airy and costs the host a third of its
+ * column.
+ *
+ * The contract under test is deliberately narrow, because this prop lands on a
+ * component every form in the product renders through:
+ *
+ *   1. omitting it changes NOTHING (the default renders the same class strings
+ *      that were inline before the prop existed), and
+ *   2. `compact` changes SPACING only — the same fields, labels, helper text and
+ *      controls, one step down the DS scale.
+ */
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+}))
+jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
+jest.mock('../confirm-dialog', () => ({
+  useConfirmDialog: () => ({ confirm: jest.fn().mockResolvedValue(true), ConfirmDialogElement: null }),
+}))
+jest.mock('../custom-fields/FieldDefinitionsManager', () => {
+  const React = require('react')
+  return { __esModule: true, FieldDefinitionsManager: React.forwardRef(() => <div />) }
+})
+jest.mock('../utils/customFieldForms', () => ({
+  __esModule: true,
+  buildFormFieldFromCustomFieldDef: jest.fn(),
+  buildFormFieldsFromCustomFields: jest.fn(() => []),
+  fetchCustomFieldFormStructure: jest.fn(),
+}))
+
+import * as React from 'react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { CrudForm, type CrudField, type CrudFormGroup } from '../CrudForm'
+
+const fields: CrudField[] = [
+  { id: 'name', label: 'Name', type: 'text', description: 'What to call it' },
+  { id: 'notes', label: 'Notes', type: 'text' },
+]
+
+const groups: CrudFormGroup[] = [{ id: 'basic', title: 'Basic', column: 1, fields: ['name', 'notes'] }]
+
+function renderForm(density?: 'default' | 'compact') {
+  const { container } = renderWithProviders(
+    <CrudForm
+      fields={fields}
+      groups={groups}
+      initialValues={{ name: 'x' }}
+      onSubmit={jest.fn()}
+      embedded
+      {...(density ? { density } : {})}
+    />,
+  )
+  return container
+}
+
+function classesOf(container: HTMLElement): string[] {
+  return Array.from(container.querySelectorAll<HTMLElement>('*')).map((node) => node.className.toString())
+}
+
+describe('CrudForm density', () => {
+  it('renders identically whether the prop is omitted or set to its default', () => {
+    // React's `useId` counter advances between renders in one file, so the
+    // generated form id is normalised away; everything else must match exactly.
+    const normalise = (html: string) => html.replace(/_r_[0-9a-z]+_/g, '_r_id_')
+    const omitted = normalise(renderForm().innerHTML)
+    const explicit = normalise(renderForm('default').innerHTML)
+
+    expect(explicit).toBe(omitted)
+  })
+
+  it('steps the form rhythm down one DS step when compact', () => {
+    const form = renderForm().querySelector('form')
+    const compactForm = renderForm('compact').querySelector('form')
+
+    expect(form?.className).toContain('space-y-4')
+    expect(compactForm?.className).toContain('space-y-3')
+    expect(compactForm?.className).not.toContain('space-y-4')
+  })
+
+  it('tightens the group card padding when compact', () => {
+    const defaultCard = renderForm().querySelector('.rounded-lg.border')
+    const compactCard = renderForm('compact').querySelector('.rounded-lg.border')
+
+    expect(defaultCard?.className).toContain('px-4')
+    expect(defaultCard?.className).toContain('py-3')
+    expect(compactCard?.className).toContain('px-3')
+    expect(compactCard?.className).toContain('py-2')
+  })
+
+  it('never reaches for an arbitrary Tailwind value', () => {
+    // The DS ban is on values like `p-[13px]`; density must stay on the scale.
+    for (const className of classesOf(renderForm('compact'))) {
+      expect(className).not.toMatch(/\b(?:p|px|py|m|mx|my|space-[xy])-\[/)
+    }
+  })
+
+  it('changes spacing only — the same fields, labels and helper text survive', () => {
+    const compact = renderForm('compact')
+
+    expect(compact.textContent).toContain('Name')
+    expect(compact.textContent).toContain('Notes')
+    expect(compact.textContent).toContain('What to call it')
+    expect(compact.querySelectorAll('[data-crud-field-id]')).toHaveLength(
+      renderForm().querySelectorAll('[data-crud-field-id]').length,
+    )
+  })
+})