@flowselections/pick-schermen-kwekers 1.0.80 → 1.0.84

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

@@ -1 +1 @@
-{"version":3,"file":"PickstationsPage.d.ts","sourceRoot":"","sources":["../../src/components/PickstationsPage.tsx"],"names":[],"mappings":"AAmGA,wBAAgB,gBAAgB,gCA6L/B"}
+{"version":3,"file":"PickstationsPage.d.ts","sourceRoot":"","sources":["../../src/components/PickstationsPage.tsx"],"names":[],"mappings":"AAsHA,wBAAgB,gBAAgB,gCAkU/B"}

package/dist-lib/components/PickstationsPage.js

@@ -1,28 +1,86 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Button, Card, CardContent, Dialog, DialogContent, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Textarea, toast, } from "@flowselections/core";
-import { AlertTriangle, Copy, ExternalLink, Loader2, Pencil, Plus, Printer, Trash2, Unlink, } from "lucide-react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Button, Dialog, DialogContent, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Textarea, toast, } from "@flowselections/core";
+import { AlertTriangle, Copy, ExternalLink, Loader2, Pencil, Plus, Printer, Unlink, Warehouse } from "lucide-react";
 import { pickApi } from "../lib/pickApi.js";
 import { usePickStations } from "../hooks/usePickConfig.js";
 import { useKoppelingVoorBron } from "../hooks/useKoppelingVoorBron.js";
 import { ReferentiedataBanner } from "./pick/ReferentiedataBanner.js";
 import { DOCUMENT_AUTO_TEXT } from "../lib/pick156.js";
 import { StationDevices } from "./pick/StationDevices.js";
+import { plainError } from "../lib/labels.js";
+import { PageHeader, KbdHint } from "./fs-ui/PageHeader.js";
+import { UpdatedAt } from "./fs-ui/UpdatedAt.js";
+import { PillTabs } from "./fs-ui/PillTabs.js";
+import { Toolbar } from "./fs-ui/Toolbar.js";
+import { SearchInput } from "./fs-ui/SearchInput.js";
+import { FilterChips } from "./fs-ui/FilterChips.js";
+import { FiltersSheet, SidePanel } from "./fs-ui/FiltersSheet.js";
+import { DataTable, TwoLine } from "./fs-ui/DataTable.js";
+import { StatusIcon } from "./fs-ui/StatusIcon.js";
+import { RowMenu } from "./fs-ui/RowMenu.js";
+import { EmptyState } from "./fs-ui/EmptyState.js";
+import { TableSkeleton } from "./fs-ui/TableSkeleton.js";
+import { Pagination } from "./fs-ui/Pagination.js";
+import { ShortcutHelp, isTypingTarget } from "./fs-ui/ShortcutHelp.js";
+import { MobilePrimaryAction } from "./fs-ui/MobilePrimaryAction.js";
 const emptyDraft = { name: "", description: "", active: true };
