nexus-shared 3.0.0 → 3.2.0

package/dist/Services/ThemeService.d.ts

@@ -1,4 +1,4 @@
-import { type ThemeMode } from "../Interfaces/ThemeInterfaces.ts";
+import { type AnimationMode, type Density, type ScaleGrid, type ThemeMode } from "../Interfaces/ThemeInterfaces.ts";
 export interface ThemeState {
     /** The active theme id. */
     theme: string;
@@ -6,12 +6,28 @@ export interface ThemeState {
     mode: ThemeMode;
     /** The mode actually shown. */
     resolvedMode: "light" | "dark";
+    density: Density;
+    /** The chosen animations, which may be `system`. */
+    animations: AnimationMode;
+    /** Whether things move now: the choice, or the system setting under `system`. */
+    motion: boolean;
+    /** The scale grid; always `off` outside a development build. */
+    grid: ScaleGrid;
     setTheme: (theme: string) => void;
     setMode: (mode: ThemeMode) => void;
+    setDensity: (density: Density) => void;
+    setAnimations: (animations: AnimationMode) => void;
+    setGrid: (grid: ScaleGrid) => void;
 }
 /** Switches the theme on this page and saves it for the next visit. */
 export declare function setTheme(theme: string): void;
 /** Switches light, dark, or system on this page and saves it for the next visit. */
 export declare function setThemeMode(mode: ThemeMode): void;
-/** The current theme and mode, and functions to change them. */
+/** Switches compact or cozy on this page and saves it: every control and row follows at once. */
+export declare function setDensity(density: Density): void;
+/** Turns animations on, off, or back to the system setting on this page, and saves it. */
+export declare function setAnimations(animations: AnimationMode): void;
+/** Shows the scale grid (`px`, `cm`) or hides it (`off`), and saves it. Outside a development build it never shows. */
+export declare function setScaleGrid(grid: ScaleGrid): void;
+/** The current theme, mode, density, animations and scale grid, and functions to change them. */
 export declare function useTheme(): ThemeState;

package/dist/Services/ThemeService.js

@@ -1,11 +1,11 @@
 "use client";
 import { useSyncExternalStore } from "react";
-import { THEME_ID_PATTERN } from "../Helpers/ThemeHelpers.js";
-import { DEFAULT_THEME, THEME_ATTRIBUTE, THEME_MODE_ATTRIBUTE, THEME_MODE_STORAGE_KEY, THEME_STORAGE_KEY, } from "../Interfaces/ThemeInterfaces.js";
+import { isDevelopmentBuild, motionFor, REDUCED_MOTION_QUERY, THEME_ID_PATTERN } from "../Helpers/ThemeHelpers.js";
+import { ANIMATIONS_ATTRIBUTE, ANIMATIONS_STORAGE_KEY, DEFAULT_THEME, DENSITY_ATTRIBUTE, DENSITY_STORAGE_KEY, GRID_ATTRIBUTE, GRID_STORAGE_KEY, MOTION_ATTRIBUTE, THEME_ATTRIBUTE, THEME_MODE_ATTRIBUTE, THEME_MODE_STORAGE_KEY, THEME_STORAGE_KEY, } from "../Interfaces/ThemeInterfaces.js";
 const DARK_QUERY = "(prefers-color-scheme: dark)";
 // Before hydration there is no document; the real values follow right after.
-const SERVER_SNAPSHOT = `${DEFAULT_THEME} system light`;
-// Colors switch at once, instead of every button and border running its own transition.
+const SERVER_SNAPSHOT = `${DEFAULT_THEME} system light compact system full off`;
+// Colors and sizes switch at once, instead of every button and border running its own transition.
 function withoutTransitions(change) {
     const style = document.createElement("style");
     style.textContent = "*,*::before,*::after{transition:none!important}";
@@ -22,12 +22,33 @@ function save(key, value) {
         // Storage blocked (private mode, for example): the choice lasts until the page reloads.
     }
 }
+/** Sets an attribute on `<html>`, or takes it away for the choice that means "nothing chosen". */
+function mark(attribute, value, none) {
+    const root = document.documentElement;
+    if (value === none)
+        root.removeAttribute(attribute);
+    else
+        root.setAttribute(attribute, value);
+}
+const isMode = (value) => value === "light" || value === "dark" || value === "system";
+const isDensity = (value) => value === "compact" || value === "cozy";
+const isAnimations = (value) => value === "on" || value === "off" || value === "system";
+const isGrid = (value) => value === "off" || value === "px" || value === "cm";
 function applyTheme(theme) {
     withoutTransitions(() => document.documentElement.setAttribute(THEME_ATTRIBUTE, theme));
 }
 function applyMode(mode) {
-    const root = document.documentElement;
-    withoutTransitions(() => (mode === "system" ? root.removeAttribute(THEME_MODE_ATTRIBUTE) : root.setAttribute(THEME_MODE_ATTRIBUTE, mode)));
+    withoutTransitions(() => mark(THEME_MODE_ATTRIBUTE, mode, "system"));
+}
+function applyDensity(density) {
+    withoutTransitions(() => document.documentElement.setAttribute(DENSITY_ATTRIBUTE, density));
+}
+function applyAnimations(animations) {
+    mark(ANIMATIONS_ATTRIBUTE, animations, "system");
+    document.documentElement.setAttribute(MOTION_ATTRIBUTE, motionFor(animations, window.matchMedia(REDUCED_MOTION_QUERY).matches));
+}
+function applyGrid(grid) {
+    mark(GRID_ATTRIBUTE, isDevelopmentBuild() ? grid : "off", "off");
 }
 /** Switches the theme on this page and saves it for the next visit. */
 export function setTheme(theme) {
@@ -41,27 +62,63 @@ export function setThemeMode(mode) {
     applyMode(mode);
     save(THEME_MODE_STORAGE_KEY, mode);
 }
+/** Switches compact or cozy on this page and saves it: every control and row follows at once. */
+export function setDensity(density) {
+    if (!isDensity(density))
+        return;
+    applyDensity(density);
+    save(DENSITY_STORAGE_KEY, density);
+}
+/** Turns animations on, off, or back to the system setting on this page, and saves it. */
+export function setAnimations(animations) {
+    if (!isAnimations(animations))
+        return;
+    applyAnimations(animations);
+    save(ANIMATIONS_STORAGE_KEY, animations);
+}
+/** Shows the scale grid (`px`, `cm`) or hides it (`off`), and saves it. Outside a development build it never shows. */
+export function setScaleGrid(grid) {
+    if (!isGrid(grid))
+        return;
+    applyGrid(grid);
+    save(GRID_STORAGE_KEY, grid);
+}
 function readSnapshot() {
     const root = document.documentElement;
     const theme = root.getAttribute(THEME_ATTRIBUTE) || DEFAULT_THEME;
     const attribute = root.getAttribute(THEME_MODE_ATTRIBUTE);
     const mode = attribute === "light" || attribute === "dark" ? attribute : "system";
     const resolved = mode === "system" ? (window.matchMedia(DARK_QUERY).matches ? "dark" : "light") : mode;
-    return `${theme} ${mode} ${resolved}`;
+    const density = root.getAttribute(DENSITY_ATTRIBUTE) === "cozy" ? "cozy" : "compact";
+    const chosen = root.getAttribute(ANIMATIONS_ATTRIBUTE);
+    const animations = chosen === "on" || chosen === "off" ? chosen : "system";
+    // Read as the stylesheets read it; a page without ThemeScript has no attribute, and its animations run.
+    const motion = root.getAttribute(MOTION_ATTRIBUTE) === "reduce" ? "reduce" : "full";
+    const grid = root.getAttribute(GRID_ATTRIBUTE);
+    return `${theme} ${mode} ${resolved} ${density} ${animations} ${motion} ${grid === "px" || grid === "cm" ? grid : "off"}`;
 }
 // The attributes on <html> are the source of truth, so every picker on the page stays in step,
 // including changes made by the system setting or in another tab.
 function subscribe(onChange) {
     const observer = new MutationObserver(onChange);
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: [THEME_ATTRIBUTE, THEME_MODE_ATTRIBUTE] });
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: [THEME_ATTRIBUTE, THEME_MODE_ATTRIBUTE, DENSITY_ATTRIBUTE, ANIMATIONS_ATTRIBUTE, MOTION_ATTRIBUTE, GRID_ATTRIBUTE],
+    });
     const media = window.matchMedia(DARK_QUERY);
     media.addEventListener("change", onChange);
     const onStorage = (event) => {
-        if (event.key === THEME_STORAGE_KEY && event.newValue && THEME_ID_PATTERN.test(event.newValue))
-            applyTheme(event.newValue);
-        if (event.key === THEME_MODE_STORAGE_KEY && (event.newValue === "light" || event.newValue === "dark" || event.newValue === "system")) {
-            applyMode(event.newValue);
-        }
+        const value = event.newValue;
+        if (event.key === THEME_STORAGE_KEY && value && THEME_ID_PATTERN.test(value))
+            applyTheme(value);
+        else if (event.key === THEME_MODE_STORAGE_KEY && isMode(value))
+            applyMode(value);
+        else if (event.key === DENSITY_STORAGE_KEY && isDensity(value))
+            applyDensity(value);
+        else if (event.key === ANIMATIONS_STORAGE_KEY && isAnimations(value))
+            applyAnimations(value);
+        else if (event.key === GRID_STORAGE_KEY && isGrid(value))
+            applyGrid(value);
     };
     window.addEventListener("storage", onStorage);
     return () => {
@@ -70,14 +127,21 @@ function subscribe(onChange) {
         window.removeEventListener("storage", onStorage);
     };
 }
