@hub-kit/core 0.3.0

package/dist/components/feedback/table-pagination.d.ts

@@ -0,0 +1,20 @@
+export declare const PAGE_SIZES: readonly [10, 25, 50, 100];
+export interface PaginationLabels {
+    perPage: string;
+    showing: (from: number, to: number, total: number) => string;
+    pageOf: (page: number, pages: number) => string;
+    previous: string;
+    next: string;
+}
+export declare const englishPaginationLabels: PaginationLabels;
+export declare function TablePagination({ page, totalPages, pageSize, total, from, to, onPage, onPageSize, labels, }: {
+    page: number;
+    totalPages: number;
+    pageSize: number;
+    total: number;
+    from: number;
+    to: number;
+    onPage: (page: number) => void;
+    onPageSize: (size: number) => void;
+    labels?: PaginationLabels;
+}): import("react").JSX.Element;

package/dist/components/feedback/table-pagination.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "../../ui/button.js";
+import { Combobox } from "../../ui/combobox.js";
+export const PAGE_SIZES = [10, 25, 50, 100];
+export const englishPaginationLabels = {
+    perPage: "Per page",
+    showing: (from, to, total) => `Showing ${from}–${to} of ${total}`,
+    pageOf: (page, pages) => `Page ${page} of ${pages}`,
+    previous: "Previous",
+    next: "Next",
+};
+export function TablePagination({ page, totalPages, pageSize, total, from, to, onPage, onPageSize, labels = englishPaginationLabels, }) {
+    return (_jsxs("div", { className: "mt-4 flex flex-col gap-3 border-t border-border pt-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm text-foreground", children: [_jsx("span", { className: "font-medium", children: labels.perPage }), _jsx(Combobox, { value: String(pageSize), onValueChange: (value) => onPageSize(Number(value)), ariaLabel: labels.perPage, className: "h-8 w-[80px]", options: PAGE_SIZES.map((size) => ({ value: String(size), label: String(size) })) }), _jsx("span", { className: "hidden text-muted-foreground sm:inline", children: labels.showing(from, to, total) })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-sm font-medium text-foreground", children: labels.pageOf(page, totalPages) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", className: "gap-1 rounded-md", disabled: page <= 1, onClick: () => onPage(page - 1), children: [_jsx(ChevronLeft, { className: "size-4" }), " ", labels.previous] }), _jsxs(Button, { variant: "default", size: "sm", className: "gap-1 rounded-md", disabled: page >= totalPages, onClick: () => onPage(page + 1), children: [labels.next, " ", _jsx(ChevronRight, { className: "size-4" })] })] })] })] }));
+}

package/dist/components/invoice-queue/index.d.ts

@@ -0,0 +1,5 @@
+export { QueueKpiCard } from "./queue-kpi-card";
+export type { QueueTone } from "./queue-kpi-card";
+export { QueueKpiRow } from "./queue-kpi-row";
+export type { QueueCard } from "./queue-kpi-row";
+export { NextActionCell } from "./next-action-cell";

package/dist/components/invoice-queue/index.js

@@ -0,0 +1,3 @@
+export { QueueKpiCard } from "./queue-kpi-card.js";
+export { QueueKpiRow } from "./queue-kpi-row.js";
+export { NextActionCell } from "./next-action-cell.js";

package/dist/components/invoice-queue/next-action-cell.d.ts

