@crvouga/mockingbird-notifications 0.0.0-stage → 0.1.0

package/dist/server.d.ts

@@ -0,0 +1,177 @@
+/** The three kinds of device a notification lands on. */
+type Channel = "sms" | "email" | "push";
+/** Emulators the harness knows how to read. */
+type ServiceKind = "twilio" | "resend" | "fcm" | "ses" | "sns" | "customerio" | "mailosaur";
+type Address = {
+    name: string | null;
+    address: string;
+};
+type SmsContent = {
+    body: string;
+    /** One-time code the sender included (Twilio Verify), when known. */
+    code: string | null;
+    media: string[];
+};
+type EmailAttachment = {
+    filename: string;
+    contentType: string | null;
+    size: number | null;
+};
+type EmailContent = {
+    subject: string;
+    html: string | null;
+    text: string | null;
+    cc: string[];
+    bcc: string[];
+    replyTo: string[];
+    attachments: EmailAttachment[];
+    headers: Record<string, string>;
+};
+type PushPlatform = "android" | "ios" | "web" | "unknown";
+type PushContent = {
+    title: string | null;
+    body: string | null;
+    imageUrl: string | null;
+    /** The app the notification belongs to (the FCM project, for example). */
+    app: string;
+    platform: PushPlatform;
+    data: Record<string, string>;
+    badge: number | null;
+    sound: string | null;
+};
+/** One message as a recipient would receive it, normalized across emulators. */
+type Notification = {
+    /** Stable across polls: `<service entry>:<namespace>:<provider id>`. */
+    id: string;
+    /** The provider's own id (Twilio SID, Resend id, FCM message name, …). */
+    providerId: string;
+    channel: Channel;
+    /** The fleet entry name (`twilio`, or an alias such as `push`). */
+    source: string;
+    service: ServiceKind;
+    namespace: string;
+    /** Phone number, email address, or push registration token. */
+    to: string;
+    from: Address;
+    /** ISO-8601, on the emulator's clock. */
+    createdAt: string;
+    /** Short plain-text preview. */
+    preview: string;
+    /** Provider delivery state when it reports one (`queued`, `delivered`, `suppressed`, …). */
+    status: string | null;
+    sms: SmsContent | null;
+    email: EmailContent | null;
+    push: PushContent | null;
+    /** The record exactly as the emulator reported it. */
+    raw: unknown;
+};
+type NotificationFilter = {
+    channel?: Channel | undefined;
+    service?: ServiceKind | undefined;
+    source?: string | undefined;
+    namespace?: string | undefined;
+    /** Exact recipient (case-insensitive for email). */
+    to?: string | undefined;
+    /** Case-insensitive text search across sender, subject, title and body. */
+    contains?: string | undefined;
+    /** Only notifications created at or after this instant (ISO-8601 or epoch ms). */
+    since?: string | number | undefined;
+};
+type SourceStatus = {
+    name: string;
+    service: ServiceKind | null;
+    url: string;
+    ok: boolean;
+    error: string | null;
+    count: number;
+    lastSyncAt: string | null;
+};
+
+/**
+ * Where the emulators are. The harness reads the same fleet the application uses: the live fleet
+ * controller (`adminBase`), the fleet's ready manifest, or explicit URLs and in-process runtimes.
+ */
+
+type FetchLike = (request: Request) => Response | Promise<Response>;
+/** A service emulator: its base URL, an `{ url, adminUrl?, service? }` entry, or an in-process runtime. */
+type ServiceInput = string | {
+    url: string;
+    adminUrl?: string;
+    service?: ServiceKind;
+} | {
+    fetch: FetchLike;
+    service?: ServiceKind;
+    adminPrefix?: string;
+};
+/** The subset of a fleet ready manifest (`--ready-file`) the harness reads. */
+type FleetManifest = {
+    adminBase?: string;
+    services: Record<string, {
+        protocol?: string;
+        url?: string;
+        adminUrl?: string;
+        target?: string;
+    } | undefined>;
+};
+
+type HarnessOptions = {
+    /** A running fleet controller's `adminBase` (`http://127.0.0.1:9000/__admin/fleet`). */
+    fleet?: string;
+    /** A fleet ready manifest, or a function that reads the current one (re-read on every sync). */
+    manifest?: FleetManifest | (() => FleetManifest | Promise<FleetManifest>);
+    /** Explicit emulators by name: base URLs, `{ url, adminUrl }`, or in-process runtimes. */
+    services?: Record<string, ServiceInput>;
+    /**
+     * Namespaces to watch in the background. `"all"` follows the fleet's namespace list.
+     * Any namespace an API call or the UI asks for is watched from then on. Default `["default"]`,
+     * or `"all"` with `fleet`.
+     */
+    namespaces?: "all" | string[];
+    /** Background polling interval. `0` turns it off; reads still sync on demand. Default 750 ms. */
+    pollIntervalMs?: number;
+    /** Sent as `x-mockingbird-admin-key` to the fleet and every emulator. */
+    adminKey?: string;
+    /** Transport for URL endpoints. Default: global `fetch`. */
+    fetch?: FetchLike;
+    /** Page title. */
+    title?: string;
+};
+type WaitOptions = {
+    timeoutMs?: number;
+    count?: number;
+};
+type NotificationHarness = {
+    /** The harness UI and JSON API as a Fetch handler. */
+    fetch(request: Request): Promise<Response>;
+    /** Read every emulator now. Resolves after a read that started after this call. */
+    sync(namespace?: string): Promise<void>;
+    /** Notifications matching `filter`, oldest first, after a fresh sync. */
+    list(filter?: NotificationFilter): Promise<Notification[]>;
+    /** Resolve once at least `count` (default 1) notifications match; reject after `timeoutMs`. */
+    waitFor(filter: NotificationFilter, options?: WaitOptions): Promise<Notification[]>;
+    sources(): SourceStatus[];
+    close(): void;
+};
+
+/** Port `mockingbird-notifications serve` listens on when none is given. */
+declare const DEFAULT_PORT = 8790;
+type NotificationServerOptions = Omit<HarnessOptions, "manifest"> & {
+    /** A fleet ready manifest object, or the path of the fleet's `--ready-file` (re-read every sync). */
+    manifest?: HarnessOptions["manifest"] | string;
+    /** Default `0`: the OS picks a free port. */
+    port?: number;
+    /** Default `127.0.0.1`. */
+    host?: string;
+};
+type NotificationServer = {
+    url: string;
+    port: number;
+    harness: NotificationHarness;
+    close(): Promise<void>;
+};
+/** A manifest loader that re-reads the fleet's ready file, so a restarted fleet is picked up. */
+declare const manifestFile: (path: string) => () => Promise<FleetManifest>;
+declare const createServer: (options?: NotificationServerOptions) => Promise<NotificationServer>;
+
+export { DEFAULT_PORT, createServer, manifestFile };
+export type { NotificationServer, NotificationServerOptions };

