@visns-studio/visns-components 6.5.5 → 6.6.1

package/src/components/styles/GenericMain.module.scss

@@ -1,3 +1,56 @@
+/* ============================================================================
+   Density hooks (page, controls, grid, fields, detail)
+   ----------------------------------------------------------------------------
+   The second half of the set documented at the top of Navigation.module.scss,
+   written the same way: every declaration carrying one of these reads
+   `var(--hook, <the value it always had>)`, so a project that sets none of them
+   renders byte-identically to before. They exist for the density system — an
+   app overrides them on `:root` in its own global stylesheet to tighten (or
+   loosen) the whole UI without forking a component.
+
+   Page shell — this file
+     --page-gutter-y          vertical padding of the content gutter
+                              (`.padding` / `.paddingSimple`).
+                                                   default: var(--spacing-lg)
+     --page-gutter-x          horizontal padding of the same.
+                       default: clamp(var(--spacing-md), 3vw, var(--spacing-xl))
+     --page-gutter-narrow     the flat gutter used below 960px, both axes.
+                                                   default: var(--spacing-md)
+     --page-max-width         cap on the content column's width. default: 2200px
+     --content-header-height  the page's own content-header band. default: 52.5px
+
+   Controls — _controls.scss
+     --control-height         min-height of every button (`button-base`) and
+                              input (`input-base`).             default: 2.5rem
+     --control-height-sm      min-height of the small button variant.
+                                                                default: 2rem
+     --input-padding-x        horizontal padding inside an input. default: 0.65rem
+
+   Data grid — DataGrid.module.scss, global-datagrid.css
+     --grid-toolbar-height    height of the toolbar / search strip and the
+                              buttons sitting in it (11 declarations).
+                                                                default: 38px
+     --grid-cell-padding      padding inside a grid body cell.  default: 6px 8px
+     --grid-checkbox-col-width width of the row-select checkbox column, held
+                              in step with checkboxColWidth in
+                              utils/useDensity.js.              default: 60px
+
+   Fields — Field.module.scss
+     --field-pocket-size      min-height of a file-list row.    default: 36px
+     --field-pocket-size-sm   the square trash chip on that row. default: 28px
+     --field-suggestion-font-size type size of the email-suggestion list
+                              (kept in step with react-select).  default: 14px
+
+   Detail / index — GenericDetail.module.scss, GenericIndex.module.scss
+     --detail-max-width       cap on the wide modal, shared by both files so the
+                              two surfaces stay the same width. default: 1400px
+     --detail-prose-width     measure of a description paragraph. default: 70ch
+     --detail-panel-max-width cap on the centred empty-state panel. default: 600px
+
+   Nav-bar hooks (`--nav-*`, including `--nav-logo-height`) are documented at
+   the top of Navigation.module.scss and are not repeated here.
+   ========================================================================= */
+
 .header {
     background: var(--primary-color);
     color: var(--primary-color);
@@ -36,7 +89,7 @@
         border-bottom: 1px solid rgba(0, 0, 0, 0.14);
         box-sizing: border-box;
         padding: 1em;
-        height: 52.5px;
+        height: var(--content-header-height, 52.5px);
         box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.5);
         display: flex;
         flex-wrap: nowrap;
@@ -94,13 +147,13 @@
    and on a phone gave the same gutter as a desktop. */
 .padding,
 .paddingSimple {
-    padding: var(--spacing-lg) clamp(var(--spacing-md), 3vw, var(--spacing-xl));
+    padding: var(--page-gutter-y, var(--spacing-lg)) var(--page-gutter-x, clamp(var(--spacing-md), 3vw, var(--spacing-xl)));
     /* Long lines of data are hard to track across an ultrawide screen. This
        is generous enough never to bite on a laptop. */
-    max-width: 2200px;
+    max-width: var(--page-max-width, 2200px);
     margin: 0 auto;
 
     @media (max-width: 960px) {
-        padding: var(--spacing-md) var(--spacing-md);
+        padding: var(--page-gutter-narrow, var(--spacing-md)) var(--page-gutter-narrow, var(--spacing-md));
     }
 }

package/src/components/styles/Navigation.module.scss

@@ -34,6 +34,10 @@
                                  chips.                            default: 4px
      --nav-dropdown-item-padding padding on a dropdown menu row.
                                                               default: 8px 20px
+     --nav-logo-height           height of the logo plate, and the same figure
+                                 everywhere the rail, the content header and the
+                                 mobile drawer offset themselves by it.
+                                                                  default: 50px
 
    Two deliberate omissions: the icon-to-label gap inside a nav item and the
    padding on the chips themselves are internal alignment, not density — the
@@ -711,7 +715,7 @@
            A project whose page background is the same colour can merge the
            plate into the rail instead: `--nav-logo-bg: var(--nav-bg)`. */
         background: var(--nav-logo-bg, rgba(var(--tertiary-color-rgb), 0.95));
