@flowselections/mailbox-orders 1.0.53 → 1.0.55

package/dist-lib/components/MailboxSkippedPage.js

@@ -1,34 +1,61 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
-import { Badge, Button, Card, CardContent, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, toast, } from "@flowselections/core";
+import { CalendarClock, Filter, MailX, Search } from "lucide-react";
+import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, toast } from "@flowselections/core";
 import { listSkippedMessages, analyzeMessageNow } from "../lib/mailbox.functions.js";
 import { TablePagination } from "./TablePagination.js";
-import { MailboxFilterBar, usePersistedState, normalizeText, matchesPeriod } from "./MailboxFilterBar.js";
+import { usePersistedState, normalizeText, matchesPeriod } from "./MailboxFilterBar.js";
+import { MailboxPageFrame } from "./MailboxPageFrame.js";
+import { DataTable } from "./fs-ui/DataTable.js";
+import { StatusIcon } from "./fs-ui/StatusIcon.js";
+import { EmptyState } from "./fs-ui/EmptyState.js";
+import { InlineAlert } from "./fs-ui/InlineAlert.js";
+import { TableSkeleton } from "./fs-ui/TableSkeleton.js";
+import { Toolbar } from "./fs-ui/Toolbar.js";
+import { SearchInput } from "./fs-ui/SearchInput.js";
+import { FilterChips } from "./fs-ui/FilterChips.js";
+import { useListHotkeys } from "./fs-ui/useListHotkeys.js";
 const statusOf = (m) => m.analysis_state === "wacht"
-    ? { label: "Wacht op analyse", tone: "amber" }
+    ? { label: "Wacht op uitlezen", tone: "amber" }
     : m.filter_outcome === "te_oud"
         ? { label: "Te oud", tone: "grey" }
         : m.filter_outcome === "geen_bestelling"
             ? { label: "Geen bestelling", tone: "grey" }
             : { label: "Overgeslagen", tone: "grey" };