package/dist/server.js

@@ -0,0 +1,13 @@
+import {
+  DEFAULT_PORT,
+  createServer,
+  manifestFile
+} from "./chunk-JQ6KPT2C.js";
+import "./chunk-GRGR3QZM.js";
+import "./chunk-QE3TRUI6.js";
+export {
+  DEFAULT_PORT,
+  createServer,
+  manifestFile
+};
+//# sourceMappingURL=server.js.map

package/dist/server.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/ui.d.ts

@@ -0,0 +1,445 @@
+/** The three kinds of device a notification lands on. */
+type Channel = "sms" | "email" | "push";
+/** Emulators the harness knows how to read. */
+type ServiceKind = "twilio" | "resend" | "fcm" | "ses" | "sns" | "customerio" | "mailosaur";
+type Address = {
+    name: string | null;
+    address: string;
+};
+type SmsContent = {
+    body: string;
+    /** One-time code the sender included (Twilio Verify), when known. */
+    code: string | null;
+    media: string[];
+};
+type EmailAttachment = {
+    filename: string;
+    contentType: string | null;
+    size: number | null;
+};
+type EmailContent = {
+    subject: string;
+    html: string | null;
+    text: string | null;
+    cc: string[];
+    bcc: string[];
+    replyTo: string[];
+    attachments: EmailAttachment[];
+    headers: Record<string, string>;
+};
+type PushPlatform = "android" | "ios" | "web" | "unknown";
+type PushContent = {
+    title: string | null;
+    body: string | null;
+    imageUrl: string | null;
+    /** The app the notification belongs to (the FCM project, for example). */
+    app: string;
+    platform: PushPlatform;
+    data: Record<string, string>;
+    badge: number | null;
+    sound: string | null;
+};
+/** One message as a recipient would receive it, normalized across emulators. */
+type Notification = {
+    /** Stable across polls: `<service entry>:<namespace>:<provider id>`. */
+    id: string;
+    /** The provider's own id (Twilio SID, Resend id, FCM message name, …). */
+    providerId: string;
+    channel: Channel;
+    /** The fleet entry name (`twilio`, or an alias such as `push`). */
+    source: string;
+    service: ServiceKind;
+    namespace: string;
+    /** Phone number, email address, or push registration token. */
+    to: string;
+    from: Address;
+    /** ISO-8601, on the emulator's clock. */
+    createdAt: string;
+    /** Short plain-text preview. */
+    preview: string;
+    /** Provider delivery state when it reports one (`queued`, `delivered`, `suppressed`, …). */
+    status: string | null;
+    sms: SmsContent | null;
+    email: EmailContent | null;
+    push: PushContent | null;
+    /** The record exactly as the emulator reported it. */
+    raw: unknown;
+};
+type NotificationFilter = {
+    channel?: Channel | undefined;
+    service?: ServiceKind | undefined;
+    source?: string | undefined;
+    namespace?: string | undefined;
+    /** Exact recipient (case-insensitive for email). */
+    to?: string | undefined;
+    /** Case-insensitive text search across sender, subject, title and body. */
+    contains?: string | undefined;
+    /** Only notifications created at or after this instant (ISO-8601 or epoch ms). */
+    since?: string | number | undefined;
+};
+type SourceStatus = {
+    name: string;
+    service: ServiceKind | null;
+    url: string;
+    ok: boolean;
+    error: string | null;
+    count: number;
+    lastSyncAt: string | null;
+};
+
+type WaitOptions = {
+    timeoutMs?: number;
+    count?: number;
+};
+type NotificationHarness = {
+    /** The harness UI and JSON API as a Fetch handler. */
+    fetch(request: Request): Promise<Response>;
+    /** Read every emulator now. Resolves after a read that started after this call. */
+    sync(namespace?: string): Promise<void>;
+    /** Notifications matching `filter`, oldest first, after a fresh sync. */
+    list(filter?: NotificationFilter): Promise<Notification[]>;
+    /** Resolve once at least `count` (default 1) notifications match; reject after `timeoutMs`. */
+    waitFor(filter: NotificationFilter, options?: WaitOptions): Promise<Notification[]>;
+    sources(): SourceStatus[];
+    close(): void;
+};
+
+/**
+ * The harness UI. Plain DOM: each device re-renders from `state` when the harness reports a change.
+ *
+ * `createApp` mounts it on any element. Live, it reads a harness through `fetch` (a Fetch handler
+ * for an in-process harness, or HTTP); otherwise it draws the notifications it is given, which is
+ * how the Storybook catalog shows every state.
+ *
+ * Every element a test might look for has a `data-testid` from `../testids.ts`, and every element
+ * that shows a notification carries its id, channel, service, recipient, sender and status as
+ * `data-*` attributes. Every gesture (swipe, long press) also has a click or key equivalent.
+ */
+
+type MotionPreference = "auto" | "full" | "reduce";
+type AppOptions = {
+    /** Read a harness and follow its event stream. Default true. */
+    live?: boolean;
+    /**
+     * How to reach the harness: an in-process harness's `fetch`, or any Fetch-compatible function.
+     * Default: the global `fetch` against `baseUrl`.
+     */
+    fetch?: (request: Request) => Promise<Response>;
+    /** Where the harness API lives. Default: the page's own URL (standalone), or a placeholder origin with `fetch`. */
+    baseUrl?: string;
+    /** Read `?view=…` from the page URL and write `?namespace=` back to it. Default: true only for the standalone page. */
+    syncUrl?: boolean;
+    /** Keep read state in `localStorage`. Default: same as `live`. */
+    storage?: boolean;
+    /** Play alert sounds (and vibrate) on arrivals. Default false; the top bar toggles it. */
+    sound?: boolean;
+    /** Animations. `auto` follows the viewer's reduced-motion setting. Default `auto`. */
+    motion?: MotionPreference;
+    /** Fill the host element and scroll inside it, for a tab or panel in another app. */
+    embedded?: boolean;
+    /** Which devices to show. Default all three. */
+    channels?: Channel[];
+    /** Show the top bar (namespace, filter, view tabs, sound, emulator status). Default true. */
+    chrome?: boolean;
+    /** Called with each batch of new notifications. */
+    onArrive?: (added: Notification[]) => void;
+    /** Fixed notifications to draw when not live. */
+    items?: Notification[];
+    sources?: SourceStatus[];
+    namespaces?: string[];
+    namespace?: string;
+    discoveryError?: string | null;
+    /** Live-stream indicator when not live. Default true. */
+    connected?: boolean;
+    /** Ids already read (when not live there is no browser storage). */
+    seen?: string[];
+    /** Ids drawn with their arrival animation. */
+    arrived?: string[];
+    /** Fixed clock in epoch ms, so relative times and the status bar never move. */
+    now?: number;
+    title?: string;
+    /** A query string such as `?view=sms&to=…`, as a deep link would carry. */
+    search?: string;
+    initial?: {
+        view?: View;
+        only?: Channel | null;
+        search?: string;
+        follow?: boolean;
+        inspect?: string | null;
+        mailDetailsOpen?: boolean;
+        sms?: {
+            to?: string | null;
+            thread?: string | null;
+            menu?: string | null;
+        };
+        push?: {
+            to?: string | null;
+            skin?: PushSkin;
+            expanded?: string | null;
+            preview?: string | null;
+            settings?: string | null;
+            openGroups?: string[];
+        };
+        email?: {
+            to?: string | null;
+            open?: string | null;
+        };
+        toast?: string | null;
+        local?: {
+            dismissed?: string[];
+            pinned?: string[];
+            muted?: string[];
+            starred?: string[];
+            silent?: string[];
+            tapbacks?: Record<string, Tapback>;
+        };
+    };
+};
+type AppHandle = {
+    render(): void;
+    state: {
+        items: Notification[];
+    };
+    /** Resolves once the first read has been drawn (`data-ready="true"` on the root). */
+    ready: Promise<void>;
+    /** Open one notification on its device, or a recipient on a device. */
+    show(target: {
+        id?: string;
+        channel?: Channel;
+        to?: string;
+    }): void;
+    setNamespace(namespace: string): void;
+    setSound(on: boolean): void;
+    /** Stop streams and timers, remove listeners and empty the host. */
+    destroy(): void;
+};
+type View = "devices" | "timeline";
+type PushSkin = "auto" | "ios" | "android";
+type Tapback = "heart" | "like" | "dislike" | "laugh" | "emphasize" | "question";
+declare function createApp(root: HTMLElement, options?: AppOptions): AppHandle;
+
+/** The class on the UI root. Every rule below is scoped to it. */
+declare const ROOT_CLASS = "mb-notifications";
+/** The stylesheet, every rule scoped to `.mb-notifications`. */
+declare const STYLES: string;
+
+/**
+ * Every `data-testid` the harness UI renders, and selector helpers for browser tests.
+ *
+ * Elements that show one notification also carry its fields as attributes, so a test can narrow by
+ * what it knows instead of by position:
+ *
+ *   data-notification-id  data-channel  data-service  data-source  data-to  data-from
+ *   data-status  data-created-at  data-unread ("true" | "false")
+ *
+ * The UI root (`TEST_IDS.app`) reports its state the same way: `data-ready` ("true" once the first
+ * read finished), `data-view`, `data-namespace`, `data-count`, `data-version`, `data-connected`,
+ * `data-sound` and `data-motion`.
+ *
+ * This module has no dependencies, so Playwright, Cypress or WebdriverIO specs can import it.
+ */
+declare const TEST_IDS: {
+    /** The UI root. */
+    readonly app: "notifications-app";
+    readonly topbar: "topbar";
+    /** `<select>` of namespaces. */
+    readonly namespace: "namespace";
+    /** Filter `<input>` (recipient, sender, text). */
+    readonly search: "search";
+    /** View tabs; `aria-pressed="true"` on the active one. */
+    readonly viewDevices: "view-devices";
+    readonly viewTimeline: "view-timeline";
+    /** "Follow new" checkbox. */
+    readonly follow: "follow";
+    /** Sound on/off button; `aria-pressed`. */
+    readonly sound: "sound-toggle";
+    /** Live stream indicator; `data-state="live" | "reconnecting"`. */
+    readonly connection: "connection";
+    /** One pill per emulator; `data-name`, `data-service`, `data-ok`, `data-count`. */
+    readonly source: "source";
+    /** Discovery or emulator errors, or the "no emulators" hint; `data-kind="error" | "empty"`. */
+    readonly notice: "notice";
+    /** Bottom-left message after an action, e.g. "Conversation archived." */
+    readonly toast: "toast";
+    readonly toastUndo: "toast-undo";
+    /** The phone; `data-screen="threads" | "conversation"`, `data-recipient`, `data-thread`. */
+    readonly smsDevice: "sms-device";
+    /** Phone number `<select>`; option values are E.164 numbers. */
+    readonly smsRecipient: "sms-recipient";
+    /** Unread SMS badge next to the column title (absent when 0). */
+    readonly smsUnreadCount: "sms-unread-count";
+    /** One conversation in the list; `data-from` (the sender address), `data-unread`, `data-pinned`, `data-muted`. */
+    readonly smsThread: "sms-thread";
+    readonly smsThreadName: "sms-thread-name";
+    readonly smsThreadPreview: "sms-thread-preview";
+    readonly smsThreadTime: "sms-thread-time";
+    readonly smsThreadUnread: "sms-thread-unread";
+    /** Swipe actions behind a thread (also reachable with the keyboard: focus the thread, press Delete). */
+    readonly smsThreadDelete: "sms-thread-delete";
+    readonly smsThreadMute: "sms-thread-mute";
+    readonly smsThreadPin: "sms-thread-pin";
+    readonly smsThreadToggleUnread: "sms-thread-toggle-unread";
+    /** Shown when the phone has no messages. */
+    readonly smsEmpty: "sms-empty";
+    /** An open conversation; `data-from`. */
+    readonly smsConversation: "sms-conversation";
+    readonly smsConversationTitle: "sms-conversation-title";
+    readonly smsBack: "sms-back";
+    /** One message; carries the notification attributes plus `data-code` when it holds a one-time code. */
+    readonly smsBubble: "sms-bubble";
+    readonly smsBubbleMedia: "sms-bubble-media";
+    /** The time revealed by swiping the conversation left. */
+    readonly smsBubbleTime: "sms-bubble-time";
+    /** A reaction added with the long-press menu; `data-tapback`. */
+    readonly smsTapback: "sms-tapback";
+    /** Centered date stamp between messages. */
+    readonly smsTimestamp: "sms-timestamp";
+    /** One-time code suggestion above the keyboard; `data-code`. */
+    readonly smsCode: "sms-code";
+    /** Long-press menu on a bubble. */
+    readonly smsMenu: "sms-menu";
+    readonly smsMenuCopy: "sms-menu-copy";
+    /** One tapback in the menu; `data-tapback="heart" | "like" | "dislike" | "laugh" | "emphasize" | "question"`. */
+    readonly smsMenuTapback: "sms-menu-tapback";
+    /** The phone; `data-skin="ios" | "android"`, `data-recipient`, `data-platform`. */
+    readonly pushDevice: "push-device";
+    /** Device token `<select>`. */
+    readonly pushRecipient: "push-recipient";
+    /** Skin buttons; `data-value`, `aria-pressed`. */
+    readonly pushSkin: "push-skin";
+    readonly pushUnreadCount: "push-unread-count";
+    /** One notification; notification attributes plus `data-expanded`, `data-platform`, `data-app`, `data-stacked`. */
+    readonly pushNotification: "push-notification";
+    readonly pushNotificationApp: "push-notification-app";
+    readonly pushNotificationTitle: "push-notification-title";
+    readonly pushNotificationBody: "push-notification-body";
+    readonly pushNotificationTime: "push-notification-time";
+    readonly pushNotificationImage: "push-notification-image";
+    /** The `data` payload, shown when expanded. */
+    readonly pushNotificationData: "push-notification-data";
+    /** Service, status, badge and sound, shown when expanded. */
+    readonly pushNotificationMeta: "push-notification-meta";
+    /** iOS: a group of notifications from one app; `data-app`, `data-count`, `data-open`. */
+    readonly pushGroup: "push-group";
+    /** iOS: "N more notifications" under a collapsed group (click to open it); `data-count`. */
+    readonly pushGroupMore: "push-group-more";
+    /** iOS: "Show less" on an open group. */
+    readonly pushGroupCollapse: "push-group-collapse";
+    /** iOS: swipe-left actions. */
+    readonly pushClear: "push-clear";
+    readonly pushOptions: "push-options";
+    /** iOS long-press preview; Android long-press settings. */
+    readonly pushPreview: "push-preview";
+    readonly pushSettings: "push-settings";
+    /** Android "Clear all". */
+    readonly pushClearAll: "push-clear-all";
+    readonly pushEmpty: "push-empty";
+    /** The browser window; `data-screen="inbox" | "message"`, `data-recipient`. */
+    readonly emailDevice: "email-device";
+    /** Mailbox `<select>`; option values are lower-case addresses. */
+    readonly emailRecipient: "email-recipient";
+    readonly emailUnreadCount: "email-unread-count";
+    /** One inbox row; notification attributes plus `data-starred`. */
+    readonly emailRow: "email-row";
+    readonly emailRowFrom: "email-row-from";
+    readonly emailRowSubject: "email-row-subject";
+    readonly emailRowSnippet: "email-row-snippet";
+    readonly emailRowDate: "email-row-date";
+    readonly emailRowService: "email-row-service";
+    readonly emailRowAttachment: "email-row-attachment";
+    readonly emailRowStar: "email-row-star";
+    /** Hover actions on a row. */
+    readonly emailRowArchive: "email-row-archive";
+    readonly emailRowDelete: "email-row-delete";
+    readonly emailRowToggleRead: "email-row-toggle-read";
+    readonly emailRefresh: "email-refresh";
+    readonly emailEmpty: "email-empty";
+    /** The open message; notification attributes. */
+    readonly emailOpen: "email-open";
+    readonly emailBack: "email-back";
+    readonly emailArchive: "email-archive";
+    readonly emailDelete: "email-delete";
+    readonly emailMarkUnread: "email-mark-unread";
+    readonly emailSubject: "email-subject";
+    readonly emailFromName: "email-from-name";
+    readonly emailFromAddress: "email-from-address";
+    /** "to me, …" line; click to toggle the details. */
+    readonly emailTo: "email-to";
+    readonly emailDate: "email-date";
+    readonly emailDetails: "email-details";
+    /** One row of the details; `data-field="from" | "to" | "cc" | "bcc" | "reply-to" | "date" | "subject" | "mailed-by" | "message-id"`. */
+    readonly emailDetail: "email-detail";
+    /** The HTML body `<iframe>` (same origin: use `frameLocator`). */
+    readonly emailBody: "email-body";
+    /** The plain-text body when there is no HTML. */
+    readonly emailText: "email-text";
+    readonly emailAttachments: "email-attachments";
+    /** One attachment; `data-filename`, `data-content-type`, `data-size`. */
+    readonly emailAttachment: "email-attachment";
+    readonly timeline: "timeline";
+    /** One row; notification attributes. Click it to inspect. */
+    readonly timelineRow: "timeline-row";
+    readonly timelineEmpty: "timeline-empty";
+    /** The JSON inspector; notification attributes. Opened by clicking a timeline row or double-clicking any notification. */
+    readonly inspector: "inspector";
+    readonly inspectorTitle: "inspector-title";
+    readonly inspectorClose: "inspector-close";
+    readonly inspectorShowOnDevice: "inspector-show-on-device";
+    /** One normalized field; `data-field`. */
+    readonly inspectorField: "inspector-field";
+    /** The full record, normalized fields plus `raw`, as JSON text. */
+    readonly inspectorJson: "inspector-json";
+};
+type TestId = (typeof TEST_IDS)[keyof typeof TEST_IDS];
+/** CSS selectors for the harness UI. Each one works with `page.locator()` or `querySelector`. */
+declare const selectors: {
+    /** `[data-testid="…"]` */
+    testId: (id: TestId) => string;
+    /** The ready UI root: wait for this before asserting. */
+    ready: () => string;
+    /** Any element showing this notification (bubble, thread, card, row, open email, timeline row). */
+    notification: (id: string) => string;
+    /** A message bubble, optionally from one sender. */
+    smsBubble: (filter?: {
+        from?: string;
+        id?: string;
+    }) => string;
+    /** A conversation in the Messages list. */
+    smsThread: (from: string) => string;
+    /** A push notification card, optionally by id. */
+    pushNotification: (id?: string) => string;
+    /** An inbox row, optionally by id. */
+    emailRow: (id?: string) => string;
+    /** A timeline row, optionally by id. */
+    timelineRow: (id?: string) => string;
+};
+
+/**
+ * The harness UI as a component, for an app that wants its notifications on a tab or panel of its
+ * own page: in the browser, against an in-process harness, with no server and no network.
+ *
+ *   const harness = createNotificationHarness({ services: { twilio, resend, fcm } })
+ *   const ui = mountNotifications(panel, { harness })
+ *   await ui.ready
+ *   ui.destroy()
+ *
+ * Every rule of the stylesheet is scoped to the UI root (`.mb-notifications`), so it can sit next
+ * to the host app's own styles.
+ */
+
+type MountOptions = Omit<AppOptions, "fetch"> & {
+    /** An in-process harness (anything with a Fetch handler). Omit it to read `baseUrl` over HTTP. */
+    harness?: Pick<NotificationHarness, "fetch">;
+    /** Any Fetch-compatible transport to the harness API. Ignored when `harness` is given. */
+    fetch?: NonNullable<AppOptions["fetch"]>;
+    /** Add the stylesheet to the host's document or shadow root. Default true. */
+    injectStyles?: boolean;
+};
+/**
+ * Mount the live harness UI inside `host`. It fills the element and scrolls inside it
+ * (`embedded`), and leaves the page URL alone unless `syncUrl` is set.
+ */
+declare const mountNotifications: (host: HTMLElement, options?: MountOptions) => AppHandle;
+
+export { ROOT_CLASS, STYLES, TEST_IDS, createApp, mountNotifications, selectors };
+export type { AppHandle, AppOptions, MotionPreference, MountOptions, PushSkin, TestId, View };