@columenlabs/lumen-ui 0.1.175 → 0.1.177

package/dist/index.d.ts

@@ -85,8 +85,9 @@ export { savedAnswers, type SavedAnswersOptions, type SavedAnswersPersister, } f
 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 { SIGNAL_LEVELS, type Signal, type SignalLevel, type SignalMute, type SignalsOptions, SignalBanners, SignalsChip, groupSignals, signalAge, signalShort, useSignals, } from './signals.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 { LumenStatusBar, type StatusBarModel, StatusBarProvider, StatusSignals, 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

@@ -92,8 +92,9 @@ export { savedAnswers, } from './saved-answers.js';
 export { cn } from './lib/utils.js';
 export { StatusHealth } from './status-health.js';
 export { StatusMessages, groupStatusMessages, } from './status-messages.js';
+export { SIGNAL_LEVELS, SignalBanners, SignalsChip, groupSignals, signalAge, signalShort, useSignals, } from './signals.js';
 export { TimeZoneSelect } from './status.js';
-export { LumenStatusBar, StatusBarProvider, querySync, statusWhen, useStatus, } from './status-bar.js';
+export { LumenStatusBar, StatusBarProvider, StatusSignals, 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/shell.js

@@ -15,9 +15,10 @@ import { usePrefs } from './prefs.js';
 import { withRefreshToken } from './refresh.js';
 import { LumenSettings, ThemeToggle, allSettings, } from './settings.js';
 import { DockSlot } from './side-dock.js';
+import { SignalBanners } from './signals.js';
 import { SourceHealthProvider } from './source-health.js';
 import { StatusTimeZone } from './status.js';
-import { LumenStatusBar, StatusBarProvider } from './status-bar.js';
+import { LumenStatusBar, StatusBarProvider, StatusSignals, } 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';
@@ -143,7 +144,7 @@ export function LumenShell({ app, appLabel, brand, nav, tabs, bar, status, healt
             refreshing,
             hideAmounts,
             headerActions,
-        }, 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, {})] }) }), tabs && _jsx(LumenTabBar, { items: tabs })] }), _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(StatusSignals, { app: app, model: bar, openSettings: openSettings, 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(SignalBanners, {}), _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, {})] }) }), tabs && _jsx(LumenTabBar, { items: tabs })] }), _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/signals.d.ts

