@columenlabs/lumen-ui 0.1.113 → 0.1.114

package/dist/hooks/use-hover-open.d.ts

@@ -0,0 +1,23 @@
+/** Focus stays on the trigger: moving it into the pop-up, or back on close, would dismiss a
+ *  neighbour's pop-up the mouse just opened (Radix closes a pop-up on focus outside). */
+declare const keepFocus: (e: Event) => void;
+/**
+ * Open state for a status bar pop-up that opens on hover with a mouse and on tap with a finger or
+ * keyboard (a `Popover`'s own trigger). Spread `hover` on the trigger and `content` on the
+ * `PopoverContent`.
+ */
+export declare function useHoverOpen(): {
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    hover: {
+        onPointerEnter: (e: React.PointerEvent) => void;
+        onPointerLeave: (e: React.PointerEvent) => void;
+    };
+    content: {
+        onPointerEnter: (e: React.PointerEvent) => void;
+        onPointerLeave: (e: React.PointerEvent) => void;
+        onOpenAutoFocus: typeof keepFocus;
+        onCloseAutoFocus: typeof keepFocus;
+    };
+};
+export {};

package/dist/hooks/use-hover-open.js

@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from 'react';
+/** How long a pop-up stays after the mouse leaves, so it can travel from trigger to pop-up. */
+const HOVER_CLOSE_MS = 150;
+/** Focus stays on the trigger: moving it into the pop-up, or back on close, would dismiss a
+ *  neighbour's pop-up the mouse just opened (Radix closes a pop-up on focus outside). */
+const keepFocus = (e) => e.preventDefault();
+/**
+ * Open state for a status bar pop-up that opens on hover with a mouse and on tap with a finger or
+ * keyboard (a `Popover`'s own trigger). Spread `hover` on the trigger and `content` on the
+ * `PopoverContent`.
+ */
+export function useHoverOpen() {
+    const [open, setOpen] = useState(false);
+    const timer = useRef(undefined);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const hover = (on) => (e) => {
+        if (e.pointerType !== 'mouse')
+            return;
+        clearTimeout(timer.current);
+        if (on)
+            setOpen(true);
+        else
+            timer.current = setTimeout(() => setOpen(false), HOVER_CLOSE_MS);
+    };
+    const handlers = { onPointerEnter: hover(true), onPointerLeave: hover(false) };
+    return {
+        open,
+        setOpen,
+        hover: handlers,
+        content: { ...handlers, onOpenAutoFocus: keepFocus, onCloseAutoFocus: keepFocus },
+    };
+}

package/dist/index.d.ts