-        height: 50px;
+        height: var(--nav-logo-height, 50px);
         display: flex;
         flex-wrap: nowrap;
         justify-content: center;
@@ -727,7 +731,7 @@
             width: 100%;
             position: relative;
             overflow-y: auto; /* Enable vertical scrolling */
-            max-height: calc(100vh - 50px); /* Subtract the logo height */
+            max-height: calc(100vh - var(--nav-logo-height, 50px)); /* Subtract the logo height */
             scrollbar-width: none; /* Firefox */
             -ms-overflow-style: none; /* IE and Edge */
 
@@ -1029,7 +1033,7 @@
         background: var(--tertiary-color);
         box-sizing: border-box;
         padding: 0.15rem;
-        height: 50px;
+        height: var(--nav-logo-height, 50px);
         box-shadow: var(--box-shadow-small);
         display: flex;
         flex-wrap: nowrap;
@@ -1150,8 +1154,8 @@
            below it: start the drawer under the 50px header instead of
            letting the header paint over the drawer's top row. This also
            keeps the hamburger tappable while the drawer is open. */
-        top: 50px;
-        height: calc(100% - 50px);
+        top: var(--nav-logo-height, 50px);
+        height: calc(100% - var(--nav-logo-height, 50px));
         transform: translateX(-2000px);
         transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
         will-change: transform;
@@ -1214,13 +1218,13 @@
 
     .content--full {
         /* The 50px bar is still there below this width. */
-        min-height: calc(100vh - 50px);
+        min-height: calc(100vh - var(--nav-logo-height, 50px));
     }
 
     .drawer-backdrop {
         display: block;
         position: fixed;
-        top: 50px;
+        top: var(--nav-logo-height, 50px);
         left: 0;
         right: 0;
         bottom: 0;

package/src/components/styles/_controls.scss

@@ -17,7 +17,7 @@
     justify-content: center;
     gap: 0.4rem;
     width: max-content;
-    min-height: 2.5rem;
+    min-height: var(--control-height, 2.5rem);
     padding: 0 var(--spacing-md);
     border: 1px solid transparent;
     border-radius: var(--radius-sm);
@@ -102,7 +102,7 @@
 }
 
 @mixin button-small {
-    min-height: 2rem;
+    min-height: var(--control-height-sm, 2rem);
     padding: 0 var(--spacing-sm);
     font-size: var(--font-size-xs);
 }
@@ -111,8 +111,8 @@
 
 @mixin input-base {
     width: 100%;
-    min-height: 2.5rem;
-    padding: 0 0.65rem;
+    min-height: var(--control-height, 2.5rem);
+    padding: 0 var(--input-padding-x, 0.65rem);
     border: 1px solid var(--border-color);
     border-radius: var(--radius-sm);
     background: var(--paper);

package/src/components/styles/density.css

@@ -0,0 +1,85 @@
+/* ============================================================================
+   Display density
+   ----------------------------------------------------------------------------
+   One opt-in mode — `large` — for the projects that run on a shop-floor
+   monitor, a wall-mounted screen or in front of someone who would rather not
+   lean in. Everything in this file hangs off `:root[data-density='large']`,
+   and that attribute is only ever written by GenericAuth when the app passes
+   the `density` prop:
+
+       <GenericAuth density="large" ... />
+
+   No prop, no attribute, no rule in here matches — an app that never opts in
+   renders exactly as it always has. There is nothing to import, disable or
+   fork on that path.
+
+   The lever is rem, not a table of overrides. `font-size: 112.5%` on the root
+   takes the browser's 16px up to 18px, and every rem-based token, control,
+   gap and type size in the library follows on its own — that is most of the
+   mode, done once. The custom properties below only exist to catch what rem
+   cannot reach: the px-valued hooks the components expose (row heights, cell
+   padding, fixed chrome heights, pocket squares) and the page-width caps that
+   should simply stop capping when the screen is being used as a big screen.
+
+   Overriding a value
+   ------------------
+   Apps override any of these from their own global stylesheet with the more
+   specific selector:
+
+       html:root[data-density='large'] {
+           --control-height: 3rem;
+           --grid-cell-padding: 12px 14px;
+       }
+
+   `html:root[...]` outweighs the plain `:root[...]` used here on specificity
+   alone, so it wins no matter which stylesheet the bundler emits first — no
+   `!important`, no import-order archaeology.
+
+   The root font-size has its own escape hatch so an app can dial the whole
+   mode up or down without restating a single hook:
+
+       html:root[data-density='large'] { --density-root-font-size: 125%; }
+
+   Anything the app sets on plain `:root` stays the shared value for both
+   densities — set it here only when `large` should differ.
+   ========================================================================= */
+
+:root[data-density='large'] {
+    font-size: var(--density-root-font-size, 112.5%);
+
+    /* Page frame — a large display is asked for width, so stop capping it. */
+    --page-max-width: none;
+    --page-gutter-x: clamp(0.5rem, 1vw, 1rem);
+    --page-gutter-y: 0.75rem;
+    --page-gutter-narrow: 0.5rem;
+
+    /* Controls */
+    --control-height: 2.75rem;
+    --control-height-sm: 2.25rem;
+
+    /* Data grid — px, because the grid measures and lays out in px. */
+    --grid-toolbar-height: 46px;
+    --grid-cell-padding: 9px 10px;
+    --grid-checkbox-col-width: 72px;
+
+    /* Fixed chrome */
+    --content-header-height: 60px;
+    --nav-logo-height: 56px;
+
+    /* Field pockets (the square icon/affix tiles beside an input) */
+    --field-pocket-size: 44px;
+    --field-pocket-size-sm: 34px;
+    --field-suggestion-font-size: 16px;
+
+    /* Detail pages */
+    --detail-max-width: 1600px;
+}
+
+/* The row-select checkbox column, one step wider again on a tablet view —
+   the row is 60px tall there, so the tap zone should be square-ish. The JS
+   side of this number lives in utils/useDensity.js (checkboxColWidth); the
+   two must agree, since the grid lays the column out from the JS value and
+   these custom properties only hold the cell against Inovua's inline width. */
+:root[data-density='large'] body.tablet-mode {
+    --grid-checkbox-col-width: 80px;
+}

package/src/components/styles/global-datagrid.css

@@ -45,10 +45,14 @@ div[role="tooltip"],
     border-radius: 0 !important;
 }
 
