@columenlabs/lumen-ui 0.0.0-stage → 0.2.0

package/dist/settings.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Settings: one large dialog, opened from the profile menu or Ctrl/Cmd+, with
+// its sections listed on the left. General holds Profile (display name, email,
+// sign out), Appearance (theme, font, text size, glass) and Preferences (time zone, observability
+// details), the same on every app; then All apps (Notifications, the assistant, MCP), then the app's own
+// sections (an app: Repos). On phone the list becomes a picker.
+// A search box tops the list and filters the rows on every section.
+// `?settings=<section>` in the URL opens it at that section (GitHub's install page returns there).
+import { LogOutIcon, MonitorIcon, MoonIcon, PaletteIcon, SearchIcon, SlidersHorizontalIcon, SunIcon, UserRoundIcon, XIcon, } from 'lucide-react';
+import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import { toast } from 'sonner';
+import { useAssistantMoves } from './assistant-screen.js';
+import { LumenSelector } from './lumen-selector.js';
+import { FONTS, FONT_SIZES, setPref, usePrefs, } from './prefs.js';
+import { TimeZoneSelect } from './status.js';
+import { Button } from './ui/button.js';
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from './ui/dialog.js';
+import { Input } from './ui/input.js';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './ui/input-group.js';
+import { Label } from './ui/label.js';
+import { Separator } from './ui/separator.js';
+import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from './ui/sidebar.js';
+import { Switch } from './ui/switch.js';
+import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip.js';
+const THEMES = [
+    { value: 'light', label: 'Light theme', short: 'Light', icon: SunIcon },
+    { value: 'dark', label: 'Dark theme', short: 'Dark', icon: MoonIcon },
+    { value: 'system', label: 'Follow the device', short: 'System', icon: MonitorIcon },
+];
+/** The Settings search text; rows that do not match it hide. */
+const SearchContext = createContext('');
+const matches = (query, ...texts) => texts.some((t) => typeof t === 'string' && t.toLowerCase().includes(query.toLowerCase()));
+/** The open section's header slot for its actions (Add and Resync sit by the
+ *  title, not on a sub-header). Each section gets its own, so search results keep theirs apart. */
+const ActionsSlot = createContext(null);
+/** Renders its children in the section header, right of the title. */
+export function SettingsActions({ children }) {
+    const el = useContext(ActionsSlot);
+    return el ? createPortal(children, el) : null;
+}
+/** The open section's footer slot, pinned under its body. */
+const FooterSlot = createContext(null);
+/** Renders its children in the open section's footer, from anywhere in the section's content. */
+export function SettingsFooter({ children }) {
+    const el = useContext(FooterSlot);
+    return el ? createPortal(children, el) : null;
+}
+function ActionsScope({ children, }) {
+    const [el, setEl] = useState(null);
+    const [foot, setFoot] = useState(null);
+    return (_jsx(ActionsSlot.Provider, { value: el, children: _jsx(FooterSlot.Provider, { value: foot, children: children(setEl, setFoot) }) }));
+}
+/** One setting: title and description on the left, its control on the right. */
+export function SettingRow({ label, description, htmlFor, children, }) {
+    const query = useContext(SearchContext);
+    if (query && !matches(query, label, description))
+        return null;
+    return (_jsxs("div", { "data-slot": "setting-row", className: "flex items-center gap-4 border-b py-3 last:border-b-0", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx(Label, { htmlFor: htmlFor, children: label }), description && _jsx("p", { className: "text-xs text-muted-foreground", children: description })] }), _jsx("div", { className: "shrink-0", children: children })] }));
+}
+/** Light, dark or system: in Settings with labels, in the profile menu as icons with tooltips. */
+export function ThemeToggle({ compact = false }) {
+    const prefs = usePrefs();
+    return (_jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: prefs.theme, onValueChange: (v) => v && setPref('theme', v), "aria-label": "Theme", children: THEMES.map((t) => compact ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(ToggleGroupItem, { value: t.value, "aria-label": t.label, children: _jsx(t.icon, {}) }) }), _jsx(TooltipContent, { children: t.short })] }, t.value)) : (_jsxs(ToggleGroupItem, { value: t.value, "aria-label": t.label, children: [_jsx(t.icon, {}), t.short] }, t.value))) }));
+}
+function Appearance() {
+    const prefs = usePrefs();
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsx(SettingRow, { label: "Theme", description: "Light, dark, or follow the device.", children: _jsx(ThemeToggle, {}) }), _jsx(SettingRow, { label: "Font", description: "The typeface for text. Numbers keep their own.", children: _jsx(LumenSelector, { label: "Font", size: "sm", className: "w-40", options: FONTS.map((f) => ({ value: f.id, label: f.label })), value: prefs.font, onChange: (v) => setPref('font', v) }) }), _jsx(SettingRow, { label: "Text size", description: "Larger text makes everything a little roomier.", children: _jsx(ToggleGroup, { type: "single", variant: "outline", size: "sm", spacing: 0, value: prefs.fontSize, onValueChange: (v) => v && setPref('fontSize', v), "aria-label": "Text size", children: FONT_SIZES.map((f) => (_jsx(ToggleGroupItem, { value: f.id, "aria-label": `${f.label} text`, children: f.label }, f.id))) }) }), _jsx(SettingRow, { label: "Glass surfaces", description: "Frosted cards and panels.", htmlFor: "settings-glass", children: _jsx(Switch, { id: "settings-glass", checked: prefs.glass, onCheckedChange: (v) => setPref('glass', v) }) })] }));
+}
+function Preferences() {
+    const prefs = usePrefs();
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsx(SettingRow, { label: "Time zone", description: "Every time on every desk shows in this zone.", children: _jsx(TimeZoneSelect, {}) }), _jsx(SettingRow, { label: "Observability details", description: "Show how long each card and view took to load, with its rows and when.", htmlFor: "settings-observability", children: _jsx(Switch, { id: "settings-observability", checked: prefs.observability, onCheckedChange: (v) => setPref('observability', v) }) })] }));
+}
+/** General: the person's own settings, the same on every app. */
+const PROFILE = {
+    id: 'profile',
+    title: 'Profile',
+    icon: UserRoundIcon,
+    description: 'Your name and sign-in on every desk.',
+};
+const GENERAL = [
+    {
+        id: 'appearance',
+        title: 'Appearance',
+        icon: PaletteIcon,
+        description: 'How every desk looks, saved in this browser.',
+        content: _jsx(Appearance, {}),
+    },
+    {
+        id: 'preferences',
+        title: 'Preferences',
+        icon: SlidersHorizontalIcon,
+        description: 'Times and details on every desk, saved in this browser.',
+        content: _jsx(Preferences, {}),
+    },
+];
+/** Every Settings section in the order the dialog lists them: General, the product's, the app's. */
+export function allSettings(profile, shared = [], sections = []) {
+    const general = profile ? [{ ...PROFILE, content: profile }, ...GENERAL] : GENERAL;
+    return [...general, ...shared, ...sections];
+}
+export function LumenSettings({ open, section, onOpen, onClose, appLabel, profile, sections = [], shared = [], sharedLabel = 'All apps', }) {
+    const all = allSettings(profile, shared, sections);
+    const general = all.slice(0, all.length - shared.length - sections.length);
+    const current = all.find((s) => s.id === section) ?? all[0];
+    // The assistant opens Settings at a section (it never changes a setting); Undo puts it back as it was.
+    useAssistantMoves('settings', {
+        settings: onOpen,
+        sections: all.map((s) => ({ id: s.id, title: s.title })),
+        snapshot: () => (open ? section : null),
+        restore: (s) => (typeof s === 'string' ? onOpen(s) : onClose()),
+    });
+    // Ctrl/Cmd+, opens Settings, like most apps.
+    useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === ',' && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                onOpen(section);
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [onOpen, section]);
+    // Search: every section's matching rows show at once; a section matching by
+    // title or description shows whole. Sections with nothing to show drop out of the nav.
+    const [query, setQuery] = useState('');
+    const q = query.trim();
+    const pane = useRef(null);
+    const [found, setFound] = useState([]);
+    useLayoutEffect(() => {
+        if (!q)
+            return;
+        const ids = [...(pane.current?.querySelectorAll('[data-settings-section]') ?? [])]
+            .filter((el) => el.dataset.whole === 'true' || el.querySelector('[data-slot=setting-row]'))
+            .map((el) => el.dataset.settingsSection ?? '');
+        setFound((f) => (f.join() === ids.join() ? f : ids));
+    });
+    const shown = (s) => !q || found.includes(s.id);
+    const go = (id) => {
+        setQuery('');
+        onOpen(id);
+    };
+    const groups = [
+        { label: 'General', items: general.filter(shown) },
+        { label: sharedLabel, items: shared.filter(shown) },
+        ...(sections.length ? [{ label: appLabel, items: sections.filter(shown) }] : []),
+    ].filter((g) => g.items.length);
+    const search = (_jsxs(InputGroup, { className: "bg-background", children: [_jsx(InputGroupAddon, { children: _jsx(SearchIcon, {}) }), _jsx(InputGroupInput, { type: "search", className: "[&::-webkit-search-cancel-button]:hidden", "aria-label": "Search settings", placeholder: "Search", value: query, onChange: (e) => setQuery(e.target.value) }), query && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { size: "icon-xs", "aria-label": "Clear search", onClick: () => setQuery(''), children: _jsx(XIcon, {}) }) }))] }));
+    const header = (s, slot) => (_jsxs("div", { className: "flex items-end gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("h3", { id: `settings-${s.id}-title`, className: "flex items-center gap-2 text-base font-semibold", children: [_jsx(s.icon, { className: "size-4 text-muted-foreground" }), s.title] }), s.description && (_jsx("p", { className: "truncate text-sm text-muted-foreground", title: typeof s.description === 'string' ? s.description : undefined, children: s.description }))] }), _jsx("div", { ref: slot, className: "flex shrink-0 items-center gap-2 empty:hidden" })] }));
+    return (_jsx(Dialog, { open: open, onOpenChange: (o) => {
+            if (o)
+                onOpen(section);
+            else {
+                setQuery('');
+                onClose();
+            }
+        }, children: _jsxs(DialogContent, { "data-slot": "settings", 
+            // Esc clears the search first, then closes.
+            onEscapeKeyDown: (e) => {
+                if (query) {
+                    e.preventDefault();
+                    setQuery('');
+                }
+            }, className: "flex h-[min(720px,calc(100svh-2rem))] flex-col gap-0 overflow-hidden p-0 sm:max-w-4xl md:flex-row", children: [_jsx(DialogTitle, { className: "sr-only", children: "Settings" }), _jsx(DialogDescription, { className: "sr-only", children: "Your preferences and this desk's settings." }), _jsxs("nav", { "aria-label": "Settings sections", className: "hidden w-56 shrink-0 flex-col border-r bg-sidebar py-2 md:flex", children: [_jsx("div", { className: "px-2 pt-1 pb-1", children: search }), groups.map((g) => (_jsxs(SidebarGroup, { className: "py-1", children: [_jsx(SidebarGroupLabel, { children: g.label }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: g.items.map((s) => (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: !q && s.id === current.id, className: s.sub ? 'pl-7' : undefined, onClick: () => go(s.id), children: [_jsx(s.icon, {}), _jsx("span", { children: s.title })] }) }, s.id))) }) })] }, g.label)))] }), _jsxs("div", { className: "flex flex-col gap-2 border-b p-3 pr-12 md:hidden", children: [search, !q && (_jsx(LumenSelector, { label: "Settings section", className: "w-full", groups: groups.map((g) => ({
+                                label: g.label,
+                                options: g.items.map((s) => ({
+                                    value: s.id,
+                                    label: s.title,
+                                    icon: s.icon,
+                                    indent: !!s.sub,
+                                })),
+                            })), value: current.id, onChange: go }))] }), q ? (_jsxs("section", { ref: pane, "aria-label": "Search results", 
+                    // The top band on desktop keeps results clear of the dialog's X.
+                    className: "flex min-w-0 flex-1 flex-col gap-6 overflow-y-auto px-4 pt-4 pb-8 md:mt-12 md:border-t md:px-6 md:pt-6", children: [all.map((s) => {
+                            const whole = matches(q, s.title, s.description);
+                            return (_jsx(ActionsScope, { children: (slot) => (_jsxs("div", { "data-settings-section": s.id, "data-whole": whole, "aria-labelledby": `settings-${s.id}-title`, className: whole
+                                        ? 'flex flex-col gap-3'
+                                        : 'hidden flex-col gap-3 has-[[data-slot=setting-row]]:flex', children: [header(s, slot), _jsx(Separator, {}), _jsx(SearchContext.Provider, { value: whole ? '' : q, children: s.content })] })) }, s.id));
+                        }), !found.length && (_jsxs("p", { className: "text-sm text-muted-foreground", children: ["No settings match \u201C", q, "\u201D."] }))] })) : (_jsx(ActionsScope, { children: (slot, footer) => (_jsxs("section", { "aria-labelledby": `settings-${current.id}-title`, className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex shrink-0 flex-col gap-3 px-4 pt-4 md:px-6 md:pt-6", children: [header(current, slot), _jsx(Separator, {})] }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-4 pt-3 pb-4 *:shrink-0 md:px-6", children: current.content }), _jsx("div", { ref: footer, "data-slot": "settings-footer", className: "flex min-h-12 shrink-0 items-center justify-end gap-2 border-t px-4 py-2 md:px-6", children: current.footer })] })) }, current.id))] }) }));
+}

