@columenlabs/lumen-ui 0.1.103 → 0.1.104

package/dist/lumen-selector.d.ts

@@ -47,6 +47,8 @@ interface Common<V extends string> {
     /** The create row's text; `Add "…"` by default. */
     createLabel?: (query: string) => string;
     placeholder?: string;
+    /** What the closed field shows instead of the picked option's label (a zone's short name, PT). */
+    display?: ReactNode;
     /** Shown when nothing matches. */
     empty?: string;
     /** Accessible name; also the phone sheet's title. */

package/dist/lumen-selector.js

@@ -149,7 +149,7 @@ function Rows({ shown, picked, multiple, full, expand, }) {
 const FIELD = "flex w-fit min-w-0 items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
 /** The one picker. See the file header for what every use gets. */
 export function LumenSelector(props) {
-    const { options, groups, trigger = 'field', icon: LeadIcon, search = 'auto', create, createLabel = (q) => `Add “${q}”`, placeholder = 'Pick one', empty = 'Nothing matches', label, size = 'default', className, disabled, header, align = 'start', id, } = props;
+    const { options, groups, trigger = 'field', icon: LeadIcon, search = 'auto', create, createLabel = (q) => `Add “${q}”`, placeholder = 'Pick one', display, empty = 'Nothing matches', label, size = 'default', className, disabled, header, align = 'start', id, } = props;
     const multiple = props.multiple === true;
     const values = multiple
         ? props.value
@@ -236,7 +236,11 @@ export function LumenSelector(props) {
     };
     const selected = multiple ? null : (byValue.get(values[0] ?? '') ?? null);
     const Lead = selected?.icon ?? LeadIcon;
-    const fieldInside = (_jsxs(_Fragment, { children: [Lead && _jsx(Lead, { className: "text-muted-foreground" }), _jsx("span", { className: cn('min-w-0 flex-1 truncate text-left', !selected && !values.length && 'text-muted-foreground'), children: selected ? (selected.content ?? selected.label) : values[0] ? values[0] : placeholder }), _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })] }));
+    const fieldInside = (_jsxs(_Fragment, { children: [Lead && _jsx(Lead, { className: "text-muted-foreground" }), _jsx("span", { className: cn('min-w-0 flex-1 truncate text-left', !selected && !values.length && 'text-muted-foreground'), children: selected
+                    ? (display ?? selected.content ?? selected.label)
+                    : values[0]
+                        ? values[0]
+                        : placeholder }), _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })] }));
     // On a desktop the popup is a column as tall as the screen allows: the search, header and
     // footer keep their height and the list between them scrolls.
     const list = (_jsxs(_Fragment, { children: [header && _jsx("div", { className: "shrink-0", children: header }), _jsx(Base.List, { className: cn('min-h-0 overscroll-contain p-1 data-empty:p-0', phone ? 'flex-1 overflow-y-auto pb-4' : 'max-h-88 flex-1 scroll-pt-8 overflow-y-auto'), children: _jsx(Rows, { shown: rows, picked: picked, multiple: multiple, full: full, expand: expand }) }), _jsx(Base.Empty, { className: "hidden px-2 py-3 text-center text-sm text-muted-foreground group-data-empty/selector:block", children: empty })] }));

package/dist/lumen-view.js

@@ -416,7 +416,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     // Columns a UnitValue has drawn in (`UnitColumns`): their cells share the numbers' edge.
     const [units, setUnits] = useState(() => new Set());
     const markUnits = useCallback((key) => setUnits((s) => (s.has(key) ? s : new Set(s).add(key))), []);
-    const col = colPropsOf(units);
+    const colProps = colPropsOf(units);
     const [flipped, setFlipped] = useState(new Set());
     const [more, setMore] = useState(new Map());
     // Under a sub-group's `flat` grouping each row names itself by its sub-group key instead of
@@ -430,6 +430,17 @@ 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.
+    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 cardOf = (f) => f === shown[0] ? 'lead' : f.key === meta ? 'meta' : short(f) ? 'num' : 'text';
+    const col = (f, ...more) => ({
+        ...colProps(f, ...more),
+        'data-card': f ? cardOf(f) : undefined,
+    });
     const computed = useMemo(() => computedOf(domain, rows, groupBy), [domain, rows, groupBy]);
     // Values per editable field, offered when a cell is edited: the field's own list when it has
     // one (every value, in use or not), else the values in the shown rows.
