@columenlabs/lumen-ui 0.1.163 → 0.1.164

package/dist/info-tip.js

@@ -21,7 +21,9 @@ export function InfoTip({ children, label = 'More about this', side = 'top', cla
         onPointerEnter: (e) => e.pointerType === 'mouse' && later(true, 150),
         onPointerLeave: (e) => e.pointerType === 'mouse' && later(false, 200),
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": label, className: cn('inline-flex size-4 shrink-0 items-center justify-center rounded-full align-middle text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring', className), onFocus: () => later(true, 0), onBlur: () => later(false, 100), ...hover, children: _jsx(InfoIcon, { className: "size-3.5" }) }) }), _jsx(PopoverContent, { side: side, className: "w-72 text-muted-foreground text-xs leading-relaxed", 
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": label, className: cn(
+                    // A 16px icon with a 24px hit area (WCAG 2.2 target size on a phone).
+                    "relative inline-flex size-4 shrink-0 items-center justify-center rounded-full align-middle text-muted-foreground outline-none after:absolute after:-inset-1 after:content-[''] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring", className), onFocus: () => later(true, 0), onBlur: () => later(false, 100), ...hover, children: _jsx(InfoIcon, { className: "size-3.5" }) }) }), _jsx(PopoverContent, { side: side, className: "w-72 text-muted-foreground text-xs leading-relaxed", 
                 // Focus stays on the (i): the tip is read, not worked in.
                 onOpenAutoFocus: (e) => e.preventDefault(), onCloseAutoFocus: (e) => e.preventDefault(), ...hover, children: children })] }));
 }

package/dist/lumen-view.js

@@ -388,14 +388,6 @@ function pathOf(domain, f) {
 }
 /** Every header carries its colour (`colorOf`), text and a 2px rule. */
 const ruleOf = (color) => color ? { boxShadow: `inset 0 -2px 0 ${color}` } : undefined;
-/** The width a table has to fit in: its box, or inside a page's view scroller the view's width. */
-function roomOf(el) {
-    const view = el.closest('[data-slot=view-scroll]');
-    if (!view)
-        return el.clientWidth;
-    const cs = getComputedStyle(view);
-    return view.clientWidth - Number.parseFloat(cs.paddingLeft) - Number.parseFloat(cs.paddingRight);
-}
 const alignOf = (format) => (format === 'text' ? 'text-left' : 'text-right');
 /** A column's cell classes: its alignment, and hidden on phones where the field says so. */
 /** An ISO date, alone or with a time after it: `2026-10-14`, `2026-10-14 16:17`. */
@@ -495,21 +487,12 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     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;
-    // Too narrow for every column (a docked drawer beside it, a small window), the table drops its
-    // lowest-`priority` columns, right to left, until it fits, instead of scrolling sideways; never
-    // its name or sorted column. More room brings them back. A phone keeps its own cards.
-    const rank = (f) => (f.priority ?? 0) - (f.hideOnPhone ? 1 : 0);
-    const dropOrder = shown
-        .slice(1)
-        .map((f, i) => ({ f, i }))
-        .filter(({ f }) => f.key !== sorting[0]?.id)
-        .sort((a, b) => rank(a.f) - rank(b.f) || b.i - a.i)
-        .map(({ f }) => f.key);
-    const [drop, setDrop] = useState(0);
-    const dropped = new Set(isMobile || fit ? [] : dropOrder.slice(0, drop));
+    // Every column the person chose is always drawn. Too narrow for them all (a docked drawer beside
+    // it, a small window, an open sidebar), the table scrolls sideways; it never drops a column to
+    // fit, and the name column stops at its cap (`--lead-col-max`) so it can't take the room.
     const cardOf = (f) => f === shown[0] ? 'lead' : f.key === meta ? 'meta' : short(f) ? 'num' : 'text';
     const col = (f, ...more) => ({
-        ...colProps(f, ...more, f && dropped.has(f.key) && 'hidden'),
+        ...colProps(f, ...more),
         'data-card': f ? cardOf(f) : undefined,
         'data-card-unit': f?.cardUnit,
     });
@@ -828,39 +811,6 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     };
     const box = useRef(null);
     useFloatingHead(box, !inView);
-    // Before paint: one more column drops while the table is wider than its room: its box, and in a
-    // page's view scroller the view's width (theme.css `--view-w`).
-    useLayoutEffect(() => {
-        const el = box.current;
-        const t = el?.querySelector('table');
-        if (!el || !t || isMobile || fit || drop >= dropOrder.length)
-            return;
-        if (t.offsetWidth > roomOf(el) + 1)
-            setDrop((d) => d + 1);
-    });
-    // Every column comes back to be measured again on a new set of columns or more room.
-    const dropKey = dropOrder.join('\u0000');
-    const lastDropKey = useRef(dropKey);
-    if (lastDropKey.current !== dropKey) {
-        lastDropKey.current = dropKey;
-        if (drop)
-            setDrop(0);
-    }
-    useEffect(() => {
-        const el = box.current;
-        if (!el)
-            return;
-        const view = el.closest('[data-slot=view-scroll]');
-        let room = roomOf(el);
-        const watch = new ResizeObserver(() => {
-            const now = roomOf(el);
-            if (now > room + 1)
-                setDrop(0);
-            room = now;
-        });
-        watch.observe(view ?? el);
-        return () => watch.disconnect();
-    }, []);
     return (_jsxs("div", { ref: box, className: cn(inView ? IN_VIEW : 'overflow-x-auto overflow-y-hidden [--pin-top:0px]', fit && FIT), children: [cardSort, _jsx(UnitColumns.Provider, { value: markUnits, children: _jsxs(Table, { "data-cards": "", children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((hg) => (_jsxs(TableRow, { children: [selection && (_jsx(TableHead, { className: cn('w-8 pr-0', PINNED_HEAD), children: _jsx(Checkbox, { checked: allOn ? true : someOn ? 'indeterminate' : false, onCheckedChange: (on) => toggle(allKeys, on === true), "aria-label": "Select every row" }) })), hg.headers.map((h, i) => (_jsxs(TableHead, { ...col(shown[i], PINNED_HEAD), style: ruleOf(colorOf(domain, shown[i])), onPointerDown: pressStart, onPointerUp: pressEnd, onPointerLeave: pressEnd, onPointerCancel: pressEnd, onContextMenu: (e) => {
                                             if (press.current)
                                                 e.preventDefault();

package/dist/view-model.d.ts

@@ -140,9 +140,8 @@ export interface ViewField<T> {
     /** Left out on phones, where the table has no room for it (a returns table's longer windows). */
     hideOnPhone?: boolean;
     /**
-     * Where a table has too little room (a docked drawer beside it), its columns drop until it fits:
-     * the lowest `priority` first (default 0; `hideOnPhone` ones count one lower), right to left.
-     * The name and the sorted column never drop.
+     * @deprecated Ignored: a table no longer drops columns to fit. Too narrow for every column, it
+     * scrolls sideways. Kept so an app that sets it still type-checks.
      */
     priority?: number;
     /** Left out of a table when no row in it has a value (none, empty or 0): an Attachments column on mail with none. */

package/package.json

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