+const COLS = [340, 380, 128, 56];
+const SHORTCUTS = [
+    [["/"], "Zoeken"],
+    [["N"], "Nieuw pickstation"],
+    [["J", "K"], "Volgende / vorige station"],
+    [["Enter"], "Geselecteerd station openen"],
+    [["Esc"], "Zoeken wissen / sluiten"],
+    [["?"], "Dit overzicht"],
+];
 function publicUrl(slug) {
     const origin = typeof window !== "undefined" ? window.location.origin : "";
     return `${origin}/pickstation/${slug ?? ""}`;
 }
 function StationPrintplek({ station }) {
     const { plekken, printplekId, printplekNaam, gekoppeld, laden, koppel, ontkoppel } = useKoppelingVoorBron("pickstation", station.id, station.name);
-    return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: `plek-${station.id}`, children: "Printplek" }), _jsxs(Select, { value: printplekId ?? undefined, onValueChange: (id) => void koppel(id), disabled: laden, children: [_jsx(SelectTrigger, { id: `plek-${station.id}`, children: _jsx(SelectValue, { placeholder: "Kies een printplek" }) }), _jsx(SelectContent, { children: plekken.map((p) => (_jsx(SelectItem, { value: p.id, children: p.naam }, p.id))) })] }), gekoppeld ? (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("p", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Printer, { className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "truncate", children: printplekNaam })] }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => void ontkoppel(), children: [_jsx(Unlink, { className: "mr-2 h-4 w-4" }), " Loskoppelen"] })] })) : (_jsxs("p", { className: "flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/5 px-2 py-1.5 text-sm text-destructive", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0" }), "Nog geen printplek gekoppeld \u2014 de opdracht blijft in de wachtrij staan."] }))] }));
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: `plek-${station.id}`, children: "Printplek" }), _jsxs(Select, { value: printplekId ?? undefined, onValueChange: (id) => void koppel(id), disabled: laden, children: [_jsx(SelectTrigger, { id: `plek-${station.id}`, children: _jsx(SelectValue, { placeholder: "Kies een printplek" }) }), _jsx(SelectContent, { children: plekken.map((p) => (_jsx(SelectItem, { value: p.id, children: p.naam }, p.id))) })] }), gekoppeld ? (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("p", { className: "flex min-w-0 items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Printer, { className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "truncate", children: printplekNaam })] }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => void ontkoppel(), children: [_jsx(Unlink, { className: "mr-2 h-4 w-4" }), " Loskoppelen"] })] })) : (_jsxs("p", { className: "flex items-start gap-2 text-sm text-warning", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0" }), "Kies een printplek, anders wordt er niets geprint."] }))] }));
 }
 export function PickstationsPage() {
-    const { data: stations, isLoading } = usePickStations();
+    const { data: stations, isLoading, dataUpdatedAt } = usePickStations();
     const queryClient = useQueryClient();
     const [draft, setDraft] = useState(null);
-    const safeStations = Array.isArray(stations) ? stations : [];
+    const [confirmDelete, setConfirmDelete] = useState(null);
+    const [panelId, setPanelId] = useState(null);
+    const [tab, setTab] = useState("active");
+    const [search, setSearch] = useState("");
+    const [multi, setMulti] = useState("all");
+    const [country, setCountry] = useState("all");
+    const [filtersOpen, setFiltersOpen] = useState(false);
+    const [helpOpen, setHelpOpen] = useState(false);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(25);
+    const [focused, setFocused] = useState(null);
+    const searchRef = useRef(null);
+    const safeStations = useMemo(() => (Array.isArray(stations) ? stations : []), [stations]);
+    const filteredNoTab = useMemo(() => {
+        const q = search.trim().toLowerCase();
+        return safeStations.filter((s) => {
+            if (q && !`${s.name} ${s.description ?? ""}`.toLowerCase().includes(q))
+                return false;
+            if (multi !== "all" && s.allow_multi_screen !== (multi === "yes"))
+                return false;
+            if (country !== "all" && s.require_country_selection !== (country === "yes"))
+                return false;
+            return true;
+        });
+    }, [safeStations, search, multi, country]);
+    const counts = {
+        active: filteredNoTab.filter((s) => s.active).length,
+        inactive: filteredNoTab.filter((s) => !s.active).length,
+        all: filteredNoTab.length,
+    };
+    const rows = filteredNoTab.filter((s) => (tab === "all" ? true : tab === "active" ? s.active : !s.active));
+    const pageRows = rows.slice((page - 1) * pageSize, page * pageSize);
+    const panelStation = safeStations.find((s) => s.id === panelId) ?? null;
+    useEffect(() => setPage(1), [tab, search, multi, country, pageSize]);
     const save = useMutation({
         mutationFn: async (d) => {
             await pickApi.upsert("pick_stations", {
@@ -37,7 +95,7 @@ export function PickstationsPage() {
             setDraft(null);
             queryClient.invalidateQueries({ queryKey: ["pick", "stations"] });
         },
-        onError: (e) => toast.error(e instanceof Error ? e.message : "Opslaan mislukt."),
+        onError: (e) => toast.error(plainError(e, "Opslaan lukt niet, probeer het opnieuw.")),
     });
     const remove = useMutation({
         mutationFn: async (id) => {
@@ -45,9 +103,11 @@ export function PickstationsPage() {
         },
         onSuccess: () => {
             toast.success("Pickstation verwijderd.");
+            setConfirmDelete(null);
+            setPanelId(null);
             queryClient.invalidateQueries({ queryKey: ["pick", "stations"] });
         },
-        onError: (e) => toast.error(e instanceof Error ? e.message : "Verwijderen mislukt."),
+        onError: (e) => toast.error(plainError(e, "Verwijderen lukt niet, probeer het opnieuw.")),
     });
     const copyLink = async (station) => {
         const url = publicUrl(station.slug);
@@ -59,13 +119,82 @@ export function PickstationsPage() {
             toast.error(url);
         }
     };
-    return (_jsxs("main", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold text-foreground", children: "Pickstations" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Beheer je pickstations en de link die je met de medewerkers deelt." })] }), _jsxs(Button, { onClick: () => setDraft({ ...emptyDraft }), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Nieuw pickstation"] })] }), _jsx(ReferentiedataBanner, {}), isLoading ? (_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Laden..."] })) : safeStations.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nog geen pickstations." })) : (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3", children: safeStations.map((station) => (_jsx(Card, { className: "border-2", children: _jsxs(CardContent, { className: "space-y-4 p-6", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold text-foreground", children: station.name }), _jsx("p", { className: "text-sm text-muted-foreground", children: station.description })] }), _jsx("span", { className: "rounded-full px-2 py-1 text-xs font-medium " +
-                                            (station.active
-                                                ? "bg-primary/10 text-primary"
-                                                : "bg-muted text-muted-foreground"), children: station.active ? "Actief" : "Inactief" })] }), _jsx("code", { className: "block truncate rounded bg-muted px-2 py-1 text-xs text-muted-foreground", children: publicUrl(station.slug) }), _jsx(StationPrintplek, { station: station }), _jsx("p", { className: "text-sm text-muted-foreground", children: DOCUMENT_AUTO_TEXT }), _jsx(StationDevices, { stationId: station.id, slug: station.slug ?? null }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { className: "flex-1", asChild: true, children: _jsxs("a", { href: publicUrl(station.slug), target: "_blank", rel: "noreferrer", children: [_jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), " Open pickstation"] }) }), _jsxs(Button, { variant: "outline", onClick: () => copyLink(station), children: [_jsx(Copy, { className: "mr-2 h-4 w-4" }), " Link kopi\u00EBren"] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setDraft({
-                                            id: station.id,
-                                            name: station.name,
-                                            description: station.description ?? "",
-                                            active: station.active,
-                                        }), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), " Wijzigen"] }), _jsxs(Button, { variant: "ghost", size: "sm", className: "text-destructive", onClick: () => remove.mutate(station.id), children: [_jsx(Trash2, { className: "mr-2 h-4 w-4" }), " Verwijderen"] })] })] }) }, station.id))) })), _jsx(Dialog, { open: draft !== null, onOpenChange: (open) => !open && setDraft(null), children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: draft?.id ? "Pickstation wijzigen" : "Nieuw pickstation" }) }), draft && (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "station-name", children: "Naam" }), _jsx(Input, { id: "station-name", value: draft.name, onChange: (e) => setDraft({ ...draft, name: e.target.value }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "station-desc", children: "Omschrijving (optioneel)" }), _jsx(Textarea, { id: "station-desc", value: draft.description, onChange: (e) => setDraft({ ...draft, description: e.target.value }) })] }), _jsxs("div", { className: "flex items-center justify-between rounded-md border px-3 py-2", children: [_jsx(Label, { htmlFor: "station-active", children: "Actief" }), _jsx(Switch, { id: "station-active", checked: draft.active, onCheckedChange: (v) => setDraft({ ...draft, active: v }) })] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => setDraft(null), children: "Annuleren" }), _jsxs(Button, { disabled: !draft.name.trim() || save.isPending, onClick: () => save.mutate(draft), children: [save.isPending && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), " Opslaan"] })] })] }))] }) })] }));
+    const openStation = (s) => window.open(publicUrl(s.slug), "_blank", "noreferrer");
+    const edit = (s) => setDraft({ id: s.id, name: s.name, description: s.description ?? "", active: s.active });
+    // Sneltoetsen zoals Verkooporders; nooit tijdens typen.
+    useEffect(() => {
+        const onKey = (e) => {
+            if (e.metaKey || e.ctrlKey || e.altKey || isTypingTarget(e.target))
+                return;
+            if (draft || confirmDelete || panelId || filtersOpen || helpOpen)
+                return;
+            const idx = pageRows.findIndex((r) => r.id === focused);
+            if (e.key === "/") {
+                e.preventDefault();
+                searchRef.current?.focus();
+            }
+            else if (e.key === "n" || e.key === "N") {
+                e.preventDefault();
+                setDraft({ ...emptyDraft });
+            }
+            else if (e.key === "j" || e.key === "J") {
+                e.preventDefault();
+                const n = pageRows[Math.min(pageRows.length - 1, idx + 1)];
+                if (n)
+                    setFocused(n.id);
+            }
+            else if (e.key === "k" || e.key === "K") {
+                e.preventDefault();
+                const n = pageRows[Math.max(0, idx - 1)];
+                if (n)
+                    setFocused(n.id);
+            }
+            else if (e.key === "Enter" && focused) {
+                e.preventDefault();
+                setPanelId(focused);
+            }
+            else if (e.key === "Escape") {
+                if (search)
+                    setSearch("");
+                else
+                    setFocused(null);
+            }
+            else if (e.key === "?") {
+                e.preventDefault();
+                setHelpOpen(true);
+            }
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [pageRows, focused, search, draft, confirmDelete, panelId, filtersOpen, helpOpen]);
+    const statusIcon = (s) => (_jsx(StatusIcon, { tone: s.active ? "ok" : "off", label: s.active ? "Actief" : "Uitgezet", showLabel: true }));
+    const menu = (s) => (_jsx(RowMenu, { label: `Acties voor ${s.name}`, items: [
+            { label: "Pickstation openen", onSelect: () => openStation(s) },
+            { label: "Link kopiëren", onSelect: () => void copyLink(s) },
+            { label: "Printplek en apparaten", onSelect: () => setPanelId(s.id) },
+            { label: "Wijzigen", onSelect: () => edit(s) },
+            { label: "Verwijderen", onSelect: () => setConfirmDelete(s), destructive: true, separatorBefore: true },
+        ] }));
+    const columns = [
+        { key: "name", header: "Station", width: COLS[0], cell: (s) => _jsx(TwoLine, { top: s.name, bottom: s.description ?? "" }) },
+        { key: "link", header: "Link voor medewerkers", width: COLS[1], cell: (s) => _jsx(TwoLine, { top: `/pickstation/${s.slug ?? ""}`, bottom: "Open of kopieer via het menu" }) },
+        { key: "status", header: "Status", width: COLS[2], cell: statusIcon },
+        { key: "menu", header: "", width: COLS[3], cell: menu },
+    ];
+    const yesNoLabel = { yes: "Ja", no: "Nee" };
+    const chips = [
+        ...(multi !== "all" ? [{ key: "multi", label: `Meerdere schermen: ${yesNoLabel[multi]}`, onClear: () => setMulti("all") }] : []),
+        ...(country !== "all" ? [{ key: "country", label: `Land kiezen: ${yesNoLabel[country]}`, onClear: () => setCountry("all") }] : []),
+    ];
+    const clearAll = () => { setMulti("all"); setCountry("all"); };
+    const YesNoField = ({ id, label, value, onChange }) => (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: id, children: label }), _jsxs(Select, { value: value, onValueChange: (v) => onChange(v), children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "Alles" }), _jsx(SelectItem, { value: "yes", children: "Ja" }), _jsx(SelectItem, { value: "no", children: "Nee" })] })] })] }));
+    return (_jsxs("main", { className: "flex w-full min-w-0 flex-col gap-4 overflow-x-clip p-4 pb-[calc(7rem+env(safe-area-inset-bottom))] sm:p-6 sm:pb-24", children: [_jsx(PageHeader, { title: "Pickstations", updated: _jsx(UpdatedAt, { at: dataUpdatedAt, info: DOCUMENT_AUTO_TEXT }), actions: _jsxs(Button, { size: "sm", className: "hidden sm:inline-flex", onClick: () => setDraft({ ...emptyDraft }), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Nieuw pickstation", _jsx(KbdHint, { k: "N" })] }) }), _jsx(ReferentiedataBanner, {}), _jsx(PillTabs, { label: "Status pickstation", value: tab, onChange: setTab, tabs: [
+                    { id: "active", label: "Actief", count: counts.active },
+                    { id: "inactive", label: "Uitgezet", count: counts.inactive },
+                    { id: "all", label: "Alle", count: counts.all },
+                ] }), _jsx(Toolbar, { search: _jsx(SearchInput, { ref: searchRef, value: search, onChange: setSearch, placeholder: "Zoek op naam of omschrijving" }), filterCount: chips.length, onOpenFilters: () => setFiltersOpen(true), chips: _jsx(FilterChips, { chips: chips, onClearAll: clearAll }) }), _jsx("div", { className: "w-full min-w-0 overflow-clip rounded-xl border border-border bg-card shadow-sm", children: isLoading ? (_jsx(TableSkeleton, { cols: COLS })) : rows.length === 0 ? (_jsx(EmptyState, { icon: _jsx(Warehouse, { className: "h-6 w-6" }), title: safeStations.length === 0 ? "Nog geen pickstations" : "Geen pickstations gevonden", text: safeStations.length === 0 ? "Maak een pickstation en deel de link met de medewerkers." : "Pas de zoekterm of filters aan.", action: safeStations.length === 0 ? (_jsxs(Button, { size: "sm", onClick: () => setDraft({ ...emptyDraft }), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Nieuw pickstation"] })) : chips.length > 0 || search ? (_jsx(Button, { size: "sm", variant: "outline", onClick: () => { clearAll(); setSearch(""); }, children: "Alles wissen" })) : undefined })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden md:block", children: _jsx(DataTable, { label: "Pickstations", columns: columns, rows: pageRows, rowKey: (s) => s.id, focusedKey: focused, onOpen: (s) => { setFocused(s.id); setPanelId(s.id); } }) }), _jsx("ul", { className: "divide-y divide-border md:hidden", children: pageRows.map((s) => (_jsxs("li", { className: "flex items-center gap-3 p-4", onClick: () => setPanelId(s.id), children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-semibold text-foreground", children: s.name }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: s.description || `/pickstation/${s.slug ?? ""}` }), _jsx("div", { className: "mt-1", children: statusIcon(s) })] }), menu(s)] }, s.id))) })] })) }), !isLoading && rows.length > 0 && (_jsx(Pagination, { page: page, pageSize: pageSize, total: rows.length, onPage: setPage, onPageSize: setPageSize })), _jsxs(MobilePrimaryAction, { label: "Nieuw pickstation", onClick: () => setDraft({ ...emptyDraft }), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), " Nieuw pickstation"] }), _jsxs(FiltersSheet, { open: filtersOpen, onOpenChange: setFiltersOpen, onClearAll: clearAll, children: [_jsx(YesNoField, { id: "f-multi", label: "Meerdere schermen toegestaan", value: multi, onChange: setMulti }), _jsx(YesNoField, { id: "f-country", label: "Land kiezen verplicht", value: country, onChange: setCountry })] }), _jsx(SidePanel, { open: panelStation !== null, onOpenChange: (o) => !o && setPanelId(null), title: panelStation?.name ?? "Pickstation", footer: panelStation && (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => edit(panelStation), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), " Wijzigen"] }), _jsx(Button, { size: "sm", asChild: true, children: _jsxs("a", { href: publicUrl(panelStation.slug), target: "_blank", rel: "noreferrer", children: [_jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), " Pickstation openen"] }) })] })), children: panelStation && (_jsxs(_Fragment, { children: [panelStation.description && _jsx("p", { className: "text-sm text-muted-foreground", children: panelStation.description }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Link voor medewerkers" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("code", { className: "min-w-0 flex-1 truncate rounded bg-muted px-2 py-1.5 text-xs text-muted-foreground", children: publicUrl(panelStation.slug) }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => void copyLink(panelStation), children: [_jsx(Copy, { className: "mr-2 h-4 w-4" }), " Kopi\u00EBren"] })] })] }), _jsx(StationPrintplek, { station: panelStation }), _jsx("p", { className: "text-sm text-muted-foreground", children: DOCUMENT_AUTO_TEXT }), _jsx(StationDevices, { stationId: panelStation.id, slug: panelStation.slug ?? null })] })) }), _jsx(ShortcutHelp, { open: helpOpen, onOpenChange: setHelpOpen, shortcuts: SHORTCUTS }), _jsx(AlertDialog, { open: confirmDelete !== null, onOpenChange: (o) => !o && setConfirmDelete(null), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Pickstation verwijderen?" }), _jsxs(AlertDialogDescription, { children: [confirmDelete?.name, " verdwijnt, en de link werkt daarna niet meer. Dit kun je niet ongedaan maken."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Annuleren" }), _jsxs(AlertDialogAction, { className: "bg-destructive text-destructive-foreground hover:bg-destructive/90", onClick: (e) => {
+                                        e.preventDefault();
+                                        if (confirmDelete)
+                                            remove.mutate(confirmDelete.id);
+                                    }, children: [remove.isPending && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), " Verwijderen"] })] })] }) }), _jsx(Dialog, { open: draft !== null, onOpenChange: (open) => !open && setDraft(null), children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: draft?.id ? "Pickstation wijzigen" : "Nieuw pickstation" }) }), draft && (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "station-name", children: "Naam" }), _jsx(Input, { id: "station-name", value: draft.name, onChange: (e) => setDraft({ ...draft, name: e.target.value }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "station-desc", children: "Omschrijving (optioneel)" }), _jsx(Textarea, { id: "station-desc", value: draft.description, onChange: (e) => setDraft({ ...draft, description: e.target.value }) })] }), _jsxs("div", { className: "flex items-center justify-between rounded-md border px-3 py-2", children: [_jsx(Label, { htmlFor: "station-active", children: "Actief" }), _jsx(Switch, { id: "station-active", checked: draft.active, onCheckedChange: (v) => setDraft({ ...draft, active: v }) })] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => setDraft(null), children: "Annuleren" }), _jsxs(Button, { disabled: !draft.name.trim() || save.isPending, onClick: () => save.mutate(draft), children: [save.isPending && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), " Opslaan"] })] })] }))] }) })] }));
 }

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+export interface Column<T> {
+    key: string;
+    header: string;
+    width: number;
+    cell: (row: T) => ReactNode;
+}
+/** Tabel exact als Verkooporders: table-fixed, colgroup in px, min 900 px, kop 40 px/11 px, rij 60 px, selectiestreep 3 px. */
+export declare function DataTable<T>({ columns, rows, rowKey, focusedKey, onOpen, label }: {
+    columns: Column<T>[];
+    rows: T[];
+    rowKey: (r: T) => string;
+    focusedKey?: string | null;
+    onOpen?: (r: T) => void;
+    label: string;
+}): import("react").JSX.Element;
+/** Cel met hooguit twee regels: 14 px en 12 px grijs, afgekapt met volledige tekst als title. */
+export declare function TwoLine({ top, bottom }: {
+    top: ReactNode;
+    bottom?: ReactNode;
+}): 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,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,MAAM,CAAC,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;CAC7B;AAED,+HAA+H;AAC/H,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IAAC,IAAI,EAAE,CAAC,EAAE,CAAC;IAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,+BAiCnN;AAED,iGAAiG;AACjG,wBAAgB,OAAO,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE;IAAE,GAAG,EAAE,SAAS,CAAC;IAAC,MAAM,CAAC,EAAE,SAAS,CAAA;CAAE,+BAO9E"}

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Tabel exact als Verkooporders: table-fixed, colgroup in px, min 900 px, kop 40 px/11 px, rij 60 px, selectiestreep 3 px. */
+export function DataTable({ columns, rows, rowKey, focusedKey, onOpen, label }) {
+    return (_jsxs("table", { "aria-label": label, className: "w-full min-w-[900px] table-fixed caption-bottom text-sm [&_thead_th]:sticky [&_thead_th]:top-0 [&_thead_th]:z-10 [&_thead_th]:h-10 [&_thead_th]:bg-card [&_thead_th]:text-[11px] [&_thead_th]:font-semibold [&_thead_th]:uppercase [&_thead_th]:tracking-wide [&_thead_th]:text-muted-foreground", children: [_jsx("colgroup", { children: columns.map((c) => _jsx("col", { style: { width: `${c.width}px` } }, c.key)) }), _jsx("thead", { children: _jsx("tr", { className: "border-b border-border", children: columns.map((c) => _jsx("th", { scope: "col", className: "px-2 text-left align-middle", children: c.header }, c.key)) }) }), _jsx("tbody", { children: rows.map((r) => {
+                    const k = rowKey(r);
+                    const focused = focusedKey === k;
+                    return (_jsx("tr", { "data-focused": focused ? "true" : undefined, onClick: () => onOpen?.(r), style: { height: 60 }, className: "group cursor-pointer border-b border-border transition-colors last:border-0 hover:bg-muted/50 " + (focused ? "bg-muted/60" : ""), children: columns.map((c, i) => (_jsxs("td", { className: "relative min-w-0 overflow-hidden px-2 py-0 align-middle " + (i === 0 ? "" : ""), children: [i === 0 && focused && _jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 w-[3px] bg-primary" }), c.cell(r)] }, c.key))) }, k));
+                }) })] }));
+}
+/** Cel met hooguit twee regels: 14 px en 12 px grijs, afgekapt met volledige tekst als title. */
+export function TwoLine({ top, bottom }) {
+    return (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm text-foreground", title: typeof top === "string" ? top : undefined, children: top }), bottom != null && bottom !== "" && _jsx("div", { className: "truncate text-xs text-muted-foreground", title: typeof bottom === "string" ? bottom : undefined, children: bottom })] }));
+}

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,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,SAAS,CAAA;CAAE,+BAa9H"}

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,15 @@
+import type { ReactNode } from "react";
+export declare function FilterChip({ label, onClear, icon }: {
+    label: string;
+    onClear: () => void;
+    icon?: ReactNode;
+}): import("react").JSX.Element;
+export declare function FilterChips({ chips, onClearAll }: {
+    chips: {
+        key: string;
+        label: string;
+        onClear: () => void;
+    }[];
+    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,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,+BAQ5G;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE;IAAE,KAAK,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,EAAE,CAAC;IAAC,UAAU,EAAE,MAAM,IAAI,CAAA;CAAE,sCAY1I"}

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { X } from "lucide-react";
+export function FilterChip({ label, onClear, icon }) {
+    return (_jsxs("button", { type: "button", onClick: onClear, "aria-label": `Filter ${label} wissen`, className: "inline-flex h-8 items-center gap-1.5 rounded-full border border-border bg-muted px-3 text-xs font-medium text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [icon, label, _jsx(X, { className: "h-3.5 w-3.5", "aria-hidden": true })] }));
+}
+export function FilterChips({ chips, onClearAll }) {
+    if (chips.length === 0)
+        return null;
+    return (_jsxs(_Fragment, { children: [chips.map((c) => (_jsx(FilterChip, { label: c.label, onClear: c.onClear }, c.key))), _jsx("button", { type: "button", onClick: onClearAll, className: "h-8 px-2 text-xs font-medium text-muted-foreground hover:text-foreground", children: "Alles wissen" })] }));
+}

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+/** Zijpaneel rechts (op Dialog gebouwd, core heeft geen Sheet). */
+export declare function SidePanel({ open, onOpenChange, title, children, footer }: {
+    open: boolean;
+    onOpenChange: (o: boolean) => void;
+    title: string;
+    children: ReactNode;
+    footer?: ReactNode;
+}): import("react").JSX.Element;
+export declare function FiltersSheet({ open, onOpenChange, children, onClearAll }: {
+    open: boolean;
+    onOpenChange: (o: boolean) => void;
+    children: ReactNode;
+    onClearAll: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=FiltersSheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FiltersSheet.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/FiltersSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,mEAAmE;AACnE,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAC;IAAC,MAAM,CAAC,EAAE,SAAS,CAAA;CAAE,+BAYvL;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAC;IAAC,UAAU,EAAE,MAAM,IAAI,CAAA;CAAE,+BAgB5K"}

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle } from "@flowselections/core";
+/** Zijpaneel rechts (op Dialog gebouwd, core heeft geen Sheet). */
+export function SidePanel({ open, onOpenChange, title, children, footer }) {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "left-auto right-0 top-0 flex h-[100dvh] max-h-[100dvh] w-full max-w-md translate-x-0 translate-y-0 flex-col gap-4 overflow-y-auto rounded-none border-l p-6 sm:rounded-none", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: title }) }), _jsx("div", { className: "flex-1 space-y-5", children: children }), footer && _jsx("div", { className: "flex justify-end gap-2 border-t border-border pt-4", children: footer })] }) }));
+}
+export function FiltersSheet({ open, onOpenChange, children, onClearAll }) {
+    return (_jsx(SidePanel, { open: open, onOpenChange: onOpenChange, title: "Filters", footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", size: "sm", onClick: onClearAll, children: "Alles wissen" }), _jsx(Button, { size: "sm", onClick: () => onOpenChange(false), children: "Klaar" })] }), children: children }));
+}

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

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+/** Infoballon (referentie 1): opent bij aanwijzen, focus én tikken. */
+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,uEAAuE;AACvE,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,+BAyCA"}

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "@flowselections/core";
+/** Infoballon (referentie 1): opent bij aanwijzen, focus én tikken. */
+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/KpiTile.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# 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":"AAEA,OAAO,EAAE,CAAC"}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+/** Vaste primaire knop onderin, alleen onder 768 px. */
+export declare function MobilePrimaryAction({ onClick, children, label }: {
+    onClick: () => void;
+    children: ReactNode;
+    label: string;
+}): import("react").JSX.Element;
+//# 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;AAGvC,wDAAwD;AACxD,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,+BAM5H"}

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "@flowselections/core";
+/** Vaste primaire knop onderin, alleen onder 768 px. */
+export function MobilePrimaryAction({ onClick, children, label }) {
+    return (_jsx("div", { className: "fixed inset-x-0 bottom-0 z-30 border-t border-border bg-background/95 p-4 pb-[calc(1rem+env(safe-area-inset-bottom))] backdrop-blur sm:hidden", children: _jsx(Button, { className: "h-12 w-full", onClick: onClick, "aria-label": label, children: children }) }));
+}

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

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+/** Eén inklapbare balk voor alle meldingen; hooguit 2 zichtbaar, de rest "+ n meldingen". */
+export declare function NoticeBar({ items }: {
+    items: ReactNode[];
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=NoticeBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NoticeBar.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/NoticeBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,6FAA6F;AAC7F,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,SAAS,EAAE,CAAA;CAAE,sCAuB1D"}

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChevronDown, Info } from "lucide-react";
+/** Eén inklapbare balk voor alle meldingen; hooguit 2 zichtbaar, de rest "+ n meldingen". */
+export function NoticeBar({ items }) {
+    const [open, setOpen] = useState(false);
+    const list = items.filter(Boolean);
+    if (list.length === 0)
+        return null;
+    const shown = open ? list : list.slice(0, 2);
+    return (_jsxs("div", { className: "shrink-0 rounded-lg border border-border bg-warning-soft text-sm text-warning-soft-foreground", children: [_jsx("ul", { className: "space-y-1 px-3 py-2", children: shown.map((it, i) => (_jsxs("li", { className: "flex min-w-0 items-start gap-2", children: [_jsx(Info, { className: "mt-0.5 h-4 w-4 shrink-0", "aria-hidden": true }), _jsx("div", { className: "min-w-0 flex-1", children: it })] }, i))) }), list.length > 2 && (_jsxs("button", { type: "button", "aria-expanded": open, onClick: () => setOpen((o) => !o), className: "flex w-full items-center gap-2 border-t border-border/60 px-3 py-1.5 text-left text-xs font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [open ? "Minder tonen" : `+ ${list.length - 2} meldingen`, _jsx(ChevronDown, { className: "ml-auto h-4 w-4 transition-transform " + (open ? "rotate-180" : ""), "aria-hidden": true })] }))] }));
+}

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+/** Paginakop zoals Verkooporders: h1, "Bijgewerkt", rechts de knoppen. */
+export declare function PageHeader({ title, updated, actions }: {
+    title: string;
+    updated?: ReactNode;
+    actions?: ReactNode;
+}): import("react").JSX.Element;
+/** Kbd-hint in een primaire knop, alleen vanaf tablet. */
+export declare function KbdHint({ k }: {
+    k: string;
+}): 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,0EAA0E;AAC1E,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAAC,OAAO,CAAC,EAAE,SAAS,CAAA;CAAE,+BAUlH;AAED,0DAA0D;AAC1D,wBAAgB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE;IAAE,CAAC,EAAE,MAAM,CAAA;CAAE,+BAM3C"}

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Paginakop zoals Verkooporders: h1, "Bijgewerkt", rechts de knoppen. */
+export function PageHeader({ title, updated, actions }) {
+    return (_jsxs("header", { className: "shrink-0 grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 sm:flex sm:flex-wrap sm:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "truncate text-xl font-bold leading-tight tracking-tight text-foreground sm:text-2xl", children: title }), updated] }), actions && _jsx("div", { className: "flex items-center gap-2", children: actions })] }));
+}
+/** Kbd-hint in een primaire knop, alleen vanaf tablet. */
+export function KbdHint({ k }) {
+    return (_jsx("kbd", { "aria-hidden": true, className: "ml-2 hidden rounded border border-primary-foreground/30 bg-primary-foreground/15 px-1.5 font-mono text-[10px] leading-4 text-primary-foreground sm:inline-block", children: k }));
+}

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

@@ -0,0 +1,8 @@
+export declare function Pagination({ page, pageSize, total, onPage, onPageSize }: {
+    page: number;
+    pageSize: number;
+    total: number;
+    onPage: (p: number) => void;
+    onPageSize: (n: number) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/Pagination.tsx"],"names":[],"mappings":"AAGA,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,UAAU,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,+BAqBxL"}

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@flowselections/core";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+export function Pagination({ page, pageSize, total, onPage, onPageSize }) {
+    const totalPages = Math.max(1, Math.ceil(total / pageSize));
+    return (_jsxs("nav", { "aria-label": "Paginering", className: "shrink-0 flex flex-wrap items-center justify-between gap-3 text-sm text-muted-foreground", children: [_jsx("div", { className: "tabular-nums", children: total === 0 ? "Geen resultaten" : `${(page - 1) * pageSize + 1}–${Math.min(page * pageSize, total)} van ${total}` }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "hidden items-center gap-2 sm:flex", children: [_jsx("span", { children: "Per pagina" }), _jsxs(Select, { value: String(pageSize), onValueChange: (v) => onPageSize(Number(v)), children: [_jsx(SelectTrigger, { className: "h-8 w-20", "aria-label": "Resultaten per pagina", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: [10, 25, 50, 100].map((n) => _jsx(SelectItem, { value: String(n), children: n }, n)) })] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "outline", size: "icon", className: "h-10 w-10 sm:h-8 sm:w-8", onClick: () => onPage(Math.max(1, page - 1)), disabled: page <= 1, "aria-label": "Vorige pagina", children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsxs("div", { className: "px-2 text-foreground tabular-nums", "aria-current": "page", children: [page, " / ", totalPages] }), _jsx(Button, { variant: "outline", size: "icon", className: "h-10 w-10 sm:h-8 sm:w-8", onClick: () => onPage(Math.min(totalPages, page + 1)), disabled: page >= totalPages, "aria-label": "Volgende pagina", children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] })] })] }));
+}

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

@@ -0,0 +1,17 @@
+import { type ComponentType } from "react";
+export interface PillTab<T extends string> {
+    id: T;
+    label: string;
+    count: number;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+}
+/** Tabbladen exact als StatusTabs uit Verkooporders: één regel, horizontaal scrollen met vervaging. */
+export declare function PillTabs<T extends string>({ tabs, value, onChange, label }: {
+    tabs: PillTab<T>[];
+    value: T;
+    onChange: (t: T) => void;
+    label: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PillTabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PillTabs.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/PillTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAEpE,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS,MAAM;IACvC,EAAE,EAAE,CAAC,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC9C;AAED,uGAAuG;AACvG,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,CAAC,CAAC;IAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,+BA2CrJ"}

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+/** Tabbladen exact als StatusTabs uit Verkooporders: één regel, horizontaal scrollen met vervaging. */
+export function PillTabs({ tabs, value, onChange, label }) {
+    const listRef = useRef(null);
+    useLayoutEffect(() => {
+        const list = listRef.current;
+        const el = list?.querySelector(`[data-tab="${value}"]`);
+        if (el && list && (el.offsetLeft < list.scrollLeft || el.offsetLeft + el.offsetWidth > list.scrollLeft + list.clientWidth)) {
+            list.scrollLeft = el.offsetLeft - 8;
+        }
+    }, [value]);
+    return (_jsx("div", { className: "shrink-0", children: _jsx("div", { ref: listRef, role: "tablist", "aria-label": label, className: "relative -mx-4 flex items-center gap-2 overflow-x-auto px-4 pb-1 [scrollbar-width:none] [mask-image:linear-gradient(to_right,black_85%,transparent)] [&::-webkit-scrollbar]:hidden sm:mx-0 sm:px-0 sm:[mask-image:none]", children: tabs.map((t) => {
+                const active = value === t.id;
+                const Icon = t.icon;
+                return (_jsxs("button", { "data-tab": t.id, type: "button", role: "tab", "aria-selected": active, onClick: () => onChange(t.id), className: "relative flex h-9 items-center gap-2 whitespace-nowrap rounded-lg border px-3 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring " +
+                        (active
+                            ? "border-primary/30 bg-primary/10 font-semibold text-foreground"
+                            : t.count === 0
+                                ? "border-border bg-card text-muted-foreground/70 hover:text-foreground"
+                                : "border-border bg-card text-foreground/80 hover:bg-muted hover:text-foreground"), children: [Icon && _jsx(Icon, { className: "h-4 w-4 shrink-0" }), _jsx("span", { children: t.label }), _jsx("span", { className: "inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[11px] font-semibold tabular-nums " + (active ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"), children: t.count })] }, t.id));
+            }) }) }));
+}

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

@@ -0,0 +1,12 @@
+export interface RowMenuItem {
+    label: string;
+    onSelect: () => void;
+    destructive?: boolean;
+    separatorBefore?: boolean;
+}
+/** Rijmenu exact als Verkooporders (drie puntjes, 32 px). */
+export declare function RowMenu({ label, items }: {
+    label: string;
+    items: RowMenuItem[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=RowMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RowMenu.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/RowMenu.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,6DAA6D;AAC7D,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,+BAkBhF"}