@freighttech/ui 0.13.18

package/dist/backend/notifications/NotificationItem.js

@@ -0,0 +1,187 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { X, Bell, AlertTriangle, CheckCircle2, XCircle, Info, Loader2 } from "lucide-react";
+import { Button } from "../../primitives/button.js";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { formatRelativeTime } from "@open-mercato/shared/lib/time";
+function resolveNotificationText(params) {
+  const { key, fallback, variables, t } = params;
+  if (key) {
+    return t(key, fallback ?? key, variables ?? void 0);
+  }
+  if (fallback) {
+    return t(fallback, variables ?? void 0);
+  }
+  return "";
+}
+const severityIcons = {
+  info: Info,
+  warning: AlertTriangle,
+  success: CheckCircle2,
+  error: XCircle
+};
+const severityColors = {
+  info: "text-status-info-icon",
+  warning: "text-status-warning-icon",
+  success: "text-status-success-icon",
+  error: "text-status-error-icon"
+};
+function NotificationItem({
+  notification,
+  onMarkAsRead,
+  onExecuteAction,
+  onDismiss,
+  t,
+  customRenderer: CustomRenderer
+}) {
+  const router = useRouter();
+  const [executing, setExecuting] = React.useState(null);
+  const isUnread = notification.status === "unread";
+  const hasActions = notification.actions && notification.actions.length > 0;
+  const severity = notification.severity;
+  const IconComponent = severityIcons[severity] ?? Bell;
+  const titleText = resolveNotificationText({
+    key: notification.titleKey,
+    fallback: notification.title,
+    variables: notification.titleVariables ?? void 0,
+    t
+  });
+  const bodyText = resolveNotificationText({
+    key: notification.bodyKey,
+    fallback: notification.body ?? void 0,
+    variables: notification.bodyVariables ?? void 0,
+    t
+  });
+  const handleClick = async () => {
+    if (isUnread) {
+      await onMarkAsRead();
+    }
+    if (notification.linkHref) {
+      router.push(notification.linkHref);
+    }
+  };
+  const handleAction = async (actionId, event) => {
+    event?.stopPropagation();
+    setExecuting(actionId);
+    try {
+      const result = await onExecuteAction(actionId);
+      if (result.href) {
+        router.push(result.href);
+      }
+    } finally {
+      setExecuting(null);
+    }
+  };
+  const handleDismiss = async (event) => {
+    event?.stopPropagation();
+    await onDismiss();
+  };
+  const rendererActions = notification.actions.map((action) => ({
+    id: action.id,
+    labelKey: action.labelKey ?? action.label,
+    variant: action.variant,
+    icon: action.icon
+  }));
+  if (CustomRenderer) {
+    return /* @__PURE__ */ jsx(
+      CustomRenderer,
+      {
+        notification: {
+          id: notification.id,
+          type: notification.type,
+          title: titleText,
+          body: bodyText || null,
+          titleKey: notification.titleKey,
+          bodyKey: notification.bodyKey,
+          titleVariables: notification.titleVariables ?? null,
+          bodyVariables: notification.bodyVariables ?? null,
+          icon: notification.icon,
+          severity: notification.severity,
+          status: notification.status,
+          sourceModule: notification.sourceModule,
+          sourceEntityType: notification.sourceEntityType,
+          sourceEntityId: notification.sourceEntityId,
+          linkHref: notification.linkHref ?? null,
+          createdAt: notification.createdAt
+        },
+        onAction: handleAction,
+        onDismiss: handleDismiss,
+        actions: rendererActions
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group relative px-4 py-3 hover:bg-muted/50 cursor-pointer transition-colors",
+        isUnread && "bg-muted/30"
+      ),
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      },
+      role: "button",
+      tabIndex: 0,
+      children: [
+        isUnread && /* @__PURE__ */ jsx("div", { className: "absolute left-1.5 top-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-primary" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex-shrink-0 mt-0.5",
+                severityColors[severity] ?? "text-muted-foreground"
+              ),
+              children: /* @__PURE__ */ jsx(IconComponent, { className: "h-5 w-5" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ jsx("h4", { className: cn("text-sm font-medium", isUnread && "font-semibold"), children: titleText }),
+              /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-xs text-muted-foreground", children: formatRelativeTime(notification.createdAt, { translate: t }) ?? "" })
+            ] }),
+            bodyText && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground line-clamp-2", children: bodyText }),
+            hasActions && notification.status !== "actioned" && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap items-start gap-2", children: notification.actions.map((action) => /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: action.variant ?? "outline",
+                size: "sm",
+                className: "h-auto min-h-8 max-w-full min-w-0 whitespace-normal break-words text-left",
+                onClick: (event) => handleAction(action.id, event),
+                disabled: executing !== null,
+                children: [
+                  action.labelKey ? t(action.labelKey, action.label) : t(action.label, action.label),
+                  executing === action.id && /* @__PURE__ */ jsx(Loader2, { className: "ml-1 h-3 w-3 animate-spin" })
+                ]
+              },
+              action.id
+            )) }),
+            notification.status === "actioned" && notification.actionTaken && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground italic", children: t("notifications.actionTaken", "Action taken: {action}", {
+              action: notification.actionTaken
+            }) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "flex-shrink-0 h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity",
+              onClick: handleDismiss,
+              children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  NotificationItem
+};
+//# sourceMappingURL=NotificationItem.js.map

