@xtremax/pigeon 0.0.0-stage → 0.3.1

package/dist/cjs/inbox/handler.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createInboxHandler = createInboxHandler;
+const client_1 = require("./client");
+const errors_1 = require("./errors");
+const origin_1 = require("./origin");
+const project_1 = require("./project");
+const validate_1 = require("./validate");
+/** 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.
+ */
+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 ??= (0, client_1.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 (0, errors_1.hostError)('not_found');
+            if (op.write && !(0, origin_1.originAllowed)(request, options.allowedOrigins))
+                return (0, errors_1.hostError)('not_permitted');
+            const person = await options.resolvePerson(request);
+            if (typeof person !== 'string' || person.length === 0 || person.length > validate_1.INBOX_LIMITS.personMax)
+                return (0, errors_1.hostError)('not_signed_in');
+            const client = clientOf();
+            switch (op.name) {
+                case 'summary':
+                    return answer((0, project_1.projectSummary)(await client.summary(person, call)));
+                case 'list': {
+                    const limit = (0, validate_1.parseLimit)(url.searchParams.get('limit'));
+                    if (!limit.ok)
+                        return (0, errors_1.hostError)('invalid_input', limit.field);
+                    const cursor = (0, validate_1.parseCursor)(url.searchParams.get('cursor'));
+                    if (!cursor.ok)
+                        return (0, errors_1.hostError)('invalid_input', cursor.field);
+                    const unread = (0, validate_1.parseUnread)(url.searchParams.get('unread'));
+                    if (!unread.ok)
+                        return (0, errors_1.hostError)('invalid_input', unread.field);
+                    return answer((0, project_1.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 (0, errors_1.hostError)('invalid_input', 'id');
+                    }
+                    const id = (0, validate_1.parseId)(raw);
+                    if (!id.ok)
+                        return (0, errors_1.hostError)('invalid_input', id.field);
+                    return answer((0, project_1.projectMarkRead)(await client.markRead(person, id.value, call)));
+                }
+                case 'readAll': {
+                    const body = (0, validate_1.parseBody)(await request.text());
+                    if (!body.ok)
+                        return (0, errors_1.hostError)('invalid_input', body.field);
+                    const upTo = (0, validate_1.parseUpTo)(body.value.upTo);
+                    if (!upTo.ok)
+                        return (0, errors_1.hostError)('invalid_input', upTo.field);
+                    return answer((0, project_1.projectReadAll)(await client.markAllRead(person, { upTo: upTo.value }, call)));
+                }
+                case 'getPreference':
+                    return answer((0, project_1.projectPreference)(await client.getPreference(person, call)));
+                case 'setPreference': {
+                    const body = (0, validate_1.parseBody)(await request.text());
+                    if (!body.ok)
+                        return (0, errors_1.hostError)('invalid_input', body.field);
+                    const state = (0, validate_1.parseState)(body.value.state);
+                    if (!state.ok)
+                        return (0, errors_1.hostError)('invalid_input', state.field);
+                    return answer((0, project_1.projectPreference)(await client.setPreference(person, state.value, call)));
+                }
+            }
+        }
+        catch (error) {
+            const code = (0, errors_1.hostCodeOf)(error);
+            if (code === 'unavailable')
+                report(error);
+            return (0, errors_1.hostError)(code);
+        }
+    };
+    function answer(data) {
+        if (data === null) {
+            report(new Error('The inbox answer did not have the documented shape'));
+            return (0, errors_1.hostError)('unavailable');
+        }
+        return (0, errors_1.hostData)(data);
+    }
+    function report(error) {
+        try {
+            options.onError?.(error);
+        }
+        catch {
+            // A failing logger must not change the answer.
+        }
+    }
+}

package/dist/cjs/inbox/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INBOX_LIMITS = exports.originAllowed = exports.hostCodeOf = exports.HOST_ERRORS = exports.createInboxHandler = exports.personHeader = exports.createInboxClient = void 0;
+var client_1 = require("./client");
+Object.defineProperty(exports, "createInboxClient", { enumerable: true, get: function () { return client_1.createInboxClient; } });
+Object.defineProperty(exports, "personHeader", { enumerable: true, get: function () { return client_1.personHeader; } });
+var handler_1 = require("./handler");
+Object.defineProperty(exports, "createInboxHandler", { enumerable: true, get: function () { return handler_1.createInboxHandler; } });
+var errors_1 = require("./errors");
+Object.defineProperty(exports, "HOST_ERRORS", { enumerable: true, get: function () { return errors_1.HOST_ERRORS; } });
+Object.defineProperty(exports, "hostCodeOf", { enumerable: true, get: function () { return errors_1.hostCodeOf; } });
+var origin_1 = require("./origin");
+Object.defineProperty(exports, "originAllowed", { enumerable: true, get: function () { return origin_1.originAllowed; } });
+var validate_1 = require("./validate");
+Object.defineProperty(exports, "INBOX_LIMITS", { enumerable: true, get: function () { return validate_1.INBOX_LIMITS; } });

