@brokr/sdk 2.0.0 → 2.1.1

package/dist/feature.js

@@ -700,9 +700,29 @@ async function gatewayStream(gatewayUrl, token, path, body, capability) {
   if (res.status === 401) {
     throw new BrokrAuthError("Invalid or expired BROKR_TOKEN.", "BROKR_TOKEN_INVALID");
   }
-  if (!res.ok || !res.body) {
+  if (!res.ok) {
+    const body2 = await res.json().catch(() => ({}));
+    const errObj = typeof body2.error === "object" && body2.error !== null ? body2.error : void 0;
+    const errorData = body2.data ?? errObj?.data ?? body2;
+    const errorCode = errorData.errorCode ?? body2.code;
+    const hint = errorData.hint;
+    const requestId = errorData.requestId ?? res.headers.get("x-request-id");
+    const retryable = body2.retryable ?? errorData.retryable;
+    const errorStr = typeof body2.error === "string" ? body2.error : void 0;
+    const message = body2.message ?? errObj?.message ?? errorStr ?? `${capability} stream failed (HTTP ${res.status})`;
+    throw new BrokrError(
+      message,
+      errorCode ?? `${capability.toUpperCase()}_STREAM_FAILED`,
+      capability,
+      retryable ?? false,
+      errorCode ?? void 0,
+      requestId ?? void 0,
+      hint ?? void 0
+    );
+  }
+  if (!res.body) {
     throw new BrokrError(
-      `${capability} stream failed (HTTP ${res.status})`,
+      `${capability} stream failed (empty body)`,
       `${capability.toUpperCase()}_STREAM_FAILED`,
       capability
     );

package/dist/feature.mjs

@@ -675,9 +675,29 @@ async function gatewayStream(gatewayUrl, token, path, body, capability) {
   if (res.status === 401) {
     throw new BrokrAuthError("Invalid or expired BROKR_TOKEN.", "BROKR_TOKEN_INVALID");
   }
-  if (!res.ok || !res.body) {
+  if (!res.ok) {
+    const body2 = await res.json().catch(() => ({}));
+    const errObj = typeof body2.error === "object" && body2.error !== null ? body2.error : void 0;
+    const errorData = body2.data ?? errObj?.data ?? body2;
+    const errorCode = errorData.errorCode ?? body2.code;
+    const hint = errorData.hint;
+    const requestId = errorData.requestId ?? res.headers.get("x-request-id");
+    const retryable = body2.retryable ?? errorData.retryable;
+    const errorStr = typeof body2.error === "string" ? body2.error : void 0;
+    const message = body2.message ?? errObj?.message ?? errorStr ?? `${capability} stream failed (HTTP ${res.status})`;
+    throw new BrokrError(
+      message,
+      errorCode ?? `${capability.toUpperCase()}_STREAM_FAILED`,
+      capability,
+      retryable ?? false,
+      errorCode ?? void 0,
+      requestId ?? void 0,
+      hint ?? void 0
+    );
+  }
+  if (!res.body) {
     throw new BrokrError(
-      `${capability} stream failed (HTTP ${res.status})`,
+      `${capability} stream failed (empty body)`,
       `${capability.toUpperCase()}_STREAM_FAILED`,
       capability
     );

package/dist/index.js

@@ -1533,9 +1533,29 @@ async function gatewayStream(gatewayUrl, token, path, body, capability) {
   if (res.status === 401) {
     throw new BrokrAuthError("Invalid or expired BROKR_TOKEN.", "BROKR_TOKEN_INVALID");
   }
-  if (!res.ok || !res.body) {
+  if (!res.ok) {
+    const body2 = await res.json().catch(() => ({}));
+    const errObj = typeof body2.error === "object" && body2.error !== null ? body2.error : void 0;
+    const errorData = body2.data ?? errObj?.data ?? body2;
+    const errorCode = errorData.errorCode ?? body2.code;
+    const hint = errorData.hint;
+    const requestId = errorData.requestId ?? res.headers.get("x-request-id");
+    const retryable = body2.retryable ?? errorData.retryable;
+    const errorStr = typeof body2.error === "string" ? body2.error : void 0;
+    const message = body2.message ?? errObj?.message ?? errorStr ?? `${capability} stream failed (HTTP ${res.status})`;
+    throw new BrokrError(
+      message,
+      errorCode ?? `${capability.toUpperCase()}_STREAM_FAILED`,
+      capability,
+      retryable ?? false,
+      errorCode ?? void 0,
+      requestId ?? void 0,
+      hint ?? void 0
+    );
+  }
+  if (!res.body) {
     throw new BrokrError(
-      `${capability} stream failed (HTTP ${res.status})`,
+      `${capability} stream failed (empty body)`,
       `${capability.toUpperCase()}_STREAM_FAILED`,
       capability
     );

package/dist/index.mjs

@@ -1501,9 +1501,29 @@ async function gatewayStream(gatewayUrl, token, path, body, capability) {
   if (res.status === 401) {
     throw new BrokrAuthError("Invalid or expired BROKR_TOKEN.", "BROKR_TOKEN_INVALID");
   }
-  if (!res.ok || !res.body) {
+  if (!res.ok) {
+    const body2 = await res.json().catch(() => ({}));
+    const errObj = typeof body2.error === "object" && body2.error !== null ? body2.error : void 0;
+    const errorData = body2.data ?? errObj?.data ?? body2;
+    const errorCode = errorData.errorCode ?? body2.code;
+    const hint = errorData.hint;
+    const requestId = errorData.requestId ?? res.headers.get("x-request-id");
+    const retryable = body2.retryable ?? errorData.retryable;
+    const errorStr = typeof body2.error === "string" ? body2.error : void 0;
+    const message = body2.message ?? errObj?.message ?? errorStr ?? `${capability} stream failed (HTTP ${res.status})`;
+    throw new BrokrError(
+      message,
+      errorCode ?? `${capability.toUpperCase()}_STREAM_FAILED`,
+      capability,
+      retryable ?? false,
+      errorCode ?? void 0,
+      requestId ?? void 0,
+      hint ?? void 0
+    );
+  }
+  if (!res.body) {
     throw new BrokrError(
-      `${capability} stream failed (HTTP ${res.status})`,
+      `${capability} stream failed (empty body)`,
       `${capability.toUpperCase()}_STREAM_FAILED`,
       capability
     );

package/dist/next.js

@@ -1569,9 +1569,29 @@ async function gatewayStream(gatewayUrl, token, path, body, capability) {
   if (res.status === 401) {
     throw new BrokrAuthError("Invalid or expired BROKR_TOKEN.", "BROKR_TOKEN_INVALID");
   }
-  if (!res.ok || !res.body) {
+  if (!res.ok) {
+    const body2 = await res.json().catch(() => ({}));
+    const errObj = typeof body2.error === "object" && body2.error !== null ? body2.error : void 0;
+    const errorData = body2.data ?? errObj?.data ?? body2;
+    const errorCode = errorData.errorCode ?? body2.code;
+    const hint = errorData.hint;
+    const requestId = errorData.requestId ?? res.headers.get("x-request-id");
+    const retryable = body2.retryable ?? errorData.retryable;
+    const errorStr = typeof body2.error === "string" ? body2.error : void 0;
+    const message = body2.message ?? errObj?.message ?? errorStr ?? `${capability} stream failed (HTTP ${res.status})`;
+    throw new BrokrError(
+      message,
+      errorCode ?? `${capability.toUpperCase()}_STREAM_FAILED`,
+      capability,
+      retryable ?? false,
+      errorCode ?? void 0,
+      requestId ?? void 0,
+      hint ?? void 0
+    );
+  }
+  if (!res.body) {
     throw new BrokrError(
-      `${capability} stream failed (HTTP ${res.status})`,
+      `${capability} stream failed (empty body)`,
       `${capability.toUpperCase()}_STREAM_FAILED`,
       capability
     );

package/dist/next.mjs

@@ -1555,9 +1555,29 @@ async function gatewayStream(gatewayUrl, token, path, body, capability) {
   if (res.status === 401) {
     throw new BrokrAuthError("Invalid or expired BROKR_TOKEN.", "BROKR_TOKEN_INVALID");
   }
-  if (!res.ok || !res.body) {
+  if (!res.ok) {
+    const body2 = await res.json().catch(() => ({}));
+    const errObj = typeof body2.error === "object" && body2.error !== null ? body2.error : void 0;
+    const errorData = body2.data ?? errObj?.data ?? body2;
+    const errorCode = errorData.errorCode ?? body2.code;
+    const hint = errorData.hint;
+    const requestId = errorData.requestId ?? res.headers.get("x-request-id");
+    const retryable = body2.retryable ?? errorData.retryable;
+    const errorStr = typeof body2.error === "string" ? body2.error : void 0;
+    const message = body2.message ?? errObj?.message ?? errorStr ?? `${capability} stream failed (HTTP ${res.status})`;
+    throw new BrokrError(
+      message,
+      errorCode ?? `${capability.toUpperCase()}_STREAM_FAILED`,
+      capability,
+      retryable ?? false,
+      errorCode ?? void 0,
+      requestId ?? void 0,
+      hint ?? void 0
+    );
+  }
+  if (!res.body) {
     throw new BrokrError(
-      `${capability} stream failed (HTTP ${res.status})`,
+      `${capability} stream failed (empty body)`,
       `${capability.toUpperCase()}_STREAM_FAILED`,
       capability
     );

package/dist/react-notifications.js

@@ -109,6 +109,28 @@ function timeAgo(iso) {
   const days = Math.floor(hours / 24);
   return `${days}d ago`;
 }
+function NotifDropdownItem({
+  notif,
+  registry,
+  onClick
+}) {
+  const handleClick = (0, import_react4.useCallback)(() => onClick(notif), [notif, onClick]);
+  const notifData = notif.data ?? {};
+  const notifType = notifData.type ?? "default";
+  const resolved = resolveNotificationType(registry, notifType, notifData);
+  return /* @__PURE__ */ import_react4.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: `brokr-notif-item${notif.read ? "" : " brokr-notif-item--unread"}`,
+      onClick: handleClick,
+      role: "menuitem"
+    },
+    resolved.image ? /* @__PURE__ */ import_react4.default.createElement("img", { src: resolved.image.url, alt: resolved.image.alt, className: "brokr-notif-item-logo" }) : /* @__PURE__ */ import_react4.default.createElement("span", { className: `brokr-notif-item-dot brokr-notif-item-dot--${notif.variant}` }),
+    /* @__PURE__ */ import_react4.default.createElement("div", { className: "brokr-notif-item-body" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "brokr-notif-item-title" }, notif.title), /* @__PURE__ */ import_react4.default.createElement("span", { className: "brokr-notif-item-message" }, notif.message)),
+    /* @__PURE__ */ import_react4.default.createElement("span", { className: "brokr-notif-item-time" }, timeAgo(notif.createdAt))
+  );
+}
 function NotificationBell() {
   const { notifications, unreadCount, markRead, markAllRead, isLoading, registry } = useNotifications();
   const [open, setOpen] = (0, import_react4.useState)(false);
@@ -173,7 +195,8 @@ function NotificationBell() {
       className: "brokr-notif-bell",
       onClick: toggle,
       "aria-label": `Notifications${unreadCount > 0 ? ` (${unreadCount} unread)` : ""}`,
-      "aria-expanded": open
+      "aria-expanded": open,
+      "aria-haspopup": "menu"
     },
     /* @__PURE__ */ import_react4.default.createElement("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react4.default.createElement("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }), /* @__PURE__ */ import_react4.default.createElement("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })),
     unreadCount > 0 && /* @__PURE__ */ import_react4.default.createElement("span", { className: "brokr-notif-badge" }, unreadCount > 99 ? "99+" : unreadCount)
@@ -185,31 +208,15 @@ function NotificationBell() {
       onClick: markAllRead
     },
     "Mark all read"
-  )), /* @__PURE__ */ import_react4.default.createElement("div", { className: "brokr-notif-dropdown-list" }, isLoading ? /* @__PURE__ */ import_react4.default.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "brokr-notif-empty-text" }, "Loading\u2026")) : sorted.length === 0 ? /* @__PURE__ */ import_react4.default.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "brokr-notif-empty-text" }, "No notifications yet")) : sorted.map((notif) => {
-    const notifData = notif.data ?? {};
-    const notifType = notifData.type ?? "default";
-    const resolved = resolveNotificationType(registry, notifType, notifData);
-    return /* @__PURE__ */ import_react4.default.createElement(
-      "button",
-      {
-        key: notif.id,
-        type: "button",
-        className: `brokr-notif-item${notif.read ? "" : " brokr-notif-item--unread"}`,
-        onClick: () => handleItemClick(notif),
-        role: "menuitem"
-      },
-      resolved.image ? /* @__PURE__ */ import_react4.default.createElement(
-        "img",
-        {
-          src: resolved.image.url,
-          alt: resolved.image.alt,
-          className: "brokr-notif-item-logo"
-        }
-      ) : /* @__PURE__ */ import_react4.default.createElement("span", { className: `brokr-notif-item-dot brokr-notif-item-dot--${notif.variant}` }),
-      /* @__PURE__ */ import_react4.default.createElement("div", { className: "brokr-notif-item-body" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "brokr-notif-item-title" }, notif.title), /* @__PURE__ */ import_react4.default.createElement("span", { className: "brokr-notif-item-message" }, notif.message)),
-      /* @__PURE__ */ import_react4.default.createElement("span", { className: "brokr-notif-item-time" }, timeAgo(notif.createdAt))
-    );
-  }))));
+  )), /* @__PURE__ */ import_react4.default.createElement("div", { className: "brokr-notif-dropdown-list" }, isLoading ? /* @__PURE__ */ import_react4.default.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "brokr-notif-empty-text" }, "Loading\u2026")) : sorted.length === 0 ? /* @__PURE__ */ import_react4.default.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "brokr-notif-empty-text" }, "No notifications yet")) : sorted.map((notif) => /* @__PURE__ */ import_react4.default.createElement(
+    NotifDropdownItem,
+    {
+      key: notif.id,
+      notif,
+      registry,
+      onClick: handleItemClick
+    }
+  )))));
 }
 
 // src/react/notifications/NotificationList.tsx