-/** The current theme and mode, and functions to change them. */
+/** The current theme, mode, density, animations and scale grid, and functions to change them. */
 export function useTheme() {
-    const [theme, mode, resolvedMode] = useSyncExternalStore(subscribe, readSnapshot, () => SERVER_SNAPSHOT).split(" ");
+    const [theme, mode, resolvedMode, density, animations, motion, grid] = useSyncExternalStore(subscribe, readSnapshot, () => SERVER_SNAPSHOT).split(" ");
     return {
         theme: theme ?? DEFAULT_THEME,
-        mode: (mode ?? "system"),
+        mode: isMode(mode) ? mode : "system",
         resolvedMode: resolvedMode === "dark" ? "dark" : "light",
+        density: density === "cozy" ? "cozy" : "compact",
+        animations: isAnimations(animations) ? animations : "system",
+        motion: motion !== "reduce",
+        grid: isGrid(grid) ? grid : "off",
         setTheme,
         setMode: setThemeMode,
+        setDensity,
+        setAnimations,
+        setGrid: setScaleGrid,
     };
 }

package/dist/Shared.Index.d.ts

@@ -14,7 +14,9 @@ export * from "./Helpers/ChatHelpers.ts";
 export * from "./Helpers/ChatStore.ts";
 export * from "./Helpers/ChatSummaries.ts";
 export * from "./Helpers/ClassHelpers.ts";