-/* Ensure consistent border radius for cells and reduce padding for compact rows */
-.InovuaReactDataGrid__cell {
+/* Ensure consistent border radius for cells and reduce padding for compact rows.
+   :not(--no-padding): the grid zeroes padding inline on its spacer/expand
+   cells (group nesting columns) and sizes them width:0 when unused — an
+   unconditional !important here re-inflates those to pure padding and
+   shifts group rows out of line with the headers. */
+.InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-padding) {
     border-radius: 0 !important;
-    padding: 6px 8px !important; /* Reduced from default padding */
+    padding: var(--grid-cell-padding, 6px 8px) !important; /* Reduced from default padding */
 }
 
 /* Word wrap enabled cells - specific class for columns with wordWrap: true */
@@ -84,10 +88,13 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap span {
     max-height: 100% !important;
 }
 
-body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap {
+body.tablet-mode
+    .InovuaReactDataGrid__cell.cell-word-wrap:not(
+        .InovuaReactDataGrid__cell--no-padding
+    ) {
     height: 100% !important;
     align-items: center !important;
-    padding: 6px 8px !important;
+    padding: var(--grid-cell-padding, 6px 8px) !important;
 }
 
 body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
@@ -103,10 +110,10 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
     overflow: hidden !important;
 }
 
-/* Reduce header cell padding as well */
-.InovuaReactDataGrid__header-cell {
-    padding: 6px 8px !important;
-}
+/* NOTE: this fork renders header cells as .InovuaReactDataGrid__column-header
+   (there is no __header-cell class in its DOM), so header padding is left to
+   the module stylesheet; a __header-cell padding rule that used to sit here
+   was dead code and has been removed. */
 
 /* Fix for focus outline */
 .InovuaReactDataGrid:focus,
@@ -115,173 +122,49 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
     box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 59, 130, 246), 0.2) !important;
 }
 
