shutro-erp 0.3.2 → 0.3.3

package/dist/ui/app.js

@@ -12,28 +12,32 @@ 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, ChevronRight, ChevronsUpDown, Columns3, Grid2x2, 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 { 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 { Activate } from './shell/Activate.js';
 import { CommandPalette, PaletteContext } from './shell/CommandPalette.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 +104,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 +120,91 @@ 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');
+    const badge = (_jsx("span", { "aria-hidden": true, className: "grid size-7 shrink-0 place-items-center rounded-md bg-primary text-xs font-semibold text-primary-foreground", children: name.slice(0, 1).toUpperCase() }));
+    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();
+/** The user at the bottom of the sidebar: their pages and signing out. */
+function UserMenu({ user, collapsed, }) {
     const { t } = useTranslation();
+    const { api, registry, persister } = useServices();
     const queryClient = useQueryClient();
     const navigate = useNavigate();
+    const initials = user.name
+        .split(/\s+/)
+        .map((w) => w.slice(0, 1))
+        .join('')
+        .slice(0, 2)
+        .toUpperCase();
+    return (_jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": user.name, className: cn('flex w-full min-w-0 items-center gap-2 rounded-md px-1.5 py-1.5 text-sm hover:bg-muted', collapsed && 'justify-center'), children: [_jsx("span", { "aria-hidden": true, className: "grid size-7 shrink-0 place-items-center rounded-full bg-muted text-xs font-medium", children: initials }), collapsed ? null : _jsx("span", { className: "truncate", children: user.name })] }) }), _jsxs(MenuContent, { align: "start", side: "top", 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')] })] })] }));
+}
+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 +213,47 @@ 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') }), _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();
@@ -410,6 +477,10 @@ 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: '/' }) });
+}
 function LoginPage() {
     const navigate = useNavigate();
     return _jsx(Login, { api: useServices().api, onSignedIn: () => void navigate({ to: '/' }) });
@@ -421,6 +492,11 @@ const loginRoute = createRoute({
     path: '/login',
     component: LoginPage,
 });
+const activateRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/activate',
+    component: ActivatePage,
+});
 const shellRoute = createRoute({ getParentRoute: () => rootRoute, id: 'shell', component: Shell });
 const indexRoute = createRoute({
     getParentRoute: () => shellRoute,
@@ -469,6 +545,7 @@ const userPageRoute = createRoute({
 });
 const routeTree = rootRoute.addChildren([
     loginRoute,
+    activateRoute,
     shellRoute.addChildren([
         indexRoute,
         openRoute,

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). */

package/dist/ui/context.js

@@ -4,6 +4,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * formatter for the user's language and time zone, and the theme.
  */
 import { createContext, useContext, useEffect, useMemo, useState, } from 'react';
+import { accentVariables } from './lib/accent.js';
 import { createFormatter } from './lib/format.js';
 const Context = createContext(null);
 /** The renderer context. @throws outside {@link KoshProvider} */
@@ -14,6 +15,45 @@ export function useKosh() {
     return value;
 }
 const THEME_KEY = 'kosh.theme';
+const DENSITY_KEY = 'kosh.density';
+function readDensity() {
+    try {
+        return JSON.parse(localStorage.getItem(DENSITY_KEY) ?? 'null') === 'compact'
+            ? 'compact'
+            : 'comfortable';
+    }
+    catch {
+        return 'comfortable';
+    }
+}
+/** Applies the density to `<html>` (`data-density`), remembered per browser. */
+function useDensity() {
+    const [density, setDensity] = useState(readDensity);
+    useEffect(() => {
+        document.documentElement.dataset['density'] = density;
+        try {
+            localStorage.setItem(DENSITY_KEY, JSON.stringify(density));
+        }
+        catch {
+            // storage unavailable: the choice lasts for this page only
+        }
+    }, [density]);
+    return [density, setDensity];
+}
+/** Sets the company's brand colour as the accent (RFC 0018), or the default when it has none. */
+function useAccent(accent) {
+    useEffect(() => {
+        const root = document.documentElement.style;
+        const variables = accentVariables(accent);
+        for (const key of ['--accent-h', '--accent-c']) {
+            const value = variables[key];
+            if (value === undefined)
+                root.removeProperty(key);
+            else
+                root.setProperty(key, value);
+        }
+    }, [accent]);
+}
 function readTheme() {
     try {
         const stored = localStorage.getItem(THEME_KEY);
@@ -47,8 +87,10 @@ function useTheme() {
     }, [theme]);
     return [theme, setTheme];
 }
-export function KoshProvider({ api, registry, uid, companyId, lang, tz, grouping, realtime, offline, children, }) {
+export function KoshProvider({ api, registry, uid, companyId, lang, tz, grouping, accent, realtime, offline, switchCompany, children, }) {
     const [theme, setTheme] = useTheme();
+    const [density, setDensity] = useDensity();
+    useAccent(accent);
     const format = useMemo(() => createFormatter(lang, tz, grouping === undefined ? {} : { grouping }), [lang, tz, grouping]);
     const value = useMemo(() => ({
         api,
@@ -58,9 +100,25 @@ export function KoshProvider({ api, registry, uid, companyId, lang, tz, grouping
         format,
         theme,
         setTheme,
+        density,
+        setDensity,
         ...(realtime === undefined ? {} : { realtime }),
         ...(offline === undefined ? {} : { offline }),
-    }), [api, registry, uid, companyId, format, theme, setTheme, realtime, offline]);
+        ...(switchCompany === undefined ? {} : { switchCompany }),
+    }), [
+        api,
+        registry,
+        uid,
+        companyId,
+        format,
+        theme,
+        setTheme,
+        density,
+        setDensity,
+        realtime,
+        offline,
+        switchCompany,
+    ]);
     return _jsx(Context.Provider, { value: value, children: children });
 }
 /** Theme switching without a signed-in user (the sign-in page). */

package/dist/ui/i18n/messages.d.ts

@@ -12,6 +12,14 @@ export declare const en: {
         unknownPage: string;
     };
     auth: {
+        activateTitle: string;
+        activateIntro: string;
+        activateNoToken: string;
+        newPassword: string;
+        repeatPassword: string;
+        passwordRule: string;
+        mismatch: string;
+        activate: string;
         signIn: string;
         login: string;
         password: string;
@@ -21,11 +29,32 @@ export declare const en: {
         signOut: string;
         invalid: string;
         adminNeeds2fa: string;
+        setupTitle: string;
+        setupIntro: string;
+        setupStart: string;
+        setupStep1: string;
+        setupOpenApp: string;
+        setupStep2: string;
+        setupStep3: string;
+        setupTurnOn: string;
+        setupCodes: string;
+        setupContinue: string;
     };
     shell: {
         apps: string;
         menu: string;
         theme: string;
+        density: string;
+        home: string;
+        appNamed: string;
+        switchCompany: string;
+        sidebar: string;
+        collapseSidebar: string;
+        expandSidebar: string;
+        openMenu: string;
+        closeMenu: string;
+        menuHint: string;
+        location: string;
         light: string;
         dark: string;
         system: string;
@@ -62,6 +91,20 @@ export declare const en: {
         exportFailed: string;
         columns: string;
         density: string;
+        statusOf: string;
+        nextState: string;
+        recordActions: string;
+        summary: string;
+        details: string;
+        recordPanel: string;
+        showPanel: string;
+        hidePanel: string;
+        previousMonth: string;
+        nextMonth: string;
+        pickDate: string;
+        datePlaceholder: string;
+        today: string;
+        clear: string;
         proposed: string;
         design: {
             addField: string;
@@ -197,6 +240,8 @@ export declare const en: {
         close: string;
     };
     palette: {
+        switchCompany: string;
+        profile: string;
         button: string;
         title: string;
         description: string;
@@ -220,6 +265,7 @@ export declare const en: {
     shortcuts: {
         title: string;
         palette: string;
+        sidebar: string;
         search: string;
         new: string;
         views: string;