+export * from "./Helpers/CodeHelpers.ts";
 export * from "./Helpers/CrudBackend.ts";
+export * from "./Helpers/CrudColumns.ts";
 export * from "./Helpers/CrudHelpers.ts";
 export * from "./Helpers/DateHelpers.ts";
 export * from "./Helpers/DateTimeHelpers.ts";
@@ -30,9 +32,12 @@ export * from "./Helpers/MessageBuilder.ts";
 export * from "./Helpers/NepaliCalendar.ts";
 export * from "./Helpers/NumberHelpers.ts";
 export * from "./Helpers/Permissions.ts";
+export * from "./Helpers/RequestCache.ts";
 export * from "./Helpers/RichTextHelpers.ts";
 export * from "./Helpers/RowsStore.ts";
+export * from "./Helpers/TableFilters.ts";
 export * from "./Helpers/TableHelpers.ts";
+export * from "./Helpers/TableJoins.ts";
 export * from "./Helpers/TableStore.ts";
 export * from "./Helpers/ThemeHelpers.ts";
 export * from "./Helpers/TimeHelpers.ts";
@@ -46,6 +51,7 @@ export * from "./Interfaces/ExcelInterfaces.ts";
 export * from "./Interfaces/FormInterfaces.ts";
 export * from "./Interfaces/InputInterfaces.ts";
 export * from "./Interfaces/MessageInterfaces.ts";
+export * from "./Interfaces/PreferenceInterfaces.ts";
 export * from "./Interfaces/TableInterfaces.ts";
 export * from "./Interfaces/ThemeInterfaces.ts";
 export * from "./Interfaces/TypeInterfaces.ts";

