shutro-erp 0.3.2 → 0.3.4

package/dist/ui/app.js

@@ -12,28 +12,35 @@ import { compileSearch, decodeSearch, encodeSearch } from '../search/index.js';
 import { onlineManager, QueryClient, QueryClientProvider, useQuery, useQueryClient, } from '@tanstack/react-query';
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
 import { createRootRoute, createRoute, createRouter, Link, Navigate, Outlet, RouterProvider, useNavigate, useParams, useSearch, } from '@tanstack/react-router';
-import { CalendarDays, ChartColumn, ChartGantt, Columns3, Grid2x2, Grid3x3, Languages, LayoutDashboard, List, LogOut, Map as MapIcon, Monitor, Moon, Network, Plus, Search, Sheet, Sun, Table2, UserRound, } from 'lucide-react';
+import { CalendarDays, ChartColumn, ChartGantt, ChevronDown, ChevronRight, ChevronsUpDown, Columns3, Grid2x2, House, Languages, LayoutDashboard, List, LogOut, Map as MapIcon, Monitor, Moon, Network, PanelLeft, Plus, Search, Sheet, Sun, Table2, } from 'lucide-react';
 import { Direction } from 'radix-ui';
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
 import { I18nextProvider, useTranslation } from 'react-i18next';
 import { ApiError } from './api.js';
-import { Alert, Button, Menu, MenuCheckboxItem, MenuContent, MenuItem, MenuLabel, MenuSeparator, MenuTrigger, Select, Spinner, } from './components/primitives.js';
+import { Avatar, imageUrl } from './components/Avatar.js';
+import { Alert, Button, Menu, MenuCheckboxItem, MenuContent, MenuItem, MenuLabel, MenuSeparator, MenuTrigger, Spinner, } from './components/primitives.js';
 import { KoshProvider, useKosh } from './context.js';
 import { DesignProvider } from './design.js';
 import { addMessages, createI18n, directionOf } from './i18n/index.js';
 import { LANGUAGES } from './i18n/messages.js';
+import { cn } from './lib/cn.js';
 import { claimOfflineCache, createOfflinePersister, dropOfflineCache, OFFLINE_MAX_AGE_MS, offlinePersistOptions, } from './offline/persist.js';
 import { OfflineQueue } from './offline/queue.js';
 import { setPrefill, takePrefill } from './prefill.js';
 import { onAppUpdate, registerServiceWorker } from './pwa/register.js';
 import { createRealtimeClient } from './realtime.js';
 import { SearchBar } from './search/SearchBar.js';
+import { ViewTabs } from './search/ViewTabs.js';
+import { Activate } from './shell/Activate.js';
 import { CommandPalette, PaletteContext } from './shell/CommandPalette.js';
+import { Consent } from './shell/Consent.js';
 import { Home } from './shell/Home.js';
 import { Login } from './shell/Login.js';
 import { OfflineMenu } from './shell/OfflineMenu.js';
 import { rememberRecord } from './shell/recent.js';
+import { Sidebar, SidebarDrawer, useSidebarCollapsed } from './shell/Sidebar.js';
 import { ShortcutsHelp, useShortcuts } from './shell/shortcuts.js';
