@columenlabs/lumen-ui 0.1.108 → 0.1.109

package/dist/coverage-map.js

@@ -246,7 +246,7 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
     useLayoutEffect(() => {
         const el = scroller.current;
         if (el && layout === 'grid')
-            el.scrollLeft = el.scrollWidth;
+            snapToEnd(el);
         edge.update();
     }, [strip]);
     const sums = mobile ? summary.filter((s) => s === 'complete') : summary;
@@ -476,7 +476,7 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
                 link: rowSpec.link,
             };
             let group;
-            body = (_jsxs("div", { className: cn('grid min-w-min items-center gap-[3px]', fade), style: grid, ...routes, children: [!mobile && (_jsx("span", { className: "sticky left-0 z-1 bg-card text-xs text-muted-foreground", children: rowSpec.title })), cols.map((k) => (_jsx("span", { className: "num h-4 overflow-visible text-[11px] whitespace-nowrap text-muted-foreground", children: headLabel(k, block, cols.length) }, k))), sums.map((s) => (_jsx("span", { className: "pl-3 text-right text-xs text-muted-foreground", children: s === 'rows' || s === 'counts' ? rowsHead : SUMMARY_HEAD[s] }, s))), rowList.flatMap((r) => {
+            body = (_jsxs("div", { className: cn('grid min-w-min items-center gap-[3px]', fade), style: grid, ...routes, children: [!mobile && (_jsx("span", { className: "sticky left-0 z-1 bg-card text-xs text-muted-foreground", children: rowSpec.title })), cols.map((k) => (_jsx("span", { "data-col": "", className: "num h-4 overflow-visible text-[11px] whitespace-nowrap text-muted-foreground", children: headLabel(k, block, cols.length) }, k))), sums.map((s) => (_jsx("span", { className: "pl-3 text-right text-xs text-muted-foreground", children: s === 'rows' || s === 'counts' ? rowsHead : SUMMARY_HEAD[s] }, s))), rowList.flatMap((r) => {
                         const out = [];
                         const shut = groupBy && folds.has(foldKey + (r.group ?? ''));
                         if (groupBy && r.group !== group) {
@@ -567,3 +567,23 @@ export function LumenCoverageMap({ source, title, icon = Grid3x3Icon, rows: rowS
                                             ? 'Click a block to see its days'
                                             : undefined) }) })] }) }) }) }));
 }
+/** Scrolls a sideways strip to its end (today) so its left edge falls on a whole block, not mid
+ *  block with its label cut: the strip's content takes just enough room at its end to land there. */
+function snapToEnd(el) {
+    const content = el.firstElementChild;
+    if (!content)
+        return;
+    content.style.paddingRight = '';
+    el.scrollLeft = el.scrollWidth;
+    const box = el.getBoundingClientRect().left;
+    const lefts = [...el.querySelectorAll('[data-col]')].map((c) => c.getBoundingClientRect().left - box);
+    // The first block cut by the left edge; the strip moves on to the block after it.
+    const cut = lefts.find((x, i) => x < -0.5 && (lefts[i + 1] ?? 1) > 0.5);
+    if (cut === undefined)
+        return;
+    const next = lefts[lefts.indexOf(cut) + 1];
+    if (next === undefined || next <= 0.5)
+        return;
+    content.style.paddingRight = `${Math.ceil(next)}px`;
+    el.scrollLeft = el.scrollWidth;
+}

package/dist/index.d.ts

@@ -28,6 +28,7 @@ export { RankedBars, StackedBars, StackedColumns, TimeLines } from './lumen-widg
 export { type ShareSegment, ShareMeter } from './share-meter.js';
 export { type Pool, poolShare } from './pool-share.js';
 export { METER_LEVEL_COLOR, meterLevel, meterValueTone } from './meter-level.js';
+export { contrast, readableInk } from './ink.js';
 export { UnitValue } from './unit-value.js';
 export { type BurnRate, burnRate, durationText, PACE_WINDOWS, type Pace, type PaceWindow, paceHours, setDefaultPaceWindow, timeToCap, usePaceWindow, } from './pace.js';
 export { PaceWindowPicker, paceText, TimeToCap } from './time-to-cap.js';

package/dist/index.js

@@ -35,6 +35,7 @@ export { RankedBars, StackedBars, StackedColumns, TimeLines } from './lumen-widg
 export { ShareMeter } from './share-meter.js';
 export { poolShare } from './pool-share.js';
 export { METER_LEVEL_COLOR, meterLevel, meterValueTone } from './meter-level.js';
+export { contrast, readableInk } from './ink.js';
 export { UnitValue } from './unit-value.js';
 export { burnRate, durationText, PACE_WINDOWS, paceHours, setDefaultPaceWindow, timeToCap, usePaceWindow, } from './pace.js';
 export { PaceWindowPicker, paceText, TimeToCap } from './time-to-cap.js';

package/dist/ink.d.ts

@@ -0,0 +1,7 @@
+/** WCAG contrast of two hex colours, 1 to 21; null when either is not a hex colour. */
+export declare function contrast(a: string, b: string): number | null;
+/**
+ * The text colour for a chip of background `bg`: its own `ink` when that reads at `min`:1 (WCAG AA,
+ * 4.5), otherwise near-black or white, whichever reads better. A colour that is not hex keeps `ink`.
+ */
+export declare function readableInk(bg: string, ink?: string, min?: number): string | undefined;

package/dist/ink.js

@@ -0,0 +1,39 @@
+// Text that stays readable on a colour the app does not choose (a mailbox's own label colours).
+const hex = (c) => {
+    const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(c.trim());
+    const d = m?.[1];
+    if (!d)
+        return null;
+    const h = d.length === 3 ? [...d].map((x) => x + x).join('') : d;
+    return [0, 2, 4].map((i) => Number.parseInt(h.slice(i, i + 2), 16));
+};
+const luminance = ([r, g, b]) => {
+    const lin = (v) => {
+        const s = v / 255;
+        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    };
+    return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+};
+/** WCAG contrast of two hex colours, 1 to 21; null when either is not a hex colour. */
+export function contrast(a, b) {
+    const x = hex(a);
+    const y = hex(b);
+    if (!x || !y)
+        return null;
+    const p = luminance(x);
+    const q = luminance(y);
+    return (Math.max(p, q) + 0.05) / (Math.min(p, q) + 0.05);
+}
+/**
+ * The text colour for a chip of background `bg`: its own `ink` when that reads at `min`:1 (WCAG AA,
+ * 4.5), otherwise near-black or white, whichever reads better. A colour that is not hex keeps `ink`.
+ */
+export function readableInk(bg, ink, min = 4.5) {
+    if (ink && (contrast(bg, ink) ?? min) >= min)
+        return ink;
+    const dark = contrast(bg, '#111111');
+    const light = contrast(bg, '#ffffff');
+    if (dark === null || light === null)
+        return ink;
+    return dark >= light ? '#111111' : '#ffffff';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.108",
+  "version": "0.1.109",
   "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.108",
+    "@columenlabs/lumen-ui-types": "0.1.109",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",