@columenlabs/lumen-ui 0.1.151 → 0.1.153

package/dist/add-column.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HashIcon, TypeIcon } from 'lucide-react';
+import { HashIcon, PlusIcon, TypeIcon } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useAssistantName } from './assistant-context.js';
 import { SaveButton } from './form-issues.js';
@@ -26,7 +26,7 @@ export function AddFormulaDialog({ open, onOpenChange, domain, formulas, onAdd,
     }, [open]);
     const issue = formulaIssues([...formulas, draft], domain)[formulas.length] ?? null;
     const readable = formulaOptions(domain, formulas);
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "flex max-h-[calc(100svh-2rem)] flex-col gap-0 [--dialog-pad:0px] sm:max-w-2xl max-md:h-svh max-md:max-h-svh max-md:max-w-full max-md:rounded-none", children: [_jsxs(DialogHeader, { className: "border-b px-4 py-3", children: [_jsx(DialogTitle, { className: "text-sm", children: "Add a formula column" }), _jsx(DialogDescription, { children: "A column computed from the other columns, like weight or upside. Saved with the view." })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx(FormulaForm, { formula: draft, issue: issue, fields: readable, onChange: (p) => setDraft({ ...draft, ...p }) }) }), _jsxs(DialogFooter, { className: "border-t px-4 py-3", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => onOpenChange(false), children: "Cancel" }), _jsx(SaveButton, { label: "Add column", icon: null, issues: issue
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "flex max-h-[calc(100svh-2rem)] flex-col gap-0 [--dialog-pad:0px] sm:max-w-2xl max-md:h-svh max-md:max-h-svh max-md:max-w-full max-md:rounded-none", children: [_jsxs(DialogHeader, { className: "border-b px-4 py-3", children: [_jsx(DialogTitle, { className: "text-sm", children: "Add a formula column" }), _jsx(DialogDescription, { children: "A column computed from the other columns, like weight or upside. Saved with the view." })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx(FormulaForm, { formula: draft, issue: issue, fields: readable, onChange: (p) => setDraft({ ...draft, ...p }) }) }), _jsxs(DialogFooter, { className: "border-t px-4 py-3", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => onOpenChange(false), children: "Cancel" }), _jsx(SaveButton, { label: "Add column", icon: PlusIcon, issues: issue
                                 ? [
                                     {
                                         where: `Formula ${draft.label || draft.key}`,

package/dist/assistant/settings.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { CoinsIcon, GlobeIcon, InboxIcon, KeyRoundIcon, LayersIcon, Link2Icon, LogInIcon, ReceiptIcon, SparklesIcon, WrenchIcon, } from 'lucide-react';
+import { CoinsIcon, GlobeIcon, InboxIcon, KeyRoundIcon, LayersIcon, Link2Icon, LogInIcon, ReceiptIcon, SendIcon, SparklesIcon, WrenchIcon, } from 'lucide-react';
 import { useId, useState } from 'react';
 import { ConnectionLogo, LumenConnection, } from '../connection.js';
 import { LumenExpandList, LumenExpandRow } from '../expand-list.js';
@@ -298,7 +298,7 @@ function Allowance({ client }) {
                     : [{ where: 'What for', message: 'Say what it is for', target: whyId }]),
             ];
             const ask = () => void apply('request', () => requestMore(Number(pick), why.trim()), 'Request sent').then((ok) => ok && setWhy(''));
-            return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex flex-col gap-2 border-b pb-3", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "font-semibold text-2xl tabular-nums", children: n(a.left) }), _jsxs("span", { className: "text-muted-foreground text-sm", children: ["left of ", n(a.total), a.period === 'month' ? ' this month' : ''] })] }), _jsx(ShareMeter, { value: a.total > 0 ? a.used / a.total : 1, wide: true })] }), r && (_jsx(Row, { label: `Asked for ${n(r.amount)} · ${day(r.at)}`, info: r.why || undefined, children: _jsxs("div", { className: "flex items-center gap-2 text-sm", children: [r.status === 'granted' && r.granted !== undefined && (_jsxs("span", { className: "tabular-nums", children: ["+", n(r.granted)] })), _jsx(RequestBadge, { r: r })] }) })), r?.status === 'open' ? (_jsx("p", { className: "pt-3 text-muted-foreground text-sm", children: "You can ask again once this one is decided." })) : (_jsxs("div", { className: "flex flex-col gap-2 pt-3", children: [_jsx(Input, { id: whyId, "aria-label": "What for", placeholder: "What it is for", className: "h-8 w-full", maxLength: 500, value: why, onChange: (e) => setWhy(e.target.value) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(LumenSelector, { label: "Amount", size: "sm", className: "w-40", value: pick, options: a.amounts.map((x) => ({ value: String(x), label: n(x) })), onChange: (v) => setAmount(v) }), _jsx(SaveButton, { issues: issues, label: "Request more", icon: null, busy: busy === 'request', onSave: ask })] })] }))] }));
+            return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex flex-col gap-2 border-b pb-3", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "font-semibold text-2xl tabular-nums", children: n(a.left) }), _jsxs("span", { className: "text-muted-foreground text-sm", children: ["left of ", n(a.total), a.period === 'month' ? ' this month' : ''] })] }), _jsx(ShareMeter, { value: a.total > 0 ? a.used / a.total : 1, wide: true })] }), r && (_jsx(Row, { label: `Asked for ${n(r.amount)} · ${day(r.at)}`, info: r.why || undefined, children: _jsxs("div", { className: "flex items-center gap-2 text-sm", children: [r.status === 'granted' && r.granted !== undefined && (_jsxs("span", { className: "tabular-nums", children: ["+", n(r.granted)] })), _jsx(RequestBadge, { r: r })] }) })), r?.status === 'open' ? (_jsx("p", { className: "pt-3 text-muted-foreground text-sm", children: "You can ask again once this one is decided." })) : (_jsxs("div", { className: "flex flex-col gap-2 pt-3", children: [_jsx(Input, { id: whyId, "aria-label": "What for", placeholder: "What it is for", className: "h-8 w-full", maxLength: 500, value: why, onChange: (e) => setWhy(e.target.value) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(LumenSelector, { label: "Amount", size: "sm", className: "w-40", value: pick, options: a.amounts.map((x) => ({ value: String(x), label: n(x) })), onChange: (v) => setAmount(v) }), _jsx(SaveButton, { issues: issues, label: "Request more", icon: SendIcon, busy: busy === 'request', onSave: ask })] })] }))] }));
         } }));
 }
 /** One request, opened in place to grant (any amount) or decline. */

package/dist/form-issues.d.ts

@@ -13,12 +13,15 @@ export interface FormIssue {
 export declare function goToIssue(issue: FormIssue): void;
 /**
  * Save, and before it, while anything needs fixing, a chip with the count that lists each issue.
- * Save stays tappable then and takes the person to the first issue instead of saving.
+ * Save stays tappable then and takes the person to the first issue instead of saving. Save is an
+ * icon (DESIGN.md, Actions: icon first): `label` is its tooltip and accessible name, never text.
  */
 export declare function SaveButton({ issues, onSave, label, icon: Icon, busy, disabled, type, className, }: {
     issues: FormIssue[];
     onSave?: () => void;
+    /** The tooltip and accessible name. */
     label?: string;
+    /** `null` is the check, as left out. */
     icon?: ComponentType<{
         className?: string;
     }> | null;

package/dist/form-issues.js

@@ -4,8 +4,9 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // issue: the editor opens its section or tab (`reveal`), then the field scrolls into view, takes
 // the cursor and flashes red once. Nothing saves while an issue stands. Every editor and form in
 // the suite uses this in place of a silent disabled Save.
-import { CheckIcon, TriangleAlertIcon } from 'lucide-react';
+import { CheckIcon, LoaderCircleIcon, TriangleAlertIcon } from 'lucide-react';
 import { useState } from 'react';
+import { IconButton } from './icon-button.js';
 import { cn } from './lib/utils.js';
 import { Button } from './ui/button.js';
 import { Popover, PopoverContent, PopoverTrigger } from './ui/popover.js';
@@ -37,7 +38,8 @@ export function goToIssue(issue) {
 }
 /**
  * Save, and before it, while anything needs fixing, a chip with the count that lists each issue.
- * Save stays tappable then and takes the person to the first issue instead of saving.
+ * Save stays tappable then and takes the person to the first issue instead of saving. Save is an
+ * icon (DESIGN.md, Actions: icon first): `label` is its tooltip and accessible name, never text.
  */
 export function SaveButton({ issues, onSave, label = 'Save', icon: Icon = CheckIcon, busy = false, disabled = false, type = 'button', className, }) {
     const [open, setOpen] = useState(false);
@@ -47,14 +49,14 @@ export function SaveButton({ issues, onSave, label = 'Save', icon: Icon = CheckI
         setOpen(false);
         goToIssue(issue);
     };
-    return (_jsxs(_Fragment, { children: [blocked && (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "text-destructive hover:text-destructive", children: [_jsx(TriangleAlertIcon, {}), issues.length, " to fix"] }) }), _jsxs(PopoverContent, { align: "end", className: "w-80 gap-1 p-1", children: [_jsxs("p", { className: "px-2 pt-1 text-xs text-muted-foreground", children: ["Fix ", issues.length === 1 ? 'this' : 'these', " to save. Tap one to go to it."] }), issues.map((issue, i) => (_jsxs(Button
+    return (_jsxs(_Fragment, { children: [blocked && (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": `${issues.length} to fix`, title: `${issues.length} to fix`, className: "num text-destructive hover:text-destructive", children: [_jsx(TriangleAlertIcon, {}), issues.length] }) }), _jsxs(PopoverContent, { align: "end", className: "w-80 gap-1 p-1", children: [_jsxs("p", { className: "px-2 pt-1 text-xs text-muted-foreground", children: ["Fix ", issues.length === 1 ? 'this' : 'these', " to save. Tap one to go to it."] }), issues.map((issue, i) => (_jsxs(Button
                             // biome-ignore lint/suspicious/noArrayIndexKey: two issues can share a place and message.
-                            , { type: "button", variant: "ghost", size: "sm", className: "h-auto w-full flex-col items-start gap-0 px-2 py-1.5 text-left font-normal whitespace-normal", onClick: () => go(issue), children: [_jsx("span", { className: "text-xs font-medium", children: issue.where }), _jsx("span", { className: "text-xs text-destructive", children: issue.message })] }, i)))] })] })), _jsxs(Button, { type: blocked ? 'button' : type, size: "sm", disabled: disabled || busy, "aria-disabled": blocked || undefined, className: cn(blocked && 'opacity-50', className), onClick: (e) => {
+                            , { type: "button", variant: "ghost", size: "sm", className: "h-auto w-full flex-col items-start gap-0 px-2 py-1.5 text-left font-normal whitespace-normal", onClick: () => go(issue), children: [_jsx("span", { className: "text-xs font-medium", children: issue.where }), _jsx("span", { className: "text-xs text-destructive", children: issue.message })] }, i)))] })] })), _jsx(IconButton, { icon: busy ? LoaderCircleIcon : (Icon ?? CheckIcon), label: blocked ? `${label}: ${issues.length} to fix` : label, variant: "default", size: "icon-sm", type: blocked ? 'button' : type, busy: busy, disabled: disabled || busy, "aria-disabled": blocked || undefined, className: cn(blocked && 'opacity-50', className), onClick: (e) => {
                     if (first) {
                         e.preventDefault();
                         go(first);
                     }
                     else if (type === 'button')
                         onSave?.();
-                }, children: [Icon && _jsx(Icon, {}), label] })] }));
+                } })] }));
 }

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/lumen-drawer.d.ts

