@cyguin/notify 0.1.0

package/dist/next.d.cts

@@ -0,0 +1,25 @@
+import { N as NotificationRecord } from './types-Q62lBJZ-.cjs';
+import { NextResponse } from 'next/server';
+
+interface NotifyHandlerOptions {
+    secret?: string;
+}
+declare function createNotifyHandler(_options?: NotifyHandlerOptions): {
+    GET(request: Request): Promise<NextResponse<{
+        error: string;
+    }> | NextResponse<{
+        notifications: NotificationRecord[];
+    }>>;
+    POST(request: Request): Promise<NextResponse<{
+        error: string;
+    }> | NextResponse<{
+        notification: NotificationRecord;
+    }>>;
+    PATCH(request: Request): Promise<NextResponse<{
+        error: string;
+    }> | NextResponse<{
+        ok: boolean;
+    }>>;
+};
+
+export { type NotifyHandlerOptions, createNotifyHandler };

package/dist/next.d.ts

@@ -0,0 +1,25 @@
+import { N as NotificationRecord } from './types-Q62lBJZ-.js';
+import { NextResponse } from 'next/server';
+
+interface NotifyHandlerOptions {
+    secret?: string;
+}
+declare function createNotifyHandler(_options?: NotifyHandlerOptions): {
+    GET(request: Request): Promise<NextResponse<{
+        error: string;
+    }> | NextResponse<{
+        notifications: NotificationRecord[];
+    }>>;
+    POST(request: Request): Promise<NextResponse<{
+        error: string;
+    }> | NextResponse<{
+        notification: NotificationRecord;
+    }>>;
+    PATCH(request: Request): Promise<NextResponse<{
+        error: string;
+    }> | NextResponse<{
+        ok: boolean;
+    }>>;
+};
+
+export { type NotifyHandlerOptions, createNotifyHandler };

package/dist/next.js

@@ -0,0 +1,6 @@
+import {
+  createNotifyHandler
+} from "./chunk-WZ4RNT3A.js";
+export {
+  createNotifyHandler
+};

package/dist/react.cjs

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkYWA2XDPMcjs = require('./chunk-YWA2XDPM.cjs');
+
+
+exports.NotificationBell = _chunkYWA2XDPMcjs.NotificationBell;

package/dist/react.d.cts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Notification {
+    id: string;
+    userId: string;
+    title: string;
+    body: string;
+    href?: string;
+    readAt?: number;
+    createdAt: number;
+}
+interface NotificationBellProps {
+    userId?: string;
+    pollInterval?: number;
+    maxVisible?: number;
+    className?: string;
+    onToggle?: (open: boolean) => void;
+}
+declare function NotificationBell({ userId, pollInterval, maxVisible, className, onToggle, }: NotificationBellProps): react_jsx_runtime.JSX.Element;
+
+export { type Notification, NotificationBell, type NotificationBellProps };

package/dist/react.d.ts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Notification {
+    id: string;
+    userId: string;
+    title: string;
+    body: string;
+    href?: string;
+    readAt?: number;
+    createdAt: number;
+}
+interface NotificationBellProps {
+    userId?: string;
+    pollInterval?: number;
+    maxVisible?: number;
+    className?: string;
+    onToggle?: (open: boolean) => void;
+}
+declare function NotificationBell({ userId, pollInterval, maxVisible, className, onToggle, }: NotificationBellProps): react_jsx_runtime.JSX.Element;
+
+export { type Notification, NotificationBell, type NotificationBellProps };

package/dist/react.js

@@ -0,0 +1,6 @@
+import {
+  NotificationBell
+} from "./chunk-WTNWBHMC.js";
+export {
+  NotificationBell
+};

package/dist/types-Q62lBJZ-.d.cts

@@ -0,0 +1,25 @@
+interface NotificationRecord {
+    id: string;
+    userId: string;
+    title: string;
+    body: string;
+    href?: string;
+    readAt?: number;
+    createdAt: number;
+}
+interface NotifyOptions {
+    title: string;
+    body: string;
+    href?: string;
+}
+interface NotificationAdapter {
+    create(notification: Omit<NotificationRecord, 'id' | 'createdAt'>): Promise<NotificationRecord>;
+    findManyByUser(userId: string, options?: {
+        limit?: number;
+        offset?: number;
+    }): Promise<NotificationRecord[]>;
+    markRead(id: string, userId: string): Promise<void>;
+    countUnread(userId: string): Promise<number>;
+}
+
+export type { NotificationRecord as N, NotificationAdapter as a, NotifyOptions as b };

