nexus-shared 3.2.0 → 4.0.0

package/dist/Services/JoinSources.d.ts

@@ -6,8 +6,18 @@ import type { TableJoinSource, TableJoinedRecord } from "../Interfaces/TableInte
  * A join's source as the table calls it. An endpoint becomes one that POSTs the keys to it as an array and reads the
  * records it answers - a Nexus controller's `findListing` - made once per endpoint, so every table and picker naming it
  * shares one source and so one cache. A source of the page's own is used as it is.
+ *
+ * `key` is the field the records answered are filed under, `id` unless told: one whose values are another field (a
+ * person's account, which their company row carries beside its own key) is a source of its own, kept apart.
+ */
+export declare function joinSource(source: ApiEndpoint | TableJoinSource, backend?: CrudBackend, key?: string): TableJoinSource;
+/**
+ * The record a `findListing` answered for a key, or one the page remembered there (`TableJoins.remember`), at once and
+ * with no call, while it is fresh: `undefined` while it is not in, and once it was marked old (a save on that controller,
+ * a Reload), so a picker asks again and shows the record as it is now. A picker over that controller's records names a
+ * value with it (`peekOption`), and so does a CRUD's save, which takes an old one too (`aged`) over no name at all.
  */
-export declare function joinSource(source: ApiEndpoint | TableJoinSource, backend?: CrudBackend): TableJoinSource;
+export declare function peekFound(findListing: ApiEndpoint, key: string, aged?: boolean): TableJoinedRecord | undefined;
 /** The controller a picker offers records from: any with an `activeListing` and a `findListing` (`MODULES.controller(...)`). */
 export interface PickerController {
     activeListing: ApiEndpoint;
@@ -19,14 +29,33 @@ export interface CrudPickerOptions {
     labelKey: string;
     /** A field shown under it, such as the parent's name: `"regionName"` under a sub-region. */
     descriptionKey?: string;
-    /** The field that holds the key. Default `id`. */
+    /**
+     * The field that holds the value. Default `id`: the records' own key, which is what the controller's `findListing`
+     * takes. Another field - a person's account (`userId`), which their company row carries beside its own key - needs
+     * `find` for the values the kept list does not offer.
+     */
     valueKey?: string;
+    /**
+     * Where a value the kept list does not offer is looked up when `valueKey` is not `id`: an endpoint that takes such
+     * values, POSTed as an array as `findListing` takes keys, and answers the records, each read by its `valueKey` field;
+     * or a source of the page's own. Its answers are kept apart from `findListing`'s and marked old with them, after a save
+     * on the controller. Without it such a value is never looked up - `findListing` could not answer it - so a form names it
+     * from the record it holds (`selectedOptions`), or it shows as not found.
+     */
+    find?: ApiEndpoint | TableJoinSource;
+    /**
+     * The query parameter the controller's `activeListing` narrows by on the server, for a picker another input narrows
+     * (`narrowedBy`): `"subscriptionGroupId"` asks `...?subscriptionGroupId={the group}` and keeps each answer apart. Without
+     * it, the whole list is read once and narrowed in the browser by the records' own field (`narrowedBy.key`).
+     */
+    narrowQuery?: string;
     backend?: CrudBackend;
 }
 /** The dropdown params `crudPicker` gives: spread them into a dropdown's input. */
 export interface CrudPickerParams {
     loadOptions: (request: DropdownPageRequest) => Promise<DropdownPage<TableJoinedRecord>>;
     resolveOptions: (values: OptionValue[]) => Promise<readonly TableJoinedRecord[]>;
+    peekOption: (key: string, aged?: boolean) => TableJoinedRecord | undefined;
     valueKey: string;
     labelKey: string;
     descriptionKey?: string;
@@ -37,12 +66,15 @@ export interface CrudPickerParams {
  * for every form on the page (the owner's caching rule: a second dropdown, or an Add row, never asks again), searched
  * and paged in the browser. A value the form already holds that the list does not offer - a parent since trashed - is
  * found through `findListing`, sharing the calls and answers of the tables' joins, and shows tagged, never offered again.
+ * A value that is not the records' key (`valueKey`) is found through the picker's own `find` instead.
  *
- * @example { type: "dropdown", name: "regionId", label: "Region", required: true, ...crudPicker(REGIONS, { labelKey: "regionName" }) }
+ * @example { type: EInputTypes.Dropdown, name: "regionId", label: "Region", required: true, ...crudPicker(REGIONS, { labelKey: "regionName" }) }
+ * @example crudPicker(COMPANY_USERS, { labelKey: "fullname", valueKey: "userId", find: COMPANY_USERS_BY_ACCOUNT })
  */
-export declare function crudPicker(controller: PickerController, { labelKey, descriptionKey, valueKey, backend }: CrudPickerOptions): CrudPickerParams;
+export declare function crudPicker(controller: PickerController, { labelKey, descriptionKey, valueKey, find, narrowQuery, backend }: CrudPickerOptions): CrudPickerParams;
 /**
  * Marks what the page looked up from a controller as old, after a write there may have changed it: the records its
- * `findListing` named, and the list its picker offers. Drawn as they are until the next ask brings the new ones.
+ * `findListing` named and its pickers' own finds answered, and the list its picker offers. Drawn as they are until the
+ * next ask brings the new ones.
  */
 export declare function expireLookups(controller: Partial<PickerController>): void;

package/dist/Services/JoinSources.js

@@ -1,26 +1,36 @@
 import { isApiEndpoint } from "../Helpers/ApiRoutes.js";
 import { getCrudBackend } from "../Helpers/CrudBackend.js";
 import { filterItems } from "../Helpers/DropdownHelpers.js";
-import { joinSourceName, tableJoins } from "../Helpers/TableJoins.js";
+import { JOIN_LIFETIME, joinSourceName, tableJoins } from "../Helpers/TableJoins.js";
 import { api } from "./BrowserApi.js";
 /*
  * The browser's half of a join: the call that looks records up, and a picker that shares what it looked up. The cache
  * itself (`tableJoins`) knows nothing of the API; this is where an endpoint becomes a source it can call.
  */
 const made = new Map();
+/** The sources of the pickers' own finds (`crudPicker` `find`), by the name of the `findListing` of their controller. */
+const finds = new Map();
+/** The lists a picker asked the server for, one per narrowing value (`narrowQuery`), by the name of their whole list. */
+const narrowedLists = new Map();
+/** A field with no value: what `narrow.orUnset` adds to a narrowed list. */
+const unset = (value) => value === null || value === undefined || value === "";
 /**
  * A join's source as the table calls it. An endpoint becomes one that POSTs the keys to it as an array and reads the
  * records it answers - a Nexus controller's `findListing` - made once per endpoint, so every table and picker naming it
  * shares one source and so one cache. A source of the page's own is used as it is.
+ *
+ * `key` is the field the records answered are filed under, `id` unless told: one whose values are another field (a
+ * person's account, which their company row carries beside its own key) is a source of its own, kept apart.
  */
-export function joinSource(source, backend = getCrudBackend()) {
+export function joinSource(source, backend = getCrudBackend(), key = "id") {
     if (!isApiEndpoint(source))
         return source;
-    const name = joinSourceName(source);
+    const name = key === "id" ? joinSourceName(source) : `${joinSourceName(source)} by ${key}`;
     let found = made.get(name);
     if (!found) {
         found = {
             name,
+            ...(key !== "id" && { key }),
             async load(keys, signal) {
                 const answer = await api.send(source, { body: keys, signal, toast: false });
                 if (!answer.ok)
@@ -32,30 +42,87 @@ export function joinSource(source, backend = getCrudBackend()) {
     }
     return found;
 }
+/** What a source answered for a key, fresh, or - `aged` - also once it was marked old. */
+function peekSource(name, key, aged) {
+    if (!aged)
+        return tableJoins.peekFresh(name, key);
+    const state = tableJoins.peek(name, key);
+    return state.status === "ready" ? state.record : undefined;
+}
+/**
+ * The record a `findListing` answered for a key, or one the page remembered there (`TableJoins.remember`), at once and
+ * with no call, while it is fresh: `undefined` while it is not in, and once it was marked old (a save on that controller,
+ * a Reload), so a picker asks again and shows the record as it is now. A picker over that controller's records names a
+ * value with it (`peekOption`), and so does a CRUD's save, which takes an old one too (`aged`) over no name at all.
+ */
+export function peekFound(findListing, key, aged = false) {
+    return peekSource(joinSourceName(findListing), key, aged);
+}
 /**
  * A dropdown of a controller's usable records, for picking a parent in a form: the `activeListing` read once and kept
  * for every form on the page (the owner's caching rule: a second dropdown, or an Add row, never asks again), searched
  * and paged in the browser. A value the form already holds that the list does not offer - a parent since trashed - is
  * found through `findListing`, sharing the calls and answers of the tables' joins, and shows tagged, never offered again.
+ * A value that is not the records' key (`valueKey`) is found through the picker's own `find` instead.
  *
- * @example { type: "dropdown", name: "regionId", label: "Region", required: true, ...crudPicker(REGIONS, { labelKey: "regionName" }) }
+ * @example { type: EInputTypes.Dropdown, name: "regionId", label: "Region", required: true, ...crudPicker(REGIONS, { labelKey: "regionName" }) }
+ * @example crudPicker(COMPANY_USERS, { labelKey: "fullname", valueKey: "userId", find: COMPANY_USERS_BY_ACCOUNT })
  */
-export function crudPicker(controller, { labelKey, descriptionKey, valueKey = "id", backend = getCrudBackend() }) {
+export function crudPicker(controller, { labelKey, descriptionKey, valueKey = "id", find, narrowQuery, backend = getCrudBackend() }) {
     const listName = joinSourceName(controller.activeListing);
+    // Where a value the kept list does not offer is looked up: `findListing` while the values are the records' keys, the
+    // picker's own find for another field, and nowhere without one.
+    const lookup = find ? joinSource(find, backend, valueKey) : valueKey === "id" ? joinSource(controller.findListing, backend) : null;
+    if (find && lookup) {
+        // Marked old with the controller's own lookups, after a save there (`expireLookups`).
+        const beside = joinSourceName(controller.findListing);
+        const kept = finds.get(beside) ?? new Set();
+        kept.add(lookup.name);
+        finds.set(beside, kept);
+    }
     // The words a person reads, not the key: a Nexus key is an encrypted token, and a search would find letters in it.
     const searchKeys = descriptionKey ? [labelKey, descriptionKey] : [labelKey];
-    const loadList = (signal) => api.send(controller.activeListing, { signal, toast: false }).then(answer => {
+    const loadList = (signal, query) => api.send(controller.activeListing, { signal, toast: false, ...(query && { query }) }).then(answer => {
         if (!answer.ok)
             throw new Error(answer.message ?? "The list could not be loaded.");
         return backend.readList(answer.result);
     });
+    /** The options narrowed by another input's value (`narrowedBy`): asked of the server by `narrowQuery`, else the kept list's. */
+    const narrowedList = async ({ key, value, orUnset }) => {
+        // The server narrows by a value; which records it adds for `orUnset` is its endpoint's rule.
+        if (narrowQuery && value !== null) {
+            const name = `${listName}?${narrowQuery}=${String(value)}`;
+            const kept = narrowedLists.get(listName) ?? new Set();
+            kept.add(name);
+            narrowedLists.set(listName, kept);
+            return tableJoins.list(name, signal => loadList(signal, { [narrowQuery]: String(value) }));
+        }
+        const all = await tableJoins.list(listName, loadList);
+        return all.filter(row => (value !== null && String(row[key]) === String(value)) || (orUnset && unset(row[key])));
+    };
     return {
-        async loadOptions({ search, skip, pageSize }) {
-            const all = await tableJoins.list(listName, loadList);
+        async loadOptions({ search, skip, pageSize, narrow }) {
+            const all = narrow ? await narrowedList(narrow) : await tableJoins.list(listName, loadList);
             const matches = search ? filterItems(all, search, searchKeys) : all;
             return { items: matches.slice(skip, skip + pageSize), total: matches.length, hasMore: skip + pageSize < matches.length };
         },
-        resolveOptions: values => tableJoins.records(joinSource(controller.findListing, backend), values.map(String)),
+        // A saved value the kept list offers is named from it, with no call (a form opened on a tree's country); only one it
+        // does not offer - a parent since trashed - is looked up.
+        async resolveOptions(values) {
+            const keys = values.map(String);
+            const kept = tableJoins.peekList(listName) ?? [];
+            const found = kept.filter(row => keys.includes(String(row[valueKey])));
+            const missing = keys.filter(key => !found.some(row => String(row[valueKey]) === key));
+            if (missing.length === 0 || !lookup)
+                return found;
+            return [...found, ...(await tableJoins.records(lookup, missing))];
+        },
+        // The same at once, from what the page holds: a box named on its first draw, a saved record named with no call. Only
+        // what is fresh, unless an old record is asked for: a save names a value with one rather than with nothing.
+        peekOption(key, aged = false) {
+            const kept = tableJoins.peekList(listName, aged ? Infinity : JOIN_LIFETIME)?.find(row => String(row[valueKey]) === key);
+            return kept ?? (lookup ? peekSource(lookup.name, key, aged) : undefined);
+        },
         valueKey,
         labelKey,
         ...(descriptionKey && { descriptionKey }),
@@ -64,11 +131,20 @@ export function crudPicker(controller, { labelKey, descriptionKey, valueKey = "i
 }
 /**
  * Marks what the page looked up from a controller as old, after a write there may have changed it: the records its
- * `findListing` named, and the list its picker offers. Drawn as they are until the next ask brings the new ones.
+ * `findListing` named and its pickers' own finds answered, and the list its picker offers. Drawn as they are until the
+ * next ask brings the new ones.
  */
 export function expireLookups(controller) {
-    if (controller.findListing)
-        tableJoins.expire(joinSourceName(controller.findListing));
-    if (controller.activeListing)
-        tableJoins.expireList(joinSourceName(controller.activeListing));
+    if (controller.findListing) {
+        const name = joinSourceName(controller.findListing);
+        tableJoins.expire(name);
+        for (const other of finds.get(name) ?? [])
+            tableJoins.expire(other);
+    }
+    if (controller.activeListing) {
+        const name = joinSourceName(controller.activeListing);
+        tableJoins.expireList(name);
+        for (const narrowed of narrowedLists.get(name) ?? [])
+            tableJoins.expireList(narrowed);
+    }
 }

package/dist/Services/ModuleImport.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Imports an ES module by its full address, as the browser does, never through the app's bundler: a module a server
+ * serves at a versioned address (the image editor from the Nexus Drive).
+ *
+ * @example const editor = await importModule<ImageEditorModule>("https://drive.example/Assets/File/nexus-image-editor.3f2a.js");
+ */
+export declare function importModule<TModule>(url: string): Promise<TModule>;

package/dist/Services/ModuleImport.js

@@ -0,0 +1,22 @@
+/*
+ * The one dynamic `import()` of an address known only at run time, kept alone in this file on purpose.
+ *
+ * The package build rewrites "./Button.tsx" to "./Button.js" (`rewriteRelativeImportExtensions`), and for an `import()`
+ * of a variable it does so at run time: it wraps the address in a helper call, `import(helper(url))`. The bundler-ignore
+ * comments are then inside a call, so Next's Turbopack no longer leaves the import alone: it compiles it to "Cannot find
+ * module as expression is too dynamic", and the image editor never loads in an app's production build. This file imports
+ * nothing, so it is built a second time without that rewrite (`tsconfig.build.module-import.json`, after the main build,
+ * in `npm run build`), and the published file keeps the plain `import(/* webpackIgnore: true *\/ ... url)` that webpack,
+ * Turbopack and Vite all leave to the browser. `scripts/test-dist-loader.mts` (in `npm test`) fails if it ever does not.
+ *
+ * Add no import to this file: the second build would leave a "./x.ts" in it unrewritten.
+ */
+/**
+ * Imports an ES module by its full address, as the browser does, never through the app's bundler: a module a server
+ * serves at a versioned address (the image editor from the Nexus Drive).
+ *
+ * @example const editor = await importModule<ImageEditorModule>("https://drive.example/Assets/File/nexus-image-editor.3f2a.js");
+ */
+export function importModule(url) {
+    return import(/* webpackIgnore: true */ /* turbopackIgnore: true */ /* @vite-ignore */ url);
+}

package/dist/Shared.Index.d.ts

@@ -1,7 +1,9 @@
 export * from "./Components/Documents/Button.tsx";
+export * from "./Components/Documents/PrintDocument.tsx";
 export * from "./Components/Inputs/Field.tsx";
 export * from "./Components/Layouts/ThemeScript.tsx";
 export * from "./Components/Viewers/MarkdownView.tsx";
+export * from "./Components/Viewers/QrCodeImage.tsx";
 export * from "./Components/Viewers/RichTextView.tsx";
 export * from "./Helpers/ApiClient.ts";
 export * from "./Helpers/ApiFormHelpers.ts";
@@ -17,21 +19,33 @@ export * from "./Helpers/ClassHelpers.ts";
 export * from "./Helpers/CodeHelpers.ts";
 export * from "./Helpers/CrudBackend.ts";
 export * from "./Helpers/CrudColumns.ts";
+export * from "./Helpers/CrudDetailsTabs.ts";
 export * from "./Helpers/CrudHelpers.ts";
 export * from "./Helpers/DateHelpers.ts";
 export * from "./Helpers/DateTimeHelpers.ts";
 export * from "./Helpers/DropdownHelpers.ts";
 export * from "./Helpers/ExcelBackend.ts";
 export * from "./Helpers/ExcelHelpers.ts";
+export * from "./Helpers/FileAdapter.ts";
+export * from "./Helpers/FilePrimaries.ts";
+export * from "./Helpers/NexusDriveAdapter.ts";
+export * from "./Helpers/FormConfirm.ts";
 export * from "./Helpers/FormDrafts.ts";
 export * from "./Helpers/FormStore.ts";
 export * from "./Helpers/InputParamsHelpers.ts";
+export * from "./Helpers/InputConditions.ts";
+export * from "./Helpers/InputNarrowing.ts";
+export * from "./Helpers/CrudNarrowPick.ts";
+export * from "./Helpers/CrudScopes.ts";
+export * from "./Helpers/CrudRowForms.ts";
 export * from "./Helpers/MarkdownEditing.ts";
 export * from "./Helpers/MarkdownHelpers.ts";
 export * from "./Helpers/MessageBuilder.ts";
 export * from "./Helpers/NepaliCalendar.ts";
 export * from "./Helpers/NumberHelpers.ts";
 export * from "./Helpers/Permissions.ts";
+export * from "./Helpers/QrCode.ts";
+export * from "./Helpers/RecordCards.ts";
 export * from "./Helpers/RequestCache.ts";
 export * from "./Helpers/RichTextHelpers.ts";
 export * from "./Helpers/RowsStore.ts";
@@ -48,10 +62,12 @@ export * from "./Interfaces/ChatInterfaces.ts";
 export * from "./Interfaces/CrudInterfaces.ts";
 export * from "./Interfaces/DateInterfaces.ts";
 export * from "./Interfaces/ExcelInterfaces.ts";
+export * from "./Interfaces/FileInterfaces.ts";
 export * from "./Interfaces/FormInterfaces.ts";
 export * from "./Interfaces/InputInterfaces.ts";
 export * from "./Interfaces/MessageInterfaces.ts";
 export * from "./Interfaces/PreferenceInterfaces.ts";
+export * from "./Interfaces/RecordInterfaces.ts";
 export * from "./Interfaces/TableInterfaces.ts";
 export * from "./Interfaces/ThemeInterfaces.ts";
 export * from "./Interfaces/TypeInterfaces.ts";

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";
@@ -20,21 +22,33 @@ export * from "./Helpers/ClassHelpers.js";
 export * from "./Helpers/CodeHelpers.js";
 export * from "./Helpers/CrudBackend.js";
 export * from "./Helpers/CrudColumns.js";
+export * from "./Helpers/CrudDetailsTabs.js";
 export * from "./Helpers/CrudHelpers.js";
 export * from "./Helpers/DateHelpers.js";
 export * from "./Helpers/DateTimeHelpers.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/MessageBuilder.js";
 export * from "./Helpers/NepaliCalendar.js";
 export * from "./Helpers/NumberHelpers.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";
@@ -52,10 +66,12 @@ export * from "./Interfaces/ChatInterfaces.js";
 export * from "./Interfaces/CrudInterfaces.js";
 export * from "./Interfaces/DateInterfaces.js";
 export * from "./Interfaces/ExcelInterfaces.js";
+export * from "./Interfaces/FileInterfaces.js";
 export * from "./Interfaces/FormInterfaces.js";
 export * from "./Interfaces/InputInterfaces.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.0.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,23 +44,28 @@
     "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: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: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",

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);

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 {