@elaanio/core                  vanilla TS: client · stores · realtime transport
   ├─ @elaanio/react-core           React provider + hooks (framework, no DOM)
   │    ├─ @elaanio/react                web components + fetch-SSE realtime
   │    └─ @elaanio/react-native         RN components (SSE via react-native-sse)
   ├─ @elaanio/vue                  Vue 3 components + composables
   ├─ @elaanio/svelte               Svelte stores (headless)
   └─ @elaanio/elements             Web Components (works anywhere)

import { ElaanProvider, NotificationBell, Preferences } from "@elaanio/react";
import "@elaanio/react/styles.css";

async function tokenProvider() {
  const res = await fetch("/api/elaan-token"); // your endpoint
  const { token, contact_id } = await res.json();
  return { token, contactId: contact_id };
}

export function App() {
  return (
    <ElaanProvider apiBase="https://api.elaan.io/v1" tokenProvider={tokenProvider}>
      <NotificationBell />
      <Preferences />
    </ElaanProvider>
  );
}

import {
  ElaanProvider,
  NotificationBell,
  NotificationFeed,
  Preferences,
} from "@elaanio/react-native";

async function tokenProvider() {
  const res = await fetch("https://yourapp.com/api/elaan-token", {
    headers: { Authorization: `Bearer ${yourSessionToken}` },
  });
  const { token, contact_id } = await res.json();
  return { token, contactId: contact_id };
}

export default function App() {
  return (
    <ElaanProvider apiBase="https://api.elaan.io/v1" tokenProvider={tokenProvider}>
      {/* A bell + badge that opens the inbox in a modal card */}
      <NotificationBell />

      {/* …or the inbox inline as a full screen */}
      <NotificationFeed emptyText="Nothing here yet." />

      {/* per-type × channel preference switches */}
      <Preferences />
    </ElaanProvider>
  );
}

import { usePush } from "@elaanio/react-native";

function useRegisterPush(expoToken: string) {
  const { register } = usePush();
  useEffect(() => {
    // provider: "expo" | "fcm" | "apns" | "onesignal"
    register(expoToken, "expo", "ios");
  }, [expoToken]);
}

import { useBrowserPush } from "@elaanio/react";
import type { BrowserPushResult } from "@elaanio/react";

function PushToggle() {
  const push = useBrowserPush({ serviceWorkerUrl: "/sw.js" });
  const [note, setNote] = useState<string | null>(null);
  if (!push.supported) return null;

  // Handle the result, and catch: the hook rethrows genuine faults after setting
  // `push.error`, so passing `push.subscribe` straight to onClick turns one into an
  // unhandled rejection.
  const onClick = async () => {
    try {
      if (push.subscribed) {
        setNote((await push.unsubscribe()) ? null : "Nothing to turn off.");
      } else {
        setNote(explain(await push.subscribe()));
      }
    } catch {
      setNote(push.error?.message ?? "Something went wrong.");
    }
  };

  return (
    <>
      <button onClick={onClick} disabled={push.busy || push.permission === "denied"}>
        {push.subscribed ? "Turn off" : "Turn on"} browser notifications
      </button>
      {note && <p>{note}</p>}
    </>
  );
}

function explain(result: BrowserPushResult): string | null {
  if (result.ok) return null;
  switch (result.reason) {
    case "denied":
      return "Notifications are blocked for this site. Change it in site settings — the browser won't ask again.";
    case "dismissed":
      return "No problem — you can turn these on any time.";
    case "not-configured":
      return "Browser notifications aren't set up for this account yet.";
    case "unsupported":
      return "This browser can't do notifications.";
  }
}

// sw.js — bundle this; a classic service worker can't `import`.
import { handlePush, handleNotificationClick } from "@elaanio/core/service-worker";

self.addEventListener("push", handlePush);
self.addEventListener("notificationclick", handleNotificationClick);

:root {
  --elaan-accent: #7c3aed;   /* brand color: badges, links, active states */
  --elaan-accent-ink: #fff;  /* text/icon on top of the accent */
  --elaan-bg: #ffffff;
  --elaan-bg-hover: #f4f6f9;
  --elaan-text: #1a1d23;
  --elaan-muted: #6b7280;
  --elaan-border: #e5e7eb;
  --elaan-danger: #ef4444;
  --elaan-radius: 10px;
  --elaan-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.3);
  --elaan-z: 1000;           /* popover stacking order */
  /* --elaan-font is unset by default, so the components inherit your
     app's type stack. Name a stack here to pin one instead. */
}

<NotificationBell className={styles.scope} />