shutro-erp 0.3.2 → 0.3.4

package/dist/ui/search/ViewTabs.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Saved views as tabs (RFC 0018 §4.3): above the search, *All* and the saved searches of this model and view type —
+ * the user's own and the shared ones —, the one matching the current search marked. A tab applies its search; more
+ * than a handful go into a *More* menu. Saving and the full list stay in the search bar's favorites menu; with
+ * nothing saved, there are no tabs.
+ */
+import { encodeSearch } from '../../search/index.js';
+import { useQuery } from '@tanstack/react-query';
+import { ChevronDown, Users } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button, Menu, MenuContent, MenuItem, MenuTrigger } from '../components/primitives.js';
+import { useKosh } from '../context.js';
+import { cn } from '../lib/cn.js';
+/** Tabs shown before the rest go into *More*. */
+const VISIBLE = 6;
+/** The search without its order: a tab matches whatever the columns are sorted by. */
+const key = (state) => encodeSearch({ ...state, order: [] });
+export function ViewTabs({ model, viewType, state, onChange, }) {
+    const { api } = useKosh();
+    const { t } = useTranslation();
+    // The search bar's favorites query: one request, one cache.
+    const favorites = useQuery({
+        queryKey: ['saved-views', model],
+        queryFn: () => api.list('kosh.saved_view', {
+            filter: { targetModel: model },
+            fields: ['name', 'state', 'shared', 'viewType'],
+        }),
+    });
+    const views = (favorites.data?.items ?? []).filter((v) => v['viewType'] === viewType || v['viewType'] === null);
+    if (views.length === 0)
+        return null;
+    const current = key(state);
+    const stateOf = (v) => v['state'] ?? {};
+    const active = views.find((v) => key(stateOf(v)) === current);
+    const tab = (label, selected, apply, shared = false) => (_jsxs(Button, { size: "sm", variant: "ghost", "aria-current": selected ? 'true' : undefined, onClick: apply, className: cn('h-8 rounded-none border-b-2 border-transparent px-3 text-muted-foreground hover:text-foreground', selected && 'border-primary font-medium text-foreground'), children: [label, shared ? _jsx(Users, { className: "size-3.5 opacity-60", "aria-label": t('search.shared') }) : null] }));
+    const shown = views.slice(0, VISIBLE);
+    const more = views.slice(VISIBLE);
+    return (_jsxs("nav", { "aria-label": t('search.savedViews'), className: "-mb-1 flex items-end gap-1 border-b", children: [tab(t('search.allRecords'), current === '' && active === undefined, () => onChange({})), shown.map((v) => (_jsx("span", { className: "contents", children: tab(String(v['name']), v === active, () => onChange(stateOf(v)), v['shared'] === true) }, v.id))), more.length === 0 ? null : (_jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsxs(Button, { size: "sm", variant: "ghost", className: cn('h-8 rounded-none border-b-2 border-transparent px-3 text-muted-foreground', active !== undefined && more.includes(active) && 'border-primary text-foreground'), children: [active !== undefined && more.includes(active)
+                                    ? String(active['name'])
+                                    : t('search.moreViews', { count: more.length }), _jsx(ChevronDown, { className: "size-3.5", "aria-hidden": true })] }) }), _jsx(MenuContent, { align: "start", children: more.map((v) => (_jsx(MenuItem, { onSelect: () => onChange(stateOf(v)), children: String(v['name']) }, v.id))) })] }))] }));
+}

package/dist/ui/shell/Activate.d.ts

@@ -0,0 +1,6 @@
+import { type ReactElement } from 'react';
+import { type KoshApi } from '../api.js';
+export declare function Activate({ api, onSignedIn, }: {
+    readonly api: KoshApi;
+    readonly onSignedIn: () => void;
+}): ReactElement;

package/dist/ui/shell/Activate.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The invitation page (RFC 0019 §3.2): an invited person chooses their password (at least 12 characters) and is
+ * signed in. A used, replaced or expired link says so.
+ */
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useId, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ApiError } from '../api.js';
+import { Alert, Button, Card, Input, Label } from '../components/primitives.js';
+export function Activate({ api, onSignedIn, }) {
+    const { t } = useTranslation();
+    const queryClient = useQueryClient();
+    const id = useId();
+    const token = new URLSearchParams(window.location.search).get('token') ?? '';
+    const [password, setPassword] = useState('');
+    const [repeat, setRepeat] = useState('');
+    const activate = useMutation({
+        mutationFn: async () => {
+            const { login } = await api.call('POST', '/api/v1/auth/activate', {
+                token,
+                password,
+            });
+            await api.login(login, password);
+        },
+        onSuccess: async () => {
+            await queryClient.invalidateQueries();
+            onSignedIn();
+        },
+    });
+    const mismatch = repeat !== '' && repeat !== password;
+    return (_jsx("main", { className: "grid min-h-screen place-items-center bg-background p-4", children: _jsxs(Card, { className: "w-full max-w-sm p-6", children: [_jsx("h1", { className: "mb-1 text-xl font-semibold", children: t('auth.activateTitle') }), _jsx("p", { className: "mb-5 text-sm text-muted-foreground", children: t('auth.activateIntro') }), token === '' ? (_jsx(Alert, { children: t('auth.activateNoToken') })) : (_jsxs("form", { className: "grid gap-4", onSubmit: (e) => {
+                        e.preventDefault();
+                        if (!mismatch && password.length >= 12)
+                            activate.mutate();
+                    }, children: [activate.error === null ? null : (_jsx(Alert, { children: activate.error instanceof ApiError
+                                ? activate.error.message
+                                : String(activate.error) })), _jsxs("div", { className: "grid gap-1", children: [_jsx(Label, { htmlFor: `${id}-password`, children: t('auth.newPassword') }), _jsx(Input, { id: `${id}-password`, type: "password", autoComplete: "new-password", minLength: 12, required: true, value: password, onChange: (e) => setPassword(e.target.value) }), _jsx("p", { className: "text-xs text-muted-foreground", children: t('auth.passwordRule') })] }), _jsxs("div", { className: "grid gap-1", children: [_jsx(Label, { htmlFor: `${id}-repeat`, children: t('auth.repeatPassword') }), _jsx(Input, { id: `${id}-repeat`, type: "password", autoComplete: "new-password", required: true, value: repeat, "aria-invalid": mismatch ? true : undefined, onChange: (e) => setRepeat(e.target.value) }), mismatch ? _jsx("p", { className: "text-xs text-danger", children: t('auth.mismatch') }) : null] }), _jsx(Button, { type: "submit", variant: "primary", busy: activate.isPending, disabled: password.length < 12 || mismatch, children: t('auth.activate') })] }))] }) }));
+}