package/dist/shell.d.ts

@@ -0,0 +1,99 @@
+import { type ReactNode } from 'react';
+import { type LumenFinderConfig } from './lumen-finder.js';
+import { type SettingsSectionDef } from './settings.js';
+interface ShellContext {
+    /** The app this page renders in (`data-app` on <html>). */
+    app: string;
+    /** Its name, where Settings lists its own sections. */
+    appLabel: string;
+    /** Where a page's status items render (the status bar's page slot). */
+    statusSlot: HTMLElement | null;
+    /** Opens Settings at a section (`preferences` or one of the app's own). */
+    openSettings: (section?: string) => void;
+    /** Closes Settings (a section that sends the person to a page). */
+    closeSettings: () => void;
+    /** The header's Refresh: reloads the page's data, skipping the server cache. Null without `onRefresh`. */
+    refresh: (() => Promise<void>) | null;
+    refreshing: boolean;
+    /** The app shows Hide amounts in its header (`hideAmounts` on `LumenShell`). */
+    hideAmounts: boolean;
+    /** The product's buttons on every page header, after Refresh (`headerActions`). */
+    headerActions: ReactNode;
+}
+export declare function useShell(): ShellContext;
+/** The app this page renders in, or null outside a shell (a preview). */
+export declare function useApp(): {
+    id: string;
+    label: string;
+} | null;
+/** True while Hide amounts is on in an app that offers it: holding amounts render as `•••••`. */
+export declare function useAmountsHidden(): boolean;
+/** `+$152,372` → `+$•••••`: every number in the text masked, signs and units kept. */
+export declare const maskAmount: (text: string) => string;
+/** Who is signed in, for the profile button; null while loading or where nobody is. */
+export interface ShellUser {
+    email: string;
+    /** The name shown, when there is one. */
+    name: string | null;
+}
+/** `AL` from "Ada Lovelace", else the first two letters of the email. */
+export declare function initials(who: ShellUser | null): string;
+/** What the profile button shows: the first name only, else the email's name. */
+export declare function firstName(who: ShellUser | null): string;
+export interface LumenShellProps {
+    /** The app's id: `data-app` on <html>, which picks its accent. */
+    app: string;
+    /** The app's name, heading its own Settings sections. */
+    appLabel: string;
+    /** The sidebar's top: the app's name, or a switcher between a product's apps. */
+    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`. */
+    status?: ReactNode;
+    /** The services the app checks, as one `StatusHealth` chip at the status bar's end. */
+    health?: ReactNode;
+    /** Status bar items after `health` and What's new, before the time zone. */
+    statusEnd?: ReactNode;
+    /** Turns on What's new: the app's releases API (`GET ?limit=&before=` answering `{releases}`).
+     *  The status bar shows the newest version, which opens each release's Key takeaways. */
+    releases?: string;
+    /** The app's own Settings sections, listed after General and the product's. */
+    settings?: SettingsSectionDef[];
+    /** Sections every app of the product shows, listed after General under `sharedLabel`. */
+    shared?: SettingsSectionDef[];
+    sharedLabel?: string;
+    /** Who is signed in (the profile button); null while it loads. */
+    user?: ShellUser | null;
+    /** Where Sign out goes; no Sign out without it. */
+    signOutUrl?: string;
+    /** Settings ▸ General ▸ Profile's content; no Profile section without it. */
+    profile?: ReactNode;
+    /** Reloads the page's data and drops every cached read (TanStack Query `invalidateQueries`);
+     *  shows Refresh in the header, which then mounts the page again. */
+    onRefresh?: () => Promise<unknown>;
+    /** Shows Hide amounts (eye) in the header: masks the fields and values the app marks `amount`. */
+    hideAmounts?: boolean;
+    /** Opens the app's Logs page; shows Logs in the profile menu. */
+    onLogs?: () => void;
+    /** The product's buttons on every page header, after Refresh (the product's Tasks and the assistant). */
+    headerActions?: ReactNode;
+    /** A panel docked right of the page (the product's assistant). */
+    panel?: ReactNode;
+    /** How ⌘K Find reads in this app: its chips and how the nav's pages group. */
+    finder?: LumenFinderConfig;
+    /** Wraps the frame in the product's providers, inside the shell so they can call `useShell`. */
+    wrap?: (frame: ReactNode) => ReactNode;
+    /** The routed page (usually `<Outlet />`). */
+    children: ReactNode;
+}
+export declare function LumenShell({ app, appLabel, brand, nav, status, health, statusEnd, releases, settings, shared, sharedLabel, user, signOutUrl, profile, onRefresh, hideAmounts, onLogs, headerActions, panel, finder, wrap, children, }: LumenShellProps): import("react").JSX.Element;
+/** A status bar entry: an optional health dot, a label and a mono value. */
+export declare function StatusItem({ label, value, ok, className, }: {
+    label: ReactNode;
+    value?: ReactNode;
+    /** Green when true, red when false, grey while unknown; no dot when left out. */
+    ok?: boolean | null;
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/shell.js

@@ -0,0 +1,137 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The frame every app renders in, from the shadcn sidebar-07 block: the app's
+// brand (or an app switcher) top-left, its own nav, the profile bottom-left; collapses to icons on
+// desktop and becomes a drawer on phone. An app passes its id, nav and status items; pages render in
+// `Page`. What a product adds to every app (the product's app switcher, the assistant, Tasks) comes in through
+// the slots below (`brand`, `wrap`, `panel`, `headerActions`, `shared`), never from here.
+import { useRouterState } from '@tanstack/react-router';
+import { ChevronsUpDownIcon, LogOutIcon, ScrollTextIcon, SettingsIcon, SunMoonIcon, } from 'lucide-react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import { cn } from './lib/utils.js';
+import { LumenFinder } from './lumen-finder.js';
+import { usePrefs } from './prefs.js';
+import { withRefreshToken } from './refresh.js';
+import { LumenSettings, ThemeToggle, allSettings } from './settings.js';
+import { SourceHealthProvider } from './source-health.js';
+import { StatusTimeZone } from './status.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';
+import { Toaster } from './ui/sonner.js';
+import { TooltipProvider } from './ui/tooltip.js';
+import { WhatsNew } from './whats-new.js';
+const Ctx = createContext(null);
+export function useShell() {
+    const c = useContext(Ctx);
+    if (!c)
+        throw new Error('useShell must be used inside <LumenShell>.');
+    return c;
+}
+/** The app this page renders in, or null outside a shell (a preview). */
+export function useApp() {
+    const c = useContext(Ctx);
+    return c ? { id: c.app, label: c.appLabel } : null;
+}
+/** True while Hide amounts is on in an app that offers it: holding amounts render as `•••••`. */
+export function useAmountsHidden() {
+    const offered = useContext(Ctx)?.hideAmounts ?? false;
+    return usePrefs().hideAmounts && offered;
+}
+/** `+$152,372` → `+$•••••`: every number in the text masked, signs and units kept. */
+export const maskAmount = (text) => text.replace(/\d[\d.,]*/g, '•••••');
+/** The sidebar provider writes this cookie on toggle; reading it back keeps the choice per app. */
+const sidebarOpen = () => typeof document === 'undefined' || !document.cookie.split('; ').includes('sidebar_state=false');
+/** The phone drawer closes once a link in it opens a page. */
+function CloseDrawerOnNavigate() {
+    const path = useRouterState({ select: (s) => s.location.pathname });
+    const { setOpenMobile } = useSidebar();
+    // biome-ignore lint/correctness/useExhaustiveDependencies: runs on each new path.
+    useEffect(() => setOpenMobile(false), [path, setOpenMobile]);
+    return null;
+}
+const SETTINGS_KEYS = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform) ? '⌘,' : 'Ctrl+,';
+/** The profile menu's theme line: not a menu item, so a pick keeps it open. */
+function ThemeItem() {
+    return (_jsxs("div", { "data-slot": "theme-item", className: "flex items-center gap-2 px-2 py-1 text-sm", children: [_jsx(SunMoonIcon, { className: "size-4 text-muted-foreground" }), _jsx("span", { className: "flex-1", children: "Theme" }), _jsx(ThemeToggle, { compact: true })] }));
+}
+/** `AL` from "Ada Lovelace", else the first two letters of the email. */
+export function initials(who) {
+    if (!who)
+        return '··';
+    const parts = (who.name ?? '').trim().split(/\s+/).filter(Boolean);
+    if (parts.length >= 2)
+        return `${parts[0]?.[0] ?? ''}${parts.at(-1)?.[0] ?? ''}`.toUpperCase();
+    return who.email.slice(0, 2).toUpperCase();
+}
+/** What the profile button shows: the first name only, else the email's name. */
+export function firstName(who) {
+    if (!who)
+        return 'Signed in';
+    return (who.name ?? '').trim().split(/\s+/)[0] || (who.email.split('@')[0] ?? who.email);
+}
+function NavUser({ who, signOutUrl, onSettings, onLogs, }) {
+    const { isMobile } = useSidebar();
+    const person = (_jsxs(_Fragment, { children: [_jsx(Avatar, { className: "size-8 rounded-lg", children: _jsx(AvatarFallback, { className: "rounded-lg text-xs", children: initials(who) }) }), _jsx("span", { className: "flex-1 truncate text-left text-sm font-medium", children: firstName(who) })] }));
+    return (_jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { size: "lg", tooltip: "Profile", "aria-label": "Profile", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [person, _jsx(ChevronsUpDownIcon, { className: "ml-auto size-4" })] }) }), _jsxs(DropdownMenuContent, { className: "min-w-56 rounded-lg", side: isMobile ? 'bottom' : 'right', align: "end", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "truncate font-normal text-muted-foreground", children: who?.email ?? 'Signed in' }), _jsxs(DropdownMenuGroup, { children: [_jsxs(DropdownMenuItem, { onSelect: onSettings, children: [_jsx(SettingsIcon, {}), "Settings", _jsx(DropdownMenuShortcut, { children: SETTINGS_KEYS })] }), onLogs ? (_jsxs(DropdownMenuItem, { onSelect: onLogs, children: [_jsx(ScrollTextIcon, {}), "Logs"] })) : null, _jsx(ThemeItem, {})] }), signOutUrl && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { asChild: true, children: _jsxs("a", { href: signOutUrl, "data-sign-out": true, children: [_jsx(LogOutIcon, {}), "Sign out"] }) })] }))] })] }) }) }));
+}
+// `?settings=<section>` opens Settings there (GitHub's install page returns to it). It is read when
+// the page loads, before an app's router can redirect it away, and dropped from the URL so a reload
+// does not reopen it.
+const settingsFromUrl = (() => {
+    if (typeof window === 'undefined')
+        return null;
+    const url = new URL(window.location.href);
+    const at = url.searchParams.get('settings');
+    if (at === null)
+        return null;
+    url.searchParams.delete('settings');
+    window.history.replaceState(window.history.state, '', url);
+    return at || 'profile';
+})();
+export function LumenShell({ app, appLabel, brand, nav, status, health, statusEnd, releases, settings, shared, sharedLabel, user = null, signOutUrl, profile, onRefresh, hideAmounts = false, onLogs, headerActions = null, panel, finder, wrap = (frame) => frame, children, }) {
+    const [statusSlot, setStatusSlot] = useState(null);
+    const [refreshing, setRefreshing] = useState(false);
+    // Refresh reloads the layout too: once the data is fresh the page mounts
+    // again, so every card, tab and saved layout starts from what the server holds now.
+    const [epoch, setEpoch] = useState(0);
+    const refresh = useCallback(async () => {
+        if (!onRefresh)
+            return;
+        setRefreshing(true);
+        try {
+            await withRefreshToken(onRefresh);
+        }
+        finally {
+            setRefreshing(false);
+            setEpoch((e) => e + 1);
+        }
+    }, [onRefresh]);
+    const [settingsAt, setSettingsAt] = useState(settingsFromUrl);
+    const [lastSection, setLastSection] = useState(settingsAt ?? 'profile');
+    const openSettings = useCallback((section) => {
+        const at = section ?? lastSection;
+        setLastSection(at);
+        setSettingsAt(at);
+    }, [lastSection]);
+    useEffect(() => {
+        document.documentElement.dataset.app = app;
+    }, [app]);
+    // Find lists every Settings section by name.
+    const sectionNames = JSON.stringify(allSettings(profile, shared, settings).map((s) => ({ id: s.id, title: s.title })));
+    const findSettings = useMemo(() => JSON.parse(sectionNames), [sectionNames]);
+    return (_jsx(Ctx.Provider, { value: {
+            app,
+            appLabel,
+            statusSlot,
+            openSettings,
+            closeSettings: () => setSettingsAt(null),
+            refresh: onRefresh ? refresh : null,
+            refreshing,
+            hideAmounts,
+            headerActions,
+        }, 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 }), statusEnd, _jsx(StatusTimeZone, {})] })] })] }), panel, _jsx(LumenSettings, { open: settingsAt !== null, section: settingsAt ?? lastSection, onOpen: openSettings, onClose: () => setSettingsAt(null), appLabel: appLabel, profile: profile, sections: settings, shared: shared, sharedLabel: sharedLabel }), _jsx(Toaster, { position: "bottom-right" })] }) }) })) }) }));
+}
+/** A status bar entry: an optional health dot, a label and a mono value. */
+export function StatusItem({ label, value, ok, className, }) {
+    return (_jsxs("span", { className: cn('flex items-center gap-1.5', className), children: [ok !== undefined && (_jsx("span", { "aria-hidden": true, className: cn('size-2 rounded-full', ok === null ? 'bg-muted-foreground/40' : ok ? 'bg-gain' : 'bg-destructive') })), label, value !== undefined && (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "num text-foreground/80", children: value })] }))] }));
+}

package/dist/source-health.d.ts

@@ -0,0 +1,12 @@
+import { type SourceState } from '@columenlabs/lumen-ui-types/domains';
+import { type ReactNode } from 'react';
+export declare function SourceHealthProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useReportSources(sources: SourceState[]): void;
+/** Every source the cards on screen read, one entry per source (the first card's word). */
+export declare function useSourceHealth(): SourceState[];
+/** One line on the sources behind the page: `a broker live · an app Oct 15 · Feed off`. */
+export declare function SourcesLine({ className }: {
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/source-health.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Source health (views from data domains): the sources every card on screen
+// reads through its joins, one report per shell, so the assistant panel can say in one line how each
+// fared (the same report that marks a column's header and the status bar).
+import { sourceLine } from '@columenlabs/lumen-ui-types/domains';
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useState, } from 'react';
+import { detailOf } from './joins.js';
+const HealthCtx = createContext(null);
+export function SourceHealthProvider({ children }) {
+    const [reports, setReports] = useState(() => new Map());
+    // Stable, so a card's report effect runs once per change of its sources, not once per report.
+    const set = useCallback((id, sources) => setReports((was) => {
+        const next = new Map(was);
+        if (sources?.length)
+            next.set(id, sources);
+        else
+            next.delete(id);
+        return next;
+    }), []);
+    const value = useMemo(() => ({ reports, set }), [reports, set]);
+    return _jsx(HealthCtx.Provider, { value: value, children: children });
+}
+export function useReportSources(sources) {
+    const ctx = useContext(HealthCtx);
+    const id = useId();
+    const set = ctx?.set;
+    const key = JSON.stringify(sources);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: keyed on the sources' content.
+    useEffect(() => {
+        if (!set)
+            return;
+        set(id, sources);
+        return () => set(id, null);
+    }, [set, id, key]);
+}
+/** Every source the cards on screen read, one entry per source (the first card's word). */
+export function useSourceHealth() {
+    const ctx = useContext(HealthCtx);
+    return useMemo(() => {
+        const out = new Map();
+        for (const list of ctx?.reports.values() ?? [])
+            for (const s of list)
+                if (!out.has(s.id))
+                    out.set(s.id, s);
+        return [...out.values()];
+    }, [ctx?.reports]);
+}
+/** One line on the sources behind the page: `a broker live · an app Oct 15 · Feed off`. */
+export function SourcesLine({ className }) {
+    const sources = useSourceHealth();
+    if (!sources.length)
+        return null;
+    return (_jsx("div", { className: className, title: sources.map(sourceLine).join(' · '), children: sources.map((s, i) => (_jsxs("span", { className: "inline-flex items-center gap-1", children: [i > 0 && _jsx("span", { className: "mx-1 opacity-50", children: "\u00B7" }), _jsx("span", { "aria-hidden": true, className: s.state === 'ok'
+                        ? 'size-1.5 rounded-full bg-gain'
+                        : s.state === 'failed'
+                            ? 'size-1.5 rounded-full bg-destructive'
+                            : 'size-1.5 rounded-full bg-muted-foreground/40' }), _jsx("span", { children: s.name }), _jsx("span", { className: "text-muted-foreground", children: detailOf(s, '') })] }, s.id))) }));
+}

package/dist/spotlight.d.ts

@@ -0,0 +1,23 @@
+export interface CardOnScreen {
+    id: string;
+    title: string;
+    /** `view` for a table card, else the widget's kind (chart, tiles, ...). */
+    kind: string;
+}
+export declare const cardOf: (el: HTMLElement) => CardOnScreen;
+/** The cards on the page now, top to bottom. */
+export declare const cardsOnScreen: () => CardOnScreen[];
+/** Where a target is on screen now: a card on the page, a sidebar page, or neither. */
+export declare function onScreen(target: string | null | undefined): 'card' | 'nav' | null;
+/**
+ * Lights one target (`card:<id>` or an app path) and dims the page around it; null clears. The
+ * target scrolls into view only after a short hover.
+ */
+export declare function spotlight(target: string | null | undefined, name?: string): void;
+/**
+ * Point at the page: the cards dim and the one under the cursor (or finger) lights up with its
+ * name; a click picks it, Esc or a click off any card cancels.
+ */
+export declare function pointAtCard(): Promise<CardOnScreen | null>;
+/** A card's style (`kind:style`) as a person says it: a table, a donut, a page's own card. */
+export declare function kindName(styleId: string): string;