nexus-shared 4.0.0 → 4.1.0

package/dist/Shared.Index.js

@@ -20,12 +20,15 @@ export * from "./Helpers/ChatStore.js";
 export * from "./Helpers/ChatSummaries.js";
 export * from "./Helpers/ClassHelpers.js";
 export * from "./Helpers/CodeHelpers.js";
+export { setAuditActorNames } from "./Helpers/AuditEntries.js";
 export * from "./Helpers/CrudBackend.js";
 export * from "./Helpers/CrudColumns.js";
 export * from "./Helpers/CrudDetailsTabs.js";
 export * from "./Helpers/CrudHelpers.js";
+export * from "./Helpers/DashboardHelpers.js";
 export * from "./Helpers/DateHelpers.js";
 export * from "./Helpers/DateTimeHelpers.js";
+export * from "./Helpers/DomainCards.js";
 export * from "./Helpers/DropdownHelpers.js";
 export * from "./Helpers/ExcelBackend.js";
 export * from "./Helpers/ExcelHelpers.js";
@@ -43,9 +46,14 @@ export * from "./Helpers/CrudScopes.js";
 export * from "./Helpers/CrudRowForms.js";
 export * from "./Helpers/MarkdownEditing.js";
 export * from "./Helpers/MarkdownHelpers.js";
+export * from "./Helpers/MailClientHelpers.js";
+export * from "./Helpers/MessageBackend.js";
 export * from "./Helpers/MessageBuilder.js";
+export * from "./Helpers/MessageHelpers.js";
+export * from "./Helpers/MessageUnread.js";
 export * from "./Helpers/NepaliCalendar.js";
 export * from "./Helpers/NumberHelpers.js";
+export * from "./Helpers/PagedPicker.js";
 export * from "./Helpers/Permissions.js";
 export * from "./Helpers/QrCode.js";
 export * from "./Helpers/RecordCards.js";
@@ -58,17 +66,21 @@ export * from "./Helpers/TableJoins.js";
 export * from "./Helpers/TableStore.js";
 export * from "./Helpers/ThemeHelpers.js";
 export * from "./Helpers/TimeHelpers.js";
+export * from "./Helpers/ToolbarFit.js";
 export * from "./Helpers/TreeStore.js";
 export * from "./Helpers/ValidationHelpers.js";
 // Interfaces
 export * from "./Interfaces/ApiInterfaces.js";
 export * from "./Interfaces/ChatInterfaces.js";
 export * from "./Interfaces/CrudInterfaces.js";
+export * from "./Interfaces/DashboardInterfaces.js";
 export * from "./Interfaces/DateInterfaces.js";
+export * from "./Interfaces/DomainInterfaces.js";
 export * from "./Interfaces/ExcelInterfaces.js";
 export * from "./Interfaces/FileInterfaces.js";
 export * from "./Interfaces/FormInterfaces.js";
 export * from "./Interfaces/InputInterfaces.js";
+export * from "./Interfaces/MailInterfaces.js";
 export * from "./Interfaces/MessageInterfaces.js";
 export * from "./Interfaces/PreferenceInterfaces.js";
 export * from "./Interfaces/RecordInterfaces.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexus-shared",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "The Nexus component library for React and Next.js: params-driven inputs and forms, a data table with a CRUD on top, popups and toasts, an API layer with permissions, Markdown and rich text editors, and 7 themes in light and dark.",
   "keywords": [
     "react",
@@ -54,6 +54,7 @@
     "test:crud-tabs": "node scripts/test-crud-details-tabs.mts",
     "test:crud-profile": "node scripts/test-crud-profile-fields.mts",
     "test:codes": "node scripts/test-code-helpers.mts",
+    "test:dashboard": "node scripts/test-dashboard.mts",
     "test:dates": "node scripts/test-date-helpers.mts",
     "test:datetimes": "node scripts/test-datetime-helpers.mts",
     "test:drag": "node scripts/test-drag-helpers.mts",
@@ -62,6 +63,10 @@
     "test:dropdown": "node scripts/test-dropdown-helpers.mts",
     "test:forms": "node scripts/test-form-store.mts",
     "test:form-confirm": "node scripts/test-form-confirm.mts",
+    "test:domain-card": "node scripts/test-domain-card.mts",
+    "test:mail": "node scripts/test-mail.mts",
+    "test:mail-client": "node scripts/test-mail-client.mts",
+    "test:message-bell": "node scripts/test-message-bell.mts",
     "test:markdown": "node scripts/test-markdown.mts",
     "test:numbers": "node scripts/test-number-helpers.mts",
     "test:popups": "node scripts/test-popup-rules.mts",
@@ -70,6 +75,7 @@
     "test:rows": "node scripts/test-rows-store.mts",
     "test:table": "node scripts/test-table.mts",
     "test:times": "node scripts/test-time-helpers.mts",
+    "test:toolbar-fit": "node scripts/test-toolbar-fit.mts",
     "test:tree": "node scripts/test-tree-store.mts",
     "test:types": "tsc -p scripts/type-checks/tsconfig.json"
   },