@@ -585,7 +596,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     const allKeys = rows.map(keyOf);
     const allOn = allKeys.length > 0 && allKeys.every((k) => selection?.keys.has(k));
     const someOn = allKeys.some((k) => selection?.keys.has(k));
-    const selectCell = (key, name) => selection && (_jsx(TableCell, { className: "w-8 pr-0", onClick: (e) => e.stopPropagation(), children: _jsx(Checkbox, { checked: selection.keys.has(key), onCheckedChange: (on) => toggle([key], on === true), "aria-label": `Select ${name}` }) }));
+    const selectCell = (key, name) => selection && (_jsx(TableCell, { "data-card": "select", className: "w-8 pr-0", onClick: (e) => e.stopPropagation(), children: _jsx(Checkbox, { checked: selection.keys.has(key), onCheckedChange: (on) => toggle([key], on === true), "aria-label": `Select ${name}` }) }));
     // The rows whose open state the person flipped: a sub-group that starts open (`open`) lists
     // the closed ones, any other the open ones.
     const [partFlips, setOpenParts] = useState(new Set());
@@ -709,7 +720,7 @@ function LumenTableRows({ domain, columns = domain.fields, rows, groupBy = null,
     };
     const box = useRef(null);
     useFloatingHead(box, !inView);
-    return (_jsx("div", { ref: box, className: cn(inView ? IN_VIEW : 'overflow-x-auto overflow-y-hidden [--pin-top:0px]', fit && FIT), children: _jsx(UnitColumns.Provider, { value: markUnits, children: _jsxs(Table, { 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) => {
+    return (_jsx("div", { ref: box, className: cn(inView ? IN_VIEW : 'overflow-x-auto overflow-y-hidden [--pin-top:0px]', fit && FIT), children: _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();
                                     }, "aria-sort": h.column.getIsSorted() === 'asc'

package/dist/shell.d.ts

@@ -98,7 +98,7 @@ export interface LumenShellProps {
     children: ReactNode;
 }
 export declare function LumenShell({ app, appLabel, brand, nav, status, health, statusEnd, releases, releaseApps, settings, shared, sharedLabel, settingsGroups, user, signOutUrl, profile, security, onRefresh, hideAmounts, onLogs, headerActions, panel, finder, wrap, children, }: LumenShellProps): import("react").JSX.Element;
-/** A status bar entry: an optional health dot, a label and a mono value. */
+/** A status bar entry: an optional health dot, a label and its value ("Mail · Up to date"). */
 export declare function StatusItem({ label, value, ok, className, }: {
     label: ReactNode;
     value?: ReactNode;

package/dist/shell.js

@@ -141,7 +141,7 @@ export function LumenShell({ app, appLabel, brand, nav, status, health, statusEn
             headerActions,
         }, children: _jsx(SourceHealthProvider, { children: wrap(_jsx(TooltipProvider, { delayDuration: 200, children: _jsx(SidebarProvider, { defaultOpen: sidebarOpen(), children: _jsxs(LumenFinder, { app: app, settings: findSettings, openSettings: openSettings, config: finder, children: [_jsx(CloseDrawerOnNavigate, {}), _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: brand }), _jsx(SidebarContent, { children: nav }), _jsx(SidebarFooter, { children: _jsx(NavUser, { who: user, signOutUrl: signOutUrl, onSettings: () => openSettings(), onLogs: onLogs }) }), _jsx(SidebarRail, {})] }), _jsxs(SidebarInset, { className: "flex min-h-svh min-w-0 flex-col", children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: children }, epoch), _jsxs("footer", { "data-slot": "shell-status", "aria-label": "Status", className: "sticky bottom-0 z-10 flex h-(--shell-status-height) shrink-0 items-center gap-4 overflow-x-auto overflow-y-hidden border-t bg-background px-(--shell-gutter) text-xs whitespace-nowrap text-muted-foreground", children: [status, _jsx("div", { ref: setStatusSlot, className: "flex shrink-0 items-center gap-4" }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: [health, releases && _jsx(WhatsNew, { api: releases, apps: releaseApps }), statusEnd, _jsx(StatusTimeZone, {})] })] })] }), panel, _jsx(LumenSettings, { open: settingsAt !== null, section: settingsAt ?? lastSection, onOpen: openSettings, onClose: () => setSettingsAt(null), appLabel: appLabel, profile: profile, security: security, sections: settings, shared: shared, sharedLabel: sharedLabel, groups: settingsGroups }), _jsx(Toaster, { position: "bottom-right" })] }) }) })) }) }));
 }