package/dist/cjs/inbox/origin.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.originAllowed = originAllowed;
+/**
+ * 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.
+ */
+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/cjs/inbox/project.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.projectNotification = projectNotification;
+exports.projectSummary = projectSummary;
+exports.projectPage = projectPage;
+exports.projectMarkRead = projectMarkRead;
+exports.projectReadAll = projectReadAll;
+exports.projectPreference = projectPreference;
+/**
+ * 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);
+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 };
+}
+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 };
+}
+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 };
+}
+function projectMarkRead(v) {
+    const o = obj(v);
+    const notification = projectNotification(o?.notification);
+    const unreadCount = count(o?.unreadCount);
+    return notification && unreadCount !== null ? { notification, unreadCount } : null;
+}
+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 };
+}
+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/cjs/inbox/validate.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INBOX_LIMITS = void 0;
+exports.parseLimit = parseLimit;
+exports.parseCursor = parseCursor;
+exports.parseUnread = parseUnread;
+exports.parseId = parseId;
+exports.parseUpTo = parseUpTo;
+exports.parseState = parseState;
+exports.parseBody = parseBody;
+exports.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 });
+function parseLimit(raw) {
+    if (raw === null)
+        return ok(undefined);
+    if (!/^\d{1,3}$/.test(raw))
+        return bad('limit');
+    const n = Number(raw);
+    return n >= exports.INBOX_LIMITS.pageMin && n <= exports.INBOX_LIMITS.pageMax ? ok(n) : bad('limit');
+}
+function parseCursor(raw) {
+    if (raw === null)
+        return ok(undefined);
+    return raw.length > 0 && raw.length <= exports.INBOX_LIMITS.cursorMax && /^[A-Za-z0-9_-]+$/.test(raw) ? ok(raw) : bad('cursor');
+}
+function parseUnread(raw) {
+    if (raw === null || raw === 'false')
+        return ok(false);
+    return raw === 'true' ? ok(true) : bad('unread');
+}
+function parseId(raw) {
+    return raw.length > 0 && raw.length <= exports.INBOX_LIMITS.idMax && /^[A-Za-z0-9_-]+$/.test(raw) ? ok(raw) : bad('id');
+}
+function parseUpTo(raw) {
+    if (raw === undefined || raw === null)
+        return ok(undefined);
+    if (typeof raw !== 'string' || raw.length > exports.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');
+}
+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. */
+function parseBody(text) {
+    if (new TextEncoder().encode(text).length > exports.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/cjs/inbox-react/format.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fill = fill;
+exports.badgeText = badgeText;
+exports.bellName = bellName;
+exports.safeLink = safeLink;
+exports.relativeTime = relativeTime;
+exports.exactTime = exactTime;
+/** Fills `{name}` placeholders. Values are text, never markup. */
+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). */
+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). */
+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). */
+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. */
+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. */
+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/cjs/inbox-react/inbox-client.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_API_BASE = void 0;
+exports.normalizeApiBase = normalizeApiBase;
+exports.createInboxBrowserClient = createInboxBrowserClient;
+const parse_1 = require("./parse");
+exports.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.
+ */
+function normalizeApiBase(apiBase) {
+    const base = (apiBase ?? exports.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.
+ */
+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: (0, parse_1.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', parse_1.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}` : ''}`, parse_1.parsePage);
+        },
+        markRead: (id) => call('POST', `/notifications/${encodeURIComponent(id)}/read`, parse_1.parseMarkRead, {}),
+        markAllRead: (upTo) => call('POST', '/read-all', parse_1.parseReadAll, upTo ? { upTo } : {}),
+        getPreference: () => call('GET', '/preference', parse_1.parsePreference),
+        setPreference: (state) => call('PUT', '/preference', parse_1.parsePreference, { state }),
+    };
+}

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

@@ -0,0 +1,13 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InboxContext = void 0;
+exports.useInbox = useInbox;
+const react_1 = require("react");
+exports.InboxContext = (0, react_1.createContext)(null);
+function useInbox() {
+    const value = (0, react_1.useContext)(exports.InboxContext);
+    if (!value)
+        throw new Error('Wrap the inbox components in <InboxProvider>.');
+    return value;
+}

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

@@ -0,0 +1,13 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InboxFullList = InboxFullList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const inbox_list_1 = require("./inbox-list");
+/**
+ * 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.
+ */
+function InboxFullList({ maxHeight = 'min(70vh, 640px)' }) {
+    return (0, jsx_runtime_1.jsx)(inbox_list_1.InboxListView, { paged: true, maxHeight: maxHeight });
+}

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

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

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

@@ -0,0 +1,13 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InboxPanel = InboxPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@mantine/core");
+const inbox_context_1 = require("./inbox-context");
+const inbox_list_1 = require("./inbox-list");
+/** What the bell opens: the newest notifications, with the ways on to the full list and the preference. */
+function InboxPanel() {
+    const { labels, viewAll, openPreferences } = (0, inbox_context_1.useInbox)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(inbox_list_1.InboxListView, { maxHeight: 400, heading: (0, jsx_runtime_1.jsx)(core_1.Title, { order: 2, size: "h5", children: labels.heading }) }), (0, jsx_runtime_1.jsx)(core_1.Divider, {}), (0, jsx_runtime_1.jsxs)(core_1.Group, { justify: "space-between", gap: 4, p: 4, children: [(0, jsx_runtime_1.jsx)(core_1.Button, { variant: "subtle", size: "compact-sm", mih: 44, px: "sm", onClick: viewAll, children: labels.viewAll }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "subtle", size: "compact-sm", mih: 44, px: "sm", onClick: openPreferences, children: labels.preferences })] })] }));
+}