@@ -9,7 +9,7 @@ export interface LumenDrawerProps {
     description?: ReactNode;
     /** Stacked DrawerSections; the drawer pads and scrolls them. */
     children: ReactNode;
-    /** The footer's actions, right-aligned (a destructive action, Cancel and Save); Close when left out. */
+    /** The footer's actions, right-aligned, icon first (`IconButton`, `SaveButton`); no footer when left out. */
     footer?: ReactNode;
     /** Left side of the footer: a count or status line ("12 releases"). */
     footerStart?: ReactNode;

package/dist/lumen-drawer.js

@@ -6,7 +6,6 @@ import { useIsMobile } from './hooks/use-mobile.js';
 import { IconButton } from './icon-button.js';
 import { lazyPart } from './lazy-part.js';
 import { ResizeEdge, tabState, useDockSlot } from './side-dock.js';
-import { Button } from './ui/button.js';
 import { pickerOpen } from './ui/overlay-guard.js';
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from './ui/sheet.js';
 /** The resizable panels load with the first drawer opened; until then it opens at its default width. */
@@ -34,16 +33,14 @@ export function LumenDrawer({ open, onClose, title, description, children, foote
     }, [isMobile]);
     const head = (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx(SheetTitle, { className: "truncate", title: typeof title === 'string' ? title : undefined, children: title }), _jsx(SheetDescription, { className: description ? 'truncate text-muted-foreground text-xs' : 'sr-only', title: typeof description === 'string' ? description : undefined, children: description ?? 'Details' })] }));
     const body = _jsx("div", { className: "flex flex-col px-4 pb-4", children: children });