-/** A status bar entry: an optional health dot, a label and a mono value. */
+/** A status bar entry: an optional health dot, a label and its value ("Mail · Up to date"). */
 export function StatusItem({ label, value, ok, className, }) {
-    return (_jsxs("span", { className: cn('flex items-center gap-1.5', value === undefined && 'min-w-0', className), children: [ok !== undefined && (_jsx("span", { "aria-hidden": true, className: cn('size-2 shrink-0 rounded-full', ok === null ? 'bg-muted-foreground/40' : ok ? 'bg-gain' : 'bg-destructive') })), _jsx("span", { className: value === undefined ? 'min-w-0 truncate' : 'max-md:hidden', children: label }), value !== undefined && (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "num shrink-0 text-foreground/80", children: value })] }))] }));
+    return (_jsxs("span", { className: cn('flex items-center gap-1.5', value === undefined && 'min-w-0', className), children: [ok !== undefined && (_jsx("span", { "aria-hidden": true, className: cn('size-2 shrink-0 rounded-full', ok === null ? 'bg-muted-foreground/40' : ok ? 'bg-gain' : 'bg-destructive') })), _jsx("span", { className: value === undefined ? 'min-w-0 truncate' : 'max-md:hidden', children: label }), value !== undefined && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "max-md:hidden", children: "\u00B7" }), _jsx("span", { className: "shrink-0 tabular-nums text-foreground/80", children: value })] }))] }));
 }

package/dist/status.d.ts

@@ -1,6 +1,8 @@
 /** Time zone picker: on the right of the status bar, and in Settings. */
