@flowselections/mailbox-orders 1.0.53 → 1.0.57

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+export interface Notice {
+    key: string;
+    tone?: "warning" | "error" | "info";
+    title: string;
+    /** Uitklapbare toelichting (nooit een lijst van items). */
+    details?: ReactNode;
+    action?: ReactNode;
+}
+/** Eén melding op één regel; details klappen uit (stijl NoticeBar uit Verkooporders). */
+export declare function NoticeRow({ notice }: {
+    notice: Notice;
+}): import("react").JSX.Element;
+/** Meldingen direct onder de kop: hooguit 2 zichtbaar, de rest achter "+ n meldingen". */
+export declare function NoticeBar({ notices }: {
+    notices: Notice[];
+}): 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,MAAM,WAAW,MAAM;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAQD,yFAAyF;AACzF,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,+BAwBvD;AAED,0FAA0F;AAC1F,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,EAAE,CAAA;CAAE,sCAmB3D"}

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AlertTriangle, ChevronDown, Info, XCircle } from "lucide-react";
+const TONE = {
+    warning: "border-border bg-warning-soft text-warning-soft-foreground",
+    error: "border-destructive/30 bg-destructive/5 text-foreground [&_.nb-icon]:text-destructive",
+    info: "border-border bg-muted/50 text-foreground [&_.nb-icon]:text-muted-foreground",
+};
+/** Eén melding op één regel; details klappen uit (stijl NoticeBar uit Verkooporders). */
+export function NoticeRow({ notice }) {
+    const [open, setOpen] = useState(false);
+    const tone = notice.tone ?? "warning";
+    const Icon = tone === "error" ? XCircle : tone === "info" ? Info : AlertTriangle;
+    return (_jsxs("div", { role: tone === "error" ? "alert" : "status", className: "shrink-0 rounded-lg border text-sm " + TONE[tone], children: [_jsxs("div", { className: "flex items-center gap-2 pr-2", children: [_jsxs("button", { type: "button", "aria-expanded": notice.details ? open : undefined, onClick: () => notice.details && setOpen((o) => !o), className: "flex min-w-0 flex-1 items-center gap-2 rounded-lg px-3 py-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring " + (notice.details ? "" : "cursor-default"), children: [_jsx(Icon, { className: "nb-icon h-4 w-4 shrink-0", "aria-hidden": true }), _jsx("span", { className: "min-w-0 flex-1 truncate font-medium", title: notice.title, children: notice.title }), notice.details && _jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform " + (open ? "rotate-180" : ""), "aria-hidden": true })] }), notice.action && _jsx("div", { className: "shrink-0", children: notice.action })] }), open && notice.details && (_jsx("div", { className: "border-t border-border/60 px-3 py-2 pl-9 opacity-90", children: notice.details }))] }));
+}
+/** Meldingen direct onder de kop: hooguit 2 zichtbaar, de rest achter "+ n meldingen". */
+export function NoticeBar({ notices }) {
+    const [all, setAll] = useState(false);
+    if (notices.length === 0)
+        return null;
+    const visible = all ? notices : notices.slice(0, 2);
+    const rest = notices.length - visible.length;
+    return (_jsxs("div", { className: "flex shrink-0 flex-col gap-2", "aria-live": "polite", children: [visible.map((n) => _jsx(NoticeRow, { notice: n }, n.key)), rest > 0 && (_jsxs("button", { type: "button", onClick: () => setAll(true), className: "self-start rounded-md px-1 text-xs font-medium text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: ["+ ", rest, " ", rest === 1 ? "melding" : "meldingen"] }))] }));
+}

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+/** Paginakop exact als Verkooporders: h1, daaronder alleen "Bijgewerkt", acties rechts. */
+export declare function PageHeader({ title, meta, actions, }: {
+    title: string;
+    meta?: ReactNode;
+    actions?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PageHeader.d.ts.map

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Paginakop exact als Verkooporders: h1, daaronder alleen "Bijgewerkt", acties rechts. */
+export function PageHeader({ title, meta, 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: [_jsx("div", { className: "flex min-w-0 items-center gap-3", children: _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "truncate text-xl font-bold leading-tight sm:text-2xl tracking-tight text-foreground", children: title }), _jsx("p", { className: "flex flex-wrap items-center gap-x-2 text-xs text-muted-foreground", "aria-live": "polite", children: meta })] }) }), actions && _jsx("div", { className: "contents sm:flex sm:flex-wrap sm:items-center sm:gap-2", children: actions })] }));
+}

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

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+export interface PillTab {
+    key: string;
+    label: string;
+    icon?: ReactNode;
+    count?: number | null;
+    hint?: string;
+}
+/** Tabbladen exact als StatusTabs in Verkooporders: één regel, veegbaar met vervaging. */
+export declare function PillTabs({ tabs, active, onSelect, ariaLabel, }: {
+    tabs: PillTab[];
+    active: string;
+    onSelect: (key: string) => void;
+    ariaLabel?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PillTabs.d.ts.map

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,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhE,MAAM,WAAW,OAAO;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,0FAA0F;AAC1F,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAS,GACV,EAAE;IACD,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAyDA"}

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+/** Tabbladen exact als StatusTabs in Verkooporders: één regel, veegbaar met vervaging. */
+export function PillTabs({ tabs, active, onSelect, ariaLabel, }) {
+    const listRef = useRef(null);
+    useLayoutEffect(() => {
+        const measure = () => {
+            const el = listRef.current?.querySelector(`[data-tab="${active}"]`);
+            const list = listRef.current;
+            if (el && list && (el.offsetLeft < list.scrollLeft || el.offsetLeft + el.offsetWidth > list.scrollLeft + list.clientWidth)) {
+                list.scrollLeft = el.offsetLeft - 8;
+            }
+        };
+        measure();
+        window.addEventListener("resize", measure);
+        return () => window.removeEventListener("resize", measure);
+    }, [active]);
+    return (_jsx("div", { className: "shrink-0", children: _jsx("div", { ref: listRef, role: "tablist", "aria-label": ariaLabel, 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 isActive = active === t.key;
+                const count = t.count ?? null;
+                return (_jsxs("button", { "data-tab": t.key, type: "button", role: "tab", "aria-selected": isActive, onClick: () => onSelect(t.key), title: t.hint, style: { transitionProperty: "color, background-color, border-color", transitionDuration: "150ms" }, className: "relative flex h-9 items-center gap-2 whitespace-nowrap rounded-lg border px-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring " +
+                        (isActive
+                            ? "border-primary/30 bg-primary/10 font-semibold text-foreground"
+                            : 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: [t.icon && _jsx("span", { className: "inline-flex shrink-0 [&_svg]:h-4 [&_svg]:w-4", "aria-hidden": true, children: t.icon }), _jsx("span", { children: t.label }), count != null && (_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 " +
+                                (isActive ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"), children: count }))] }, t.key));
+            }) }) }));
+}

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

@@ -0,0 +1,13 @@
+export interface RowMenuItem {
+    label: string;
+    onSelect: () => void;
+    disabled?: boolean;
+    destructive?: boolean;
+    title?: string;
+}
+/** Rijmenu exact als Verkooporders (drie puntjes, acties in een menu). */
+export declare function RowMenu({ label, items }: {
+    label: string;
+    items: RowMenuItem[];
+}): import("react").JSX.Element | null;
+//# 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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,0EAA0E;AAC1E,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,sCA0BhF"}

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoreVertical } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@flowselections/core";
+/** Rijmenu exact als Verkooporders (drie puntjes, acties in een menu). */
+export function RowMenu({ label, items }) {
+    if (items.length === 0)
+        return null;
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { "aria-label": label, onClick: (e) => e.stopPropagation(), className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(MoreVertical, { className: "h-4 w-4" }) }), _jsx(DropdownMenuContent, { align: "end", onClick: (e) => e.stopPropagation(), children: items.map((it) => (_jsx(DropdownMenuItem, { disabled: it.disabled, title: it.title, className: it.destructive ? "text-destructive focus:text-destructive" : undefined, onClick: () => { if (!it.disabled)
+                        it.onSelect(); }, children: it.label }, it.label))) })] }));
+}

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

@@ -0,0 +1,12 @@
+/**
+ * Zoekveld exact als Verkooporders: h-9, sm:w-80, breder bij focus.
+ * Filtert tijdens typen (250 ms), wis-kruisje, Esc wist. "/" regelt de pagina.
+ */
+export declare const SearchInput: import("react").ForwardRefExoticComponent<{
+    value: string;
+    onChange: (v: string) => void;
+    placeholder?: string;
+    delay?: number;
+    ariaLabel?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;
+//# 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;;;GAGG;AACH,eAAO,MAAM,WAAW;WACf,MAAM;cACH,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;kBACf,MAAM;YACZ,MAAM;gBACF,MAAM;oDAqElB,CAAC"}

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { Search, X } from "lucide-react";
+/**
+ * Zoekveld exact als Verkooporders: h-9, sm:w-80, breder bij focus.
+ * Filtert tijdens typen (250 ms), wis-kruisje, Esc wist. "/" regelt de pagina.
+ */
+export const SearchInput = forwardRef(function SearchInput({ value, onChange, placeholder = "Zoeken", delay = 250, ariaLabel }, ref) {
+    const [local, setLocal] = useState(value);
+    const timer = useRef(null);
+    useEffect(() => { setLocal(value); }, [value]);
+    const push = (v, now = false) => {
+        setLocal(v);
+        if (timer.current)
+            clearTimeout(timer.current);
+        if (now)
+            onChange(v);
+        else
+            timer.current = setTimeout(() => onChange(v), delay);
+    };
+    useEffect(() => () => { if (timer.current)
+        clearTimeout(timer.current); }, []);
+    return (_jsxs("div", { className: "group relative flex h-10 sm:h-9 w-full items-center overflow-hidden rounded-md border border-border bg-card " +
+            "transition-[box-shadow,border-color,width] duration-[180ms] ease-out motion-reduce:transition-none " +
+            "focus-within:border-primary focus-within:ring-[3px] focus-within:ring-ring/20 " +
+            "sm:w-80 sm:focus-within:w-[400px]", children: [_jsx(Search, { className: "ml-3 h-4 w-4 shrink-0 text-muted-foreground transition-colors duration-[120ms] group-focus-within:text-primary", "aria-hidden": true }), _jsx("input", { ref: ref, type: "search", placeholder: placeholder, "aria-label": ariaLabel ?? "Zoeken", value: local, maxLength: 100, autoComplete: "off", spellCheck: false, onChange: (e) => push(e.target.value), onKeyDown: (e) => {
+                    if (e.key === "Escape") {
+                        e.preventDefault();
+                        if (local)
+                            push("", true);
+                        else
+                            e.target.blur();
+                    }
+                }, className: "h-full min-w-0 flex-1 appearance-none border-0 bg-transparent px-2 text-base sm:text-sm text-foreground outline-none ring-0 shadow-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 " +
+                    "placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden" }), _jsxs("span", { className: "relative mr-1.5 flex h-7 w-7 shrink-0 items-center justify-center", children: [_jsx("kbd", { className: "pointer-events-none absolute hidden rounded border border-border px-1.5 font-mono text-[11px] leading-5 text-muted-foreground transition-opacity duration-[120ms] md:inline-block " +
+                            (local ? "opacity-0" : "opacity-100 group-focus-within:opacity-0"), "aria-hidden": true, children: "/" }), _jsx("button", { type: "button", onClick: () => push("", true), tabIndex: local ? 0 : -1, "aria-label": "Zoekopdracht wissen", className: "absolute inline-flex h-7 w-7 items-center justify-center rounded text-muted-foreground transition-[opacity,transform,background-color] duration-[120ms] ease-out hover:bg-muted hover:text-foreground " +
+                            (local ? "scale-100 opacity-100" : "pointer-events-none scale-90 opacity-0"), children: _jsx(X, { className: "h-4 w-4" }) })] })] }));
+});

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

@@ -0,0 +1,7 @@
+/** Overzicht van de sneltoetsen, exact als Verkooporders (opent met "?"). */
+export declare function ShortcutHelp({ open, onOpenChange, items }: {
+    open: boolean;
+    onOpenChange: (o: boolean) => void;
+    items: Array<[string[], string]>;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ShortcutHelp.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutHelp.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/ShortcutHelp.tsx"],"names":[],"mappings":"AAEA,6EAA6E;AAC7E,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC,CAAA;CAAE,+BAwBlJ"}

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@flowselections/core";
+/** Overzicht van de sneltoetsen, exact als Verkooporders (opent met "?"). */
+export function ShortcutHelp({ open, onOpenChange, items }) {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-sm", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Sneltoetsen" }) }), _jsx("ul", { className: "divide-y divide-border text-sm", children: items.map(([keys, label]) => (_jsxs("li", { className: "flex items-center justify-between py-2", children: [_jsx("span", { className: "text-foreground", children: label }), _jsx("span", { className: "flex gap-1", children: keys.map((k) => (_jsx("kbd", { className: "inline-flex h-6 min-w-6 items-center justify-center rounded border border-border bg-muted px-1.5 font-mono text-[11px] text-muted-foreground", children: k }, k))) })] }, label))) })] }) }));
+}

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

@@ -0,0 +1,8 @@
+export type StatusTone = "done" | "open" | "busy" | "error" | "rejected";
+/** Klein rond statusicoon met tooltip. Geen gekleurd vlak eromheen. */
+export declare function StatusIcon({ tone, label, detail }: {
+    tone: StatusTone;
+    label: string;
+    detail?: string;
+}): 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":"AAGA,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AAWzE,uEAAuE;AACvE,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,+BAevG"}

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, CheckCircle2, Circle, Clock, XCircle } from "lucide-react";
+import { HoverTip } from "./HoverTip.js";
+const ICON = { done: CheckCircle2, open: Circle, busy: Clock, error: AlertCircle, rejected: XCircle };
+const TONE = {
+    done: "text-primary",
+    open: "text-muted-foreground",
+    busy: "text-warning",
+    error: "text-destructive",
+    rejected: "text-muted-foreground",
+};
+/** Klein rond statusicoon met tooltip. Geen gekleurd vlak eromheen. */
+export function StatusIcon({ tone, label, detail }) {
+    const Icon = ICON[tone];
+    return (_jsx(HoverTip, { label: label, content: _jsxs("div", { children: [_jsx("div", { className: "text-[13px] font-semibold text-foreground", children: label }), detail && _jsx("div", { className: "mt-1 text-muted-foreground", children: detail })] }), children: _jsx(Icon, { className: "h-4 w-4 " + TONE[tone], "aria-hidden": true }) }));
+}

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

@@ -0,0 +1,6 @@
+/** Skelet in de vorm van de echte tabel (desktop) of kaarten (mobiel). Breedtes in px. */
+export declare function TableSkeleton({ columns, rows }: {
+    columns: number[];
+    rows?: number;
+}): 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,0FAA0F;AAC1F,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,IAAQ,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BA2BxF"}

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from "@flowselections/core";
+/** Skelet in de vorm van de echte tabel (desktop) of kaarten (mobiel). Breedtes in px. */
+export function TableSkeleton({ columns, rows = 8 }) {
+    return (_jsxs("div", { className: "min-h-0 flex-1 overflow-hidden rounded-xl border border-border bg-card shadow-sm", "aria-busy": "true", "aria-label": "Laden", children: [_jsx("div", { className: "hidden md:block", children: _jsxs("table", { className: "w-full min-w-[900px] table-fixed", children: [_jsx("colgroup", { children: columns.map((w, i) => _jsx("col", { style: { width: `${w}px` } }, i)) }), _jsx("thead", { children: _jsx("tr", { className: "h-10 border-b border-border", children: columns.map((_, i) => _jsx("th", { className: "px-4", children: _jsx(Skeleton, { className: "h-3 w-16" }) }, i)) }) }), _jsx("tbody", { children: Array.from({ length: rows }).map((_, r) => (_jsx("tr", { style: { height: 60 }, className: "border-b border-border last:border-0", children: columns.map((_, i) => _jsx("td", { className: "px-4 py-0", children: _jsx(Skeleton, { className: i === 1 ? "h-4 w-4/5" : "h-4 w-3/5" }) }, i)) }, r))) })] }) }), _jsx("div", { className: "divide-y divide-border md:hidden", children: Array.from({ length: Math.min(rows, 5) }).map((_, r) => (_jsxs("div", { className: "space-y-2 p-4", children: [_jsx(Skeleton, { className: "h-4 w-1/2" }), _jsx(Skeleton, { className: "h-3 w-4/5" }), _jsx(Skeleton, { className: "h-3 w-1/3" })] }, r))) })] }));
+}

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+/**
+ * Werkbalk exact als Verkooporders: zoekveld, direct rechts "Filters" (opent het
+ * zijpaneel), chips op dezelfde regel; uiterst rechts alleen "Kolommen".
+ */
+export declare function Toolbar({ children, onOpenFilters, filterCount, chips, right, }: {
+    children: ReactNode;
+    onOpenFilters?: () => void;
+    filterCount?: number;
+    chips?: ReactNode;
+    right?: 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;AAIvC;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,aAAa,EACb,WAAe,EACf,KAAK,EACL,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,+BAmBA"}

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SlidersHorizontal } from "lucide-react";
+import { Button } from "@flowselections/core";
+/**
+ * Werkbalk exact als Verkooporders: zoekveld, direct rechts "Filters" (opent het
+ * zijpaneel), chips op dezelfde regel; uiterst rechts alleen "Kolommen".
+ */
+export function Toolbar({ children, onOpenFilters, filterCount = 0, chips, right, }) {
+    return (_jsxs("div", { className: "shrink-0 flex flex-wrap items-center gap-2", children: [_jsx("div", { className: "min-w-0 flex-1 basis-[calc(100%-3.5rem)] sm:basis-auto sm:flex-none", children: children }), onOpenFilters && (_jsxs(Button, { variant: "outline", size: "sm", onClick: onOpenFilters, "aria-label": "Filters", className: "relative h-10 px-3 sm:h-9", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4 sm:mr-2" }), _jsx("span", { className: "hidden sm:inline", children: "Filters" }), filterCount > 0 && (_jsx("span", { className: "ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-[11px] font-semibold text-primary-foreground", children: filterCount }))] })), chips, right && _jsx("div", { className: "ml-auto flex items-center gap-2", children: right })] }));
+}

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+/** "Bijgewerkt hh:mm" met klokicoon (12 px); extra gegevens in de infoballon. */
+export declare function UpdatedAt({ at, stale, info }: {
+    at: number | string | Date | null | undefined;
+    stale?: boolean;
+    info?: ReactNode;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=UpdatedAt.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UpdatedAt.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/UpdatedAt.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,iFAAiF;AACjF,wBAAgB,SAAS,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,sCAmBlI"}

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Clock } from "lucide-react";
+import { HoverTip } from "./HoverTip.js";
+/** "Bijgewerkt hh:mm" met klokicoon (12 px); extra gegevens in de infoballon. */
+export function UpdatedAt({ at, stale, info }) {
+    const d = at ? new Date(at) : null;
+    const time = d && !Number.isNaN(d.getTime())
+        ? d.toLocaleTimeString("nl-NL", { hour: "2-digit", minute: "2-digit" })
+        : null;
+    if (!time)
+        return null;
+    const label = stale ? `Niet bijgewerkt sinds ${time}` : `Bijgewerkt ${time}`;
+    const body = (_jsxs("span", { className: "inline-flex items-center gap-1 tabular-nums " + (stale ? "text-warning" : ""), children: [_jsx(Clock, { className: "h-3 w-3", "aria-hidden": true }), label] }));
+    if (!info)
+        return body;
+    return (_jsx(HoverTip, { label: label, side: "bottom", align: "start", content: _jsx("div", { className: "space-y-1 text-xs text-muted-foreground", children: info }), children: body }));
+}

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

@@ -0,0 +1,18 @@
+/** True als de gebruiker in een invoerveld typt; dan werken sneltoetsen niet. */
+export declare function isTypingTarget(t: EventTarget | null): boolean;
+/**
+ * Sneltoetsen zoals Verkooporders: / zoeken, J/K rij, Enter openen, Esc wissen,
+ * ? overzicht, N nieuw (alleen als onNew is meegegeven). Nooit tijdens typen of
+ * als een dialoog open staat (`disabled`).
+ */
+export declare function useListHotkeys(opts: {
+    disabled?: boolean;
+    onSearch?: () => void;
+    onNext?: () => void;
+    onPrev?: () => void;
+    onOpen?: () => void;
+    onEscape?: () => void;
+    onHelp?: () => void;
+    onNew?: () => void;
+}): void;
+//# sourceMappingURL=useListHotkeys.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useListHotkeys.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/useListHotkeys.ts"],"names":[],"mappings":"AAEA,iFAAiF;AACjF,wBAAgB,cAAc,CAAC,CAAC,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,CAK7D;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,QAqBA"}

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

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from "react";
+/** True als de gebruiker in een invoerveld typt; dan werken sneltoetsen niet. */
+export function isTypingTarget(t) {
+    const el = t;
+    if (!el || !el.tagName)
+        return false;
+    const tag = el.tagName.toLowerCase();
+    return tag === "input" || tag === "textarea" || tag === "select" || el.isContentEditable === true;
+}
+/**
+ * Sneltoetsen zoals Verkooporders: / zoeken, J/K rij, Enter openen, Esc wissen,
+ * ? overzicht, N nieuw (alleen als onNew is meegegeven). Nooit tijdens typen of
+ * als een dialoog open staat (`disabled`).
+ */
+export function useListHotkeys(opts) {
+    const ref = useRef(opts);
+    ref.current = opts;
+    useEffect(() => {
+        const h = (e) => {
+            const o = ref.current;
+            if (o.disabled || e.metaKey || e.ctrlKey || e.altKey)
+                return;
+            if (isTypingTarget(e.target))
+                return;
+            const k = e.key;
+            const run = (fn) => { if (fn) {
+                e.preventDefault();
+                fn();
+            } };
+            if (k === "/")
+                run(o.onSearch);
+            else if (k === "j" || k === "J")
+                run(o.onNext);
+            else if (k === "k" || k === "K")
+                run(o.onPrev);
+            else if (k === "Enter")
+                run(o.onOpen);
+            else if (k === "Escape")
+                run(o.onEscape);
+            else if (k === "?")
+                run(o.onHelp);
+            else if (k === "n" || k === "N")
+                run(o.onNew);
+        };
+        window.addEventListener("keydown", h);
+        return () => window.removeEventListener("keydown", h);
+    }, []);
+}

package/dist-lib/components/settings/MailboxAiPromptCard.d.ts

@@ -1,2 +1,3 @@
-export declare function MailboxAiPromptCard(): import("react").JSX.Element;
+/** Beheeronderdeel: alleen zichtbaar voor admin en superadmin. */
+export declare function MailboxAiPromptCard(): import("react").JSX.Element | null;
 //# sourceMappingURL=MailboxAiPromptCard.d.ts.map

package/dist-lib/components/settings/MailboxAiPromptCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MailboxAiPromptCard.d.ts","sourceRoot":"","sources":["../../../src/components/settings/MailboxAiPromptCard.tsx"],"names":[],"mappings":"AAUA,wBAAgB,mBAAmB,gCA2FlC"}
+{"version":3,"file":"MailboxAiPromptCard.d.ts","sourceRoot":"","sources":["../../../src/components/settings/MailboxAiPromptCard.tsx"],"names":[],"mappings":"AAwGA,kEAAkE;AAClE,wBAAgB,mBAAmB,uCAIlC"}

package/dist-lib/components/settings/MailboxAiPromptCard.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIsSuperadmin } from "@flowselections/core";
 import { useEffect, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle, Button, Label, Textarea, Badge, toast, } from "@flowselections/core";
 import { getMailboxAiSettings, saveMailboxAiSettings } from "../../lib/mailbox-ai-settings.functions.js";
 import { REQUIRED_FIELD_CHOICES, DEFAULT_REQUIRED_FIELDS } from "../../lib/mailbox-ai-prompt.js";
-export function MailboxAiPromptCard() {
+function MailboxAiPromptCardInner() {
     const qc = useQueryClient();
     const fetchSettings = useServerFn(getMailboxAiSettings);
     const save = useServerFn(saveMailboxAiSettings);
@@ -37,3 +38,10 @@ export function MailboxAiPromptCard() {
                                     setRequired(DEFAULT_REQUIRED_FIELDS);
                                 }, children: "Standaard herstellen" })] })] })] }));
 }
+/** Beheeronderdeel: alleen zichtbaar voor admin en superadmin. */
+export function MailboxAiPromptCard() {
+    const { isAdmin, isLoading } = useIsSuperadmin();
+    if (isLoading || !isAdmin)
+        return null;
+    return _jsx(MailboxAiPromptCardInner, {});
+}