@kanunilabs/datagrid-react 1.8.7 → 1.8.9

package/dist/styles.css

@@ -510,6 +510,9 @@
   align-items: center;
   flex: none;
   height: 100%;
+  /* No double-tap-to-zoom on a cell: the grid counts the two taps itself and
+     opens the editor (P-7.3). Panning and pinch-zoom stay the browser's. */
+  touch-action: manipulation;
   padding: 0 var(--dg-cell-padding-x);
   border-inline-end: var(--dg-cell-border);
   white-space: nowrap;
@@ -1200,14 +1203,41 @@
 }
 
 .kanuni-datagrid-card-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
   height: 22px;
   line-height: 22px;
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
+}
+
+.kanuni-datagrid-card-title-text {
+  min-width: 0;
+  overflow: hidden;
   text-overflow: ellipsis;
 }
 
+/* `rowStatus.icons` on a card: the glyph the table's status column holds
+   (P-9; the row's marker still runs down the card's edge). */
+.kanuni-datagrid-card-title .kanuni-datagrid-status-icon {
+  flex: none;
+}
+
+/* A card that does something when pressed (P-9). `touch-action: manipulation`
+   drops the double-tap zoom delay, so a tap answers at once. */
+.kanuni-datagrid-card--pressable {
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* `cardView.renderCard`: the app draws the content; the grid keeps the box. */
+.kanuni-datagrid-card--custom {
+  font-size: inherit;
+}
+
 .kanuni-datagrid-card-fields {
   margin: 0;
 }
@@ -2921,6 +2951,15 @@
   margin: 0;
 }
 
+/* A touch screen: never under 16 px while typing, or iOS Safari zooms the page
+   into the box the moment it takes focus (Tekax 07, P.1 rule c). */
+@media (pointer: coarse) {
+  .kanuni-datagrid-root .kanuni-datagrid-editor:not([type='checkbox']),
+  .kanuni-datagrid-root .kanuni-datagrid-edit-form-input:not([type='checkbox']) {
+    font-size: max(16px, var(--dg-font-size));
+  }
+}
+
 /* Edge to edge of the CELL, not of its padding box.
    `width: 100%` resolves against the content box — the cell minus 2 ×
    --dg-cell-padding-x — and a negative margin only shifts a box, it does not
@@ -3209,6 +3248,10 @@
 }
 
 .kanuni-datagrid-lookup-item {
+  /* The editor windows the list by the item height it sets inline; the
+     padding has to sit INSIDE it, or each item overlaps the next (and a
+     44 px touch item measured 52). */
+  box-sizing: border-box;
   padding: 4px 8px;
   line-height: 18px;
   white-space: nowrap;
@@ -3217,6 +3260,29 @@
   cursor: pointer;
 }
 
+/* A code + name item (lookup.linkedColumns, P-5.2): the code in a fixed
+   column so the names line up. */
+.kanuni-datagrid-lookup-code {
+  display: inline-block;
+  min-width: 7ch;
+  margin-inline-end: 8px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Touch (pointer: coarse): 44 px items, 16 px text (K-53, P.1 rule c). The
+   height itself is set by the editor, which windows the list by it. */
+.kanuni-datagrid-lookup-popup--touch .kanuni-datagrid-lookup-item {
+  line-height: 36px;
+  font-size: 16px;
+}
+
+/* A function lookup's label still on its way (P-5.1): nothing, not the code. */
+.kanuni-datagrid-lookup-pending {
+  display: inline-block;
+  min-width: 1em;
+}
+
 .kanuni-datagrid-lookup-item--active {
   background: var(--dg-primary);
   color: var(--dg-on-primary);
@@ -3681,14 +3747,30 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   /* The success fill: every palette and scheme sets it, dark ones included. */
   --dg-row-status-saved: var(--dg-success);
   --dg-row-status-error: var(--dg-danger);
+  /* P-2 (2026-10-31). A new row: the success colour — "added", as a diff reads
+     it; a plus glyph tells it from the transient "saved" tick. A pending
+     delete: the muted text colour, so it reads as greyed out and is never
+     mistaken for the red of a refused save. Both stay at 3:1 or more against
+     the row in every packaged scheme and palette (themes.test.ts measures
+     them); an app's theme may set its own. */
+  --dg-row-status-new: var(--dg-success);
+  --dg-row-status-removed: var(--dg-text-muted);
   /* How strongly `tint: true` washes the row. */
   --dg-row-status-tint: 8%;
 }
 
+.kanuni-datagrid-row--status-new {
+  --dg-row-status-color: var(--dg-row-status-new);
+}
+
 .kanuni-datagrid-row--status-changed {
   --dg-row-status-color: var(--dg-row-status-changed);
 }
 
+.kanuni-datagrid-row--status-removed {
+  --dg-row-status-color: var(--dg-row-status-removed);
+}
+
 .kanuni-datagrid-row--status-saving {
   --dg-row-status-color: var(--dg-row-status-saving);
 }
@@ -3730,6 +3812,14 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   );
 }
 