+/** Reden in gewone woorden (codes uit de verwerking worden vertaald). */
+const reasonText = (m) => {
+    const raw = String(m.analysis_note || m.filter_reason || "");
+    if (m.filter_outcome === "te_oud")
+        return "Te oud bij eerste ophalen";
+    if (/niet uit een gevolgde map/i.test(raw))
+        return "Uit een map die niet gevolgd wordt";
+    if (/map onbekend/i.test(raw))
+        return "Map niet bekend";
+    return raw;
+};
+const PERIOD_LABEL = { today: "Vandaag", "7d": "Laatste 7 dagen", "30d": "Laatste 30 dagen" };
 export function MailboxSkippedPage() {
     const qc = useQueryClient();
     const fetchList = useServerFn(listSkippedMessages);
     const analyze = useServerFn(analyzeMessageNow);
-    const { data, isLoading, error } = useQuery({
+    const { data, isLoading, error, refetch } = useQuery({
         queryKey: ["mailbox-skipped"],
         queryFn: () => fetchList(),
         refetchInterval: 60000,
+        placeholderData: (prev) => prev,
     });
     const items = Array.isArray(data?.items) ? data.items : [];
     const [busyId, setBusyId] = useState(null);
     const [page, setPage] = useState(1);
-    const [pageSize, setPageSize] = useState(25);
+    const [pageSize, setPageSize] = useState(50);
     const [search, setSearch] = usePersistedState("mailbox-skipped:search", "");
     const [period, setPeriod] = usePersistedState("mailbox-skipped:period", "all");
     const [sortOrder, setSortOrder] = usePersistedState("mailbox-skipped:sort", "date-desc");
+    const [cursor, setCursor] = useState(null);
+    const [helpOpen, setHelpOpen] = useState(false);
+    const searchRef = useRef(null);
     const filtered = useMemo(() => {
         const q = normalizeText(search).trim();
         return items
@@ -44,30 +71,69 @@ export function MailboxSkippedPage() {
             : String(a.received_at ?? "").localeCompare(String(b.received_at ?? "")));
     }, [items, search, period, sortOrder]);
     const waiting = items.filter((m) => m.analysis_state === "wacht").length;
+    useEffect(() => { setPage(1); setCursor(null); }, [search, period, sortOrder]);
     const pageCount = Math.max(1, Math.ceil(filtered.length / pageSize));
     const current = Math.min(page, pageCount);
     const paged = filtered.slice((current - 1) * pageSize, current * pageSize);
+    const hasActiveFilters = !!search || period !== "all";
+    const clearFilters = () => { setSearch(""); setPeriod("all"); setSortOrder("date-desc"); };
     const run = async (id) => {
         setBusyId(id);
         try {
             const res = await analyze({ data: { messageId: id } });
             if (res?.ok) {
-                toast.success("Mail geanalyseerd. Je vindt hem nu bij Voorstellen.");
+                toast.success("Mail uitgelezen. Je vindt hem nu bij Te controleren.");
                 void qc.invalidateQueries({ queryKey: ["mailbox-skipped"] });
                 void qc.invalidateQueries({ queryKey: ["mailbox-proposals"] });
+                void qc.invalidateQueries({ queryKey: ["mailbox-kpis"] });
+            }
+            else {
+                if (res?.error)
+                    console.warn("[mailbox] toch uitlezen", res.error);
+                toast.error(res?.error === "Deze mail wordt al geanalyseerd." ? "Deze mail wordt al uitgelezen." : "Uitlezen lukt niet. Probeer het opnieuw.");
             }
-            else
-                toast.error(res?.error ?? "Analyseren mislukt");
         }
         catch (e) {
-            toast.error(e?.message ?? "Analyseren mislukt");
+            console.warn("[mailbox] toch uitlezen", e);
+            toast.error("Uitlezen lukt niet. Probeer het opnieuw.");
         }
         finally {
             setBusyId(null);
         }
     };
-    return (_jsxs("div", { className: "flex h-[calc(100dvh-var(--app-header-height)-var(--core-topbar-h,0px))] max-h-[calc(100dvh-var(--app-header-height)-var(--core-topbar-h,0px))] min-h-0 w-full flex-col gap-4 overflow-hidden p-6", children: [_jsxs("div", { className: "shrink-0", children: [_jsx("h1", { className: "text-2xl font-semibold", children: "Overgeslagen" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Mails die niet automatisch zijn geanalyseerd, met de reden. Klopt het niet? Gebruik \"Toch analyseren\"." })] }), waiting > 0 && (_jsxs("div", { className: "shrink-0 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800", children: [waiting, " mail(s) wachten op analyse, omdat de limiet is bereikt of automatisch analyseren uit staat."] })), items.length > 0 && (_jsx(MailboxFilterBar, { search: search, onSearchChange: setSearch, period: period, onPeriodChange: setPeriod, sortOrder: sortOrder, onSortOrderChange: setSortOrder, filteredCount: filtered.length, totalCount: items.length, countLabel: "mails", onClear: () => { setSearch(""); setPeriod("all"); setSortOrder("date-desc"); }, hasActiveFilters: !!search || period !== "all" || sortOrder !== "date-desc" })), _jsx("div", { className: "flex-1 min-h-0 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]", children: isLoading ? (_jsx("div", { className: "text-muted-foreground", children: "Laden..." })) : error ? (_jsx("p", { className: "text-destructive text-sm", children: "De lijst kon niet worden opgehaald." })) : filtered.length === 0 ? (_jsx("p", { className: "text-muted-foreground", children: "Geen overgeslagen mails." })) : (_jsx(Card, { children: _jsxs(CardContent, { className: "p-0", children: [_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Afzender" }), _jsx(TableHead, { children: "Bericht" }), _jsx(TableHead, { children: "Ontvangen" }), _jsx(TableHead, { children: "Reden" }), _jsx(TableHead, {})] }) }), _jsx(TableBody, { children: paged.map((m) => {
-                                            const st = statusOf(m);
-                                            return (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "text-sm", children: m.from_name || m.from_email || "Onbekend" }), _jsxs(TableCell, { className: "max-w-sm", children: [_jsx("div", { className: "truncate text-sm font-medium", children: m.subject || "(geen onderwerp)" }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: m.preview || "" })] }), _jsx(TableCell, { className: "text-sm text-muted-foreground", children: m.received_at ? new Date(m.received_at).toLocaleDateString("nl-NL") : "-" }), _jsxs(TableCell, { className: "max-w-xs", children: [_jsx(Badge, { variant: "outline", className: st.tone === "amber" ? "border-amber-300 bg-amber-50 text-amber-800" : "", children: st.label }), _jsx("div", { className: "mt-1 text-xs text-muted-foreground", children: m.analysis_note || m.filter_reason })] }), _jsx(TableCell, { children: _jsx(Button, { size: "sm", variant: "outline", disabled: busyId === m.id, onClick: () => run(m.id), children: busyId === m.id ? "Bezig…" : m.analysis_state === "wacht" ? "Nu analyseren" : "Toch analyseren" }) })] }, m.id));
-                                        }) })] }), _jsx(TablePagination, { total: filtered.length, page: current, pageSize: pageSize, onPageChange: setPage, onPageSizeChange: setPageSize })] }) })) })] }));
+    useListHotkeys({
+        disabled: helpOpen,
+        onSearch: () => searchRef.current?.focus(),
+        onNext: () => setCursor((c) => (paged.length ? Math.min((c ?? -1) + 1, paged.length - 1) : null)),
+        onPrev: () => setCursor((c) => (paged.length ? Math.max((c ?? 1) - 1, 0) : null)),
+        onEscape: hasActiveFilters ? clearFilters : undefined,
+        onHelp: () => setHelpOpen(true),
+    });
+    const actionBtn = (m) => (_jsx(Button, { size: "sm", variant: "outline", className: "h-8", disabled: busyId === m.id, onClick: () => run(m.id), children: busyId === m.id ? "Bezig…" : m.analysis_state === "wacht" ? "Nu uitlezen" : "Toch uitlezen" }));
+    const columns = [
+        {
+            key: "afzender", header: "Afzender", width: "minmax(160px,1.2fr)",
+            cell: (m) => (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-medium", children: m.from_name || m.from_email || "Onbekend" }), m.from_name && _jsx("div", { className: "truncate text-xs text-muted-foreground", children: m.from_email })] })),
+        },
+        {
+            key: "bericht", header: "Bericht", width: "minmax(240px,2.2fr)",
+            cell: (m) => (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-medium", children: m.subject || "(geen onderwerp)" }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: m.preview || "" })] })),
+        },
+        {
+            key: "datum", header: "Ontvangen", width: "120px", sortable: true,
+            cell: (m) => _jsx("span", { className: "tabular-nums text-muted-foreground", children: m.received_at ? new Date(m.received_at).toLocaleDateString("nl-NL") : "–" }),
+        },
+        {
+            key: "reden", header: "Reden", width: "minmax(180px,1.4fr)",
+            cell: (m) => {
+                const st = statusOf(m);
+                return (_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(StatusIcon, { tone: st.tone === "amber" ? "busy" : "open", label: st.label, detail: reasonText(m) || undefined }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm", children: st.label }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: reasonText(m) })] })] }));
+            },
+        },
+        { key: "actie", header: "", width: "130px", cell: (m) => actionBtn(m) },
+    ];
+    const chips = period !== "all" ? [{ key: "period", label: PERIOD_LABEL[period] ?? period, icon: _jsx(CalendarClock, {}), onRemove: () => setPeriod("all") }] : [];
+    return (_jsxs(MailboxPageFrame, { tab: "overgeslagen", helpOpen: helpOpen, onHelpOpenChange: setHelpOpen, children: [waiting > 0 && (_jsx(InlineAlert, { tone: "warning", title: `${waiting} mail(s) wachten op uitlezen.`, children: "De limiet voor vandaag is bereikt of automatisch uitlezen staat uit. Je kunt een mail ook zelf laten uitlezen." })), _jsx(Toolbar, { chips: _jsx(FilterChips, { chips: chips, onClearAll: clearFilters }), right: _jsxs(Select, { value: period, onValueChange: (v) => setPeriod(v), children: [_jsxs(SelectTrigger, { className: "h-9 w-[150px]", "aria-label": "Periode", children: [_jsx(Filter, { className: "mr-1 h-4 w-4" }), _jsx(SelectValue, {})] }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "Alle periodes" }), _jsx(SelectItem, { value: "today", children: "Vandaag" }), _jsx(SelectItem, { value: "7d", children: "Laatste 7 dagen" }), _jsx(SelectItem, { value: "30d", children: "Laatste 30 dagen" })] })] }), children: _jsx(SearchInput, { ref: searchRef, value: search, onChange: setSearch, placeholder: "Zoek op afzender, onderwerp of reden" }) }), isLoading && !data ? (_jsx(TableSkeleton, { columns: ["1.2fr", "2.2fr", "120px", "1.4fr", "130px"] })) : error && !data ? (_jsx(InlineAlert, { tone: "error", title: "De lijst kon niet worden geladen.", action: _jsx(Button, { size: "sm", variant: "outline", onClick: () => void refetch(), children: "Opnieuw proberen" }), children: "Probeer het opnieuw." })) : filtered.length === 0 ? (_jsx("div", { className: "rounded-xl border border-border bg-card shadow-sm", children: hasActiveFilters
+                    ? _jsx(EmptyState, { icon: _jsx(Search, { className: "h-6 w-6" }), title: "Niets gevonden", text: "Er zijn geen overgeslagen mails die bij je zoekopdracht passen.", action: _jsx(Button, { size: "sm", variant: "outline", onClick: clearFilters, children: "Filters wissen" }) })
+                    : _jsx(EmptyState, { icon: _jsx(MailX, { className: "h-6 w-6" }), title: "Geen overgeslagen mails", text: "Mails die geen bestelling lijken, verschijnen hier met de reden." }) })) : (_jsx(DataTable, { rows: paged, columns: columns, rowKey: (m) => m.id, activeIndex: cursor, sort: { key: "datum", dir: sortOrder === "date-asc" ? "asc" : "desc" }, onSortChange: () => setSortOrder(sortOrder === "date-asc" ? "date-desc" : "date-asc"), mobileCard: (m) => (_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsx("div", { className: "truncate font-semibold", children: m.from_name || m.from_email || "Onbekend" }), _jsx("div", { className: "truncate text-muted-foreground", children: m.subject || "(geen onderwerp)" }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [m.received_at ? new Date(m.received_at).toLocaleDateString("nl-NL") : "–", " \u00B7 ", statusOf(m).label] }), _jsx("div", { className: "pt-1", children: actionBtn(m) })] })), footer: _jsx(TablePagination, { total: filtered.length, page: current, pageSize: pageSize, onPageChange: setPage, onPageSizeChange: setPageSize }) }))] }));
 }

