@columenlabs/lumen-ui 0.1.150 → 0.1.152

package/dist/index.d.ts

@@ -82,6 +82,7 @@ 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 { LumenStatusBar, type StatusBarModel, StatusBarProvider, type StatusFact, type StatusPart, type StatusSync, type StatusSyncState, querySync, statusWhen, useStatus, } from './status-bar.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';
 export { type ConnectedDomain, ConnectOffer, connectionFields, linkGroupId } from './connections.js';

package/dist/index.js

@@ -89,6 +89,7 @@ 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 { LumenStatusBar, StatusBarProvider, querySync, statusWhen, useStatus, } from './status-bar.js';
 export { JoinsProvider, SourceStatusItems, YOURS_COLOR, editedCells, editedKey, frameColor, useFrameEdits, useJoins, usedJoinKeys, } from './joins.js';
 export { OriginLegend, originsOf } from './origin-legend.js';
 export { ConnectOffer, connectionFields, linkGroupId } from './connections.js';

package/dist/page.d.ts

@@ -16,7 +16,7 @@ export interface PageHeaderProps {
     layout?: ReactNode;
     /** A short status line beside the breadcrumb (under the title on phone). */
     meta?: ReactNode;
-    /** This page's status bar items (`StatusItem`), shown after the app's own. */
+    /** @deprecated Old JSX items, desktop only; call `useStatus` with data instead. */
     status?: ReactNode;
 }
 /** The fixed-height header; `Page` renders it, or a page with several states renders it itself. */

package/dist/shell.d.ts

@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react';
 import { type LumenFinderConfig } from './lumen-finder.js';
 import { type SettingsGroupDef, type SettingsSectionDef } from './settings.js';
