shutro-erp 0.3.3 → 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/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.js

@@ -1,18 +1,18 @@
 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.
+ * 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 { ChevronDown, House, PanelLeftClose, PanelLeftOpen, Search, X } from 'lucide-react';
+import { ChevronsUpDown, House, PanelLeftClose, PanelLeftOpen, Search, X } from 'lucide-react';
 import { Dialog } from 'radix-ui';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AppIcon } from '../components/AppIcon.js';
-import { Button } from '../components/primitives.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. */
@@ -56,26 +56,19 @@ function AppSections({ api, app, company, onNavigate, }) {
         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))) }));
+    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 [open, setOpen] = useState(current);
-    useEffect(() => setOpen(current), [current]);
+    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: _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 })) }))] })] }));
+    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, }) {

package/dist/ui/views/ListView.js

@@ -27,6 +27,11 @@ import { PrefetchedNames, useRowNames } from './widgets.js';
 const features = tableFeatures({});
 const helper = createColumnHelper();
 const HEIGHTS = { comfortable: 40, compact: 32 };
+/** The record's page in a new tab: the list's address with the record's id (`/<app>/a/<action>/<id>`). */
+function openInNewTab(id) {
+    const path = window.location.pathname.replace(/\/$/, '');
+    window.open(`${path}/${id}`, '_blank', 'noopener');
+}
 /** Requests a bulk action sends at once. */
 const PARALLEL = 6;
 /** How long a bulk delete waits for Undo before it runs. */
@@ -188,7 +193,6 @@ function Rows({ props, where, columns, fields, offset, limit, height, selection,
                 offset,
                 count: true,
             });
-            onCount?.(result.count ?? result.items.length);
             rememberList(model, result.items.map((r) => r.id), offset, result.count ?? result.items.length);
             return result;
         },
@@ -199,6 +203,11 @@ function Rows({ props, where, columns, fields, offset, limit, height, selection,
         if (query.data !== undefined)
             onRows?.(query.data.items);
     }, [query.data, onRows]);