package/dist/backend/notifications/NotificationItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/notifications/NotificationItem.tsx"],
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { useRouter } from 'next/navigation'\nimport { X, Bell, AlertTriangle, CheckCircle2, XCircle, Info, Loader2 } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { formatRelativeTime } from '@open-mercato/shared/lib/time'\nimport type { NotificationDto, NotificationRendererProps, NotificationTypeAction } from '@open-mercato/shared/modules/notifications/types'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\nimport type { ComponentType } from 'react'\n\nexport type NotificationItemProps = {\n  notification: NotificationDto\n  onMarkAsRead: () => Promise<void>\n  onExecuteAction: (actionId: string) => Promise<{ href?: string }>\n  onDismiss: () => Promise<void>\n  t: TranslateFn\n  /**\n   * Optional custom renderer component for this notification type.\n   * When provided, this component will be used instead of the default rendering.\n   *\n   * Custom renderers receive full control over the notification's appearance while\n   * still having access to action handlers and notification data.\n   *\n   * @example\n   * ```tsx\n   * // In your module's notifications.client.ts\n   * export const salesNotificationTypes = [\n   *   {\n   *     type: 'sales.order.created',\n   *     Renderer: SalesOrderCreatedRenderer,\n   *     // ...other fields\n   *   }\n   * ]\n   *\n   * // Usage in NotificationPanel\n   * const renderer = salesNotificationTypes.find(t => t.type === notification.type)?.Renderer\n   * <NotificationItem\n   *   notification={notification}\n   *   customRenderer={renderer}\n   *   ...\n   * />\n   * ```\n   */\n  customRenderer?: ComponentType<NotificationRendererProps>\n}\n\n\nfunction resolveNotificationText(params: {\n  key?: string | null\n  fallback?: string | null\n  variables?: Record<string, string> | null\n  t: TranslateFn\n}): string {\n  const { key, fallback, variables, t } = params\n  if (key) {\n    return t(key, fallback ?? key, variables ?? undefined)\n  }\n  if (fallback) {\n    return t(fallback, variables ?? undefined)\n  }\n  return ''\n}\n\nconst severityIcons = {\n  info: Info,\n  warning: AlertTriangle,\n  success: CheckCircle2,\n  error: XCircle,\n}\n\nconst severityColors = {\n  info: 'text-status-info-icon',\n  warning: 'text-status-warning-icon',\n  success: 'text-status-success-icon',\n  error: 'text-status-error-icon',\n}\n\nexport function NotificationItem({\n  notification,\n  onMarkAsRead,\n  onExecuteAction,\n  onDismiss,\n  t,\n  customRenderer: CustomRenderer,\n}: NotificationItemProps) {\n  const router = useRouter()\n  const [executing, setExecuting] = React.useState<string | null>(null)\n\n  const isUnread = notification.status === 'unread'\n  const hasActions = notification.actions && notification.actions.length > 0\n  const severity = notification.severity as keyof typeof severityIcons\n  const IconComponent = severityIcons[severity] ?? Bell\n  const titleText = resolveNotificationText({\n    key: notification.titleKey,\n    fallback: notification.title,\n    variables: notification.titleVariables ?? undefined,\n    t,\n  })\n  const bodyText = resolveNotificationText({\n    key: notification.bodyKey,\n    fallback: notification.body ?? undefined,\n    variables: notification.bodyVariables ?? undefined,\n    t,\n  })\n\n  const handleClick = async () => {\n    if (isUnread) {\n      await onMarkAsRead()\n    }\n    if (notification.linkHref) {\n      router.push(notification.linkHref)\n    }\n  }\n\n  const handleAction = async (actionId: string, event?: React.MouseEvent) => {\n    event?.stopPropagation()\n    setExecuting(actionId)\n    try {\n      const result = await onExecuteAction(actionId)\n      if (result.href) {\n        router.push(result.href)\n      }\n    } finally {\n      setExecuting(null)\n    }\n  }\n\n  const handleDismiss = async (event?: React.MouseEvent) => {\n    event?.stopPropagation()\n    await onDismiss()\n  }\n\n  // Convert notification actions to the format expected by custom renderers\n  const rendererActions: NotificationTypeAction[] = notification.actions.map((action) => ({\n    id: action.id,\n    labelKey: action.labelKey ?? action.label,\n    variant: action.variant as NotificationTypeAction['variant'],\n    icon: action.icon,\n  }))\n\n  // Use custom renderer if provided\n  if (CustomRenderer) {\n    return (\n      <CustomRenderer\n        notification={{\n          id: notification.id,\n          type: notification.type,\n          title: titleText,\n          body: bodyText || null,\n          titleKey: notification.titleKey,\n          bodyKey: notification.bodyKey,\n          titleVariables: notification.titleVariables ?? null,\n          bodyVariables: notification.bodyVariables ?? null,\n          icon: notification.icon,\n          severity: notification.severity,\n          status: notification.status,\n          sourceModule: notification.sourceModule,\n          sourceEntityType: notification.sourceEntityType,\n          sourceEntityId: notification.sourceEntityId,\n          linkHref: notification.linkHref ?? null,\n          createdAt: notification.createdAt,\n        }}\n        onAction={handleAction}\n        onDismiss={handleDismiss}\n        actions={rendererActions}\n      />\n    )\n  }\n\n  return (\n    <div\n      className={cn(\n        'group relative px-4 py-3 hover:bg-muted/50 cursor-pointer transition-colors',\n        isUnread && 'bg-muted/30'\n      )}\n      onClick={handleClick}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault()\n          handleClick()\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      {isUnread && (\n        <div className=\"absolute left-1.5 top-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-primary\" />\n      )}\n\n      <div className=\"flex gap-3\">\n        <div\n          className={cn(\n            'flex-shrink-0 mt-0.5',\n            severityColors[severity] ?? 'text-muted-foreground'\n          )}\n        >\n          <IconComponent className=\"h-5 w-5\" />\n        </div>\n\n        <div className=\"flex-1 min-w-0\">\n          <div className=\"flex items-start justify-between gap-2\">\n            <h4 className={cn('text-sm font-medium', isUnread && 'font-semibold')}>\n              {titleText}\n            </h4>\n            <span className=\"flex-shrink-0 text-xs text-muted-foreground\">\n              {formatRelativeTime(notification.createdAt, { translate: t }) ?? ''}\n            </span>\n          </div>\n\n          {bodyText && (\n            <p className=\"mt-1 text-sm text-muted-foreground line-clamp-2\">\n              {bodyText}\n            </p>\n          )}\n\n          {hasActions && notification.status !== 'actioned' && (\n            <div className=\"mt-2 flex flex-wrap items-start gap-2\">\n              {notification.actions.map((action) => (\n                <Button\n                  key={action.id}\n                  variant={\n                    (action.variant as 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost') ??\n                    'outline'\n                  }\n                  size=\"sm\"\n                  className=\"h-auto min-h-8 max-w-full min-w-0 whitespace-normal break-words text-left\"\n                  onClick={(event) => handleAction(action.id, event)}\n                  disabled={executing !== null}\n                >\n                  {action.labelKey\n                    ? t(action.labelKey, action.label)\n                    : t(action.label, action.label)}\n                  {executing === action.id && (\n                    <Loader2 className=\"ml-1 h-3 w-3 animate-spin\" />\n                  )}\n                </Button>\n              ))}\n            </div>\n          )}\n\n          {notification.status === 'actioned' && notification.actionTaken && (\n            <p className=\"mt-1 text-xs text-muted-foreground italic\">\n              {t('notifications.actionTaken', 'Action taken: {action}', {\n                action: notification.actionTaken,\n              })}\n            </p>\n          )}\n        </div>\n\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"flex-shrink-0 h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity\"\n          onClick={handleDismiss}\n        >\n          <X className=\"h-3 w-3\" />\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/notifications/NotificationPanel.js

@@ -0,0 +1,146 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { X, Bell, CheckCheck, Loader2, RotateCcw } from "lucide-react";
+import { Button } from "../../primitives/button.js";
+import { IconButton } from "../../primitives/icon-button.js";
+import { Tabs, TabsList, TabsTrigger } from "../../primitives/tabs.js";
+import { NotificationItem } from "./NotificationItem.js";
+function NotificationPanel({
+  open,
+  onOpenChange,
+  notifications,
+  unreadCount,
+  onMarkAsRead,
+  onExecuteAction,
+  onDismiss,
+  dismissUndo,
+  onUndoDismiss,
+  onMarkAllRead,
+  t,
+  customRenderers
+}) {
+  const [filter, setFilter] = React.useState("all");
+  const [markingAllRead, setMarkingAllRead] = React.useState(false);
+  const filteredNotifications = React.useMemo(() => {
+    switch (filter) {
+      case "unread":
+        return notifications.filter((n) => n.status === "unread");
+      case "action":
+        return notifications.filter(
+          (n) => n.actions && n.actions.length > 0 && n.status !== "actioned"
+        );
+      default:
+        return notifications;
+    }
+  }, [notifications, filter]);
+  const handleMarkAllRead = async () => {
+    setMarkingAllRead(true);
+    try {
+      await onMarkAllRead();
+    } finally {
+      setMarkingAllRead(false);
+    }
+  };
+  React.useEffect(() => {
+    if (!open) return;
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [open]);
+  React.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && open) {
+        onOpenChange(false);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, onOpenChange]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-40 bg-black/20",
+        onClick: () => onOpenChange(false),
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed right-0 top-0 z-50 h-full w-full max-w-md border-l bg-background shadow-lg",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": t("notifications.title", "Notifications"),
+        children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5" }),
+              /* @__PURE__ */ jsx("h2", { className: "font-semibold", children: t("notifications.title", "Notifications") }),
+              unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-destructive px-2 py-0.5 text-xs text-destructive-foreground", children: unreadCount })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              unreadCount > 0 && /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: handleMarkAllRead,
+                  disabled: markingAllRead,
+                  children: [
+                    markingAllRead ? /* @__PURE__ */ jsx(Loader2, { className: "mr-1 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(CheckCheck, { className: "mr-1 h-4 w-4" }),
+                    t("notifications.markAllRead", "Mark all read")
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(IconButton, { variant: "ghost", size: "lg", onClick: () => onOpenChange(false), children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Tabs,
+            {
+              value: filter,
+              onValueChange: (v) => setFilter(v),
+              className: "border-b",
+              children: /* @__PURE__ */ jsxs(TabsList, { className: "w-full justify-start rounded-none border-0 bg-transparent px-4", children: [
+                /* @__PURE__ */ jsx(TabsTrigger, { value: "all", children: t("notifications.filters.all", "All") }),
+                /* @__PURE__ */ jsx(TabsTrigger, { value: "unread", children: t("notifications.filters.unread", "Unread") }),
+                /* @__PURE__ */ jsx(TabsTrigger, { value: "action", children: t("notifications.filters.actionRequired", "Action Required") })
+              ] })
+            }
+          ),
+          dismissUndo && onUndoDismiss && /* @__PURE__ */ jsx("div", { className: "border-b bg-muted/40 px-4 py-2 text-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsx("span", { children: t("notifications.toast.dismissed", "Notification dismissed") }),
+            /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: () => onUndoDismiss(), children: [
+              /* @__PURE__ */ jsx(RotateCcw, { className: "mr-1 h-3 w-3" }),
+              t("notifications.actions.undo", "Undo")
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto overscroll-contain", children: filteredNotifications.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Bell, { className: "mb-2 h-8 w-8 opacity-50" }),
+            /* @__PURE__ */ jsx("p", { children: t("notifications.empty", "No notifications") })
+          ] }) : /* @__PURE__ */ jsx("div", { className: "divide-y", children: filteredNotifications.map((notification) => /* @__PURE__ */ jsx(
+            NotificationItem,
+            {
+              notification,
+              onMarkAsRead: () => onMarkAsRead(notification.id),
+              onExecuteAction: (actionId) => onExecuteAction(notification.id, actionId),
+              onDismiss: () => onDismiss(notification.id),
+              t,
+              customRenderer: customRenderers?.[notification.type]
+            },
+            notification.id
+          )) }) })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  NotificationPanel
+};
+//# sourceMappingURL=NotificationPanel.js.map

package/dist/backend/notifications/NotificationPanel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/notifications/NotificationPanel.tsx"],
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { X, Bell, CheckCheck, Loader2, RotateCcw } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { IconButton } from '../../primitives/icon-button'\nimport { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs'\nimport { NotificationItem } from './NotificationItem'\nimport type { NotificationDto, NotificationRendererProps } from '@open-mercato/shared/modules/notifications/types'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\nimport type { ComponentType } from 'react'\n\n/**\n * Map of notification type to custom renderer component.\n * Used to provide custom rendering for specific notification types.\n *\n * @example\n * ```tsx\n * const customRenderers = {\n *   'sales.order.created': SalesOrderCreatedRenderer,\n *   'sales.quote.created': SalesQuoteCreatedRenderer,\n * }\n * ```\n */\nexport type NotificationRenderers = Record<string, ComponentType<NotificationRendererProps>>\n\nexport type NotificationPanelProps = {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  notifications: NotificationDto[]\n  unreadCount: number\n  onMarkAsRead: (id: string) => Promise<void>\n  onExecuteAction: (id: string, actionId: string) => Promise<{ href?: string }>\n  onDismiss: (id: string) => Promise<void>\n  dismissUndo?: { notification: NotificationDto; previousStatus: 'read' | 'unread' } | null\n  onUndoDismiss?: () => Promise<void>\n  onMarkAllRead: () => Promise<void>\n  t: TranslateFn\n  /**\n   * Optional map of notification type to custom renderer component.\n   * When a notification's type matches a key in this map, the corresponding\n   * renderer will be used instead of the default NotificationItem rendering.\n   *\n   * @example\n   * ```tsx\n   * import { salesNotificationTypes } from '@open-mercato/core/modules/sales/notifications.client'\n   *\n   * // Build renderers map from notification types\n   * const renderers = Object.fromEntries(\n   *   salesNotificationTypes\n   *     .filter(t => t.Renderer)\n   *     .map(t => [t.type, t.Renderer!])\n   * )\n   *\n   * <NotificationPanel customRenderers={renderers} ... />\n   * ```\n   */\n  customRenderers?: NotificationRenderers\n}\n\nexport function NotificationPanel({\n  open,\n  onOpenChange,\n  notifications,\n  unreadCount,\n  onMarkAsRead,\n  onExecuteAction,\n  onDismiss,\n  dismissUndo,\n  onUndoDismiss,\n  onMarkAllRead,\n  t,\n  customRenderers,\n}: NotificationPanelProps) {\n  const [filter, setFilter] = React.useState<'all' | 'unread' | 'action'>('all')\n  const [markingAllRead, setMarkingAllRead] = React.useState(false)\n\n  const filteredNotifications = React.useMemo(() => {\n    switch (filter) {\n      case 'unread':\n        return notifications.filter((n) => n.status === 'unread')\n      case 'action':\n        return notifications.filter(\n          (n) => n.actions && n.actions.length > 0 && n.status !== 'actioned'\n        )\n      default:\n        return notifications\n    }\n  }, [notifications, filter])\n\n  const handleMarkAllRead = async () => {\n    setMarkingAllRead(true)\n    try {\n      await onMarkAllRead()\n    } finally {\n      setMarkingAllRead(false)\n    }\n  }\n\n  React.useEffect(() => {\n    if (!open) return\n    const prevOverflow = document.body.style.overflow\n    document.body.style.overflow = 'hidden'\n    return () => {\n      document.body.style.overflow = prevOverflow\n    }\n  }, [open])\n\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && open) {\n        onOpenChange(false)\n      }\n    }\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  }, [open, onOpenChange])\n\n  if (!open) return null\n\n  return (\n    <>\n      <div\n        className=\"fixed inset-0 z-40 bg-black/20\"\n        onClick={() => onOpenChange(false)}\n        aria-hidden=\"true\"\n      />\n\n      <div\n        className=\"fixed right-0 top-0 z-50 h-full w-full max-w-md border-l bg-background shadow-lg\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={t('notifications.title', 'Notifications')}\n      >\n        <div className=\"flex h-full flex-col\">\n          <div className=\"flex items-center justify-between border-b px-4 py-3\">\n            <div className=\"flex items-center gap-2\">\n              <Bell className=\"h-5 w-5\" />\n              <h2 className=\"font-semibold\">{t('notifications.title', 'Notifications')}</h2>\n              {unreadCount > 0 && (\n                <span className=\"rounded-full bg-destructive px-2 py-0.5 text-xs text-destructive-foreground\">\n                  {unreadCount}\n                </span>\n              )}\n            </div>\n            <div className=\"flex items-center gap-2\">\n              {unreadCount > 0 && (\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onClick={handleMarkAllRead}\n                  disabled={markingAllRead}\n                >\n                  {markingAllRead ? (\n                    <Loader2 className=\"mr-1 h-4 w-4 animate-spin\" />\n                  ) : (\n                    <CheckCheck className=\"mr-1 h-4 w-4\" />\n                  )}\n                  {t('notifications.markAllRead', 'Mark all read')}\n                </Button>\n              )}\n              <IconButton variant=\"ghost\" size=\"lg\" onClick={() => onOpenChange(false)}>\n                <X className=\"h-5 w-5\" />\n              </IconButton>\n            </div>\n          </div>\n\n          <Tabs\n            value={filter}\n            onValueChange={(v) => setFilter(v as typeof filter)}\n            className=\"border-b\"\n          >\n            <TabsList className=\"w-full justify-start rounded-none border-0 bg-transparent px-4\">\n              <TabsTrigger value=\"all\">\n                {t('notifications.filters.all', 'All')}\n              </TabsTrigger>\n              <TabsTrigger value=\"unread\">\n                {t('notifications.filters.unread', 'Unread')}\n              </TabsTrigger>\n              <TabsTrigger value=\"action\">\n                {t('notifications.filters.actionRequired', 'Action Required')}\n              </TabsTrigger>\n            </TabsList>\n          </Tabs>\n\n          {dismissUndo && onUndoDismiss && (\n            <div className=\"border-b bg-muted/40 px-4 py-2 text-sm\">\n              <div className=\"flex items-center justify-between gap-3\">\n                <span>\n                  {t('notifications.toast.dismissed', 'Notification dismissed')}\n                </span>\n                <Button variant=\"ghost\" size=\"sm\" onClick={() => onUndoDismiss()}>\n                  <RotateCcw className=\"mr-1 h-3 w-3\" />\n                  {t('notifications.actions.undo', 'Undo')}\n                </Button>\n              </div>\n            </div>\n          )}\n\n          <div className=\"flex-1 overflow-y-auto overscroll-contain\">\n            {filteredNotifications.length === 0 ? (\n              <div className=\"flex flex-col items-center justify-center py-12 text-muted-foreground\">\n                <Bell className=\"mb-2 h-8 w-8 opacity-50\" />\n                <p>{t('notifications.empty', 'No notifications')}</p>\n              </div>\n            ) : (\n              <div className=\"divide-y\">\n                {filteredNotifications.map((notification) => (\n                  <NotificationItem\n                    key={notification.id}\n                    notification={notification}\n                    onMarkAsRead={() => onMarkAsRead(notification.id)}\n                    onExecuteAction={(actionId) => onExecuteAction(notification.id, actionId)}\n                    onDismiss={() => onDismiss(notification.id)}\n                    t={t}\n                    customRenderer={customRenderers?.[notification.type]}\n                  />\n                ))}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/notifications/index.js

@@ -0,0 +1,19 @@
+import { NotificationCountBadge } from "./NotificationCountBadge.js";
+import { NotificationBell } from "./NotificationBell.js";
+import { NotificationPanel } from "./NotificationPanel.js";
+import { NotificationItem } from "./NotificationItem.js";
+import { useNotificationsPoll } from "./useNotificationsPoll.js";
+import { useNotificationsSse } from "./useNotificationsSse.js";
+import { useNotifications } from "./useNotifications.js";
+import { useNotificationEffect } from "./useNotificationEffect.js";
+export {
+  NotificationBell,
+  NotificationCountBadge,
+  NotificationItem,
+  NotificationPanel,
+  useNotificationEffect,
+  useNotifications,
+  useNotificationsPoll,
+  useNotificationsSse
+};
+//# sourceMappingURL=index.js.map

package/dist/backend/notifications/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/notifications/index.ts"],
+  "sourcesContent": ["export { NotificationCountBadge } from './NotificationCountBadge'\nexport type { NotificationCountBadgeProps } from './NotificationCountBadge'\n\nexport { NotificationBell } from './NotificationBell'\nexport type { NotificationBellProps } from './NotificationBell'\n\nexport { NotificationPanel } from './NotificationPanel'\nexport type { NotificationPanelProps } from './NotificationPanel'\n\nexport { NotificationItem } from './NotificationItem'\nexport type { NotificationItemProps } from './NotificationItem'\n\nexport { useNotificationsPoll } from './useNotificationsPoll'\nexport type { UseNotificationsPollResult } from './useNotificationsPoll'\nexport { useNotificationsSse } from './useNotificationsSse'\nexport type { UseNotificationsSseResult } from './useNotificationsSse'\nexport { useNotifications } from './useNotifications'\nexport { useNotificationEffect } from './useNotificationEffect'\n\nexport type { NotificationDto } from '@open-mercato/shared/modules/notifications/types'\n"],
+  "mappings": "AAAA,SAAS,8BAA8B;AAGvC,SAAS,wBAAwB;AAGjC,SAAS,yBAAyB;AAGlC,SAAS,wBAAwB;AAGjC,SAAS,4BAA4B;AAErC,SAAS,2BAA2B;AAEpC,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;",
+  "names": []
+}

