@columenlabs/lumen-ui 0.1.63 → 0.1.64

package/dist/index.d.ts

@@ -54,7 +54,7 @@ export { LumenPageState } from './lumen-page-state.js';
 export { type FormIssue, goToIssue, SaveButton } from './form-issues.js';
 export { LumenForm, type LumenFormField, lumenFormIssues, type LumenFormValue, type LumenFormValues, } from './lumen-form.js';
 export { RouteError, isStaleBuildError, reloadForNewBuild, reportError, watchNewBuilds, } from './route-error.js';
-export { LumenSettings, SettingRow, SettingsActions, SettingsFooter, type SettingsSectionDef, } from './settings.js';
+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';

package/dist/settings.d.ts

@@ -13,6 +13,11 @@ export interface SettingsSectionDef {
      *  every section, empty when it has nothing; `SettingsFooter` fills it too. */
     footer?: ReactNode;
 }
+/** A labelled group of sections in Settings: one per app when a product shows several apps' settings together. */
+export interface SettingsGroupDef {
+    label: string;
+    sections: SettingsSectionDef[];
+}
 /** Renders its children in the section header, right of the title. */
 export declare function SettingsActions({ children }: {
     children: ReactNode;
@@ -32,9 +37,9 @@ export declare function SettingRow({ label, description, htmlFor, children, }: {
 export declare function ThemeToggle({ compact }: {
     compact?: boolean;
 }): import("react").JSX.Element;
-/** Every Settings section in the order the dialog lists them: General, the product's, the app's. */
-export declare function allSettings(profile: ReactNode | undefined, shared?: SettingsSectionDef[], sections?: SettingsSectionDef[], security?: ReactNode): SettingsSectionDef[];
-export declare function LumenSettings({ open, section, onOpen, onClose, appLabel, profile, security, sections, shared, sharedLabel, }: {
+/** Every Settings section in the order the dialog lists them: General, the product's, the groups', the app's. */
+export declare function allSettings(profile: ReactNode | undefined, shared?: SettingsSectionDef[], sections?: SettingsSectionDef[], security?: ReactNode, groups?: SettingsGroupDef[]): SettingsSectionDef[];
+export declare function LumenSettings({ open, section, onOpen, onClose, appLabel, profile, security, sections, shared, sharedLabel, groups, }: {
     open: boolean;
     /** The section shown; unknown ids show Profile. */
     section: string;
@@ -50,4 +55,6 @@ export declare function LumenSettings({ open, section, onOpen, onClose, appLabel
     /** Sections the product adds to every app (the assistant), listed under `sharedLabel` after General. */
     shared?: SettingsSectionDef[];
     sharedLabel?: string;
+    /** More labelled groups (one per app), listed after the shared ones and before the app's own. */
+    groups?: SettingsGroupDef[];
 }): import("react").JSX.Element;

package/dist/settings.js

@@ -101,18 +101,25 @@ const GENERAL = [
         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 = [], security) {
-    const general = [
+function generalSettings(profile, security) {
+    return [
         ...(profile ? [{ ...PROFILE, content: profile }] : []),
         ...(security ? [{ ...SECURITY, content: security }] : []),
         ...GENERAL,
     ];
-    return [...general, ...shared, ...sections];
 }
-export function LumenSettings({ open, section, onOpen, onClose, appLabel, profile, security, sections = [], shared = [], sharedLabel = 'All apps', }) {
-    const all = allSettings(profile, shared, sections, security);
-    const general = all.slice(0, all.length - shared.length - sections.length);
+/** Every Settings section in the order the dialog lists them: General, the product's, the groups', the app's. */
+export function allSettings(profile, shared = [], sections = [], security, groups = []) {
+    return [
+        ...generalSettings(profile, security),
+        ...shared,
+        ...groups.flatMap((g) => g.sections),
+        ...sections,
+    ];
+}
+export function LumenSettings({ open, section, onOpen, onClose, appLabel, profile, security, sections = [], shared = [], sharedLabel = 'All apps', groups = [], }) {
+    const all = allSettings(profile, shared, sections, security, groups);
+    const general = generalSettings(profile, security);
     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', {
@@ -151,9 +158,10 @@ export function LumenSettings({ open, section, onOpen, onClose, appLabel, profil
         setQuery('');
         onOpen(id);
     };
-    const groups = [
+    const navGroups = [
         { label: 'General', items: general.filter(shown) },
         { label: sharedLabel, items: shared.filter(shown) },
+        ...groups.map((g) => ({ label: g.label, items: g.sections.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, {}) }) }))] }));
@@ -172,7 +180,7 @@ export function LumenSettings({ open, section, onOpen, onClose, appLabel, profil
                     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) => ({
+            }, 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 }), navGroups.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: navGroups.map((g) => ({
                                 label: g.label,
                                 options: g.items.map((s) => ({
                                     value: s.id,

package/dist/shell.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 import { type LumenFinderConfig } from './lumen-finder.js';
-import { type SettingsSectionDef } from './settings.js';
+import { type SettingsGroupDef, type SettingsSectionDef } from './settings.js';
 interface ShellContext {
     /** The app this page renders in (`data-app` on the root `<html>`). */
     app: string;
@@ -65,6 +65,8 @@ export interface LumenShellProps {
     /** Sections every app of the product shows, listed after General under `sharedLabel`. */
     shared?: SettingsSectionDef[];
     sharedLabel?: string;
+    /** More labelled Settings groups (one per app of a product), listed after `shared`, before the app's own. */
+    settingsGroups?: SettingsGroupDef[];
     /** Who is signed in (the profile button); null while it loads. */
     user?: ShellUser | null;
     /** Where Sign out goes; no Sign out without it. */
@@ -91,7 +93,7 @@ export interface LumenShellProps {
     /** The routed page (usually `<Outlet />`). */
     children: ReactNode;
 }
-export declare function LumenShell({ app, appLabel, brand, nav, status, health, statusEnd, releases, releaseApps, settings, shared, sharedLabel, user, signOutUrl, profile, security, onRefresh, hideAmounts, onLogs, headerActions, panel, finder, wrap, children, }: LumenShellProps): import("react").JSX.Element;
+export declare function LumenShell({ app, appLabel, brand, nav, status, health, statusEnd, releases, releaseApps, settings, shared, sharedLabel, settingsGroups, user, signOutUrl, profile, security, onRefresh, hideAmounts, onLogs, headerActions, panel, finder, wrap, children, }: LumenShellProps): import("react").JSX.Element;
 /** A status bar entry: an optional health dot, a label and a mono value. */
 export declare function StatusItem({ label, value, ok, className, }: {
     label: ReactNode;

package/dist/shell.js

@@ -11,7 +11,7 @@ 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 { LumenSettings, ThemeToggle, allSettings, } from './settings.js';
 import { SourceHealthProvider } from './source-health.js';
 import { StatusTimeZone } from './status.js';
 import { Avatar, AvatarFallback } from './ui/avatar.js';
@@ -88,7 +88,7 @@ const settingsFromUrl = (() => {
     window.history.replaceState(window.history.state, '', url);
     return at || 'profile';
 })();
-export function LumenShell({ app, appLabel, brand, nav, status, health, statusEnd, releases, releaseApps, settings, shared, sharedLabel, user = null, signOutUrl, profile, security, onRefresh, hideAmounts = false, onLogs, headerActions = null, panel, finder, wrap = (frame) => frame, children, }) {
+export function LumenShell({ app, appLabel, brand, nav, status, health, statusEnd, releases, releaseApps, settings, shared, sharedLabel, settingsGroups, user = null, signOutUrl, profile, security, onRefresh, hideAmounts = false, onLogs, headerActions = null, panel, finder, wrap = (frame) => frame, children, }) {
     const [statusSlot, setStatusSlot] = useState(null);
     const [refreshing, setRefreshing] = useState(false);
     // Refresh reloads the layout too: once the data is fresh the page mounts
@@ -117,7 +117,10 @@ export function LumenShell({ app, appLabel, brand, nav, status, health, statusEn
         document.documentElement.dataset.app = app;
     }, [app]);
     // Find lists every Settings section by name.
-    const sectionNames = JSON.stringify(allSettings(profile, shared, settings, security).map((s) => ({ id: s.id, title: s.title })));
+    const sectionNames = JSON.stringify(allSettings(profile, shared, settings, security, settingsGroups).map((s) => ({
+        id: s.id,
+        title: s.title,
+    })));
     const findSettings = useMemo(() => JSON.parse(sectionNames), [sectionNames]);
     return (_jsx(Ctx.Provider, { value: {
             app,
@@ -129,7 +132,7 @@ export function LumenShell({ app, appLabel, brand, nav, status, health, statusEn
             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, apps: releaseApps }), statusEnd, _jsx(StatusTimeZone, {})] })] })] }), 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 }), _jsx(Toaster, { position: "bottom-right" })] }) }) })) }) }));