@@ -78,6 +78,7 @@ export { LumenShell, type LumenShellProps, type ShellUser, StatusItem, firstName
 export { apiJson } from './api-fetch.js';
 export { cn } from './lib/utils.js';
 export { type HealthProbe, StatusHealth } from './status-health.js';
+export { type StatusMessage, type StatusMessageTone, StatusMessages, groupStatusMessages, } from './status-messages.js';
 export { TimeZoneSelect } from './status.js';
 export { type AccountFacts, type JoinReaders, JoinsProvider, SourceStatusItems, YOURS_COLOR, editedCells, editedKey, frameColor, useFrameEdits, useJoins, usedJoinKeys, } from './joins.js';
 export { OriginLegend, originsOf } from './origin-legend.js';

package/dist/index.js

@@ -85,6 +85,7 @@ export { LumenShell, StatusItem, firstName, initials, maskAmount, useAmountsHidd
 export { apiJson } from './api-fetch.js';
 export { cn } from './lib/utils.js';
 export { StatusHealth } from './status-health.js';
+export { StatusMessages, groupStatusMessages, } from './status-messages.js';
 export { TimeZoneSelect } from './status.js';
 export { JoinsProvider, SourceStatusItems, YOURS_COLOR, editedCells, editedKey, frameColor, useFrameEdits, useJoins, usedJoinKeys, } from './joins.js';
 export { OriginLegend, originsOf } from './origin-legend.js';

package/dist/status-health.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export interface HealthProbe {
     name: string;
     /** Up when true, down when false, not checked yet when null. */

package/dist/status-health.js

@@ -1,12 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Service health in the status bar ("consolidate into a clickable or hoverable
-// pop-up"): one chip with the worst state of every service the app checks, opening a list of each
-// service and its latency, on hover with a mouse and on tap with a finger or keyboard.
-import { useEffect, useRef, useState } from 'react';
+import { useHoverOpen } from './hooks/use-hover-open.js';
 import { cn } from './lib/utils.js';
 import { Popover, PopoverContent, PopoverTrigger } from './ui/popover.js';
-/** How long the list stays after the mouse leaves, so it can travel from chip to list. */
-const HOVER_CLOSE_MS = 150;
 /** Keeps the list off the window's edge on a narrow screen. */
 const COLLISION_PAD = 8;
 const dot = (ok) => cn('size-2 shrink-0 rounded-full', ok === null ? 'bg-muted-foreground/40' : ok ? 'bg-gain' : 'bg-destructive');
@@ -22,20 +17,9 @@ function summary(probes) {
     return { ok: true, text: 'All up' };
 }
 export function StatusHealth({ probes, checked, error, }) {
-    const [open, setOpen] = useState(false);
-    const timer = useRef(undefined);
-    useEffect(() => () => clearTimeout(timer.current), []);
-    const hover = (on) => (e) => {
-        if (e.pointerType !== 'mouse')
-            return;
-        clearTimeout(timer.current);
-        if (on)
-            setOpen(true);
-        else
-            timer.current = setTimeout(() => setOpen(false), HOVER_CLOSE_MS);
-    };
+    const { open, setOpen, hover, content: pop } = useHoverOpen();
     if (!probes.length && !error)
         return null;
     const s = error ? { ok: false, text: 'Check failed' } : summary(probes);
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { "aria-label": `Services: ${s.text}`, className: "flex h-6 shrink-0 items-center gap-1.5 rounded-md px-1.5 hover:bg-muted hover:text-foreground", onPointerEnter: hover(true), onPointerLeave: hover(false), children: [_jsx("span", { "aria-hidden": true, className: dot(s.ok) }), "Services", _jsx("span", { className: cn('num', s.ok === false ? 'text-destructive' : 'text-foreground/80'), children: s.text })] }), _jsxs(PopoverContent, { side: "top", align: "end", collisionPadding: COLLISION_PAD, className: "w-auto min-w-56 gap-1.5 text-xs", onPointerEnter: hover(true), onPointerLeave: hover(false), onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsx("ul", { "aria-label": "Services", className: "flex flex-col gap-1", children: probes.map((p) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: dot(p.ok) }), _jsxs("span", { className: "flex-1", children: [p.name, p.note && _jsx("span", { className: "ml-1.5 text-muted-foreground", children: p.note })] }), _jsx("span", { className: cn('num', p.ok === false ? 'text-destructive' : 'text-foreground/80'), children: p.ok === false ? 'down' : p.ms != null ? `${p.ms} ms` : '—' })] }, p.name))) }), error && _jsx("p", { className: "text-destructive", children: error }), checked && (_jsxs("p", { className: "border-t pt-1.5 text-muted-foreground", children: ["Checked ", _jsx("span", { className: "num", children: checked })] }))] })] }));
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { "aria-label": `Services: ${s.text}`, className: "flex h-6 shrink-0 items-center gap-1.5 rounded-md px-1.5 hover:bg-muted hover:text-foreground", ...hover, children: [_jsx("span", { "aria-hidden": true, className: dot(s.ok) }), "Services", _jsx("span", { className: cn('num', s.ok === false ? 'text-destructive' : 'text-foreground/80'), children: s.text })] }), _jsxs(PopoverContent, { side: "top", align: "end", collisionPadding: COLLISION_PAD, className: "w-auto min-w-56 gap-1.5 text-xs", ...pop, children: [_jsx("ul", { "aria-label": "Services", className: "flex flex-col gap-1", children: probes.map((p) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: dot(p.ok) }), _jsxs("span", { className: "flex-1", children: [p.name, p.note && _jsx("span", { className: "ml-1.5 text-muted-foreground", children: p.note })] }), _jsx("span", { className: cn('num', p.ok === false ? 'text-destructive' : 'text-foreground/80'), children: p.ok === false ? 'down' : p.ms != null ? `${p.ms} ms` : '—' })] }, p.name))) }), error && _jsx("p", { className: "text-destructive", children: error }), checked && (_jsxs("p", { className: "border-t pt-1.5 text-muted-foreground", children: ["Checked ", _jsx("span", { className: "num", children: checked })] }))] })] }));
 }