package/dist/Shared.Index.js

@@ -17,7 +17,9 @@ export * from "./Helpers/ChatHelpers.js";
 export * from "./Helpers/ChatStore.js";
 export * from "./Helpers/ChatSummaries.js";
 export * from "./Helpers/ClassHelpers.js";
+export * from "./Helpers/CodeHelpers.js";
 export * from "./Helpers/CrudBackend.js";
+export * from "./Helpers/CrudColumns.js";
 export * from "./Helpers/CrudHelpers.js";
 export * from "./Helpers/DateHelpers.js";
 export * from "./Helpers/DateTimeHelpers.js";
@@ -33,9 +35,12 @@ export * from "./Helpers/MessageBuilder.js";
 export * from "./Helpers/NepaliCalendar.js";
 export * from "./Helpers/NumberHelpers.js";
 export * from "./Helpers/Permissions.js";
+export * from "./Helpers/RequestCache.js";
 export * from "./Helpers/RichTextHelpers.js";
 export * from "./Helpers/RowsStore.js";
+export * from "./Helpers/TableFilters.js";
 export * from "./Helpers/TableHelpers.js";
+export * from "./Helpers/TableJoins.js";
 export * from "./Helpers/TableStore.js";
 export * from "./Helpers/ThemeHelpers.js";
 export * from "./Helpers/TimeHelpers.js";
@@ -50,6 +55,7 @@ export * from "./Interfaces/ExcelInterfaces.js";
 export * from "./Interfaces/FormInterfaces.js";
 export * from "./Interfaces/InputInterfaces.js";
 export * from "./Interfaces/MessageInterfaces.js";
+export * from "./Interfaces/PreferenceInterfaces.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.0.0",
+  "version": "3.2.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",
@@ -49,7 +49,9 @@
     "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: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",