package/dist/backend/notifications/useNotificationActions.js

@@ -0,0 +1,124 @@
+"use client";
+import * as React from "react";
+import { apiCall } from "../utils/apiCall.js";
+function useNotificationActions(notifications, setNotifications, setUnreadCount) {
+  const markAsReadRef = React.useRef(async () => {
+  });
+  const dismissRef = React.useRef(async () => {
+  });
+  const [dismissUndo, setDismissUndo] = React.useState(null);
+  const dismissUndoTimerRef = React.useRef(null);
+  const markAsRead = React.useCallback(async (id) => {
+    await apiCall(`/api/notifications/${id}/read`, { method: "PUT" });
+    setNotifications(
+      (prev) => prev.map(
+        (n) => n.id === id ? { ...n, status: "read", readAt: (/* @__PURE__ */ new Date()).toISOString() } : n
+      )
+    );
+    setUnreadCount((prev) => Math.max(0, prev - 1));
+  }, [setNotifications, setUnreadCount]);
+  React.useEffect(() => {
+    markAsReadRef.current = markAsRead;
+  }, [markAsRead]);
+  const executeAction = React.useCallback(async (id, actionId) => {
+    const result = await apiCall(
+      `/api/notifications/${id}/action`,
+      {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ actionId })
+      }
+    );
+    if (result.ok) {
+      setNotifications(
+        (prev) => prev.map(
+          (n) => n.id === id ? { ...n, status: "actioned", actionTaken: actionId } : n
+        )
+      );
+      setUnreadCount((prev) => Math.max(0, prev - 1));
+    }
+    return { href: result.result?.href };
+  }, [setNotifications, setUnreadCount]);
+  const dismiss = React.useCallback(
+    async (id) => {
+      await apiCall(`/api/notifications/${id}/dismiss`, { method: "PUT" });
+      const notification = notifications.find((n) => n.id === id);
+      setNotifications((prev) => prev.filter((n) => n.id !== id));
+      if (notification?.status === "unread") {
+        setUnreadCount((prev) => Math.max(0, prev - 1));
+      }
+      if (notification) {
+        const previousStatus = notification.status === "unread" ? "unread" : "read";
+        setDismissUndo({ notification, previousStatus });
+        if (dismissUndoTimerRef.current) {
+          window.clearTimeout(dismissUndoTimerRef.current);
+        }
+        dismissUndoTimerRef.current = window.setTimeout(() => {
+          setDismissUndo(null);
+        }, 6e3);
+      }
+    },
+    [notifications, setNotifications, setUnreadCount]
+  );
+  React.useEffect(() => {
+    dismissRef.current = dismiss;
+  }, [dismiss]);
+  const undoDismiss = React.useCallback(async () => {
+    if (!dismissUndo) return;
+    await apiCall(`/api/notifications/${dismissUndo.notification.id}/restore`, {
+      method: "PUT",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ status: dismissUndo.previousStatus })
+    });
+    setNotifications((prev) => {
+      const next = [
+        {
+          ...dismissUndo.notification,
+          status: dismissUndo.previousStatus,
+          readAt: dismissUndo.previousStatus === "unread" ? null : dismissUndo.notification.readAt ?? (/* @__PURE__ */ new Date()).toISOString()
+        },
+        ...prev.filter((n) => n.id !== dismissUndo.notification.id)
+      ];
+      return next.sort(
+        (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+      );
+    });
+    if (dismissUndo.previousStatus === "unread") {
+      setUnreadCount((prev) => prev + 1);
+    }
+    if (dismissUndoTimerRef.current) {
+      window.clearTimeout(dismissUndoTimerRef.current);
+    }
+    setDismissUndo(null);
+  }, [dismissUndo, setNotifications, setUnreadCount]);
+  const markAllRead = React.useCallback(async () => {
+    await apiCall("/api/notifications/mark-all-read", { method: "PUT" });
+    setNotifications(
+      (prev) => prev.map(
+        (n) => n.status === "unread" ? { ...n, status: "read", readAt: (/* @__PURE__ */ new Date()).toISOString() } : n
+      )
+    );
+    setUnreadCount(0);
+  }, [setNotifications, setUnreadCount]);
+  React.useEffect(() => {
+    return () => {
+      if (dismissUndoTimerRef.current) {
+        window.clearTimeout(dismissUndoTimerRef.current);
+      }
+    };
+  }, []);
+  return {
+    markAsRead,
+    executeAction,
+    dismiss,
+    dismissUndo,
+    undoDismiss,
+    markAllRead,
+    markAsReadRef,
+    dismissRef
+  };
+}
+export {
+  useNotificationActions
+};
+//# sourceMappingURL=useNotificationActions.js.map