package/dist/types-Q62lBJZ-.d.ts

@@ -0,0 +1,25 @@
+interface NotificationRecord {
+    id: string;
+    userId: string;
+    title: string;
+    body: string;
+    href?: string;
+    readAt?: number;
+    createdAt: number;
+}
+interface NotifyOptions {
+    title: string;
+    body: string;
+    href?: string;
+}
+interface NotificationAdapter {
+    create(notification: Omit<NotificationRecord, 'id' | 'createdAt'>): Promise<NotificationRecord>;
+    findManyByUser(userId: string, options?: {
+        limit?: number;
+        offset?: number;
+    }): Promise<NotificationRecord[]>;
+    markRead(id: string, userId: string): Promise<void>;
+    countUnread(userId: string): Promise<number>;
+}
+
+export type { NotificationRecord as N, NotificationAdapter as a, NotifyOptions as b };

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@cyguin/notify",
+  "version": "0.1.0",
+  "description": "Server-triggered in-app notifications for Next.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cyguin/notify"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./next": {
+      "import": "./dist/handlers/route.js",
+      "types": "./dist/handlers/route.d.ts"
+    },
+    "./react": {
+      "import": "./dist/components/index.js",
+      "types": "./dist/components/index.d.ts"
+    },
+    "./adapters/sqlite": {
+      "import": "./dist/adapters/sqlite.js",
+      "types": "./dist/adapters/sqlite.d.ts"
+    },
+    "./adapters/postgres": {
+      "import": "./dist/adapters/postgres.js",
+      "types": "./dist/adapters/postgres.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "better-sqlite3": ">=11",
+    "next": ">=14",
+    "postgres": ">=3",
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "better-sqlite3": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
+    "postgres": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/better-sqlite3": "^7.6.11",
+    "@types/node": "^20.0.0",
+    "@types/pg": "^8.11.0",
+    "@types/react": "^18.0.0",
+    "better-sqlite3": "^11.0.0",
+    "next": "^14.0.0",
+    "postgres": "^3.4.0",
+    "react": "^18.3.1",
+    "tsup": "^8.3.0",
+    "typescript": "^5.5.0"
+  }
+}

package/src/adapters/index.ts

@@ -0,0 +1,2 @@
+export { SQLiteNotificationAdapter, createSQLiteAdapter } from './sqlite'
+export { createPostgresAdapter } from './postgres'

package/src/adapters/postgres.ts

@@ -0,0 +1,60 @@
+import { nanoid } from 'nanoid'
+import type { NotificationAdapter, NotificationRecord } from '../types'
+
+export function createPostgresAdapter(connectionString: string): NotificationAdapter {
+  const pool = (globalThis as Record<string, unknown>).__cyguin_postgres_pool as {
+    query: (sql: string, params: unknown[]) => Promise<{ rows: Record<string, unknown>[] }>
+  } | undefined
+
+  const sql = pool
+    ? (q: string, p: unknown[]) => pool.query(q, p).then(r => r.rows)
+    : async (_q: string, _p: unknown[]) => { throw new Error('Postgres pool not initialized') }
+
+  return {
+    async create(notification) {
+      const id = nanoid()
+      const createdAt = Date.now()
+      await sql(
+        `INSERT INTO notifications (id, user_id, title, body, href, created_at)
+         VALUES ($1, $2, $3, $4, $5, $6)`,
+        [id, notification.userId, notification.title, notification.body, notification.href ?? null, createdAt]
+      )
+      return { id, ...notification, createdAt }
+    },
+
+    async findManyByUser(userId, { limit = 20, offset = 0 } = {}) {
+      const rows = await sql(
+        `SELECT id, user_id, title, body, href, read_at, created_at
+         FROM notifications
+         WHERE user_id = $1
+         ORDER BY created_at DESC
+         LIMIT $2 OFFSET $3`,
+        [userId, limit, offset]
+      )
+      return rows.map((row) => ({
+        id: row.id as string,
+        userId: row.user_id as string,
+        title: row.title as string,
+        body: row.body as string,
+        href: row.href as string | undefined,
+        readAt: row.read_at as number | undefined,
+        createdAt: row.created_at as number,
+      }))
+    },
+
+    async markRead(id, userId) {
+      await sql(
+        `UPDATE notifications SET read_at = $1 WHERE id = $2 AND user_id = $3`,
+        [Date.now(), id, userId]
+      )
+    },
+
+    async countUnread(userId) {
+      const rows = await sql(
+        `SELECT COUNT(*) as count FROM notifications WHERE user_id = $1 AND read_at IS NULL`,
+        [userId]
+      )
+      return Number(rows[0]?.count ?? 0)
+    },
+  }
+}