-    // Every drawer ends on a footer, styled like a dialog's: the body scrolls above it and always
-    // ends on a clear edge. Without actions of its own it offers Close, except on a phone, where the
-    // sheet's X already closes it and a second Close only took room.
-    const plain = !footer && !footerStart;
-    const foot = (_jsxs("footer", { "data-slot": "drawer-footer", className: "flex shrink-0 items-center gap-2 border-t bg-muted/50 px-4 py-2.5", children: [footerStart && (_jsx("div", { className: "min-w-0 flex-1 truncate text-muted-foreground text-xs", children: footerStart })), _jsx("div", { className: "ml-auto flex items-center gap-2", children: footer ?? (_jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: onClose, children: "Close" })) })] }));
+    // A drawer with actions ends on a footer, styled like a dialog's: the body scrolls above it and
+    // ends on a clear edge. Without actions it has none: the header's × already closes it.
+    const foot = (footer || footerStart) && (_jsxs("footer", { "data-slot": "drawer-footer", className: "flex shrink-0 items-center gap-2 border-t bg-muted/50 px-4 py-2.5", children: [footerStart && (_jsx("div", { className: "min-w-0 flex-1 truncate text-muted-foreground text-xs", children: footerStart })), _jsx("div", { className: "ml-auto flex items-center gap-2", children: footer })] }));
     if (dock && !isMobile && slot)
         return open
             ? createPortal(_jsx(DockedDrawer, { dock: dock, title: title, description: description, onClose: onClose, defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, body: body, foot: foot }), slot)
             : null;