+import { type StatusBarModel } from './status-bar.js';
 interface ShellContext {
     /** The app this page renders in (`data-app` on the root `<html>`). */
     app: string;
@@ -53,7 +54,10 @@ export interface LumenShellProps {
     brand: ReactNode;
     /** The app's sidebar content: `NavGroup`s and `SidebarSection`s. */
     nav: ReactNode;
-    /** App-wide status bar items (health, freshness); pages add their own through `Page`. */
+    /** The app's status bar (DESIGN.md, Status bar): its sync and messages as data; pages add theirs
+     *  with `useStatus`. Running Tasks of this app show by themselves. */
+    bar?: StatusBarModel;
+    /** @deprecated Old JSX items, desktop only; pass `bar`, and pages call `useStatus`. */
     status?: ReactNode;
     /** The services the app checks, as one `StatusHealth` chip at the status bar's end. */
     health?: ReactNode;
@@ -97,7 +101,7 @@ export interface LumenShellProps {
     /** The routed page (usually `<Outlet />`). */
     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;
+export declare function LumenShell({ app, appLabel, brand, nav, bar, 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 its value ("Mail · Up to date"). */
 export declare function StatusItem({ label, value, ok, className, }: {
     label: ReactNode;

package/dist/shell.js

@@ -16,6 +16,7 @@ import { LumenSettings, ThemeToggle, allSettings, } from './settings.js';
 import { DockSlot } from './side-dock.js';
 import { SourceHealthProvider } from './source-health.js';
 import { StatusTimeZone } from './status.js';
+import { LumenStatusBar, StatusBarProvider } from './status-bar.js';
 import { Avatar, AvatarFallback } from './ui/avatar.js';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from './ui/dropdown-menu.js';
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarRail, useSidebar, } from './ui/sidebar.js';
@@ -95,7 +96,7 @@ const settingsFromUrl = (() => {
     window.history.replaceState(window.history.state, '', url);
     return at || 'profile';
 })();
-export function LumenShell({ app, appLabel, brand, nav, status, health, statusEnd, releases, releaseApps, settings, shared, sharedLabel, settingsGroups, user = null, signOutUrl, profile, security, onRefresh, hideAmounts = false, onLogs, headerActions = null, panel, finder, wrap = (frame) => frame, children, }) {
+export function LumenShell({ app, appLabel, brand, nav, bar, status, health, statusEnd, releases, releaseApps, settings, shared, sharedLabel, settingsGroups, user = null, signOutUrl, profile, security, onRefresh, hideAmounts = false, onLogs, headerActions = null, panel, finder, wrap = (frame) => frame, children, }) {
     const [statusSlot, setStatusSlot] = useState(null);
     const [dockSlot, setDockSlot] = useState(null);
     const [refreshing, setRefreshing] = useState(false);
@@ -141,7 +142,7 @@ export function LumenShell({ app, appLabel, brand, nav, status, health, statusEn
             refreshing,
             hideAmounts,
             headerActions,
-        }, children: _jsx(DockSlot.Provider, { value: dockSlot, 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, {})] })] })] }), _jsx("div", { ref: setDockSlot, "data-slot": "shell-dock", className: "contents" }), 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" })] }) }) })) }) }) }));
+        }, children: _jsx(StatusBarProvider, { children: _jsx(DockSlot.Provider, { value: dockSlot, 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), _jsx(LumenStatusBar, { app: app, model: bar, legacy: status, slot: setStatusSlot, end: _jsxs(_Fragment, { children: [health, releases && _jsx(WhatsNew, { api: releases, apps: releaseApps }), statusEnd, _jsx(StatusTimeZone, {})] }) })] }), _jsx("div", { ref: setDockSlot, "data-slot": "shell-dock", className: "contents" }), 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 its value ("Mail · Up to date"). */
 export function StatusItem({ label, value, ok, className, }) {

package/dist/status-bar.d.ts

@@ -0,0 +1,70 @@
+import { type ReactNode } from 'react';
+import { type StatusMessage } from './status-messages.js';
+/** How fresh the page's data is: up to date, reading now, an old copy, no network, or failed. */
+export type StatusSyncState = 'ok' | 'syncing' | 'stale' | 'offline' | 'failed';
+export interface StatusSync {
+    state: StatusSyncState;
+    /** What it syncs with (`Bank feed`); left out, the line reads "Updated 3m ago". */
+    label?: string;
+    /** When the data shown was last read (ms or ISO); null when never. */
+    at?: number | string | null;
+    /** Progress of a sync that counts (`40` of `112`). */
+    done?: number | null;
+    total?: number | null;
+    /** More on hover or tap (why it failed). */
+    note?: string;
+}
+/** A fact this page has nowhere else to show (`Next run in 12m`): plain data, at most two. */
+export interface StatusFact {
+    label: string;
+    value?: string | number;
+    /** A time shown as `in 12m` or `3m ago` after the value, kept current. */
+    at?: number | string | null;
+    /** Green when true, red when false, grey while unknown; no dot when left out. */
+    ok?: boolean | null;
+}
+/** What a page (or any part) adds to the bar through `useStatus`. */
+export interface StatusPart {
+    sync?: StatusSync | null;
+    /** Newest first. */
+    messages?: StatusMessage[];
+    facts?: StatusFact[];
+}
+/** The app's own bar on `LumenShell` (`bar`): its sync and messages, and whether running Tasks show. */
+export interface StatusBarModel {
+    sync?: StatusSync | null;
+    messages?: StatusMessage[];
+    /** App-wide facts (`Next run in 12m`); a page's own come first, two show in all. */
+    facts?: StatusFact[];
+    /** Shows this app's running task from the Tasks list (default true where Tasks is mounted). */
+    work?: boolean;
+}
+/** Holds every part posted with `useStatus`; the shell mounts it around the page and the bar. */
+export declare function StatusBarProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Adds this page's sync, messages and facts to the status bar while it is mounted. Plain data
+ * only; the newest part's sync wins over the app's, messages add up, the first two facts show.
+ */
+export declare function useStatus(part: StatusPart): void;
+/** A TanStack Query result's freshness as a `StatusSync`: the page's main read, with no app code. */
+export declare function querySync(q: {
+    status: 'pending' | 'error' | 'success';
+    fetchStatus: 'fetching' | 'paused' | 'idle';
+    dataUpdatedAt: number;
+    error?: unknown;
+}, label?: string): StatusSync;
+/** `just now`, `3m ago`, `in 12m`, `2h ago`, `3d ago`. */
+export declare function statusWhen(at: number | string | null | undefined, now?: number): string;
+/** The bar itself; `LumenShell` renders it. */
+export declare function LumenStatusBar({ app, model, legacy, slot, end, }: {
+    app: string;
+    model?: StatusBarModel;
+    /** Items from the old `status` prop and pages' `status` (desktop only). */
+    legacy?: ReactNode;
+    /** The pages' old portal slot. */
+    slot: (el: HTMLElement | null) => void;
+    /** Health, What's new, the app's end items and the time zone, in that order. */
+    end: ReactNode;
+}): import("react").JSX.Element;

package/dist/status-bar.js

@@ -0,0 +1,224 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The status bar's model: what is true right now, at a glance, that nobody has to act on
+// (DESIGN.md, Status bar). A banner is for what must be acted on, a toast for what someone just
+// did, a badge for one row or card. Apps and pages pass data, never JSX; the bar draws five slots
+// in a fixed order: Sync · Work · Message · Page facts · End (health, What's new, time zone).
+// On a phone it shows the one most urgent item and a chip that opens the rest in a sheet, so a
+// row never scrolls sideways. Nothing here waits: it draws from what the page already holds.
+import { isActive } from '@columenlabs/lumen-ui-types/tasks';
+import { InfoIcon } from 'lucide-react';
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useState, } from 'react';
+import { useIsMobile } from './hooks/use-mobile.js';
+import { cn } from './lib/utils.js';
+import { STATUS_TRIGGER, StatusMessages, StatusPop, groupStatusMessages, } from './status-messages.js';
+import { useTasks } from './tasks.js';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, } from './ui/sheet.js';
+const MAX_FACTS = 2;
+const RegistryCtx = createContext(null);
+const PartsCtx = createContext([]);
+/** Holds every part posted with `useStatus`; the shell mounts it around the page and the bar. */
+export function StatusBarProvider({ children }) {
+    const [parts, setParts] = useState(() => new Map());
+    const set = useCallback((id, part) => {
+        setParts((prev) => {
+            const next = new Map(prev);
+            if (part)
+                next.set(id, part);
+            else
+                next.delete(id);
+            return next;
+        });
+    }, []);
+    const registry = useMemo(() => ({ set }), [set]);
+    const list = useMemo(() => [...parts.values()], [parts]);
+    return (_jsx(RegistryCtx.Provider, { value: registry, children: _jsx(PartsCtx.Provider, { value: list, children: children }) }));
+}
+/**
+ * Adds this page's sync, messages and facts to the status bar while it is mounted. Plain data
+ * only; the newest part's sync wins over the app's, messages add up, the first two facts show.
+ */
+export function useStatus(part) {
+    const registry = useContext(RegistryCtx);
+    const id = useId();
+    const key = JSON.stringify(part);
+    useEffect(() => {
+        if (!registry)
+            return;
+        registry.set(id, JSON.parse(key));
+        return () => registry.set(id, null);
+    }, [registry, id, key]);
+}
+/** A TanStack Query result's freshness as a `StatusSync`: the page's main read, with no app code. */
+export function querySync(q, label) {
+    const at = q.dataUpdatedAt || null;
+    if (q.fetchStatus === 'paused')
+        return { state: 'offline', label, at };
+    if (q.fetchStatus === 'fetching')
+        return { state: 'syncing', label, at };
+    if (q.status === 'error') {
+        const note = q.error instanceof Error ? q.error.message : undefined;
+        return { state: at ? 'stale' : 'failed', label, at, note };
+    }
+    return { state: q.status === 'success' ? 'ok' : 'syncing', label, at };
+}
+const toMs = (at) => at == null ? null : typeof at === 'number' ? at : Date.parse(at) || null;
+/** `just now`, `3m ago`, `in 12m`, `2h ago`, `3d ago`. */
+export function statusWhen(at, now = Date.now()) {
+    const ms = toMs(at);
+    if (ms === null)
+        return '—';
+    const d = ms - now;
+    const abs = Math.abs(d);
+    if (abs < 45_000)
+        return 'just now';
+    const n = abs < 3_600_000
+        ? `${Math.round(abs / 60_000)}m`
+        : abs < 86_400_000
+            ? `${Math.round(abs / 3_600_000)}h`
+            : `${Math.round(abs / 86_400_000)}d`;
+    return d > 0 ? `in ${n}` : `${n} ago`;
+}
+/** The clock relative times read, ticking every 30 s only while the tab shows. */
+function useNow() {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        let timer;
+        const start = () => {
+            setNow(Date.now());
+            timer = setInterval(() => setNow(Date.now()), 30_000);
+        };
+        const stop = () => clearInterval(timer);
+        const onVis = () => (document.hidden ? stop() : start());
+        if (!document.hidden)
+            start();
+        document.addEventListener('visibilitychange', onVis);
+        return () => {
+            stop();
+            document.removeEventListener('visibilitychange', onVis);
+        };
+    }, []);
+    return now;
+}
+function Mark({ tone }) {
+    if (tone === 'none')
+        return null;
+    if (tone === 'busy')
+        return (_jsx("span", { "aria-hidden": true, className: "size-2.5 shrink-0 animate-spin rounded-full border-2 border-primary border-r-transparent motion-reduce:animate-none" }));
+    return (_jsx("span", { "aria-hidden": true, className: cn('size-2 shrink-0 rounded-full', tone === 'ok' && 'bg-gain', tone === 'warning' && 'bg-warning', tone === 'error' && 'bg-destructive', tone === 'idle' && 'bg-muted-foreground/40') }));
+}
+const TONE_TEXT = {
+    warning: 'text-warning',
+    error: 'text-destructive',
+};
+function syncEntry(s, now) {
+    const when = statusWhen(s.at, now);
+    const count = s.done != null && s.total ? `${s.done.toLocaleString()} of ${s.total.toLocaleString()}` : '';
+    const base = { id: 'sync', detail: s.note };
+    switch (s.state) {
+        case 'syncing':
+            return {
+                ...base,
+                rank: 5,
+                tone: 'busy',
+                text: s.label ? `Syncing ${s.label}` : 'Updating',
+                side: count || undefined,
+            };
+        case 'stale':
+            return { ...base, rank: 3, tone: 'warning', text: 'Saved copy', side: when };
+        case 'offline':
+            return { ...base, rank: 3, tone: 'warning', text: 'Offline · saved copy', side: when };
+        case 'failed':
+            return {
+                ...base,
+                rank: 1,
+                tone: 'error',
+                text: s.label ? `${s.label} did not update` : 'Did not update',
+            };
+        default:
+            return {
+                ...base,
+                rank: 8,
+                tone: 'ok',
+                text: s.label ? `${s.label} synced` : 'Updated',
+                side: when,
+            };
+    }
+}
+function factEntry(f, i, now) {
+    const when = f.at != null ? statusWhen(f.at, now) : '';
+    const value = [f.value, when].filter((v) => v !== undefined && v !== '').join(' ');
+    return {
+        id: `fact:${i}`,
+        rank: 6,
+        tone: f.ok === undefined ? 'none' : f.ok === null ? 'idle' : f.ok ? 'ok' : 'error',
+        text: f.label,
+        side: value || undefined,
+    };
+}
+/** Builds the bar's entries from the app's model and every posted part. */
+function useEntries(model, app) {
+    const parts = useContext(PartsCtx);
+    const tasks = useTasks();
+    const now = useNow();
+    const entries = [];
+    const sync = [...parts].reverse().find((p) => p.sync)?.sync ?? model?.sync ?? null;
+    if (sync)
+        entries.push(syncEntry(sync, now));
+    if (model?.work !== false && tasks?.list) {
+        const mine = tasks.list.tasks.filter((t) => isActive(t) && (t.app === app || !t.app));
+        const t = mine[0];
+        if (t) {
+            const share = t.total ? Math.round(((t.done ?? 0) / t.total) * 100) : null;
+            entries.push({
+                id: 'work',
+                rank: 4,
+                tone: 'busy',
+                text: mine.length > 1 ? `${t.title} +${mine.length - 1}` : t.title,
+                side: share !== null
+                    ? `${share}%`
+                    : t.done != null
+                        ? `${t.done.toLocaleString()} ${t.unit ?? ''}`.trim()
+                        : undefined,
+            });
+        }
+    }
+    const messages = [...parts.flatMap((p) => p.messages ?? []), ...(model?.messages ?? [])];
+    const groups = groupStatusMessages(messages);
+    const top = groups[0];
+    if (top) {
+        const tone = top.tone === 'error' ? 'error' : top.tone === 'warning' ? 'warning' : 'none';
+        entries.push({
+            id: 'messages',
+            rank: tone === 'error' ? 0 : tone === 'warning' ? 2 : 7,
+            tone,
+            text: top.count > 1 ? `${top.text} ×${top.count}` : top.text,
+            side: groups.length > 1 ? `+${groups.length - 1}` : undefined,
+            bar: _jsx(StatusMessages, { messages: messages }),
+        });
+    }
+    [...parts.flatMap((p) => p.facts ?? []), ...(model?.facts ?? [])]
+        .slice(0, MAX_FACTS)
+        .forEach((f, i) => entries.push(factEntry(f, i, now)));
+    return entries;
+}
+function EntryLine({ e }) {
+    if (e.bar)
+        return _jsx(_Fragment, { children: e.bar });
+    const line = (_jsxs(_Fragment, { children: [_jsx(Mark, { tone: e.tone }), _jsx("span", { className: cn('min-w-0 truncate', TONE_TEXT[e.tone]), children: e.text }), e.side && _jsx("span", { className: "shrink-0 tabular-nums text-foreground/80", children: e.side })] }));
+    if (!e.detail)
+        return _jsx("span", { className: "flex h-6 min-w-0 items-center gap-1.5 px-1.5", children: line });
+    return (_jsx(StatusPop, { className: cn(STATUS_TRIGGER, 'min-w-0'), content: _jsx("p", { className: TONE_TEXT[e.tone], children: e.detail }), children: line }));
+}
+function SheetRow({ e }) {
+    return (_jsxs("li", { className: "flex items-start gap-2 border-b py-2 last:border-b-0", children: [_jsx("span", { className: "flex h-5 items-center", children: _jsx(Mark, { tone: e.tone === 'none' ? 'idle' : e.tone }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: cn('break-words', TONE_TEXT[e.tone]), children: e.text }), e.detail && _jsx("span", { className: "block text-muted-foreground", children: e.detail })] }), e.side && _jsx("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: e.side })] }));
+}
+/** The bar itself; `LumenShell` renders it. */
+export function LumenStatusBar({ app, model, legacy, slot, end, }) {
+    const mobile = useIsMobile();
+    const entries = useEntries(model, app);
+    const [open, setOpen] = useState(false);
+    const urgent = [...entries].sort((a, b) => a.rank - b.rank)[0];
+    return (_jsx("footer", { "data-slot": "shell-status", "aria-label": "Status", className: "sticky bottom-0 z-10 flex h-(--shell-status-height) shrink-0 items-center gap-3 overflow-hidden border-t bg-background px-(--shell-gutter) text-xs whitespace-nowrap text-muted-foreground", children: mobile ? (_jsxs(_Fragment, { children: [urgent && (_jsx("span", { "aria-live": "polite", className: "flex min-w-0 items-center", children: _jsx(EntryLine, { e: { ...urgent, bar: undefined, detail: undefined } }) })), _jsx("div", { ref: slot, hidden: true }), entries.length > 0 ? (_jsxs(Sheet, { open: open, onOpenChange: setOpen, children: [_jsxs(SheetTrigger, { className: cn(STATUS_TRIGGER, 'num ml-auto shrink-0 border text-foreground/80'), "aria-label": `Status, ${entries.length} items`, children: [_jsx(InfoIcon, { className: "size-3.5" }), entries.length] }), _jsxs(SheetContent, { side: "bottom", className: "max-h-[75svh] gap-0 rounded-t-2xl p-0 text-sm", onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsxs(SheetHeader, { className: "border-b px-4 py-3", children: [_jsx(SheetTitle, { children: "Status" }), _jsx(SheetDescription, { className: "sr-only", children: "What is true right now" })] }), _jsx("ul", { className: "overflow-y-auto px-4", children: [...entries]
+                                        .sort((a, b) => a.rank - b.rank)
+                                        .map((e) => (_jsx(SheetRow, { e: e }, e.id))) }), _jsx("div", { className: "flex items-center justify-end gap-1 border-t px-4 py-2 text-xs text-muted-foreground", children: end })] })] })) : (_jsx("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: end }))] })) : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-live": "polite", className: "flex min-w-0 items-center gap-3", children: entries.map((e) => (_jsx(EntryLine, { e: e }, e.id))) }), legacy, _jsx("div", { ref: slot, className: "flex shrink-0 items-center gap-4" }), _jsx("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: end })] })) }));
+}

package/dist/status-messages.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export type StatusMessageTone = 'info' | 'success' | 'warning' | 'error';
 export interface StatusMessage {
     text: string;
@@ -11,6 +12,18 @@ interface Group extends Required<StatusMessage> {
 }
 /** One entry per distinct message (same tone, same words), counted, in the order given. */
 export declare function groupStatusMessages(messages: readonly StatusMessage[]): Group[];
+/**
+ * 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`.
+ */
+export declare function StatusPop({ label: name, className, children, content, }: {
+    label?: string;
+    className: string;
+    children: ReactNode;
+    content: ReactNode;
+}): import("react").JSX.Element;
+export declare const STATUS_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";
 /**
  * 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

package/dist/status-messages.js

@@ -45,13 +45,13 @@ const COLLISION_PAD = 8;
  * 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, }) {
+export function StatusPop({ 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';
+export const STATUS_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] }))] }));
+    return (_jsxs(StatusPop, { className: cn(STATUS_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, newest first. Only the latest shows, on one line that ends
@@ -63,5 +63,5 @@ export function StatusMessages({ messages, className, }) {
     const [latest, ...earlier] = groupStatusMessages(messages);
     if (!latest)
         return null;
-    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] }))] }));
+    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(StatusPop, { label: `${earlier.length} earlier messages`, className: cn(STATUS_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/package.json

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