package/src/Styles/Nexus.Button.css

@@ -174,6 +174,35 @@
     background: var(--nx-danger-solid);
   }
 
+  /*
+   * A count over the corner (`badge`; the chat icon's unread count too): laid over the box, never beside it, so the
+   * button keeps its size and a bar or a column of them does not move as the counts arrive.
+   */
+  .nx-btn:has(> .nx-btn__badge) {
+    position: relative;
+  }
+
+  .nx-btn__badge,
+  .nx-chat-btn__badge {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    display: grid;
+    place-items: center;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border: 1px solid var(--nx-surface);
+    border-radius: var(--nx-radius-full);
+    background: var(--nx-danger-solid);
+    color: var(--nx-danger-text);
+    font-size: 10px;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    pointer-events: none;
+  }
+
   .nx-btn__dot[data-tone="primary"] {
     background: var(--nx-primary-solid);
   }

package/src/Styles/Nexus.Chat.css

@@ -87,26 +87,7 @@
     color: var(--nx-primary-text);
   }
 
-  /* The number of unread messages, over the corner of the box so the box keeps its size. */
-  .nx-chat-btn__badge {
-    position: absolute;
-    top: -5px;
-    right: -5px;
-    display: grid;
-    place-items: center;
-    min-width: 16px;
-    height: 16px;
-    padding: 0 4px;
-    border: 1px solid var(--nx-surface);
-    border-radius: var(--nx-radius-full);
-    background: var(--nx-danger-solid);
-    color: var(--nx-danger-text);
-    font-size: 10px;
-    font-weight: 700;
-    font-variant-numeric: tabular-nums;
-    line-height: 1;
-    pointer-events: none;
-  }
+  /* The number of unread messages over the corner: the badge `Button` draws too (Nexus.Button.css). */
 
   /* The panel */
 
@@ -210,8 +191,15 @@
     border-top: 1px solid var(--nx-border);
   }
 
-  /* The people, in a column beside the thread: a dividing line, not a panel inside a panel. */
+  /*
+   * The people, in a column beside the thread: a dividing line, not a panel inside a panel.
+   *
+   * Every scroller of the chat is positioned (`position: relative`; this one `absolute` in a narrow panel, below), so what
+   * lies out of the flow inside it - a visually hidden word - scrolls with it instead of being placed against the page
+   * and making it taller (card C-mail-client-fix). check-contract.mjs holds the chat's and the mail client's scrollers to it.
+   */
   .nx-chat-panel__aside {
+    position: relative;
     display: flex;
     flex: 0 0 220px;
     flex-direction: column;
@@ -286,6 +274,7 @@
   }
 
   .nx-chat-thread__list {
+    position: relative;
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
@@ -301,6 +290,19 @@
     box-shadow: inset var(--nx-focus-ring);
   }
 
+  /* A lead (a mail thread's head) opens the scroll edge to edge, and scrolls with the lines under it. */
+  .nx-chat-thread__lead {
+    flex-shrink: 0;
+    margin: calc(-1 * var(--nx-space-3)) calc(-1 * var(--nx-space-3)) 0;
+  }
+
+  /* Under a lead the lines are a log of their own, spaced as the list spaces them. */
+  .nx-chat-thread__log {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nx-space-2);
+  }
+
   .nx-chat-thread__day {
     display: flex;
     flex-direction: column;
@@ -785,6 +787,69 @@
     text-align: center;
   }
 