@@ -0,0 +1,5 @@
+export declare function NextActionCell({ label, muted, className, }: {
+    label: string;
+    muted?: boolean;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/invoice-queue/next-action-cell.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRight } from "lucide-react";
+import { cn } from "../../lib/class-names.js";
+export function NextActionCell({ label, muted, className, }) {
+    if (muted) {
+        return (_jsx("span", { className: cn("text-xs whitespace-nowrap text-muted-foreground", className), children: label }));
+    }
+    return (_jsxs("span", { className: cn("inline-flex items-center gap-1 text-xs font-medium whitespace-nowrap text-brand-dark", className), children: [label, _jsx(ArrowRight, { className: "size-3.5 shrink-0", "aria-hidden": true })] }));
+}

package/dist/components/invoice-queue/queue-kpi-card.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentType } from "react";
+export type QueueTone = "warning" | "success" | "danger" | "neutral";
+export declare function QueueKpiCard({ label, description, count, amount, tone, icon: Icon, to, search, onSelect, active, }: {
+    label: string;
+    description: string;
+    /** Already formatted by the host, so the core stays free of locale helpers. */
+    count: string;
+    amount: string;
+    tone: QueueTone;
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    /** Link target, for a page that keeps its filter in the URL. */
+    to?: string;
+    search?: Record<string, unknown>;
+    /** Used instead of `to` where the filter is local component state. */
+    onSelect?: () => void;
+    active?: boolean;
+}): import("react").JSX.Element;

package/dist/components/invoice-queue/queue-kpi-card.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Link } from "@tanstack/react-router";
+import { cn } from "../../lib/class-names.js";
+const TONE_NUMBER = {
+    warning: "text-warning",
+    success: "text-success",
+    danger: "text-danger",
+    neutral: "text-foreground",
+};
+const TONE_ICON = {
+    warning: "bg-warning-soft text-warning",
+    success: "bg-success-soft text-success",
+    danger: "bg-danger-soft text-danger",
+    neutral: "bg-muted text-muted-foreground",
+};
+const TONE_RULE = {
+    warning: "bg-warning",
+    success: "bg-success",
+    danger: "bg-danger",
+    neutral: "bg-border",
+};
+export function QueueKpiCard({ label, description, count, amount, tone, icon: Icon, to, search, onSelect, active, }) {
+    const content = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: cn("grid size-7 shrink-0 place-items-center rounded-lg", TONE_ICON[tone]), children: _jsx(Icon, { className: "size-3.5" }) }), _jsx("span", { className: "min-w-0 truncate text-xs font-semibold text-foreground", children: label })] }), _jsxs("div", { className: "mt-1.5 flex items-baseline gap-2", children: [_jsx("span", { className: cn("text-2xl font-bold tabular-nums", TONE_NUMBER[tone]), children: count }), _jsx("span", { className: "min-w-0 truncate text-xs text-muted-foreground", children: amount })] }), _jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: description }), !active && (_jsx("span", { className: cn("absolute inset-x-0 bottom-0 h-0.5", TONE_RULE[tone]), "aria-hidden": true }))] }));
+    const cardClassName = cn("relative flex min-w-0 flex-col overflow-hidden rounded-xl border px-3 pt-2.5 pb-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", active
+        ? "border-brand-dark bg-brand-tint ring-1 ring-brand-dark"
+        : "border-border bg-card hover:border-brand-dark/30 hover:bg-brand-tint/40");
+    if (onSelect) {
+        return (_jsx("button", { type: "button", onClick: onSelect, "aria-pressed": active, className: cardClassName, children: content }));
+    }
+    return (_jsx(Link, { to: to ?? "", search: search, "aria-pressed": active, className: cardClassName, children: content }));
+}

