shutro-erp 0.3.3 → 0.3.4

package/dist/settings/web/messages.js

@@ -1,6 +1,17 @@
 /** Messages of the Settings app (namespace `settings`). */
 export const messages = {
     en: {
+        connected: {
+            title: 'Connected apps',
+            intro: 'Apps you allowed to act for you. They can never do more than you may; remove one and its access ends at once.',
+            none: 'You have not allowed any app.',
+            since: 'allowed {{when}}',
+            lastUsed: 'last used {{when}}',
+            neverUsed: 'not used yet',
+            revoke: 'Remove access',
+            revokeApp: 'Remove the access of {{app}}',
+            homepage: 'About {{app}}',
+        },
         roles: {
             title: 'Roles & permissions',
             intro: 'What each role lets people open and do. Changes are previewed before they are saved.',
@@ -133,6 +144,10 @@ export const messages = {
                     description: 'Every company, its currency and people; switch between them or add one.',
                     keywords: 'companies multi-company branches new company switch',
                 },
+                'settings.action_people': {
+                    description: 'Invite people, give them roles per app and company, deactivate them, reset their two-factor sign-in.',
+                    keywords: 'people users employees invite invitation roles deactivate 2fa reset',
+                },
                 'settings.action_roles': {
                     description: 'What each role opens and allows, rights per model, record rules; previewed before saving.',
                     keywords: 'roles permissions access rights groups record rules field security acl',
@@ -184,6 +199,7 @@ export const messages = {
             turnOff: 'Turn off two-factor sign-in',
             password: 'Password',
             recoveryCodes: 'Your recovery codes: each signs you in once if you lose your phone. Keep them somewhere safe; they are shown only now.',
+            photo: 'Photo',
             sessions: 'Signed-in devices',
             sessionsHint: 'Where you are signed in now. Sign out a device you do not recognise.',
             thisDevice: 'This device',
@@ -368,6 +384,17 @@ export const messages = {
         version: 'Version {{version}}',
     },
     bn: {
+        connected: {
+            title: 'সংযুক্ত অ্যাপস',
+            intro: 'যে অ্যাপগুলোকে আপনি আপনার হয়ে কাজ করতে দিয়েছেন। সরিয়ে দিলে সাথে সাথে প্রবেশাধিকার শেষ।',
+            none: 'আপনি কোনো অ্যাপকে অনুমতি দেননি।',
+            since: '{{when}} থেকে অনুমতি',
+            lastUsed: 'সর্বশেষ ব্যবহার {{when}}',
+            neverUsed: 'এখনো ব্যবহার হয়নি',
+            revoke: 'প্রবেশাধিকার সরান',
+            revokeApp: '{{app}}-এর প্রবেশাধিকার সরান',
+            homepage: '{{app}} সম্পর্কে',
+        },
         roles: {
             title: 'রোল ও অনুমতি',
             intro: 'প্রতিটি রোল মানুষকে কী খুলতে ও করতে দেয়। সংরক্ষণের আগে পরিবর্তন দেখানো হয়।',
@@ -555,6 +582,7 @@ export const messages = {
             turnOff: 'দুই-ধাপের সাইন ইন বন্ধ করুন',
             password: 'পাসওয়ার্ড',
             recoveryCodes: 'আপনার রিকভারি কোড: ফোন হারালে প্রতিটি একবার সাইন ইন করায়। নিরাপদে রাখুন; শুধু এখনই দেখানো হচ্ছে।',
+            photo: 'ছবি',
             sessions: 'সাইন ইন করা ডিভাইস',
             sessionsHint: 'এখন যেখানে আপনি সাইন ইন আছেন। অচেনা ডিভাইস সাইন আউট করুন।',
             thisDevice: 'এই ডিভাইস',

package/dist/ui/api.d.ts

@@ -74,6 +74,10 @@ export interface CurrentUser {
     readonly administratorNeedsSecondFactor: boolean;
     /** The policy requires two-factor sign-in of everyone and it is not on (RFC 0019 §3.5); older servers send none. */
     readonly twoFactorSetupRequired?: boolean;
+    /** The user's photo version, or null (older servers send none). */
+    readonly avatar?: string | null;
+    /** Each company's logo version, when it has one. */
+    readonly logos?: Readonly<Record<string, string>>;
 }
 export interface AppEntry {
     readonly code: string;

package/dist/ui/app.js

@@ -12,11 +12,12 @@ 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, ChevronRight, ChevronsUpDown, Columns3, Grid2x2, Languages, LayoutDashboard, List, LogOut, Map as MapIcon, Monitor, Moon, Network, PanelLeft, Plus, Search, Sheet, Sun, Table2, } from 'lucide-react';
+import { CalendarDays, ChartColumn, ChartGantt, ChevronDown, ChevronRight, ChevronsUpDown, Columns3, Grid2x2, House, Languages, LayoutDashboard, List, LogOut, Map as MapIcon, Monitor, Moon, Network, PanelLeft, Plus, Search, Sheet, Sun, Table2, } from 'lucide-react';
 import { Direction } from 'radix-ui';
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
 import { I18nextProvider, useTranslation } from 'react-i18next';
 import { ApiError } from './api.js';
+import { Avatar, imageUrl } from './components/Avatar.js';
 import { Alert, Button, Menu, MenuCheckboxItem, MenuContent, MenuItem, MenuLabel, MenuSeparator, MenuTrigger, Spinner, } from './components/primitives.js';
 import { KoshProvider, useKosh } from './context.js';
 import { DesignProvider } from './design.js';
@@ -29,8 +30,10 @@ import { setPrefill, takePrefill } from './prefill.js';
 import { onAppUpdate, registerServiceWorker } from './pwa/register.js';
 import { createRealtimeClient } from './realtime.js';
 import { SearchBar } from './search/SearchBar.js';
+import { ViewTabs } from './search/ViewTabs.js';
 import { Activate } from './shell/Activate.js';
 import { CommandPalette, PaletteContext } from './shell/CommandPalette.js';
+import { Consent } from './shell/Consent.js';
 import { Home } from './shell/Home.js';
 import { Login } from './shell/Login.js';
 import { OfflineMenu } from './shell/OfflineMenu.js';
@@ -142,7 +145,8 @@ function CompanyBlock({ me, company, collapsed, onChange, }) {
         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() }));
+    // The company's logo, else its initial.
+    const badge = (_jsx(Avatar, { name: name.slice(0, 1), src: imageUrl('company', company, me.logos?.[String(company)]), shape: "square", className: "font-semibold" }));
     if (collapsed)
         return _jsx("span", { title: name, children: badge });
     if (me.companies.length < 2)
@@ -153,19 +157,16 @@ function CompanyBlock({ me, company, collapsed, onChange, }) {
                                 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)))] })] }));
 }