+  /*
+   * A notification: an event line across the thread, not a bubble on a side. The bell and the words line up with the
+   * avatars and bubbles beside them; nothing is boxed, so it reads as quieter than what people wrote.
+   */
+  .nx-chat-event {
+    display: grid;
+    grid-template-columns: var(--nx-avatar-size, 28px) minmax(0, 1fr);
+    gap: var(--nx-space-2);
+    align-items: start;
+    align-self: stretch;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-chat-event__icon {
+    justify-self: center;
+    width: 15px;
+    height: 15px;
+    margin-top: 2px;
+    color: var(--nx-primary);
+    vertical-align: 0;
+  }
+
+  .nx-chat-event__text {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+  }
+
+  .nx-chat-event__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 var(--nx-space-2);
+    align-items: baseline;
+  }
+
+  .nx-chat-event__author {
+    color: var(--nx-text);
+    font-weight: 600;
+  }
+
+  .nx-chat-event__meta time {
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-chat-event__body {
+    overflow-wrap: anywhere;
+  }
+
+  .nx-chat-event__body > :first-child {
+    margin-top: 0;
+  }
+
+  .nx-chat-event__body > :last-child {
+    margin-bottom: 0;
+  }
+
+  .nx-chat-event__body > * + * {
+    margin-top: var(--nx-space-1);
+  }
+
   /* The people */
 
   .nx-chat-people {
@@ -900,6 +965,10 @@
     font-size: var(--nx-text-sm);
   }
 
+  .nx-chat-failure--flat {
+    border-color: transparent;
+  }
+
   .nx-chat-failure button {
     display: inline-flex;
     gap: 3px;
@@ -943,6 +1012,25 @@
     text-align: center;
   }
 
+  /* What the writer should know before sending (`notice`): a quiet line over the writing area, not a box. */
+  .nx-chat-composer__notice {
+    display: flex;
+    gap: 6px;
+    align-items: flex-start;
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-chat-composer__notice .nx-icon {
+    flex-shrink: 0;
+    width: 15px;
+    height: 15px;
+    margin-top: 2px;
+    color: var(--nx-info);
+    vertical-align: 0;
+  }
+
   /* The editor is the whole writing area, so the row under it carries only the hint and the buttons. */
   .nx-chat-composer__row {
     display: flex;
@@ -1119,6 +1207,7 @@
    */
 
   .nx-chat-list {
+    position: relative;
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
@@ -1222,8 +1311,9 @@
     text-overflow: ellipsis;
   }
 
+  /* Inline, so it keeps its own width in a table cell (an inbox's Unread column) as in the list's row. */
   .nx-chat-list__badge {
-    display: grid;
+    display: inline-grid;
     flex-shrink: 0;
     place-items: center;
     min-width: 18px;
@@ -1248,6 +1338,7 @@
   /* New chat */
 
   .nx-chat-new {
+    position: relative;
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
@@ -1370,6 +1461,7 @@
    * list under it would fall outside. The highlighted row is the one Enter puts in.
    */
   .nx-chat-mentions {
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: 1px;

package/src/Styles/Nexus.Crud.css

@@ -41,72 +41,160 @@
     gap: var(--nx-space-2);
   }
 
-  /* Details: label over value, two to a line where there is room. */
+  /*
+   * Details (the 2026-06-20 look): each field a label and its value in a box - a hairline and the raised surface - two
+   * pairs to a line where the details are wide (46rem), one where they are not; under 20rem the label goes over its
+   * value. The details are their own size container, so a popup, a workspace's tab, a column beside a panel and a
+   * question's box each get the look their width allows. Every label has one width (a share of the details' width), so
+   * the values of both columns, and of a field across the line, start on one edge.
+   */
   .nx-crud-details {
+    container: nx-crud-details / inline-size;
     display: flex;
     flex-direction: column;
     gap: var(--nx-space-3);
   }
 
   .nx-crud-details__list {
+    --nx-crud-details-label: clamp(6rem, 30cqi, 11rem);
+
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
-    gap: var(--nx-space-4) var(--nx-space-5);
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--nx-space-2) var(--nx-space-6);
     margin: 0;
+    font-size: var(--nx-text-md);
+    line-height: 1.5;
   }
 
+  /* The label beside its value, on the line of the value's first line however many lines the value takes. */
   .nx-crud-details__item {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
+    display: grid;
+    grid-template-columns: var(--nx-crud-details-label) minmax(0, 1fr);
+    align-items: start;
+    gap: var(--nx-space-1) var(--nx-space-3);
     min-width: 0;
   }
 
-  .nx-crud-details__item--wide {
+  /* A long text (`wrap`, Markdown) and a list of rows (`table`) take the whole line. */
+  .nx-crud-details__item--wide,
+  .nx-crud-details__item--table {
     grid-column: 1 / -1;
   }
 
+  .nx-crud-details__label {
+    /* The value's box: its border and its padding, so the two first lines share a baseline. */
+    padding-block: 5px;
+    color: var(--nx-text-muted);
+    overflow-wrap: break-word;
+  }
+
+  .nx-crud-details__value {
+    /*
+     * Positioned, so what a value draws out of the flow (a tick's words for screen readers) stays in its box and inside
+     * the box that scrolls it, never making the popup itself scroll.
+     */
+    position: relative;
+    /* A value still to come keeps its box, so the full record lands without moving anything. */
+    min-height: calc(1lh + 10px);
+    margin: 0;
+    padding: 4px var(--nx-space-3);
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-sm);
+    background: var(--nx-surface-2);
+    overflow-wrap: anywhere;
+  }
+
+  /* A list of rows: its label over its table, which is the box. */
+  .nx-crud-details__item--table {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .nx-crud-details__item--table > .nx-crud-details__label {
+    padding-block: 0;
+  }
+
+  .nx-crud-details__table {
+    min-width: 0;
+    margin: 0;
+  }
+
+  /* The table's own frame: across the line, its columns scrolling sideways inside it when they are wider (a phone). */
+  .nx-crud-details__rows {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+
+  .nx-crud-details__rows table {
+    width: 100%;
+  }
+
+  /* The row's number: as narrow as its figures. */
+  .nx-crud-details__rows :is(th, td):first-child {
+    width: 1%;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
   /*
-   * Details in sections (`column.group`): each run of fields under its heading in the small muted heading style, the
-   * heading nearer its fields than the section before it.
+   * Details in sections (`column.group`): each run of fields under its numbered heading ("01. Contact"), the heading
+   * nearer its fields than the section before it.
    */
   .nx-crud-details__section {
     display: flex;
     flex-direction: column;
-    gap: var(--nx-space-2);
+    gap: var(--nx-space-3);
     min-width: 0;
   }
 
   .nx-crud-details__section + .nx-crud-details__section {
-    margin-top: var(--nx-space-3);
+    margin-top: var(--nx-space-4);
   }
 
   .nx-crud-details__heading {
     margin: 0;
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-xs);
+    color: var(--nx-text);
+    font-size: var(--nx-text-lg);
     font-weight: 600;
-    line-height: 1.3;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
+    line-height: 1.35;
+    font-variant-numeric: tabular-nums;
   }
 
-  .nx-crud-details__label {
+  /* A section's heading with its own Edit (`details.sections`): the button at the end of the heading's line. */
+  .nx-crud-details__head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nx-space-1) var(--nx-space-3);
+    min-width: 0;
+  }
+
+  /* A field only the full record has, when that record could not be loaded; a list with no rows. */
+  .nx-crud-details__missing {
     color: var(--nx-text-muted);
-    font-size: var(--nx-text-sm);
   }
 
-  .nx-crud-details__value {
-    /* A value still to come keeps its line, so the full record lands without moving anything. */
-    min-height: 1lh;
-    margin: 0;
-    overflow-wrap: anywhere;
-    font-size: var(--nx-text-md);
+  @container nx-crud-details (min-width: 46rem) {
+    .nx-crud-details__list {
+      --nx-crud-details-label: clamp(7rem, 15cqi, 11rem);
+
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    /* The fields sit in from their heading. */
+    .nx-crud-details__section > .nx-crud-details__list {
+      padding-inline-start: var(--nx-space-5);
+    }
   }
 
-  /* A field only the full record has, when that record could not be loaded. */
-  .nx-crud-details__missing {
-    color: var(--nx-text-muted);
+  @container nx-crud-details (max-width: 19.98rem) {
+    .nx-crud-details__item {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .nx-crud-details__label {
+      padding-block: 0;
+    }
   }
 
   /*
@@ -296,12 +384,15 @@
   .nx-crud-workspace__panel {
     --nx-crud-panel-pad-x: var(--nx-space-5);
 
+    /* Positioned: what a tab draws out of the flow scrolls and clips with the tab, never past the popup. */
+    position: relative;
     min-width: 0;
     min-height: 0;
     padding: var(--nx-space-4) var(--nx-crud-panel-pad-x) var(--nx-space-5);
     overflow: auto;
     overscroll-behavior: contain;
-    scroll-padding: calc(var(--nx-text-xs) * 0.6 + 2px) 4px 4px;
+    /* Below: the 3px ring and 2px more, as the panel's top can sit on a half pixel and its box on another fraction. */
+    scroll-padding: calc(var(--nx-text-xs) * 0.6 + 2px) 4px 5px;
   }
 
   /*