package/src/adapters/sqlite.ts

@@ -0,0 +1,82 @@
+import Database from 'better-sqlite3'
+import { nanoid } from 'nanoid'
+import type { NotificationAdapter, NotificationRecord } from '../types'
+
+let _db: Database.Database | null = null
+
+function getDb(): Database.Database {
+  if (!_db) {
+    _db = new Database(':memory:')
+    _db.pragma('journal_mode = WAL')
+    _db.exec(`
+      CREATE TABLE IF NOT EXISTS notifications (
+        id          TEXT PRIMARY KEY,
+        user_id     TEXT NOT NULL,
+        title       TEXT NOT NULL,
+        body        TEXT NOT NULL,
+        href        TEXT,
+        read_at     INTEGER,
+        created_at  INTEGER NOT NULL
+      );
+      CREATE INDEX IF NOT EXISTS idx_notifications_user_id ON notifications(user_id);
+      CREATE INDEX IF NOT EXISTS idx_notifications_created_at ON notifications(created_at);
+    `)
+  }
+  return _db
+}
+
+function rowToRecord(row: Record<string, unknown>): NotificationRecord {
+  return {
+    id: row.id as string,
+    userId: row.user_id as string,
+    title: row.title as string,
+    body: row.body as string,
+    href: row.href as string | undefined,
+    readAt: row.read_at as number | undefined,
+    createdAt: row.created_at as number,
+  }
+}
+
+export const SQLiteNotificationAdapter: NotificationAdapter = {
+  async create(notification) {
+    const db = getDb()
+    const id = nanoid()
+    const createdAt = Date.now()
+    db.prepare(`
+      INSERT INTO notifications (id, user_id, title, body, href, created_at)
+      VALUES (?, ?, ?, ?, ?, ?)
+    `).run(id, notification.userId, notification.title, notification.body, notification.href ?? null, createdAt)
+    return { id, ...notification, createdAt }
+  },
+
+  async findManyByUser(userId, { limit = 20, offset = 0 } = {}) {
+    const db = getDb()
+    const rows = db.prepare(`
+      SELECT id, user_id, title, body, href, read_at, created_at
+      FROM notifications
+      WHERE user_id = ?
+      ORDER BY created_at DESC
+      LIMIT ? OFFSET ?
+    `).all(userId, limit, offset) as Record<string, unknown>[]
+    return rows.map(rowToRecord)
+  },
+
+  async markRead(id, userId) {
+    const db = getDb()
+    db.prepare(`
+      UPDATE notifications SET read_at = ? WHERE id = ? AND user_id = ?
+    `).run(Date.now(), id, userId)
+  },
+
+  async countUnread(userId) {
+    const db = getDb()
+    const row = db.prepare(`
+      SELECT COUNT(*) as count FROM notifications WHERE user_id = ? AND read_at IS NULL
+    `).get(userId) as { count: number }
+    return row.count
+  },
+}
+
+export function createSQLiteAdapter(): NotificationAdapter {
+  return SQLiteNotificationAdapter
+}

package/src/components/NotificationBell.tsx