@@ -226,6 +233,27 @@ function formatTimestamp(iso) {
 function NotificationListSkeleton() {
   return /* @__PURE__ */ import_react5.default.createElement("div", { className: "brokr-notif-list-items" }, [1, 2, 3].map((i) => /* @__PURE__ */ import_react5.default.createElement("div", { key: i, className: "brokr-notif-list-row brokr-notif-list-row--skeleton" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: "brokr-notif-item-dot brokr-notif-item-dot--skeleton" }), /* @__PURE__ */ import_react5.default.createElement("div", { className: "brokr-notif-item-body" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: "brokr-notif-item-title brokr-skeleton-line", style: { width: "60%" } }), /* @__PURE__ */ import_react5.default.createElement("span", { className: "brokr-notif-item-message brokr-skeleton-line", style: { width: "80%" } })), /* @__PURE__ */ import_react5.default.createElement("span", { className: "brokr-notif-item-time brokr-skeleton-line", style: { width: 48 } }))));
 }
+function NotifListItem({
+  notif,
+  registry,
+  onClick
+}) {
+  const handleClick = (0, import_react5.useCallback)(() => onClick(notif), [notif, onClick]);
+  const notifData = notif.data ?? {};
+  const notifType = notif.type ?? notifData.type ?? "default";
+  const resolved = resolveNotificationType(registry, notifType, notifData);
+  return /* @__PURE__ */ import_react5.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: `brokr-notif-list-row${notif.read ? "" : " brokr-notif-list-row--unread"}`,
+      onClick: handleClick
+    },
+    resolved.image ? /* @__PURE__ */ import_react5.default.createElement("img", { src: resolved.image.url, alt: resolved.image.alt, className: "brokr-notif-item-logo" }) : /* @__PURE__ */ import_react5.default.createElement("span", { className: `brokr-notif-item-dot brokr-notif-item-dot--${notif.variant}` }),
+    /* @__PURE__ */ import_react5.default.createElement("div", { className: "brokr-notif-item-body" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: "brokr-notif-item-title" }, notif.title), /* @__PURE__ */ import_react5.default.createElement("span", { className: "brokr-notif-item-message" }, notif.message)),
+    /* @__PURE__ */ import_react5.default.createElement("span", { className: "brokr-notif-item-time" }, formatTimestamp(notif.createdAt))
+  );
+}
 function NotificationList() {
   const { notifications, unreadCount, markRead, markAllRead, isLoading, registry } = useNotifications();
   const sorted = (0, import_react5.useMemo)(
@@ -252,30 +280,15 @@ function NotificationList() {
       onClick: markAllRead
     },
     "Mark all read"
-  )), isLoading ? /* @__PURE__ */ import_react5.default.createElement(NotificationListSkeleton, null) : sorted.length === 0 ? /* @__PURE__ */ import_react5.default.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ import_react5.default.createElement("svg", { "aria-hidden": "true", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round", strokeLinejoin: "round", style: { opacity: 0.3 } }, /* @__PURE__ */ import_react5.default.createElement("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }), /* @__PURE__ */ import_react5.default.createElement("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })), /* @__PURE__ */ import_react5.default.createElement("span", { className: "brokr-notif-empty-text" }, "No notifications yet")) : /* @__PURE__ */ import_react5.default.createElement("div", { className: "brokr-notif-list-items" }, sorted.map((notif) => {
-    const notifData = notif.data ?? {};
-    const notifType = notif.type ?? notifData.type ?? "default";
-    const resolved = resolveNotificationType(registry, notifType, notifData);
-    return /* @__PURE__ */ import_react5.default.createElement(
-      "button",
-      {
-        key: notif.id,
-        type: "button",
-        className: `brokr-notif-list-row${notif.read ? "" : " brokr-notif-list-row--unread"}`,
-        onClick: () => handleClick(notif)
-      },
-      resolved.image ? /* @__PURE__ */ import_react5.default.createElement(
-        "img",
-        {
-          src: resolved.image.url,
-          alt: resolved.image.alt,
-          className: "brokr-notif-item-logo"
-        }
-      ) : /* @__PURE__ */ import_react5.default.createElement("span", { className: `brokr-notif-item-dot brokr-notif-item-dot--${notif.variant}` }),
-      /* @__PURE__ */ import_react5.default.createElement("div", { className: "brokr-notif-item-body" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: "brokr-notif-item-title" }, notif.title), /* @__PURE__ */ import_react5.default.createElement("span", { className: "brokr-notif-item-message" }, notif.message)),
-      /* @__PURE__ */ import_react5.default.createElement("span", { className: "brokr-notif-item-time" }, formatTimestamp(notif.createdAt))
-    );
-  })));
+  )), isLoading ? /* @__PURE__ */ import_react5.default.createElement(NotificationListSkeleton, null) : sorted.length === 0 ? /* @__PURE__ */ import_react5.default.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ import_react5.default.createElement("svg", { "aria-hidden": "true", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round", strokeLinejoin: "round", style: { opacity: 0.3 } }, /* @__PURE__ */ import_react5.default.createElement("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }), /* @__PURE__ */ import_react5.default.createElement("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })), /* @__PURE__ */ import_react5.default.createElement("span", { className: "brokr-notif-empty-text" }, "No notifications yet")) : /* @__PURE__ */ import_react5.default.createElement("div", { className: "brokr-notif-list-items" }, sorted.map((notif) => /* @__PURE__ */ import_react5.default.createElement(
+    NotifListItem,
+    {
+      key: notif.id,
+      notif,
+      registry,
+      onClick: handleClick
+    }
+  ))));
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/react-notifications.mjs