@@ -0,0 +1,98 @@
+import { type ReactNode } from 'react';
+/** Needs action, Worth a look, Harmless. */
+export type SignalLevel = 'act' | 'look' | 'fyi';
+export interface Signal {
+    /** One row per key (kind + scope + meter + resource): a repeat adds to its count. */
+    key: string;
+    level: SignalLevel;
+    /** What kind of event, short (`Burning fast`, `Over a limit`, `Can't see`). */
+    kind: string;
+    /** The meter or thing it is about (`KV reads`). */
+    what: string;
+    /** The resource or place (`usageflare`). */
+    where?: string;
+    /** What it belongs to (an account, a desk); the panel can group by it. */
+    group?: string;
+    /** How fast, as a share of the limit in a window (`11% in 15m`), or the plain numbers (`1,040 / 1,000`). */
+    pace?: string;
+    /** Share of the limit used now (0 to 1). */
+    used?: number;
+    /** Share of the limit at reset at this pace. */
+    lands?: number;
+    /** When the limit runs out at this pace (`2h`); shown instead of `lands`. */
+    runsOut?: string;
+    /** When it last happened (ms or ISO). */
+    at: number | string;
+    /** How many times it happened; repeats in the list add up too. */
+    count?: number;
+    /** Where Open goes: an in-app route (`to`, the router's link) or any address (`href`). */
+    to?: string;
+    href?: string;
+    /** One or two plain lines for the hover and the phone's detail. */
+    why?: string;
+    /** The one action that ends it (`Fix token`), on the banner and the row. */
+    fix?: {
+        label: string;
+        href?: string;
+        onClick?: () => void /** A Settings section to open. */;
+        settings?: string;
+    };
+    /** Shows above the page until it is fixed (only for Needs action: blind, over a limit). */
+    banner?: boolean;
+}
+/** How long a mute lasts: an hour, until the limit resets (00:00 UTC), or for good (the app keeps it). */
+export type SignalMute = 'hour' | 'reset' | 'always';
+/** The app's hooks into the panel, on `LumenShell bar`. */
+export interface SignalsOptions {
+    /** A mute the app keeps (an alert rule). Left out, only the hour and until-reset mutes show, kept on this device. */
+    onMute?: (s: Signal, until: SignalMute) => void;
+    /** The panel's gear: the Settings section where the app's alerts live (`alerts`). */
+    settings?: string;
+    /** The name of `group` in the panel's Group by (`Account`). */
+    groupLabel?: string;
+}
+export declare const SIGNAL_LEVELS: Record<SignalLevel, {
+    label: string;
+    short: string;
+    dot: string;
+    text?: string;
+}>;
+/** `3m`, `2h`, `4d`: how long ago. */
+export declare function signalAge(at: number | string, now?: number): string;
+/** One entry per key, counted, latest numbers kept; ordered by level, then by where it lands. */
+export declare function groupSignals(list: readonly Signal[]): Signal[];
+interface SignalsValue {
+    /** Open signals, grouped and ordered. */
+    items: Signal[];
+    /** Muted ones, still listed under Muted. */
+    muted: Signal[];
+    banners: Signal[];
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    dismiss: (list: Signal[]) => void;
+    mute: (s: Signal, until: SignalMute) => void;
+    unmute: (s: Signal) => void;
+    hideBanner: (s: Signal) => void;
+    options: SignalsOptions;
+    openSettings?: (section?: string) => void;
+}
+/** The open signals and the panel's state; `null` outside the shell. */
+export declare function useSignals(): SignalsValue | null;
+/** Holds the app's and pages' signals and what this device dismissed or muted. The shell mounts it. */
+export declare function SignalsProvider({ app, signals, options, openSettings, children, }: {
+    app: string;
+    signals: readonly Signal[];
+    options?: SignalsOptions;
+    /** The shell's Settings opener, for a fix or the gear that names a section. */
+    openSettings?: (section?: string) => void;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The top signal in short form, for the bar. */
+export declare function signalShort(s: Signal): string;
+/** The status bar's chip: counts by level and the top signal; opens the panel. */
+export declare function SignalsChip({ className }: {
+    className?: string;
+}): import("react").JSX.Element | null;
+/** Banners for signals that block the page's job (an unreadable account, a limit already passed). */
+export declare function SignalBanners(): import("react").JSX.Element | null;
+export {};

package/dist/signals.js

@@ -0,0 +1,275 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Signals: every warning and error an app raises, as data, in one place (DESIGN.md, Signals).
+// A signal names what happened (kind · what · where) and its numbers (pace, share of a limit used
+// and where it lands, when it runs out), never a sentence. Three levels: Needs action (something
+// is broken or a limit is burning fast), Worth a look (climbing toward a limit), Harmless (unusual,
+// lands low). The status bar shows the counts and the top signal; a tap opens the Signals panel,
+// grouped and one line a row, with Open, Mute and Dismiss. Signals marked `banner` show above the
+// page until fixed. Dismiss and the short mutes are kept on this device; a repeat of the same key
+// shows once with its count, and a later occurrence (a newer `at`) reopens a dismissed one.
+import { ArrowLeftIcon, BellOffIcon, ExternalLinkIcon, SettingsIcon, TriangleAlertIcon, XIcon, } from 'lucide-react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import { useIsMobile } from './hooks/use-mobile.js';
+import { IconButton } from './icon-button.js';
+import { cn } from './lib/utils.js';
+import { LumenDrawer } from './lumen-drawer.js';
+import { lumenToast } from './lumen-toast.js';
+import { METER_LEVEL_COLOR, meterLevel } from './meter-level.js';
+import { Button } from './ui/button.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from './ui/dropdown-menu.js';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from './ui/hover-card.js';
+import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
+import { TooltipProvider } from './ui/tooltip.js';
+export const SIGNAL_LEVELS = {
+    act: { label: 'Needs action', short: 'Act', dot: 'bg-destructive', text: 'text-destructive' },
+    look: { label: 'Worth a look', short: 'Look', dot: 'bg-warning', text: 'text-warning' },
+    fyi: { label: 'Harmless', short: 'Harmless', dot: 'bg-muted-foreground/40' },
+};
+const ORDER = ['act', 'look', 'fyi'];
+const HOUR = 3_600_000;
+const toMs = (at) => (typeof at === 'number' ? at : Date.parse(at) || 0);
+const nextReset = (now) => {
+    const d = new Date(now);
+    return Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate() + 1);
+};
+const pct = (v) => (v >= 10 ? '>999%' : `${Math.round(v * 100)}%`);
+/** `3m`, `2h`, `4d`: how long ago. */
+export function signalAge(at, now = Date.now()) {
+    const d = Math.max(0, now - toMs(at));
+    if (d < 60_000)
+        return 'now';
+    if (d < HOUR)
+        return `${Math.round(d / 60_000)}m`;
+    if (d < 24 * HOUR)
+        return `${Math.round(d / HOUR)}h`;
+    return `${Math.round(d / (24 * HOUR))}d`;
+}
+/** One entry per key, counted, latest numbers kept; ordered by level, then by where it lands. */
+export function groupSignals(list) {
+    const map = new Map();
+    for (const s of list) {
+        const prev = map.get(s.key);
+        const count = Math.max(1, s.count ?? 1);
+        if (!prev)
+            map.set(s.key, { ...s, count });
+        else {
+            const newer = toMs(s.at) > toMs(prev.at) ? s : prev;
+            map.set(s.key, { ...newer, count: (prev.count ?? 1) + count });
+        }
+    }
+    return [...map.values()].sort((a, b) => ORDER.indexOf(a.level) - ORDER.indexOf(b.level) ||
+        (b.runsOut ? 99 : (b.lands ?? -1)) - (a.runsOut ? 99 : (a.lands ?? -1)) ||
+        toMs(b.at) - toMs(a.at));
+}
+const EMPTY = { dismissed: {}, muted: {}, banner: {} };
+const storeKey = (app) => `lumen:signals:${app}`;
+function readKept(app) {
+    try {
+        const raw = window.localStorage.getItem(storeKey(app));
+        return raw ? { ...EMPTY, ...JSON.parse(raw) } : EMPTY;
+    }
+    catch {
+        return EMPTY;
+    }
+}
+const Ctx = createContext(null);
+/** The open signals and the panel's state; `null` outside the shell. */
+export function useSignals() {
+    return useContext(Ctx);
+}
+/** Holds the app's and pages' signals and what this device dismissed or muted. The shell mounts it. */
+export function SignalsProvider({ app, signals, options, openSettings, children, }) {
+    const [kept, setKept] = useState(EMPTY);
+    const [open, setOpen] = useState(false);
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => setKept(readKept(app)), [app]);
+    // Mutes end on their own: look again each minute while the tab shows.
+    useEffect(() => {
+        const t = setInterval(() => !document.hidden && setNow(Date.now()), 60_000);
+        return () => clearInterval(t);
+    }, []);
+    const save = useCallback((next) => setKept((prev) => {
+        const k = next(prev);
+        try {
+            window.localStorage.setItem(storeKey(app), JSON.stringify(k));
+        }
+        catch { }
+        return k;
+    }), [app]);
+    const all = useMemo(() => groupSignals(signals), [signals]);
+    const live = all.filter((s) => (kept.dismissed[s.key] ?? 0) < toMs(s.at));
+    const items = live.filter((s) => (kept.muted[s.key] ?? 0) <= now);
+    const muted = live.filter((s) => (kept.muted[s.key] ?? 0) > now);
+    const banners = items.filter((s) => s.banner && s.level === 'act' && (kept.banner[s.key] ?? 0) <= now);
+    const dismiss = useCallback((list) => {
+        if (!list.length)
+            return;
+        let before = EMPTY;
+        save((k) => {
+            before = k;
+            const dismissed = { ...k.dismissed };
+            for (const s of list)
+                dismissed[s.key] = toMs(s.at);
+            return { ...k, dismissed };
+        });
+        const n = list.length;
+        lumenToast.undo(n === 1 ? `Dismissed ${list[0]?.what ?? 'signal'}` : `Dismissed ${n} signals`, () => save(() => before));
+    }, [save]);
+    const mute = useCallback((s, until) => {
+        const t = Date.now();
+        const end = until === 'hour' ? t + HOUR : until === 'reset' ? nextReset(t) : t + 365 * 24 * HOUR;
+        save((k) => ({ ...k, muted: { ...k.muted, [s.key]: end } }));
+        options?.onMute?.(s, until);
+        lumenToast.undo(`Muted ${s.what}`, () => save((k) => {
+            const { [s.key]: _, ...rest } = k.muted;
+            return { ...k, muted: rest };
+        }));
+    }, [save, options]);
+    const unmute = useCallback((s) => save((k) => {
+        const { [s.key]: _, ...rest } = k.muted;
+        return { ...k, muted: rest };
+    }), [save]);
+    const hideBanner = useCallback((s) => save((k) => ({ ...k, banner: { ...k.banner, [s.key]: Date.now() + HOUR } })), [save]);
+    const value = useMemo(() => ({
+        items,
+        muted,
+        banners,
+        open,
+        setOpen,
+        dismiss,
+        mute,
+        unmute,
+        hideBanner,
+        options: options ?? {},
+        openSettings,
+    }), [items, muted, banners, open, dismiss, mute, unmute, hideBanner, options, openSettings]);
+    return (_jsxs(Ctx.Provider, { value: value, children: [children, (items.length > 0 || muted.length > 0) && (_jsx(TooltipProvider, { delayDuration: 200, children: _jsx(SignalsPanel, {}) }))] }));
+}
+function Dot({ level }) {
+    return (_jsx("span", { "aria-hidden": true, className: cn('size-2 shrink-0 rounded-full', SIGNAL_LEVELS[level].dot) }));
+}
+/** Where it lands at reset, in its meter colour. */
+function landColor(s) {
+    const v = s.runsOut ? 2 : s.lands;
+    return v == null ? undefined : METER_LEVEL_COLOR[meterLevel(v)];
+}
+/** `34% → out 2h`, `88% → 96%`. */
+function LimitCell({ s }) {
+    if (s.used == null && s.lands == null && !s.runsOut)
+        return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+    const end = s.runsOut ? `out ${s.runsOut}` : s.lands != null ? pct(s.lands) : '';
+    return (_jsxs("span", { className: "num", children: [s.used != null && _jsxs("span", { children: [pct(s.used), " \u2192 "] }), _jsx("span", { className: "font-medium", style: { color: landColor(s) }, children: end })] }));
+}
+/** The top signal in short form, for the bar. */
+export function signalShort(s) {
+    return [s.kind, s.what, s.where].filter(Boolean).join(' · ');
+}
+/** The status bar's chip: counts by level and the top signal; opens the panel. */
+export function SignalsChip({ className }) {
+    const ctx = useSignals();
+    if (!ctx || (!ctx.items.length && !ctx.muted.length))
+        return null;
+    const top = ctx.items.find((s) => s.kind && !s.banner) ?? ctx.items[0];
+    return (_jsxs("button", { type: "button", onClick: () => ctx.setOpen(!ctx.open), "aria-label": `Signals, ${ctx.items.length} open`, "aria-expanded": ctx.open, className: cn('flex h-6 min-w-0 overflow-hidden max-w-(--status-message-max) items-center gap-2 rounded-md border bg-muted/60 px-1.5 text-foreground hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none', className), children: [_jsxs("span", { className: "num flex shrink-0 items-center gap-1.5", children: [ORDER.map((l) => {
+                        const n = ctx.items.filter((s) => s.level === l).length;
+                        return n ? (_jsxs("span", { className: cn('flex items-center gap-1', SIGNAL_LEVELS[l].text), children: [_jsx(Dot, { level: l }), n] }, l)) : null;
+                    }), !ctx.items.length && _jsx("span", { className: "text-muted-foreground", children: "0" })] }), top && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "h-3.5 w-px shrink-0 bg-border" }), _jsxs("span", { className: "min-w-0 truncate", children: [_jsx("span", { className: "text-muted-foreground", children: top.kind }), ' ', [top.what, top.where].filter(Boolean).join(' · ')] }), (top.pace || top.runsOut) && (_jsx("span", { className: "num min-w-0 truncate text-foreground/80", children: [top.pace, top.runsOut && `out ${top.runsOut}`].filter(Boolean).join(' · ') }))] }))] }));
+}
+/** Banners for signals that block the page's job (an unreadable account, a limit already passed). */
+export function SignalBanners() {
+    const ctx = useSignals();
+    if (!ctx?.banners.length)
+        return null;
+    return (_jsx("div", { "data-slot": "signal-banners", className: "flex flex-col", children: ctx.banners.slice(0, 2).map((s) => (_jsxs("div", { role: "alert", className: "flex h-10 items-center gap-2 border-b border-destructive/25 bg-destructive/10 px-(--shell-gutter) text-sm whitespace-nowrap text-destructive", children: [_jsx(TriangleAlertIcon, { "aria-hidden": true, className: "size-4 shrink-0" }), _jsxs("span", { className: "min-w-0 truncate font-medium", title: s.why, children: [[s.what, s.where].filter(Boolean).join(' · '), s.group && s.group !== s.where && s.group !== s.what && (_jsxs("span", { className: "font-normal text-foreground/80", children: [" \u00B7 ", s.group] }))] }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: [s.fix && _jsx(FixButton, { s: s, size: "sm" }), _jsx(IconButton, { icon: XIcon, label: "Hide for 1 hour", size: "icon-sm", onClick: () => ctx.hideBanner(s) })] })] }, s.key))) }));
+}
+function FixButton({ s, size = 'xs' }) {
+    const ctx = useSignals();
+    if (!s.fix)
+        return null;
+    const { label, href, settings } = s.fix;
+    const onClick = settings
+        ? () => {
+            ctx?.setOpen(false);
+            ctx?.openSettings?.(settings);
+        }
+        : s.fix.onClick;
+    return href ? (_jsx(Button, { size: size, asChild: true, children: _jsx("a", { href: href, children: label }) })) : (_jsx(Button, { size: size, onClick: onClick, children: label }));
+}
+function Facts({ s }) {
+    const rows = [];
+    if (s.group)
+        rows.push(['In', s.group]);
+    if (s.where)
+        rows.push(['Where', s.where]);
+    if (s.pace)
+        rows.push(['Pace', s.pace]);
+    if (s.used != null)
+        rows.push(['Limit used', pct(s.used)]);
+    if (s.runsOut)
+        rows.push(['Runs out', `in about ${s.runsOut}`]);
+    else if (s.lands != null)
+        rows.push(['At reset', pct(s.lands)]);
+    rows.push(['Last', `${signalAge(s.at)} ago${(s.count ?? 1) > 1 ? ` · ${s.count} times` : ''}`]);
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1", children: rows.map(([k, v]) => (_jsxs("div", { className: "contents", children: [_jsx("dt", { className: "text-muted-foreground", children: k }), _jsx("dd", { className: "num truncate text-right", children: v })] }, k))) }), s.why && _jsx("p", { className: "text-muted-foreground", children: s.why })] }));
+}
+function MuteMenu({ s, ctx }) {
+    if (ctx.muted.includes(s))
+        return (_jsx(IconButton, { icon: BellOffIcon, label: "Unmute", size: "icon-xs", pressed: true, onClick: () => ctx.unmute(s) }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(IconButton, { icon: BellOffIcon, label: "Mute", size: "icon-xs" }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { onSelect: () => ctx.mute(s, 'hour'), children: "For 1 hour" }), _jsx(DropdownMenuItem, { onSelect: () => ctx.mute(s, 'reset'), children: "Until reset (00:00 UTC)" }), ctx.options.onMute && (_jsx(DropdownMenuItem, { onSelect: () => ctx.mute(s, 'always'), children: "Always, for this meter" }))] })] }));
+}
+/** One signal, one line: level, kind, what · where, pace, limit used → at reset, age; actions on hover. */
+function SignalRow({ s, ctx, onPick, }) {
+    const isMuted = ctx.muted.includes(s);
+    const line = (_jsxs(_Fragment, { children: [_jsx(Dot, { level: s.level }), _jsx("span", { className: "truncate text-muted-foreground", "data-signal-col": "kind", children: s.kind }), _jsx(HoverCardTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex min-w-0 items-center gap-1.5 text-left", children: [_jsx("span", { className: "truncate", children: s.what }), s.where && (_jsx("span", { className: "min-w-8 shrink-[3] truncate text-muted-foreground", children: s.where })), (s.count ?? 1) > 1 && (_jsxs("span", { className: "num shrink-0 rounded-full bg-muted px-1.5 text-muted-foreground text-xs", children: ["\u00D7", s.count] }))] }) }), _jsx("span", { "data-signal-col": "pace", className: cn('num truncate text-right', s.level === 'act' ? 'text-destructive' : s.level === 'fyi' && 'text-muted-foreground'), children: s.pace ?? '—' }), _jsx("span", { className: "truncate text-right", children: _jsx(LimitCell, { s: s }) }), _jsx("span", { "data-signal-col": "age", className: "num text-right text-muted-foreground", children: signalAge(s.at) })] }));
+    if (onPick)
+        return (_jsxs("button", { type: "button", onClick: () => onPick(s), "data-signal-grid": "phone", className: cn('grid h-11 w-full items-center gap-2 border-b px-4 text-left whitespace-nowrap ', isMuted && 'opacity-60'), children: [_jsx(Dot, { level: s.level }), _jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: "truncate", children: s.what }), s.where && (_jsx("span", { className: "min-w-8 shrink-[3] truncate text-muted-foreground", children: s.where })), (s.count ?? 1) > 1 && (_jsxs("span", { className: "num shrink-0 rounded-full bg-muted px-1.5 text-muted-foreground text-xs", children: ["\u00D7", s.count] }))] }), _jsx("span", { className: "num text-right text-xs", style: { color: landColor(s) }, children: s.runsOut ? `out ${s.runsOut}` : s.lands != null ? `→${pct(s.lands)}` : s.kind })] }));
+    return (_jsxs("div", { "data-signal-grid": true, className: cn('group/sig relative grid h-9 items-center gap-2 border-b px-4 whitespace-nowrap hover:bg-muted/50 focus-within:bg-muted/50', isMuted && 'opacity-60'), children: [_jsxs(HoverCard, { openDelay: 300, closeDelay: 80, children: [line, _jsxs(HoverCardContent, { side: "left", align: "start", className: "w-80 text-xs", children: [_jsxs("p", { className: "mb-2 flex items-center gap-1.5 font-medium text-sm", children: [_jsx(Dot, { level: s.level }), _jsx("span", { className: "truncate", children: signalShort(s) })] }), _jsx(Facts, { s: s })] })] }), _jsxs("span", { className: "absolute top-1 right-2 hidden items-center gap-0.5 rounded-md border bg-background px-0.5 shadow-xs group-hover/sig:flex group-focus-within/sig:flex", children: [s.fix && _jsx(FixButton, { s: s }), (s.to || s.href) && (_jsx(IconButton, { icon: ExternalLinkIcon, label: "Open", size: "icon-xs", to: s.to, href: s.to ? undefined : s.href })), _jsx(MuteMenu, { s: s, ctx: ctx }), _jsx(IconButton, { icon: XIcon, label: "Dismiss", size: "icon-xs", onClick: () => ctx.dismiss([s]) })] })] }));
+}
+/** The Signals panel: a docked drawer on desktop, a bottom sheet on a phone. */
+function SignalsPanel() {
+    const ctx = useSignals();
+    const mobile = useIsMobile();
+    const [filter, setFilter] = useState('all');
+    const [by, setBy] = useState('level');
+    const [picked, setPicked] = useState(null);
+    const hasGroups = ctx.items.some((s) => s.group);
+    const list = filter === 'muted'
+        ? ctx.muted
+        : ctx.items.filter((s) => filter === 'all' || s.level === filter);
+    const groups = new Map();
+    for (const s of list) {
+        const k = by === 'group' && hasGroups ? (s.group ?? 'Other') : s.level;
+        groups.set(k, [...(groups.get(k) ?? []), s]);
+    }
+    const pick = [...ctx.items, ...ctx.muted].find((s) => s.key === picked);
+    const close = () => {
+        ctx.setOpen(false);
+        setPicked(null);
+    };
+    return (_jsx(LumenDrawer, { open: ctx.open, onClose: close, dock: "signals", defaultSize: "40%", minSize: "420px", title: pick && mobile ? signalShort(pick) : 'Signals', description: `${ctx.items.length} open`, footerStart: pick && mobile ? undefined : 'Dismiss and short mutes are kept on this device', actions: [
+            ...(pick && mobile
+                ? [{ icon: ArrowLeftIcon, label: 'Back to the list', onClick: () => setPicked(null) }]
+                : []),
+            ...(ctx.options.settings && ctx.openSettings
+                ? [
+                    {
+                        icon: SettingsIcon,
+                        label: 'Alert settings',
+                        onClick: () => {
+                            close();
+                            ctx.openSettings?.(ctx.options.settings);
+                        },
+                    },
+                ]
+                : []),
+        ], children: pick && mobile ? (_jsxs("div", { className: "flex flex-col gap-4 pt-1 text-sm", children: [_jsxs("p", { className: "flex items-center gap-2 font-medium", children: [_jsx(Dot, { level: pick.level }), SIGNAL_LEVELS[pick.level].label] }), _jsx(Facts, { s: pick }), _jsxs("div", { className: "grid grid-cols-3 gap-2", children: [pick.to || pick.href ? (_jsx(Button, { asChild: true, children: _jsx("a", { href: pick.to ?? pick.href, children: "Open" }) })) : (_jsx(FixButton, { s: pick, size: "sm" })), _jsx(Button, { variant: "outline", onClick: () => {
+                                ctx.mute(pick, 'reset');
+                                setPicked(null);
+                            }, children: "Mute" }), _jsx(Button, { variant: "outline", onClick: () => {
+                                ctx.dismiss([pick]);
+                                setPicked(null);
+                            }, children: "Dismiss" })] })] })) : (_jsxs("div", { "data-slot": "signals", className: "-mx-4 flex flex-col text-sm", children: [_jsxs("div", { className: "flex items-center gap-2 overflow-x-auto px-4 pb-2", children: [_jsxs(ToggleGroup, { type: "single", size: "sm", variant: "outline", value: filter, onValueChange: (v) => v && setFilter(v), "aria-label": "Show", children: [_jsxs(ToggleGroupItem, { value: "all", children: ["All ", _jsx("span", { className: "num text-muted-foreground", children: ctx.items.length })] }), ORDER.map((l) => (_jsxs(ToggleGroupItem, { value: l, children: [_jsx(Dot, { level: l }), SIGNAL_LEVELS[l].short, ' ', _jsx("span", { className: "num text-muted-foreground", children: ctx.items.filter((s) => s.level === l).length })] }, l))), ctx.muted.length > 0 && (_jsxs(ToggleGroupItem, { value: "muted", children: ["Muted ", _jsx("span", { className: "num text-muted-foreground", children: ctx.muted.length })] }))] }), hasGroups && !mobile && (_jsxs(ToggleGroup, { type: "single", size: "sm", variant: "outline", value: by, onValueChange: (v) => v && setBy(v), "aria-label": "Group by", className: "ml-auto", children: [_jsx(ToggleGroupItem, { value: "level", children: "By level" }), _jsxs(ToggleGroupItem, { value: "group", children: ["By ", ctx.options.groupLabel?.toLowerCase() ?? 'group'] })] }))] }), !mobile && list.length > 0 && (_jsxs("div", { "data-signal-grid": true, className: "sticky top-0 z-1 grid h-7 items-center gap-2 border-y bg-background px-4 text-muted-foreground text-xs whitespace-nowrap", children: [_jsx("span", {}), _jsx("span", { "data-signal-col": "kind", children: "Kind" }), _jsx("span", { children: "What \u00B7 where" }), _jsx("span", { "data-signal-col": "pace", className: "text-right", children: "Pace" }), _jsx("span", { className: "text-right", children: "Used \u2192 at reset" }), _jsx("span", { "data-signal-col": "age", className: "text-right", children: "Age" })] })), list.length === 0 && (_jsx("p", { className: "px-4 py-8 text-center text-muted-foreground", children: filter === 'muted' ? 'Nothing muted.' : 'All clear. New signals show here.' })), [...groups].map(([k, rows]) => {
+                    const level = ORDER.includes(k) ? k : null;
+                    return (_jsxs("section", { "aria-label": level ? SIGNAL_LEVELS[level].label : k, children: [_jsxs("div", { className: "flex h-8 items-center gap-2 bg-muted px-4 font-medium text-xs whitespace-nowrap", children: [level && _jsx(Dot, { level: level }), _jsx("span", { className: "truncate", children: level ? SIGNAL_LEVELS[level].label : k }), _jsx("span", { className: "num text-muted-foreground", children: rows.length }), filter !== 'muted' && (_jsx("button", { type: "button", onClick: () => ctx.dismiss(rows), className: "ml-auto rounded-sm text-muted-foreground hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none", children: "Dismiss all" }))] }), rows.map((s) => (_jsx(SignalRow, { s: s, ctx: ctx, onPick: mobile ? (x) => setPicked(x.key) : undefined }, s.key)))] }, k));
+                })] })) }));
+}