-/** The user at the bottom of the sidebar: their pages and signing out. */
-function UserMenu({ user, collapsed, }) {
+function UserMenu({ user, collapsed, corner, }) {
     const { t } = useTranslation();
-    const { api, registry, persister } = useServices();
+    const { api, registry, persister, lang, setLang } = useServices();
+    const { theme, setTheme, density, setDensity } = useKosh();
     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 () => {
+    return (_jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": user.name, "data-kosh-account": corner === undefined ? 'sidebar' : 'corner', className: cn('flex min-w-0 items-center gap-2 rounded-md px-1.5 py-1.5 text-sm hover:bg-muted', corner === undefined ? 'w-full' : 'rounded-full border bg-surface pe-3', collapsed && 'justify-center'), children: [_jsx(Avatar, { name: user.name, src: imageUrl('user', user.id, user.avatar) }), collapsed ? null : _jsx("span", { className: "truncate", children: user.name }), corner === undefined ? null : (_jsx(ChevronDown, { className: "size-3.5 text-muted-foreground", "aria-hidden": true }))] }) }), _jsxs(MenuContent, { align: corner === undefined ? 'start' : 'end', side: corner === undefined ? 'top' : 'bottom', className: corner === undefined ? undefined : 'max-h-[80vh] w-64 overflow-y-auto', children: [_jsxs(MenuLabel, { children: [user.name, _jsx("span", { className: "block text-xs font-normal text-muted-foreground", children: user.login })] }), registry.userPages().map((p) => (_jsx(MenuItem, { onSelect: () => void navigate({ to: '/me/$page', params: { page: p.name } }), children: t(p.label) }, p.name))), corner === undefined ? null : (_jsxs(_Fragment, { children: [corner.companies.length < 2 ? null : (_jsxs(_Fragment, { children: [_jsx(MenuSeparator, {}), _jsx(MenuLabel, { children: t('shell.company') }), corner.companies.map((c) => (_jsx(MenuCheckboxItem, { checked: c.id === corner.current, onCheckedChange: () => {
+                                            if (c.id !== corner.current)
+                                                corner.onSwitch(c.id);
+                                        }, children: c.name }, c.id)))] })), _jsx(MenuSeparator, {}), _jsx(MenuLabel, { children: t('shell.language') }), LANGUAGES.map((l) => (_jsx(MenuCheckboxItem, { checked: lang === l.code, onCheckedChange: () => setLang(l.code), children: _jsx("span", { lang: l.code.replace('_', '-'), children: l.name }) }, l.code))), _jsx(MenuSeparator, {}), _jsx(MenuLabel, { children: t('shell.theme') }), ['light', 'dark', 'system'].map((choice) => (_jsx(MenuCheckboxItem, { checked: theme === choice, onCheckedChange: () => setTheme(choice), children: t(`shell.${choice}`) }, choice))), _jsx(MenuLabel, { children: t('shell.density') }), ['comfortable', 'compact'].map((choice) => (_jsx(MenuCheckboxItem, { checked: density === choice, onCheckedChange: () => setDensity(choice), children: t(`views.${choice}`) }, choice)))] })), _jsx(MenuSeparator, {}), _jsxs(MenuItem, { onSelect: async () => {
                             await api.logout();
                             queryClient.clear();
                             await dropOfflineCache(persister);
@@ -247,11 +248,21 @@ function Shell() {
             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
+    return (_jsx(KoshProvider, { api: api, registry: registry, uid: user.id, companyId: current, lang: lang, tz: Intl.DateTimeFormat().resolvedOptions().timeZone, grouping: user.groupings?.[String(current)] ?? 'international', accent: user.accents?.[String(current)] ?? null, ...(realtime === undefined ? {} : { realtime }), ...(offline === undefined ? {} : { offline }), switchCompany: switchCompany, children: _jsx(ToastProvider, { children: _jsxs(DesignProvider, { children: [_jsx(OfflineAgent, { uid: user.id }), _jsxs(PaletteContext.Provider, { value: openPalette, children: [_jsx("a", { href: "#content", className: "sr-only focus:not-sr-only focus:absolute focus:start-2 focus:top-2 focus:z-50 focus:rounded focus:bg-surface focus:px-3 focus:py-2", children: t('shell.skip') }), params.app === undefined ? (_jsxs("div", { className: "flex min-h-screen flex-col", children: [_jsxs("div", { className: "flex h-14 items-center gap-2 px-4 lg:px-6", children: [userPage === undefined ? null : (_jsxs(Link, { to: "/", className: "flex items-center gap-1.5 rounded-md px-2 py-1 text-sm text-muted-foreground hover:bg-muted hover:text-foreground", children: [_jsx(House, { className: "size-4", "aria-hidden": true }), t('shell.home')] })), _jsx("span", { className: "flex-1" }), registry
+                                                .headerItems()
+                                                .filter((item) => item.home)
+                                                .map(({ name, component: Item }) => (_jsx(Item, { api: api }, name))), _jsx(UserMenu, { user: user, collapsed: false, corner: {
+                                                    companies: (companyNames.data ?? []).map((c) => ({
+                                                        id: c.id,
+                                                        name: c.displayName,
+                                                    })),
+                                                    current,
+                                                    onSwitch: switchCompany,
+                                                } })] }), user.administratorNeedsSecondFactor ? (_jsx("div", { className: "px-4 pt-3", children: _jsx(Alert, { tone: "info", children: t('auth.adminNeeds2fa') }) })) : null, _jsx("main", { id: "content", className: "mx-auto w-full max-w-[100rem] flex-1 p-4 lg:p-6", children: _jsx(Outlet, {}) })] })) : (_jsxs("div", { className: "flex min-h-screen", children: [_jsx("aside", { "aria-label": t('shell.sidebar'), className: cn('sticky top-0 hidden h-screen shrink-0 border-e bg-surface transition-[width] lg:block', collapsed ? 'w-14' : 'w-60'), children: sidebar(false) }), _jsx(SidebarDrawer, { open: drawer, onOpenChange: setDrawer, children: sidebar(true) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("header", { className: "sticky top-0 z-30 border-b bg-surface", children: _jsxs("div", { className: "flex h-12 items-center gap-2 px-3 lg:px-4", children: [_jsx(Button, { variant: "ghost", size: "icon", className: "lg:hidden", "aria-label": t('shell.openMenu'), onClick: () => setDrawer(true), children: _jsx(PanelLeft, { className: "rtl:rotate-180", "aria-hidden": true }) }), _jsx("nav", { "aria-label": t('shell.location'), className: "flex min-w-0 flex-1 items-center gap-1.5 text-sm", children: app === undefined ? (_jsx("span", { className: "font-semibold", children: userPage !== undefined
                                                                     ? t(userPage.label)
                                                                     : params.app === undefined
                                                                         ? t('shell.home')
-                                                                        : t('app.name') })) : (_jsxs(_Fragment, { children: [_jsx(Link, { to: "/$app", params: { app: app.code }, className: "font-semibold hover:underline", children: app.label }), section === undefined ? null : (_jsxs(_Fragment, { children: [_jsx(ChevronRight, { className: "size-3.5 text-muted-foreground rtl:rotate-180", "aria-hidden": true }), _jsx(Link, { to: "/$app/a/$action", params: { app: app.code, action: params.action ?? '' }, className: "truncate text-muted-foreground hover:text-foreground hover:underline", children: section })] }))] })) }), _jsx(Button, { variant: "ghost", size: "icon", className: "lg:hidden", "aria-label": t('palette.button'), onClick: () => setPalette(true), children: _jsx(Search, { "aria-hidden": true }) }), _jsx(OfflineMenu, {}), registry.headerItems().map(({ name, component: Item }) => (_jsx(Item, { api: api }, name))), _jsx(LanguageMenu, {}), _jsx(ThemeMenu, {})] }) }), user.administratorNeedsSecondFactor ? (_jsx("div", { className: "px-4 pt-3", children: _jsx(Alert, { tone: "info", children: t('auth.adminNeeds2fa') }) })) : null, _jsx("main", { id: "content", className: "mx-auto w-full max-w-[100rem] flex-1 p-4 lg:p-6", children: _jsx(Outlet, {}) })] })] }), _jsx(CommandPalette, { open: palette, onOpenChange: setPalette, api: api, onShortcuts: openHelp, companies: (companyNames.data ?? [])
+                                                                        : 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 })] })] }) }) }));
 }
@@ -390,7 +401,7 @@ function WindowActionPage() {
                                         params: { app, action: actionId },
                                         search: { ...search, view: v },
                                     }), children: _jsx(Icon, { "aria-hidden": true }) }, v));
