@xtremax/pigeon 0.0.0-stage → 0.3.0

package/dist/esm/inbox/client.js

@@ -0,0 +1,35 @@
+import { TRANSPORT, createCommunicationClient } from '../client.js';
+/** `X-Communication-Person` is base64url of the UTF-8 person id, so any identifier travels safely in a header. */
+export function personHeader(personId) {
+    let binary = '';
+    for (const byte of new TextEncoder().encode(personId))
+        binary += String.fromCharCode(byte);
+    return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+const isClient = (v) => TRANSPORT in v;
+/**
+ * The in-app inbox of one person. Pass an existing client to share its key and settings, or the same options as
+ * `createCommunicationClient`. The key needs the scopes `inbox:read` and `inbox:write`.
+ */
+export function createInboxClient(client = {}) {
+    const request = (isClient(client) ? client : createCommunicationClient(client))[TRANSPORT];
+    const call = (method, path, personId, body, read, options = {}) => request(method, path, body, { headers: { 'X-Communication-Person': personHeader(personId) }, retry: options.retry ?? read, timeoutMs: options.timeoutMs }).then((r) => r.data);
+    return {
+        summary: (personId, options) => call('GET', '/inbox/summary', personId, undefined, true, options),
+        list(personId, query = {}, options) {
+            const q = new URLSearchParams();
+            if (query.limit !== undefined)
+                q.set('limit', String(query.limit));
+            if (query.cursor)
+                q.set('cursor', query.cursor);
+            if (query.unreadOnly)
+                q.set('unread', 'true');
+            const qs = q.toString();
+            return call('GET', `/inbox/notifications${qs ? `?${qs}` : ''}`, personId, undefined, true, options);
+        },
+        markRead: (personId, id, options) => call('POST', `/inbox/notifications/${encodeURIComponent(id)}/read`, personId, {}, false, options),
+        markAllRead: (personId, input = {}, options) => call('POST', '/inbox/read-all', personId, input.upTo ? { upTo: input.upTo } : {}, false, options),
+        getPreference: (personId, options) => call('GET', '/inbox/preference', personId, undefined, true, options),
+        setPreference: (personId, state, options) => call('PUT', '/inbox/preference', personId, { state }, false, options),
+    };
+}

package/dist/esm/inbox/errors.js

@@ -0,0 +1,38 @@
+import { CommunicationError } from '../errors.js';
+/** The six answers a browser can get from the host's inbox routes. The messages are fixed: nothing from upstream is repeated. */
+export const HOST_ERRORS = {
+    not_signed_in: { status: 401, message: 'Sign in to see your notifications.' },
+    not_permitted: { status: 403, message: 'This request is not allowed.' },
+    not_found: { status: 404, message: 'This notification is not available.' },
+    invalid_input: { status: 422, message: 'The request is not valid.' },
+    rate_limited: { status: 429, message: 'Too many requests. Try again in a moment.' },
+    unavailable: { status: 503, message: 'Notifications are not available right now.' },
+};
+/**
+ * Total: every failure is one of the six codes. A revoked or misconfigured key, a timeout and anything unknown are
+ * `unavailable`, because the person in the browser cannot fix them and must not be told about them.
+ */
+export function hostCodeOf(error) {
+    if (!(error instanceof CommunicationError))
+        return 'unavailable';
+    switch (error.code) {
+        case 'forbidden':
+            return 'not_permitted';
+        case 'not_found':
+            return 'not_found';
+        case 'validation_failed':
+            return 'invalid_input';
+        case 'rate_limited':
+            return 'rate_limited';
+        default:
+            return 'unavailable';
+    }
+}
+const HEADERS = { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' };
+export function hostError(code, field) {
+    const body = { error: { code, message: HOST_ERRORS[code].message, ...(field ? { field } : {}) } };
+    return new Response(JSON.stringify(body), { status: HOST_ERRORS[code].status, headers: HEADERS });
+}
+export function hostData(data) {
+    return new Response(JSON.stringify({ data }), { status: 200, headers: HEADERS });
+}

package/dist/esm/inbox/handler.js

@@ -0,0 +1,124 @@
+import { createInboxClient } from './client.js';
+import { hostCodeOf, hostData, hostError } from './errors.js';
+import { originAllowed } from './origin.js';
+import { projectMarkRead, projectPage, projectPreference, projectReadAll, projectSummary } from './project.js';
+import { INBOX_LIMITS, parseBody, parseCursor, parseId, parseLimit, parseState, parseUnread, parseUpTo } from './validate.js';
+/** The six operations of IB-8, and nothing else. */
+function match(method, pathname, base) {
+    if (pathname !== base && !pathname.startsWith(`${base}/`))
+        return null;
+    const rest = pathname.slice(base.length).replace(/\/+$/, '');
+    if (method === 'GET' && rest === '/summary')
+        return { name: 'summary', write: false };
+    if (method === 'GET' && rest === '/notifications')
+        return { name: 'list', write: false };
+    if (method === 'GET' && rest === '/preference')
+        return { name: 'getPreference', write: false };
+    if (method === 'PUT' && rest === '/preference')
+        return { name: 'setPreference', write: true };
+    if (method === 'POST' && rest === '/read-all')
+        return { name: 'readAll', write: true };
+    const read = method === 'POST' ? /^\/notifications\/([^/]+)\/read$/.exec(rest) : null;
+    if (read)
+        return { name: 'markRead', write: true, id: read[1] };
+    return null;
+}
+/**
+ * The host xApp's browser-facing inbox routes, in one tested function. Mount it on a catch-all route:
+ *
+ *   const handler = createInboxHandler({ resolvePerson });
+ *   export { handler as GET, handler as POST, handler as PUT };
+ *
+ * The person comes only from `resolvePerson`. The host stores nothing. Without `client`, the key and the address are
+ * read on the first request, so a missing one answers `unavailable` and never stops the host's build.
+ */
+export function createInboxHandler(options) {
+    const base = (options.basePath ?? '/api/communication/inbox').replace(/\/+$/, '');
+    const call = { retry: false, timeoutMs: options.timeoutMs ?? 8000 };
+    let made;
+    const clientOf = () => options.client ?? (made ??= createInboxClient());
+    return async function inboxHandler(request) {
+        try {
+            const url = new URL(request.url);
+            const op = match(request.method.toUpperCase(), url.pathname, base);
+            if (!op)
+                return hostError('not_found');
+            if (op.write && !originAllowed(request, options.allowedOrigins))
+                return hostError('not_permitted');
+            const person = await options.resolvePerson(request);
+            if (typeof person !== 'string' || person.length === 0 || person.length > INBOX_LIMITS.personMax)
+                return hostError('not_signed_in');
+            const client = clientOf();
+            switch (op.name) {
+                case 'summary':
+                    return answer(projectSummary(await client.summary(person, call)));
+                case 'list': {
+                    const limit = parseLimit(url.searchParams.get('limit'));
+                    if (!limit.ok)
+                        return hostError('invalid_input', limit.field);
+                    const cursor = parseCursor(url.searchParams.get('cursor'));
+                    if (!cursor.ok)
+                        return hostError('invalid_input', cursor.field);
+                    const unread = parseUnread(url.searchParams.get('unread'));
+                    if (!unread.ok)
+                        return hostError('invalid_input', unread.field);
+                    return answer(projectPage(await client.list(person, { limit: limit.value, cursor: cursor.value, unreadOnly: unread.value }, call)));
+                }
+                case 'markRead': {
+                    let raw;
+                    try {
+                        raw = decodeURIComponent(op.id);
+                    }
+                    catch {
+                        return hostError('invalid_input', 'id');
+                    }
+                    const id = parseId(raw);
+                    if (!id.ok)
+                        return hostError('invalid_input', id.field);
+                    return answer(projectMarkRead(await client.markRead(person, id.value, call)));
+                }
+                case 'readAll': {
+                    const body = parseBody(await request.text());
+                    if (!body.ok)
+                        return hostError('invalid_input', body.field);
+                    const upTo = parseUpTo(body.value.upTo);
+                    if (!upTo.ok)
+                        return hostError('invalid_input', upTo.field);
+                    return answer(projectReadAll(await client.markAllRead(person, { upTo: upTo.value }, call)));
+                }
+                case 'getPreference':
+                    return answer(projectPreference(await client.getPreference(person, call)));
+                case 'setPreference': {
+                    const body = parseBody(await request.text());
+                    if (!body.ok)
+                        return hostError('invalid_input', body.field);
+                    const state = parseState(body.value.state);
+                    if (!state.ok)
+                        return hostError('invalid_input', state.field);
+                    return answer(projectPreference(await client.setPreference(person, state.value, call)));
+                }
+            }
+        }
+        catch (error) {
+            const code = hostCodeOf(error);
+            if (code === 'unavailable')
+                report(error);
+            return hostError(code);
+        }
+    };
+    function answer(data) {
+        if (data === null) {
+            report(new Error('The inbox answer did not have the documented shape'));
+            return hostError('unavailable');
+        }
+        return hostData(data);
+    }
+    function report(error) {
+        try {
+            options.onError?.(error);
+        }
+        catch {
+            // A failing logger must not change the answer.
+        }
+    }
+}

package/dist/esm/inbox/index.js

@@ -0,0 +1,5 @@
+export { createInboxClient, personHeader } from './client.js';
+export { createInboxHandler } from './handler.js';
+export { HOST_ERRORS, hostCodeOf } from './errors.js';
+export { originAllowed } from './origin.js';
+export { INBOX_LIMITS } from './validate.js';

package/dist/esm/inbox/origin.js

@@ -0,0 +1,19 @@
+/**
+ * A request that changes something must come from the host's own pages (14.5): the browser says `Sec-Fetch-Site: same-origin`,
+ * or the `Origin` header equals an allowed origin. Without `allowedOrigins`, the only allowed origin is the request's own.
+ */
+export function originAllowed(request, allowedOrigins) {
+    if (request.headers.get('sec-fetch-site') === 'same-origin')
+        return true;
+    const origin = request.headers.get('origin');
+    if (!origin)
+        return false;
+    let allowed;
+    try {
+        allowed = allowedOrigins && allowedOrigins.length > 0 ? allowedOrigins : [new URL(request.url).origin];
+    }
+    catch {
+        return false;
+    }
+    return allowed.includes(origin);
+}

package/dist/esm/inbox/project.js

@@ -0,0 +1,76 @@
+/**
+ * Allowlist projection: only the documented fields of IB-2 leave the host, so nothing the Gateway adds later reaches a
+ * browser by accident. A value of the wrong shape gives `null`, which the handler answers as `unavailable`.
+ */
+const obj = (v) => (typeof v === 'object' && v !== null && !Array.isArray(v) ? v : null);
+const str = (v) => (typeof v === 'string' ? v : null);
+const strOrNull = (v) => (v === null ? null : typeof v === 'string' ? v : undefined);
+const count = (v) => (typeof v === 'number' && Number.isInteger(v) && v >= 0 ? v : null);
+export function projectNotification(v) {
+    const o = obj(v);
+    const source = obj(o?.source);
+    if (!o || !source)
+        return null;
+    const id = str(o.id);
+    const title = str(o.title);
+    const body = str(o.body);
+    const createdAt = str(o.createdAt);
+    const link = strOrNull(o.link);
+    const readAt = strOrNull(o.readAt);
+    const name = str(source.name);
+    if (id === null || title === null || body === null || createdAt === null || link === undefined || readAt === undefined || name === null)
+        return null;
+    if (o.kind !== 'notification' && o.kind !== 'announcement')
+        return null;
+    if (source.type !== 'xapp' && source.type !== 'tenant')
+        return null;
+    if (typeof o.read !== 'boolean')
+        return null;
+    return { id, kind: o.kind, title, body, link, source: { type: source.type, name }, createdAt, read: o.read, readAt };
+}
+export function projectSummary(v) {
+    const o = obj(v);
+    if (!o)
+        return null;
+    const unreadCount = count(o.unreadCount);
+    const newestUnreadAt = strOrNull(o.newestUnreadAt);
+    const pollSeconds = count(o.pollSeconds);
+    return unreadCount === null || newestUnreadAt === undefined || pollSeconds === null ? null : { unreadCount, newestUnreadAt, pollSeconds };
+}
+export function projectPage(v) {
+    const o = obj(v);
+    if (!o || !Array.isArray(o.notifications))
+        return null;
+    const notifications = [];
+    for (const raw of o.notifications) {
+        const n = projectNotification(raw);
+        if (!n)
+            return null;
+        notifications.push(n);
+    }
+    const nextCursor = strOrNull(o.nextCursor);
+    const unreadCount = count(o.unreadCount);
+    return nextCursor === undefined || unreadCount === null ? null : { notifications, nextCursor, unreadCount };
+}
+export function projectMarkRead(v) {
+    const o = obj(v);
+    const notification = projectNotification(o?.notification);
+    const unreadCount = count(o?.unreadCount);
+    return notification && unreadCount !== null ? { notification, unreadCount } : null;
+}
+export function projectReadAll(v) {
+    const o = obj(v);
+    const marked = count(o?.marked);
+    const remaining = count(o?.remaining);
+    const unreadCount = count(o?.unreadCount);
+    return marked === null || remaining === null || unreadCount === null ? null : { marked, remaining, unreadCount };
+}
+export function projectPreference(v) {
+    const o = obj(v);
+    if (!o)
+        return null;
+    const changedAt = strOrNull(o.changedAt);
+    if (o.state !== 'opted_in' && o.state !== 'opted_out' && o.state !== 'not_set')
+        return null;
+    return changedAt === undefined || typeof o.delivers !== 'boolean' ? null : { state: o.state, changedAt, delivers: o.delivers };
+}

package/dist/esm/inbox/validate.js

@@ -0,0 +1,49 @@
+export const INBOX_LIMITS = { pageMin: 1, pageMax: 100, cursorMax: 128, idMax: 64, upToMax: 40, bodyBytes: 1024, personMax: 128 };
+const ok = (value) => ({ ok: true, value });
+const bad = (field) => ({ ok: false, field });
+export function parseLimit(raw) {
+    if (raw === null)
+        return ok(undefined);
+    if (!/^\d{1,3}$/.test(raw))
+        return bad('limit');
+    const n = Number(raw);
+    return n >= INBOX_LIMITS.pageMin && n <= INBOX_LIMITS.pageMax ? ok(n) : bad('limit');
+}
+export function parseCursor(raw) {
+    if (raw === null)
+        return ok(undefined);
+    return raw.length > 0 && raw.length <= INBOX_LIMITS.cursorMax && /^[A-Za-z0-9_-]+$/.test(raw) ? ok(raw) : bad('cursor');
+}
+export function parseUnread(raw) {
+    if (raw === null || raw === 'false')
+        return ok(false);
+    return raw === 'true' ? ok(true) : bad('unread');
+}
+export function parseId(raw) {
+    return raw.length > 0 && raw.length <= INBOX_LIMITS.idMax && /^[A-Za-z0-9_-]+$/.test(raw) ? ok(raw) : bad('id');
+}
+export function parseUpTo(raw) {
+    if (raw === undefined || raw === null)
+        return ok(undefined);
+    if (typeof raw !== 'string' || raw.length > INBOX_LIMITS.upToMax || !/^\d{4}-\d{2}-\d{2}T[\d:.]+(Z|[+-]\d{2}:\d{2})$/.test(raw))
+        return bad('upTo');
+    const t = Date.parse(raw);
+    return Number.isFinite(t) ? ok(new Date(t).toISOString()) : bad('upTo');
+}
+export function parseState(raw) {
+    return raw === 'opted_in' || raw === 'opted_out' ? ok(raw) : bad('state');
+}
+/** A JSON object of at most 1024 bytes. An empty body is an empty object. */
+export function parseBody(text) {
+    if (new TextEncoder().encode(text).length > INBOX_LIMITS.bodyBytes)
+        return bad('body');
+    if (text.trim() === '')
+        return ok({});
+    try {
+        const v = JSON.parse(text);
+        return typeof v === 'object' && v !== null && !Array.isArray(v) ? ok(v) : bad('body');
+    }
+    catch {
+        return bad('body');
+    }
+}

package/dist/esm/inbox-react/format.js

@@ -0,0 +1,64 @@
+/** Fills `{name}` placeholders. Values are text, never markup. */
+export function fill(template, values) {
+    return template.replace(/\{(\w+)\}/g, (whole, key) => (key in values ? String(values[key]) : whole));
+}
+/** Nothing for 0, the number for 1 to 99, "99+" above (12.1). */
+export function badgeText(count) {
+    if (!Number.isFinite(count) || count < 1)
+        return '';
+    return count > 99 ? '99+' : String(Math.floor(count));
+}
+/** The bell's accessible name: "{label}, {n} unread", or the label alone when nothing is unread (15.3). */
+export function bellName(labels, count) {
+    return count > 0 ? fill(labels.bellWithCount, { label: labels.bell, n: count }) : labels.bell;
+}
+const LINK_MAX = 2048;
+/** Accepts exactly what the inbox stores: an absolute https URL without credentials, at most 2048 characters (12.15). */
+export function safeLink(link) {
+    if (!link || link.length > LINK_MAX)
+        return null;
+    try {
+        const u = new URL(link);
+        return u.protocol === 'https:' && !u.username && !u.password ? u.toString() : null;
+    }
+    catch {
+        return null;
+    }
+}
+const MINUTE = 60;
+const HOUR = 3600;
+const DAY = 86400;
+/** "now", "5 minutes ago", "yesterday", then a short date after a week. A time in the future (clock skew) reads as now. */
+export function relativeTime(iso, now, locale) {
+    const then = Date.parse(iso);
+    if (!Number.isFinite(then))
+        return '';
+    const seconds = Math.max(0, Math.floor((now.getTime() - then) / 1000));
+    try {
+        const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+        if (seconds < MINUTE)
+            return rtf.format(0, 'second');
+        if (seconds < HOUR)
+            return rtf.format(-Math.floor(seconds / MINUTE), 'minute');
+        if (seconds < DAY)
+            return rtf.format(-Math.floor(seconds / HOUR), 'hour');
+        if (seconds < 7 * DAY)
+            return rtf.format(-Math.floor(seconds / DAY), 'day');
+        return new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }).format(new Date(then));
+    }
+    catch {
+        return new Date(then).toISOString().slice(0, 10);
+    }
+}
+/** The full date and time, for the `title` of a relative time. */
+export function exactTime(iso, locale) {
+    const then = Date.parse(iso);
+    if (!Number.isFinite(then))
+        return '';
+    try {
+        return new Intl.DateTimeFormat(locale, { dateStyle: 'full', timeStyle: 'short' }).format(new Date(then));
+    }
+    catch {
+        return new Date(then).toISOString();
+    }
+}