package/dist/status-bar.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type Signal, type SignalsOptions } from './signals.js';
 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';
@@ -28,12 +29,19 @@ export interface StatusPart {
     sync?: StatusSync | null;
     /** Newest first. */
     messages?: StatusMessage[];
+    /** This page's signals (warnings and errors as data); they join the app's in the Signals panel. */
+    signals?: Signal[];
     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;
+    /** Free-text notes. Warnings and errors go in `signals` instead. */
     messages?: StatusMessage[];
+    /** Warnings and errors as data: counts and the top one in the bar, every one in the Signals panel. */
+    signals?: Signal[];
+    /** Mute that the app keeps, the panel's settings gear, the name of a signal's `group`. */
+    signalOptions?: SignalsOptions;
     /** 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). */
@@ -48,6 +56,13 @@ export declare function StatusBarProvider({ children }: {
  * 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;
+/** Collects the app's and the pages' signals for the bar, the panel and the banners. The shell mounts it. */
+export declare function StatusSignals({ app, model, openSettings, children, }: {
+    app: string;
+    model?: StatusBarModel;
+    openSettings?: (section?: string) => void;
+    children: ReactNode;
+}): import("react").JSX.Element;
 /** 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';

package/dist/status-bar.js

@@ -10,6 +10,7 @@ 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 { SIGNAL_LEVELS, SignalsChip, SignalsProvider, signalShort, useSignals, } from './signals.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';
@@ -48,6 +49,12 @@ export function useStatus(part) {
         return () => registry.set(id, null);
     }, [registry, id, key]);
 }
+/** Collects the app's and the pages' signals for the bar, the panel and the banners. The shell mounts it. */
+export function StatusSignals({ app, model, openSettings, children, }) {
+    const parts = useContext(PartsCtx);
+    const signals = useMemo(() => [...parts.flatMap((p) => p.signals ?? []), ...(model?.signals ?? [])], [parts, model?.signals]);
+    return (_jsx(SignalsProvider, { app: app, signals: signals, options: model?.signalOptions, openSettings: openSettings, children: children }));
+}
 /** 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;
@@ -159,6 +166,7 @@ function factEntry(f, i, now) {
 function useEntries(model, app) {
     const parts = useContext(PartsCtx);
     const tasks = useTasks();
+    const signals = useSignals();
     const now = useNow();
     const entries = [];
     const sync = [...parts].reverse().find((p) => p.sync)?.sync ?? model?.sync ?? null;
@@ -184,18 +192,32 @@ function useEntries(model, app) {
     }
     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';
+    const first = groups[0];
+    if (first) {
+        const tone = first.tone === 'error' ? 'error' : first.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,
+            text: first.count > 1 ? `${first.text} ×${first.count}` : first.text,
             side: groups.length > 1 ? `+${groups.length - 1}` : undefined,
             bar: _jsx(StatusMessages, { messages: messages }),
         });
     }
+    const top = signals?.items[0];
+    if (signals && (top || signals.muted.length)) {
+        const n = signals.items.length;
+        entries.push({
+            id: 'signals',
+            rank: top?.level === 'act' ? 0 : top?.level === 'look' ? 2 : 7,
+            tone: top?.level === 'act' ? 'error' : top?.level === 'look' ? 'warning' : 'idle',
+            text: top ? signalShort(top) : 'Signals muted',
+            side: n > 1 ? `+${n - 1}` : undefined,
+            detail: top ? SIGNAL_LEVELS[top.level].label : undefined,
+            bar: _jsx(SignalsChip, {}),
+            tap: () => signals.setOpen(true),
+        });
+    }
     [...parts.flatMap((p) => p.facts ?? []), ...(model?.facts ?? [])]
         .slice(0, MAX_FACTS)
         .forEach((f, i) => entries.push(factEntry(f, i, now)));
@@ -206,10 +228,12 @@ function EntryLine({ e }) {
         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 }));
+        return (_jsx("span", { className: "flex h-6 min-w-0 items-center gap-1.5 overflow-hidden px-1.5", children: line }));
+    return (_jsx(StatusPop, { className: cn(STATUS_TRIGGER, 'min-w-0 overflow-hidden'), content: _jsx("p", { className: TONE_TEXT[e.tone], children: e.detail }), children: line }));
 }
-function SheetRow({ e }) {
+function SheetRow({ e, onTap }) {
+    if (onTap)
+        return (_jsx("li", { className: "border-b last:border-b-0", children: _jsxs("button", { type: "button", onClick: onTap, className: "flex w-full items-center gap-2 py-2 text-left", children: [_jsx(Mark, { tone: e.tone === 'none' ? 'idle' : e.tone }), _jsx("span", { className: cn('min-w-0 flex-1 truncate', TONE_TEXT[e.tone]), children: e.text }), e.side && _jsx("span", { className: "shrink-0 tabular-nums text-muted-foreground", children: e.side })] }) }));
     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. */
@@ -218,7 +242,12 @@ export function LumenStatusBar({ app, model, legacy, slot, end, }) {
     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-(--shell-tabbar-offset) 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]
+    return (_jsx("footer", { "data-slot": "shell-status", "aria-label": "Status", className: "sticky bottom-(--shell-tabbar-offset) 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: urgent.tap ? (_jsx("button", { type: "button", onClick: urgent.tap, className: cn(STATUS_TRIGGER, 'min-w-0 overflow-hidden'), children: _jsx(EntryLine, { e: { ...urgent, bar: undefined, detail: undefined, side: undefined } }) })) : (_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 })] })) }));
+                                        .map((e) => (_jsx(SheetRow, { e: e, onTap: e.tap
+                                            ? () => {
+                                                setOpen(false);
+                                                e.tap?.();
+                                            }
+                                            : undefined }, 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/theme.css

@@ -859,3 +859,32 @@ body[data-spotlight="nav"] [data-spotlit] {
 [data-slot="sidebar-inset"]:has(> [data-slot="shell-tabbar"]) {
   --shell-tabbar-offset: calc(var(--shell-tabbar-height) + env(safe-area-inset-bottom));
 }
+
+/* Signals panel (signals.tsx): one line a row, columns lined up across groups. Below 34rem wide the
+   Kind and Pace columns go (the hover keeps them), so What · where keeps its room. */
+[data-slot="signals"] {
+  container-type: inline-size;
+}
+[data-signal-grid] {
+  grid-template-columns: 0.5rem 5.5rem minmax(0, 1fr) 6.5rem 8.5rem 2.25rem;
+}
+[data-signal-grid="phone"] {
+  grid-template-columns: 0.5rem minmax(0, 1fr) auto;
+}
+@container (max-width: 40rem) {
+  [data-signal-grid]:not([data-signal-grid="phone"]) {
+    grid-template-columns: 0.5rem minmax(0, 1fr) 6.5rem 8.5rem 2.25rem;
+  }
+  [data-signal-col="kind"] {
+    display: none;
+  }
+}
+@container (max-width: 34rem) {
+  [data-signal-grid]:not([data-signal-grid="phone"]) {
+    grid-template-columns: 0.5rem minmax(0, 1fr) 8.5rem 2.25rem;
+  }
+  [data-signal-col="kind"],
+  [data-signal-col="pace"] {
+    display: none;
+  }
+}

package/package.json

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