package/dist/components/invoice-queue/queue-kpi-row.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentType } from "react";
+import { type QueueTone } from "./queue-kpi-card";
+export interface QueueCard {
+    key: string;
+    label: string;
+    description: string;
+    count: string;
+    amount: string;
+    tone: QueueTone;
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    to?: string;
+    search?: Record<string, unknown>;
+    onSelect?: () => void;
+    active?: boolean;
+}
+export declare function QueueKpiRow({ cards, loading, className, }: {
+    cards: QueueCard[];
+    loading?: boolean;
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/components/invoice-queue/queue-kpi-row.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from "../../ui/skeleton.js";
+import { cn } from "../../lib/class-names.js";
+import { QueueKpiCard } from "./queue-kpi-card.js";
+export function QueueKpiRow({ cards, loading, className, }) {
+    if (loading) {
+        return (_jsx("div", { className: cn("grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5", className), children: Array.from({ length: 5 }, (_, i) => (_jsx(Skeleton, { className: "h-44 w-full rounded-xl" }, i))) }));
+    }
+    if (cards.length === 0)
+        return null;
+    return (_jsx("div", { className: cn("grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5", className), children: cards.map(({ key, ...card }) => (_jsx(QueueKpiCard, { ...card }, key))) }));
+}

package/dist/components/notifications/alerts.d.ts

@@ -0,0 +1,25 @@
+import type { NotificationItem } from "./types";
+export declare function sortBySeverity(items: NotificationItem[]): NotificationItem[];
+/** One row of compact alert chips, worst first, capped at `max`; the rest hide behind "see all". */
+export declare function AlertStrip({ items, max, seeAllLabel, seeAllTo, onItemClick, onDismiss, dismissLabel, className, }: {
+    items: NotificationItem[];
+    max?: number;
+    /** Omitted where the strip can never overflow, e.g. a fixed pair of configuration warnings. */
+    seeAllLabel?: string;
+    seeAllTo?: string;
+    /** Fired when a chip is followed: the host acknowledges that item at its current count. */
+    onItemClick?: (item: NotificationItem) => void;
+    /** Renders a small close button per chip: discard without visiting the screen. */
+    onDismiss?: (item: NotificationItem) => void;
+    dismissLabel?: string;
+    className?: string;
+}): import("react").JSX.Element | null;
+export declare function AlertList({ items, emptyText, onItemClick, isRead, readLabel, className, }: {
+    items: NotificationItem[];
+    emptyText: string;
+    onItemClick?: (item: NotificationItem) => void;
+    /** Whether an item was already acknowledged; read rows are dimmed and labelled. */
+    isRead?: (item: NotificationItem) => boolean;
+    readLabel?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/notifications/alerts.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { Link } from "@tanstack/react-router";
+import { ArrowRight, ChevronRight, CircleAlert, Info, TriangleAlert, X } from "lucide-react";
+import { cn } from "../../lib/class-names.js";
+import { HighlightedText } from "./highlight.js";
+const TONE_CHIP = {
+    default: "border-brand-soft bg-brand-wash text-brand-dark hover:border-brand",
+    warn: "border-amber-200 bg-amber-50 text-amber-900 hover:border-amber-300",
+    danger: "border-red-200 bg-red-50 text-red-800 hover:border-red-300",
+};
+/** Count pill per tone, same palette the bell rows use. */
+const TONE_BADGE = {
+    default: "bg-brand-wash text-brand-dark",
+    warn: "bg-amber-100 text-amber-800",
+    danger: "bg-red-100 text-red-700",
+};
+const TONE_ORDER = { danger: 0, warn: 1, default: 2 };
+export function sortBySeverity(items) {
+    return [...items].sort((a, b) => TONE_ORDER[a.tone ?? "default"] - TONE_ORDER[b.tone ?? "default"]);
+}
+const TONE_ICON = {
+    default: Info,
+    warn: TriangleAlert,
+    danger: CircleAlert,
+};
+const TONE_ICON_CLS = {
+    default: "text-brand",
+    warn: "text-amber-600",
+    danger: "text-red-600",
+};
+function ToneIcon({ tone, icon, }) {
+    const Icon = icon ?? TONE_ICON[tone];
+    return _jsx(Icon, { className: cn("size-4 shrink-0", TONE_ICON_CLS[tone]), "aria-hidden": true });
+}
+/** One row of compact alert chips, worst first, capped at `max`; the rest hide behind "see all". */
+export function AlertStrip({ items, max = 3, seeAllLabel, seeAllTo, onItemClick, onDismiss, dismissLabel, className, }) {
+    if (items.length === 0)
+        return null;
+    const sorted = sortBySeverity(items);
+    const shown = sorted.slice(0, max);
+    const rest = sorted.length - shown.length;
+    return (
+    // ONE ALERT PER LINE, ALL THE SAME WIDTH. Side by side the chips competed for the same glance
+    // and each was cut to a fragment. Stacked, each gets a line of its own. w-fit sizes the column
+    // to its WIDEST row and the rows then stretch to fill it, so the block reads as one set of
+    // cards with a straight right edge rather than a ragged staircase of different widths.
+    _jsxs("div", { className: cn("flex w-fit max-w-full flex-col items-stretch gap-1.5", className), children: [shown.map((item) => {
+                const tone = item.tone ?? "default";
+                return (_jsxs("div", { className: cn("flex min-w-0 items-center rounded-lg border transition-colors", TONE_CHIP[tone]), children: [_jsxs(Link, { to: item.link.to, search: item.link.search, hash: item.link.hash, onClick: () => onItemClick?.(item), className: cn("flex min-w-0 flex-1 items-center gap-2 rounded-lg py-2 pl-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onDismiss ? "pr-1" : "pr-3"), children: [_jsx(ToneIcon, { tone: tone, icon: item.icon }), _jsx("span", { className: "min-w-0 text-[13px] leading-snug font-medium", children: _jsx(HighlightedText, { text: item.message ?? item.label, highlight: item.highlight }) }), _jsx(ChevronRight, { className: "size-4 shrink-0 opacity-50", "aria-hidden": true })] }), onDismiss && (_jsx("button", { type: "button", "aria-label": dismissLabel, title: dismissLabel, onClick: () => onDismiss(item), className: "mr-1.5 cursor-pointer rounded-md p-1 opacity-50 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(X, { className: "size-3.5", "aria-hidden": true }) }))] }, item.key));
+            }), rest > 0 && seeAllTo && (_jsxs(Link, { to: seeAllTo, className: "flex items-center gap-1 self-start rounded-lg px-1 py-0.5 text-[13px] font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [seeAllLabel, " (+", rest, ")", _jsx(ArrowRight, { className: "size-3.5", "aria-hidden": true })] }))] }));
+}
+export function AlertList({ items, emptyText, onItemClick, isRead, readLabel, className, }) {
+    if (items.length === 0) {
+        return _jsx("div", { className: cn("py-6 text-sm text-muted-foreground", className), children: emptyText });
+    }
+    const sorted = sortBySeverity(items);
+    const unread = sorted.filter((item) => !(isRead?.(item) ?? false));
+    const read = sorted.filter((item) => isRead?.(item) ?? false);
+    const ordered = [...unread, ...read];
+    return (_jsx("div", { className: cn("divide-y divide-border overflow-hidden rounded-xl border border-border bg-card", className), children: ordered.map((item, index) => {
+            const tone = item.tone ?? "default";
+            const isReadRow = index >= unread.length;
+            return (_jsxs(Fragment, { children: [index === unread.length && unread.length > 0 && readLabel && (_jsx("div", { className: "bg-muted/40 px-4 py-1.5 text-[11px] font-medium tracking-wide text-muted-foreground uppercase", children: readLabel })), _jsxs(Link, { to: item.link.to, search: item.link.search, hash: item.link.hash, onClick: () => onItemClick?.(item), className: "flex items-start gap-3 px-4 py-3 transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", children: [_jsx("span", { className: cn("mt-0.5 shrink-0", isReadRow && "opacity-40"), children: _jsx(ToneIcon, { tone: tone, icon: item.icon }) }), _jsx("span", { className: cn("min-w-0 flex-1 text-sm leading-snug", isReadRow ? "text-muted-foreground" : "font-medium text-foreground"), children: _jsx(HighlightedText, { text: item.message ?? item.label, highlight: item.highlight }) }), (item.atLabel || item.dateLabel) && (_jsxs("span", { className: "shrink-0 text-right text-xs leading-tight text-muted-foreground", children: [item.atLabel && _jsx("span", { className: "block", children: item.atLabel }), item.dateLabel && (_jsx("span", { className: "block text-muted-foreground/70 tabular-nums", children: item.dateLabel }))] })), !item.message && (_jsx("span", { className: cn("inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-xs font-semibold tabular-nums", isReadRow ? "bg-muted text-muted-foreground" : TONE_BADGE[tone]), children: item.count }))] })] }, item.key));
+        }) }));
+}

package/dist/components/notifications/bell.d.ts

@@ -0,0 +1,14 @@
+import type { NotificationItem } from "./types";
+export declare function NotificationBell({ items, unseenCount, onOpened, onItemClick, title, emptyText, ariaLabel, seeAllLabel, seeAllTo, }: {
+    items: NotificationItem[];
+    unseenCount: number;
+    onOpened: () => void;
+    /** Fired when a row is followed: the host acknowledges that item at its current count. */
+    onItemClick?: (item: NotificationItem) => void;
+    title: string;
+    emptyText: string;
+    ariaLabel: string;
+    /** Way out of the dropdown into the full list. Both required to render the footer link. */
+    seeAllLabel?: string;
+    seeAllTo?: string;
+}): import("react").JSX.Element;

package/dist/components/notifications/bell.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Link } from "@tanstack/react-router";
+import { ArrowRight, Bell } from "lucide-react";
+import { Button } from "../../ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../../ui/dropdown-menu.js";
+import { cn } from "../../lib/class-names.js";
+const TONE_CLS = {
+    default: "bg-brand-wash text-brand-dark",
+    warn: "bg-amber-100 text-amber-800",
+    danger: "bg-red-100 text-red-700",
+};
+export function NotificationBell({ items, unseenCount, onOpened, onItemClick, title, emptyText, ariaLabel, seeAllLabel, seeAllTo, }) {
+    return (_jsxs(DropdownMenu, { modal: false, onOpenChange: (open) => {
+            if (open)
+                onOpened();
+        }, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": ariaLabel, className: "relative text-muted-foreground hover:text-foreground", children: [_jsx(Bell, { className: "size-4.5" }), unseenCount > 0 && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[0.62rem] font-semibold tabular-nums text-white", children: unseenCount > 99 ? "99+" : unseenCount }))] }) }), _jsxs(DropdownMenuContent, { align: "end", sideOffset: 10, collisionPadding: 12, className: cn("min-w-72 max-w-[calc(100vw-2rem)] overflow-visible border-t-4 border-t-primary shadow-xl", "relative before:absolute before:right-5 before:h-0 before:w-0 before:content-['']", "data-[side=bottom]:before:-top-2 data-[side=bottom]:before:border-x-8 data-[side=bottom]:before:border-b-8 data-[side=bottom]:before:border-x-transparent data-[side=bottom]:before:border-b-primary", "data-[side=top]:before:-bottom-2 data-[side=top]:before:border-x-8 data-[side=top]:before:border-t-8 data-[side=top]:before:border-x-transparent data-[side=top]:before:border-t-primary"), children: [_jsx(DropdownMenuLabel, { children: title }), _jsx(DropdownMenuSeparator, {}), items.length === 0 ? (_jsx("div", { className: "px-2 py-3 text-sm text-muted-foreground", children: emptyText })) : (items.map((item) => (_jsx(DropdownMenuItem, { asChild: true, className: "cursor-pointer", children: _jsxs(Link, { to: item.link.to, search: item.link.search, onClick: () => onItemClick?.(item), children: [_jsx("span", { className: "min-w-0 flex-1 truncate text-sm", title: item.label, children: item.label }), _jsx("span", { className: cn("ml-2 inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-xs font-medium tabular-nums", TONE_CLS[item.tone ?? "default"]), children: item.count })] }) }, item.key)))), seeAllLabel && seeAllTo && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { asChild: true, className: "cursor-pointer", children: _jsxs(Link, { to: seeAllTo, className: "justify-between text-sm font-medium", children: [seeAllLabel, _jsx(ArrowRight, { className: "size-3.5 opacity-60", "aria-hidden": true })] }) })] }))] })] }));
+}