+import { TwoFactorSetup } from './shell/TwoFactorSetup.js';
 import { ToastProvider, useToast } from './shell/toast.js';
 import { neighbours } from './views/listMemory.js';
 /**
@@ -100,6 +107,11 @@ function useServices() {
         throw new Error('Shutro ERP routes render inside <KoshApp>.');
     return value;
 }
+/** The app's language and its switch (as the language menu does: direction, the server's labels). */
+export function useLanguage() {
+    const { lang, setLang } = useServices();
+    return { lang, setLang };
+}
 // ------------------------------------------------------------------------------------------------- shell
 function firstAction(menus) {
     for (const m of menus) {
@@ -111,61 +123,89 @@ function firstAction(menus) {
     }
     return undefined;
 }
-function MenuLinks({ app, menus, }) {
-    const navigate = useNavigate();
-    const entries = menus.flatMap((root) => (root.action === undefined ? root.children : [root]));
-    return (_jsx("ul", { className: "flex flex-wrap items-center gap-1", children: entries.map((m) => m.children.length > 0 ? (_jsx("li", { children: _jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", children: m.label }) }), _jsx(MenuContent, { align: "start", children: m.children.map((c) => c.action === undefined ? null : (_jsx(MenuItem, { onSelect: () => void navigate({
-                                to: '/$app/a/$action',
-                                params: { app, action: c.action },
-                            }), children: c.label }, c.id))) })] }) }, m.id)) : m.action === undefined ? null : (_jsx("li", { children: _jsx(Link, { to: "/$app/a/$action", params: { app, action: m.action }, className: "rounded-md px-3 py-1.5 text-sm hover:bg-muted", activeProps: { 'aria-current': 'page', className: 'bg-muted font-medium' }, children: m.label }) }, m.id))) }));
-}
 function ThemeMenu() {
     const { t } = useTranslation();
-    const { theme, setTheme } = useKosh();
+    const { theme, setTheme, density, setDensity } = useKosh();
     const icons = { light: Sun, dark: Moon, system: Monitor };
     const Icon = icons[theme];
-    return (_jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": t('shell.theme'), children: _jsx(Icon, { "aria-hidden": true }) }) }), _jsxs(MenuContent, { children: [_jsx(MenuLabel, { children: t('shell.theme') }), ['light', 'dark', 'system'].map((choice) => (_jsx(MenuCheckboxItem, { checked: theme === choice, onCheckedChange: () => setTheme(choice), children: t(`shell.${choice}`) }, choice)))] })] }));
+    return (_jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": t('shell.theme'), children: _jsx(Icon, { "aria-hidden": true }) }) }), _jsxs(MenuContent, { children: [_jsx(MenuLabel, { children: t('shell.theme') }), ['light', 'dark', 'system'].map((choice) => (_jsx(MenuCheckboxItem, { checked: theme === choice, onCheckedChange: () => setTheme(choice), children: t(`shell.${choice}`) }, choice))), _jsx(MenuSeparator, {}), _jsx(MenuLabel, { children: t('shell.density') }), ['comfortable', 'compact'].map((choice) => (_jsx(MenuCheckboxItem, { checked: density === choice, onCheckedChange: () => setDensity(choice), children: t(`views.${choice}`) }, choice)))] })] }));
 }
 function LanguageMenu() {
     const { t } = useTranslation();
     const { lang, setLang } = useServices();
     return (_jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": t('shell.language'), children: _jsx(Languages, { "aria-hidden": true }) }) }), _jsxs(MenuContent, { children: [_jsx(MenuLabel, { children: t('shell.language') }), LANGUAGES.map((l) => (_jsx(MenuCheckboxItem, { checked: lang === l.code, onCheckedChange: () => setLang(l.code), children: _jsx("span", { lang: l.code.replace('_', '-'), children: l.name }) }, l.code)))] })] }));
 }
-function CompanySwitcher({ me, company, onChange, }) {
+/** The company at the top of the sidebar: its initial and name, or the switcher when the user has several. */
+function CompanyBlock({ me, company, collapsed, onChange, }) {
     const { t } = useTranslation();
     const { api } = useServices();
     const names = useQuery({
         queryKey: ['names', 'res.company', me.companies],
         queryFn: () => api.names('res.company', { ids: me.companies }),
-        enabled: me.companies.length > 1,
+        enabled: me.companies.length > 0,
     });
+    const name = names.data?.find((c) => c.id === company)?.displayName ?? t('app.name');
+    // The company's logo, else its initial.
+    const badge = (_jsx(Avatar, { name: name.slice(0, 1), src: imageUrl('company', company, me.logos?.[String(company)]), shape: "square", className: "font-semibold" }));
+    if (collapsed)
+        return _jsx("span", { title: name, children: badge });
     if (me.companies.length < 2)
-        return null;
-    return (_jsx(Select, { label: t('shell.company'), className: "h-8 w-48", value: String(company), options: (names.data ?? []).map((c) => ({ value: String(c.id), label: c.displayName })), onChange: (v) => onChange(Number(v)) }));
+        return (_jsxs("div", { className: "flex items-center gap-2.5 px-1 py-1", children: [badge, _jsx("span", { className: "truncate text-sm font-semibold", children: name })] }));
+    // Several companies: a switcher (also in the palette: "Switch to …").
+    return (_jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": t('shell.switchCompany', { name }), className: "flex w-full items-center gap-2.5 rounded-md px-1 py-1 text-start hover:bg-muted", children: [badge, _jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold", children: name }), _jsx(ChevronsUpDown, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true })] }) }), _jsxs(MenuContent, { align: "start", className: "w-64", children: [_jsx(MenuLabel, { children: t('shell.company') }), (names.data ?? []).map((c) => (_jsx(MenuCheckboxItem, { checked: c.id === company, onCheckedChange: () => {
+                            if (c.id !== company)
+                                onChange(c.id);
+                        }, children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: "grid size-5 place-items-center rounded bg-muted text-[10px] font-semibold", children: c.displayName.slice(0, 1).toUpperCase() }), c.displayName] }) }, c.id)))] })] }));
 }
