@columenlabs/lumen-ui 0.1.71 → 0.1.73

package/README.md

@@ -57,7 +57,7 @@ Use `createDeskQueryClient()` for the app's TanStack Query client: data stays fr
 
 ## What's inside
 
-**Frame.** `LumenShell` (sidebar with icons-only collapse and a drawer on phone, header, status bar, Settings, profile menu, ⌘K Find), `LumenAppSwitcher`, `WhatsNew` (release notes in a drawer), `TasksButton` and `TasksProvider` (background work in the header), `NotificationsSettings`, `McpSettings`, sign-in screens (`LumenAuthStage`, `LumenSecondStep`, `LumenSignInMethods`, `LumenBackupCodes`), `StatusHealth`, `LumenBoundary` (keeps a crash inside its card), `LumenPageState` (loading, empty and error), `lumenToast`.
+**Frame.** `LumenShell` (sidebar with icons-only collapse and a drawer on phone, header, status bar, Settings, profile menu, ⌘K Find), `LumenAppSwitcher` and `LumenSuiteSwitcher` (groups, apps on other sites, a list read from an address), `WhatsNew` (release notes in a drawer), `TasksButton` and `TasksProvider` (background work in the header), `NotificationsSettings`, `McpSettings`, sign-in screens (`LumenAuthStage`, `LumenSecondStep`, `LumenSignInMethods`, `LumenBackupCodes`), `StatusHealth`, `LumenBoundary` (keeps a crash inside its card), `LumenPageState` (loading, empty and error), `lumenToast`.
 
 **Pages and views.** `LumenLayout` (a page of cards from one view config: filter, tiles, widgets; Edit layout and Edit widget when you pass `onConfigChange`), `LumenGrid` (the 6-column grid under it), `LumenView` and `LumenViewCard` (a table that filters, groups, pivots and totals the rows you load), `LumenTable`, `LumenTokenizedFilter`, `LumenWidget` and `LumenSavedWidget` (the frame every card sits in, with its link square and controls), `LumenCard` (one number and its lines), `LumenPager`, `DetailsTable`, `LumenTree`, `useAppView` (a page whose layout each person can change and reset).
 

package/dist/app-switcher.d.ts

