@sinlungtech/push-client 0.1.1 → 0.1.3

package/dist/index.d.mts

@@ -86,6 +86,28 @@ interface PushProviderProps {
     autoSubscribe?: boolean;
     children: React.ReactNode;
 }
+interface PushStatusIndicatorProps {
+    /**
+     * Optional title shown in the indicator.
+     * Default: "Notifications"
+     */
+    title?: string;
+    /**
+     * Show indicator even when notifications are fully enabled.
+     * Default: true
+     */
+    showWhenEnabled?: boolean;
+    /**
+     * Corner placement for the floating indicator.
+     * Default: "bottom-right"
+     */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /**
+     * Optional z-index override.
+     * Default: 2147483000
+     */
+    zIndex?: number;
+}
 
 interface PushContextValue {
     /** Whether the browser supports Web Push */
@@ -131,6 +153,8 @@ interface PushContextValue {
 declare function PushProvider({ vapidKey, serviceWorkerPath, onSubscribe, onUnsubscribe, chatServerUrl, getToken, subscriptionsEndpoint, live, onLiveNotification, showInPageAlerts, inPageAlertDurationMs, autoSubscribe, children, }: PushProviderProps): react_jsx_runtime.JSX.Element;
 declare function usePush(): PushContextValue;
 
+declare function PushStatusIndicator({ title, showWhenEnabled, position, zIndex, }: PushStatusIndicatorProps): react_jsx_runtime.JSX.Element | null;
+
 declare function urlBase64ToUint8Array(base64String: string): ArrayBuffer;
 
-export { type PushPayload, PushProvider, type PushProviderProps, type PushSubscription, urlBase64ToUint8Array, usePush };
+export { type PushPayload, PushProvider, type PushProviderProps, PushStatusIndicator, type PushStatusIndicatorProps, type PushSubscription, urlBase64ToUint8Array, usePush };

package/dist/index.d.ts

@@ -86,6 +86,28 @@ interface PushProviderProps {
     autoSubscribe?: boolean;
     children: React.ReactNode;
 }
+interface PushStatusIndicatorProps {
+    /**
+     * Optional title shown in the indicator.
+     * Default: "Notifications"
+     */
+    title?: string;
+    /**
+     * Show indicator even when notifications are fully enabled.
+     * Default: true
+     */
+    showWhenEnabled?: boolean;
+    /**
+     * Corner placement for the floating indicator.
+     * Default: "bottom-right"
+     */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /**
+     * Optional z-index override.
+     * Default: 2147483000
+     */
+    zIndex?: number;
+}
 
 interface PushContextValue {
     /** Whether the browser supports Web Push */
@@ -131,6 +153,8 @@ interface PushContextValue {
 declare function PushProvider({ vapidKey, serviceWorkerPath, onSubscribe, onUnsubscribe, chatServerUrl, getToken, subscriptionsEndpoint, live, onLiveNotification, showInPageAlerts, inPageAlertDurationMs, autoSubscribe, children, }: PushProviderProps): react_jsx_runtime.JSX.Element;
 declare function usePush(): PushContextValue;
 
+declare function PushStatusIndicator({ title, showWhenEnabled, position, zIndex, }: PushStatusIndicatorProps): react_jsx_runtime.JSX.Element | null;
+
 declare function urlBase64ToUint8Array(base64String: string): ArrayBuffer;
 
-export { type PushPayload, PushProvider, type PushProviderProps, type PushSubscription, urlBase64ToUint8Array, usePush };
+export { type PushPayload, PushProvider, type PushProviderProps, PushStatusIndicator, type PushStatusIndicatorProps, type PushSubscription, urlBase64ToUint8Array, usePush };

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   PushProvider: () => PushProvider,
+  PushStatusIndicator: () => PushStatusIndicator,
   urlBase64ToUint8Array: () => urlBase64ToUint8Array,
   usePush: () => usePush
 });
@@ -317,8 +318,8 @@ function PushProvider({
           tag: payload.tag
         };
         onLiveNotification?.(normalized);
-        if (!onLiveNotification && showInPageAlerts && normalized.body) {
-          pushInPageAlert(normalized.title, normalized.body);
+        if (!onLiveNotification && showInPageAlerts) {
+          pushInPageAlert(normalized.title, normalized.body || "You have a new notification.");
         }
         if (showSystem && typeof window !== "undefined" && Notification.permission === "granted") {
           new Notification(normalized.title, {
@@ -383,9 +384,147 @@ function PushProvider({
 function usePush() {
   return (0, import_react.useContext)(PushContext);
 }
+
+// src/PushStatusIndicator.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var POSITION_STYLES = {
+  "bottom-right": { right: 16, bottom: 16 },
+  "bottom-left": { left: 16, bottom: 16 },
+  "top-right": { right: 16, top: 16 },
+  "top-left": { left: 16, top: 16 }
+};
+function PushStatusIndicator({
+  title = "Notifications",
+  showWhenEnabled = true,
+  position = "bottom-right",
+  zIndex = 2147483e3
+}) {
+  const { isSupported: isSupported2, permission, isSubscribed, subscribe, unsubscribe, error } = usePush();
+  const [busy, setBusy] = (0, import_react2.useState)(false);
+  const state = (0, import_react2.useMemo)(() => {
+    if (!isSupported2) return { label: "Not supported", tone: "#6b7280" };
+    if (permission === "denied") return { label: "Blocked in browser", tone: "#dc2626" };
+    if (permission === "granted" && isSubscribed) return { label: "Enabled", tone: "#16a34a" };
+    return { label: "Not enabled", tone: "#d97706" };
+  }, [isSupported2, permission, isSubscribed]);
+  if (!isSupported2) return null;
+  if (!showWhenEnabled && permission === "granted" && isSubscribed) return null;
+  const canEnable = permission !== "granted" || !isSubscribed;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      style: {
+        ...POSITION_STYLES[position],
+        position: "fixed",
+        zIndex,
+        width: 320,
+        maxWidth: "calc(100vw - 32px)",
+        borderRadius: 12,
+        border: "1px solid #e5e7eb",
+        background: "#ffffff",
+        boxShadow: "0 10px 30px rgba(0, 0, 0, 0.16)",
+        padding: 12,
+        fontFamily: "system-ui, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { margin: 0, fontSize: 13, fontWeight: 700, color: "#111827" }, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "span",
+            {
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 6,
+                fontSize: 11,
+                color: "#374151",
+                background: "#f9fafb",
+                border: "1px solid #e5e7eb",
+                borderRadius: 999,
+                padding: "2px 8px"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "span",
+                  {
+                    style: {
+                      width: 8,
+                      height: 8,
+                      borderRadius: 999,
+                      display: "inline-block",
+                      background: state.tone
+                    }
+                  }
+                ),
+                state.label
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { margin: "8px 0 0", fontSize: 12, color: "#6b7280", lineHeight: 1.35 }, children: permission === "denied" ? "Notifications are blocked. Re-enable in browser site settings, then click Retry." : "Enable notifications to receive alerts even when this tab is not active." }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { margin: "8px 0 0", fontSize: 12, color: "#dc2626", lineHeight: 1.35 }, children: error.message || "Push setup failed" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { marginTop: 10, display: "flex", gap: 8 }, children: canEnable ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            disabled: busy,
+            onClick: async () => {
+              setBusy(true);
+              try {
+                await subscribe();
+              } finally {
+                setBusy(false);
+              }
+            },
+            style: {
+              border: "none",
+              borderRadius: 8,
+              padding: "7px 10px",
+              fontSize: 12,
+              fontWeight: 600,
+              color: "#fff",
+              background: "#111827",
+              cursor: busy ? "not-allowed" : "pointer",
+              opacity: busy ? 0.7 : 1
+            },
+            children: busy ? "Working..." : permission === "denied" ? "Retry" : "Enable"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            disabled: busy,
+            onClick: async () => {
+              setBusy(true);
+              try {
+                await unsubscribe();
+              } finally {
+                setBusy(false);
+              }
+            },
+            style: {
+              border: "1px solid #e5e7eb",
+              borderRadius: 8,
+              padding: "7px 10px",
+              fontSize: 12,
+              fontWeight: 600,
+              color: "#374151",
+              background: "#fff",
+              cursor: busy ? "not-allowed" : "pointer",
+              opacity: busy ? 0.7 : 1
+            },
+            children: busy ? "Working..." : "Disable"
+          }
+        ) })
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PushProvider,
+  PushStatusIndicator,
   urlBase64ToUint8Array,
   usePush
 });

package/dist/index.mjs

@@ -279,8 +279,8 @@ function PushProvider({
           tag: payload.tag
         };
         onLiveNotification?.(normalized);
-        if (!onLiveNotification && showInPageAlerts && normalized.body) {
-          pushInPageAlert(normalized.title, normalized.body);
+        if (!onLiveNotification && showInPageAlerts) {
+          pushInPageAlert(normalized.title, normalized.body || "You have a new notification.");
         }
         if (showSystem && typeof window !== "undefined" && Notification.permission === "granted") {
           new Notification(normalized.title, {
@@ -345,8 +345,146 @@ function PushProvider({
 function usePush() {
   return useContext(PushContext);
 }
+
+// src/PushStatusIndicator.tsx
+import { useMemo, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var POSITION_STYLES = {
+  "bottom-right": { right: 16, bottom: 16 },
+  "bottom-left": { left: 16, bottom: 16 },
+  "top-right": { right: 16, top: 16 },
+  "top-left": { left: 16, top: 16 }
+};
+function PushStatusIndicator({
+  title = "Notifications",
+  showWhenEnabled = true,
+  position = "bottom-right",
+  zIndex = 2147483e3
+}) {
+  const { isSupported: isSupported2, permission, isSubscribed, subscribe, unsubscribe, error } = usePush();
+  const [busy, setBusy] = useState2(false);
+  const state = useMemo(() => {
+    if (!isSupported2) return { label: "Not supported", tone: "#6b7280" };
+    if (permission === "denied") return { label: "Blocked in browser", tone: "#dc2626" };
+    if (permission === "granted" && isSubscribed) return { label: "Enabled", tone: "#16a34a" };
+    return { label: "Not enabled", tone: "#d97706" };
+  }, [isSupported2, permission, isSubscribed]);
+  if (!isSupported2) return null;
+  if (!showWhenEnabled && permission === "granted" && isSubscribed) return null;
+  const canEnable = permission !== "granted" || !isSubscribed;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        ...POSITION_STYLES[position],
+        position: "fixed",
+        zIndex,
+        width: 320,
+        maxWidth: "calc(100vw - 32px)",
+        borderRadius: 12,
+        border: "1px solid #e5e7eb",
+        background: "#ffffff",
+        boxShadow: "0 10px 30px rgba(0, 0, 0, 0.16)",
+        padding: 12,
+        fontFamily: "system-ui, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }, children: [
+          /* @__PURE__ */ jsx2("p", { style: { margin: 0, fontSize: 13, fontWeight: 700, color: "#111827" }, children: title }),
+          /* @__PURE__ */ jsxs2(
+            "span",
+            {
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 6,
+                fontSize: 11,
+                color: "#374151",
+                background: "#f9fafb",
+                border: "1px solid #e5e7eb",
+                borderRadius: 999,
+                padding: "2px 8px"
+              },
+              children: [
+                /* @__PURE__ */ jsx2(
+                  "span",
+                  {
+                    style: {
+                      width: 8,
+                      height: 8,
+                      borderRadius: 999,
+                      display: "inline-block",
+                      background: state.tone
+                    }
+                  }
+                ),
+                state.label
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2("p", { style: { margin: "8px 0 0", fontSize: 12, color: "#6b7280", lineHeight: 1.35 }, children: permission === "denied" ? "Notifications are blocked. Re-enable in browser site settings, then click Retry." : "Enable notifications to receive alerts even when this tab is not active." }),
+        error && /* @__PURE__ */ jsx2("p", { style: { margin: "8px 0 0", fontSize: 12, color: "#dc2626", lineHeight: 1.35 }, children: error.message || "Push setup failed" }),
+        /* @__PURE__ */ jsx2("div", { style: { marginTop: 10, display: "flex", gap: 8 }, children: canEnable ? /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            disabled: busy,
+            onClick: async () => {
+              setBusy(true);
+              try {
+                await subscribe();
+              } finally {
+                setBusy(false);
+              }
+            },
+            style: {
+              border: "none",
+              borderRadius: 8,
+              padding: "7px 10px",
+              fontSize: 12,
+              fontWeight: 600,
+              color: "#fff",
+              background: "#111827",
+              cursor: busy ? "not-allowed" : "pointer",
+              opacity: busy ? 0.7 : 1
+            },
+            children: busy ? "Working..." : permission === "denied" ? "Retry" : "Enable"
+          }
+        ) : /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            disabled: busy,
+            onClick: async () => {
+              setBusy(true);
+              try {
+                await unsubscribe();
+              } finally {
+                setBusy(false);
+              }
+            },
+            style: {
+              border: "1px solid #e5e7eb",
+              borderRadius: 8,
+              padding: "7px 10px",
+              fontSize: 12,
+              fontWeight: 600,
+              color: "#374151",
+              background: "#fff",
+              cursor: busy ? "not-allowed" : "pointer",
+              opacity: busy ? 0.7 : 1
+            },
+            children: busy ? "Working..." : "Disable"
+          }
+        ) })
+      ]
+    }
+  );
+}
 export {
   PushProvider,
+  PushStatusIndicator,
   urlBase64ToUint8Array,
   usePush
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sinlungtech/push-client",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Web Push notification client for Next.js — service worker registration, permission handling, and subscription management",
   "main": "dist/index.js",
   "module": "dist/index.mjs",