-                            })] })) : null] }), _jsx(SearchBar, { model: model, viewType: type, spec: spec.data, state: state, onChange: setState, labels: labels }), Renderer === undefined ? (_jsx(Alert, { children: `No renderer for '${served.data.view.component ?? type}'.` })) : (_jsx(Renderer, { served: served.data, where: compiled.where, groupBy: compiled.groupBy, order: compiled.order, onOrder: (order) => setState({ ...state, order }), onOpen: open, onDrill: drill }))] }));
+                            })] })) : null] }), _jsx(ViewTabs, { model: model, viewType: type, state: state, onChange: setState }), _jsx(SearchBar, { model: model, viewType: type, spec: spec.data, state: state, onChange: setState, labels: labels }), Renderer === undefined ? (_jsx(Alert, { children: `No renderer for '${served.data.view.component ?? type}'.` })) : (_jsx(Renderer, { served: served.data, where: compiled.where, groupBy: compiled.groupBy, order: compiled.order, onOrder: (order) => setState({ ...state, order }), onOpen: open, onDrill: drill }))] }));
 }
 /** What the record page needs from the shell: the API, the user, the apps (for breadcrumbs). */
 function useRecordContext() {
@@ -481,9 +492,24 @@ function ActivatePage() {
     const navigate = useNavigate();
     return _jsx(Activate, { api: useServices().api, onSignedIn: () => void navigate({ to: '/' }) });
 }
+/** Where to go after signing in: `?next=` when it is a path of this site (never another site), else home. */
+function nextPath() {
+    const next = new URLSearchParams(window.location.search).get('next') ?? '';
+    return next.startsWith('/') && !next.startsWith('//') && !next.startsWith('/\\') ? next : '/';
+}
 function LoginPage() {
     const navigate = useNavigate();
-    return _jsx(Login, { api: useServices().api, onSignedIn: () => void navigate({ to: '/' }) });
+    return (_jsx(Login, { api: useServices().api, onSignedIn: () => {
+            const next = nextPath();
+            // A page outside the router's own paths with its query (the OAuth consent) loads as an address.
+            if (next.startsWith('/oauth/'))
+                window.location.assign(next);
+            else
+                void navigate({ to: next });
+        } }));
+}
+function ConsentPage() {
+    return _jsx(Consent, { api: useServices().api });
 }
 // ------------------------------------------------------------------------------------------------- router
 const rootRoute = createRootRoute({ component: Outlet });
@@ -497,6 +523,12 @@ const activateRoute = createRoute({
     path: '/activate',
     component: ActivatePage,
 });
+/** The OAuth consent page (RFC 0017 §5.2): outside the shell, like sign-in. */
+const consentRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/oauth/authorize',
+    component: ConsentPage,
+});
 const shellRoute = createRoute({ getParentRoute: () => rootRoute, id: 'shell', component: Shell });
 const indexRoute = createRoute({
     getParentRoute: () => shellRoute,
@@ -546,6 +578,7 @@ const userPageRoute = createRoute({
 const routeTree = rootRoute.addChildren([
     loginRoute,
     activateRoute,
+    consentRoute,
     shellRoute.addChildren([
         indexRoute,
         openRoute,

package/dist/ui/components/AppIcon.js

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

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

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

package/dist/ui/components/Avatar.js

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

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

@@ -113,6 +113,7 @@ export declare const en: {
         compact: string;
         comfortable: string;
         emptyTitle: string;
+        emptyNamed: string;
         emptyHint: string;
         emptyFiltered: string;
         moved: string;
@@ -234,11 +235,35 @@ export declare const en: {
         done: string;
         recent: string;
         apps: string;
+        today: string;
+        approve: string;
+        review: string;
+        dueToday: string;
+        mentioned: string;
+        saved: string;
     };
     toast: {
         region: string;
         close: string;
     };
+    image: {
+        choosePhoto: string;
+        chooseLogo: string;
+        remove: string;
+        hint: string;
+        unreadable: string;
+    };
+    oauth: {
+        title: string;
+        as: string;
+        may: string;
+        limits: string;
+        back: string;
+        homepage: string;
+        already: string;
+        allow: string;
+        cancel: string;
+    };
     palette: {
         switchCompany: string;
         profile: string;
@@ -292,6 +317,11 @@ export declare const en: {
         custom: string;
         remove: string;
         or: string;
+        savedViews: string;
+        allRecords: string;
+        moreViews_one: string;
+        moreViews_other: string;
+        shared: string;
     };
 };
 type Messages = typeof en;

package/dist/ui/i18n/messages.js

@@ -110,6 +110,7 @@ export const en = {
         compact: 'Compact',
         comfortable: 'Comfortable',
         emptyTitle: 'Nothing here yet',
+        emptyNamed: 'No {{name}} yet',
         emptyHint: 'Records matching the current search will appear here.',
         emptyFiltered: 'No record matches the current search.',
         moved: '{{name}} moved to {{column}}',
@@ -231,8 +232,32 @@ export const en = {
         done: 'Mark done',
         recent: 'Recently opened',
         apps: 'Apps',
+        today: 'Today, {{date}}',
+        approve: 'Approve {{record}}',
+        review: 'Review',
+        dueToday: 'due today',
+        mentioned: '{{actor}} mentioned you on {{record}}',
+        saved: 'Your saved views',
     },
     toast: { region: 'Notifications', close: 'Close' },
+    image: {
+        choosePhoto: 'Change photo',
+        chooseLogo: 'Change logo',
+        remove: 'Remove',
+        hint: 'PNG, JPEG or WebP. It is made small (256 px) before it is sent.',
+        unreadable: 'This file is not an image the browser can read.',
+    },
+    oauth: {
+        title: '{{app}} wants to use your account',
+        as: 'Signed in as {{name}} ({{login}}).',
+        may: 'It will be able to:',
+        limits: 'Never more than you may do yourself. You can take this back at any time in Connected apps.',
+        back: 'You will go back to {{host}}.',
+        homepage: 'About the app',
+        already: 'You allowed this before.',
+        allow: 'Allow',
+        cancel: 'Cancel',
+    },
     palette: {
         switchCompany: 'Switch to {{name}}',
         profile: 'Your profile',
@@ -281,6 +306,11 @@ export const en = {
         custom: 'Custom filter',
         remove: 'Remove {{facet}}',
         or: 'or',
+        savedViews: 'Saved views',
+        allRecords: 'All',
+        moreViews_one: '{{count}} more',
+        moreViews_other: '{{count}} more',
+        shared: 'Shared',
     },
 };
 export const bn = {
@@ -391,6 +421,7 @@ export const bn = {
         compact: 'সংক্ষিপ্ত',
         comfortable: 'স্বাভাবিক',
         emptyTitle: 'এখানে এখনো কিছু নেই',
+        emptyNamed: 'এখনো কোনো {{name}} নেই',
         emptyHint: 'বর্তমান খোঁজের সাথে মেলা রেকর্ড এখানে দেখা যাবে।',
         emptyFiltered: 'বর্তমান খোঁজের সাথে কোনো রেকর্ড মেলেনি।',
         moved: '{{name}} {{column}}-এ সরানো হয়েছে',
@@ -509,8 +540,32 @@ export const bn = {
         done: 'সম্পন্ন',
         recent: 'সম্প্রতি খোলা',
         apps: 'অ্যাপস',
+        today: 'আজ, {{date}}',
+        approve: '{{record}} অনুমোদন করুন',
+        review: 'দেখুন',
+        dueToday: 'আজকের',
+        mentioned: '{{actor}} আপনাকে {{record}}-এ উল্লেখ করেছেন',
+        saved: 'আপনার সংরক্ষিত ভিউ',
     },
     toast: { region: 'বিজ্ঞপ্তি', close: 'বন্ধ করুন' },
+    image: {
+        choosePhoto: 'ছবি বদলান',
+        chooseLogo: 'লোগো বদলান',
+        remove: 'সরান',
+        hint: 'PNG, JPEG বা WebP। পাঠানোর আগে ছোট (২৫৬ px) করা হয়।',
+        unreadable: 'এই ফাইলটি ব্রাউজার পড়তে পারে এমন ছবি নয়।',
+    },
+    oauth: {
+        title: '{{app}} আপনার অ্যাকাউন্ট ব্যবহার করতে চায়',
+        as: '{{name}} ({{login}}) হিসেবে সাইন ইন করা।',
+        may: 'এটি যা করতে পারবে:',
+        limits: 'আপনি নিজে যা পারেন তার বেশি কখনো নয়। যেকোনো সময় সংযুক্ত অ্যাপস থেকে ফিরিয়ে নিতে পারেন।',
+        back: 'আপনি {{host}}-এ ফিরে যাবেন।',
+        homepage: 'অ্যাপ সম্পর্কে',
+        already: 'আপনি আগে এটি অনুমতি দিয়েছিলেন।',
+        allow: 'অনুমতি দিন',
+        cancel: 'বাতিল',
+    },
     palette: {
         switchCompany: '{{name}}-এ যান',
         profile: 'আপনার প্রোফাইল',
@@ -559,6 +614,11 @@ export const bn = {
         custom: 'নিজস্ব ফিল্টার',
         remove: '{{facet}} সরান',
         or: 'অথবা',
+        savedViews: 'সংরক্ষিত ভিউ',
+        allRecords: 'সব',
+        moreViews_one: 'আরও {{count}}টি',
+        moreViews_other: 'আরও {{count}}টি',
+        shared: 'শেয়ার করা',
     },
 };
 export const ar = {

package/dist/ui/index.d.ts

@@ -10,6 +10,7 @@ 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, useLanguage } from './app.js';
 export { AppIcon } from './components/AppIcon.js';
+export * from './components/Avatar.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';

package/dist/ui/index.js

@@ -14,6 +14,7 @@ import { registerDefaultWidgets } from './views/widgets.js';
 export { ApiError, createKoshApi, NetworkError, } from './api.js';
 export { KoshApp, useLanguage } from './app.js';
 export { AppIcon } from './components/AppIcon.js';
+export * from './components/Avatar.js';
 export * from './components/primitives.js';
 export { KoshProvider, useKosh, useTheme, } from './context.js';
 export { DesignProvider, useDesign, } from './design.js';

package/dist/ui/registry.d.ts

@@ -124,9 +124,13 @@ export declare class Registry {
     /** The widget for a node: its `widget`, else the field kind, else plain text. */
     widget(node: FieldNode, field: ViewField): ComponentType<WidgetProps>;
     component(name: string): ComponentType<NodeComponentProps> | undefined;
-    /** An item of the shell's header, before the language and theme menus (`notify.Bell`). */
+    /**
+     * An item of the shell's header, before the language and theme menus (`notify.Bell`). With `home`, it is also in
+     * the home page's corner, next to the account menu (notifications, messages).
+     */
     registerHeaderItem(name: string, component: ComponentType<HeaderItemProps>, options?: {
         readonly replace?: boolean;
+        readonly home?: boolean;
     }): this;
     /**
      * A personal page every signed-in user reaches from the user menu, outside any app (`settings.ApiKeys`):
@@ -147,6 +151,8 @@ export declare class Registry {
     headerItems(): readonly {
         readonly name: string;
         readonly component: ComponentType<HeaderItemProps>;
+        /** Also on the home page. */
+        readonly home: boolean;
     }[];
     /** A control next to every search box (the AI assistant's "Ask"). */
     registerSearchAssist(name: string, component: ComponentType<SearchAssistProps>, options?: {

package/dist/ui/registry.js

@@ -55,8 +55,16 @@ export class Registry {
     component(name) {
         return this.#entries.component.get(name);
     }
-    /** An item of the shell's header, before the language and theme menus (`notify.Bell`). */
+    #homeItems = new Set();
+    /**
+     * An item of the shell's header, before the language and theme menus (`notify.Bell`). With `home`, it is also in
+     * the home page's corner, next to the account menu (notifications, messages).
+     */
     registerHeaderItem(name, component, options = {}) {
+        if (options.home === true)
+            this.#homeItems.add(name);
+        else
+            this.#homeItems.delete(name);
         return this.#add('header', name, component, options.replace === true);
     }
     #userPageLabels = new Map();
@@ -83,6 +91,7 @@ export class Registry {
         return [...this.#entries.header].map(([name, component]) => ({
             name,
             component: component,
+            home: this.#homeItems.has(name),
         }));
     }
     /** A control next to every search box (the AI assistant's "Ask"). */

package/dist/ui/search/ViewTabs.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 { type SearchState } from '../../search/index.js';
+import type { ReactElement } from 'react';
+export declare function ViewTabs({ model, viewType, state, onChange, }: {
+    readonly model: string;
+    readonly viewType: string;
+    readonly state: SearchState;
+    readonly onChange: (state: SearchState) => void;
+}): ReactElement | null;