@@ -1,5 +1,5 @@
-import { type LucideIcon } from 'lucide-react';
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
+import type { NavIcon } from './nav.js';
 /** One app of the product. */
 export interface LumenApp {
     id: string;
@@ -7,15 +7,50 @@ export interface LumenApp {
     name: string;
     /** How its name is drawn (e.g. the app's accent, then a shared suffix); `name` when left out. */
     label?: ReactNode;
-    icon: LucideIcon;
+    /** Its mark; `iconUrl`, then the name's first letter, when left out. */
+    icon?: NavIcon;
+    /** An image of its mark (another site's favicon). */
+    iconUrl?: string;
     href: string;
+    /** The heading it sits under; apps with none lead the menu under `menuLabel`. */
+    group?: string;
+    /** On another site: the menu shows its host and an arrow. */
+    external?: boolean;
 }
 export declare function LumenAppSwitcher({ current, apps, product, menuLabel, }: {
     /** The app this page belongs to; it leads `apps` even when the menu leaves it out. */
     current: LumenApp;
-    /** The apps the menu lists, in order. */
+    /** The apps the menu lists, in order; a group shows where its first app is. */
     apps: LumenApp[];
-    /** The product's name under the app's. */
+    /** The product's name under the app's (or where it is, such as its host). */
+    product?: string;
+    menuLabel?: string;
+}): import("react").JSX.Element;
+/** One app as a suite list gives it: `icon` is a lucide name, `url` an absolute address. */
+export interface SuiteApp {
+    id: string;
+    name: string;
+    url: string;
+    icon?: string;
+    iconUrl?: string;
+    group?: string;
+}
+/** What a suite list address answers. */
+export interface SuiteList {
+    apps: SuiteApp[];
+}
+/** The suite's apps as switcher apps; an app on another host is `external`. */
+export declare function suiteApps(list: SuiteList, here: URL): LumenApp[];
+/**
+ * The switcher of an app that joins a suite someone else runs: it reads the suite's apps from
+ * `source` (sent with this browser's cookies, so the suite must allow this origin) and marks this
+ * app in it. With no `source`, or when the list can't be read, the menu lists only `current`.
+ */
+export declare function LumenSuiteSwitcher({ source, current, product, menuLabel, }: {
+    /** The suite list address (answers a `SuiteList`); none: no suite. */
+    source?: string;
+    /** This app; the list's entry for this page's address takes its place. */
+    current: LumenApp;
     product?: string;
     menuLabel?: string;
 }): import("react").JSX.Element;

package/dist/app-switcher.js

@@ -1,12 +1,106 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The app switcher (in Lumen for any product with more than one app): the
 // sidebar's top shows the current app and opens a menu of the product's apps. LumenShell's `brand`
-// takes it; the product passes the apps the person can open.
-import { ChevronsUpDownIcon } from 'lucide-react';
+// takes it; the product passes the apps the person can open. Apps may sit in groups, and an app on
+// another site (`external`) shows its host and an arrow, so a person can tell a page of this app from
+// a separate one. `LumenSuiteSwitcher` reads the list from an address instead, for an app that
+// joins a suite it doesn't run (the address is set per deployment; none, the menu lists only itself).
+import { useQuery } from '@tanstack/react-query';
+import { ArrowUpRightIcon, ChevronsUpDownIcon } from 'lucide-react';
+import { Fragment, useState } from 'react';
 import { cn } from './lib/utils.js';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger, } from './ui/dropdown-menu.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from './ui/dropdown-menu.js';
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from './ui/sidebar.js';
+import { lucideIcon } from './view-icons.js';
+function AppMark({ app, className }) {
+    const [broken, setBroken] = useState(false);
+    if (app.icon)
+        return _jsx(app.icon, { className: className });
+    if (app.iconUrl && !broken)
+        return (_jsx("img", { src: app.iconUrl, alt: "", className: cn(className, 'object-contain'), onError: () => setBroken(true) }));
+    return (_jsx("span", { className: "text-xs font-semibold leading-none", children: app.name.slice(0, 1).toUpperCase() }));
+}
+const hostOf = (href) => {
+    try {
+        return new URL(href).host;
+    }
+    catch {
+        return href;
+    }
+};
 export function LumenAppSwitcher({ current, apps, product, menuLabel = 'Apps', }) {
     const { isMobile } = useSidebar();
-    return (_jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { size: "lg", tooltip: current.name, className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground", children: _jsx(current.icon, { className: "size-4" }) }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: current.label ?? current.name }), product && (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: product }))] }), _jsx(ChevronsUpDownIcon, { className: "ml-auto" })] }) }), _jsxs(DropdownMenuContent, { className: "min-w-56 rounded-lg", align: "start", side: isMobile ? 'bottom' : 'right', sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: menuLabel }), apps.map((a) => (_jsx(DropdownMenuItem, { asChild: true, className: cn('gap-2 p-2', a.id === current.id && 'bg-muted'), children: _jsxs("a", { href: a.href, "aria-current": a.id === current.id ? 'page' : undefined, children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border", children: _jsx(a.icon, { className: "size-3.5 shrink-0" }) }), a.label ?? a.name] }) }, a.id)))] })] }) }) }));
+    const groups = [];
+    for (const a of apps) {
+        const label = a.group ?? menuLabel;
+        const g = groups.find((x) => x.label === label);
+        if (g)
+            g.apps.push(a);
+        else if (a.group)
+            groups.push({ label, apps: [a] });
+        else
+            groups.unshift({ label, apps: [a] });
+    }
+    return (_jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { size: "lg", tooltip: current.name, className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground", children: _jsx(AppMark, { app: current, className: "size-4" }) }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: current.label ?? current.name }), product && (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: product }))] }), _jsx(ChevronsUpDownIcon, { className: "ml-auto" })] }) }), _jsx(DropdownMenuContent, { className: "min-w-56 max-w-96 rounded-lg", align: "start", side: isMobile ? 'bottom' : 'right', sideOffset: 4, children: groups.map((g, i) => (_jsxs(Fragment, { children: [i > 0 && _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: g.label }), g.apps.map((a) => (_jsx(DropdownMenuItem, { asChild: true, className: cn('gap-2 p-2', a.id === current.id && 'bg-muted'), children: _jsxs("a", { href: a.href, "aria-current": a.id === current.id ? 'page' : undefined, children: [_jsx("div", { className: "flex size-6 shrink-0 items-center justify-center rounded-md border", children: _jsx(AppMark, { app: a, className: "size-3.5 shrink-0" }) }), _jsx("span", { className: cn('truncate', a.external && 'shrink-0'), children: a.label ?? a.name }), a.external && (_jsxs(_Fragment, { children: [_jsx("span", { className: "ml-auto min-w-0 truncate text-xs text-muted-foreground", children: hostOf(a.href) }), _jsx(ArrowUpRightIcon, { className: "size-3.5 shrink-0 text-muted-foreground" })] }))] }) }, a.id)))] }, g.label))) })] }) }) }));
+}
+/** How far `url` matches this page: its host, then the longest path it starts. */
+const matchLength = (url, here) => {
+    try {
+        const u = new URL(url);
+        if (u.host !== here.host)
+            return -1;
+        const path = u.pathname.replace(/\/$/, '');
+        return path === '' || here.pathname === path || here.pathname.startsWith(`${path}/`)
+            ? path.length
+            : -1;
+    }
+    catch {
+        return -1;
+    }
+};
+/** The suite's apps as switcher apps; an app on another host is `external`. */
+export function suiteApps(list, here) {
+    return list.apps.map((a) => ({
+        id: a.id,
+        name: a.name,
+        href: a.url,
+        icon: a.icon ? lucideIcon(a.icon) : undefined,
+        iconUrl: a.iconUrl,
+        group: a.group,
+        external: hostOf(a.url) !== here.host,
+    }));
+}
+/**
+ * The switcher of an app that joins a suite someone else runs: it reads the suite's apps from
+ * `source` (sent with this browser's cookies, so the suite must allow this origin) and marks this
+ * app in it. With no `source`, or when the list can't be read, the menu lists only `current`.
+ */
+export function LumenSuiteSwitcher({ source, current, product, menuLabel, }) {
+    const list = useQuery({
+        queryKey: ['lumen-suite', source],
+        enabled: !!source,
+        queryFn: async () => {
+            const res = await fetch(source, { credentials: 'include' });
+            if (!res.ok)
+                throw new Error(`suite list ${res.status}`);
+            return res.json();
+        },
+        staleTime: 5 * 60_000,
+        retry: false,
+    });
+    const here = new URL(location.href);
+    const apps = list.data ? suiteApps(list.data, here) : [];
+    // This page's entry is the one whose address it sits under (longest path wins); this app keeps its own mark.
+    let best = -1;
+    let mine;
+    for (const a of list.data?.apps ?? []) {
+        const n = matchLength(a.url, here);
+        if (n > best) {
+            best = n;
+            mine = a.id;
+        }
+    }
+    const shown = apps.map((a) => a.id === mine ? { ...a, ...current, id: a.id, group: a.group, external: false } : a);
+    const me = shown.find((a) => a.id === mine) ?? current;
+    return (_jsx(LumenAppSwitcher, { current: me, apps: shown.length ? shown : [current], product: product ?? here.host, menuLabel: menuLabel }));
 }

package/dist/index.d.ts

@@ -58,7 +58,7 @@ export { RouteError, isStaleBuildError, reloadForNewBuild, reportError, watchNew
 export { LumenSettings, SettingRow, SettingsActions, SettingsFooter, type SettingsGroupDef, type SettingsSectionDef, } from './settings.js';
 export { LumenCard } from './summary-cards.js';
 export { WhatsNew } from './whats-new.js';
-export { type LumenApp, LumenAppSwitcher } from './app-switcher.js';
+export { type LumenApp, LumenAppSwitcher, LumenSuiteSwitcher, type SuiteApp, type SuiteList, suiteApps, } from './app-switcher.js';
 export { type BriefActions, type BriefChange, type ScheduleChange, type ScheduleItem, type ScheduleRun, SchedulesSection, } from './schedules.js';
 export { NotificationsSettings } from './notifications.js';
 export { type TasksConfig, TasksButton, TasksProvider, useTasks } from './tasks.js';

package/dist/index.js

@@ -65,7 +65,7 @@ export { RouteError, isStaleBuildError, reloadForNewBuild, reportError, watchNew
 export { LumenSettings, SettingRow, SettingsActions, SettingsFooter, } from './settings.js';
 export { LumenCard } from './summary-cards.js';
 export { WhatsNew } from './whats-new.js';
-export { LumenAppSwitcher } from './app-switcher.js';
+export { LumenAppSwitcher, LumenSuiteSwitcher, suiteApps, } from './app-switcher.js';
 export { SchedulesSection, } from './schedules.js';
 export { NotificationsSettings } from './notifications.js';
 export { TasksButton, TasksProvider, useTasks } from './tasks.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.71",
+  "version": "0.1.73",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -45,7 +45,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.71",
+    "@columenlabs/lumen-ui-types": "0.1.73",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",