+    // From the data, not the fetch: a search answered from the cache (back to All) has its count too.
+    useEffect(() => {
+        if (query.data !== undefined)
+            onCount?.(query.data.count ?? query.data.items.length);
+    }, [query.data, onCount]);
     const names = useRowNames(items, Object.values(fields));
     const tableColumns = useMemo(() => helper.columns(columns.map((node) => helper.accessor((row) => row[node.field], {
         id: node.id,
@@ -488,7 +497,11 @@ function Rows({ props, where, columns, fields, offset, limit, height, selection,
     if (query.isError)
         return (_jsx(Alert, { action: _jsx(Button, { size: "sm", onClick: () => void query.refetch(), children: t('app.retry') }), children: query.error instanceof ApiError ? query.error.message : t('app.error') }));
     if (items.length === 0)
-        return (_jsx(EmptyState, { icon: _jsx(Inbox, { "aria-hidden": true }), title: filtered === true ? t('views.emptyFiltered') : t('views.emptyTitle'), ...(filtered === true ? {} : { description: t('views.emptyHint') }), ...(props.served.operations.create && offset === 0
+        return (_jsx(EmptyState, { icon: _jsx(Inbox, { "aria-hidden": true }), title: filtered === true
+                ? t('views.emptyFiltered')
+                : props.served.view.label === undefined
+                    ? t('views.emptyTitle')
+                    : t('views.emptyNamed', { name: props.served.view.label.toLocaleLowerCase() }), ...(filtered === true ? {} : { description: t('views.emptyHint') }), ...(props.served.operations.create && offset === 0
                 ? {
                     action: (_jsxs(Button, { variant: "primary", size: "sm", onClick: () => props.onOpen('new'), children: [_jsx(Plus, { "aria-hidden": true }), t('views.createFirst')] })),
                 }
@@ -525,8 +538,20 @@ function Rows({ props, where, columns, fields, offset, limit, height, selection,
                                     return null;
                                 const id = row.original.id;
                                 const isSelected = selection?.selected.has(id) === true;
-                                return (_jsxs("tr", { tabIndex: 0, "aria-selected": selection === undefined ? undefined : isSelected, style: { height }, className: cn('cursor-pointer border-b hover:bg-muted/60 focus-visible:bg-muted', isSelected && 'bg-accent/60 hover:bg-accent/70'), onClick: () => props.onOpen(id), onKeyDown: (e) => {
-                                        if (e.key === 'Enter')
+                                return (_jsxs("tr", { tabIndex: 0, "aria-selected": selection === undefined ? undefined : isSelected, style: { height }, className: cn('cursor-pointer border-b hover:bg-muted/60 focus-visible:bg-muted', isSelected && 'bg-accent/60 hover:bg-accent/70'), 
+                                    // Ctrl / Cmd + click or the middle button: the record in a new tab, the list stays.
+                                    onClick: (e) => {
+                                        if (e.ctrlKey || e.metaKey)
+                                            openInNewTab(id);
+                                        else
+                                            props.onOpen(id);
+                                    }, onAuxClick: (e) => {
+                                        if (e.button === 1)
+                                            openInNewTab(id);
+                                    }, onKeyDown: (e) => {
+                                        if (e.key === 'Enter' && (e.ctrlKey || e.metaKey))
+                                            openInNewTab(id);
+                                        else if (e.key === 'Enter')
                                             props.onOpen(id);
                                         // Space on the row itself selects it (the checkbox handles its own keys).
                                         if (e.key === ' ' && selection !== undefined && e.target === e.currentTarget) {
@@ -814,24 +839,26 @@ export function ListView(props) {
             tone: 'danger',
         }),
     });
-    const toolbar = ids.length > 0 ? (_jsxs("div", { role: "toolbar", "aria-label": t('views.selected', { count: ids.length }), className: "flex flex-wrap items-center gap-2 border-b bg-accent/40 px-3 py-2 text-sm", children: [_jsx("span", { className: "font-medium", children: t('views.selected', { count: ids.length }) }), _jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('views.clearSelection'), onClick: () => setSelected(new Set()), children: _jsx(X, { "aria-hidden": true }) }), _jsx("span", { className: "flex-1" }), transitions.map((tr) => (_jsx(Button, { size: "sm", busy: transition.isPending && transition.variables?.name === tr.name, onClick: () => transition.mutate({ name: tr.name, what: ids }), children: tr.name.charAt(0).toUpperCase() + tr.name.slice(1).replace(/_/g, ' ') }, tr.name))), archivable ? (_jsxs(Button, { size: "sm", busy: archive.isPending, onClick: () => archive.mutate(ids), children: [_jsx(Archive, { "aria-hidden": true }), t('views.archive')] })) : null, served.operations.unlink ? (_jsxs(Button, { size: "sm", variant: "danger", onClick: () => setConfirmingDelete(true), children: [_jsx(Trash2, { "aria-hidden": true }), t('views.delete')] })) : null, canExport ? (_jsxs(Button, { size: "sm", busy: exportAs.isPending, onClick: () => exportAs.mutate('csv'), children: [_jsx(Download, { "aria-hidden": true }), t('views.export')] })) : null] })) : (_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b px-3 py-1.5 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: count === null ? (_jsx(Skeleton, { className: "inline-block h-4 w-20" })) : (t('views.records', { count })) }), _jsx("span", { className: "flex-1" }), design.active ? (_jsxs(Button, { size: "sm", variant: "ghost", className: "border border-dashed border-primary/50 text-primary", onClick: () => design.choose({
-                    kind: 'list',
-                    view: view.id,
-                    model,
-                    after: allColumns.at(-1)?.id ?? '',
-                    shown: allColumns.map((c) => c.field),
-                }), children: [_jsx(Plus, { "aria-hidden": true }), t('views.design.addColumn')] })) : null, _jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('views.density'), "aria-pressed": density === 'compact', title: density === 'compact' ? t('views.comfortable') : t('views.compact'), onClick: () => {
-                    const next = density === 'compact' ? 'comfortable' : 'compact';
-                    setDensity(next);
-                }, children: _jsx(Rows3, { "aria-hidden": true }) }), _jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('views.columns'), children: _jsx(Columns3, { "aria-hidden": true }) }) }), _jsxs(MenuContent, { align: "end", children: [_jsx(MenuLabel, { children: t('views.columns') }), allColumns.map((c) => (_jsx(MenuCheckboxItem, { checked: !hidden.has(c.id), onCheckedChange: (checked) => {
-                                    const next = new Set(hidden);
-                                    if (checked)
-                                        next.delete(c.id);
-                                    else if (next.size < allColumns.length - 1)
-                                        next.add(c.id);
-                                    setHidden(next);
-                                    stored.set(columnsKey, [...next]);
-                                }, children: c.label ?? fields[c.field]?.label ?? c.field }, c.id)))] })] }), canExport ? (_jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('views.export'), busy: exportAs.isPending, children: _jsx(Download, { "aria-hidden": true }) }) }), _jsxs(MenuContent, { align: "end", children: [_jsx(MenuLabel, { children: t('views.export') }), _jsx(MenuItem, { onSelect: () => exportAs.mutate('csv'), children: t('views.exportCsv') }), _jsx(MenuItem, { onSelect: () => exportAs.mutate('xlsx'), children: t('views.exportXlsx') })] })] })) : null] }));
+    // Selected rows: a floating bar at the bottom of the screen (RFC 0018 §4.3); the list's own toolbar stays put.
+    const floating = ids.length > 0 ? (_jsxs("div", { role: "toolbar", "aria-label": t('views.selected', { count: ids.length }), "data-kosh-selection-bar": true, className: "fixed inset-x-0 bottom-4 z-30 mx-auto flex w-fit max-w-[calc(100vw-2rem)] flex-wrap items-center gap-2 rounded-xl border bg-surface px-3 py-2 text-sm shadow-lg", children: [_jsx("span", { className: "font-medium", children: t('views.selected', { count: ids.length }) }), _jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('views.clearSelection'), onClick: () => setSelected(new Set()), children: _jsx(X, { "aria-hidden": true }) }), _jsx("span", { className: "flex-1" }), transitions.map((tr) => (_jsx(Button, { size: "sm", busy: transition.isPending && transition.variables?.name === tr.name, onClick: () => transition.mutate({ name: tr.name, what: ids }), children: tr.name.charAt(0).toUpperCase() + tr.name.slice(1).replace(/_/g, ' ') }, tr.name))), archivable ? (_jsxs(Button, { size: "sm", busy: archive.isPending, onClick: () => archive.mutate(ids), children: [_jsx(Archive, { "aria-hidden": true }), t('views.archive')] })) : null, served.operations.unlink ? (_jsxs(Button, { size: "sm", variant: "danger", onClick: () => setConfirmingDelete(true), children: [_jsx(Trash2, { "aria-hidden": true }), t('views.delete')] })) : null, canExport ? (_jsxs(Button, { size: "sm", busy: exportAs.isPending, onClick: () => exportAs.mutate('csv'), children: [_jsx(Download, { "aria-hidden": true }), t('views.export')] })) : null] })) : null;
+    const toolbar = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b px-3 py-1.5 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: count === null ? (_jsx(Skeleton, { className: "inline-block h-4 w-20" })) : (t('views.records', { count })) }), _jsx("span", { className: "flex-1" }), design.active ? (_jsxs(Button, { size: "sm", variant: "ghost", className: "border border-dashed border-primary/50 text-primary", onClick: () => design.choose({
+                            kind: 'list',
+                            view: view.id,
+                            model,
+                            after: allColumns.at(-1)?.id ?? '',
+                            shown: allColumns.map((c) => c.field),
+                        }), children: [_jsx(Plus, { "aria-hidden": true }), t('views.design.addColumn')] })) : null, _jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('views.density'), "aria-pressed": density === 'compact', title: density === 'compact' ? t('views.comfortable') : t('views.compact'), onClick: () => {
+                            const next = density === 'compact' ? 'comfortable' : 'compact';
+                            setDensity(next);
+                        }, children: _jsx(Rows3, { "aria-hidden": true }) }), _jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('views.columns'), children: _jsx(Columns3, { "aria-hidden": true }) }) }), _jsxs(MenuContent, { align: "end", children: [_jsx(MenuLabel, { children: t('views.columns') }), allColumns.map((c) => (_jsx(MenuCheckboxItem, { checked: !hidden.has(c.id), onCheckedChange: (checked) => {
+                                            const next = new Set(hidden);
+                                            if (checked)
+                                                next.delete(c.id);
+                                            else if (next.size < allColumns.length - 1)
+                                                next.add(c.id);
+                                            setHidden(next);
+                                            stored.set(columnsKey, [...next]);
+                                        }, children: c.label ?? fields[c.field]?.label ?? c.field }, c.id)))] })] }), canExport ? (_jsxs(Menu, { children: [_jsx(MenuTrigger, { asChild: true, children: _jsx(Button, { size: "sm", variant: "ghost", "aria-label": t('views.export'), busy: exportAs.isPending, children: _jsx(Download, { "aria-hidden": true }) }) }), _jsxs(MenuContent, { align: "end", children: [_jsx(MenuLabel, { children: t('views.export') }), _jsx(MenuItem, { onSelect: () => exportAs.mutate('csv'), children: t('views.exportCsv') }), _jsx(MenuItem, { onSelect: () => exportAs.mutate('xlsx'), children: t('views.exportXlsx') })] })] })) : null] }), floating] }));
     return (_jsxs("div", { className: "rounded-lg border bg-surface", children: [props.groupBy.length > 0 ? (_jsx(Groups, { props: props, columns: columns, fields: fields, height: height })) : (_jsxs(_Fragment, { children: [toolbar, _jsx(Rows, { props: props, where: props.where, columns: columns, fields: fields, offset: offset, limit: pageSize, height: height, selection: { selected, onToggle: toggle, onToggleAll: toggleAll }, hiddenIds: pendingDelete, onCount: setCount, onRows: setPageRows, filtered: filtered }), count !== null && count > pageSize ? (_jsxs("nav", { "aria-label": "Pagination", className: "flex items-center justify-end gap-2 border-t px-3 py-2 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: t('views.range', {
                                     from: offset + 1,
                                     to: Math.min(offset + pageSize, count),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shutro-erp",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Shutro ERP (Kosh): a modern ERP framework on TypeScript, PostgreSQL and the Shutro ORM — typed end to end, permissions enforced on the server, metadata-driven views, reporting, documents and a chatter on every record.",
   "keywords": [
     "erp",