-    return (_jsx(Sheet, { open: open, onOpenChange: (o) => !o && onClose(), modal: isMobile, children: isMobile ? (_jsxs(SheetContent, { side: "bottom", className: "max-h-[85svh] gap-0 overflow-hidden", children: [_jsx(SheetHeader, { className: "order-first shrink-0 border-b pt-3", children: head }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: body }), !plain && foot] })) : (_jsx(SheetContent, { side: "right", showCloseButton: false, 
+    return (_jsx(Sheet, { open: open, onOpenChange: (o) => !o && onClose(), modal: isMobile, children: isMobile ? (_jsxs(SheetContent, { side: "bottom", className: "max-h-[85svh] gap-0 overflow-hidden", children: [_jsx(SheetHeader, { className: "order-first shrink-0 border-b pt-3", children: head }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: body }), foot] })) : (_jsx(SheetContent, { side: "right", showCloseButton: false, 
             // The resize handle's grab zone is wider than the handle, so a drag can start on the
             // overlay; the panels library marks that pointerdown handled, and then it doesn't close.
             onPointerDownOutside: (e) => e.detail.originalEvent.defaultPrevented && e.preventDefault(), className: "pointer-events-none! gap-0 border-0 bg-transparent shadow-none data-[side=right]:left-0 data-[side=right]:w-auto data-[side=right]:border-l-0 data-[side=right]:sm:max-w-none", children: _jsx(DrawerPanels, { defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, children: _jsxs("section", { className: "flex h-full flex-col overflow-hidden", children: [_jsxs("header", { className: "flex shrink-0 items-center gap-2 border-b px-4 py-3", children: [head, _jsx(SheetClose, { asChild: true, children: _jsx(IconButton, { icon: XIcon, label: "Close", className: "ml-auto" }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: body }), foot] }) }) })) }));

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.151",
+  "version": "0.1.153",
   "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.151",
+    "@columenlabs/lumen-ui-types": "0.1.153",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",