package/dist/ui/shell/CommandPalette.d.ts

@@ -3,9 +3,15 @@ import type { KoshApi } from '../api.js';
 /** Opens the palette from anywhere in the shell (the home page's search box). */
 export declare const PaletteContext: Context<() => void>;
 export declare function usePalette(): () => void;
-export declare function CommandPalette({ open, onOpenChange, api, onShortcuts, }: {
+export declare function CommandPalette({ open, onOpenChange, api, onShortcuts, companies, onSwitchCompany, }: {
     readonly open: boolean;
     readonly onOpenChange: (open: boolean) => void;
     readonly api: KoshApi;
     readonly onShortcuts: () => void;
+    /** The user's other companies, offered as "Switch to …" (RFC 0019 §3.4). */
+    readonly companies?: readonly {
+        readonly id: number;
+        readonly name: string;
+    }[];
+    readonly onSwitchCompany?: (id: number) => void;
 }): ReactElement;

package/dist/ui/shell/CommandPalette.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
-import { ArrowRight, FileText, History, Home, Keyboard, Monitor, Moon, Plus, Search, Sun, } from 'lucide-react';
+import { ArrowRight, Building2, FileText, History, Home, Keyboard, Monitor, Moon, Plus, Search, Sun, UserRound, } from 'lucide-react';
 import { Dialog as RDialog } from 'radix-ui';
 import { createContext, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -57,7 +57,7 @@ function score(text, query) {
         return 2;
     return t.includes(q) ? 1 : 0;
 }
-export function CommandPalette({ open, onOpenChange, api, onShortcuts, }) {
+export function CommandPalette({ open, onOpenChange, api, onShortcuts, companies = [], onSwitchCompany, }) {
     const { t } = useTranslation();
     const { uid, setTheme } = useKosh();
     const navigate = useNavigate();
@@ -199,6 +199,18 @@ export function CommandPalette({ open, onOpenChange, api, onShortcuts, }) {
                 icon: _jsx(Monitor, { className: "size-4", "aria-hidden": true }),
                 run: () => setTheme('system'),
             },
+            ...companies.map((c) => ({
+                id: `cmd:company:${c.id}`,
+                label: t('palette.switchCompany', { name: c.name }),
+                icon: _jsx(Building2, { className: "size-4", "aria-hidden": true }),
+                run: () => onSwitchCompany?.(c.id),
+            })),
+            {
+                id: 'cmd:profile',
+                label: t('palette.profile'),
+                icon: _jsx(UserRound, { className: "size-4", "aria-hidden": true }),
+                run: () => void navigate({ to: '/me/$page', params: { page: 'settings.Profile' } }),
+            },
             {
                 id: 'cmd:shortcuts',
                 label: t('palette.shortcuts'),
@@ -230,6 +242,8 @@ export function CommandPalette({ open, onOpenChange, api, onShortcuts, }) {
         setTheme,
         t,
         onShortcuts,
+        companies,
+        onSwitchCompany,
     ]);
     useEffect(() => {
         if (active >= items.length)

package/dist/ui/shell/Consent.d.ts

@@ -0,0 +1,5 @@
+import type { ReactElement } from 'react';
+import { type KoshApi } from '../api.js';
+export declare function Consent({ api }: {
+    readonly api: KoshApi;
+}): ReactElement;

package/dist/ui/shell/Consent.js

@@ -0,0 +1,35 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The OAuth consent page (RFC 0017 §5.2), at `/oauth/authorize`: an app asks to act for the signed-in user. It names
+ * the app, where it sends the user back, and what it may do in words; *Allow* or *Cancel* — either returns to the
+ * app. The server checks the request (registered redirect, allowed scopes, PKCE) before anything is shown; signed out,
+ * the person signs in and comes back here.
+ */
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { ExternalLink, ShieldCheck } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ApiError } from '../api.js';
+import { Alert, Button, Card, Spinner } from '../components/primitives.js';
+export function Consent({ api }) {
+    const { t } = useTranslation();
+    const search = window.location.search;
+    const params = Object.fromEntries(new URLSearchParams(search));
+    const me = useQuery({ queryKey: ['me'], queryFn: () => api.me(), retry: false });
+    const screen = useQuery({
+        queryKey: ['oauth', 'consent', search],
+        queryFn: () => api.call('GET', `/api/v1/oauth/authorize${search}`),
+        enabled: me.isSuccess,
+        retry: false,
+    });
+    const decide = useMutation({
+        mutationFn: (decision) => api.call('POST', '/api/v1/oauth/authorize', { ...params, decision }),
+        onSuccess: ({ redirect }) => window.location.assign(redirect),
+    });
+    if (me.error instanceof ApiError && me.error.status === 401) {
+        // Signed out: sign in, then back here with the same request.
+        window.location.assign(`/login?next=${encodeURIComponent(`/oauth/authorize${search}`)}`);
+        return _jsx(Spinner, { label: t('app.loading') });
+    }
+    const error = me.error ?? screen.error ?? decide.error;
+    return (_jsx("main", { className: "grid min-h-screen place-items-center bg-background p-4", children: _jsx(Card, { className: "grid w-full max-w-md gap-5 p-6", children: error !== null ? (_jsx(Alert, { children: error instanceof ApiError ? error.message : String(error) })) : screen.data === undefined || me.data === undefined ? (_jsx(Spinner, { label: t('app.loading') })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-1", children: [_jsx("span", { "aria-hidden": true, className: "mb-2 grid size-10 place-items-center rounded-lg bg-accent text-accent-foreground", children: _jsx(ShieldCheck, { className: "size-5" }) }), _jsx("h1", { className: "text-xl font-semibold", children: t('oauth.title', { app: screen.data.app.name }) }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('oauth.as', { name: me.data.name, login: me.data.login }) })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx("h2", { className: "text-sm font-medium", children: t('oauth.may') }), _jsx("ul", { className: "grid gap-1.5 rounded-md border p-3 text-sm", children: screen.data.scopes.map((s) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx(ShieldCheck, { className: "size-4 text-success", "aria-hidden": true }), s.label] }, s.scope))) }), _jsx("p", { className: "text-xs text-muted-foreground", children: t('oauth.limits') })] }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [t('oauth.back', { host: screen.data.redirectHost }), screen.data.app.homepage === null ? null : (_jsxs(_Fragment, { children: [' ', _jsxs("a", { className: "inline-flex items-center gap-1 text-primary underline", href: screen.data.app.homepage, target: "_blank", rel: "noreferrer noopener", children: [t('oauth.homepage'), _jsx(ExternalLink, { className: "size-3", "aria-hidden": true })] })] }))] }), screen.data.alreadyAllowed ? _jsx(Alert, { tone: "info", children: t('oauth.already') }) : null, _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { busy: decide.isPending && decide.variables === 'deny', onClick: () => decide.mutate('deny'), children: t('oauth.cancel') }), _jsx(Button, { variant: "primary", busy: decide.isPending && decide.variables === 'allow', onClick: () => decide.mutate('allow'), children: t('oauth.allow') })] })] })) }) }));
+}

package/dist/ui/shell/Home.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * The home page (RFC 0010 §3.8): a greeting, the palette's search box, what needs the user's attention (approvals
- * they may decide, activities due), recently opened records, and the apps. Everything on it comes from routes the
- * server already filters per user; apps that are not installed (Permissions, Messaging) simply contribute nothing.
+ * Today, the home page (RFC 0010 §3.8, RFC 0018 §4.4): a greeting with the date, the palette's search box, what needs
+ * the user — each approval waiting for them by record, the activities due, unread mentions — as a list with its
+ * action, recently opened records, the saved views they keep (lists, pivots, charts: one click back to them), and the
+ * apps. Everything comes from routes the server already filters per user; apps that are not installed (Permissions,
+ * Messaging, Notifications) simply contribute nothing.
  */
+import { encodeSearch } from '../../search/index.js';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Link, useNavigate } from '@tanstack/react-router';
-import { CalendarClock, CircleCheckBig, History, Search } from 'lucide-react';
+import { AtSign, BarChart3, CalendarClock, CircleCheckBig, History, List, Search, ShieldCheck, Star, Table2, } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { AppIcon } from '../components/AppIcon.js';
 import { Badge, Button, Card, Skeleton } from '../components/primitives.js';
@@ -22,6 +25,15 @@ const TINTS = [
     'bg-primary/10 text-primary',
     'bg-danger/10 text-danger',
 ];
+const VIEW_ICONS = {
+    pivot: Table2,
+    graph: BarChart3,
+    chart: BarChart3,
+};
+/** One row of "Needs your attention": an icon, what it is, and its actions. */
+function Item({ icon, title, detail, children, }) {
+    return (_jsxs("li", { className: "flex items-center gap-3 px-4 py-3", children: [_jsx("span", { "aria-hidden": true, className: "grid size-8 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground", children: icon }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: title }), detail === undefined ? null : (_jsx("p", { className: "truncate text-xs text-muted-foreground", children: detail }))] }), _jsx("div", { className: "flex shrink-0 items-center gap-1", children: children })] }));
+}
 export function Home() {
     const { api, uid, format } = useKosh();
     const { t } = useTranslation();
@@ -34,10 +46,25 @@ export function Home() {
     // Each is a module's route: absent (404) when the module is not installed, so an absent list is empty.
     const approvals = useQuery({
         queryKey: ['home', 'approvals'],
-        queryFn: () => api
-            .call('GET', '/api/v1/approvals/inbox')
-            .then((r) => r.requests)
-            .catch(() => []),
+        queryFn: async () => {
+            const requests = await api
+                .call('GET', '/api/v1/approvals/inbox')
+                .then((r) => r.requests)
+                .catch(() => []);
+            // The records' names, one request per model.
+            const names = new Map();
+            for (const model of new Set(requests.map((r) => r.targetModel)))
+                for (const n of await api
+                    .names(model, {
+                    ids: requests.filter((r) => r.targetModel === model).map((r) => r.targetId),
+                })
+                    .catch(() => []))
+                    names.set(`${model}:${n.id}`, n.displayName);
+            return requests.map((r) => ({
+                ...r,
+                record: names.get(`${r.targetModel}:${r.targetId}`) ?? `#${r.targetId}`,
+            }));
+        },
     });
     const activities = useQuery({
         queryKey: ['home', 'activities'],
@@ -46,13 +73,38 @@ export function Home() {
             .then((r) => r.activities)
             .catch(() => []),
     });
+    const mentions = useQuery({
+        queryKey: ['home', 'mentions'],
+        queryFn: () => api
+            .call('GET', '/api/v1/notifications?unread=true&limit=50')
+            .then((r) => r.items.filter((n) => n.kind === 'mention'))
+            .catch(() => []),
+    });
+    const saved = useQuery({
+        queryKey: ['home', 'saved-views'],
+        queryFn: () => api
+            .list('kosh.saved_view', {
+            fields: ['name', 'targetModel', 'viewType', 'state'],
+            limit: 12,
+        })
+            .then((r) => r.items)
+            .catch(() => []),
+    });
     const done = useMutation({
         mutationFn: (id) => api.call('POST', `/api/v1/activities/${id}/done`, {}),
         onSuccess: () => queryClient.invalidateQueries({ queryKey: ['home', 'activities'] }),
     });
-    const hour = new Date().getHours();
+    const read = useMutation({
+        mutationFn: (id) => api.call('POST', `/api/v1/notifications/${id}/read`, {}),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: ['home', 'mentions'] });
+            void queryClient.invalidateQueries({ queryKey: ['notifications'] });
+        },
+    });
+    const now = new Date();
+    const hour = now.getHours();
     const greeting = hour < 12 ? 'morning' : hour < 18 ? 'afternoon' : 'evening';
-    const today = new Date().toISOString().slice(0, 10);
+    const today = now.toISOString().slice(0, 10);
     const due = (activities.data ?? []).filter((a) => a.deadline <= today);
     const open = (model, id) => {
         const route = routes.data?.[model];
@@ -63,13 +115,30 @@ export function Home() {
             params: { app: route.app, action: route.action, id: String(id) },
         });
     };
+    const openSaved = (view) => {
+        const route = routes.data?.[view.targetModel];
+        if (route?.app === undefined)
+            return;
+        const q = encodeSearch((view.state ?? {}));
+        void navigate({
+            to: '/$app/a/$action',
+            params: { app: route.app, action: route.action },
+            search: { view: view.viewType, ...(q === '' ? {} : { q }) },
+        });
+    };
     const categories = [...new Set((apps.data ?? []).map((a) => a.category ?? ''))].sort((a, b) => a.localeCompare(b));
     const tint = (a) => TINTS[categories.indexOf(a.category ?? '') % TINTS.length];
     const recent = recentRecords(uid);
-    const waiting = (approvals.data?.length ?? 0) + due.length;
-    return (_jsxs("div", { className: "mx-auto grid max-w-5xl gap-8 py-4", children: [_jsxs("header", { className: "grid gap-4", children: [_jsx("h1", { className: "text-2xl font-semibold", children: me.data === undefined ? (_jsx(Skeleton, { className: "h-8 w-64" })) : (t(`home.${greeting}`, { name: me.data.name.split(' ')[0] })) }), _jsxs("button", { type: "button", onClick: openPalette, className: "flex h-12 w-full items-center gap-3 rounded-xl border bg-surface px-4 text-start text-muted-foreground shadow-sm hover:bg-muted", children: [_jsx(Search, { className: "size-5", "aria-hidden": true }), _jsx("span", { className: "flex-1", children: t('home.search') }), _jsx("kbd", { className: "rounded border px-1.5 text-xs", children: "Ctrl K" })] })] }), _jsxs("section", { "aria-labelledby": "home-attention", className: "grid gap-3", children: [_jsx("h2", { id: "home-attention", className: "text-sm font-semibold text-muted-foreground", children: t('home.attention') }), approvals.isPending || activities.isPending ? (_jsx(Skeleton, { className: "h-16" })) : waiting === 0 ? (_jsxs(Card, { className: "flex items-center gap-3 p-4 text-sm text-muted-foreground", children: [_jsx(CircleCheckBig, { className: "size-5 text-success", "aria-hidden": true }), t('home.nothing')] })) : (_jsxs("ul", { className: "grid gap-2 sm:grid-cols-2", children: [(approvals.data?.length ?? 0) === 0 ? null : (_jsx("li", { children: _jsxs(Card, { className: "flex items-center justify-between gap-3 p-4", children: [_jsxs("div", { className: "grid gap-1", children: [_jsx("span", { className: "font-medium", children: t('home.approvals', { count: approvals.data?.length ?? 0 }) }), _jsx("span", { className: "text-xs text-muted-foreground", children: [...new Set((approvals.data ?? []).map((a) => a.levelName))].join(' · ') })] }), approvals.data?.[0] === undefined ? null : (_jsx(Button, { size: "sm", onClick: () => {
-                                                const first = approvals.data?.[0];
-                                                if (first !== undefined)
-                                                    open(first.targetModel, first.targetId);
-                                            }, children: t('home.open') }))] }) })), due.length === 0 ? null : (_jsx("li", { children: _jsxs(Card, { className: "grid gap-2 p-4", children: [_jsx("span", { className: "font-medium", children: t('home.activities', { count: due.length }) }), _jsx("ul", { className: "grid gap-1 text-sm", children: due.slice(0, 5).map((a) => (_jsxs("li", { className: "flex items-center justify-between gap-2", children: [_jsxs("button", { type: "button", className: "flex min-w-0 items-center gap-2 text-start hover:underline", onClick: () => open(a.model, a.resId), children: [_jsx(CalendarClock, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }), _jsxs("span", { className: "truncate", children: [a.summary ?? a.type.name, " \u00B7 ", a.record] }), a.deadline < today ? (_jsx(Badge, { tone: "danger", children: t('home.overdue') })) : null] }), _jsx(Button, { size: "sm", variant: "ghost", busy: done.isPending && done.variables === a.id, onClick: () => done.mutate(a.id), children: t('home.done') })] }, a.id))) })] }) }))] }))] }), recent.length === 0 ? null : (_jsxs("section", { "aria-labelledby": "home-recent", className: "grid gap-3", children: [_jsx("h2", { id: "home-recent", className: "text-sm font-semibold text-muted-foreground", children: t('home.recent') }), _jsx("ul", { className: "flex flex-wrap gap-2", children: recent.slice(0, 8).map((r) => (_jsx("li", { children: _jsxs(Link, { to: "/$app/a/$action/$id", params: { app: r.app, action: r.action, id: String(r.id) }, className: "flex items-center gap-2 rounded-full border bg-surface px-3 py-1.5 text-sm hover:bg-muted", children: [_jsx(History, { className: "size-3.5 text-muted-foreground", "aria-hidden": true }), _jsx("span", { className: "max-w-56 truncate", children: r.title }), _jsx("span", { className: "text-xs text-muted-foreground", children: format.date(new Date(r.at).toISOString().slice(0, 10)) })] }) }, `${r.model}:${r.id}`))) })] })), _jsxs("section", { "aria-labelledby": "apps-title", className: "grid gap-3", children: [_jsx("h2", { id: "apps-title", className: "text-sm font-semibold text-muted-foreground", children: t('home.apps') }), apps.isPending ? (_jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] gap-3", children: [0, 1, 2, 3].map((i) => (_jsx(Skeleton, { className: "h-28" }, i))) })) : (apps.data ?? []).length === 0 ? (_jsx("p", { className: "text-muted-foreground", children: t('shell.noApps') })) : (_jsx("ul", { className: "grid grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] gap-3", children: (apps.data ?? []).map((a) => (_jsx("li", { children: _jsx(Link, { to: "/$app", params: { app: a.code }, className: "block h-full", children: _jsxs(Card, { className: "flex h-full flex-col gap-3 p-4 hover:bg-muted", children: [_jsx(AppIcon, { name: a.icon ?? a.code, className: cn('size-11', tint(a)) }), _jsxs("div", { className: "grid gap-0.5", children: [_jsx("span", { className: "font-medium", children: a.label }), a.summary === undefined ? null : (_jsx("span", { className: "line-clamp-2 text-xs text-muted-foreground", children: a.summary }))] })] }) }) }, a.code))) }))] })] }));
+    const waiting = (approvals.data?.length ?? 0) + due.length + (mentions.data?.length ?? 0);
+    const views = (saved.data ?? []).filter((v) => routes.data?.[v.targetModel]?.app !== undefined);
+    return (_jsxs("div", { className: "mx-auto grid max-w-5xl gap-8 py-4", children: [_jsxs("header", { className: "grid gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: t('home.today', { date: format.date(today) }) }), _jsx("h1", { className: "text-2xl font-semibold", children: me.data === undefined ? (_jsx(Skeleton, { className: "h-8 w-64" })) : (t(`home.${greeting}`, { name: me.data.name.split(' ')[0] })) })] }), _jsxs("button", { type: "button", onClick: openPalette, className: "flex h-12 w-full items-center gap-3 rounded-xl border bg-surface px-4 text-start text-muted-foreground shadow-sm hover:bg-muted", children: [_jsx(Search, { className: "size-5", "aria-hidden": true }), _jsx("span", { className: "flex-1", children: t('home.search') }), _jsx("kbd", { className: "rounded border px-1.5 text-xs", children: "Ctrl K" })] })] }), _jsxs("section", { "aria-labelledby": "home-attention", className: "grid gap-3", children: [_jsxs("h2", { id: "home-attention", className: "flex items-center gap-2 text-sm font-semibold text-muted-foreground", children: [t('home.attention'), waiting === 0 ? null : _jsx(Badge, { tone: "info", children: waiting })] }), approvals.isPending || activities.isPending || mentions.isPending ? (_jsx(Skeleton, { className: "h-16" })) : waiting === 0 ? (_jsxs(Card, { className: "flex items-center gap-3 p-4 text-sm text-muted-foreground", children: [_jsx(CircleCheckBig, { className: "size-5 text-success", "aria-hidden": true }), t('home.nothing')] })) : (_jsx(Card, { className: "p-0", children: _jsxs("ul", { className: "divide-y", children: [(approvals.data ?? []).map((a) => (_jsx(Item, { icon: _jsx(ShieldCheck, { className: "size-4" }), title: t('home.approve', { record: a.record }), detail: a.levelName, children: _jsx(Button, { size: "sm", onClick: () => open(a.targetModel, a.targetId), children: t('home.review') }) }, `approval-${a.id}`))), due.map((a) => (_jsxs(Item, { icon: _jsx(CalendarClock, { className: "size-4" }), title: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate", children: a.summary ?? a.type.name }), a.deadline < today ? (_jsx(Badge, { tone: "danger", children: t('home.overdue') })) : (_jsx(Badge, { tone: "warning", children: t('home.dueToday') }))] }), detail: `${a.type.name} · ${a.record}`, children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => open(a.model, a.resId), children: t('home.open') }), _jsx(Button, { size: "sm", busy: done.isPending && done.variables === a.id, onClick: () => done.mutate(a.id), children: t('home.done') })] }, `activity-${a.id}`))), (mentions.data ?? []).map((m) => (_jsx(Item, { icon: _jsx(AtSign, { className: "size-4" }), title: t('home.mentioned', {
+                                        actor: m.params.actor ?? '',
+                                        record: m.params.record ?? '',
+                                    }), detail: m.params.preview ?? format.datetime(m.createdAt), children: _jsx(Button, { size: "sm", onClick: () => {
+                                            read.mutate(m.id);
+                                            open(m.model, m.resId);
+                                        }, children: t('home.open') }) }, `mention-${m.id}`)))] }) }))] }), recent.length === 0 ? null : (_jsxs("section", { "aria-labelledby": "home-recent", className: "grid gap-3", children: [_jsx("h2", { id: "home-recent", className: "text-sm font-semibold text-muted-foreground", children: t('home.recent') }), _jsx("ul", { className: "flex flex-wrap gap-2", children: recent.slice(0, 8).map((r) => (_jsx("li", { children: _jsxs(Link, { to: "/$app/a/$action/$id", params: { app: r.app, action: r.action, id: String(r.id) }, className: "flex items-center gap-2 rounded-full border bg-surface px-3 py-1.5 text-sm hover:bg-muted", children: [_jsx(History, { className: "size-3.5 text-muted-foreground", "aria-hidden": true }), _jsx("span", { className: "max-w-56 truncate", children: r.title }), _jsx("span", { className: "text-xs text-muted-foreground", children: format.date(new Date(r.at).toISOString().slice(0, 10)) })] }) }, `${r.model}:${r.id}`))) })] })), views.length === 0 ? null : (_jsxs("section", { "aria-labelledby": "home-saved", className: "grid gap-3", children: [_jsx("h2", { id: "home-saved", className: "text-sm font-semibold text-muted-foreground", children: t('home.saved') }), _jsx("ul", { className: "grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] gap-2", children: views.map((v) => {
+                            const Icon = VIEW_ICONS[v.viewType] ?? List;
+                            return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => openSaved(v), className: "flex w-full items-center gap-2 rounded-lg border bg-surface px-3 py-2 text-start text-sm hover:bg-muted", children: [_jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: v.name }), _jsx(Star, { className: "size-3.5 shrink-0 text-muted-foreground", "aria-hidden": true })] }) }, v.id));
+                        }) })] })), _jsxs("section", { "aria-labelledby": "apps-title", className: "grid gap-3", children: [_jsx("h2", { id: "apps-title", className: "text-sm font-semibold text-muted-foreground", children: t('home.apps') }), apps.isPending ? (_jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] gap-3", children: [0, 1, 2, 3].map((i) => (_jsx(Skeleton, { className: "h-16" }, i))) })) : (apps.data ?? []).length === 0 ? (_jsx("p", { className: "text-muted-foreground", children: t('shell.noApps') })) : (_jsx("ul", { className: "grid grid-cols-[repeat(auto-fill,minmax(13rem,1fr))] gap-2", children: (apps.data ?? []).map((a) => (_jsx("li", { children: _jsx(Link, { to: "/$app", params: { app: a.code }, className: "block h-full", children: _jsxs(Card, { className: "flex h-full items-center gap-3 p-3 hover:bg-muted", children: [_jsx(AppIcon, { name: a.icon ?? a.code, className: cn('size-9', tint(a)) }), _jsxs("div", { className: "grid min-w-0 gap-0.5", children: [_jsx("span", { className: "truncate font-medium", children: a.label }), a.summary === undefined ? null : (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: a.summary }))] })] }) }) }, a.code))) }))] })] }));
 }

package/dist/ui/shell/Sidebar.d.ts

@@ -0,0 +1,27 @@
+import { type ReactElement, type ReactNode } from 'react';
+import type { AppEntry, KoshApi } from '../api.js';
+/** Whether the sidebar is collapsed to its rail, remembered per browser. */
+export declare function useSidebarCollapsed(): [boolean, (collapsed: boolean) => void];
+export declare function Sidebar({ api, apps, current, company, collapsed, onCollapse, onSearch, top, bottom, onNavigate, }: {
+    readonly api: KoshApi;
+    readonly apps: readonly AppEntry[];
+    /** The open app (from the URL). */
+    readonly current: string | undefined;
+    readonly company: number;
+    readonly collapsed: boolean;
+    /** Absent in the drawer (it closes instead). */
+    readonly onCollapse?: ((collapsed: boolean) => void) | undefined;
+    readonly onSearch: () => void;
+    /** The company block. */
+    readonly top: ReactNode;
+    /** The user menu. */
+    readonly bottom: ReactNode;
+    /** After following a link (the drawer closes). */
+    readonly onNavigate?: (() => void) | undefined;
+}): ReactElement;
+/** The sidebar as a drawer on small screens. */
+export declare function SidebarDrawer({ open, onOpenChange, children, }: {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly children: ReactNode;
+}): ReactElement;

package/dist/ui/shell/Sidebar.js

@@ -0,0 +1,77 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The Workspace sidebar (RFC 0018 §4.1), shown inside an app: the company at the top, search, Home, then the open
+ * app — its name switches to another app — with only its own sections, and the user at the bottom. The home page has
+ * no sidebar. It collapses to an icon rail (`Ctrl+B`, remembered per browser) and becomes a drawer on small screens.
+ * The server decides which apps and menus the user sees; the sidebar shows them.
+ */
+import { useQuery } from '@tanstack/react-query';
+import { Link, useNavigate } from '@tanstack/react-router';
+import { ChevronsUpDown, House, PanelLeftClose, PanelLeftOpen, Search, X } from 'lucide-react';
+import { Dialog } from 'radix-ui';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AppIcon } from '../components/AppIcon.js';
+import { Button, Menu, MenuCheckboxItem, MenuContent, MenuLabel, MenuTrigger, } from '../components/primitives.js';
+import { cn } from '../lib/cn.js';
+const SIDEBAR_KEY = 'kosh.sidebar';
+/** Whether the sidebar is collapsed to its rail, remembered per browser. */
+export function useSidebarCollapsed() {
+    const [collapsed, setCollapsed] = useState(() => {
+        try {
+            return localStorage.getItem(SIDEBAR_KEY) === 'collapsed';
+        }
+        catch {
+            return false;
+        }
+    });
+    const set = (next) => {
+        setCollapsed(next);
+        try {
+            if (next)
+                localStorage.setItem(SIDEBAR_KEY, 'collapsed');
+            else
+                localStorage.removeItem(SIDEBAR_KEY);
+        }
+        catch {
+            // storage unavailable: the choice lasts for this page
+        }
+    };
+    return [collapsed, set];
+}
+/** An app's entries as the sidebar lists them: its top level, with groups (Reporting, Configuration) kept. */
+function entriesOf(menus) {
+    return menus.flatMap((root) => (root.action === undefined ? [...root.children] : [root]));
+}
+function SectionLink({ app, node, onNavigate, }) {
+    if (node.action === undefined)
+        return null;
+    return (_jsx(Link, { to: "/$app/a/$action", params: { app, action: node.action }, onClick: onNavigate, className: "block truncate rounded-md px-2 py-1.5 text-sm text-muted-foreground hover:bg-muted hover:text-foreground", activeProps: {
+            'aria-current': 'page',
+            className: 'bg-accent font-medium text-accent-foreground hover:bg-accent',
+        }, children: node.label }));
+}
+function AppSections({ api, app, company, onNavigate, }) {
+    const menus = useQuery({
+        queryKey: ['menus', app, company],
+        queryFn: () => api.menus(app),
+    });
+    return (_jsx("ul", { className: "grid gap-0.5 pt-1 pb-2", children: entriesOf(menus.data ?? []).map((node) => node.children.length > 0 ? (_jsxs("li", { className: "pt-1", children: [_jsx("p", { className: "px-2 pb-0.5 text-xs font-medium tracking-wide text-muted-foreground uppercase", children: node.label }), _jsx("ul", { className: "grid gap-0.5", children: node.children.map((child) => (_jsx("li", { children: _jsx(SectionLink, { app: app, node: child, onNavigate: onNavigate }) }, child.id))) })] }, node.id)) : (_jsx("li", { children: _jsx(SectionLink, { app: app, node: node, onNavigate: onNavigate }) }, node.id))) }));
+}
+export function Sidebar({ api, apps, current, company, collapsed, onCollapse, onSearch, top, bottom, onNavigate, }) {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const app = apps.find((a) => a.code === current);
+    const item = 'flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-sm hover:bg-muted focus-visible:outline-2';
+    return (_jsxs("div", { className: "flex h-full flex-col gap-1 p-2", children: [_jsx("div", { className: cn('pb-1', collapsed && 'flex justify-center'), children: top }), _jsxs("button", { type: "button", className: cn(item, 'text-muted-foreground', collapsed && 'justify-center'), onClick: onSearch, "aria-keyshortcuts": "Control+K Meta+K", "aria-label": collapsed ? t('palette.button') : undefined, title: collapsed ? t('palette.button') : undefined, children: [_jsx(Search, { className: "size-4 shrink-0", "aria-hidden": true }), collapsed ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1 text-start", children: t('palette.button') }), _jsx("kbd", { className: "rounded border bg-surface px-1 text-[0.65rem]", children: "Ctrl K" })] }))] }), _jsxs(Link, { to: "/", onClick: onNavigate, className: cn(item, collapsed && 'justify-center'), activeOptions: { exact: true }, activeProps: { 'aria-current': 'page', className: 'bg-muted font-medium' }, "aria-label": collapsed ? t('shell.home') : undefined, title: collapsed ? t('shell.home') : undefined, children: [_jsx(House, { className: "size-4 shrink-0", "aria-hidden": true }), collapsed ? null : t('shell.home')] }), _jsx("nav", { "aria-label": t('shell.menu'), className: "-mx-2 mt-2 flex-1 overflow-y-auto border-t px-2 pt-2", children: app === undefined ? null : (_jsxs(_Fragment, { children: [_jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": t('shell.appNamed', { app: app.label }), title: collapsed ? app.label : undefined, className: cn(item, 'font-semibold', collapsed && 'justify-center'), children: [_jsx(AppIcon, { name: app.icon ?? app.code, className: "size-6 rounded-md [&_svg]:size-3.5" }), collapsed ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1 truncate text-start", children: app.label }), _jsx(ChevronsUpDown, { className: "size-3.5 text-muted-foreground", "aria-hidden": true })] }))] }) }), _jsxs(MenuContent, { align: "start", className: "w-60", children: [_jsx(MenuLabel, { children: t('shell.apps') }), apps.map((a) => (_jsxs(MenuCheckboxItem, { checked: a.code === current, onCheckedChange: () => {
+                                                if (a.code === current)
+                                                    return;
+                                                void navigate({ to: '/$app', params: { app: a.code } });
+                                                onNavigate?.();
+                                            }, children: [_jsx(AppIcon, { name: a.icon ?? a.code, className: "size-5 rounded [&_svg]:size-3" }), a.label] }, a.code)))] })] }), collapsed ? null : (_jsx(AppSections, { api: api, app: app.code, company: company, onNavigate: onNavigate }))] })) }), _jsxs("div", { className: cn('flex items-center gap-1 border-t pt-2', collapsed && 'flex-col'), children: [_jsx("div", { className: "min-w-0 flex-1", children: bottom }), onCollapse === undefined ? null : (_jsx(Button, { variant: "ghost", size: "icon", "aria-label": collapsed ? t('shell.expandSidebar') : t('shell.collapseSidebar'), title: `${collapsed ? t('shell.expandSidebar') : t('shell.collapseSidebar')} (Ctrl B)`, "aria-keyshortcuts": "Control+B Meta+B", onClick: () => onCollapse(!collapsed), children: collapsed ? (_jsx(PanelLeftOpen, { className: "rtl:rotate-180", "aria-hidden": true })) : (_jsx(PanelLeftClose, { className: "rtl:rotate-180", "aria-hidden": true })) }))] })] }));
+}
+/** The sidebar as a drawer on small screens. */
+export function SidebarDrawer({ open, onOpenChange, children, }) {
+    const { t } = useTranslation();
+    return (_jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Overlay, { className: "fixed inset-0 z-40 bg-black/40" }), _jsxs(Dialog.Content, { className: "fixed inset-y-0 start-0 z-50 w-72 max-w-[85vw] border-e bg-surface shadow-xl outline-none", children: [_jsx(Dialog.Title, { className: "sr-only", children: t('shell.menu') }), _jsx(Dialog.Description, { className: "sr-only", children: t('shell.menuHint') }), _jsx(Dialog.Close, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "absolute end-2 top-2 z-10", "aria-label": t('shell.closeMenu'), children: _jsx(X, { "aria-hidden": true }) }) }), children] })] }) }));
+}