package/dist/components/notifications/highlight.d.ts

@@ -0,0 +1,4 @@
+export declare function HighlightedText({ text, highlight }: {
+    text: string;
+    highlight?: string;
+}): import("react").JSX.Element;

package/dist/components/notifications/highlight.js

@@ -0,0 +1,7 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function HighlightedText({ text, highlight }) {
+    const at = highlight ? text.indexOf(highlight) : -1;
+    if (!highlight || at < 0)
+        return _jsx(_Fragment, { children: text });
+    return (_jsxs(_Fragment, { children: [text.slice(0, at), _jsx("strong", { className: "font-semibold", children: highlight }), text.slice(at + highlight.length)] }));
+}

package/dist/components/notifications/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./types";
+export { HighlightedText } from "./highlight";
+export { NotificationBell } from "./bell";
+export { AlertStrip, AlertList, sortBySeverity } from "./alerts";
+export { useNotificationAcks } from "./use-notification-acks";
+export { ReminderDialog, englishReminderDialogLabels } from "./reminder-dialog";
+export type { ReminderDialogLabels } from "./reminder-dialog";

package/dist/components/notifications/index.js

@@ -0,0 +1,6 @@
+export * from "./types.js";
+export { HighlightedText } from "./highlight.js";
+export { NotificationBell } from "./bell.js";
+export { AlertStrip, AlertList, sortBySeverity } from "./alerts.js";
+export { useNotificationAcks } from "./use-notification-acks.js";
+export { ReminderDialog, englishReminderDialogLabels } from "./reminder-dialog.js";