@@ -0,0 +1,292 @@
+'use client';
+
+import React, { useEffect, useState, useRef, useCallback } from 'react';
+
+export interface Notification {
+  id: string;
+  userId: string;
+  title: string;
+  body: string;
+  href?: string;
+  readAt?: number;
+  createdAt: number;
+}
+
+export interface NotificationBellProps {
+  userId?: string;
+  pollInterval?: number;
+  maxVisible?: number;
+  className?: string;
+  onToggle?: (open: boolean) => void;
+}
+
+interface FetchNotificationsResponse {
+  notifications: Notification[];
+  total?: number;
+}
+
+export function NotificationBell({
+  userId,
+  pollInterval = 30000,
+  maxVisible = 10,
+  className = '',
+  onToggle,
+}: NotificationBellProps) {
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [unreadCount, setUnreadCount] = useState(0);
+  const [isOpen, setIsOpen] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const fetchNotifications = useCallback(async () => {
+    if (!userId) return;
+    try {
+      const res = await fetch(`/api/notify?userId=${encodeURIComponent(userId)}&limit=${maxVisible}`);
+      const data: FetchNotificationsResponse = await res.json();
+      setNotifications(data.notifications ?? []);
+      setUnreadCount(data.notifications?.filter(n => !n.readAt).length ?? 0);
+    } catch (err) {
+      console.error('[NotificationBell] fetch failed:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [userId, maxVisible]);
+
+  useEffect(() => {
+    fetchNotifications();
+    if (pollInterval > 0) {
+      const id = setInterval(fetchNotifications, pollInterval);
+      return () => clearInterval(id);
+    }
+  }, [fetchNotifications, pollInterval]);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+        onToggle?.(false);
+      }
+    }
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [isOpen, onToggle]);
+
+  const handleNotificationClick = async (notification: Notification) => {
+    if (notification.href) {
+      window.location.href = notification.href;
+    }
+    if (!notification.readAt && userId) {
+      try {
+        await fetch(`/api/notify/${notification.id}/read?userId=${encodeURIComponent(userId)}`, {
+          method: 'PATCH',
+        });
+        setNotifications(prev =>
+          prev.map(n => n.id === notification.id ? { ...n, readAt: Date.now() } : n)
+        );
+        setUnreadCount(prev => Math.max(0, prev - 1));
+      } catch (err) {
+        console.error('[NotificationBell] mark read failed:', err);
+      }
+    }
+    setIsOpen(false);
+    onToggle?.(false);
+  };
+
+  const handleBellClick = () => {
+    setIsOpen(prev => {
+      onToggle?.(!prev);
+      return !prev;
+    });
+  };
+
+  const badgeDisplay = unreadCount > 99 ? '99+' : unreadCount;
+
+  return (
+    <>
+      <style>{`
+        @keyframes cyguin-notify-spin {
+          to { transform: rotate(360deg); }
+        }
+        @keyframes cyguin-notify-fade-in {
+          from { opacity: 0; transform: translateY(-4px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        .cyguin-notify-bell {
+          --cyguin-bg: #ffffff;
+          --cyguin-bg-subtle: #f5f5f5;
+          --cyguin-border: #e5e5e5;
+          --cyguin-border-focus: #f5a800;
+          --cyguin-fg: #0a0a0a;
+          --cyguin-fg-muted: #888888;
+          --cyguin-accent: #f5a800;
+          --cyguin-accent-dark: #c47f00;
+          --cyguin-accent-fg: #0a0a0a;
+          --cyguin-radius: 6px;
+          --cyguin-shadow: 0 1px 4px rgba(0,0,0,0.08);
+          position: relative;
+          display: inline-flex;
+          font-family: system-ui, -apple-system, sans-serif;
+        }
+        .cyguin-notify-bell[data-theme="dark"] {
+          --cyguin-bg: #0a0a0a;
+          --cyguin-bg-subtle: #1a1a1a;
+          --cyguin-border: #2a2a2a;
+          --cyguin-fg: #f5f5f5;
+          --cyguin-fg-muted: #888888;
+          --cyguin-shadow: 0 1px 4px rgba(0,0,0,0.4);
+        }
+        .cyguin-notify-bell-btn {
+          background: transparent;
+          border: 1px solid var(--cyguin-border);
+          border-radius: var(--cyguin-radius);
+          padding: 8px 10px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: var(--cyguin-fg);
+          transition: border-color 0.15s, background-color 0.15s;
+          position: relative;
+        }
+        .cyguin-notify-bell-btn:hover {
+          border-color: var(--cyguin-border-focus);
+          background-color: var(--cyguin-bg-subtle);
+        }
+        .cyguin-notify-badge {
+          position: absolute;
+          top: -4px;
+          right: -4px;
+          background-color: var(--cyguin-accent);
+          color: var(--cyguin-accent-fg);
+          font-size: 10px;
+          font-weight: 700;
+          min-width: 16px;
+          height: 16px;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 4px;
+          box-sizing: border-box;
+        }
+        .cyguin-notify-dropdown {
+          position: absolute;
+          top: calc(100% + 6px);
+          right: 0;
+          width: 320px;
+          max-height: 420px;
+          overflow-y: auto;
+          background-color: var(--cyguin-bg);
+          border: 1px solid var(--cyguin-border);
+          border-radius: var(--cyguin-radius);
+          box-shadow: var(--cyguin-shadow);
+          animation: cyguin-notify-fade-in 0.15s ease-out;
+          z-index: 1000;
+        }
+        .cyguin-notify-dropdown-header {
+          padding: 10px 14px;
+          border-bottom: 1px solid var(--cyguin-border);
+          font-size: 13px;
+          font-weight: 600;
+          color: var(--cyguin-fg);
+        }
+        .cyguin-notify-item {
+          display: flex;
+          flex-direction: column;
+          gap: 2px;
+          padding: 10px 14px;
+          border-bottom: 1px solid var(--cyguin-border);
+          cursor: pointer;
+          transition: background-color 0.1s;
+        }
+        .cyguin-notify-item:last-child {
+          border-bottom: none;
+        }
+        .cyguin-notify-item:hover {
+          background-color: var(--cyguin-bg-subtle);
+        }
+        .cyguin-notify-item.unread {
+          background-color: color-mix(in srgb, var(--cyguin-accent) 8%, transparent);
+        }
+        .cyguin-notify-item.unread:hover {
+          background-color: color-mix(in srgb, var(--cyguin-accent) 12%, transparent);
+        }
+        .cyguin-notify-item-title {
+          font-size: 13px;
+          font-weight: 500;
+          color: var(--cyguin-fg);
+        }
+        .cyguin-notify-item-body {
+          font-size: 12px;
+          color: var(--cyguin-fg-muted);
+          line-height: 1.4;
+        }
+        .cyguin-notify-empty {
+          padding: 24px 14px;
+          text-align: center;
+          font-size: 13px;
+          color: var(--cyguin-fg-muted);
+        }
+        .cyguin-notify-spinner {
+          width: 16px;
+          height: 16px;
+          border: 2px solid var(--cyguin-border);
+          border-top-color: var(--cyguin-accent);
+          border-radius: 50%;
+          animation: cyguin-notify-spin 0.6s linear infinite;
+        }
+        .cyguin-notify-loading {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 24px;
+        }
+      `}</style>
+      <div className={`cyguin-notify-bell ${className}`} data-theme="light" ref={dropdownRef}>
+        <button
+          className="cyguin-notify-bell-btn"
+          onClick={handleBellClick}
+          aria-label={`Notifications${unreadCount > 0 ? ` (${unreadCount} unread)` : ''}`}
+          aria-expanded={isOpen}
+          aria-haspopup="true"
+        >
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
+            <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
+          </svg>
+          {unreadCount > 0 && (
+            <span className="cyguin-notify-badge">{badgeDisplay}</span>
+          )}
+        </button>
+        {isOpen && (
+          <div className="cyguin-notify-dropdown" role="menu">
+            {loading ? (
+              <div className="cyguin-notify-loading">
+                <div className="cyguin-notify-spinner" />
+              </div>
+            ) : notifications.length === 0 ? (
+              <div className="cyguin-notify-empty">No notifications</div>
+            ) : (
+              <>
+                <div className="cyguin-notify-dropdown-header">Notifications</div>
+                {notifications.map(n => (
+                  <div
+                    key={n.id}
+                    className={`cyguin-notify-item${!n.readAt ? ' unread' : ''}`}
+                    onClick={() => handleNotificationClick(n)}
+                    role="menuitem"
+                  >
+                    <span className="cyguin-notify-item-title">{n.title}</span>
+                    <span className="cyguin-notify-item-body">{n.body}</span>
+                  </div>
+                ))}
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { NotificationBell } from './NotificationBell';
+export type { NotificationBellProps, Notification } from './NotificationBell';