package/dist-lib/components/MailboxStatusLine.d.ts

@@ -1,5 +1,7 @@
 /** Pad naar de AI-koppelingen in de shell (Instellingen › AI-Authenticatie). */
 export declare const AI_AUTH_PATH = "/ai-authenticatie";
-/** Kleine statusregel: laatste geslaagde ronde, wachtende mails, problemen in gewone taal. */
+/** Korte regel onder de paginatitel: wanneer opgehaald, hoeveel wachten. */
+export declare function MailboxStatusMeta(): import("react").JSX.Element | null;
+/** Meldingen over het ophalen (alleen als de gebruiker er iets mee moet). */
 export declare function MailboxStatusLine(): import("react").JSX.Element | null;
 //# sourceMappingURL=MailboxStatusLine.d.ts.map

package/dist-lib/components/MailboxStatusLine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MailboxStatusLine.d.ts","sourceRoot":"","sources":["../../src/components/MailboxStatusLine.tsx"],"names":[],"mappings":"AAKA,gFAAgF;AAChF,eAAO,MAAM,YAAY,sBAAsB,CAAC;AAKhD,8FAA8F;AAC9F,wBAAgB,iBAAiB,uCAuChC"}
+{"version":3,"file":"MailboxStatusLine.d.ts","sourceRoot":"","sources":["../../src/components/MailboxStatusLine.tsx"],"names":[],"mappings":"AAMA,gFAAgF;AAChF,eAAO,MAAM,YAAY,sBAAsB,CAAC;AAehD,4EAA4E;AAC5E,wBAAgB,iBAAiB,uCAYhC;AAED,6EAA6E;AAC7E,wBAAgB,iBAAiB,uCAgChC"}

package/dist-lib/components/MailboxStatusLine.js