package/dist/backend/notifications/useNotificationActions.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/notifications/useNotificationActions.ts"],
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { apiCall } from '../utils/apiCall'\nimport type { NotificationDto } from '@open-mercato/shared/modules/notifications/types'\n\nexport type NotificationDismissUndoState = {\n  notification: NotificationDto\n  previousStatus: 'read' | 'unread'\n} | null\n\ntype SetUnreadCount = React.Dispatch<React.SetStateAction<number>>\n\nexport type NotificationActionsResult = {\n  markAsRead: (id: string) => Promise<void>\n  executeAction: (id: string, actionId: string) => Promise<{ href?: string }>\n  dismiss: (id: string) => Promise<void>\n  dismissUndo: NotificationDismissUndoState\n  undoDismiss: () => Promise<void>\n  markAllRead: () => Promise<void>\n  markAsReadRef: React.MutableRefObject<(id: string) => Promise<void>>\n  dismissRef: React.MutableRefObject<(id: string) => Promise<void>>\n}\n\nexport function useNotificationActions(\n  notifications: NotificationDto[],\n  setNotifications: React.Dispatch<React.SetStateAction<NotificationDto[]>>,\n  setUnreadCount: SetUnreadCount,\n): NotificationActionsResult {\n  const markAsReadRef = React.useRef<(id: string) => Promise<void>>(async () => {})\n  const dismissRef = React.useRef<(id: string) => Promise<void>>(async () => {})\n  const [dismissUndo, setDismissUndo] = React.useState<NotificationDismissUndoState>(null)\n  const dismissUndoTimerRef = React.useRef<number | null>(null)\n\n  const markAsRead = React.useCallback(async (id: string) => {\n    await apiCall(`/api/notifications/${id}/read`, { method: 'PUT' })\n    setNotifications((prev) =>\n      prev.map((n) =>\n        n.id === id ? { ...n, status: 'read', readAt: new Date().toISOString() } : n,\n      ),\n    )\n    setUnreadCount((prev) => Math.max(0, prev - 1))\n  }, [setNotifications, setUnreadCount])\n\n  React.useEffect(() => {\n    markAsReadRef.current = markAsRead\n  }, [markAsRead])\n\n  const executeAction = React.useCallback(async (id: string, actionId: string) => {\n    const result = await apiCall<{ ok: boolean; href?: string }>(\n      `/api/notifications/${id}/action`,\n      {\n        method: 'POST',\n        headers: { 'content-type': 'application/json' },\n        body: JSON.stringify({ actionId }),\n      },\n    )\n\n    if (result.ok) {\n      setNotifications((prev) =>\n        prev.map((n) =>\n          n.id === id ? { ...n, status: 'actioned', actionTaken: actionId } : n,\n        ),\n      )\n      setUnreadCount((prev) => Math.max(0, prev - 1))\n    }\n\n    return { href: result.result?.href }\n  }, [setNotifications, setUnreadCount])\n\n  const dismiss = React.useCallback(\n    async (id: string) => {\n      await apiCall(`/api/notifications/${id}/dismiss`, { method: 'PUT' })\n      const notification = notifications.find((n) => n.id === id)\n      setNotifications((prev) => prev.filter((n) => n.id !== id))\n      if (notification?.status === 'unread') {\n        setUnreadCount((prev) => Math.max(0, prev - 1))\n      }\n      if (notification) {\n        const previousStatus = notification.status === 'unread' ? 'unread' : 'read'\n        setDismissUndo({ notification, previousStatus })\n        if (dismissUndoTimerRef.current) {\n          window.clearTimeout(dismissUndoTimerRef.current)\n        }\n        dismissUndoTimerRef.current = window.setTimeout(() => {\n          setDismissUndo(null)\n        }, 6000)\n      }\n    },\n    [notifications, setNotifications, setUnreadCount],\n  )\n\n  React.useEffect(() => {\n    dismissRef.current = dismiss\n  }, [dismiss])\n\n  const undoDismiss = React.useCallback(async () => {\n    if (!dismissUndo) return\n    await apiCall(`/api/notifications/${dismissUndo.notification.id}/restore`, {\n      method: 'PUT',\n      headers: { 'content-type': 'application/json' },\n      body: JSON.stringify({ status: dismissUndo.previousStatus }),\n    })\n\n    setNotifications((prev) => {\n      const next = [\n        {\n          ...dismissUndo.notification,\n          status: dismissUndo.previousStatus,\n          readAt:\n            dismissUndo.previousStatus === 'unread'\n              ? null\n              : dismissUndo.notification.readAt ?? new Date().toISOString(),\n        },\n        ...prev.filter((n) => n.id !== dismissUndo.notification.id),\n      ]\n      return next.sort(\n        (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),\n      )\n    })\n\n    if (dismissUndo.previousStatus === 'unread') {\n      setUnreadCount((prev) => prev + 1)\n    }\n\n    if (dismissUndoTimerRef.current) {\n      window.clearTimeout(dismissUndoTimerRef.current)\n    }\n    setDismissUndo(null)\n  }, [dismissUndo, setNotifications, setUnreadCount])\n\n  const markAllRead = React.useCallback(async () => {\n    await apiCall('/api/notifications/mark-all-read', { method: 'PUT' })\n    setNotifications((prev) =>\n      prev.map((n) =>\n        n.status === 'unread'\n          ? { ...n, status: 'read', readAt: new Date().toISOString() }\n          : n,\n      ),\n    )\n    setUnreadCount(0)\n  }, [setNotifications, setUnreadCount])\n\n  React.useEffect(() => {\n    return () => {\n      if (dismissUndoTimerRef.current) {\n        window.clearTimeout(dismissUndoTimerRef.current)\n      }\n    }\n  }, [])\n\n  return {\n    markAsRead,\n    executeAction,\n    dismiss,\n    dismissUndo,\n    undoDismiss,\n    markAllRead,\n    markAsReadRef,\n    dismissRef,\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/notifications/useNotificationEffect.js

@@ -0,0 +1,13 @@
+"use client";
+import * as React from "react";
+import { subscribeNotificationEffects } from "./NotificationDispatcher.js";
+function useNotificationEffect(notificationType, effect, deps = []) {
+  React.useEffect(() => {
+    const unsubscribe = subscribeNotificationEffects(notificationType, effect);
+    return unsubscribe;
+  }, [notificationType, ...deps]);
+}
+export {
+  useNotificationEffect
+};
+//# sourceMappingURL=useNotificationEffect.js.map

package/dist/backend/notifications/useNotificationEffect.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/notifications/useNotificationEffect.ts"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport type { NotificationDto } from '@open-mercato/shared/modules/notifications/types'\nimport { subscribeNotificationEffects } from './NotificationDispatcher'\n\nexport function useNotificationEffect(\n  notificationType: string | string[],\n  effect: (notification: NotificationDto) => void,\n  deps: React.DependencyList = [],\n) {\n  React.useEffect(() => {\n    const unsubscribe = subscribeNotificationEffects(notificationType, effect)\n    return unsubscribe\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [notificationType, ...deps])\n}\n"],
+  "mappings": ";AAEA,YAAY,WAAW;AAEvB,SAAS,oCAAoC;AAEtC,SAAS,sBACd,kBACA,QACA,OAA6B,CAAC,GAC9B;AACA,QAAM,UAAU,MAAM;AACpB,UAAM,cAAc,6BAA6B,kBAAkB,MAAM;AACzE,WAAO;AAAA,EAET,GAAG,CAAC,kBAAkB,GAAG,IAAI,CAAC;AAChC;",
+  "names": []
+}