@@ -67,7 +69,7 @@
     "test:types": "tsc -p scripts/type-checks/tsconfig.json"
   },
   "dependencies": {
-    "nexus-icons": "^1.1.0"
+    "nexus-icons": "^1.2.0"
   },
   "peerDependencies": {
     "react": ">=19",

package/src/Styles/Nexus.Avatar.css

@@ -0,0 +1,79 @@
+/*
+ * A person's avatar, wherever one is drawn: the chat, a dropdown's avatar column, the admin bar.
+ */
+@layer nexus.components {
+  .nx-avatar {
+    position: relative;
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: var(--nx-avatar-size, 28px);
+    height: var(--nx-avatar-size, 28px);
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+    border-radius: 50%;
+    background: color-mix(in oklab, var(--nx-text) 10%, var(--nx-surface));
+    color: var(--nx-text);
+    font: inherit;
+    font-size: max(8px, calc(var(--nx-avatar-size, 28px) * 0.4));
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  .nx-avatar--sm {
+    --nx-avatar-size: 22px;
+  }
+
+  .nx-avatar--lg {
+    --nx-avatar-size: 44px;
+  }
+
+  .nx-avatar[data-tone="primary"] {
+    background: var(--nx-primary-soft);
+  }
+
+  .nx-avatar[data-tone="info"] {
+    background: var(--nx-info-soft);
+  }
+
+  .nx-avatar[data-tone="success"] {
+    background: var(--nx-success-soft);
+  }
+
+  .nx-avatar[data-tone="warning"] {
+    background: var(--nx-warning-soft);
+  }
+
+  .nx-avatar img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* A picture that can be changed: hovering or focusing it lays a camera over it. Opacity alone, no animation. */
+  button.nx-avatar {
+    cursor: pointer;
+  }
+
+  button.nx-avatar:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-avatar__veil {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    background: rgb(16 24 40 / 0.55);
+    color: #fff;
+    opacity: 0;
+  }
+
+  button.nx-avatar:is(:hover, :focus-visible) .nx-avatar__veil {
+    opacity: 1;
+  }
+}

package/src/Styles/Nexus.Base.css

@@ -33,6 +33,20 @@
     outline-offset: 2px;
   }
 
+  /*
+   * One scroll bar for every scroller, the design lab's: thin and quiet, a thumb of the text colour at 22% on no
+   * track. On Windows, Chrome and Edge draw it 10px wide with small arrows and darken the thumb under the pointer
+   * themselves, and Firefox's thin bar is 8px; Safari, which has no `scrollbar-color` yet, draws its own thin bar.
+   * `scrollbar-width` is not inherited, so it is set on every element, and a gutter kept with `scrollbar-gutter` is as
+   * wide as the bar it waits for. There is no `::-webkit-scrollbar` here because Chrome, Edge and Safari ignore it on an
+   * element that sets `scrollbar-width`. A component that needs another look sets the two properties on its own
+   * scroller. With forced colours the browser puts the system's colours back.
+   */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklab, var(--nx-text) 22%, transparent) transparent;
+  }
+
   /* Hidden on screen but still read by screen readers and reachable with the keyboard. */
   .nx-visually-hidden {
     position: absolute;
@@ -62,9 +76,42 @@
     }
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .nx-spin {
-      animation-duration: 2.4s;
-    }
+  /* A spinner says something is still happening, so with animations off it turns slowly rather than stopping. */
+  [data-nx-motion="reduce"] .nx-spin {
+    animation-duration: 2.4s;
+  }
+
+  /*
+   * The scale grid, a development tool from the theme panel: a ruled sheet over the whole window, so an edge one pixel
+   * out is seen rather than argued about. `px` rules every 4px with a solid line every 48px; `cm` rules millimetres
+   * with the centimetre solid. Lines start on the window's edge, so every reading counts from there. It takes no
+   * clicks and moves nothing; popups and menus sit in the top layer, above it. ThemeScript sets it in a development
+   * build only. The lines mix the text colour, so they read on all seven themes in both modes.
+   */
+  [data-nx-grid] body::after {
+    --nx-grid-minor: color-mix(in oklab, var(--nx-text) 14%, transparent);
+    --nx-grid-major: color-mix(in oklab, var(--nx-text) 34%, transparent);
+
+    position: fixed;
+    inset: 0;
+    z-index: 2147483000;
+    pointer-events: none;
+    content: "";
+  }
+
+  [data-nx-grid="px"] body::after {
+    background-image:
+      repeating-linear-gradient(to right, var(--nx-grid-major) 0 1px, transparent 1px 48px),
+      repeating-linear-gradient(to bottom, var(--nx-grid-major) 0 1px, transparent 1px 48px),
+      repeating-linear-gradient(to right, var(--nx-grid-minor) 0 1px, transparent 1px 4px),
+      repeating-linear-gradient(to bottom, var(--nx-grid-minor) 0 1px, transparent 1px 4px);
+  }
+
+  [data-nx-grid="cm"] body::after {
+    background-image:
+      repeating-linear-gradient(to right, var(--nx-grid-major) 0 1px, transparent 1px 1cm),
+      repeating-linear-gradient(to bottom, var(--nx-grid-major) 0 1px, transparent 1px 1cm),
+      repeating-linear-gradient(to right, var(--nx-grid-minor) 0 1px, transparent 1px 1mm),
+      repeating-linear-gradient(to bottom, var(--nx-grid-minor) 0 1px, transparent 1px 1mm);
   }
 }

package/src/Styles/Nexus.Button.css

@@ -150,4 +150,31 @@
     display: flex;
     width: 100%;
   }
+
+  /* Something new behind the button (red), or a state that is on (primary): a dot on its corner, ringed in the
+     surface so it reads over the icon. */
+  .nx-btn:has(> .nx-btn__dot) {
+    position: relative;
+  }
+
+  .nx-btn__dot {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 7px;
+    height: 7px;
+    border: 1.5px solid var(--nx-surface);
+    border-radius: 50%;
+    background: var(--nx-danger-solid);
+  }
+
+  .nx-btn__dot[data-tone="primary"] {
+    background: var(--nx-primary-solid);
+  }
+
+  /* A small icon sits nearer the corner: the dot moves into it, clear of a narrow icon such as ⋮. */
+  .nx-btn--icon.nx-btn--sm > .nx-btn__dot {
+    top: 3px;
+    right: 3px;
+  }
 }

package/src/Styles/Nexus.Calendar.css

