nexus-shared 3.1.0 → 4.0.0

package/package.json

@@ -1,85 +1,92 @@
-{
-  "name": "nexus-shared",
-  "version": "3.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",
-    "nextjs",
-    "components",
-    "ui",
-    "forms",
-    "datatable",
-    "crud",
-    "inputs",
-    "design-system",
-    "typescript",
-    "nepali-calendar",
-    "nexus"
-  ],
-  "license": "MIT",
-  "author": "Bijay Adhikari",
-  "type": "module",
-  "sideEffects": [
-    "*.css"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/Shared.Index.d.ts",
-      "default": "./dist/Shared.Index.js"
-    },
-    "./client": {
-      "types": "./dist/Client.Index.d.ts",
-      "default": "./dist/Client.Index.js"
-    },
-    "./server": {
-      "types": "./dist/Server.Index.d.ts",
-      "default": "./dist/Server.Index.js"
-    },
-    "./styles.css": "./src/Styles/Nexus.Index.css",
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist",
-    "src/Styles",
-    "CHANGELOG.md"
-  ],
-  "scripts": {
-    "build": "tsc -p tsconfig.build.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:chat": "node scripts/test-chat.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:dropdown": "node scripts/test-dropdown-helpers.mts",
-    "test:forms": "node scripts/test-form-store.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: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:tree": "node scripts/test-tree-store.mts",
-    "test:types": "tsc -p scripts/type-checks/tsconfig.json"
-  },
-  "dependencies": {
-    "nexus-icons": "^1.1.0"
-  },
-  "peerDependencies": {
-    "react": ">=19",
-    "react-dom": ">=19"
-  },
-  "devDependencies": {
-    "@types/react": "19.3.0"
-  },
-  "engines": {
-    "node": ">=20.9"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "nexus-shared",
+  "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",
+    "nextjs",
+    "components",
+    "ui",
+    "forms",
+    "datatable",
+    "crud",
+    "inputs",
+    "design-system",
+    "typescript",
+    "nepali-calendar",
+    "nexus"
+  ],
+  "license": "MIT",
+  "author": "Bijay Adhikari",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/Shared.Index.d.ts",
+      "default": "./dist/Shared.Index.js"
+    },
+    "./client": {
+      "types": "./dist/Client.Index.d.ts",
+      "default": "./dist/Client.Index.js"
+    },
+    "./server": {
+      "types": "./dist/Server.Index.d.ts",
+      "default": "./dist/Server.Index.js"
+    },
+    "./styles.css": "./src/Styles/Nexus.Index.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src/Styles",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "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",
+    "test:times": "node scripts/test-time-helpers.mts",
+    "test:tree": "node scripts/test-tree-store.mts",
+    "test:types": "tsc -p scripts/type-checks/tsconfig.json"
+  },
+  "dependencies": {
+    "nexus-icons": "^1.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@types/react": "19.3.0"
+  },
+  "engines": {
+    "node": ">=20.9"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/Styles/Nexus.Avatar.css

@@ -1,79 +1,80 @@
-/*
- * 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;
-  }
-}
+/*
+ * 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 {
+    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;
+  }
+
+  :is(.nx-avatar, .nx-picture)[data-tone="primary"] {
+    background: var(--nx-primary-soft);
+  }
+
+  :is(.nx-avatar, .nx-picture)[data-tone="info"] {
+    background: var(--nx-info-soft);
+  }
+
+  :is(.nx-avatar, .nx-picture)[data-tone="success"] {
+    background: var(--nx-success-soft);
+  }
+
+  :is(.nx-avatar, .nx-picture)[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

@@ -1,117 +1,117 @@
-/* Page defaults and small shared utilities. */
-@layer nexus.base {
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  body {
-    margin: 0;
-    background: var(--nx-bg);
-    color: var(--nx-text);
-    font: var(--nx-text-md) / var(--nx-leading) var(--nx-font);
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-  }
-
-  button,
-  input,
-  select,
-  textarea {
-    font: inherit;
-    color: inherit;
-  }
-
-  /* Nepali text takes a font that has Devanagari glyphs, digits included. */
-  :lang(ne) {
-    font-family: var(--nx-font-devanagari);
-  }
-
-  :focus-visible {
-    outline: 2px solid var(--nx-primary);
-    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;
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    padding: 0;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  /* Icons sit on the text baseline and never shrink inside flex rows. */
-  .nx-icon {
-    flex-shrink: 0;
-    vertical-align: -0.125em;
-  }
-
-  .nx-spin {
-    animation: nx-spin 0.8s linear infinite;
-  }
-
-  @keyframes nx-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  /* 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);
-  }
-}
+/* Page defaults and small shared utilities. */
+@layer nexus.base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  body {
+    margin: 0;
+    background: var(--nx-bg);
+    color: var(--nx-text);
+    font: var(--nx-text-md) / var(--nx-leading) var(--nx-font);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  button,
+  input,
+  select,
+  textarea {
+    font: inherit;
+    color: inherit;
+  }
+
+  /* Nepali text takes a font that has Devanagari glyphs, digits included. */
+  :lang(ne) {
+    font-family: var(--nx-font-devanagari);
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--nx-primary);
+    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;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* Icons sit on the text baseline and never shrink inside flex rows. */
+  .nx-icon {
+    flex-shrink: 0;
+    vertical-align: -0.125em;
+  }
+
+  .nx-spin {
+    animation: nx-spin 0.8s linear infinite;
+  }
+
+  @keyframes nx-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* 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);
+  }
+}