@@ -1,23 +1,46 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useQuery } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
-import { AlertTriangle } from "lucide-react";
+import { useIsSuperadmin } from "@flowselections/core";
 import { getMailboxStatus } from "../lib/mailbox.functions.js";
+import { InlineAlert } from "./fs-ui/InlineAlert.js";
 /** Pad naar de AI-koppelingen in de shell (Instellingen › AI-Authenticatie). */
 export const AI_AUTH_PATH = "/ai-authenticatie";
-const fmt = (iso) => iso ? new Date(iso).toLocaleString("nl-NL", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" }) : "nog geen";
-/** Kleine statusregel: laatste geslaagde ronde, wachtende mails, problemen in gewone taal. */
-export function MailboxStatusLine() {
+const fmt = (iso) => iso ? new Date(iso).toLocaleString("nl-NL", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" }) : null;
+function useMailboxStatus() {
     const fetchStatus = useServerFn(getMailboxStatus);
     const { data } = useQuery({
         queryKey: ["mailbox-status"],
         queryFn: () => fetchStatus(),
         refetchInterval: 60000,
     });
-    const s = (data ?? null);
+    return (data ?? null);
+}
+/** Korte regel onder de paginatitel: wanneer opgehaald, hoeveel wachten. */
+export function MailboxStatusMeta() {
+    const s = useMailboxStatus();
     if (!s)
         return null;
-    const disconnected = Array.isArray(s.disconnected) ? s.disconnected : [];
     const addresses = Array.isArray(s.addresses) ? s.addresses : [];
-    return (_jsxs("div", { className: "shrink-0 space-y-2", children: [_jsxs("div", { className: "text-xs text-muted-foreground", children: ["Laatste ronde ", fmt(s.lastOkAt), " \u00B7 ", s.waiting, " wachtend", addresses.length > 0 ? ` · ${addresses.join(", ")}` : "", s.ignoredNotFollowed > 0 ? ` · ${s.ignoredNotFollowed} mails buiten de gevolgde mappen genegeerd` : "", s.ignoredUnknown > 0 ? ` · ${s.ignoredUnknown} mails overgeslagen (map onbekend)` : ""] }), disconnected.map((d) => (_jsxs("div", { className: "text-xs text-muted-foreground", children: [d.count, " mails van ", d.email, " niet verwerkt (adres ontkoppeld)"] }, d.email))), s.problem && (_jsxs("div", { className: "flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/5 p-2 text-sm text-destructive", children: [_jsx(AlertTriangle, { className: "h-4 w-4 mt-0.5 shrink-0" }), _jsx("span", { children: s.problem })] })), !s.aiAgent && (_jsxs("div", { className: "flex items-center justify-between gap-3 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800", children: [_jsx("span", { children: "Automatisch uitlezen staat uit: koppel een AI-agent bij Instellingen \u203A AI-Authenticatie" }), _jsx("a", { href: AI_AUTH_PATH, className: "shrink-0 underline font-medium", children: "Naar AI-Authenticatie" })] }))] }));
+    const parts = [];
+    const last = fmt(s.lastOkAt);
+    parts.push(last ? `Mails opgehaald ${last}` : "Nog geen mails opgehaald");
+    if (s.waiting > 0)
+        parts.push(`${s.waiting} wachten op verwerking`);
+    if (addresses.length > 0)
+        parts.push(addresses.join(", "));
+    if (s.ignoredNotFollowed > 0)
+        parts.push(`${s.ignoredNotFollowed} uit mappen die niet gevolgd worden`);
+    if (s.ignoredUnknown > 0)
+        parts.push(`${s.ignoredUnknown} uit een onbekende map overgeslagen`);
+    return _jsx("span", { className: "tabular-nums", children: parts.join(" · ") });
+}
+/** Meldingen over het ophalen (alleen als de gebruiker er iets mee moet). */
+export function MailboxStatusLine() {
+    const s = useMailboxStatus();
+    const { isAdmin } = useIsSuperadmin();
+    if (!s)
+        return null;
+    const disconnected = Array.isArray(s.disconnected) ? s.disconnected : [];
+    return (_jsxs(_Fragment, { children: [disconnected.map((d) => (_jsx(InlineAlert, { tone: "info", title: `${d.count} mails van ${d.email} niet verwerkt (adres ontkoppeld)` }, d.email))), s.problem && (_jsxs(InlineAlert, { tone: "error", title: "Er komen mails binnen, maar ze worden nu niet verwerkt.", children: ["We proberen het elke minuut opnieuw. Blijft dit staan, neem dan contact op met je beheerder.", isAdmin && (_jsxs("details", { className: "mt-1 text-xs text-muted-foreground", children: [_jsx("summary", { className: "cursor-pointer", children: "Details" }), s.problem] }))] })), !s.aiAgent && (_jsx(InlineAlert, { tone: "warning", title: "Automatisch uitlezen staat uit.", action: _jsx("a", { href: AI_AUTH_PATH, className: "text-sm font-medium underline underline-offset-2", children: "Naar Instellingen" }), children: "Bestellingen komen wel binnen, maar je vult ze zelf in. Een beheerder kan dit aanzetten bij Instellingen." }))] }));
 }

package/dist-lib/components/fs-ui/DataTable.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from "react";
+export interface DataColumn<T> {
+    key: string;
+    header: string;
+    /** CSS grid-breedte, bijv. "2fr" of "140px". Schaalt evenredig mee. */
+    width: string;
+    cell: (row: T) => ReactNode;
+    /** Klikbare kop voor sorteren. */
+    sortable?: boolean;
+}
+/**
+ * Tabel in één afgerond vlak. Kop blijft zichtbaar bij scrollen, vaste
+ * kolombreedtes, rij 60 px, geselecteerde rij met groene streep links.
+ * Onder 768 px als kaarten (mobileCard).
+ */
+export declare function DataTable<T>({ rows, columns, rowKey, onRowClick, activeIndex, mobileCard, sort, onSortChange, footer, rowAction, }: {
+    rows: T[];
+    columns: DataColumn<T>[];
+    rowKey: (row: T) => string;
+    onRowClick?: (row: T, index: number) => void;
+    activeIndex?: number | null;
+    mobileCard: (row: T) => ReactNode;
+    sort?: {
+        key: string;
+        dir: "asc" | "desc";
+    } | null;
+    onSortChange?: (key: string) => void;
+    footer?: ReactNode;
+    /** Extra actie (menu of knop) rechts in de rij; klik opent de rij niet. */
+    rowAction?: (row: T) => ReactNode;
+}): import("react").JSX.Element;
+/** Initialen-avatar voor klantnamen. */
+export declare function InitialsAvatar({ name }: {
+    name: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=DataTable.d.ts.map

package/dist-lib/components/fs-ui/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1D,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;IAC5B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAC3B,IAAI,EACJ,OAAO,EACP,MAAM,EACN,UAAU,EACV,WAAW,EACX,UAAU,EACV,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,SAAS,GACV,EAAE;IACD,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IACzB,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;IAClC,IAAI,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,KAAK,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACnD,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;CACnC,+BA4EA;AAED,wCAAwC;AACxC,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,+BAQxD"}

package/dist-lib/components/fs-ui/DataTable.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { ArrowDown, ArrowUp, ChevronRight } from "lucide-react";
+/**
+ * Tabel in één afgerond vlak. Kop blijft zichtbaar bij scrollen, vaste
+ * kolombreedtes, rij 60 px, geselecteerde rij met groene streep links.
+ * Onder 768 px als kaarten (mobileCard).
+ */
+export function DataTable({ rows, columns, rowKey, onRowClick, activeIndex, mobileCard, sort, onSortChange, footer, rowAction, }) {
+    const grid = columns.map((c) => c.width).join(" ") + (rowAction || onRowClick ? " 48px" : "");
+    const activeRef = useRef(null);
+    useEffect(() => { activeRef.current?.scrollIntoView({ block: "nearest" }); }, [activeIndex]);
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card shadow-sm", children: [_jsx("div", { className: "hidden min-h-0 flex-1 overflow-auto overscroll-contain md:block", children: _jsxs("div", { className: "min-w-[900px]", role: "table", children: [_jsxs("div", { role: "row", className: "sticky top-0 z-10 grid h-10 items-center gap-4 border-b border-border bg-card px-4", style: { gridTemplateColumns: grid }, children: [columns.map((c) => {
+                                    const active = sort?.key === c.key;
+                                    const label = _jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: c.header });
+                                    return (_jsx("div", { role: "columnheader", className: "min-w-0 truncate text-left", children: c.sortable && onSortChange ? (_jsxs("button", { type: "button", onClick: () => onSortChange(c.key), className: "inline-flex items-center gap-1 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": `Sorteer op ${c.header}`, children: [label, active && (sort.dir === "asc" ? _jsx(ArrowUp, { className: "h-3 w-3 text-muted-foreground" }) : _jsx(ArrowDown, { className: "h-3 w-3 text-muted-foreground" }))] })) : label }, c.key));
+                                }), (rowAction || onRowClick) && _jsx("div", {})] }), rows.map((r, i) => {
+                            const active = activeIndex === i;
+                            return (_jsxs("div", { role: "row", ref: active ? activeRef : undefined, tabIndex: onRowClick ? 0 : undefined, onClick: onRowClick ? () => onRowClick(r, i) : undefined, onKeyDown: onRowClick ? (e) => { if (e.key === "Enter" && e.target === e.currentTarget) {
+                                    e.preventDefault();
+                                    onRowClick(r, i);
+                                } } : undefined, className: "group relative grid h-[60px] items-center gap-4 border-b border-border px-4 text-sm text-foreground last:border-0 " +
+                                    "transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring " +
+                                    (onRowClick ? "cursor-pointer hover:bg-muted/50 " : "") +
+                                    (active ? "bg-muted/50 before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-primary" : ""), style: { gridTemplateColumns: grid }, children: [columns.map((c) => _jsx("div", { role: "cell", className: "min-w-0", children: c.cell(r) }, c.key)), (rowAction || onRowClick) && (_jsx("div", { className: "flex justify-end", onClick: rowAction ? (e) => e.stopPropagation() : undefined, children: rowAction ? rowAction(r) : (_jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100", "aria-hidden": true })) }))] }, rowKey(r)));
+                        })] }) }), _jsx("div", { className: "min-h-0 flex-1 divide-y divide-border overflow-y-auto overscroll-contain md:hidden", children: rows.map((r, i) => (_jsx("div", { role: onRowClick ? "button" : undefined, tabIndex: onRowClick ? 0 : undefined, onClick: onRowClick ? () => onRowClick(r, i) : undefined, className: "min-h-11 p-4 text-sm transition-colors active:bg-muted " + (activeIndex === i ? "bg-muted/50" : ""), children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "min-w-0 flex-1", children: mobileCard(r) }), rowAction && _jsx("div", { onClick: (e) => e.stopPropagation(), children: rowAction(r) })] }) }, rowKey(r)))) }), footer && _jsx("div", { className: "shrink-0 border-t border-border", children: footer })] }));
+}
+/** Initialen-avatar voor klantnamen. */
+export function InitialsAvatar({ name }) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    const ini = ((parts[0]?.[0] ?? "") + (parts[1]?.[0] ?? "")).toUpperCase() || "?";
+    return (_jsx("span", { className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary", "aria-hidden": true, children: ini }));
+}

package/dist-lib/components/fs-ui/EmptyState.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+/** Lege toestand: groot zacht icoon, korte zin, één actie. */
+export declare function EmptyState({ icon, title, text, action, }: {
+    icon: ReactNode;
+    title: string;
+    text?: string;
+    action?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist-lib/components/fs-ui/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,8DAA8D;AAC9D,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,GACP,EAAE;IACD,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,+BAaA"}

package/dist-lib/components/fs-ui/EmptyState.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Lege toestand: groot zacht icoon, korte zin, één actie. */
+export function EmptyState({ icon, title, text, action, }) {
+    return (_jsxs("div", { className: "flex flex-col items-center gap-3 px-4 py-14 text-center", children: [_jsx("span", { className: "inline-flex h-14 w-14 items-center justify-center rounded-full bg-muted text-muted-foreground", "aria-hidden": true, children: icon }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-semibold text-foreground", children: title }), text && _jsx("div", { className: "mt-1 max-w-sm text-sm text-muted-foreground", children: text })] }), action] }));
+}

package/dist-lib/components/fs-ui/FilterChips.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export interface FilterChip {
+    key: string;
+    label: string;
+    icon?: ReactNode;
+    onRemove: () => void;
+}
+/** Actieve filters als ronde chips met kruisje, plus "Alles wissen". */
+export declare function FilterChips({ chips, onClearAll }: {
+    chips: FilterChip[];
+    onClearAll?: () => void;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=FilterChips.d.ts.map

package/dist-lib/components/fs-ui/FilterChips.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChips.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/FilterChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wEAAwE;AACxE,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE;IAAE,KAAK,EAAE,UAAU,EAAE,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,sCAyBlG"}

package/dist-lib/components/fs-ui/FilterChips.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+/** Actieve filters als ronde chips met kruisje, plus "Alles wissen". */
+export function FilterChips({ chips, onClearAll }) {
+    if (chips.length === 0)
+        return null;
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [chips.map((c) => (_jsxs("span", { className: "inline-flex h-8 items-center gap-1.5 rounded-full border border-border bg-card pl-3 pr-1 text-xs font-medium text-foreground [&_svg]:h-3.5 [&_svg]:w-3.5", children: [c.icon, c.label, _jsx("button", { type: "button", "aria-label": `Filter ${c.label} weghalen`, onClick: c.onRemove, className: "inline-flex h-6 w-6 items-center justify-center rounded-full text-muted-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(X, {}) })] }, c.key))), onClearAll && chips.length > 1 && (_jsx("button", { type: "button", onClick: onClearAll, className: "h-8 rounded-lg px-2 text-xs font-medium text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: "Alles wissen" }))] }));
+}

package/dist-lib/components/fs-ui/HoverTip.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+/**
+ * Tooltip op basis van Popover (core heeft geen Tooltip-export): opent bij
+ * aanwijzen én bij toetsenbordfocus, sluit met Esc of bij verlaten. De
+ * trigger is een knop met een toegankelijke naam.
+ */
+export declare function HoverTip({ content, label, children, side, align, className, }: {
+    align?: "start" | "center" | "end";
+    content: ReactNode;
+    label: string;
+    children: ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=HoverTip.d.ts.map

package/dist-lib/components/fs-ui/HoverTip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverTip.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/HoverTip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAY,EACZ,KAAgB,EAChB,SAAc,GACf,EAAE;IACD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA4CA"}

package/dist-lib/components/fs-ui/HoverTip.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "@flowselections/core";
+/**
+ * Tooltip op basis van Popover (core heeft geen Tooltip-export): opent bij
+ * aanwijzen én bij toetsenbordfocus, sluit met Esc of bij verlaten. De
+ * trigger is een knop met een toegankelijke naam.
+ */
+export function HoverTip({ content, label, children, side = "top", align = "center", className = "", }) {
+    const [open, setOpen] = useState(false);
+    const timer = useRef(null);
+    const show = () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        setOpen(true);
+    };
+    const hide = () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = setTimeout(() => setOpen(false), 80);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { type: "button", "aria-label": label, onPointerEnter: show, onPointerLeave: hide, onFocus: show, onBlur: hide, onClick: (e) => e.stopPropagation(), className: "inline-flex shrink-0 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring " +
+                    className, children: children }), _jsx(PopoverContent, { side: side, align: align, avoidCollisions: true, collisionPadding: 8, onOpenAutoFocus: (e) => e.preventDefault(), onCloseAutoFocus: (e) => e.preventDefault(), onPointerEnter: show, onPointerLeave: hide, onClick: (e) => e.stopPropagation(), className: "w-auto min-w-[14rem] max-w-[20rem] rounded-lg p-3 text-xs leading-snug shadow-lg motion-reduce:animate-none", children: content })] }));
+}

package/dist-lib/components/fs-ui/InlineAlert.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+/** Melding: zacht vlak, icoon links, actie rechts. Op mobiel ingeklapt tot één regel. */
+export declare function InlineAlert({ tone, title, children, action, }: {
+    tone?: "warning" | "error" | "info";
+    title: string;
+    children?: ReactNode;
+    action?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=InlineAlert.d.ts.map

package/dist-lib/components/fs-ui/InlineAlert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/InlineAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,yFAAyF;AACzF,wBAAgB,WAAW,CAAC,EAC1B,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,MAAM,GACP,EAAE;IACD,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,+BA0BA"}

package/dist-lib/components/fs-ui/InlineAlert.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AlertTriangle, Info, XCircle } from "lucide-react";
+/** Melding: zacht vlak, icoon links, actie rechts. Op mobiel ingeklapt tot één regel. */
+export function InlineAlert({ tone = "warning", title, children, action, }) {
+    const [open, setOpen] = useState(false);
+    const Icon = tone === "error" ? XCircle : tone === "info" ? Info : AlertTriangle;
+    const cls = tone === "error"
+        ? "border-destructive/30 bg-destructive/5 text-foreground [&_.ia-icon]:text-destructive"
+        : tone === "info"
+            ? "border-border bg-muted/50 text-foreground [&_.ia-icon]:text-muted-foreground"
+            : "border-warning/30 bg-warning-soft text-warning-soft-foreground [&_.ia-icon]:text-warning-soft-foreground";
+    return (_jsxs("div", { role: tone === "error" ? "alert" : "status", className: "flex shrink-0 items-start gap-3 rounded-lg border px-3 py-2.5 text-sm " + cls, children: [_jsx(Icon, { className: "ia-icon mt-0.5 h-4 w-4 shrink-0", "aria-hidden": true }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("button", { type: "button", onClick: () => setOpen((v) => !v), className: "block w-full text-left font-medium sm:pointer-events-none", "aria-expanded": open, children: _jsx("span", { className: open ? "" : "line-clamp-1 sm:line-clamp-none", children: title }) }), children && _jsx("div", { className: "mt-0.5 text-sm opacity-90 " + (open ? "" : "hidden sm:block"), children: children })] }), action && _jsx("div", { className: "shrink-0", children: action })] }));
+}

package/dist-lib/components/fs-ui/KpiRow.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+/** Rij KPI-tegels: 4 naast elkaar vanaf desktop, 2 op tablet, veegbaar op mobiel. */
+export declare function KpiRow({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=KpiRow.d.ts.map

package/dist-lib/components/fs-ui/KpiRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiRow.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/KpiRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,qFAAqF;AACrF,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAY3D"}

package/dist-lib/components/fs-ui/KpiRow.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Rij KPI-tegels: 4 naast elkaar vanaf desktop, 2 op tablet, veegbaar op mobiel. */
+export function KpiRow({ children }) {
+    return (_jsx("div", { className: "-mx-4 flex shrink-0 snap-x snap-mandatory gap-3 overflow-x-auto px-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden " +
+            "md:mx-0 md:grid md:grid-cols-2 md:overflow-visible md:px-0 lg:grid-cols-4 " +
+            "[&>*]:w-[78%] [&>*]:shrink-0 [&>*]:snap-start md:[&>*]:w-auto", children: children }));
+}

package/dist-lib/components/fs-ui/KpiTile.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+export interface KpiTrend {
+    /** Procentuele wijziging t.o.v. de vorige periode (null = geen vergelijking). */
+    pct: number | null;
+    label: string;
+    /** Hoger is beter (omzet) of slechter (actie nodig). */
+    goodWhenUp?: boolean;
+}
+/** KPI-tegel: icoon, label, groot getal, subregel en optionele trend. Alleen weergave. */
+export declare function KpiTile({ title, value, sub, icon, tone, loading, onClick, active, trend, }: {
+    title: string;
+    value: ReactNode;
+    sub?: ReactNode;
+    icon?: ReactNode;
+    tone?: "default" | "warning";
+    loading?: boolean;
+    onClick?: () => void;
+    active?: boolean;
+    trend?: KpiTrend | null;
+}): import("react").JSX.Element;
+//# sourceMappingURL=KpiTile.d.ts.map

package/dist-lib/components/fs-ui/KpiTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiTile.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/KpiTile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,QAAQ;IACvB,iFAAiF;IACjF,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAoCD,0FAA0F;AAC1F,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,GAAG,EACH,IAAI,EACJ,IAAgB,EAChB,OAAO,EACP,OAAO,EACP,MAAM,EACN,KAAK,GACN,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CACzB,+BA4DA"}

package/dist-lib/components/fs-ui/KpiTile.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Card, Skeleton } from "@flowselections/core";
+import { ChevronRight, Minus, TrendingDown, TrendingUp } from "lucide-react";
+function Trend({ trend }) {
+    if (trend.pct == null)
+        return null;
+    const flat = Math.abs(trend.pct) < 0.5;
+    const up = trend.pct > 0;
+    const good = flat ? null : up === (trend.goodWhenUp ?? true);
+    const Icon = flat ? Minus : up ? TrendingUp : TrendingDown;
+    const tone = good == null ? "text-muted-foreground" : good ? "text-primary" : "text-destructive";
+    return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1 whitespace-nowrap text-xs font-medium tabular-nums " + tone, title: trend.label, children: [_jsx(Icon, { className: "h-3.5 w-3.5", "aria-hidden": true }), flat ? "0%" : `${up ? "+" : ""}${Math.round(trend.pct)}%`, _jsx("span", { className: "truncate font-normal text-muted-foreground", children: trend.label })] }));
+}
+/** Klein trendlijntje van vorige naar huidige periode (alleen weergave). */
+function Spark({ trend }) {
+    if (trend.pct == null)
+        return null;
+    const up = trend.pct > 0.5;
+    const down = trend.pct < -0.5;
+    const good = up || down ? up === (trend.goodWhenUp ?? true) : null;
+    const tone = good == null ? "text-muted-foreground" : good ? "text-primary" : "text-destructive";
+    const y0 = up ? 26 : down ? 6 : 16;
+    const y1 = up ? 6 : down ? 26 : 16;
+    const mid = (y0 + y1) / 2;
+    const d = `M2 ${y0} C 14 ${y0}, 18 ${mid + (up ? 4 : down ? -4 : 0)}, 28 ${mid} S 44 ${mid - (up ? 6 : down ? -6 : 0)}, 50 ${(mid + y1) / 2} S 58 ${y1}, 62 ${y1}`;
+    return (_jsx("svg", { viewBox: "0 0 64 32", className: "hidden h-8 w-16 shrink-0 self-end sm:block " + tone, "aria-hidden": true, children: _jsx("path", { d: d, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+}
+/** KPI-tegel: icoon, label, groot getal, subregel en optionele trend. Alleen weergave. */
+export function KpiTile({ title, value, sub, icon, tone = "default", loading, onClick, active, trend, }) {
+    const body = (_jsxs("div", { className: "flex items-center gap-3 sm:gap-4", children: [icon && (_jsx("span", { className: "inline-flex h-10 w-10 sm:h-12 sm:w-12 shrink-0 items-center justify-center rounded-xl [&_svg]:h-5 [&_svg]:w-5 sm:[&_svg]:h-6 sm:[&_svg]:w-6 " +
+                    (tone === "warning" ? "bg-warning-soft text-warning-soft-foreground" : "bg-primary/10 text-primary"), "aria-hidden": true, children: icon })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: title }), _jsx("div", { className: "mt-0.5 text-2xl font-semibold leading-tight tabular-nums text-foreground", children: loading ? _jsx(Skeleton, { className: "h-7 w-24" }) : value }), _jsx("div", { className: "mt-1 flex min-h-4 flex-col gap-0.5 text-xs text-muted-foreground", children: loading ? _jsx(Skeleton, { className: "h-3 w-32" }) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "truncate", children: sub }), trend && _jsx(Trend, { trend: trend })] })) })] }), !loading && trend && _jsx(Spark, { trend: trend }), onClick && tone === "warning" && _jsx(ChevronRight, { className: "h-5 w-5 shrink-0 text-muted-foreground", "aria-hidden": true })] }));
+    return (_jsx(Card, { className: "h-full p-4 sm:p-5 transition-shadow " +
+            (onClick ? "hover:border-ring/50 hover:shadow-md " : "") +
+            (active ? "ring-2 ring-ring" : ""), children: onClick ? (_jsx("div", { role: "button", tabIndex: 0, onClick: onClick, onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    onClick();
+                }
+            }, className: "block w-full cursor-pointer rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: body })) : (body) }));
+}

package/dist-lib/components/fs-ui/MobilePrimaryAction.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+/** Vaste, schermbrede hoofdknop onderin op mobiel (onder 768 px). */
+export declare function MobilePrimaryAction({ label, icon, onClick, disabled, hidden, }: {
+    label: string;
+    icon?: ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+    hidden?: boolean;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=MobilePrimaryAction.d.ts.map

package/dist-lib/components/fs-ui/MobilePrimaryAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobilePrimaryAction.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/MobilePrimaryAction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,qEAAqE;AACrE,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,MAAM,GACP,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,sCAeA"}

package/dist-lib/components/fs-ui/MobilePrimaryAction.js

@@ -0,0 +1,7 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/** Vaste, schermbrede hoofdknop onderin op mobiel (onder 768 px). */
+export function MobilePrimaryAction({ label, icon, onClick, disabled, hidden, }) {
+    if (hidden)
+        return null;
+    return (_jsx("div", { className: "fixed inset-x-0 bottom-0 z-30 border-t border-border bg-background/95 px-4 pt-3 shadow-lg backdrop-blur md:hidden", style: { paddingBottom: "calc(env(safe-area-inset-bottom) + 12px)" }, children: _jsxs("button", { type: "button", onClick: onClick, disabled: disabled, className: "inline-flex h-12 w-full items-center justify-center gap-2 rounded-lg bg-primary text-base font-semibold text-primary-foreground transition-opacity active:opacity-80 disabled:opacity-50 [&_svg]:h-5 [&_svg]:w-5", children: [icon, label] }) }));
+}

package/dist-lib/components/fs-ui/PageHeader.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+/** Paginakop: titel + bijgewerkt-tijd links, acties rechts. Alleen weergave. */
+export declare function PageHeader({ title, meta, actions, }: {
+    title: string;
+    meta?: ReactNode;
+    actions?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PageHeader.d.ts.map

package/dist-lib/components/fs-ui/PageHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,gFAAgF;AAChF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,OAAO,GACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,+BAUA"}

package/dist-lib/components/fs-ui/PageHeader.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Paginakop: titel + bijgewerkt-tijd links, acties rechts. Alleen weergave. */
+export function PageHeader({ title, meta, actions, }) {
+    return (_jsxs("div", { className: "flex shrink-0 flex-wrap items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "truncate text-xl font-bold leading-tight text-foreground sm:text-2xl", children: title }), meta && _jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: meta })] }), actions && _jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions })] }));
+}

package/dist-lib/components/fs-ui/PillTabs.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export interface PillTab {
+    key: string;
+    label: string;
+    icon?: ReactNode;
+    count?: number | null;
+}
+/** Tabbladen als pillen met icoon, label en teller. Veegbaar op mobiel. */
+export declare function PillTabs({ tabs, active, onSelect, ariaLabel, }: {
+    tabs: PillTab[];
+    active: string;
+    onSelect: (key: string) => void;
+    ariaLabel?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PillTabs.d.ts.map