-function Shell() {
-    const { api, registry, lang, realtime, offline, persister } = useServices();
+function UserMenu({ user, collapsed, corner, }) {
     const { t } = useTranslation();
+    const { api, registry, persister, lang, setLang } = useServices();
+    const { theme, setTheme, density, setDensity } = useKosh();
     const queryClient = useQueryClient();
     const navigate = useNavigate();
+    return (_jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": user.name, "data-kosh-account": corner === undefined ? 'sidebar' : 'corner', className: cn('flex min-w-0 items-center gap-2 rounded-md px-1.5 py-1.5 text-sm hover:bg-muted', corner === undefined ? 'w-full' : 'rounded-full border bg-surface pe-3', collapsed && 'justify-center'), children: [_jsx(Avatar, { name: user.name, src: imageUrl('user', user.id, user.avatar) }), collapsed ? null : _jsx("span", { className: "truncate", children: user.name }), corner === undefined ? null : (_jsx(ChevronDown, { className: "size-3.5 text-muted-foreground", "aria-hidden": true }))] }) }), _jsxs(MenuContent, { align: corner === undefined ? 'start' : 'end', side: corner === undefined ? 'top' : 'bottom', className: corner === undefined ? undefined : 'max-h-[80vh] w-64 overflow-y-auto', children: [_jsxs(MenuLabel, { children: [user.name, _jsx("span", { className: "block text-xs font-normal text-muted-foreground", children: user.login })] }), registry.userPages().map((p) => (_jsx(MenuItem, { onSelect: () => void navigate({ to: '/me/$page', params: { page: p.name } }), children: t(p.label) }, p.name))), corner === undefined ? null : (_jsxs(_Fragment, { children: [corner.companies.length < 2 ? null : (_jsxs(_Fragment, { children: [_jsx(MenuSeparator, {}), _jsx(MenuLabel, { children: t('shell.company') }), corner.companies.map((c) => (_jsx(MenuCheckboxItem, { checked: c.id === corner.current, onCheckedChange: () => {
+                                            if (c.id !== corner.current)
+                                                corner.onSwitch(c.id);
+                                        }, children: c.name }, c.id)))] })), _jsx(MenuSeparator, {}), _jsx(MenuLabel, { children: t('shell.language') }), LANGUAGES.map((l) => (_jsx(MenuCheckboxItem, { checked: lang === l.code, onCheckedChange: () => setLang(l.code), children: _jsx("span", { lang: l.code.replace('_', '-'), children: l.name }) }, l.code))), _jsx(MenuSeparator, {}), _jsx(MenuLabel, { children: t('shell.theme') }), ['light', 'dark', 'system'].map((choice) => (_jsx(MenuCheckboxItem, { checked: theme === choice, onCheckedChange: () => setTheme(choice), children: t(`shell.${choice}`) }, choice))), _jsx(MenuLabel, { children: t('shell.density') }), ['comfortable', 'compact'].map((choice) => (_jsx(MenuCheckboxItem, { checked: density === choice, onCheckedChange: () => setDensity(choice), children: t(`views.${choice}`) }, choice)))] })), _jsx(MenuSeparator, {}), _jsxs(MenuItem, { onSelect: async () => {
+                            await api.logout();
+                            queryClient.clear();
+                            await dropOfflineCache(persister);
+                            await navigate({ to: '/login' });
+                        }, children: [_jsx(LogOut, { className: "size-4", "aria-hidden": true }), t('auth.signOut')] })] })] }));
+}
+function Shell() {
+    const { api, registry, lang, realtime, offline } = useServices();
+    const { t } = useTranslation();
+    const queryClient = useQueryClient();
     const params = useParams({ strict: false });
     const me = useQuery({ queryKey: ['me'], queryFn: () => api.me(), retry: false });
     const [company, setCompany] = useState(undefined);
     const [palette, setPalette] = useState(false);
     const [help, setHelp] = useState(false);
-    const shortcutHandlers = useMemo(() => ({ palette: () => setPalette(true), help: () => setHelp(true) }), []);
+    const [drawer, setDrawer] = useState(false);
+    const [collapsed, setCollapsed] = useSidebarCollapsed();
+    const shortcutHandlers = useMemo(() => ({
+        palette: () => setPalette(true),
+        help: () => setHelp(true),
+        sidebar: () => setCollapsed(!collapsed),
+    }), [collapsed, setCollapsed]);
     useShortcuts(shortcutHandlers);
     const openHelp = useCallback(() => setHelp(true), []);
     const openPalette = useCallback(() => setPalette(true), []);
     const apps = useQuery({
         queryKey: ['apps', company],
         queryFn: () => api.apps(),
-        enabled: me.isSuccess,
+        enabled: me.isSuccess && me.data.twoFactorSetupRequired !== true,
+    });
+    const companyNames = useQuery({
+        queryKey: ['names', 'res.company', me.data?.companies],
+        queryFn: () => api.names('res.company', { ids: me.data?.companies ?? [] }),
+        enabled: (me.data?.companies.length ?? 0) > 1,
     });
     const menus = useQuery({
         queryKey: ['menus', params.app, company],
         queryFn: () => api.menus(params.app),
-        enabled: me.isSuccess && params.app !== undefined,
+        enabled: me.isSuccess && me.data.twoFactorSetupRequired !== true && params.app !== undefined,
     });
     if (me.error instanceof ApiError && me.error.status === 401)
         return _jsx(Navigate, { to: "/login" });
@@ -174,19 +214,57 @@ function Shell() {
         return _jsx(Alert, { children: me.error.message });
     if (me.data === undefined)
         return _jsx(Spinner, { label: t('app.loading') });
+    // The policy asks everyone for a second factor (RFC 0019 §3.5): nothing else until it is set up.
+    if (me.data.twoFactorSetupRequired === true)
+        return _jsx(TwoFactorSetup, { api: api });
     const user = me.data;
     const current = company ?? user.company ?? user.companies[0] ?? 0;
     const app = apps.data?.find((a) => a.code === params.app);
-    return (_jsx(KoshProvider, { api: api, registry: registry, uid: user.id, companyId: current, lang: lang, tz: Intl.DateTimeFormat().resolvedOptions().timeZone, grouping: user.groupings?.[String(current)] ?? 'international', ...(realtime === undefined ? {} : { realtime }), ...(offline === undefined ? {} : { offline }), children: _jsx(ToastProvider, { children: _jsxs(DesignProvider, { children: [_jsx(OfflineAgent, { uid: user.id }), _jsxs(PaletteContext.Provider, { value: openPalette, children: [_jsx("a", { href: "#content", className: "sr-only focus:not-sr-only focus:absolute focus:start-2 focus:top-2 focus:z-50 focus:rounded focus:bg-surface focus:px-3 focus:py-2", children: t('shell.skip') }), _jsx("header", { className: "sticky top-0 z-30 border-b bg-surface", children: _jsxs("div", { className: "flex h-12 items-center gap-2 px-3", children: [_jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": t('shell.apps'), children: _jsx(Grid3x3, { "aria-hidden": true }) }) }), _jsxs(MenuContent, { align: "start", children: [_jsx(MenuItem, { onSelect: () => void navigate({ to: '/' }), children: t('shell.apps') }), _jsx(MenuSeparator, {}), (apps.data ?? []).map((a) => (_jsx(MenuItem, { onSelect: () => void navigate({ to: '/$app', params: { app: a.code } }), children: a.label }, a.code)))] })] }), _jsx(Link, { to: "/", className: "font-semibold", children: app?.label ?? t('app.name') }), _jsx("nav", { "aria-label": t('shell.menu'), className: "ms-2 flex-1", children: params.app === undefined ? null : (_jsx(MenuLinks, { app: params.app, menus: menus.data ?? [] })) }), _jsxs(Button, { variant: "secondary", size: "sm", className: "hidden h-8 w-56 justify-between text-muted-foreground sm:flex", onClick: () => setPalette(true), "aria-keyshortcuts": "Control+K Meta+K", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Search, { className: "size-4", "aria-hidden": true }), t('palette.button')] }), _jsx("kbd", { className: "rounded border bg-surface px-1.5 text-xs", children: "Ctrl K" })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "sm:hidden", "aria-label": t('palette.button'), onClick: () => setPalette(true), children: _jsx(Search, { "aria-hidden": true }) }), _jsx(OfflineMenu, {}), registry.headerItems().map(({ name, component: Item }) => (_jsx(Item, { api: api }, name))), _jsx(CompanySwitcher, { me: user, company: current, onChange: (id) => {
-                                                api.setCompany(id);
-                                                setCompany(id);
-                                                void queryClient.invalidateQueries();
-                                            } }), _jsx(LanguageMenu, {}), _jsx(ThemeMenu, {}), _jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": user.name, children: _jsx(UserRound, { "aria-hidden": true }) }) }), _jsxs(MenuContent, { children: [_jsx(MenuLabel, { children: user.name }), registry.userPages().map((p) => (_jsx(MenuItem, { onSelect: () => void navigate({ to: '/me/$page', params: { page: p.name } }), children: t(p.label) }, p.name))), _jsxs(MenuItem, { onSelect: async () => {
-                                                                await api.logout();
-                                                                queryClient.clear();
-                                                                await dropOfflineCache(persister);
-                                                                await navigate({ to: '/login' });
-                                                            }, children: [_jsx(LogOut, { className: "size-4", "aria-hidden": true }), t('auth.signOut')] })] })] })] }) }), user.administratorNeedsSecondFactor ? (_jsx("div", { className: "px-4 pt-3", children: _jsx(Alert, { tone: "info", children: t('auth.adminNeeds2fa') }) })) : null, _jsx("main", { id: "content", className: "mx-auto w-full max-w-[100rem] p-4", children: _jsx(Outlet, {}) }), _jsx(CommandPalette, { open: palette, onOpenChange: setPalette, api: api, onShortcuts: openHelp }), _jsx(ShortcutsHelp, { open: help, onOpenChange: setHelp })] })] }) }) }));
+    // A page of the user menu (`/me/<page>`): the page bar names it.
+    const userPage = params.page === undefined
+        ? undefined
+        : registry.userPages().find((p) => p.name === params.page);
+    /** The open section's label (the menu entry of the current action), for the page bar. */
+    const section = (() => {
+        const walk = (nodes) => {
+            for (const n of nodes) {
+                if (n.action !== undefined && n.action === params.action)
+                    return n.label;
+                const found = walk(n.children);
+                if (found !== undefined)
+                    return found;
+            }
+            return undefined;
+        };
+        return params.action === undefined ? undefined : walk(menus.data ?? []);
+    })();
+    const switchCompany = (id) => {
+        setPalette(false);
+        api.setCompany(id);
+        setCompany(id);
+        void queryClient.invalidateQueries();
+    };
+    const sidebar = (inDrawer) => (_jsx(Sidebar, { api: api, apps: apps.data ?? [], current: params.app, company: current, collapsed: inDrawer ? false : collapsed, onCollapse: inDrawer ? undefined : setCollapsed, onSearch: () => {
+            setDrawer(false);
+            setPalette(true);
+        }, top: _jsx(CompanyBlock, { me: user, company: current, collapsed: inDrawer ? false : collapsed, onChange: switchCompany }), bottom: _jsx(UserMenu, { user: user, collapsed: inDrawer ? false : collapsed }), onNavigate: inDrawer ? () => setDrawer(false) : undefined }));
+    return (_jsx(KoshProvider, { api: api, registry: registry, uid: user.id, companyId: current, lang: lang, tz: Intl.DateTimeFormat().resolvedOptions().timeZone, grouping: user.groupings?.[String(current)] ?? 'international', accent: user.accents?.[String(current)] ?? null, ...(realtime === undefined ? {} : { realtime }), ...(offline === undefined ? {} : { offline }), switchCompany: switchCompany, children: _jsx(ToastProvider, { children: _jsxs(DesignProvider, { children: [_jsx(OfflineAgent, { uid: user.id }), _jsxs(PaletteContext.Provider, { value: openPalette, children: [_jsx("a", { href: "#content", className: "sr-only focus:not-sr-only focus:absolute focus:start-2 focus:top-2 focus:z-50 focus:rounded focus:bg-surface focus:px-3 focus:py-2", children: t('shell.skip') }), params.app === undefined ? (_jsxs("div", { className: "flex min-h-screen flex-col", children: [_jsxs("div", { className: "flex h-14 items-center gap-2 px-4 lg:px-6", children: [userPage === undefined ? null : (_jsxs(Link, { to: "/", className: "flex items-center gap-1.5 rounded-md px-2 py-1 text-sm text-muted-foreground hover:bg-muted hover:text-foreground", children: [_jsx(House, { className: "size-4", "aria-hidden": true }), t('shell.home')] })), _jsx("span", { className: "flex-1" }), registry
+                                                .headerItems()
+                                                .filter((item) => item.home)
+                                                .map(({ name, component: Item }) => (_jsx(Item, { api: api }, name))), _jsx(UserMenu, { user: user, collapsed: false, corner: {
+                                                    companies: (companyNames.data ?? []).map((c) => ({
+                                                        id: c.id,
+                                                        name: c.displayName,
+                                                    })),
+                                                    current,
+                                                    onSwitch: switchCompany,
+                                                } })] }), user.administratorNeedsSecondFactor ? (_jsx("div", { className: "px-4 pt-3", children: _jsx(Alert, { tone: "info", children: t('auth.adminNeeds2fa') }) })) : null, _jsx("main", { id: "content", className: "mx-auto w-full max-w-[100rem] flex-1 p-4 lg:p-6", children: _jsx(Outlet, {}) })] })) : (_jsxs("div", { className: "flex min-h-screen", children: [_jsx("aside", { "aria-label": t('shell.sidebar'), className: cn('sticky top-0 hidden h-screen shrink-0 border-e bg-surface transition-[width] lg:block', collapsed ? 'w-14' : 'w-60'), children: sidebar(false) }), _jsx(SidebarDrawer, { open: drawer, onOpenChange: setDrawer, children: sidebar(true) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("header", { className: "sticky top-0 z-30 border-b bg-surface", children: _jsxs("div", { className: "flex h-12 items-center gap-2 px-3 lg:px-4", children: [_jsx(Button, { variant: "ghost", size: "icon", className: "lg:hidden", "aria-label": t('shell.openMenu'), onClick: () => setDrawer(true), children: _jsx(PanelLeft, { className: "rtl:rotate-180", "aria-hidden": true }) }), _jsx("nav", { "aria-label": t('shell.location'), className: "flex min-w-0 flex-1 items-center gap-1.5 text-sm", children: app === undefined ? (_jsx("span", { className: "font-semibold", children: userPage !== undefined
+                                                                    ? t(userPage.label)
+                                                                    : params.app === undefined
+                                                                        ? t('shell.home')
+                                                                        : t('app.name') })) : (_jsxs(_Fragment, { children: [_jsx(Link, { to: "/$app", params: { app: app.code }, className: "font-semibold hover:underline", children: app.label }), section === undefined ? null : (_jsxs(_Fragment, { children: [_jsx(ChevronRight, { className: "size-3.5 text-muted-foreground rtl:rotate-180", "aria-hidden": true }), _jsx(Link, { to: "/$app/a/$action", params: { app: app.code, action: params.action ?? '' }, className: "truncate text-muted-foreground hover:text-foreground hover:underline", children: section })] }))] })) }), _jsx(Button, { variant: "ghost", size: "icon", className: "lg:hidden", "aria-label": t('palette.button'), onClick: () => setPalette(true), children: _jsx(Search, { "aria-hidden": true }) }), _jsx(OfflineMenu, {}), registry.headerItems().map(({ name, component: Item }) => (_jsx(Item, { api: api }, name))), _jsx(LanguageMenu, {}), _jsx(ThemeMenu, {})] }) }), user.administratorNeedsSecondFactor ? (_jsx("div", { className: "px-4 pt-3", children: _jsx(Alert, { tone: "info", children: t('auth.adminNeeds2fa') }) })) : null, _jsx("main", { id: "content", className: "mx-auto w-full max-w-[100rem] flex-1 p-4 lg:p-6", children: _jsx(Outlet, {}) })] })] })), _jsx(CommandPalette, { open: palette, onOpenChange: setPalette, api: api, onShortcuts: openHelp, companies: (companyNames.data ?? [])
+                                    .filter((c) => c.id !== current)
+                                    .map((c) => ({ id: c.id, name: c.displayName })), onSwitchCompany: switchCompany }), _jsx(ShortcutsHelp, { open: help, onOpenChange: setHelp })] })] }) }) }));
 }
 function AppHome() {
     const { api } = useServices();
@@ -323,7 +401,7 @@ function WindowActionPage() {
                                         params: { app, action: actionId },
                                         search: { ...search, view: v },
                                     }), children: _jsx(Icon, { "aria-hidden": true }) }, v));