@@ -78,6 +78,28 @@ function timeAgo(iso) {
   const days = Math.floor(hours / 24);
   return `${days}d ago`;
 }
+function NotifDropdownItem({
+  notif,
+  registry,
+  onClick
+}) {
+  const handleClick = useCallback3(() => onClick(notif), [notif, onClick]);
+  const notifData = notif.data ?? {};
+  const notifType = notifData.type ?? "default";
+  const resolved = resolveNotificationType(registry, notifType, notifData);
+  return /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      type: "button",
+      className: `brokr-notif-item${notif.read ? "" : " brokr-notif-item--unread"}`,
+      onClick: handleClick,
+      role: "menuitem"
+    },
+    resolved.image ? /* @__PURE__ */ React3.createElement("img", { src: resolved.image.url, alt: resolved.image.alt, className: "brokr-notif-item-logo" }) : /* @__PURE__ */ React3.createElement("span", { className: `brokr-notif-item-dot brokr-notif-item-dot--${notif.variant}` }),
+    /* @__PURE__ */ React3.createElement("div", { className: "brokr-notif-item-body" }, /* @__PURE__ */ React3.createElement("span", { className: "brokr-notif-item-title" }, notif.title), /* @__PURE__ */ React3.createElement("span", { className: "brokr-notif-item-message" }, notif.message)),
+    /* @__PURE__ */ React3.createElement("span", { className: "brokr-notif-item-time" }, timeAgo(notif.createdAt))
+  );
+}
 function NotificationBell() {
   const { notifications, unreadCount, markRead, markAllRead, isLoading, registry } = useNotifications();
   const [open, setOpen] = useState3(false);
@@ -142,7 +164,8 @@ function NotificationBell() {
       className: "brokr-notif-bell",
       onClick: toggle,
       "aria-label": `Notifications${unreadCount > 0 ? ` (${unreadCount} unread)` : ""}`,
-      "aria-expanded": open
+      "aria-expanded": open,
+      "aria-haspopup": "menu"
     },
     /* @__PURE__ */ React3.createElement("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React3.createElement("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }), /* @__PURE__ */ React3.createElement("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })),
     unreadCount > 0 && /* @__PURE__ */ React3.createElement("span", { className: "brokr-notif-badge" }, unreadCount > 99 ? "99+" : unreadCount)
@@ -154,31 +177,15 @@ function NotificationBell() {
       onClick: markAllRead
     },
     "Mark all read"
-  )), /* @__PURE__ */ React3.createElement("div", { className: "brokr-notif-dropdown-list" }, isLoading ? /* @__PURE__ */ React3.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ React3.createElement("span", { className: "brokr-notif-empty-text" }, "Loading\u2026")) : sorted.length === 0 ? /* @__PURE__ */ React3.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ React3.createElement("span", { className: "brokr-notif-empty-text" }, "No notifications yet")) : sorted.map((notif) => {
-    const notifData = notif.data ?? {};
-    const notifType = notifData.type ?? "default";
-    const resolved = resolveNotificationType(registry, notifType, notifData);
-    return /* @__PURE__ */ React3.createElement(
-      "button",
-      {
-        key: notif.id,
-        type: "button",
-        className: `brokr-notif-item${notif.read ? "" : " brokr-notif-item--unread"}`,
-        onClick: () => handleItemClick(notif),
-        role: "menuitem"
-      },
-      resolved.image ? /* @__PURE__ */ React3.createElement(
-        "img",
-        {
-          src: resolved.image.url,
-          alt: resolved.image.alt,
-          className: "brokr-notif-item-logo"
-        }
-      ) : /* @__PURE__ */ React3.createElement("span", { className: `brokr-notif-item-dot brokr-notif-item-dot--${notif.variant}` }),
-      /* @__PURE__ */ React3.createElement("div", { className: "brokr-notif-item-body" }, /* @__PURE__ */ React3.createElement("span", { className: "brokr-notif-item-title" }, notif.title), /* @__PURE__ */ React3.createElement("span", { className: "brokr-notif-item-message" }, notif.message)),
-      /* @__PURE__ */ React3.createElement("span", { className: "brokr-notif-item-time" }, timeAgo(notif.createdAt))
-    );
-  }))));
+  )), /* @__PURE__ */ React3.createElement("div", { className: "brokr-notif-dropdown-list" }, isLoading ? /* @__PURE__ */ React3.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ React3.createElement("span", { className: "brokr-notif-empty-text" }, "Loading\u2026")) : sorted.length === 0 ? /* @__PURE__ */ React3.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ React3.createElement("span", { className: "brokr-notif-empty-text" }, "No notifications yet")) : sorted.map((notif) => /* @__PURE__ */ React3.createElement(
+    NotifDropdownItem,
+    {
+      key: notif.id,
+      notif,
+      registry,
+      onClick: handleItemClick
+    }
+  )))));
 }
 
 // src/react/notifications/NotificationList.tsx