@@ -265,11 +265,9 @@
     color: var(--nx-field-accent);
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .nx-cal__day,
-    .nx-cal__nav,
-    .nx-cal__select {
-      transition: none;
-    }
+  [data-nx-motion="reduce"] .nx-cal__day,
+  [data-nx-motion="reduce"] .nx-cal__nav,
+  [data-nx-motion="reduce"] .nx-cal__select {
+    transition: none;
   }
 }

package/src/Styles/Nexus.Chat.css

@@ -112,7 +112,7 @@
 
   .nx-chat-panel {
     --nx-chat-height: min(60vh, 520px);
-    --nx-chat-avatar: 28px;
+    --nx-avatar-size: 28px;
 
     container-type: inline-size;
     display: flex;
@@ -787,50 +787,6 @@
 
   /* The people */
 
-  .nx-chat-avatar {
-    position: relative;
-    display: inline-grid;
-    flex-shrink: 0;
-    place-items: center;
-    width: var(--nx-chat-avatar, 28px);
-    height: var(--nx-chat-avatar, 28px);
-    overflow: hidden;
-    border-radius: 50%;
-    background: color-mix(in oklab, var(--nx-text) 10%, var(--nx-surface));
-    color: var(--nx-text);
-    font-size: max(9px, calc(var(--nx-chat-avatar, 28px) * 0.4));
-    font-weight: 600;
-    line-height: 1;
-  }
-
-  .nx-chat-avatar--sm {
-    --nx-chat-avatar: 22px;
-  }
-
-  .nx-chat-avatar[data-tone="primary"] {
-    background: var(--nx-primary-soft);
-  }
-
-  .nx-chat-avatar[data-tone="info"] {
-    background: var(--nx-info-soft);
-  }
-
-  .nx-chat-avatar[data-tone="success"] {
-    background: var(--nx-success-soft);
-  }
-
-  .nx-chat-avatar[data-tone="warning"] {
-    background: var(--nx-warning-soft);
-  }
-
-  .nx-chat-avatar img {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
   .nx-chat-people {
     display: flex;
     flex-direction: column;
@@ -1215,8 +1171,8 @@
     display: grid;
     flex-shrink: 0;
     place-items: center;
-    width: var(--nx-chat-avatar, 28px);
-    height: var(--nx-chat-avatar, 28px);
+    width: var(--nx-avatar-size, 28px);
+    height: var(--nx-avatar-size, 28px);
     border-radius: 50%;
     background: var(--nx-surface-2);
     color: var(--nx-text-muted);
@@ -1481,9 +1437,7 @@
     }
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .nx-chat-btn {
-      transition: none;
-    }
+  [data-nx-motion="reduce"] .nx-chat-btn {
+    transition: none;
   }
 }

package/src/Styles/Nexus.Choice.css

@@ -335,11 +335,9 @@
     border-color: var(--nx-danger);
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .nx-choice__control,
-    .nx-choice__control::before,
-    .nx-choices--cards .nx-choice {
-      transition: none;
-    }
+  [data-nx-motion="reduce"] .nx-choice__control,
+  [data-nx-motion="reduce"] .nx-choice__control::before,
+  [data-nx-motion="reduce"] .nx-choices--cards .nx-choice {
+    transition: none;
   }
 }

package/src/Styles/Nexus.Crud.css

@@ -26,15 +26,6 @@
     gap: var(--nx-space-3);
   }
 
-  .nx-crud-details__note {
-    display: flex;
-    align-items: center;
-    gap: var(--nx-space-2);
-    margin: 0;
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-sm);
-  }
-
   .nx-crud-details__list {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
@@ -59,11 +50,27 @@
   }
 
   .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);
   }
 
+  /* A field only the full record has, when that record could not be loaded. */
+  .nx-crud-details__missing {
+    color: var(--nx-text-muted);
+  }
+
+  /*
+   * The details popup's footer is a form's bar (Nexus.Form.css): its status line on the left - "Loading…" for a slow
+   * record, "Not all fields loaded." for one that failed - and Edit and Close on the right. The line takes only the room
+   * the buttons leave, not a form's 14rem, so the bar stays one row on a phone and what it says never moves anything.
+   */
+  .nx-crud-details__foot > .nx-form-status {
+    flex-basis: 0;
+  }
+
   /* No list the user may see. */
   .nx-crud--denied {
     display: flex;