nexus-shared 3.2.0 → 4.1.0

package/src/Styles/Nexus.Files.css

@@ -0,0 +1,437 @@
+/*
+ * An owner's pictures and documents (OwnerFiles.tsx, PictureInput.tsx): a picture of any size and shape, the picture
+ * input's preview and buttons, the gallery's two panes and the document list. Nothing moves under the pointer: a hovered
+ * picture gets a ring, never a new size, so a table's rows and the gallery's grid stay where they are.
+ */
+@layer nexus.components {
+  /* A picture: its height from --nx-picture-h, its width from the shape (--nx-picture-ratio, width / height). */
+  .nx-picture {
+    position: relative;
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    height: var(--nx-picture-h, 28px);
+    aspect-ratio: var(--nx-picture-ratio, 1);
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: color-mix(in oklab, var(--nx-text) 7%, var(--nx-surface));
+    color: var(--nx-text-subtle);
+    font: inherit;
+    vertical-align: middle;
+  }
+
+  .nx-picture img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .nx-picture--empty .nx-icon {
+    width: min(50%, 2rem);
+    height: auto;
+  }
+
+  .nx-picture--round {
+    border-radius: 50%;
+  }
+
+  /* No picture, a name: its initials, on the name's avatar tone (Nexus.Avatar.css), in the text colour. */
+  .nx-picture--initials {
+    color: var(--nx-text);
+    font-size: max(8px, calc(var(--nx-picture-h, 28px) * 0.4));
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  /* Not read yet: the tint alone, so a row with a picture never flashes the no-picture icon first. */
+  .nx-picture--loading .nx-icon {
+    visibility: hidden;
+  }
+
+  button.nx-picture {
+    cursor: pointer;
+  }
+
+  button.nx-picture:hover {
+    box-shadow: 0 0 0 1px var(--nx-border-strong);
+  }
+
+  :is(button.nx-picture, .nx-files__name):focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  /* The picture input: the preview beside its buttons, which wrap under it when the form is narrow. */
+  .nx-picture-input {
+    min-width: 0;
+  }
+
+  .nx-picture-input__body {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nx-space-3) var(--nx-space-4);
+    margin-top: var(--nx-space-1);
+  }
+
+  .nx-picture-input__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nx-space-2);
+  }
+
+  /* The gallery and the document list. */
+  .nx-files {
+    display: grid;
+    gap: var(--nx-space-4);
+    min-width: 0;
+  }
+
+  .nx-files__bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nx-space-2) var(--nx-space-3);
+  }
+
+  .nx-files__note {
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-files__note--error {
+    color: var(--nx-danger-text);
+  }
+
+  .nx-files__empty {
+    display: grid;
+    place-items: center;
+    gap: var(--nx-space-2);
+    padding: var(--nx-space-8) var(--nx-space-4);
+    border-radius: var(--nx-radius-lg);
+    background: color-mix(in oklab, var(--nx-text) 4%, var(--nx-surface));
+    color: var(--nx-text-muted);
+    text-align: center;
+  }
+
+  .nx-files__empty > .nx-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .nx-files__empty p {
+    margin: 0;
+  }
+
+  .nx-files__grid,
+  .nx-files__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /*
+   * Pictures in two panes (the 2026-06-20 gallery): the main picture large with its buttons and the count, a hairline,
+   * then the grid. The gallery is the size container: under 560px of its own width the main picture sits small beside
+   * its buttons, over the grid. In its window (a flush popup's body) it has a height of its own, so the grid scrolls and
+   * nothing else does; in a page or a tab it is as tall as its pictures.
+   */
+  .nx-files--panes {
+    container-type: inline-size;
+    width: 100%;
+  }
+
+  .nx-files__frame {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    min-height: 0;
+  }
+
+  .nx-files__side {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nx-space-4);
+    box-sizing: content-box;
+    width: 15rem;
+    min-height: 0;
+    padding-inline-end: var(--nx-space-5);
+    border-inline-end: 1px solid var(--nx-border);
+  }
+
+  /* The main picture: about 15rem on its long side, a rounded square for every shape (only an avatar is round). */
+  .nx-files__cover {
+    --nx-picture-h: calc(15rem / max(1, var(--nx-picture-ratio, 1)));
+
+    align-self: center;
+    border-radius: var(--nx-radius-lg);
+  }
+
+  .nx-files__cover.nx-picture--empty .nx-icon {
+    width: 3rem;
+  }
+
+  .nx-files__about {
+    display: grid;
+    align-content: start;
+    gap: var(--nx-space-3);
+    min-width: 0;
+  }
+
+  .nx-files__side-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nx-space-2);
+  }
+
+  .nx-files__side-actions > .nx-btn {
+    flex: 1 1 0;
+  }
+
+  .nx-files__pane {
+    min-width: 0;
+    min-height: 0;
+    padding-inline-start: var(--nx-space-5);
+  }
+
+  /*
+   * The window: edge to edge, the panes padded inside, a height of its own (the whole window once it fills it). What is
+   * not the panes there - the list that could not be read, with Try again - has the window's own padding.
+   */
+  .nx-popup--flush .nx-popup__body > .nx-files:not(.nx-files--panes) {
+    padding: var(--nx-space-5);
+  }
+
+  @media (max-width: 600px) {
+    .nx-popup--flush .nx-popup__body > .nx-files:not(.nx-files--panes) {
+      padding: var(--nx-space-4);
+    }
+  }
+
+  .nx-popup--flush .nx-popup__body > .nx-files--panes {
+    height: min(36rem, calc(100dvh - 10rem));
+  }
+
+  .nx-popup:is(.nx-popup--full, .nx-popup--maximized) .nx-popup__body > .nx-files--panes {
+    height: 100%;
+  }
+
+  .nx-popup--flush .nx-popup__body > .nx-files--panes .nx-files__frame {
+    height: 100%;
+  }
+
+  .nx-popup--flush .nx-popup__body > .nx-files--panes :is(.nx-files__side, .nx-files__pane) {
+    padding: var(--nx-space-5);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  /* At least two pictures a row; about 11rem each where there is room. */
+  .nx-files__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(11rem, calc(50% - var(--nx-space-3) / 2)), 1fr));
+    gap: var(--nx-space-3);
+  }
+
+  .nx-files__tile {
+    position: relative;
+    min-width: 0;
+  }
+
+  /* A picture in the grid: a rounded square (or the page's shape), the picture covering it. */
+  .nx-files__thumb,
+  .nx-table__bone.nx-files__bone {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: auto;
+    aspect-ratio: var(--nx-picture-ratio, 1);
+    overflow: hidden;
+    border-radius: var(--nx-radius-lg);
+    background: color-mix(in oklab, var(--nx-text) 7%, var(--nx-surface));
+  }
+
+  .nx-files__thumb img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .nx-files__tile:hover .nx-files__thumb {
+    box-shadow: 0 0 0 1px var(--nx-border-strong);
+  }
+
+  /* The main picture: a ring in the accent, and the Main tag in its corner. */
+  .nx-files__tile[data-primary] .nx-files__thumb {
+    box-shadow: 0 0 0 2px var(--nx-primary);
+  }
+
+  .nx-files__mark {
+    position: absolute;
+    top: var(--nx-space-2);
+    left: var(--nx-space-2);
+    box-shadow: var(--nx-shadow-sm);
+  }
+
+  /*
+   * A picture whose removal waits for a review: still shown, faded, with the warning tag as a band across its foot,
+   * wrapping in a narrow tile. The tag says why in words, so the fade is never the only cue.
+   */
+  .nx-files__tile[data-pending] .nx-files__thumb img {
+    opacity: 0.55;
+  }
+
+  .nx-table__tag.nx-files__pending {
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    justify-content: center;
+    max-width: none;
+    padding: 3px var(--nx-space-2);
+    border-radius: 0;
+    line-height: 1.35;
+    text-align: center;
+  }
+
+  /* Its tag in a document's row and beside the main picture: under the words, as wide as it says. */
+  :is(.nx-files__row-text, .nx-files__about) > .nx-table__tag {
+    justify-self: start;
+    width: fit-content;
+    line-height: 1.45;
+  }
+
+  /*
+   * The picture's buttons, inside it and centred, on a popover's panel. Shown on hover and on a keyboard's focus in the
+   * picture; where a finger may press (a touch screen, a laptop's too) always, so no button waits behind a hover.
+   * Hidden, they stay in the Tab order and to a screen reader, but take no press: a tap meant for the picture never
+   * runs Make main or Edit unseen.
+   */
+  .nx-files__tools {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 2px;
+    width: fit-content;
+    max-width: calc(100% - var(--nx-space-2));
+    height: fit-content;
+    margin: auto;
+    padding: 3px;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius);
+    background: light-dark(var(--nx-surface), var(--nx-surface-2));
+    box-shadow: var(--nx-shadow);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--nx-duration) ease-out;
+  }
+
+  .nx-files__tile:is(:hover, :has(:focus-visible)) .nx-files__tools {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  @media (hover: none), (any-hover: none), (any-pointer: coarse) {
+    .nx-files__tools {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  @container (max-width: 559.98px) {
+    .nx-files__frame {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .nx-files__side {
+      flex-direction: row;
+      align-items: flex-start;
+      flex-shrink: 0;
+      gap: var(--nx-space-3);
+      box-sizing: border-box;
+      width: auto;
+      padding: 0 0 var(--nx-space-4);
+      border-inline-end: 0;
+      border-bottom: 1px solid var(--nx-border);
+    }
+
+    .nx-files__cover {
+      --nx-picture-h: calc(7rem / max(1, var(--nx-picture-ratio, 1)));
+
+      align-self: flex-start;
+    }
+
+    .nx-files__cover.nx-picture--empty .nx-icon {
+      width: 2rem;
+    }
+
+    .nx-files__about {
+      flex: 1 1 0;
+    }
+
+    .nx-files__pane {
+      flex: 1 1 auto;
+      padding: var(--nx-space-4) 0 0;
+    }
+
+    .nx-popup--flush .nx-popup__body > .nx-files--panes .nx-files__side {
+      flex-shrink: 0;
+      padding: var(--nx-space-4);
+      overflow: visible;
+    }
+
+    .nx-popup--flush .nx-popup__body > .nx-files--panes .nx-files__pane {
+      padding: var(--nx-space-4);
+    }
+  }
+
+  [data-nx-motion="reduce"] .nx-files__tools {
+    transition: none;
+  }
+
+  /* The document list: a row per file, its buttons at the end. */
+  .nx-files__actions {
+    display: inline-flex;
+    gap: 2px;
+  }
+
+  .nx-files__row {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: var(--nx-space-3);
+    padding: var(--nx-space-2) 0;
+  }
+
+  .nx-files__row + .nx-files__row {
+    border-top: 1px solid var(--nx-border);
+  }
+
+  .nx-files__row-text {
+    display: grid;
+    min-width: 0;
+  }
+
+  .nx-files__name {
+    overflow: hidden;
+    border-radius: var(--nx-radius-sm);
+    color: var(--nx-text);
+    font-weight: 500;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nx-files__name:hover {
+    text-decoration: underline;
+  }
+}

package/src/Styles/Nexus.Form.css

@@ -180,10 +180,13 @@
     flex: 1;
   }
 
-  /* One line kept even when empty: "Loading…", "Saving…" and "Unsaved changes" come and go, and the bar never jumps. */
+  /*
+   * One line kept even when empty: "Loading…", "Saving…" and "Unsaved changes" come and go, and the bar never jumps.
+   * The room kept beside the buttons is 14rem; a bar whose words are fewer asks less (`--nx-form-status-basis`).
+   */
   .nx-form-status {
     display: flex;
-    flex: 1 1 14rem;
+    flex: 1 1 var(--nx-form-status-basis, 14rem);
     align-items: flex-start;
     gap: 6px;
     min-width: 0;

package/src/Styles/Nexus.Index.css

@@ -18,14 +18,21 @@
 @import "./Nexus.DateTime.css";
 @import "./Nexus.Choice.css";
 @import "./Nexus.Crud.css";
+@import "./Nexus.Dashboard.css";
+@import "./Nexus.Domain.css";
 @import "./Nexus.Dropdown.css";
 @import "./Nexus.Input.css";
 @import "./Nexus.Editor.css";
 @import "./Nexus.Excel.css";
+@import "./Nexus.Files.css";
 @import "./Nexus.Form.css";
+@import "./Nexus.Mail.css";
 @import "./Nexus.Markdown.css";
 @import "./Nexus.Menu.css";
 @import "./Nexus.Popup.css";
+@import "./Nexus.Print.css";
+@import "./Nexus.QrCode.css";
+@import "./Nexus.Record.css";
 @import "./Nexus.RichText.css";
 @import "./Nexus.Rows.css";
 @import "./Nexus.Slider.css";

package/src/Styles/Nexus.Input.css

@@ -139,11 +139,38 @@
     font-variant-numeric: tabular-nums;
   }
 
+  /*
+   * A value worked out from other inputs (a form's `compute`): an <output> where an input would be, its text placed as an
+   * input's is (in the middle of the box, low in an inbox one) and in the text colour, a long one cut with an ellipsis.
+   * Never typed in, so no I-beam; the read-only tint around it comes from the field.
+   */
+  .nx-field__control--output {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+    cursor: default;
+  }
+
+  /* It fills the box, so the box's `text-align` places it: at the end of a table's number column, as a typed figure is. */
+  .nx-field__output-text {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .nx-field__control::placeholder {
     color: var(--nx-text-subtle);
     opacity: 1;
   }
 
+  /* A read-only field's placeholder is all it shows ("None"), so it reads as text: --nx-text-subtle is under 3:1 on the
+     read-only box in light themes, muted text at least 4.5:1. */
+  .nx-field[data-readonly] .nx-field__control::placeholder {
+    color: var(--nx-text-muted);
+  }
+
   /* Browser extras that the field replaces with its own buttons. */
   .nx-field__control::-webkit-search-cancel-button,
   .nx-field__control::-webkit-search-decoration {
@@ -338,6 +365,12 @@
     animation: nx-field-nudge 320ms ease-in-out;
   }
 
+  /* A box pointed at with the same nudge: the one thing to set first, when the cursor is sent to it (a CRUD's Add pressed
+     while its narrowing box has nothing picked). */
+  .nx-field__box[data-nudge] {
+    animation: nx-field-nudge 320ms ease-in-out;
+  }
+
   @keyframes nx-field-nudge {
     20%,
     60% {
@@ -425,6 +458,35 @@
     font-weight: 500;
   }
 
+  /*
+   * A worked-out input that can be typed in (`compute.solve`): its hint and the line that says what the typed figure set
+   * share one place, as tall as the taller of the two and at least a line, so nothing below moves as the line comes and goes.
+   */
+  .nx-field__notes {
+    display: grid;
+    min-width: 0;
+    min-height: 1.35em;
+  }
+
+  .nx-field__notes > * {
+    grid-area: 1 / 1;
+    min-width: 0;
+  }
+
+  .nx-field__note--off {
+    visibility: hidden;
+  }
+
+  .nx-field__note--refused {
+    color: var(--nx-danger);
+    font-weight: 500;
+  }
+
+  .nx-field__note .nx-icon {
+    margin-inline-end: 5px;
+    vertical-align: -0.25em;
+  }
+
   .nx-field__aside {
     margin-left: auto;
     color: var(--nx-text-muted);
@@ -577,6 +639,16 @@
     resize: vertical;
   }
 
+  /* Code (`TextArea code`): the editor's monospace, lines kept as typed, a long one scrolled sideways in the box. */
+  .nx-field--multiline .nx-field__control--code {
+    overflow-x: auto;
+    font-family: var(--nx-font-mono);
+    font-size: calc(var(--nx-field-font) - 0.5px);
+    white-space: pre;
+    overflow-wrap: normal;
+    tab-size: 2;
+  }
+
   /* Buttons and the read-only lock sit at the top end, centered on the first line (line height 1.4). */
   .nx-field--multiline .nx-field__actions {
     align-items: flex-start;
@@ -788,6 +860,7 @@
   }
 
   [data-nx-motion="reduce"] .nx-field__lock[data-nudge],
+  [data-nx-motion="reduce"] .nx-field__box[data-nudge],
   [data-nx-motion="reduce"] .nx-field-notice:popover-open {
     animation: none;
   }