@columenlabs/lumen-ui 0.1.130 → 0.1.132

package/dist/lumen-widget-charts.js

@@ -42,7 +42,7 @@ export function StackedColumns({ rows, x, parts, label, height = 220, tick = Str
     const total = (r) => parts.reduce((n, p) => n + (Number(r[p.key]) || 0), 0);
     // The highest part with a value carries the column's rounded cap.
     const top = (r) => parts.findLast((p) => Number(r[p.key]) > 0)?.key;
-    const ticks = niceTicks(Math.max(0, ...rows.map(total)));
+    const ticks = niceTicks(Math.max(0, ...rows.map(total)), 4, rows.every((r) => Number.isInteger(total(r))));
     return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(ChartContainer, { config: config, role: "img", "aria-label": label, className: "aspect-auto w-full", style: { height }, children: _jsxs(BarChart, { data: rows, margin: { left: 0, right: 0, top: 8, bottom: 0 }, children: [_jsx(CartesianGrid, { vertical: false, strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: x, tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 12, tickFormatter: (v) => tick(String(v)) }), _jsx(YAxis, { tickLine: false, axisLine: false, domain: [0, ticks.at(-1) ?? 'auto'], ticks: ticks, width: axisWidth(ticks.map(fmt)), tick: axisTick(fmt) }), _jsx(ChartTooltip, { cursor: { fill: 'var(--muted)', opacity: 0.5 }, content: _jsx(ChartTooltipContent, { labelFormatter: (_, payload) => {
                                     const r = payload?.[0]?.payload;
                                     return r ? (_jsxs("span", { className: "flex w-full gap-3", children: [_jsx("span", { children: tick(String(r[x])) }), _jsx("span", { className: "num ml-auto", children: fmt(total(r)) })] })) : null;
@@ -54,7 +54,8 @@ export function TimeLines({ rows, x, lines, label, height = 220, tick = String,
     const config = Object.fromEntries(lines.map((l) => [l.key, { label: l.name, color: l.fill }]));
     const axis = (right) => {
         const keys = lines.filter((l) => !!l.right === right).map((l) => l.key);
-        return niceTicks(Math.max(0, ...rows.flatMap((r) => keys.map((k) => Number(r[k]) || 0))));
+        const values = rows.flatMap((r) => keys.map((k) => Number(r[k]) || 0));
+        return niceTicks(Math.max(0, ...values), 4, values.every(Number.isInteger));
     };
     const left = axis(false);
     const hasRight = lines.some((l) => l.right);
@@ -113,14 +114,16 @@ export function AllocationBar({ items, total, config, tooltip, share, }) {
 }
 /**
  * Round axis steps (1, 2, 2.5 or 5 times a power of ten) from 0 to just above `max`, about four
- * of them, so a value axis reads 0, 100k, 200k, 300k rather than 95k, 190k, 285k.
+ * of them, so a value axis reads 0, 100k, 200k, 300k rather than 95k, 190k, 285k. When every value
+ * is a whole number (a count), so is every step: 0, 1, 2 rather than 0, 0.5, 1, 1.5.
  */
-function niceTicks(max, count = 4) {
+function niceTicks(max, count = 4, whole = false) {
     if (!(max > 0))
         return [0, 1];
     const raw = max / count;
     const pow = 10 ** Math.floor(Math.log10(raw));
-    const step = ([1, 2, 2.5, 5, 10].find((m) => m * pow >= raw) ?? 10) * pow;
+    const steps = whole ? [1, 2, 5, 10] : [1, 2, 2.5, 5, 10];
+    const step = Math.max(whole ? 1 : 0, (steps.find((m) => m * pow >= raw) ?? 10) * pow);
     const n = Math.ceil(max / step - 1e-9);
     return Array.from({ length: n + 1 }, (_, i) => Math.round(i * step * 1e6) / 1e6);
 }

package/dist/page.d.ts

@@ -21,7 +21,10 @@ export interface PageHeaderProps {
 }
 /** The fixed-height header; `Page` renders it, or a page with several states renders it itself. */
 export declare function PageHeader({ crumbs, actions, layout, meta, status }: PageHeaderProps): import("react").JSX.Element;
-/** The page body: the shell's gutter, section gap and max width. */
+/**
+ * The page body: the shell's gutter, section gap and max width. A plain block, since the shell's
+ * inset is the page's one `main` landmark.
+ */
 export declare function PageBody({ className, children }: {
     className?: string;
     children: ReactNode;

package/dist/page.js

@@ -36,9 +36,12 @@ export function PageHeader({ crumbs, actions, layout, meta, status }) {
                         isMobile &&
                             '[&_[data-slot=button]]:size-8 [&_[data-slot=button]]:gap-0 [&_[data-slot=button]]:px-0 [&_[data-slot=button]]:text-[0px]'), children: [actions && (_jsxs(_Fragment, { children: [_jsx("div", { "data-slot": "shell-page-actions", className: "flex items-center gap-0.5", children: actions }), _jsx(Separator, { orientation: "vertical", className: "mx-2 data-vertical:h-5 data-vertical:self-center" })] })), _jsxs("div", { "data-slot": "shell-actions", className: "flex items-center gap-0.5", children: [layout, _jsx(LumenFinderButton, {}), hideAmounts && (_jsx(IconButton, { icon: hidden ? EyeOffIcon : EyeIcon, label: hidden ? 'Show amounts' : 'Hide amounts', "aria-pressed": hidden, onClick: () => setPref('hideAmounts', !hidden) })), refresh && (_jsx(IconButton, { icon: RefreshCwIcon, busy: refreshing, label: "Refresh (skip cache)", disabled: refreshing, onClick: () => void refresh() })), headerActions] })] })] }), status && statusSlot && createPortal(status, statusSlot)] }));
 }
-/** The page body: the shell's gutter, section gap and max width. */
+/**
+ * The page body: the shell's gutter, section gap and max width. A plain block, since the shell's
+ * inset is the page's one `main` landmark.
+ */
 export function PageBody({ className, children }) {
-    return (_jsx("main", { className: cn('mx-auto flex w-full max-w-(--shell-max-width) min-w-0 flex-1 flex-col gap-(--shell-section-gap) p-(--shell-gutter)', className), children: children }));
+    return (_jsx("div", { className: cn('mx-auto flex w-full max-w-(--shell-max-width) min-w-0 flex-1 flex-col gap-(--shell-section-gap) p-(--shell-gutter)', className), children: children }));
 }
 export function Page({ className, children, ...header }) {
     return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { ...header }), _jsx(PageBody, { className: className, children: children })] }));

package/dist/status-messages.d.ts

@@ -9,17 +9,17 @@ export interface StatusMessage {
 interface Group extends Required<StatusMessage> {
     count: number;
 }
-/** One entry per distinct message (same tone, same words), counted, most severe first. */
+/** One entry per distinct message (same tone, same words), counted, in the order given. */
 export declare function groupStatusMessages(messages: readonly StatusMessage[]): Group[];
 /**
- * The app's messages in the status bar. Each message is one line that ends in an ellipsis past
- * `--status-message-max`, with its full text on hover or tap; a repeated message shows once with
- * `×N`; past `max` messages (one on a phone), a `+N` chip lists the rest.
+ * The app's messages in the status bar, newest first. Only the latest shows, on one line that ends
+ * in an ellipsis past `--status-message-max`, with its full text on hover or tap; a new message
+ * takes its place rather than adding a second line. A repeat shows once with `×N`, and the earlier
+ * messages sit behind a `+N` chip that lists them.
  */
-export declare function StatusMessages({ messages, max, className, }: {
+export declare function StatusMessages({ messages, className, }: {
+    /** Newest first. */
     messages: readonly StatusMessage[];
-    /** How many messages show at once on a wider screen; the rest go behind the `+N` chip. */
-    max?: number;
     className?: string;
 }): import("react").JSX.Element | null;
 export {};

package/dist/status-messages.js

@@ -1,10 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useHoverOpen } from './hooks/use-hover-open.js';
-import { useIsMobile } from './hooks/use-mobile.js';
 import { cn } from './lib/utils.js';
 import { Popover, PopoverContent, PopoverTrigger } from './ui/popover.js';
-/** Errors first, then warnings, so the message that matters most is the one in view. */
-const RANK = { error: 0, warning: 1, success: 2, info: 3 };
 const TEXT = {
     error: 'text-destructive',
     warning: 'text-warning',
@@ -17,7 +14,7 @@ const DOT = {
     success: 'bg-gain',
     info: undefined,
 };
-/** One entry per distinct message (same tone, same words), counted, most severe first. */
+/** One entry per distinct message (same tone, same words), counted, in the order given. */
 export function groupStatusMessages(messages) {
     const groups = new Map();
     for (const m of messages) {
@@ -33,8 +30,8 @@ export function groupStatusMessages(messages) {
         else
             groups.set(key, { text, tone, count });
     }
-    // Map keeps first-seen order; the sort is stable, so equal tones keep it.
-    return [...groups.values()].sort((a, b) => RANK[a.tone] - RANK[b.tone]);
+    // Map keeps first-seen order, so the latest message stays first.
+    return [...groups.values()];
 }
 const label = (g) => (g.count > 1 ? `${g.text} (×${g.count})` : g.text);
 function Dot({ tone }) {
@@ -57,16 +54,14 @@ function Line({ group }) {
     return (_jsxs(Pop, { className: cn(TRIGGER, 'min-w-0 max-w-(--status-message-max)'), content: _jsx("p", { className: TEXT[group.tone], children: label(group) }), children: [_jsx(Dot, { tone: group.tone }), _jsx("span", { className: cn('min-w-0 truncate', TEXT[group.tone]), children: group.text }), group.count > 1 && (_jsxs("span", { className: "num shrink-0 text-foreground/80", "aria-label": `${group.count} times`, children: ["\u00D7", group.count] }))] }));
 }
 /**
- * The app's messages in the status bar. Each message is one line that ends in an ellipsis past
- * `--status-message-max`, with its full text on hover or tap; a repeated message shows once with
- * `×N`; past `max` messages (one on a phone), a `+N` chip lists the rest.
+ * The app's messages in the status bar, newest first. Only the latest shows, on one line that ends
+ * in an ellipsis past `--status-message-max`, with its full text on hover or tap; a new message
+ * takes its place rather than adding a second line. A repeat shows once with `×N`, and the earlier
+ * messages sit behind a `+N` chip that lists them.
  */
-export function StatusMessages({ messages, max = 2, className, }) {
-    const phone = useIsMobile();
-    const groups = groupStatusMessages(messages);
-    if (!groups.length)
+export function StatusMessages({ messages, className, }) {
+    const [latest, ...earlier] = groupStatusMessages(messages);
+    if (!latest)
         return null;
-    const shown = groups.slice(0, phone ? 1 : Math.max(1, max));
-    const rest = groups.slice(shown.length);
-    return (_jsxs("span", { "aria-live": "polite", className: cn('flex min-w-0 items-center gap-2', className), children: [shown.map((g) => (_jsx(Line, { group: g }, `${g.tone}:${g.text}`))), rest.length > 0 && (_jsxs(Pop, { label: `${rest.length} more messages`, className: cn(TRIGGER, 'num shrink-0 text-foreground/80'), content: _jsx("ul", { className: "flex flex-col gap-1", children: rest.map((g) => (_jsxs("li", { className: "flex items-start gap-1.5", children: [_jsx("span", { className: "flex h-4 items-center", children: _jsx(Dot, { tone: g.tone }) }), _jsx("span", { className: TEXT[g.tone], children: label(g) })] }, `${g.tone}:${g.text}`))) }), children: ["+", rest.length] }))] }));
+    return (_jsxs("span", { "aria-live": "polite", className: cn('flex min-w-0 items-center gap-2', className), children: [_jsx(Line, { group: latest }), earlier.length > 0 && (_jsxs(Pop, { label: `${earlier.length} earlier messages`, className: cn(TRIGGER, 'num shrink-0 text-foreground/80'), content: _jsx("ul", { className: "flex flex-col gap-1", children: earlier.map((g) => (_jsxs("li", { className: "flex items-start gap-1.5", children: [_jsx("span", { className: "flex h-4 items-center", children: _jsx(Dot, { tone: g.tone }) }), _jsx("span", { className: TEXT[g.tone], children: label(g) })] }, `${g.tone}:${g.text}`))) }), children: ["+", earlier.length] }))] }));
 }

package/dist/theme.css

@@ -89,8 +89,8 @@
   --shell-header-height: 48px;
   --shell-status-height: 32px;
   /* A status bar message ends in an ellipsis here (StatusMessages), so it fits beside the bar's
-     other items; the full text opens on hover or tap. A phone shows one message, a wider screen two. */
-  --status-message-max: 45vw;
+     other items; the full text opens on hover or tap. */
+  --status-message-max: 55vw;
   --tile-width: 8.5rem;
   --shell-gutter: 12px;
   --shell-section-gap: 12px;
@@ -215,7 +215,7 @@
 @media (min-width: 768px) {
   :root {
     --shell-gutter: 16px;
-    --status-message-max: min(28rem, 30vw);
+    --status-message-max: min(40rem, 45vw);
   }
 }
 

package/package.json

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