-/* Checkbox column improvements for touch devices - Compact version */
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
-    padding: 6px 8px !important; /* Reduced padding for compact rows */
-    min-width: 60px !important;
-    width: 60px !important;
-    max-width: 60px !important;
-    position: relative !important;
-    cursor: pointer !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    /* Ensure the entire cell is clickable */
-    user-select: none !important;
-    -webkit-user-select: none !important;
-    -moz-user-select: none !important;
-    -ms-user-select: none !important;
-}
-
-/* Improve checkbox touch targets */
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-    input[type='checkbox'] {
-    width: 20px !important;
-    height: 20px !important;
-    margin: 0 !important;
-    cursor: pointer !important;
-    position: relative !important;
-    z-index: 2 !important;
-}
-
-/* Create larger touch target area around checkbox */
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-    .InovuaReactDataGrid__checkbox-wrapper,
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+/* Checkbox column.
+
+   The rules that used to live here keyed every declaration on
+   [data-column-id='__checkbox-column'] — an attribute this datagrid fork has
+   never rendered — so none of them ever matched: not the 60px width pins,
+   not the 44px touch wrappers. Discovered Aug 2026 when the column collapsed
+   to the grid's internal 40px default with no CSS backstop to catch it.
+
+   The column's width is owned by the JS side (checkboxColumnProps in
+   DataGrid.jsx, fed from utils/useDensity.js checkboxColWidth); CSS cannot
+   safely fight the grid's layout engine on width. What CSS can usefully add
+   is glyph size and cursor, on the classes that actually exist:
+   .InovuaReactDataGrid__checkbox is the toolkit checkbox root in body cells
+   (it draws a 16px svg with a proper viewBox, so CSS sizing scales it
+   cleanly), and the header cell holds a native input rendered by
+   DataGrid.jsx. Gated on large density; default-density apps keep the
+   rendering they have always had. */
+:root[data-density='large']
+    .InovuaReactDataGrid__cell
     .InovuaReactDataGrid__checkbox {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    min-height: 44px !important;
-    min-width: 44px !important;
-    padding: 12px !important;
-    margin: -12px !important;
-    cursor: pointer !important;
-    border-radius: 4px !important;
-    transition: background-color 0.2s ease !important;
-}
-
-/* Touch-friendly hover effect for the entire cell */
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']:hover {
-    background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.05) !important;
-}
-
-/* Touch-friendly hover effect for checkbox wrapper */
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-    .InovuaReactDataGrid__checkbox-wrapper:hover,
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-    .InovuaReactDataGrid__checkbox:hover {
-    background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.1) !important;
+    cursor: pointer;
 }
 
-/* Header checkbox improvements - Compact version */
-.InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column'] {
-    padding: 6px 8px !important; /* Reduced padding for compact rows */
-    min-width: 60px !important;
-    width: 60px !important;
-    max-width: 60px !important;
+:root[data-density='large']
+    .InovuaReactDataGrid__cell
+    .InovuaReactDataGrid__checkbox svg {
+    width: 22px;
+    height: 22px;
 }
 
-.InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column']
+/* !important because global.css draws every non-react-toggle checkbox at a
+   fixed 14px !important — an inline style cannot beat that, and neither can
+   this rule without its own !important. The header cell in this fork is
+   .InovuaReactDataGrid__column-header (never __header-cell). */
+:root[data-density='large']
+    .InovuaReactDataGrid__column-header
     input[type='checkbox'] {
-    width: 20px !important;
-    height: 20px !important;
-    margin: 0 !important;
-    cursor: pointer !important;
-}
-
-/* Prevent text selection in checkbox column */
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
-    user-select: none !important;
-    -webkit-user-select: none !important;
-    -moz-user-select: none !important;
-    -ms-user-select: none !important;
+    width: 22px !important;
+    height: 22px !important;
+    cursor: pointer;
 }
 
-/* Additional checkbox styling for better UX */
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-    .InovuaReactDataGrid__cell-content {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    width: 100% !important;
-    height: 100% !important;
-}
 
-/* Focus styles for accessibility */
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-    input[type='checkbox']:focus {
-    outline: 2px solid rgba(var(--primary-rgb, 59, 130, 246), 0.5) !important;
-    outline-offset: 2px !important;
-}
-
-/* Ensure checkbox column doesn't interfere with row hover */
-.InovuaReactDataGrid__row:hover
-    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
-    background-color: inherit !important;
-}
-
-/* Mobile-specific improvements - Compact version */
-@media (max-width: 768px) {
-    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
-        min-width: 70px !important;
-        width: 70px !important;
-        max-width: 70px !important;
-        padding: 8px 12px !important; /* Reduced padding for compact rows */
-    }
-
-    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-        input[type='checkbox'] {
-        width: 24px !important;
-        height: 24px !important;
-    }
-
-    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-        .InovuaReactDataGrid__checkbox-wrapper,
-    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-        .InovuaReactDataGrid__checkbox {
-        min-height: 48px !important;
-        min-width: 48px !important;
-        padding: 16px !important;
-        margin: -16px !important;
-    }
-
-    .InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column'] {
-        min-width: 70px !important;
-        width: 70px !important;
-        max-width: 70px !important;
-        padding: 8px 12px !important; /* Reduced padding for compact rows */
-    }
-
-    .InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column']
-        input[type='checkbox'] {
-        width: 24px !important;
-        height: 24px !important;
-    }
-}
-
-/* Touch device specific improvements - Compact version */
-@media (hover: none) and (pointer: coarse) {
-    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
-        padding: 12px !important; /* Reduced padding for compact rows */
-    }
-
-    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-        input[type='checkbox'] {
-        width: 28px !important;
-        height: 28px !important;
-    }
-
-    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-        .InovuaReactDataGrid__checkbox-wrapper,
-    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-        .InovuaReactDataGrid__checkbox {
-        min-height: 52px !important;
-        min-width: 52px !important;
-        padding: 18px !important;
-        margin: -18px !important;
-    }
-}
 
 /* Group expand/collapse icon fixes - Enhanced for better visibility */
 .InovuaReactDataGrid__group-expand-icon,