package/dist/backend/notifications/useNotifications.js

@@ -0,0 +1,11 @@
+"use client";
+import { useNotificationsPoll } from "./useNotificationsPoll.js";
+import { useNotificationsSse } from "./useNotificationsSse.js";
+const notificationsStrategy = typeof window !== "undefined" && typeof window.EventSource !== "undefined" ? useNotificationsSse : useNotificationsPoll;
+function useNotifications() {
+  return notificationsStrategy();
+}
+export {
+  useNotifications
+};
+//# sourceMappingURL=useNotifications.js.map

package/dist/backend/notifications/useNotifications.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/notifications/useNotifications.ts"],
+  "sourcesContent": ["\"use client\"\nimport { useNotificationsPoll, type UseNotificationsPollResult } from './useNotificationsPoll'\nimport { useNotificationsSse } from './useNotificationsSse'\n\nconst notificationsStrategy =\n  typeof window !== 'undefined' && typeof window.EventSource !== 'undefined'\n    ? useNotificationsSse\n    : useNotificationsPoll\n\nexport function useNotifications(): UseNotificationsPollResult {\n  return notificationsStrategy()\n}\n"],
+  "mappings": ";AACA,SAAS,4BAA6D;AACtE,SAAS,2BAA2B;AAEpC,MAAM,wBACJ,OAAO,WAAW,eAAe,OAAO,OAAO,gBAAgB,cAC3D,sBACA;AAEC,SAAS,mBAA+C;AAC7D,SAAO,sBAAsB;AAC/B;",
+  "names": []
+}