-                            })] })) : null] }), _jsx(SearchBar, { model: model, viewType: type, spec: spec.data, state: state, onChange: setState, labels: labels }), Renderer === undefined ? (_jsx(Alert, { children: `No renderer for '${served.data.view.component ?? type}'.` })) : (_jsx(Renderer, { served: served.data, where: compiled.where, groupBy: compiled.groupBy, order: compiled.order, onOrder: (order) => setState({ ...state, order }), onOpen: open, onDrill: drill }))] }));
+                            })] })) : null] }), _jsx(ViewTabs, { model: model, viewType: type, state: state, onChange: setState }), _jsx(SearchBar, { model: model, viewType: type, spec: spec.data, state: state, onChange: setState, labels: labels }), Renderer === undefined ? (_jsx(Alert, { children: `No renderer for '${served.data.view.component ?? type}'.` })) : (_jsx(Renderer, { served: served.data, where: compiled.where, groupBy: compiled.groupBy, order: compiled.order, onOrder: (order) => setState({ ...state, order }), onOpen: open, onDrill: drill }))] }));
 }
 /** What the record page needs from the shell: the API, the user, the apps (for breadcrumbs). */
 function useRecordContext() {
@@ -410,9 +488,28 @@ function OpenRecordPage() {
         return _jsx(Alert, { children: t('app.notFound') });
     return (_jsx(Navigate, { to: "/$app/a/$action/$id", params: { app: route.app, action: route.action, id }, replace: true }));
 }
+function ActivatePage() {
+    const navigate = useNavigate();
+    return _jsx(Activate, { api: useServices().api, onSignedIn: () => void navigate({ to: '/' }) });
+}
+/** Where to go after signing in: `?next=` when it is a path of this site (never another site), else home. */
+function nextPath() {
+    const next = new URLSearchParams(window.location.search).get('next') ?? '';
+    return next.startsWith('/') && !next.startsWith('//') && !next.startsWith('/\\') ? next : '/';
+}
 function LoginPage() {
     const navigate = useNavigate();
-    return _jsx(Login, { api: useServices().api, onSignedIn: () => void navigate({ to: '/' }) });
+    return (_jsx(Login, { api: useServices().api, onSignedIn: () => {
+            const next = nextPath();
+            // A page outside the router's own paths with its query (the OAuth consent) loads as an address.
+            if (next.startsWith('/oauth/'))
+                window.location.assign(next);
+            else
+                void navigate({ to: next });
+        } }));
+}
+function ConsentPage() {
+    return _jsx(Consent, { api: useServices().api });
 }
 // ------------------------------------------------------------------------------------------------- router
 const rootRoute = createRootRoute({ component: Outlet });
@@ -421,6 +518,17 @@ const loginRoute = createRoute({
     path: '/login',
     component: LoginPage,
 });
+const activateRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/activate',
+    component: ActivatePage,
+});
+/** The OAuth consent page (RFC 0017 §5.2): outside the shell, like sign-in. */
+const consentRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/oauth/authorize',
+    component: ConsentPage,
+});
 const shellRoute = createRoute({ getParentRoute: () => rootRoute, id: 'shell', component: Shell });
 const indexRoute = createRoute({
     getParentRoute: () => shellRoute,
@@ -469,6 +577,8 @@ const userPageRoute = createRoute({
 });
 const routeTree = rootRoute.addChildren([
     loginRoute,
+    activateRoute,
+    consentRoute,
     shellRoute.addChildren([
         indexRoute,
         openRoute,

package/dist/ui/components/AppIcon.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * App icons by name (`app.icon` in a module manifest): the launcher's tiles and the App manager's cards. Names
  * follow Lucide; an unknown name shows a neutral grid, never a broken image.
  */
-import { BookOpen, Boxes, Briefcase, ChartColumn, FolderKanban, LayoutGrid, Mail, MessageSquare, MessagesSquare, Package, PencilRuler, Receipt, Ruler, Settings, ShieldCheck, ShoppingCart, Users, Wallet, Warehouse, Workflow, } from 'lucide-react';
+import { BookOpen, Boxes, Briefcase, Building, Building2, ChartColumn, FolderKanban, LayoutGrid, LockKeyhole, Mail, MessageSquare, MessagesSquare, Package, PencilRuler, Plug, Receipt, Ruler, ScrollText, Settings, ShieldCheck, ShoppingCart, Sparkles, Users, Wallet, Warehouse, Workflow, } from 'lucide-react';
 import { cn } from '../lib/cn.js';
 const ICONS = {
     settings: Settings,
@@ -37,6 +37,16 @@ const ICONS = {
     shield: ShieldCheck,
     permissions: ShieldCheck,
     briefcase: Briefcase,
+    plug: Plug,
+    integrations: Plug,
+    cart: ShoppingCart,
+    company: Building2,
+    companies: Building,
+    security: LockKeyhole,
+    audit: ScrollText,
+    apps: LayoutGrid,
+    assistant: Sparkles,
+    sparkles: Sparkles,
 };
 /** A tinted square with the app's icon (decorative: the app's name is always shown next to it). */
 export function AppIcon({ name, className, }) {

package/dist/ui/components/Avatar.d.ts

@@ -0,0 +1,21 @@
+import { type ReactElement } from 'react';
+/** The URL of a photo (`user`) or logo (`company`), or null when there is none. */
+export declare function imageUrl(kind: 'user' | 'company', id: number, version: string | null | undefined): string | null;
+/** Up to two initials of a name. */
+export declare function initialsOf(name: string): string;
+export declare function Avatar({ name, src, shape, className, }: {
+    readonly name: string;
+    readonly src: string | null;
+    /** People are round; companies square. */
+    readonly shape?: 'circle' | 'square';
+    readonly className?: string;
+}): ReactElement;
+export declare function ImagePicker({ name, src, fit, onChoose, onRemove, busy, }: {
+    readonly name: string;
+    readonly src: string | null;
+    readonly fit: 'photo' | 'logo';
+    /** The image as a `data:` URL, already small. */
+    readonly onChoose: (dataUrl: string) => void;
+    readonly onRemove: () => void;
+    readonly busy?: boolean;
+}): ReactElement;

package/dist/ui/components/Avatar.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Photos and logos: `Avatar` shows a person's photo or a company's logo (the server's image route, versioned so the
+ * browser caches it), else the initials on a tint. `ImagePicker` chooses a file and makes it small in the browser —
+ * a 256 px square, cropped to the centre for photos, fitted whole for logos — before anything is sent.
+ */
+import { ImageUp, Trash2 } from 'lucide-react';
+import { useId, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { cn } from '../lib/cn.js';
+import { Button } from './primitives.js';
+/** The URL of a photo (`user`) or logo (`company`), or null when there is none. */
+export function imageUrl(kind, id, version) {
+    return version === null || version === undefined
+        ? null
+        : `/api/v1/images/${kind}/${id}?v=${version}`;
+}
+/** Up to two initials of a name. */
+export function initialsOf(name) {
+    return name
+        .split(/\s+/)
+        .filter((w) => w !== '')
+        .map((w) => w.slice(0, 1))
+        .join('')
+        .slice(0, 2)
+        .toUpperCase();
+}
+export function Avatar({ name, src, shape = 'circle', className, }) {
+    const [failed, setFailed] = useState(false);
+    const round = shape === 'circle' ? 'rounded-full' : 'rounded-md';
+    if (src !== null && !failed)
+        return (_jsx("img", { src: src, alt: "", "aria-hidden": true, onError: () => setFailed(true), className: cn('size-7 shrink-0 bg-surface object-cover', shape === 'square' && 'object-contain', round, className) }));
+    return (_jsx("span", { "aria-hidden": true, className: cn('grid size-7 shrink-0 place-items-center bg-primary text-xs font-medium text-primary-foreground', round, className), children: initialsOf(name) }));
+}
+const SIZE = 256;
+/** Draws `file` on a 256 px square: covered and centred (`photo`) or fitted whole (`logo`). */
+async function shrink(file, fit) {
+    const bitmap = await createImageBitmap(file);
+    const canvas = document.createElement('canvas');
+    canvas.width = SIZE;
+    canvas.height = SIZE;
+    const ctx = canvas.getContext('2d');
+    if (ctx === null)
+        throw new Error('No canvas');
+    const scale = fit === 'photo'
+        ? Math.max(SIZE / bitmap.width, SIZE / bitmap.height)
+        : Math.min(SIZE / bitmap.width, SIZE / bitmap.height);
+    const w = bitmap.width * scale;
+    const h = bitmap.height * scale;
+    ctx.imageSmoothingQuality = 'high';
+    ctx.drawImage(bitmap, (SIZE - w) / 2, (SIZE - h) / 2, w, h);
+    bitmap.close();
+    // Photos as WebP (small); logos as PNG (they keep transparency and sharp edges).
+    return fit === 'photo' ? canvas.toDataURL('image/webp', 0.86) : canvas.toDataURL('image/png');
+}
+export function ImagePicker({ name, src, fit, onChoose, onRemove, busy, }) {
+    const { t } = useTranslation();
+    const id = useId();
+    const input = useRef(null);
+    const [error, setError] = useState(null);
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx(Avatar, { name: name, src: src, shape: fit === 'photo' ? 'circle' : 'square', className: "size-16 text-lg" }), _jsxs("div", { className: "grid gap-1.5", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx("input", { ref: input, id: id, type: "file", accept: "image/png,image/jpeg,image/webp", className: "sr-only", onChange: (e) => {
+                                    const file = e.target.files?.[0];
+                                    e.target.value = '';
+                                    if (file === undefined)
+                                        return;
+                                    setError(null);
+                                    shrink(file, fit)
+                                        .then(onChoose)
+                                        .catch(() => setError(t('image.unreadable')));
+                                } }), _jsxs(Button, { size: "sm", busy: busy === true, onClick: () => input.current?.click(), children: [_jsx(ImageUp, { "aria-hidden": true }), fit === 'photo' ? t('image.choosePhoto') : t('image.chooseLogo')] }), src === null ? null : (_jsxs(Button, { size: "sm", variant: "ghost", onClick: onRemove, children: [_jsx(Trash2, { "aria-hidden": true }), t('image.remove')] }))] }), _jsx("p", { className: "text-xs text-muted-foreground", children: error ?? t('image.hint') })] })] }));
+}

package/dist/ui/components/primitives.d.ts

@@ -1,4 +1,4 @@
-import { Checkbox as RCheckbox, DropdownMenu as RMenu, Tabs as RTabs } from 'radix-ui';
+import { Checkbox as RCheckbox, DropdownMenu as RMenu, Popover as RPopover, Tabs as RTabs } from 'radix-ui';
 import type { ComponentProps, ReactElement, ReactNode } from 'react';
 export type ButtonProps = ComponentProps<'button'> & {
     readonly variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
@@ -10,6 +10,10 @@ export declare function Button({ className, variant, size, asChild, busy, childr
 export declare function Input({ className, ...props }: ComponentProps<'input'>): ReactElement;
 export declare function Textarea({ className, ...props }: ComponentProps<'textarea'>): ReactElement;
 export declare function Label({ className, ...props }: ComponentProps<'label'>): ReactElement;
+/** The badge's classes, for elements that look like one (the status chip). */
+export declare const badgeVariants: (props?: {
+    readonly tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | null;
+}) => string;
 export declare function Badge({ className, tone, ...props }: ComponentProps<'span'> & {
     readonly tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | null;
 }): ReactElement;
@@ -36,6 +40,10 @@ export declare function MenuCheckboxItem({ className, children, ...props }: Comp
 export declare function MenuLabel({ className, ...props }: ComponentProps<typeof RMenu.Label>): ReactElement;
 export declare function MenuSeparator(): ReactElement;
 /** A modal dialog with a title (required for screen readers) and a close button. */
+/** A popover (Radix): focus moves in and back, Escape closes, positioned beside its trigger. */
+export declare const Popover: typeof RPopover.Root;
+export declare const PopoverTrigger: typeof RPopover.Trigger;
+export declare function PopoverContent({ className, align, sideOffset, ...props }: ComponentProps<typeof RPopover.Content>): ReactElement;
 export declare function Dialog({ open, onOpenChange, title, description, children, footer, wide, }: {
     readonly open: boolean;
     readonly onOpenChange: (open: boolean) => void;

package/dist/ui/components/primitives.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { cva } from 'class-variance-authority';
 import { Check, ChevronDown, Loader2, X } from 'lucide-react';
-import { Checkbox as RCheckbox, Dialog as RDialog, DropdownMenu as RMenu, Select as RSelect, Tabs as RTabs, Slot, } from 'radix-ui';
+import { Checkbox as RCheckbox, Dialog as RDialog, DropdownMenu as RMenu, Popover as RPopover, Select as RSelect, Tabs as RTabs, Slot, } from 'radix-ui';
 import { cn } from '../lib/cn.js';
 const buttonVariants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
@@ -17,7 +17,7 @@ const buttonVariants = cva('inline-flex items-center justify-center gap-2 whites
             danger: 'bg-danger text-danger-foreground hover:bg-danger/90',
             link: 'text-primary underline-offset-4 hover:underline',
         },
-        size: { sm: 'h-8 px-3', md: 'h-9 px-4', icon: 'size-9' },
+        size: { sm: 'h-8 px-3', md: 'h-[var(--control-h)] px-4', icon: 'size-[var(--control-h)]' },
     },
     defaultVariants: { variant: 'secondary', size: 'md' },
 });
@@ -27,7 +27,7 @@ export function Button({ className, variant, size, asChild, busy, children, disa
 }
 const field = 'w-full rounded-md border border-input bg-surface px-3 text-sm text-surface-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60 read-only:bg-muted aria-invalid:border-danger';
 export function Input({ className, ...props }) {
-    return _jsx("input", { className: cn(field, 'h-9', className), ...props });
+    return _jsx("input", { className: cn(field, 'h-[var(--control-h)]', className), ...props });
 }
 export function Textarea({ className, ...props }) {
     return _jsx("textarea", { className: cn(field, 'min-h-20 py-2', className), ...props });
@@ -47,6 +47,8 @@ const badge = cva('inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-
     },
     defaultVariants: { tone: 'neutral' },
 });
+/** The badge's classes, for elements that look like one (the status chip). */
+export const badgeVariants = badge;
 export function Badge({ className, tone, ...props }) {
     return _jsx("span", { className: cn(badge({ tone }), className), ...props });
 }
@@ -55,7 +57,7 @@ export function Checkbox({ className, ...props }) {
 }
 /** A select over `options` (`null` value: empty). */
 export function Select({ value, options, onChange, disabled, placeholder, id, label, className, }) {
-    return (_jsxs(RSelect.Root, { ...(value === null ? {} : { value }), onValueChange: onChange, ...(disabled === true ? { disabled } : {}), children: [_jsxs(RSelect.Trigger, { ...(id === undefined ? {} : { id }), "aria-label": label, className: cn(field, 'flex h-9 items-center justify-between gap-2 text-start', className), children: [_jsx(RSelect.Value, { placeholder: placeholder }), _jsx(RSelect.Icon, { children: _jsx(ChevronDown, { className: "size-4 opacity-60", "aria-hidden": true }) })] }), _jsx(RSelect.Portal, { children: _jsx(RSelect.Content, { position: "popper", sideOffset: 4, className: "z-50 min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md border bg-surface text-surface-foreground shadow-lg", children: _jsx(RSelect.Viewport, { className: "p-1", children: options.map((o) => (_jsxs(RSelect.Item, { value: o.value, className: "relative flex cursor-default select-none items-center rounded-sm py-1.5 pe-2 ps-7 text-sm outline-none data-[highlighted]:bg-muted", children: [_jsx(RSelect.ItemIndicator, { className: "absolute start-2", children: _jsx(Check, { className: "size-3.5", "aria-hidden": true }) }), _jsx(RSelect.ItemText, { children: o.label })] }, o.value))) }) }) })] }));
+    return (_jsxs(RSelect.Root, { ...(value === null ? {} : { value }), onValueChange: onChange, ...(disabled === true ? { disabled } : {}), children: [_jsxs(RSelect.Trigger, { ...(id === undefined ? {} : { id }), "aria-label": label, className: cn(field, 'flex h-[var(--control-h)] items-center justify-between gap-2 text-start', className), children: [_jsx(RSelect.Value, { placeholder: placeholder }), _jsx(RSelect.Icon, { children: _jsx(ChevronDown, { className: "size-4 opacity-60", "aria-hidden": true }) })] }), _jsx(RSelect.Portal, { children: _jsx(RSelect.Content, { position: "popper", sideOffset: 4, className: "z-50 min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md border bg-surface text-surface-foreground shadow-lg", children: _jsx(RSelect.Viewport, { className: "p-1", children: options.map((o) => (_jsxs(RSelect.Item, { value: o.value, className: "relative flex cursor-default select-none items-center rounded-sm py-1.5 pe-2 ps-7 text-sm outline-none data-[highlighted]:bg-muted", children: [_jsx(RSelect.ItemIndicator, { className: "absolute start-2", children: _jsx(Check, { className: "size-3.5", "aria-hidden": true }) }), _jsx(RSelect.ItemText, { children: o.label })] }, o.value))) }) }) })] }));
 }
 export const Menu = RMenu.Root;
 export const MenuTrigger = RMenu.Trigger;
@@ -75,6 +77,12 @@ export function MenuSeparator() {
     return _jsx(RMenu.Separator, { className: "my-1 h-px bg-border" });
 }
 /** A modal dialog with a title (required for screen readers) and a close button. */
+/** A popover (Radix): focus moves in and back, Escape closes, positioned beside its trigger. */
+export const Popover = RPopover.Root;
+export const PopoverTrigger = RPopover.Trigger;
+export function PopoverContent({ className, align = 'start', sideOffset = 6, ...props }) {
+    return (_jsx(RPopover.Portal, { children: _jsx(RPopover.Content, { align: align, sideOffset: sideOffset, className: cn('z-50 rounded-lg border bg-surface p-3 text-surface-foreground shadow-lg outline-none', className), ...props }) }));
+}
 export function Dialog({ open, onOpenChange, title, description, children, footer, wide, }) {
     return (_jsx(RDialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(RDialog.Portal, { children: [_jsx(RDialog.Overlay, { className: "fixed inset-0 z-40 bg-black/40" }), _jsxs(RDialog.Content, { className: cn('fixed start-1/2 top-1/2 z-50 -translate-y-1/2 rtl:translate-x-1/2 ltr:-translate-x-1/2 rounded-lg border bg-surface p-5 text-surface-foreground shadow-xl', wide === true
                         ? 'max-h-[calc(100vh-2rem)] w-[min(56rem,calc(100vw-2rem))] overflow-y-auto'

package/dist/ui/context.d.ts

@@ -17,16 +17,22 @@ export interface KoshContextValue {
     readonly format: Formatter;
     readonly theme: ThemeChoice;
     setTheme(theme: ThemeChoice): void;
+    /** Comfortable or compact (RFC 0018): lists, forms and controls. */
+    readonly density: Density;
+    setDensity(density: Density): void;
     /** The realtime gateway's client, when the app has one: live lists, records and presence. */
     readonly realtime?: RealtimeClient;
     /** Changes saved offline, when the app keeps them: a form that cannot reach the server saves here. */
     readonly offline?: OfflineQueue;
+    /** Switches to another of the user's companies, when the shell offers it (Settings › Companies). */
+    readonly switchCompany?: (company: number) => void;
 }
 /** The renderer context. @throws outside {@link KoshProvider} */
 export declare function useKosh(): KoshContextValue;
+export type Density = 'comfortable' | 'compact';
 /** Applies the theme to `<html>` (the `dark` class) and follows the system when asked to. */
 declare function useTheme(): [ThemeChoice, (t: ThemeChoice) => void];
-export declare function KoshProvider({ api, registry, uid, companyId, lang, tz, grouping, realtime, offline, children, }: {
+export declare function KoshProvider({ api, registry, uid, companyId, lang, tz, grouping, accent, realtime, offline, switchCompany, children, }: {
     readonly api: KoshApi;
     readonly registry: Registry;
     readonly uid: number;
@@ -35,8 +41,11 @@ export declare function KoshProvider({ api, registry, uid, companyId, lang, tz,
     readonly tz: string;
     /** The company's number grouping (RFC 0016). */
     readonly grouping?: 'international' | 'lakh';
+    /** The company's brand colour (`#rrggbb`, RFC 0018). */
+    readonly accent?: string | null;
     readonly realtime?: RealtimeClient;
     readonly offline?: OfflineQueue;
+    readonly switchCompany?: (company: number) => void;
     readonly children: ReactNode;
 }): ReactElement;
 /** Theme switching without a signed-in user (the sign-in page). */