package/dist/components/notifications/reminder-dialog.d.ts

@@ -0,0 +1,24 @@
+import type { ReminderRecipient } from "../../adapters/notifications";
+export interface ReminderDialogLabels {
+    title: string;
+    description: string;
+    recipient: string;
+    recipientPlaceholder: string;
+    note: string;
+    notePlaceholder: string;
+    send: string;
+    sending: string;
+    sent: (recipientName: string) => string;
+    failed: string;
+}
+export declare const englishReminderDialogLabels: ReminderDialogLabels;
+export declare function ReminderDialog({ recipients, sendReminder, open, onOpenChange, labels, }: {
+    recipients: ReminderRecipient[];
+    sendReminder: (input: {
+        recipientUserId: string;
+        note?: string;
+    }) => Promise<void>;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    labels?: ReminderDialogLabels;
+}): import("react").JSX.Element;

package/dist/components/notifications/reminder-dialog.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "../../ui/button.js";
+import { Combobox } from "../../ui/combobox.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../../ui/dialog.js";
+import { Label } from "../../ui/label.js";
+import { Textarea } from "../../ui/textarea.js";
+import { readableErrorMessage } from "../feedback/query-states.js";
+export const englishReminderDialogLabels = {
+    title: "Remind a person",
+    description: "Sends the person a direct reminder into their notifications.",
+    recipient: "Recipient",
+    recipientPlaceholder: "Choose a person",
+    note: "Note (optional)",
+    notePlaceholder: "e.g. Please approve today.",
+    send: "Send reminder",
+    sending: "Sending …",
+    sent: (recipientName) => `Reminder sent to ${recipientName}.`,
+    failed: "The reminder could not be sent.",
+};
+export function ReminderDialog({ recipients, sendReminder, open, onOpenChange, labels = englishReminderDialogLabels, }) {
+    const [recipientId, setRecipientId] = useState("");
+    const [note, setNote] = useState("");
+    const [isSending, setIsSending] = useState(false);
+    const recipientName = recipients.find((r) => r.value === recipientId)?.label ?? "";
+    function reset() {
+        setRecipientId("");
+        setNote("");
+    }
+    async function send() {
+        setIsSending(true);
+        try {
+            await sendReminder({ recipientUserId: recipientId, note: note.trim() || undefined });
+            toast.success(labels.sent(recipientName));
+            onOpenChange(false);
+            reset();
+        }
+        catch (error) {
+            toast.error(labels.failed, { description: readableErrorMessage(error, "") });
+        }
+        finally {
+            setIsSending(false);
+        }
+    }
+    return (_jsx(Dialog, { open: open, onOpenChange: (nextOpen) => {
+            if (isSending)
+                return;
+            onOpenChange(nextOpen);
+            if (!nextOpen)
+                reset();
+        }, children: _jsxs(DialogContent, { className: "sm:max-w-md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: labels.title }), _jsx(DialogDescription, { children: labels.description })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { children: labels.recipient }), _jsx(Combobox, { value: recipientId, onValueChange: setRecipientId, options: recipients, placeholder: labels.recipientPlaceholder })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "reminder-note", children: labels.note }), _jsx(Textarea, { id: "reminder-note", value: note, onChange: (event) => setNote(event.target.value), placeholder: labels.notePlaceholder, rows: 3 })] })] }), _jsx(DialogFooter, { children: _jsxs(Button, { disabled: !recipientId || isSending, onClick: send, children: [isSending && _jsx(Loader2, { className: "size-4 animate-spin" }), isSending ? labels.sending : labels.send] }) })] }) }));
+}

package/dist/components/notifications/types.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentType } from "react";
+export type NotificationTone = "default" | "warn" | "danger";
+export interface NotificationItem {
+    key: string;
+    /** Short name of the thing ("Overdue invoices"). Used where a count pill sits beside it. */
+    label: string;
+    message?: string;
+    count: number;
+    tone?: NotificationTone;
+    ack?: {
+        key: string;
+        value: number;
+    };
+    passive?: boolean;
+    highlight?: string;
+    at?: string;
+    atLabel?: string;
+    dateLabel?: string;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    link: {
+        to: string;
+        search?: Record<string, unknown>;
+        hash?: string;
+    };
+}

package/dist/components/notifications/types.js

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

package/dist/components/notifications/use-notification-acks.d.ts

@@ -0,0 +1,7 @@
+import type { NotificationItem } from "./types";
+import type { AckStore } from "../../adapters/notifications";
+export declare function useNotificationAcks(items: NotificationItem[], store: AckStore): {
+    visible: NotificationItem[];
+    isAcknowledged: (item: NotificationItem) => boolean;
+    acknowledge: (item: NotificationItem) => void;
+};

package/dist/components/notifications/use-notification-acks.js

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+// Hides an item once acknowledged, until its count grows past the acknowledged value.
+// Items with an `ack` marker use that key and value instead of their own key and count.
+export function useNotificationAcks(items, store) {
+    const [localAcked, setLocalAcked] = useState(null);
+    const acked = localAcked ?? store.acked;
+    useEffect(() => {
+        const lowered = {};
+        for (const item of items) {
+            if (item.ack)
+                continue;
+            const ackedCount = acked[item.key];
+            if (ackedCount !== undefined && item.count < ackedCount)
+                lowered[item.key] = item.count;
+        }
+        if (Object.keys(lowered).length > 0)
+            setLocalAcked({ ...acked, ...lowered });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [items]);
+    const ackKey = (item) => item.ack?.key ?? item.key;
+    const ackValue = (item) => item.ack?.value ?? item.count;
+    const isAcknowledged = (item) => {
+        if (item.passive)
+            return true;
+        const ackedValue = acked[ackKey(item)];
+        return ackedValue !== undefined && ackValue(item) <= ackedValue;
+    };
+    return {
+        visible: items.filter((item) => !isAcknowledged(item)),
+        isAcknowledged,
+        acknowledge: (item) => {
+            const next = { ...acked, [ackKey(item)]: ackValue(item) };
+            setLocalAcked(next);
+            store.save(next);
+        },
+    };
+}

package/dist/components/shell/breadcrumbs.d.ts

@@ -0,0 +1,7 @@
+import { type Crumb, type ShellNavEntry } from "./types";
+export declare function buildCrumbs({ nav, pathname, homeLabel, staticLeafLabels, }: {
+    nav: ShellNavEntry[];
+    pathname: string;
+    homeLabel: string;
+    staticLeafLabels?: Record<string, string>;
+}): Crumb[];

package/dist/components/shell/breadcrumbs.js

@@ -0,0 +1,38 @@
+import { isShellGroup } from "./types.js";
+export function buildCrumbs({ nav, pathname, homeLabel, staticLeafLabels = {}, }) {
+    if (pathname === "/")
+        return [{ label: homeLabel }];
+    const segments = pathname.split("/").filter(Boolean);
+    const base = `/${segments[0]}`;
+    const crumbs = [{ label: homeLabel, to: "/" }];
+    let page;
+    for (const entry of nav) {
+        if (isShellGroup(entry)) {
+            const child = entry.items.find((c) => c.to === base);
+            if (child) {
+                crumbs.push({ label: entry.label, to: entry.items[0]?.to });
+                page = child;
+                break;
+            }
+        }
+        else if (entry.to === base && entry.to !== "/") {
+            page = entry;
+            break;
+        }
+    }
+    const isLeafPage = segments.length === 1;
+    if (page) {
+        crumbs.push({ label: page.label, to: isLeafPage ? undefined : page.to });
+    }
+    else {
+        crumbs.push({
+            label: staticLeafLabels[segments[0]] ?? segments[0],
+            to: isLeafPage ? undefined : base,
+        });
+    }
+    if (!isLeafPage) {
+        const leaf = segments[segments.length - 1];
+        crumbs.push({ label: staticLeafLabels[leaf] ?? decodeURIComponent(leaf) });
+    }
+    return crumbs;
+}

package/dist/components/shell/index.d.ts

@@ -0,0 +1,3 @@
+export { Shell, ShellFooterGroup, ShellRailMenu, useShellLeafLabel, type ShellProps } from "./shell";
+export { buildCrumbs } from "./breadcrumbs";
+export { isShellGroup, type Crumb, type ShellBadge, type ShellNavEntry, type ShellNavGroup, type ShellNavLink, } from "./types";

package/dist/components/shell/index.js

@@ -0,0 +1,3 @@
+export { Shell, ShellFooterGroup, ShellRailMenu, useShellLeafLabel } from "./shell.js";
+export { buildCrumbs } from "./breadcrumbs.js";
+export { isShellGroup, } from "./types.js";

package/dist/components/shell/shell.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode } from "react";
+import { type LucideIcon } from "lucide-react";
+import { type ShellBadge, type ShellNavEntry, type ShellNavLink } from "./types";
+export declare function useShellLeafLabel(label: string | null): void;
+export interface ShellProps {
+    nav: ShellNavEntry[];
+    logo: ReactNode;
+    footer?: ReactNode;
+    headerActions?: ReactNode;
+    badges?: Record<string, ShellBadge>;
+    homeLabel: string;
+    staticLeafLabels?: Record<string, string>;
+    breadcrumbAriaLabel?: string;
+    closeLabel?: string;
+    children: ReactNode;
+}
+export declare function ShellFooterGroup({ label, icon: Icon, items, active, }: {
+    label: string;
+    icon: LucideIcon;
+    items: ShellNavLink[];
+    active: boolean;
+}): import("react").JSX.Element;
+export declare function ShellRailMenu({ label, icon: Icon, items, active, align, }: {
+    label: string;
+    icon: LucideIcon;
+    items: ShellNavLink[];
+    active: boolean;
+    align?: "start" | "end";
+}): import("react").JSX.Element;
+export declare function Shell({ nav, logo, footer, headerActions, badges, homeLabel, staticLeafLabels, breadcrumbAriaLabel, closeLabel, children, }: ShellProps): import("react").JSX.Element;