package/dist/ui/shell/TwoFactorSetup.d.ts

@@ -0,0 +1,5 @@
+import { type ReactElement } from 'react';
+import { type KoshApi } from '../api.js';
+export declare function TwoFactorSetup({ api }: {
+    readonly api: KoshApi;
+}): ReactElement;

package/dist/ui/shell/TwoFactorSetup.js

@@ -0,0 +1,32 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Two-factor sign-in required of everyone (RFC 0019 §3.5): until the person sets it up, the server allows nothing
+ * else, so the shell shows this page instead — the key for the authenticator app, a code to turn it on, the recovery
+ * codes once — then opens the back-office.
+ */
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useId, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ApiError } from '../api.js';
+import { Alert, Button, Card, Input, Label } from '../components/primitives.js';
+export function TwoFactorSetup({ api }) {
+    const { t } = useTranslation();
+    const id = useId();
+    const queryClient = useQueryClient();
+    const [code, setCode] = useState('');
+    const [codes, setCodes] = useState(null);
+    const start = useMutation({
+        mutationFn: () => api.call('POST', '/api/v1/auth/2fa/setup'),
+    });
+    const enable = useMutation({
+        mutationFn: () => api.call('POST', '/api/v1/auth/2fa/enable', { code }),
+        onSuccess: (data) => setCodes(data.recoveryCodes),
+    });
+    const error = start.error ?? enable.error;
+    const setup = start.data;
+    return (_jsx("main", { className: "grid min-h-screen place-items-center bg-background p-4", children: _jsxs(Card, { className: "grid w-full max-w-md gap-4 p-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "mb-1 text-xl font-semibold", children: t('auth.setupTitle') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('auth.setupIntro') })] }), error === null ? null : (_jsx(Alert, { children: error instanceof ApiError ? error.message : String(error) })), codes !== null ? (_jsxs(_Fragment, { children: [_jsxs(Alert, { tone: "info", children: [_jsx("p", { className: "font-medium", children: t('auth.setupCodes') }), _jsx("ul", { className: "mt-2 grid grid-cols-2 gap-1 font-mono text-sm", children: codes.map((c) => (_jsx("li", { children: c }, c))) })] }), _jsx(Button, { variant: "primary", onClick: () => void queryClient.invalidateQueries(), children: t('auth.setupContinue') })] })) : setup === undefined ? (_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: "primary", busy: start.isPending, onClick: () => start.mutate(), children: t('auth.setupStart') }), _jsx(Button, { variant: "ghost", onClick: () => void api.logout().then(() => window.location.assign('/login')), children: t('auth.signOut') })] })) : (_jsxs("form", { className: "grid gap-4", onSubmit: (e) => {
+                        e.preventDefault();
+                        if (code.length >= 6)
+                            enable.mutate();
+                    }, children: [_jsxs("ol", { className: "grid list-decimal gap-2 ps-5 text-sm", children: [_jsxs("li", { children: [t('auth.setupStep1'), ' ', _jsx("a", { className: "text-primary underline", href: setup.otpauthUri, children: t('auth.setupOpenApp') })] }), _jsxs("li", { children: [t('auth.setupStep2'), _jsx("code", { "data-testid": "two-factor-key", className: "ms-2 select-all break-all rounded bg-muted px-2 py-1 font-mono text-xs", children: setup.secret })] }), _jsx("li", { children: t('auth.setupStep3') })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-code`, children: t('auth.code') }), _jsx(Input, { id: `${id}-code`, inputMode: "numeric", autoComplete: "one-time-code", className: "w-40 font-mono", value: code, onChange: (e) => setCode(e.target.value.trim()) })] }), _jsx(Button, { type: "submit", variant: "primary", busy: enable.isPending, disabled: code.length < 6, children: t('auth.setupTurnOn') })] }))] }) }));
+}

package/dist/ui/shell/shortcuts.d.ts

@@ -5,6 +5,7 @@
  * | Keys            | Does                                | Marked with             |
  * | --------------- | ----------------------------------- | ----------------------- |
  * | Ctrl/⌘ + K      | command palette                     | (the shell)             |
+ * | Ctrl/⌘ + B      | collapse / expand the sidebar       | (the shell)             |
  * | ?               | this list                           | (the shell)             |
  * | /               | focus the search box                | `data-kosh-search`      |
  * | N               | new record                          | `data-kosh-new`         |
@@ -21,6 +22,8 @@ import { type ReactElement } from 'react';
 export declare function useShortcuts(handlers: {
     readonly palette: () => void;
     readonly help: () => void;
+    /** Collapses or expands the sidebar (RFC 0018). */
+    readonly sidebar?: () => void;
 }): void;
 /** The cheat sheet (`?`). */
 export declare function ShortcutsHelp({ open, onOpenChange, }: {

package/dist/ui/shell/shortcuts.js

@@ -6,6 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * | Keys            | Does                                | Marked with             |
  * | --------------- | ----------------------------------- | ----------------------- |
  * | Ctrl/⌘ + K      | command palette                     | (the shell)             |
+ * | Ctrl/⌘ + B      | collapse / expand the sidebar       | (the shell)             |
  * | ?               | this list                           | (the shell)             |
  * | /               | focus the search box                | `data-kosh-search`      |
  * | N               | new record                          | `data-kosh-new`         |
@@ -48,6 +49,11 @@ export function useShortcuts(handlers) {
                     handlers.palette();
                 return;
             }
+            if (mod && key === 'b' && handlers.sidebar !== undefined && !typing(e.target)) {
+                e.preventDefault();
+                handlers.sidebar();
+                return;
+            }
             if (mod && key === 's') {
                 // On a form, Ctrl+S saves (or does nothing when there is nothing to save): never the browser's dialog.
                 if (click('[data-kosh-save]') || document.querySelector('[data-kosh-form]') !== null)
@@ -68,8 +74,10 @@ export function useShortcuts(handlers) {
             }
             if (mod || e.altKey || typing(e.target))
                 return;
-            if (document.querySelector('[role="dialog"]') !== null)
-                return; // dialogs own their keys
+            // Dialogs, popovers, menus and lists own their keys (Escape closes them, not the page). Checked while the key
+            // is captured, before they handle it and close.
+            if (document.querySelector('[role="dialog"], [role="menu"], [role="listbox"], [data-radix-popper-content-wrapper]') !== null)
+                return;
             if (e.key === '?') {
                 e.preventDefault();
                 handlers.help();
@@ -90,8 +98,8 @@ export function useShortcuts(handlers) {
                     e.preventDefault();
             }
         };
-        window.addEventListener('keydown', onKey);
-        return () => window.removeEventListener('keydown', onKey);
+        window.addEventListener('keydown', onKey, true);
+        return () => window.removeEventListener('keydown', onKey, true);
     }, [handlers]);
 }
 const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform);
@@ -101,6 +109,7 @@ export function ShortcutsHelp({ open, onOpenChange, }) {
     const mod = isMac ? '⌘' : 'Ctrl';
     const rows = [
         ['palette', [mod, 'K']],
+        ['sidebar', [mod, 'B']],
         ['search', ['/']],
         ['new', ['N']],
         ['views', ['Alt', '1…9']],