+        }, children: _jsx(SourceHealthProvider, { children: wrap(_jsx(TooltipProvider, { delayDuration: 200, children: _jsx(SidebarProvider, { defaultOpen: sidebarOpen(), children: _jsxs(LumenFinder, { app: app, settings: findSettings, openSettings: openSettings, config: finder, children: [_jsx(CloseDrawerOnNavigate, {}), _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: brand }), _jsx(SidebarContent, { children: nav }), _jsx(SidebarFooter, { children: _jsx(NavUser, { who: user, signOutUrl: signOutUrl, onSettings: () => openSettings(), onLogs: onLogs }) }), _jsx(SidebarRail, {})] }), _jsxs(SidebarInset, { className: "flex min-h-svh min-w-0 flex-col", children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: children }, epoch), _jsxs("footer", { "data-slot": "shell-status", "aria-label": "Status", className: "sticky bottom-0 z-10 flex h-(--shell-status-height) shrink-0 items-center gap-4 overflow-x-auto overflow-y-hidden border-t bg-background px-(--shell-gutter) text-xs whitespace-nowrap text-muted-foreground", children: [status, _jsx("div", { ref: setStatusSlot, className: "flex shrink-0 items-center gap-4" }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: [health, releases && _jsx(WhatsNew, { api: releases, apps: releaseApps }), statusEnd, _jsx(StatusTimeZone, {})] })] })] }), 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 a mono value. */
 export function StatusItem({ label, value, ok, className, }) {

package/package.json

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