package/dist/status-messages.d.ts

@@ -0,0 +1,25 @@
+export type StatusMessageTone = 'info' | 'success' | 'warning' | 'error';
+export interface StatusMessage {
+    text: string;
+    /** Colours the text and its dot: error red, warning amber, success green; info has no dot. */
+    tone?: StatusMessageTone;
+    /** How many times it was posted, for an app that counts repeats itself; repeats in the list add up too. */
+    count?: number;
+}
+interface Group extends Required<StatusMessage> {
+    count: number;
+}
+/** One entry per distinct message (same tone, same words), counted, most severe first. */
+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.
+ */
+export declare function StatusMessages({ messages, max, className, }: {
+    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

@@ -0,0 +1,72 @@
+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',
+    success: undefined,
+    info: undefined,
+};
+const DOT = {
+    error: 'bg-destructive',
+    warning: 'bg-warning',
+    success: 'bg-gain',
+    info: undefined,
+};
+/** One entry per distinct message (same tone, same words), counted, most severe first. */
+export function groupStatusMessages(messages) {
+    const groups = new Map();
+    for (const m of messages) {
+        const text = m.text.replace(/\s+/g, ' ').trim();
+        if (!text)
+            continue;
+        const tone = m.tone ?? 'info';
+        const key = `${tone}\u0000${text}`;
+        const count = Math.max(1, m.count ?? 1);
+        const g = groups.get(key);
+        if (g)
+            g.count += count;
+        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]);
+}
+const label = (g) => (g.count > 1 ? `${g.text} (×${g.count})` : g.text);
+function Dot({ tone }) {
+    const color = DOT[tone];
+    return color ? _jsx("span", { "aria-hidden": true, className: cn('size-2 shrink-0 rounded-full', color) }) : null;
+}
+/** Keeps the pop-up off the window's edge on a narrow screen. */
+const COLLISION_PAD = 8;
+/**
+ * A status bar trigger whose pop-up opens on hover with a mouse and on tap with a finger or
+ * keyboard, like the services chip, so a phone can read the full text too (a tooltip never opens
+ * on touch). Styled on its own classes only: a trigger owns `data-state`.
+ */
+function Pop({ label: name, className, children, content, }) {
+    const { open, setOpen, hover, content: pop } = useHoverOpen();
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { "aria-label": name, className: className, ...hover, children: children }), _jsx(PopoverContent, { side: "top", align: "start", collisionPadding: COLLISION_PAD, className: "w-auto max-w-sm gap-1.5 text-xs break-words", ...pop, children: content })] }));
+}
+const TRIGGER = 'flex h-6 items-center gap-1.5 rounded-md px-1.5 hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none';
+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.
+ */
+export function StatusMessages({ messages, max = 2, className, }) {
+    const phone = useIsMobile();
+    const groups = groupStatusMessages(messages);
+    if (!groups.length)
+        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] }))] }));
+}

package/dist/theme.css

@@ -88,6 +88,9 @@
   --shell-assistant-width: 26rem;
   --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;
   --tile-width: 8.5rem;
   --shell-gutter: 12px;
   --shell-section-gap: 12px;
@@ -209,6 +212,7 @@
 @media (min-width: 768px) {
   :root {
     --shell-gutter: 16px;
+    --status-message-max: min(28rem, 30vw);
   }
 }
 

package/package.json

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