@@ -195,6 +202,27 @@ function formatTimestamp(iso) {
 function NotificationListSkeleton() {
   return /* @__PURE__ */ React4.createElement("div", { className: "brokr-notif-list-items" }, [1, 2, 3].map((i) => /* @__PURE__ */ React4.createElement("div", { key: i, className: "brokr-notif-list-row brokr-notif-list-row--skeleton" }, /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-item-dot brokr-notif-item-dot--skeleton" }), /* @__PURE__ */ React4.createElement("div", { className: "brokr-notif-item-body" }, /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-item-title brokr-skeleton-line", style: { width: "60%" } }), /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-item-message brokr-skeleton-line", style: { width: "80%" } })), /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-item-time brokr-skeleton-line", style: { width: 48 } }))));
 }
+function NotifListItem({
+  notif,
+  registry,
+  onClick
+}) {
+  const handleClick = useCallback4(() => onClick(notif), [notif, onClick]);
+  const notifData = notif.data ?? {};
+  const notifType = notif.type ?? notifData.type ?? "default";
+  const resolved = resolveNotificationType(registry, notifType, notifData);
+  return /* @__PURE__ */ React4.createElement(
+    "button",
+    {
+      type: "button",
+      className: `brokr-notif-list-row${notif.read ? "" : " brokr-notif-list-row--unread"}`,
+      onClick: handleClick
+    },
+    resolved.image ? /* @__PURE__ */ React4.createElement("img", { src: resolved.image.url, alt: resolved.image.alt, className: "brokr-notif-item-logo" }) : /* @__PURE__ */ React4.createElement("span", { className: `brokr-notif-item-dot brokr-notif-item-dot--${notif.variant}` }),
+    /* @__PURE__ */ React4.createElement("div", { className: "brokr-notif-item-body" }, /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-item-title" }, notif.title), /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-item-message" }, notif.message)),
+    /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-item-time" }, formatTimestamp(notif.createdAt))
+  );
+}
 function NotificationList() {
   const { notifications, unreadCount, markRead, markAllRead, isLoading, registry } = useNotifications();
   const sorted = useMemo4(
@@ -221,30 +249,15 @@ function NotificationList() {
       onClick: markAllRead
     },
     "Mark all read"
-  )), isLoading ? /* @__PURE__ */ React4.createElement(NotificationListSkeleton, null) : sorted.length === 0 ? /* @__PURE__ */ React4.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ React4.createElement("svg", { "aria-hidden": "true", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round", strokeLinejoin: "round", style: { opacity: 0.3 } }, /* @__PURE__ */ React4.createElement("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }), /* @__PURE__ */ React4.createElement("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })), /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-empty-text" }, "No notifications yet")) : /* @__PURE__ */ React4.createElement("div", { className: "brokr-notif-list-items" }, sorted.map((notif) => {
-    const notifData = notif.data ?? {};
-    const notifType = notif.type ?? notifData.type ?? "default";
-    const resolved = resolveNotificationType(registry, notifType, notifData);
-    return /* @__PURE__ */ React4.createElement(
-      "button",
-      {
-        key: notif.id,
-        type: "button",
-        className: `brokr-notif-list-row${notif.read ? "" : " brokr-notif-list-row--unread"}`,
-        onClick: () => handleClick(notif)
-      },
-      resolved.image ? /* @__PURE__ */ React4.createElement(
-        "img",
-        {
-          src: resolved.image.url,
-          alt: resolved.image.alt,
-          className: "brokr-notif-item-logo"
-        }
-      ) : /* @__PURE__ */ React4.createElement("span", { className: `brokr-notif-item-dot brokr-notif-item-dot--${notif.variant}` }),
-      /* @__PURE__ */ React4.createElement("div", { className: "brokr-notif-item-body" }, /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-item-title" }, notif.title), /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-item-message" }, notif.message)),
-      /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-item-time" }, formatTimestamp(notif.createdAt))
-    );
-  })));
+  )), isLoading ? /* @__PURE__ */ React4.createElement(NotificationListSkeleton, null) : sorted.length === 0 ? /* @__PURE__ */ React4.createElement("div", { className: "brokr-notif-empty" }, /* @__PURE__ */ React4.createElement("svg", { "aria-hidden": "true", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round", strokeLinejoin: "round", style: { opacity: 0.3 } }, /* @__PURE__ */ React4.createElement("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }), /* @__PURE__ */ React4.createElement("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })), /* @__PURE__ */ React4.createElement("span", { className: "brokr-notif-empty-text" }, "No notifications yet")) : /* @__PURE__ */ React4.createElement("div", { className: "brokr-notif-list-items" }, sorted.map((notif) => /* @__PURE__ */ React4.createElement(
+    NotifListItem,
+    {
+      key: notif.id,
+      notif,
+      registry,
+      onClick: handleClick
+    }
+  ))));
 }
 export {
   NotificationBell,