-export declare function TimeZoneSelect({ className, }: {
+export declare function TimeZoneSelect({ className, short, }: {
     className?: string;
+    /** Shows the zone's short name (PT), the way every time on the page names it. */
+    short?: boolean;
     /** Kept for callers; the list flips upward by itself where there is no room below. */
     side?: 'top' | 'bottom';
 }): import("react").JSX.Element;

package/dist/status.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from './lib/utils.js';
 import { LumenSelector } from './lumen-selector.js';
-import { TIME_ZONES, setPref, usePrefs } from './prefs.js';
+import { TIME_ZONES, setPref, usePrefs, zoneAbbr } from './prefs.js';
 /** Time zone picker: on the right of the status bar, and in Settings. */
-export function TimeZoneSelect({ className, }) {
+export function TimeZoneSelect({ className, short, }) {
     const { timeZone } = usePrefs();
-    return (_jsx(LumenSelector, { label: "Time zone", size: "sm", className: className, options: TIME_ZONES.map((z) => ({ value: z.id, label: z.label })), value: timeZone, onChange: (v) => setPref('timeZone', v) }));
+    return (_jsx(LumenSelector, { label: "Time zone", size: "sm", className: className, options: TIME_ZONES.map((z) => ({ value: z.id, label: z.label })), value: timeZone, display: short ? zoneAbbr(timeZone) : undefined, onChange: (v) => setPref('timeZone', v) }));
 }
 export function StatusTimeZone({ className }) {
-    return (_jsx("span", { className: cn('flex items-center', className), children: _jsx(TimeZoneSelect, { side: "top", className: "h-6 border-0 px-1.5 text-xs shadow-none" }) }));
+    return (_jsx("span", { className: cn('flex items-center', className), children: _jsx(TimeZoneSelect, { side: "top", short: true, className: "h-6 border-0 px-1.5 text-xs shadow-none" }) }));
 }

package/dist/theme.css

@@ -414,6 +414,82 @@
   left: 100%;
 }
 
+/* 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. */
+@media (max-width: 639px) {
+  table[data-cards],
+  table[data-cards] > tbody,
+  table[data-cards] > tfoot {
+    display: block;
+    width: 100%;
+  }
+  /* A wide table widens its card (the page scrolls sideways); a card table fits the view. */
+  table[data-cards] {
+    max-width: calc(var(--view-w, 100%) - 2px);
+  }
+  table[data-cards] > thead {
+    display: none;
+  }
+  table[data-cards] tr {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    column-gap: 0.75rem;
+    row-gap: 0.125rem;
+    padding: 0.5rem var(--cell-x);
+  }
+  table[data-cards] td {
+    padding: 0 !important;
+    width: auto !important;
+    min-width: 0;
+  }
+  table[data-cards] td[colspan] {
+    flex: 1 1 100%;
+  }
+  table[data-cards] td:not([data-card]):not([colspan]) {
+    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;
+    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;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  table[data-cards] [data-slot="unit-value-unit"] {
+    position: static;
+    margin-left: 0.25em;
+  }
+}
+
 @layer utilities {
   .bg-gap-hatch {
     background: repeating-linear-gradient(135deg, var(--gap) 0 3px, var(--gap-soft) 3px 6px);

package/dist/whats-new.js

@@ -8,6 +8,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // takeaway carries a chip of the app it is about (`apps` on the takeaway; none: everyone), and a
 // release where one app has `GROUP_AT` or more is split into one sub-section per app.
 import { useInfiniteQuery } from '@tanstack/react-query';
+import { SparklesIcon } from 'lucide-react';
 import { useState } from 'react';
 import Markdown from 'react-markdown';
 import { DrawerSection } from './drawer-section.js';
@@ -57,7 +58,7 @@ export function WhatsNew({ api, apps, everyone = 'Global', }) {
     const releases = q.data.pages.flatMap((p) => p ?? []);
     const latest = releases[0];
     const day = (at) => new Date(at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', timeZone });
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", className: "num h-6 px-1.5 text-muted-foreground text-xs", onClick: () => setOpen(true), title: "What's new", children: latest?.tag ?? "What's new" }), _jsxs(LumenDrawer, { open: open, onClose: () => setOpen(false), title: "What's new", description: "Key takeaways of each release, newest first", footerStart: releases.length ? `${releases.length} releases` : undefined, footer: _jsxs(_Fragment, { children: [q.hasNextPage && (_jsx(Button, { variant: "outline", size: "sm", disabled: q.isFetchingNextPage, onClick: () => q.fetchNextPage(), children: "Show more" })), _jsx(Button, { size: "sm", onClick: () => setOpen(false), children: "Close" })] }), children: [!releases.length && (_jsx("p", { className: "py-2 text-muted-foreground text-sm", children: "No releases yet. Each release's key takeaways show here once it ships." })), releases.map((r, i) => (_jsx(DrawerSection, { title: r.tag, hint: day(r.published_at), defaultOpen: i === 0, children: r.takeaways.length ? (_jsx(Notes, { takeaways: r.takeaways, apps: apps, everyone: everyone })) : (_jsx("p", { className: "py-1 pl-1 text-muted-foreground text-sm", children: "Nothing new for you in this one." })) }, r.tag)))] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", size: "sm", className: "h-6 gap-1 px-1.5 text-muted-foreground text-xs", onClick: () => setOpen(true), title: latest ? `What's new · ${latest.tag}` : "What's new", "aria-label": "What's new", children: [_jsx(SparklesIcon, { className: "size-3.5" }), _jsx("span", { className: "max-md:hidden", children: "What's new" })] }), _jsxs(LumenDrawer, { open: open, onClose: () => setOpen(false), title: "What's new", description: "Key takeaways of each release, newest first", footerStart: releases.length ? `${releases.length} releases` : undefined, footer: _jsxs(_Fragment, { children: [q.hasNextPage && (_jsx(Button, { variant: "outline", size: "sm", disabled: q.isFetchingNextPage, onClick: () => q.fetchNextPage(), children: "Show more" })), _jsx(Button, { size: "sm", onClick: () => setOpen(false), children: "Close" })] }), children: [!releases.length && (_jsx("p", { className: "py-2 text-muted-foreground text-sm", children: "No releases yet. Each release's key takeaways show here once it ships." })), releases.map((r, i) => (_jsx(DrawerSection, { title: r.tag, hint: day(r.published_at), defaultOpen: i === 0, children: r.takeaways.length ? (_jsx(Notes, { takeaways: r.takeaways, apps: apps, everyone: everyone })) : (_jsx("p", { className: "py-1 pl-1 text-muted-foreground text-sm", children: "Nothing new for you in this one." })) }, r.tag)))] })] }));
 }
 /** One release's takeaways: a flat list, or one sub-section per app once one app has many. */
 function Notes({ takeaways, apps, everyone, }) {

package/package.json

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