@columenlabs/lumen-ui 0.1.114 → 0.1.115

package/README.md

@@ -78,7 +78,7 @@ Every export, its props and an example are on the [docs](https://lumen.columenla
 - Numbers use tabular figures and a true minus `−`; a gain or loss always shows a sign or arrow.
 - A page's header numbers are metric cards: `TileRow` of `Tile` (or `TileToggleGroup` when they pick what the page shows), with `fill` so they share the row, each with `spark` set to its daily history where it has one. Don't build a card of your own for this.
 - Column widths: the first column (a row's name) grows only to `--lead-col-max` (18rem, theme.css); past it the cell truncates on one line and a plain text value shows in full on hover (a rendered cell brings its own hover card). Cap any other column with the field's `maxWidth` (`'12rem'`), or lift the cap with `maxWidth: false`. In a rendered name cell, put the name in a `truncate` span so the ellipsis lands on it, not on a chip after it.
-- Group, sub-group and Total rows read on one line at every width, a phone's cards included: the group's name shortens in an ellipsis (full name on hover) and its roll-up figure stays on the right. The view marks them `data-rollup` and theme.css keeps them to one line, so a `mark`, `rollRender` or `groupActions` an app passes never wraps them.
+- Rows never wrap. Every row (data, group, sub-group, Total) reads on one line at every width. On a phone each row is a one-line card: its name (ellipsis, full name on hover) and one value on the right, the sorted column, else the first number or date. The other values are in the row's drawer or panel. Pick which value a phone shows by sorting (Sort by) or by marking the others `hideOnPhone`.
 - Column alignment is the table's, not the cell's. Text left, numbers right, and a number column has one right edge for its header, values, dashes and Total. `UnitValue` puts the unit in a fixed slot after the number (`--unit-slot`, 2rem) and its status dot just left of the number. In a LumenView table the first `UnitValue` drawn in a column marks it (`data-units` on every cell of that column, through the `UnitColumns` context and the cell's `data-col`); theme.css then widens that column's right gutter by the slot and hangs each unit in it. So a plain `—`, `Free` or `$0.21` an app draws in the same column sits on the digits' edge, and the header sits over the digits. Don't hand-place units, dots or padding to line a column up; if a column is off, draw its numbers through `UnitValue`. Outside a LumenView table (a hover card, a tile) `UnitValue` keeps its slot inline.
 - A metered column (use against an allowance) shows one number per cell with `UnitValue` (right-aligned number, fixed muted unit slot, status dot), never `value [pct]`. Offer both readings through the field's `showAs` (Amount / % of allowance, picked per column in Edit view, saved as `shows`); default amounts for sizes (storage) and shares for capped counts. Put the other reading, the allowance and the cost formula in a hover card. Totals use `rollRender`: sum amounts with their unit; a share is the rows' total over their allowance, never a sum of percents.
 - A floating bulk-action bar over a table's selection: Apply clears the selection and the bar goes away; the toast's Undo restores the change, not the selection. Cancel keeps the selection.

package/dist/lumen-view.js

@@ -440,12 +440,13 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     // Inline chips sit on the first column, next to the row's name, not in their own.
     const inline = visible.filter((f, i) => i > 0 && chips.some((c) => c.key === f.key && c.placement === 'inline'));
     const shown = visible.filter((f) => !inline.includes(f));
-    // On a narrow phone each row reads as a card (theme.css, `data-card`): its name and one figure
-    // (the sorted one, else the first number or date) on the first line, the rest on the second.
-    // Numbers and dates keep their width there; only text shortens.
+    // On a narrow phone each row reads as a card on ONE line (theme.css, `data-card`): its name and
+    // one value (the sorted one, else the first number or date, else the next column). The rest
+    // waits in the row's detail, never on a second line.
     const short = (f) => f.format !== 'text' || (rows[0] !== undefined && isDateText(f.value(rows[0])));
-    const meta = (shown.find((f, i) => i > 0 && f.key === sorting[0]?.id && short(f)) ??
-        shown.find((f, i) => i > 0 && short(f)))?.key;
+    const onCard = shown.filter((f, i) => i > 0 && !f.hideOnPhone);
+    const meta = (onCard.find((f) => f.key === sorting[0]?.id) ?? onCard.find(short) ?? onCard[0])
+        ?.key;
     const cardOf = (f) => f === shown[0] ? 'lead' : f.key === meta ? 'meta' : short(f) ? 'num' : 'text';
     const col = (f, ...more) => ({
         ...colProps(f, ...more),

package/dist/theme.css

@@ -443,9 +443,11 @@
 }
 
 /* A LumenView table on a narrow phone (`data-cards`): each row is a card, so nothing runs off
-   the right edge. Line 1: the row's name (shortens) and one figure (`data-card="meta"`); line 2:
-   the other values, small and muted. Numbers, dates and their units keep their width; only text
-   shortens, in an ellipsis. Group, Total and More rows span the card's width. */
+   the right edge, and every row is ONE line, whatever an app draws in it: the row's name (shortens
+   in an ellipsis), then one figure (`data-card="meta"`, the sorted one, else the first number or
+   date) on the right. The other values wait in the row's detail (its drawer or panel), never on a
+   second line. Group, fold and Total rows (`data-rollup`) read the same way. More and empty rows
+   are one cell across the card. */
 @media (max-width: 639px) {
   table[data-cards],
   table[data-cards] > tbody,
@@ -462,55 +464,46 @@
   }
   table[data-cards] tr {
     display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
+    flex-wrap: nowrap;
+    align-items: center;
     column-gap: 0.75rem;
-    row-gap: 0.125rem;
     padding: 0.5rem var(--cell-x);
+    white-space: nowrap;
   }
   table[data-cards] td {
     padding: 0 !important;
     width: auto !important;
     min-width: 0;
+    white-space: nowrap;
   }
   table[data-cards] td[colspan] {
     flex: 1 1 100%;
   }
-  table[data-cards] td:not([data-card]):not([colspan]) {
+  /* A row's panel (`row-panel`) is a box of its own under the row, not a row: it keeps its lines. */
+  table[data-cards] tr[data-slot="row-panel"],
+  table[data-cards] tr[data-slot="row-panel"] > td {
+    white-space: normal;
+  }
+  table[data-cards] td:not([data-card]):not([colspan]),
+  table[data-cards] td:is([data-card="num"], [data-card="text"]) {
     display: none;
   }
   table[data-cards] td[data-card="select"] {
     order: 0;
     flex: none;
-    align-self: center;
   }
   table[data-cards] td[data-card="lead"] {
     order: 1;
     flex: 1 1 0;
     overflow: hidden;
+    text-overflow: ellipsis;
     font-weight: 500;
   }
   table[data-cards] td[data-card="meta"] {
     order: 2;
     flex: none;
-  }
-  table[data-cards] tr:has(> td[data-card="lead"])::after {
-    content: "";
-    order: 3;
-    flex-basis: 100%;
-  }
-  table[data-cards] td:is([data-card="num"], [data-card="text"]) {
-    order: 4;
-    font-size: 0.8125rem;
-    color: var(--muted-foreground);
-  }
-  table[data-cards] td[data-card="num"] {
-    flex: none;
-  }
-  table[data-cards] td[data-card="text"] {
-    flex: 0 1 auto;
+    max-width: 50%;
     overflow: hidden;
-    text-overflow: ellipsis;
   }
   table[data-cards] [data-slot="unit-value-unit"] {
     position: static;
@@ -519,31 +512,7 @@
     margin-left: 0.25em;
     font-size: inherit;
   }
-  /* Group, fold and Total rows (`data-rollup`) are one line at every width: the name shortens
-     in an ellipsis, the row's one figure keeps its width on the right, and the rest waits in the
-     open rows. Whatever an app draws in them (a mark, a roll-up, group actions) never wraps.
-     The group band pins as a whole row here: a cell can't pin inside a one-line flex row. */
-  table[data-cards] tr[data-rollup] {
-    flex-wrap: nowrap;
-    align-items: center;
-    white-space: nowrap;
-  }
-  table[data-cards] tr[data-rollup]::after {
-    display: none;
-  }
-  table[data-cards] tr[data-rollup] > td {
-    white-space: nowrap;
-  }
-  table[data-cards] tr[data-rollup] > td[data-card="lead"] {
-    flex: 1 1 0;
-    min-width: 0;
-    overflow: hidden;
-  }
-  table[data-cards]
-    tr[data-rollup]
-    > td:is([data-card="num"], [data-card="text"], :not([data-card])) {
-    display: none;
-  }
+  /* The group band pins as a whole row here: a cell can't pin inside a one-line flex row. */
   table[data-cards] tr[data-group] {
     position: sticky;
     top: var(--pin-top, 0px);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.114",
+  "version": "0.1.115",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.114",
+    "@columenlabs/lumen-ui-types": "0.1.115",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",