@flowselections/floriday-voorraad 1.0.149 → 1.0.152

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

@@ -0,0 +1,42 @@
+import { type ReactNode } from "react";
+export interface DataColumn<R> {
+    key: string;
+    header: ReactNode;
+    /** Vaste breedte (bijv. "12%" of "96px"); kolommen schalen evenredig mee. */
+    width?: string;
+    /** Sorteersleutel; zonder sleutel is de kolom niet sorteerbaar. */
+    sortKey?: string;
+    render: (row: R) => ReactNode;
+    className?: string;
+}
+/**
+ * Tabel naar de stijlgids: één afgerond vlak, kolomkoppen blijven zichtbaar,
+ * vaste kolombreedtes, alles links, rij 60 px, hover lichtgrijs, actieve rij met
+ * groene streep links, open-knop bij hover. J/K = volgende/vorige rij, Enter = openen
+ * (nooit tijdens typen). Op mobiel (onder 768 px) een kaartenlijst als `mobileCard` is gegeven.
+ */
+export declare function DataTable<R>({ columns, rows, getId, loading, sort, onSort, onOpen, openLabel, selection, empty, mobileCard, rowActions, skeletonRows, keyboard, }: {
+    columns: DataColumn<R>[];
+    rows: R[];
+    getId: (r: R) => string;
+    loading?: boolean;
+    sort?: {
+        key: string;
+        asc: boolean;
+    };
+    onSort?: (key: string) => void;
+    onOpen?: (r: R) => void;
+    openLabel?: string;
+    selection?: {
+        selected: Set<string>;
+        onToggle: (id: string) => void;
+        onToggleAll: (ids: string[]) => void;
+        label: (r: R) => string;
+    };
+    empty?: ReactNode;
+    mobileCard?: (r: R) => ReactNode;
+    rowActions?: (r: R) => ReactNode;
+    skeletonRows?: number;
+    keyboard?: boolean;
+}): 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,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKpE,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAC3B,OAAO,EACP,IAAI,EACJ,KAAK,EACL,OAAO,EACP,IAAI,EACJ,MAAM,EACN,MAAM,EACN,SAAoB,EACpB,SAAS,EACT,KAAK,EACL,UAAU,EACV,UAAU,EACV,YAAgB,EAChB,QAAe,GAChB,EAAE;IACD,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IACzB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,OAAO,CAAA;KAAE,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;QAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;QAAC,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;QAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;KAAE,CAAC;IACrI,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,SAAS,CAAC;IACjC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,+BA0IA"}

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { ArrowDown, ArrowUp, ChevronRight } from "lucide-react";
+import { TableSkeleton } from "./TableSkeleton.js";
+import { isTypen } from "./SearchInput.js";
+/**
+ * Tabel naar de stijlgids: één afgerond vlak, kolomkoppen blijven zichtbaar,
+ * vaste kolombreedtes, alles links, rij 60 px, hover lichtgrijs, actieve rij met
+ * groene streep links, open-knop bij hover. J/K = volgende/vorige rij, Enter = openen
+ * (nooit tijdens typen). Op mobiel (onder 768 px) een kaartenlijst als `mobileCard` is gegeven.
+ */
+export function DataTable({ columns, rows, getId, loading, sort, onSort, onOpen, openLabel = "Openen", selection, empty, mobileCard, rowActions, skeletonRows = 8, keyboard = true, }) {
+    const [actief, setActief] = useState(-1);
+    const rowsRef = useRef(rows);
+    rowsRef.current = rows;
+    const ids = rows.map(getId);
+    useEffect(() => setActief(-1), [ids.join("|")]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        if (!keyboard)
+            return;
+        const h = (e) => {
+            if (e.metaKey || e.ctrlKey || e.altKey || isTypen(e.target))
+                return;
+            if (document.querySelector("[role=dialog]"))
+                return;
+            const n = rowsRef.current.length;
+            if (!n)
+                return;
+            if (e.key === "j" || e.key === "J") {
+                e.preventDefault();
+                setActief((i) => Math.min(n - 1, i + 1));
+            }
+            else if (e.key === "k" || e.key === "K") {
+                e.preventDefault();
+                setActief((i) => Math.max(0, i - 1));
+            }
+            else if (e.key === "Enter" && onOpen) {
+                setActief((i) => { if (i >= 0 && i < n)
+                    onOpen(rowsRef.current[i]); return i; });
+            }
+            else if (e.key === "Escape")
+                setActief(-1);
+        };
+        window.addEventListener("keydown", h);
+        return () => window.removeEventListener("keydown", h);
+    }, [keyboard, onOpen]);
+    useEffect(() => {
+        if (actief < 0)
+            return;
+        document.querySelector(`[data-rij="${actief}"]`)?.scrollIntoView({ block: "nearest" });
+    }, [actief]);
+    const allesGekozen = selection ? ids.length > 0 && ids.every((id) => selection.selected.has(id)) : false;
+    const kolomBreedtes = [selection ? "44px" : undefined, ...columns.map((c) => c.width), onOpen || rowActions ? "96px" : undefined].filter((_, i, a) => i > 0 || a[0] !== undefined);
+    const leeg = !loading && rows.length === 0;
+    const eersteLaad = loading && rows.length === 0;
+    return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-border bg-card shadow-sm", children: [mobileCard && (_jsxs("ul", { className: "divide-y divide-border md:hidden", children: [eersteLaad && Array.from({ length: 5 }).map((_, i) => (_jsxs("li", { className: "space-y-2 p-4", "aria-hidden": true, children: [_jsx("div", { className: "h-4 w-2/3 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-3 w-1/2 animate-pulse rounded bg-muted" })] }, i))), rows.map((r) => (_jsx("li", { className: "transition-opacity duration-150 " + (loading ? "opacity-60" : ""), children: _jsx("div", { role: onOpen ? "button" : undefined, tabIndex: onOpen ? 0 : undefined, onClick: () => onOpen?.(r), onKeyDown: (e) => { if (e.key === "Enter" && onOpen)
+                                onOpen(r); }, className: "block min-h-11 p-4 active:bg-muted/60", children: mobileCard(r) }) }, getId(r)))), leeg && _jsx("li", { children: empty })] })), _jsx("div", { className: (mobileCard ? "hidden md:block " : "") + "max-h-[calc(100vh-12rem)] overflow-auto", children: _jsxs("table", { className: "w-full min-w-[900px] table-fixed text-sm", children: [_jsxs("colgroup", { children: [selection && _jsx("col", { style: { width: "44px" } }), columns.map((c) => _jsx("col", { style: c.width ? { width: c.width } : undefined }, c.key)), (onOpen || rowActions) && _jsx("col", { style: { width: "96px" } })] }), _jsx("thead", { className: "sticky top-0 z-10 bg-card", children: _jsxs("tr", { className: "h-10 border-b border-border", children: [selection && (_jsx("th", { className: "px-3 text-left", children: _jsx("input", { type: "checkbox", className: "h-4 w-4 rounded accent-primary", checked: allesGekozen, onChange: () => selection.onToggleAll(ids), "aria-label": "Alles op deze pagina kiezen" }) })), columns.map((c) => {
+                                        const act = sort && c.sortKey && sort.key === c.sortKey;
+                                        return (_jsx("th", { scope: "col", className: "px-3 text-left text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", "aria-sort": act ? (sort.asc ? "ascending" : "descending") : c.sortKey ? "none" : undefined, children: c.sortKey && onSort ? (_jsxs("button", { type: "button", onClick: () => onSort(c.sortKey), className: "inline-flex items-center gap-1 uppercase hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm " + (act ? "text-foreground" : ""), children: [c.header, act && (sort.asc ? _jsx(ArrowUp, { className: "h-3 w-3" }) : _jsx(ArrowDown, { className: "h-3 w-3" }))] })) : c.header }, c.key));
+                                    }), (onOpen || rowActions) && _jsx("th", { className: "px-3", children: _jsx("span", { className: "sr-only", children: "Acties" }) })] }) }), _jsxs("tbody", { children: [eersteLaad && _jsx(TableSkeleton, { columns: kolomBreedtes, rows: skeletonRows }), rows.map((r, i) => {
+                                    const id = getId(r);
+                                    const isActief = i === actief;
+                                    const gekozen = selection?.selected.has(id);
+                                    return (_jsxs("tr", { "data-rij": i, onClick: () => setActief(i), onDoubleClick: () => onOpen?.(r), className: "group h-[60px] border-b border-border transition-colors duration-150 last:border-0 hover:bg-muted/40 motion-reduce:transition-none " +
+                                            (isActief || gekozen ? "bg-primary/5 shadow-[inset_3px_0_0_var(--primary)] " : "") +
+                                            (loading ? "opacity-60" : ""), children: [selection && (_jsx("td", { className: "px-3", onClick: (e) => e.stopPropagation(), children: _jsx("input", { type: "checkbox", className: "h-4 w-4 rounded accent-primary", checked: !!gekozen, onChange: () => selection.onToggle(id), "aria-label": `Kies ${selection.label(r)}` }) })), columns.map((c) => _jsx("td", { className: "truncate px-3 " + (c.className ?? ""), children: c.render(r) }, c.key)), (onOpen || rowActions) && (_jsx("td", { className: "px-3", onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: "flex items-center justify-end gap-1", children: [rowActions?.(r), onOpen && (_jsx("button", { type: "button", onClick: () => onOpen(r), "aria-label": openLabel, title: openLabel, className: "inline-flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-opacity duration-150 hover:bg-muted hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring " + (isActief ? "opacity-100" : "opacity-0 group-hover:opacity-100"), children: _jsx(ChevronRight, { className: "h-4 w-4" }) }))] }) }))] }, id));
+                                }), leeg && (_jsx("tr", { children: _jsx("td", { colSpan: columns.length + (selection ? 1 : 0) + (onOpen || rowActions ? 1 : 0), children: empty }) }))] })] }) })] }));
+}

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 icoon en kruisje; "Alles wissen" bij meer dan één. */
+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,6FAA6F;AAC7F,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE;IAAE,KAAK,EAAE,UAAU,EAAE,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,sCAoBlG"}

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 icoon en kruisje; "Alles wissen" bij meer dan één. */
+export function FilterChips({ chips, onClearAll }) {
+    if (chips.length === 0)
+        return null;
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", "aria-label": "Actieve filters", children: [chips.map((c) => (_jsxs("span", { className: "inline-flex h-8 items-center gap-1.5 rounded-full border border-primary/30 bg-primary/10 pl-3 pr-1 text-sm text-primary [&_svg]:h-4 [&_svg]:w-4", children: [c.icon, c.label, _jsx("button", { type: "button", onClick: c.onRemove, "aria-label": `Filter ${c.label} wissen`, className: "inline-flex h-6 w-6 items-center justify-center rounded-full hover:bg-primary/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] }, c.key))), onClearAll && chips.length > 1 && (_jsx("button", { type: "button", onClick: onClearAll, className: "h-8 rounded-full px-3 text-sm text-muted-foreground hover:text-foreground", 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,12 @@
+import { type ReactNode } from "react";
+/**
+ * Melding: afgerond vlak met zachte rode of oker achtergrond, icoon links, actie rechts.
+ * Geen technische fouttekst. Op mobiel ingeklapt tot één regel; tik om uit te klappen.
+ */
+export declare function InlineAlert({ tone, children, action, icon, }: {
+    tone?: "fout" | "let_op" | "info";
+    children: ReactNode;
+    action?: ReactNode;
+    icon?: 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;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAe,EACf,QAAQ,EACR,MAAM,EACN,IAAI,GACL,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,+BAyBA"}

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AlertTriangle, ChevronDown, Info, XCircle } from "lucide-react";
+/**
+ * Melding: afgerond vlak met zachte rode of oker achtergrond, icoon links, actie rechts.
+ * Geen technische fouttekst. Op mobiel ingeklapt tot één regel; tik om uit te klappen.
+ */
+export function InlineAlert({ tone = "let_op", children, action, icon, }) {
+    const [open, setOpen] = useState(false);
+    const kleur = tone === "fout" ? "border-destructive/30 bg-destructive/10 text-foreground"
+        : tone === "let_op" ? "border-transparent bg-warning-soft text-warning-soft-foreground"
+            : "border-border bg-muted/50 text-foreground";
+    const Ico = tone === "fout" ? XCircle : tone === "let_op" ? AlertTriangle : Info;
+    return (_jsxs("div", { role: tone === "fout" ? "alert" : "status", className: "flex items-start gap-3 rounded-lg border px-3 py-2.5 text-sm " + kleur, children: [_jsx("span", { className: "mt-0.5 shrink-0 [&_svg]:h-4 [&_svg]:w-4 " + (tone === "fout" ? "text-destructive" : ""), "aria-hidden": true, children: icon ?? _jsx(Ico, {}) }), _jsx("div", { className: "min-w-0 flex-1 " + (open ? "" : "line-clamp-1 sm:line-clamp-none"), children: children }), _jsx("button", { type: "button", onClick: () => setOpen((o) => !o), "aria-expanded": open, "aria-label": open ? "Melding inklappen" : "Melding uitklappen", className: "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-lg sm:hidden", children: _jsx(ChevronDown, { className: "h-4 w-4 transition-transform motion-reduce:transition-none " + (open ? "rotate-180" : "") }) }), action && _jsx("div", { className: "shrink-0", children: action })] }));
+}

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+/**
+ * Rij KPI-tegels: 4 naast elkaar vanaf desktop, 2 op tablet; op mobiel een
+ * veegbare rij (snap per tegel, ca. 78% breed) zonder zichtbare scrollbalk.
+ */
+export declare function KpiRow({ children, label }: {
+    children: ReactNode;
+    label?: string;
+}): 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;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAqB,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BASlG"}

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Rij KPI-tegels: 4 naast elkaar vanaf desktop, 2 op tablet; op mobiel een
+ * veegbare rij (snap per tegel, ca. 78% breed) zonder zichtbare scrollbalk.
+ */
+export function KpiRow({ children, label = "Kerncijfers" }) {
+    return (_jsx("section", { "aria-label": label, className: "-mx-4 flex snap-x snap-mandatory gap-3 overflow-x-auto px-4 pb-1 [scrollbar-width:none] sm:mx-0 sm:grid sm:grid-cols-2 sm:overflow-visible sm:px-0 sm:pb-0 lg:grid-cols-4 [&::-webkit-scrollbar]:hidden [&>*]:w-[78%] [&>*]:shrink-0 [&>*]:snap-start sm:[&>*]: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,13 @@
+import type { ReactNode } from "react";
+/**
+ * Primaire actie op mobiel: vaste, schermbrede knop (48 px) onderin met veilige rand.
+ * Verbergt zich vanaf tablet en wanneer `hidden` (bijv. bij een selectiebalk).
+ */
+export declare function MobilePrimaryAction({ children, onClick, hidden, disabled, icon, }: {
+    children: ReactNode;
+    onClick: () => void;
+    hidden?: boolean;
+    disabled?: boolean;
+    icon?: ReactNode;
+}): 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;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,OAAO,EACP,MAAM,EACN,QAAQ,EACR,IAAI,GACL,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,sCAeA"}

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

@@ -0,0 +1,10 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Primaire actie op mobiel: vaste, schermbrede knop (48 px) onderin met veilige rand.
+ * Verbergt zich vanaf tablet en wanneer `hidden` (bijv. bij een selectiebalk).
+ */
+export function MobilePrimaryAction({ children, onClick, hidden, disabled, icon, }) {
+    if (hidden)
+        return null;
+    return (_jsx("div", { className: "fixed inset-x-0 bottom-0 z-30 border-t border-border bg-background/95 p-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] backdrop-blur md:hidden", 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-medium text-primary-foreground shadow-lg transition-opacity active:opacity-90 disabled:opacity-50 [&_svg]:h-4 [&_svg]:w-4", children: [icon, children] }) }));
+}

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

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+/**
+ * Paginakop: links (kruimel), titel en bijgewerkt-tijd; rechts de acties.
+ * Titel 24 px (20 px mobiel), zonder icoon. Knoppen wrappen netjes.
+ */
+export declare function PageHeader({ title, updated, crumb, media, meta, actions, }: {
+    title: ReactNode;
+    /** Meestal <UpdatedAt />. */
+    updated?: ReactNode;
+    /** Kleine terug-link boven de titel. */
+    crumb?: ReactNode;
+    /** Optioneel beeld links van de titel (bijv. foto van het item). */
+    media?: ReactNode;
+    /** Extra regel onder de titel (status, prijs). */
+    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;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,IAAI,EACJ,OAAO,GACR,EAAE;IACD,KAAK,EAAE,SAAS,CAAC;IACjB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wCAAwC;IACxC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kDAAkD;IAClD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,+BAiBA"}

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Paginakop: links (kruimel), titel en bijgewerkt-tijd; rechts de acties.
+ * Titel 24 px (20 px mobiel), zonder icoon. Knoppen wrappen netjes.
+ */
+export function PageHeader({ title, updated, crumb, media, meta, actions, }) {
+    return (_jsxs("header", { className: "flex flex-col gap-2", children: [crumb && _jsx("div", { className: "text-sm text-muted-foreground", children: crumb }), _jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-1 basis-64 items-start gap-4", children: [media, _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "break-words text-xl font-bold leading-tight tracking-tight text-foreground sm:text-2xl", children: title }), updated && _jsx("div", { className: "mt-1 text-xs text-muted-foreground", children: updated }), meta && _jsx("div", { className: "mt-2 flex flex-wrap items-center gap-2 text-sm", 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,19 @@
+import type { ReactNode } from "react";
+export interface PillTab<T extends string = string> {
+    value: T;
+    label: string;
+    icon?: ReactNode;
+    /** Teller; undefined = geen teller, null = nog laden. */
+    count?: number | null;
+}
+/**
+ * Tabbladen als pillen met icoon + label + teller. Actief: groene tint en rand,
+ * teller groen gevuld. Leeg (0): gedempte tekst. Mobiel veegbaar met vervaging rechts.
+ */
+export declare function PillTabs<T extends string>({ tabs, value, onChange, label, }: {
+    tabs: PillTab<T>[];
+    value: T;
+    onChange: (v: 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,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAChD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,EACzC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAkB,GACnB,EAAE;IACD,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACnB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,+BA0CA"}

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Tabbladen als pillen met icoon + label + teller. Actief: groene tint en rand,
+ * teller groen gevuld. Leeg (0): gedempte tekst. Mobiel veegbaar met vervaging rechts.
+ */
+export function PillTabs({ tabs, value, onChange, label = "Weergave", }) {
+    return (_jsxs("div", { className: "relative", children: [_jsx("div", { role: "tablist", "aria-label": label, className: "flex gap-2 overflow-x-auto pr-6 [scrollbar-width:none] sm:flex-wrap sm:overflow-visible sm:pr-0 [&::-webkit-scrollbar]:hidden", children: tabs.map((t) => {
+                    const actief = t.value === value;
+                    const leeg = t.count === 0 && !actief;
+                    return (_jsxs("button", { type: "button", role: "tab", "aria-selected": actief, onClick: () => onChange(t.value), className: "inline-flex h-9 shrink-0 items-center gap-2 whitespace-nowrap rounded-lg border px-3 text-sm font-medium transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none [&_svg]:h-4 [&_svg]:w-4 " +
+                            (actief
+                                ? "border-primary/40 bg-primary/10 text-primary"
+                                : leeg
+                                    ? "border-transparent text-muted-foreground/70 hover:bg-muted"
+                                    : "border-transparent text-muted-foreground hover:bg-muted hover:text-foreground"), children: [t.icon, t.label, t.count !== undefined && (_jsx("span", { className: "inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs tabular-nums " +
+                                    (actief ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"), children: t.count === null ? "…" : t.count.toLocaleString("nl-NL") }))] }, t.value));
+                }) }), _jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-y-0 right-0 w-6 bg-gradient-to-l from-background to-transparent sm:hidden" })] }));
+}

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

@@ -0,0 +1,14 @@
+/** True als de gebruiker in een invoerveld typt (sneltoetsen doen dan niets). */
+export declare function isTypen(t: EventTarget | null): boolean;
+/**
+ * Zoekveld: filtert tijdens typen (250 ms), één zachte focusring, wis-kruisje,
+ * "/" focust (niet tijdens typen elders), Esc wist. Mobiel 40 px hoog met 16 px tekst.
+ */
+export declare function SearchInput({ value, onChange, placeholder, label, delay, }: {
+    value: string;
+    onChange: (v: string) => void;
+    placeholder?: string;
+    label?: string;
+    delay?: number;
+}): import("react").JSX.Element;
+//# sourceMappingURL=SearchInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/SearchInput.tsx"],"names":[],"mappings":"AAGA,iFAAiF;AACjF,wBAAgB,OAAO,CAAC,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,CAItD;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,WAAuB,EACvB,KAAgB,EAChB,KAAW,GACZ,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,+BAiDA"}

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Search, X } from "lucide-react";
+/** True als de gebruiker in een invoerveld typt (sneltoetsen doen dan niets). */
+export function isTypen(t) {
+    const el = t;
+    if (!el)
+        return false;
+    return el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT" || el.isContentEditable;
+}
+/**
+ * Zoekveld: filtert tijdens typen (250 ms), één zachte focusring, wis-kruisje,
+ * "/" focust (niet tijdens typen elders), Esc wist. Mobiel 40 px hoog met 16 px tekst.
+ */
+export function SearchInput({ value, onChange, placeholder = "Zoeken…", label = "Zoeken", delay = 250, }) {
+    const [tekst, setTekst] = useState(value);
+    const ref = useRef(null);
+    const laatst = useRef(value);
+    useEffect(() => {
+        if (value !== laatst.current) {
+            laatst.current = value;
+            setTekst(value);
+        }
+    }, [value]);
+    useEffect(() => {
+        if (tekst === laatst.current)
+            return;
+        const t = setTimeout(() => { laatst.current = tekst; onChange(tekst); }, delay);
+        return () => clearTimeout(t);
+    }, [tekst, delay, onChange]);
+    useEffect(() => {
+        const h = (e) => {
+            if (e.key === "/" && !e.metaKey && !e.ctrlKey && !e.altKey && !isTypen(e.target)) {
+                e.preventDefault();
+                ref.current?.focus();
+            }
+        };
+        window.addEventListener("keydown", h);
+        return () => window.removeEventListener("keydown", h);
+    }, []);
+    const wis = () => { setTekst(""); laatst.current = ""; onChange(""); };
+    return (_jsxs("div", { className: "relative w-full max-w-md", children: [_jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": true }), _jsx("input", { ref: ref, type: "search", value: tekst, "aria-label": label, placeholder: placeholder, onChange: (e) => setTekst(e.target.value), onKeyDown: (e) => {
+                    if (e.key === "Escape") {
+                        e.stopPropagation();
+                        if (tekst)
+                            wis();
+                        else
+                            ref.current?.blur();
+                    }
+                }, className: "h-10 w-full rounded-lg border border-input bg-card pl-9 pr-16 text-base text-foreground shadow-sm outline-none transition-shadow duration-150 placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring/40 sm:h-9 sm:text-sm [&::-webkit-search-cancel-button]:hidden" }), _jsx("div", { className: "absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-1", children: tekst ? (_jsx("button", { type: "button", onClick: wis, "aria-label": "Zoekopdracht wissen", className: "inline-flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(X, { className: "h-4 w-4" }) })) : (_jsx("kbd", { className: "hidden rounded-sm border bg-muted px-1.5 text-[11px] text-muted-foreground md:inline", children: "/" })) })] }));
+}

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export type StatusTone = "klaar" | "open" | "bezig" | "fout";
+/**
+ * Klein rond statusicoon met tooltip: groen klaar, grijs open, oker bezig, rood fout.
+ * Geen gekleurde vlakjes eromheen. Het label is de toegankelijke naam.
+ */
+export declare function StatusIcon({ tone, icon, label, detail }: {
+    tone: StatusTone;
+    icon: ReactNode;
+    label: string;
+    detail?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=StatusIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/StatusIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAS7D;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,SAAS,CAAA;CAAE,+BAejI"}

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HoverTip } from "./HoverTip.js";
+const TONE = {
+    klaar: "text-primary",
+    open: "text-muted-foreground",
+    bezig: "text-warning-soft-foreground",
+    fout: "text-destructive",
+};
+/**
+ * Klein rond statusicoon met tooltip: groen klaar, grijs open, oker bezig, rood fout.
+ * Geen gekleurde vlakjes eromheen. Het label is de toegankelijke naam.
+ */
+export function StatusIcon({ tone, icon, label, detail }) {
+    return (_jsx(HoverTip, { label: label, className: "h-6 w-6 [&_svg]:h-4 [&_svg]:w-4 " + TONE[tone], content: _jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-[13px] font-semibold text-foreground", children: label }), detail && _jsx("div", { className: "text-muted-foreground", children: detail })] }), children: icon }));
+}

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

@@ -0,0 +1,7 @@
+/** Skeletrijen in de echte vorm van de tabel (60 px hoog, zelfde kolombreedtes). */
+export declare function TableSkeleton({ columns, rows, media }: {
+    columns: Array<string | undefined>;
+    rows?: number;
+    media?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=TableSkeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/TableSkeleton.tsx"],"names":[],"mappings":"AAEA,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,IAAQ,EAAE,KAAY,EAAE,EAAE;IAAE,OAAO,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,+BAwBxI"}

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Skeleton } from "@flowselections/core";
+/** Skeletrijen in de echte vorm van de tabel (60 px hoog, zelfde kolombreedtes). */
+export function TableSkeleton({ columns, rows = 8, media = true }) {
+    return (_jsx(_Fragment, { children: Array.from({ length: rows }).map((_, r) => (_jsx("tr", { className: "h-[60px] border-b border-border last:border-0", "aria-hidden": true, children: columns.map((w, c) => (_jsx("td", { className: "px-3", style: w ? { width: w } : undefined, children: c === 0 && media ? (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "h-9 w-9 rounded-lg" }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Skeleton, { className: "h-3.5 w-40" }), _jsx(Skeleton, { className: "h-3 w-24" })] })] })) : (_jsx(Skeleton, { className: "h-3.5 w-14" })) }, c))) }, r))) }));
+}

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+/** Werkbalk: zoekbalk links, knoppen (Filters, Kolommen) rechts; chips op de regel eronder. */
+export declare function Toolbar({ children, right, chips }: {
+    children?: ReactNode;
+    right?: ReactNode;
+    chips?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Toolbar.d.ts.map

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

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