@startsimpli/ui 0.4.118 → 0.4.119

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.118",
+  "version": "0.4.119",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -48,8 +48,8 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "@startsimpli/api": "^0.5.58",
-    "@startsimpli/auth": "^0.4.35",
-    "@startsimpli/i18n": "^0.1.3"
+    "@startsimpli/i18n": "^0.1.3",
+    "@startsimpli/auth": "^0.4.35"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {
@@ -123,8 +123,8 @@
     "tailwindcss": "^3.4.19",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "@startsimpli/i18n": "0.1.3",
-    "@startsimpli/realtime": "0.0.2"
+    "@startsimpli/realtime": "0.0.2",
+    "@startsimpli/i18n": "0.1.3"
   },
   "keywords": [
     "ui",

package/src/components/ui/__tests__/table-scroll.test.tsx

@@ -55,6 +55,29 @@ describe('TABLE_SCROLL_CSS', () => {
   it('leaves the scroller on overflow:auto so the bar is conditional on real overflow', () => {
     expect(TABLE_SCROLL_CSS).not.toMatch(/overflow\s*:\s*scroll/)
   })
+
+  /**
+   * startsim-xe1uo. The edge hint shipped fading to `hsl(var(--background))`,
+   * which made it INVISIBLE: it is absolutely positioned over rows whose
+   * background-color is `rgba(0,0,0,0)` all the way up, so what is actually
+   * behind it is whatever the page paints — `bg-gray-50` = rgb(249,250,251) on
+   * the marketing-agents dashboard, against a token resolving to
+   * rgb(250,250,250). Sampled from the live page: delta (1,0,1).
+   *
+   * The hint cannot know its surface, so it must SHADE rather than MATCH. Every
+   * "fade the edge" snippet reaches for the background token, so guard the
+   * shape here; the visible-shading claim itself is carried by the pixel diff
+   * in examples/workflow-studio/scripts/measure-scrollers.mjs (delta 3 -> 35).
+   */
+  it('shades the edge hint instead of trying to match an unknowable background', () => {
+    const edgeRules = TABLE_SCROLL_CSS.slice(TABLE_SCROLL_CSS.indexOf('.ss-table-edge-right'))
+    expect(edgeRules).toMatch(/linear-gradient/)
+    expect(edgeRules).not.toMatch(/--background/)
+    expect(edgeRules).toMatch(/--foreground/)
+    // A fully transparent stop at the inner end, so it reads as a fade and not
+    // as a hard 24px band.
+    expect(edgeRules).toMatch(/--foreground\)\s*\/\s*0\)/)
+  })
 })
 
 describe('Table', () => {

package/src/lib/scroll-affordance.ts

@@ -21,6 +21,48 @@ export const TABLE_EDGE_CLASS = 'ss-table-edge'
 export const TABLE_EDGE_LEFT_CLASS = 'ss-table-edge-left'
 export const TABLE_EDGE_RIGHT_CLASS = 'ss-table-edge-right'
 
+/**
+ * The edge hint SHADES its surface; it must never try to MATCH it.
+ *
+ * It shipped as a fade to `hsl(var(--background))` and that is structurally
+ * unable to work: the hint is absolutely positioned over table rows whose
+ * `background-color` is `rgba(0,0,0,0)` for every level from the cell up to the
+ * shell, so it cannot know what is behind it. On the marketing-agents tenant
+ * what is behind it is the dashboard's `bg-gray-50` = rgb(249,250,251), while
+ * the token resolves to rgb(250,250,250) — MEASURED 2026-09-09 by sampling the
+ * live page: delta (1,0,1), a contrast ratio of 1.00:1. The hint rendered at
+ * the right size, in the right place, and mounted only while a side hid
+ * content — and was invisible (bd startsim-xe1uo). Its only visible effect was
+ * erasing whatever glyphs sat under it, so the affordance appeared or not
+ * depending on whether that row had text at the right, and never on the header
+ * band, a blank cell, or the gap between rows.
+ *
+ * That matters more than it sounds, because the hint is the ONLY affordance a
+ * reader at the header row can see: the scrollbar is at the bottom of a
+ * scroller as tall as the whole table, measured 2,741-5,994px below the
+ * truncation on the live tenant.
+ *
+ * `--foreground` at a low alpha inverts with the theme, so one rule shades
+ * both. Measured with the pixel diff in
+ * examples/workflow-studio/scripts/measure-scrollers.mjs, which scores only the
+ * pixels that were bare surface before the hint was drawn:
+ *
+ *   hsl(var(--background))         on bg-gray-50   ->  delta   3   (the old rule)
+ *   hsl(var(--foreground) / 0.14)  on bg-gray-50   ->  delta  35
+ *   hsl(var(--foreground) / 0.14)  on a dark page  ->  delta  33
+ *
+ * Confirmed against the deployed tenant rather than assumed from the harness:
+ * its `--foreground` resolves to rgba(2,8,23,0.14) at this alpha, which over
+ * the surface sampled there (rgb(249,250,251)) composites to rgb(214,216,219)
+ * — per-channel 35/34/32.
+ *
+ * If this needs re-tuning, move the alpha — do NOT reintroduce a token that
+ * names a background, or the hint silently disappears again wherever a page
+ * paints itself a shade the token does not know about.
+ */
+const EDGE_SHADE = 'hsl(var(--foreground) / 0.14)'
+const EDGE_SHADE_NONE = 'hsl(var(--foreground) / 0)'
+
 /**
  * Content scrolls, but on macOS nothing says so (startsim-5pq7h, 5pq7h.1).
  *
@@ -51,7 +93,11 @@ export const TABLE_EDGE_RIGHT_CLASS = 'ss-table-edge-right'
  *    Firefox on macOS gains nothing from them anyway (measured 0px with
  *    `scrollbar-width: thin` applied and confirmed in the computed style), so
  *    there is no Firefox branch to lose. Firefox users are served by the edge
- *    hint below instead.
+ *    hint below instead — a claim that was FALSE as originally shipped, because
+ *    the hint faded to the background token and was invisible (startsim-xe1uo,
+ *    measured delta 3). It holds because {@link EDGE_SHADE} shades instead. If
+ *    that ever goes back to matching a background, this paragraph goes with it
+ *    and Firefox is left with nothing at all.
  *
  * 2. `width` IS LOAD-BEARING even though the defect that started this is
  *    horizontal. Declaring any `::-webkit-scrollbar` rule opts the element out
@@ -75,8 +121,14 @@ export const TABLE_EDGE_RIGHT_CLASS = 'ss-table-edge-right'
  *    or every narrow table in the fleet grows a dead bar.
  *
  * On Windows/Linux this REPLACES the ~15px classic bar with a 10px one; it does
- * not reserve a second gutter, so no platform guard is needed. Nothing here
- * animates or transitions, so `prefers-reduced-motion` has nothing to honour.
+ * not reserve a second gutter, so no platform guard is needed. That was the one
+ * unmeasured line in this file until startsim-xe1uo; MEASURED 2026-09-09 in
+ * headful Linux Chromium (classic scrollbars, negative control 15px with this
+ * sheet disabled) on the live tenant, it holds — no double gutter — at the cost
+ * of a bar 5px thinner and, at `currentColor` 22%, fainter than the platform's
+ * own. Weigh that if this ever gets tuned; it is not what sent the bead back.
+ * Nothing here animates or transitions, so `prefers-reduced-motion` has nothing
+ * to honour.
  *
  * ONE stylesheet, ONE id, ONE string: `ensureInjectedStyle` rewrites the sheet
  * when an existing id carries different text, so two call sites shipping
@@ -114,11 +166,11 @@ export const SCROLL_AFFORDANCE_CSS = `
 }
 .${TABLE_EDGE_RIGHT_CLASS} {
   right: 0;
-  background-image: linear-gradient(to left, hsl(var(--background)), hsl(var(--background) / 0));
+  background-image: linear-gradient(to left, ${EDGE_SHADE}, ${EDGE_SHADE_NONE});
 }
 .${TABLE_EDGE_LEFT_CLASS} {
   left: 0;
-  background-image: linear-gradient(to right, hsl(var(--background)), hsl(var(--background) / 0));
+  background-image: linear-gradient(to right, ${EDGE_SHADE}, ${EDGE_SHADE_NONE});
 }
 `.trim()