nexus-shared 3.2.0 → 4.1.0

package/dist/Shared.Index.js

@@ -1,9 +1,11 @@
 // Works everywhere: server components, client components, and plain TypeScript.
 // Components
 export * from "./Components/Documents/Button.js";
+export * from "./Components/Documents/PrintDocument.js";
 export * from "./Components/Inputs/Field.js";
 export * from "./Components/Layouts/ThemeScript.js";
 export * from "./Components/Viewers/MarkdownView.js";
+export * from "./Components/Viewers/QrCodeImage.js";
 export * from "./Components/Viewers/RichTextView.js";
 // Helpers
 export * from "./Helpers/ApiClient.js";
@@ -18,23 +20,43 @@ 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";
+export * from "./Helpers/FileAdapter.js";
+export * from "./Helpers/FilePrimaries.js";
+export * from "./Helpers/NexusDriveAdapter.js";
+export * from "./Helpers/FormConfirm.js";
 export * from "./Helpers/FormDrafts.js";
 export * from "./Helpers/FormStore.js";
 export * from "./Helpers/InputParamsHelpers.js";
+export * from "./Helpers/InputConditions.js";
+export * from "./Helpers/InputNarrowing.js";
+export * from "./Helpers/CrudNarrowPick.js";
+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";
 export * from "./Helpers/RequestCache.js";
 export * from "./Helpers/RichTextHelpers.js";
 export * from "./Helpers/RowsStore.js";
@@ -44,18 +66,24 @@ 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";
 export * from "./Interfaces/TableInterfaces.js";
 export * from "./Interfaces/ThemeInterfaces.js";
 export * from "./Interfaces/TypeInterfaces.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexus-shared",
-  "version": "3.2.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",
@@ -44,27 +44,38 @@
     "CHANGELOG.md"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
+    "build": "tsc -p tsconfig.build.json && tsc -p tsconfig.build.module-import.json",
     "typecheck": "tsc -p tsconfig.json",
     "test": "node scripts/test-all.mjs",
     "check:themes": "node scripts/check-themes.mjs",
     "test:api": "node scripts/test-api.mts",
     "test:proxy": "node scripts/test-api-proxy.mts",
     "test:chat": "node scripts/test-chat.mts",
+    "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",
     "test:excel": "node scripts/test-excel.mts",
+    "test:files": "node scripts/test-files.mts",
     "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",
+    "test:qr": "node scripts/test-qr-code.mts",
     "test:richtext": "node scripts/test-richtext.mts",
     "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.Avatar.css

@@ -1,5 +1,6 @@
 /*
- * A person's avatar, wherever one is drawn: the chat, a dropdown's avatar column, the admin bar.
+ * A person's avatar, wherever one is drawn: the chat, a dropdown's avatar column, the admin bar. Its tones also back an
+ * owner's initials in a picture with none (`.nx-picture--initials`, Nexus.Files.css), so a name has one tone everywhere.
  */
 @layer nexus.components {
   .nx-avatar {
@@ -29,19 +30,19 @@
     --nx-avatar-size: 44px;
   }
 
-  .nx-avatar[data-tone="primary"] {
+  :is(.nx-avatar, .nx-picture)[data-tone="primary"] {
     background: var(--nx-primary-soft);
   }
 
-  .nx-avatar[data-tone="info"] {
+  :is(.nx-avatar, .nx-picture)[data-tone="info"] {
     background: var(--nx-info-soft);
   }
 
-  .nx-avatar[data-tone="success"] {
+  :is(.nx-avatar, .nx-picture)[data-tone="success"] {
     background: var(--nx-success-soft);
   }
 
-  .nx-avatar[data-tone="warning"] {
+  :is(.nx-avatar, .nx-picture)[data-tone="warning"] {
     background: var(--nx-warning-soft);
   }
 

package/src/Styles/Nexus.Button.css

@@ -39,11 +39,11 @@
     vertical-align: 0;
   }
 
-  .nx-btn:hover:not(:disabled) {
+  .nx-btn:hover:not(:disabled, [aria-disabled="true"]) {
     background: var(--nx-btn-bg-hover);
   }
 
-  .nx-btn:active:not(:disabled) {
+  .nx-btn:active:not(:disabled, [aria-disabled="true"]) {
     transform: translateY(1px);
   }
 
@@ -52,12 +52,18 @@
     box-shadow: var(--nx-focus-ring);
   }
 
-  .nx-btn:disabled {
+  /* Unavailable. One marked `aria-disabled` looks the same and stays in the Tab order, so a press can say why; its ring
+     is drawn strong enough to read through the dimming. */
+  .nx-btn:is(:disabled, [aria-disabled="true"]) {
     cursor: not-allowed;
     opacity: 0.55;
     box-shadow: none;
   }
 
+  .nx-btn[aria-disabled="true"]:focus-visible {
+    box-shadow: 0 0 0 3px var(--nx-primary);
+  }
+
   .nx-btn[aria-busy="true"] {
     cursor: progress;
     opacity: 0.8;
@@ -120,7 +126,7 @@
       .nx-btn--hover-success,
       .nx-btn--hover-warning,
       .nx-btn--hover-info
-    ):is(:hover, :focus-visible):not(:disabled) {
+    ):is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) {
     --nx-btn-bg: var(--nx-btn-tone-soft);
     --nx-btn-bg-hover: var(--nx-btn-tone-soft);
     --nx-btn-border: var(--nx-btn-tone);
@@ -168,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.Choice.css

@@ -335,6 +335,22 @@
     border-color: var(--nx-danger);
   }
 
+  /*
+   * Tabs (`RadioGroup design="tabs"`): the options on a `TabButtons` track that wraps (`nx-tabs--wrap`), each chosen
+   * option raised; the chosen option's description on a line under the track, the others' in their tooltips. An
+   * invalid group edges the track in the danger colour.
+   */
+  .nx-choices--tabs[data-invalid] .nx-tabs {
+    --nx-tabs-track-border: var(--nx-danger);
+  }
+
+  .nx-choices__note {
+    margin: var(--nx-space-2) 0 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-field-label-font);
+    line-height: 1.4;
+  }
+
   [data-nx-motion="reduce"] .nx-choice__control,
   [data-nx-motion="reduce"] .nx-choice__control::before,
   [data-nx-motion="reduce"] .nx-choices--cards .nx-choice {