+/* `rowStatus.strike`: a row whose status is `removed` — the grid's pending
+   delete or the app's own status — has its text struck through, in every edit
+   mode. The status glyph cell is left alone. */
+.kanuni-datagrid-row--status-strike .kanuni-datagrid-cell:not(.kanuni-datagrid-status-cell),
+.kanuni-datagrid-row--status-strike .kanuni-datagrid-card {
+  text-decoration: line-through;
+}
+
 /* High contrast drops background colours; the marker is the whole signal,
    so it keeps its own. */
 @media (forced-colors: active) {
@@ -3805,7 +3895,7 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
 /* ── Status column (`rowStatus.icons`, 2026-10-16) ───────────
    A glyph per status so it does not rest on colour alone: a dot while
    changed, a turning ring while saving, a tick when saved, a triangle when
-   refused. Drawn as a MASK filled with the status colour, so a palette or a
+   refused, a plus for a new row and a cross for a pending delete (P-2). Drawn as a MASK filled with the status colour, so a palette or a
    scheme recolours it like the marker. The cell exists on every row (an empty
    one where there is no status) so the columns beside it never step. */
 .kanuni-datagrid-status-cell {
@@ -3832,6 +3922,14 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-row-status-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.5'/%3E%3C/svg%3E");
 }
 
+.kanuni-datagrid-row--status-new {
+  --dg-row-status-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v11M2.5 8h11' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+
+.kanuni-datagrid-row--status-removed {
+  --dg-row-status-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+
 .kanuni-datagrid-row--status-saving {
   --dg-row-status-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a6 6 0 1 1-6 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
 }
@@ -4244,6 +4342,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   /* NOT the accent: gold on white is 1.9:1 and a focus ring has to be seen.
      brand-900 measures 7.0:1 on white. */
   --dg-focus-ring: #6b5119;
+  /* The "saving" marker is the accent elsewhere; gold on the white row is
+     2.4:1, under the 3:1 a status bar needs (P-2 measurement). */
+  --dg-row-status-saving: #6b5119;
   --dg-on-primary: #1c1917;
   --dg-selected-bg: #f3ead3;
   --dg-group-bg: #faf6ed;
@@ -4711,6 +4812,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
   --dg-scrollbar-thumb: #4c566a;
   --dg-danger: #bf616a;              /* nord11 */
   --dg-danger-text: #d9919a;
+  /* The refused-save marker: nord11 is 2.8:1 on the striped row, under the
+     3:1 a status bar needs (P-2 measurement). */
+  --dg-row-status-error: #d9919a;
   /* nord11 is a muted red, so the label on it has to go further down than the
      usual near-black: #2b1113 measured 4.31:1 and this is 5.17:1. */
   --dg-on-danger: #170709;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanunilabs/datagrid-react",
-  "version": "1.8.7",
+  "version": "1.8.9",
   "description": "High-performance React data grid — virtualized rows and columns, sticky pinned columns, sorting, filtering and theming",
   "keywords": [
     "react",
@@ -57,7 +57,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@kanunilabs/datagrid-core": "1.10.7"
+    "@kanunilabs/datagrid-core": "1.10.9"
   },
   "peerDependencies": {
     "react": ">=18.0.0",