package/dist/esm/inbox-react/inbox-client.js

@@ -0,0 +1,58 @@
+import { parseErrorCode, parseMarkRead, parsePage, parsePreference, parseReadAll, parseSummary } from './parse.js';
+export const DEFAULT_API_BASE = '/api/communication/inbox';
+/**
+ * The browser talks only to the host xApp's own origin (14.2). The base is a path on that origin: an absolute URL,
+ * a protocol-relative one or anything with a query is refused.
+ */
+export function normalizeApiBase(apiBase) {
+    const base = (apiBase ?? DEFAULT_API_BASE).trim();
+    if (!base.startsWith('/') || base.startsWith('//') || /[\\?#\s]/.test(base) || base.includes('://'))
+        return null;
+    return base.replace(/\/+$/, '') || null;
+}
+/**
+ * Every call answers a result and never throws, so an outage cannot break the host page (14.9).
+ * The bell shows what this xApp's own sub-tenant sent the person, and the tenant's announcements: there is nothing to choose.
+ */
+export function createInboxBrowserClient(apiBase, fetchImpl) {
+    const base = normalizeApiBase(apiBase);
+    async function call(method, path, parse, body) {
+        if (base === null)
+            return { ok: false, code: 'unavailable' };
+        try {
+            const res = await (fetchImpl ?? fetch)(`${base}${path}`, {
+                method,
+                credentials: 'same-origin',
+                cache: 'no-store',
+                headers: { Accept: 'application/json', ...(body !== undefined ? { 'Content-Type': 'application/json' } : {}) },
+                body: body === undefined ? undefined : JSON.stringify(body),
+            });
+            const json = await res.json().catch(() => null);
+            if (!res.ok)
+                return { ok: false, code: parseErrorCode(res.status, json) };
+            const data = parse(json?.data);
+            return data === null ? { ok: false, code: 'unavailable' } : { ok: true, data };
+        }
+        catch {
+            return { ok: false, code: 'unavailable' };
+        }
+    }
+    return {
+        summary: () => call('GET', '/summary', parseSummary),
+        list(query = {}) {
+            const q = new URLSearchParams();
+            if (query.limit !== undefined)
+                q.set('limit', String(query.limit));
+            if (query.cursor)
+                q.set('cursor', query.cursor);
+            if (query.unreadOnly)
+                q.set('unread', 'true');
+            const qs = q.toString();
+            return call('GET', `/notifications${qs ? `?${qs}` : ''}`, parsePage);
+        },
+        markRead: (id) => call('POST', `/notifications/${encodeURIComponent(id)}/read`, parseMarkRead, {}),
+        markAllRead: (upTo) => call('POST', '/read-all', parseReadAll, upTo ? { upTo } : {}),
+        getPreference: () => call('GET', '/preference', parsePreference),
+        setPreference: (state) => call('PUT', '/preference', parsePreference, { state }),
+    };
+}

package/dist/esm/inbox-react/inbox-context.js

@@ -0,0 +1,9 @@
+'use client';
+import { createContext, useContext } from 'react';
+export const InboxContext = createContext(null);
+export function useInbox() {
+    const value = useContext(InboxContext);
+    if (!value)
+        throw new Error('Wrap the inbox components in <InboxProvider>.');
+    return value;
+}

package/dist/esm/inbox-react/inbox-full-list.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InboxListView } from './inbox-list.js';
+/**
+ * Every notification, a page at a time. The provider shows it in a dialog for "View all"; a host that passes
+ * `onViewAll` can place it on a page of its own instead.
+ */
+export function InboxFullList({ maxHeight = 'min(70vh, 640px)' }) {
+    return _jsx(InboxListView, { paged: true, maxHeight: maxHeight });
+}

package/dist/esm/inbox-react/inbox-list.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Alert, Button, Center, Group, Loader, ScrollArea, Stack, Tabs, Text } from '@mantine/core';
+import { fill } from './format.js';
+import { useInbox } from './inbox-context.js';
+import { canMarkAll } from './inbox-state.js';
+import { NotificationItem } from './notification-item.js';
+/** Tabs, "Mark all as read", the list and its loading, empty and error states. Shared by the panel and the full list. */
+export function InboxListView({ heading, maxHeight, paged = false }) {
+    const { state, labels, setTab, markAllRead, loadMore, retry, clearMessage, attachList } = useInbox();
+    useEffect(() => attachList(), [attachList]);
+    // Relative times move on while the list stays open.
+    const [now, setNow] = useState(() => new Date());
+    useEffect(() => {
+        const timer = window.setInterval(() => setNow(new Date()), 60_000);
+        return () => window.clearInterval(timer);
+    }, []);
+    let content;
+    if (!state.loaded && state.status === 'error') {
+        content = (_jsx(Alert, { color: "red", variant: "light", m: "md", title: labels.loadError, children: _jsx(Button, { variant: "default", size: "sm", mih: 44, onClick: retry, children: labels.retry }) }));
+    }
+    else if (!state.loaded) {
+        content = (_jsx(Center, { mih: 160, role: "status", "aria-label": labels.loading, children: _jsx(Loader, { size: "sm" }) }));
+    }
+    else if (state.items.length === 0) {
+        content = (_jsx(Text, { c: "dimmed", size: "sm", ta: "center", px: "md", py: "xl", children: state.tab === 'unread' ? labels.emptyUnread : labels.emptyAll }));
+    }
+    else {
+        content = (_jsxs(_Fragment, { children: [_jsx("ul", { className: "xci-list", children: state.items.map((item) => (_jsx("li", { className: "xci-entry", children: _jsx(NotificationItem, { item: item, now: now }) }, item.id))) }), paged && state.nextCursor && (_jsx(Center, { p: "sm", children: _jsx(Button, { variant: "default", size: "sm", mih: 44, loading: state.loadingMore, onClick: loadMore, children: labels.loadMore }) }))] }));
+    }
+    const list = (_jsx(ScrollArea.Autosize, { mah: maxHeight, type: "auto", children: content }));
+    return (_jsxs(Stack, { gap: 0, children: [_jsxs(Group, { justify: "space-between", wrap: "nowrap", gap: "xs", ps: "md", pe: 4, pt: 4, children: [heading ?? _jsx("span", {}), _jsx(Button, { variant: "subtle", size: "compact-sm", mih: 44, px: "sm", disabled: !canMarkAll(state), onClick: markAllRead, children: labels.markAllRead })] }), _jsxs(Tabs, { value: state.tab, onChange: (tab) => tab && setTab(tab), keepMounted: false, children: [_jsxs(Tabs.List, { px: "xs", children: [_jsx(Tabs.Tab, { value: "all", mih: 44, children: labels.tabAll }), _jsx(Tabs.Tab, { value: "unread", mih: 44, children: state.unreadCount > 0 ? fill(labels.tabUnreadWithCount, { n: state.unreadCount }) : labels.tabUnread })] }), state.actionFailed && (_jsx(Alert, { color: "red", variant: "light", m: "xs", role: "alert", withCloseButton: true, closeButtonLabel: labels.dismiss, onClose: clearMessage, children: labels.actionError })), _jsx(Tabs.Panel, { value: "all", children: list }), _jsx(Tabs.Panel, { value: "unread", children: list })] })] }));
+}

package/dist/esm/inbox-react/inbox-panel.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Divider, Group, Title } from '@mantine/core';
+import { useInbox } from './inbox-context.js';
+import { InboxListView } from './inbox-list.js';
+/** What the bell opens: the newest notifications, with the ways on to the full list and the preference. */
+export function InboxPanel() {
+    const { labels, viewAll, openPreferences } = useInbox();
+    return (_jsxs(_Fragment, { children: [_jsx(InboxListView, { maxHeight: 400, heading: _jsx(Title, { order: 2, size: "h5", children: labels.heading }) }), _jsx(Divider, {}), _jsxs(Group, { justify: "space-between", gap: 4, p: 4, children: [_jsx(Button, { variant: "subtle", size: "compact-sm", mih: 44, px: "sm", onClick: viewAll, children: labels.viewAll }), _jsx(Button, { variant: "subtle", size: "compact-sm", mih: 44, px: "sm", onClick: openPreferences, children: labels.preferences })] })] }));
+}