shutro-erp 0.3.2 → 0.3.3

package/dist/ui/i18n/messages.js

@@ -12,6 +12,14 @@ export const en = {
         unknownPage: 'The page "{{page}}" is not part of this app. Register it with registry.registerPage.',
     },
     auth: {
+        activateTitle: 'Choose your password',
+        activateIntro: 'You were invited to Shutro ERP. Choose a password to start.',
+        activateNoToken: 'This link is incomplete: open the link from your invitation.',
+        newPassword: 'Password',
+        repeatPassword: 'Repeat the password',
+        passwordRule: 'At least 12 characters.',
+        mismatch: 'The passwords are not the same.',
+        activate: 'Save and sign in',
         signIn: 'Sign in',
         login: 'Login',
         password: 'Password',
@@ -21,11 +29,32 @@ export const en = {
         signOut: 'Sign out',
         invalid: 'The login or password is wrong.',
         adminNeeds2fa: 'Administrator rights apply after you verify a second factor.',
+        setupTitle: 'Set up two-factor sign-in',
+        setupIntro: 'This company requires a second step when you sign in: a code from an authenticator app on your phone. Set it up to continue.',
+        setupStart: 'Set it up',
+        setupStep1: 'Add this account to your authenticator app.',
+        setupOpenApp: 'Open in the app',
+        setupStep2: 'Or type this key:',
+        setupStep3: 'Enter the 6-digit code it shows.',
+        setupTurnOn: 'Turn on and continue',
+        setupCodes: 'Keep these recovery codes somewhere safe: each signs you in once if you lose your phone.',
+        setupContinue: 'Continue',
     },
     shell: {
         apps: 'Apps',
         menu: 'Main menu',
         theme: 'Theme',
+        density: 'Density',
+        home: 'Home',
+        appNamed: '{{app}} app',
+        switchCompany: 'Company: {{name}} (switch)',
+        sidebar: 'Sidebar',
+        collapseSidebar: 'Collapse the sidebar',
+        expandSidebar: 'Expand the sidebar',
+        openMenu: 'Open the menu',
+        closeMenu: 'Close the menu',
+        menuHint: 'Apps and their sections',
+        location: 'You are here',
         light: 'Light',
         dark: 'Dark',
         system: 'System',
@@ -62,6 +91,20 @@ export const en = {
         exportFailed: 'The export failed: {{reason}}',
         columns: 'Columns',
         density: 'Density',
+        statusOf: '{{field}}: {{state}}',
+        nextState: 'Next',
+        recordActions: 'Record actions',
+        summary: 'Summary',
+        details: 'Details',
+        recordPanel: 'About this record',
+        showPanel: 'Show the panel',
+        hidePanel: 'Hide the panel',
+        previousMonth: 'Previous month',
+        nextMonth: 'Next month',
+        pickDate: 'Pick a date',
+        datePlaceholder: 'Date',
+        today: 'Today',
+        clear: 'Clear',
         proposed: 'Proposed',
         design: { addField: 'Add field', addColumn: 'Add column' },
         compact: 'Compact',
@@ -191,6 +234,8 @@ export const en = {
     },
     toast: { region: 'Notifications', close: 'Close' },
     palette: {
+        switchCompany: 'Switch to {{name}}',
+        profile: 'Your profile',
         button: 'Search or jump to…',
         title: 'Command palette',
         description: 'Search records, menus and commands. Use the arrow keys and Enter.',
@@ -209,6 +254,7 @@ export const en = {
     shortcuts: {
         title: 'Keyboard shortcuts',
         palette: 'Search or jump anywhere',
+        sidebar: 'Collapse or expand the sidebar',
         search: 'Focus the search box',
         new: 'New record',
         views: 'Switch view',
@@ -247,6 +293,14 @@ export const bn = {
         unknownPage: '"{{page}}" পৃষ্ঠাটি এই অ্যাপে নেই। registry.registerPage দিয়ে নিবন্ধন করুন।',
     },
     auth: {
+        activateTitle: 'আপনার পাসওয়ার্ড বেছে নিন',
+        activateIntro: 'আপনাকে Shutro ERP-এ আমন্ত্রণ জানানো হয়েছে। শুরু করতে একটি পাসওয়ার্ড বেছে নিন।',
+        activateNoToken: 'লিংকটি অসম্পূর্ণ: আমন্ত্রণের লিংকটি খুলুন।',
+        newPassword: 'পাসওয়ার্ড',
+        repeatPassword: 'পাসওয়ার্ড আবার লিখুন',
+        passwordRule: 'কমপক্ষে ১২ অক্ষর।',
+        mismatch: 'পাসওয়ার্ড দুটি মেলেনি।',
+        activate: 'সংরক্ষণ করে সাইন ইন করুন',
         signIn: 'সাইন ইন',
         login: 'লগইন',
         password: 'পাসওয়ার্ড',
@@ -256,11 +310,32 @@ export const bn = {
         signOut: 'সাইন আউট',
         invalid: 'লগইন বা পাসওয়ার্ড ভুল।',
         adminNeeds2fa: 'দ্বিতীয় ধাপ যাচাইয়ের পর অ্যাডমিনিস্ট্রেটরের অধিকার কার্যকর হবে।',
+        setupTitle: 'দুই-ধাপের সাইন-ইন চালু করুন',
+        setupIntro: 'এই প্রতিষ্ঠানে সাইন-ইনের সময় একটি দ্বিতীয় ধাপ লাগে: ফোনের অথেনটিকেটর অ্যাপের একটি কোড। চালিয়ে যেতে এটি চালু করুন।',
+        setupStart: 'চালু করুন',
+        setupStep1: 'অ্যাকাউন্টটি আপনার অথেনটিকেটর অ্যাপে যোগ করুন।',
+        setupOpenApp: 'অ্যাপে খুলুন',
+        setupStep2: 'অথবা এই কী লিখুন:',
+        setupStep3: 'অ্যাপে দেখানো ৬-সংখ্যার কোড দিন।',
+        setupTurnOn: 'চালু করে এগিয়ে যান',
+        setupCodes: 'এই রিকভারি কোডগুলো নিরাপদে রাখুন: ফোন হারালে প্রতিটি একবার সাইন-ইন করায়।',
+        setupContinue: 'এগিয়ে যান',
     },
     shell: {
         apps: 'অ্যাপস',
         menu: 'প্রধান মেনু',
         theme: 'থিম',
+        density: 'ঘনত্ব',
+        home: 'হোম',
+        appNamed: '{{app}} অ্যাপ',
+        switchCompany: 'প্রতিষ্ঠান: {{name}} (বদলান)',
+        sidebar: 'সাইডবার',
+        collapseSidebar: 'সাইডবার ছোট করুন',
+        expandSidebar: 'সাইডবার বড় করুন',
+        openMenu: 'মেনু খুলুন',
+        closeMenu: 'মেনু বন্ধ করুন',
+        menuHint: 'অ্যাপ ও তাদের অংশ',
+        location: 'আপনি এখানে আছেন',
         light: 'লাইট',
         dark: 'ডার্ক',
         system: 'সিস্টেম',
@@ -297,6 +372,20 @@ export const bn = {
         exportFailed: 'এক্সপোর্ট ব্যর্থ: {{reason}}',
         columns: 'কলাম',
         density: 'ঘনত্ব',
+        statusOf: '{{field}}: {{state}}',
+        nextState: 'পরবর্তী',
+        recordActions: 'রেকর্ডের কাজ',
+        summary: 'সারাংশ',
+        details: 'বিস্তারিত',
+        recordPanel: 'এই রেকর্ড সম্পর্কে',
+        showPanel: 'প্যানেল দেখান',
+        hidePanel: 'প্যানেল লুকান',
+        previousMonth: 'আগের মাস',
+        nextMonth: 'পরের মাস',
+        pickDate: 'তারিখ বাছুন',
+        datePlaceholder: 'তারিখ',
+        today: 'আজ',
+        clear: 'মুছে ফেলুন',
         proposed: 'প্রস্তাবিত',
         design: { addField: 'ফিল্ড যোগ করুন', addColumn: 'কলাম যোগ করুন' },
         compact: 'সংক্ষিপ্ত',
@@ -423,6 +512,8 @@ export const bn = {
     },
     toast: { region: 'বিজ্ঞপ্তি', close: 'বন্ধ করুন' },
     palette: {
+        switchCompany: '{{name}}-এ যান',
+        profile: 'আপনার প্রোফাইল',
         button: 'খুঁজুন বা যান…',
         title: 'কমান্ড প্যালেট',
         description: 'রেকর্ড, মেনু ও কমান্ড খুঁজুন। তীর কী ও এন্টার ব্যবহার করুন।',
@@ -441,6 +532,7 @@ export const bn = {
     shortcuts: {
         title: 'কীবোর্ড শর্টকাট',
         palette: 'যেকোনো জায়গায় খুঁজুন বা যান',
+        sidebar: 'সাইডবার ছোট বা বড় করুন',
         search: 'সার্চ বক্সে যান',
         new: 'নতুন রেকর্ড',
         views: 'ভিউ বদলান',

package/dist/ui/index.d.ts

@@ -8,13 +8,14 @@
  */
 import { Registry } from './registry.js';
 export { ApiError, type ApiOptions, type AppEntry, type CurrentUser, createKoshApi, type KoshApi, type ListQuery, type MenuNode, NetworkError, type Problem, type Row, type ServedView, type Versioned, type ViewField, } from './api.js';
-export { KoshApp, type KoshAppProps } from './app.js';
+export { KoshApp, type KoshAppProps, useLanguage } from './app.js';
 export { AppIcon } from './components/AppIcon.js';
 export * from './components/primitives.js';
 export { type KoshContextValue, KoshProvider, type ThemeChoice, useKosh, useTheme, } from './context.js';
 export { type DesignContextValue, DesignProvider, type DesignSpot, useDesign, } from './design.js';
 export { addMessages, createI18n, directionOf, NAMESPACE } from './i18n/index.js';
 export { LANGUAGES } from './i18n/messages.js';
+export { accentVariables, hexToOklch } from './lib/accent.js';
 export { cn } from './lib/cn.js';
 export { bcp47, createFormatter, type Formatter } from './lib/format.js';
 export { type LiveRecord, useLiveModel, useLiveRecord } from './live.js';

package/dist/ui/index.js

@@ -12,13 +12,14 @@ import { KanbanView } from './views/KanbanView.js';
 import { ListView } from './views/ListView.js';
 import { registerDefaultWidgets } from './views/widgets.js';
 export { ApiError, createKoshApi, NetworkError, } from './api.js';
-export { KoshApp } from './app.js';
+export { KoshApp, useLanguage } from './app.js';
 export { AppIcon } from './components/AppIcon.js';
 export * from './components/primitives.js';
 export { KoshProvider, useKosh, useTheme, } from './context.js';
 export { DesignProvider, useDesign, } from './design.js';
 export { addMessages, createI18n, directionOf, NAMESPACE } from './i18n/index.js';
 export { LANGUAGES } from './i18n/messages.js';
+export { accentVariables, hexToOklch } from './lib/accent.js';
 export { cn } from './lib/cn.js';
 export { bcp47, createFormatter } from './lib/format.js';
 export { useLiveModel, useLiveRecord } from './live.js';

package/dist/ui/lib/accent.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A company's brand colour as the back-office's accent (RFC 0018 §4.5). Only its hue and chroma are used: the
+ * themes fix the accent's lightness (light: dark enough for white text; dark: light enough for dark text), so any
+ * brand colour keeps text on buttons and links readable (WCAG AA) in both.
+ */
+/** OKLCH of an sRGB hex colour (`#4f46e5` → `{ l, c, h }`), or null when it is not one. */
+export declare function hexToOklch(hex: string): {
+    l: number;
+    c: number;
+    h: number;
+} | null;
+/** The CSS variables a brand colour sets (`--accent-h`, `--accent-c`), or none for the default accent. */
+export declare function accentVariables(hex: string | null | undefined): Record<string, string>;

package/dist/ui/lib/accent.js

@@ -0,0 +1,36 @@
+/**
+ * A company's brand colour as the back-office's accent (RFC 0018 §4.5). Only its hue and chroma are used: the
+ * themes fix the accent's lightness (light: dark enough for white text; dark: light enough for dark text), so any
+ * brand colour keeps text on buttons and links readable (WCAG AA) in both.
+ */
+/** OKLCH of an sRGB hex colour (`#4f46e5` → `{ l, c, h }`), or null when it is not one. */
+export function hexToOklch(hex) {
+    const m = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex);
+    if (m === null)
+        return null;
+    const linear = (v) => {
+        const x = Number.parseInt(v, 16) / 255;
+        return x <= 0.04045 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;
+    };
+    const [r, g, b] = [linear(m[1]), linear(m[2]), linear(m[3])];
+    const l_ = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+    const m_ = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+    const s_ = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+    const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
+    const A = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+    const B = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+    const c = Math.sqrt(A * A + B * B);
+    const h = (Math.atan2(B, A) * 180) / Math.PI;
+    return { l: L, c, h: h < 0 ? h + 360 : h };
+}
+/** The CSS variables a brand colour sets (`--accent-h`, `--accent-c`), or none for the default accent. */
+export function accentVariables(hex) {
+    const color = hex === null || hex === undefined ? null : hexToOklch(hex);
+    if (color === null)
+        return {};
+    // Chroma is capped (very saturated colours glare as large surfaces); greys stay grey.
+    return {
+        '--accent-h': color.h.toFixed(1),
+        '--accent-c': Math.min(color.c, 0.2).toFixed(3),
+    };
+}

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/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,84 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The Workspace sidebar (RFC 0018 §4.1): the company at the top, search, Home, then the user's apps — each a button
+ * that opens its sections (the current app opens itself; one at a time) — and the user at the bottom. 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 { ChevronDown, House, PanelLeftClose, PanelLeftOpen, Search, X } from 'lucide-react';
+import { Dialog } from 'radix-ui';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AppIcon } from '../components/AppIcon.js';
+import { Button } 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: "ms-4 grid gap-0.5 border-s ps-2 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 [open, setOpen] = useState(current);
+    useEffect(() => setOpen(current), [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: _jsx("ul", { className: "grid gap-0.5", children: apps.map((a) => {
+                        const expanded = !collapsed && open === a.code;
+                        return (_jsxs("li", { children: [_jsxs("button", { type: "button", "aria-expanded": collapsed ? undefined : expanded, "aria-label": t('shell.appNamed', { app: a.label }), title: collapsed ? a.label : undefined, className: cn(item, current === a.code && 'font-medium', collapsed && 'justify-center'), onClick: () => {
+                                        if (collapsed || a.code !== current) {
+                                            setOpen(a.code);
+                                            void navigate({ to: '/$app', params: { app: a.code } });
+                                            onNavigate?.();
+                                        }
+                                        else
+                                            setOpen(expanded ? undefined : a.code);
+                                    }, children: [_jsx(AppIcon, { name: a.icon ?? a.code, className: "size-6 rounded-md [&_svg]:size-3.5" }), collapsed ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1 truncate text-start", children: a.label }), _jsx(ChevronDown, { className: cn('size-3.5 text-muted-foreground transition-transform', !expanded && '-rotate-90 rtl:rotate-90'), "aria-hidden": true })] }))] }), expanded ? (_jsx(AppSections, { api: api, app: a.code, company: company, onNavigate: onNavigate })) : null] }, a.code));
+                    }) }) }), _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']],