@xtandard/webhooks 0.1.0

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

@@ -0,0 +1,98 @@
+/**
+ * `@xtandard/webhooks/react` — embed the dashboard as a React component in your
+ * own app (advanced mode). Most users mount the bundled SPA via a framework
+ * adapter and never touch React; this is for teams that want the panel inside an
+ * existing React shell.
+ *
+ * Two components share the same SPA internals:
+ *
+ * ```tsx
+ * import { WebhooksDashboard, WebhooksPortal } from "@xtandard/webhooks/react";
+ * import "@xtandard/webhooks/react/styles.css";
+ *
+ * // Full admin — point it at wherever the panel API is mounted:
+ * <WebhooksDashboard apiBaseUrl="/webhooks" />
+ *
+ * // Customer-scoped portal — pass a portal token minted server-side:
+ * <WebhooksPortal apiBaseUrl="/webhooks" token={portalToken} />
+ * ```
+ *
+ * `react` and `react-dom` are peer dependencies in this mode. The components are
+ * self-contained otherwise (TanStack Query and styles are bundled).
+ *
+ * @module
+ */
+import React from "react";
+import type { BaseLocationHook } from "wouter";
+import { QueryClient } from "@tanstack/react-query";
+import { type FetchLike } from "./ui/api.ts";
+import "./ui/styles.css";
+/** Props for {@link WebhooksDashboard}. */
+export interface WebhooksDashboardProps {
+    /**
+     * Base URL where the panel API + `/config` are mounted (e.g. `"/webhooks"` or
+     * `"https://admin.example.com/webhooks"`). Defaults to `""` (same origin, relative).
+     */
+    apiBaseUrl?: string;
+    /**
+     * `credentials` mode for API requests. Defaults to `"same-origin"`. For a
+     * **cross-origin** embed (panel served from a different origin than this app)
+     * with cookie-based auth, set `"include"` — and enable `cors` on the panel
+     * server so it returns `Access-Control-Allow-Credentials`.
+     */
+    credentials?: RequestCredentials;
+    /**
+     * Custom `fetch` for API requests — inject a bearer token / extra headers, or
+     * instrument calls. Defaults to the global `fetch`.
+     */
+    fetch?: FetchLike;
+    /** Bring your own QueryClient; one is created if omitted. */
+    queryClient?: QueryClient;
+    /** Control theme handling. `"auto"` (default) initializes the system/light/dark switcher. */
+    theme?: "auto" | "inherit";
+    /** Extra className on the dashboard root wrapper. */
+    className?: string;
+    /**
+     * How the dashboard routes between views/records.
+     * - `"hash"` (default) — routes in `location.hash`; never touches the host app's
+     *   router or pathname. Safest when mounted inside another app.
+     * - `"browser"` — real history paths (clean URLs). Requires the host to serve the
+     *   panel's `index.html` as a catch-all under `routerBase`, else refresh 404s.
+     * - `"memory"` — in-memory only; no URL coupling at all.
+     * - a custom wouter location hook for full control.
+     */
+    routing?: "hash" | "browser" | "memory" | BaseLocationHook;
+    /** Base path the panel is mounted at, used by `routing: "browser"` (e.g. `"/admin/webhooks"`). */
+    routerBase?: string;
+    /** Navbar logo image URL (replaces the title wordmark). Overrides server `/config`. */
+    logoUrl?: string;
+    /**
+     * Pre-select an application on first render, overriding the default (first
+     * application) — e.g. an admin panel embedding one dashboard per tenant. The
+     * URL still wins when it names one (`?app=`), so deep links and the in-app
+     * switcher behave normally afterwards.
+     */
+    initialApplicationKey?: string;
+}
+/** Props for {@link WebhooksPortal}. */
+export interface WebhooksPortalProps extends Omit<WebhooksDashboardProps, "initialApplicationKey"> {
+    /**
+     * Portal token (`whpt_…`) minted server-side via `createPortalToken()`. Sent as
+     * an `Authorization: Bearer` credential on every API request; `/config` then
+     * reports `portal: true` and the shell renders the reduced, application-pinned
+     * portal chrome.
+     */
+    token: string;
+}
+/** The full webhooks admin dashboard as an embeddable React component. */
+export declare function WebhooksDashboard({ apiBaseUrl, credentials, fetch: fetchImpl, queryClient, theme, className, routing, routerBase, logoUrl, initialApplicationKey, }: WebhooksDashboardProps): React.ReactElement;
+/**
+ * The customer-scoped consumer portal as an embeddable React component. Renders
+ * the same shell as {@link WebhooksDashboard} with the portal token attached as
+ * a Bearer credential; the server scopes every request to the token's
+ * application and `/config` flips the shell into the reduced portal chrome.
+ */
+export declare function WebhooksPortal({ token, ...rest }: WebhooksPortalProps): React.ReactElement;
+export { setApiBase, setApiToken, type FetchLike } from "./ui/api.ts";
+export { setThemePref, getThemePref, type ThemePref } from "./ui/theme.ts";
+export default WebhooksDashboard;

package/dist/types-react/schema.d.ts

@@ -0,0 +1,229 @@
+/**
+ * Core type definitions for `@xtandard/webhooks`.
+ *
+ * This module is **types only** — no runtime code beyond tiny guards and the
+ * schema-version constant, no dependencies. It is safe to import from the
+ * publish hot path and the receiver. Runtime validation (which pulls in
+ * `valibot`) lives in {@link ./validation}.
+ *
+ * @module
+ */
+/** JSON-serializable value, used for payloads, metadata, and event-type schemas. */
+export type JsonValue = string | number | boolean | null | JsonValue[] | {
+    [key: string]: JsonValue;
+};
+/**
+ * A duration for configuration options: either milliseconds as a number, or a
+ * human-friendly string such as `"5s"`, `"30m"`, `"2h"`, `"5d"`. Parsed by
+ * {@link ./duration.durationToMs}.
+ */
+export type WebhookDuration = number | `${number}${"ms" | "s" | "m" | "h" | "d"}`;
+/** Identity captured on audit records and passed by callers of audited mutations. */
+export interface Actor {
+    id: string;
+    email?: string;
+    name?: string;
+}
+/** Current schema version for stored records. */
+export declare const SCHEMA_VERSION: 1;
+/**
+ * An application is the unit of tenancy — typically one of *your* customers.
+ * Endpoints, messages, and deliveries are all scoped to an application, and a
+ * portal token grants access to exactly one application.
+ */
+export interface Application {
+    /** Unique key. Allowed characters: `a-z A-Z 0-9 . _ -`. */
+    key: string;
+    /** Optional human-friendly name shown in the UI. */
+    name?: string;
+    /** Arbitrary host-defined metadata. */
+    metadata?: JsonValue;
+    /** ISO-8601 creation timestamp, server-stamped. */
+    createdAt?: string;
+    /** ISO-8601 last-update timestamp, server-stamped. */
+    updatedAt?: string;
+}
+/**
+ * A named kind of event in the **global** catalog (shared by all applications),
+ * e.g. `"invoice.paid"`. Endpoints subscribe to event types by name.
+ */
+export interface EventType {
+    /** Unique dot-delimited name, e.g. `"invoice.paid"`. Allowed: `a-z A-Z 0-9 . _ -`. */
+    name: string;
+    /** Optional description shown in the UI and the public catalog. */
+    description?: string;
+    /** Optional UI grouping label (e.g. `"Billing"`). Purely presentational. */
+    groupName?: string;
+    /**
+     * Optional JSON Schema describing the payload. Documentation by default;
+     * enforced only when the core is configured with a `payloadValidator`.
+     */
+    schema?: JsonValue;
+    /** Deprecated event types are flagged in the UI but still deliverable. */
+    deprecated?: boolean;
+    /** ISO-8601 creation timestamp, server-stamped. */
+    createdAt?: string;
+    /** ISO-8601 last-update timestamp, server-stamped. */
+    updatedAt?: string;
+}
+/**
+ * A signing secret attached to an endpoint. Secrets are `whsec_` + base64 per
+ * the Standard Webhooks spec. Rotation keeps the previous secret verifiable
+ * until `expiresAt` (the grace window); expired secrets are pruned lazily.
+ */
+export interface EndpointSecret {
+    /** `"whsec_"` + base64-encoded random key material. */
+    secret: string;
+    /** ISO-8601 creation timestamp. */
+    createdAt: string;
+    /** Set when superseded by rotation; the secret stops signing after this instant. */
+    expiresAt?: string;
+}
+/** Why an endpoint is disabled: by an operator, or by the auto-disable policy. */
+export type EndpointDisabledReason = "manual" | "auto";
+/**
+ * A customer-registered URL that receives deliveries for one application.
+ */
+export interface Endpoint {
+    /** `"ep_"` + 22-char base62, server-generated. */
+    id: string;
+    /** Destination URL. `https` is enforced by default (`allowInsecureUrls` for dev). */
+    url: string;
+    /** Optional description shown in the UI. */
+    description?: string;
+    /**
+     * Event type names this endpoint subscribes to. Empty or absent = receives
+     * **all** event types.
+     */
+    eventTypes?: string[];
+    /** Disabled endpoints receive no deliveries (pending ones are held, not failed). */
+    disabled?: boolean;
+    /** Who/what disabled it — an operator (`"manual"`) or the failure policy (`"auto"`). */
+    disabledReason?: EndpointDisabledReason;
+    /** Static extra headers merged into every delivery request. */
+    headers?: Record<string, string>;
+    /** Signing secrets. `[0]` is current; extras are still-verifiable rotation grace. */
+    secrets: EndpointSecret[];
+    /** Arbitrary host-defined metadata. */
+    metadata?: JsonValue;
+    /** ISO-8601 creation timestamp, server-stamped. */
+    createdAt?: string;
+    /** ISO-8601 last-update timestamp, server-stamped. */
+    updatedAt?: string;
+    /**
+     * Start of the current unbroken failure streak (any successful delivery
+     * clears it). Drives the auto-disable policy.
+     */
+    firstFailingAt?: string | null;
+}
+/**
+ * A published event for one application. The message is the receiver-facing
+ * unit: its id is the `webhook-id` header (stable across retries — receivers
+ * dedupe on it), and its payload is the `data` of the wire envelope.
+ */
+export interface Message {
+    /** `"msg_"` + 22-char base62, server-generated. Sent as `webhook-id`. */
+    id: string;
+    /** Event type name (usually from the global catalog). */
+    eventType: string;
+    /** The `data` of the wire envelope. */
+    payload: JsonValue;
+    /** ISO-8601 event-occurred time (defaults to publish time). Sent in the envelope. */
+    timestamp: string;
+    /** Optional caller-supplied dedupe key; same key within retention returns the same message. */
+    idempotencyKey?: string;
+    /**
+     * The wire envelope serialized **once at publish time** so the signed bytes
+     * are identical across every retry of every delivery.
+     */
+    envelope: string;
+    /** ISO-8601 creation timestamp, server-stamped. */
+    createdAt: string;
+}
+/**
+ * Delivery lifecycle. `"failed"` means the retry schedule is exhausted — the
+ * dead-letter state. A manual retry moves a failed delivery back to `"pending"`.
+ */
+export type DeliveryStatus = "pending" | "delivering" | "succeeded" | "failed";
+/** Guard: has this delivery reached a terminal state? */
+export declare function isTerminalDeliveryStatus(status: DeliveryStatus): boolean;
+/**
+ * One message × one endpoint. Created at publish time (fan-out) and driven to
+ * a terminal state by the dispatcher.
+ */
+export interface Delivery {
+    /** `"dlv_"` + 22-char base62, server-generated. */
+    id: string;
+    /** The application this delivery belongs to (deliveries cross the dispatcher denormalized). */
+    applicationKey: string;
+    messageId: string;
+    endpointId: string;
+    status: DeliveryStatus;
+    /** Number of attempts made so far. */
+    attemptCount: number;
+    /** When the next attempt is due. `null` once terminal. */
+    nextAttemptAt?: string | null;
+    /** Dispatcher claim expiry; an expired lease makes the delivery reclaimable. */
+    leaseUntil?: string | null;
+    /**
+     * How the *next* attempt should be recorded: set to `"manual"` by
+     * retry/recover so the resulting attempt is attributed correctly, then
+     * cleared. Absent = `"schedule"`.
+     */
+    pendingTrigger?: AttemptTrigger;
+    /** ISO-8601 creation timestamp. */
+    createdAt: string;
+    /** ISO-8601 last-transition timestamp. */
+    updatedAt: string;
+}
+/** What initiated a delivery attempt. */
+export type AttemptTrigger = "schedule" | "manual" | "test";
+/** The recorded outcome of a single HTTP delivery attempt. */
+export interface DeliveryAttempt {
+    /** `"atp_"` + 22-char base62, server-generated. */
+    id: string;
+    deliveryId: string;
+    /** 1-based attempt ordinal within the delivery. */
+    attemptNumber: number;
+    /** ISO-8601 timestamp of the attempt. */
+    at: string;
+    /** Wall-clock duration of the HTTP round trip. */
+    durationMs: number;
+    /** True when the receiver answered 2xx. */
+    ok: boolean;
+    /** HTTP status code; absent on network error or timeout. */
+    httpStatus?: number;
+    /** Truncated error message on network error/timeout. */
+    error?: string;
+    /** Truncated response body (default cap 4096 chars). */
+    responseBody?: string;
+    /** What initiated this attempt. */
+    trigger: AttemptTrigger;
+}
+/** Actions recorded in the control-plane audit log. */
+export type AuditAction = "application.create" | "application.update" | "application.delete" | "event-type.create" | "event-type.update" | "event-type.delete" | "endpoint.create" | "endpoint.update" | "endpoint.delete" | "endpoint.rotate-secret" | "endpoint.disable" | "endpoint.enable" | "delivery.retry" | "endpoint.recover";
+/**
+ * A single control-plane audit record. Publishes are deliberately *not*
+ * audited — they are data-plane traffic, and the message log is their record.
+ */
+export interface AuditEntry {
+    action: AuditAction;
+    /** ISO-8601 timestamp. */
+    at: string;
+    by?: Actor | null;
+    /** The application the action was scoped to (absent for global event types). */
+    applicationKey?: string;
+    /** Endpoint id / event type name / delivery id the action targeted. */
+    subjectId?: string;
+    message?: string;
+}
+/**
+ * The wire envelope receivers get — the Standard Webhooks recommended shape.
+ * `type` is the event type name, `timestamp` the event-occurred time, and
+ * `data` the published payload.
+ */
+export interface WebhookEnvelope {
+    type: string;
+    timestamp: string;
+    data: JsonValue;
+}

package/dist/types-react/ui/App.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { type BaseLocationHook } from "wouter";
+import type { WebhooksConfig } from "./types.ts";
+declare global {
+    interface Window {
+        __WEBHOOKS_CONFIG__?: WebhooksConfig;
+    }
+}
+/**
+ * The dashboard, wrapped in a wouter {@link Router}. `locationHook` + `base` make
+ * routing pluggable: the bundled SPA uses browser history (clean paths, served by
+ * the handler's SPA catch-all), while the embeddable defaults to hash routing so
+ * it never touches the host app's router. Pass a custom hook (e.g. memory) to override.
+ */
+export declare function App({ locationHook, base, logoUrl, initialApplicationKey, }: {
+    locationHook?: BaseLocationHook;
+    base?: string;
+    /** Override the navbar logo image (otherwise taken from server `/config`). */
+    logoUrl?: string;
+    /** Pre-select an application when the URL doesn't name one (embed hosts). */
+    initialApplicationKey?: string;
+}): React.ReactElement;

package/dist/types-react/ui/api.d.ts

@@ -0,0 +1,97 @@
+import type { Application, AuditEntry, Delivery, DeliveryDetail, DeliveryStatus, EndpointSecret, EndpointSummary, EventType, JsonValue, Message, MessageDetail, PublishResponse, RecoverResponse, SendExampleResponse, SignedRequest, WebhooksConfig } from "./types.ts";
+/** The subset of `fetch` the client uses (the global `fetch` satisfies it). */
+export type FetchLike = (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>;
+/** Options for {@link setApiBase}. */
+export interface ApiClientOptions {
+    /** `credentials` mode for requests. Use `"include"` for cross-origin cookie auth. */
+    credentials?: RequestCredentials;
+    /** Custom fetch implementation (bearer tokens, extra headers, instrumentation). */
+    fetch?: FetchLike;
+}
+/** Point the API client at a base URL (used by the `@xtandard/webhooks/react` export). */
+export declare function setApiBase(base: string, opts?: ApiClientOptions): void;
+/** Attach a portal token (`whpt_…`) as a Bearer credential on every request. */
+export declare function setApiToken(token: string | null): void;
+export declare function getConfig(): Promise<WebhooksConfig>;
+export declare function listApplications(): Promise<Application[]>;
+export declare function createApplication(input: {
+    key: string;
+    name?: string;
+    metadata?: JsonValue;
+}): Promise<Application>;
+export declare function updateApplication(app: string, patch: {
+    name?: string;
+    metadata?: JsonValue;
+}): Promise<Application>;
+export declare function deleteApplication(app: string): Promise<{
+    ok: boolean;
+}>;
+export declare function listEventTypes(): Promise<EventType[]>;
+export declare function upsertEventType(input: EventType): Promise<EventType>;
+export declare function updateEventType(name: string, input: EventType): Promise<EventType>;
+export declare function deleteEventType(name: string): Promise<{
+    ok: boolean;
+}>;
+export interface EndpointInput {
+    url: string;
+    description?: string;
+    eventTypes?: string[];
+    headers?: Record<string, string>;
+    metadata?: JsonValue;
+    disabled?: boolean;
+}
+export declare function listEndpoints(app: string): Promise<EndpointSummary[]>;
+export declare function getEndpoint(app: string, id: string): Promise<EndpointSummary>;
+/** The one response carrying `secrets` — capture the signing secret now. */
+export declare function createEndpoint(app: string, input: EndpointInput): Promise<EndpointSummary & {
+    secrets: EndpointSecret[];
+}>;
+export declare function updateEndpoint(app: string, id: string, patch: Partial<Omit<EndpointInput, "disabled">>): Promise<EndpointSummary>;
+export declare function deleteEndpoint(app: string, id: string): Promise<{
+    ok: boolean;
+}>;
+export declare function getEndpointSecrets(app: string, id: string): Promise<EndpointSecret[]>;
+/** Rotation mints a secret the caller must capture — the response includes `secrets`. */
+export declare function rotateEndpointSecret(app: string, id: string): Promise<EndpointSummary & {
+    secrets: EndpointSecret[];
+}>;
+export declare function enableEndpoint(app: string, id: string): Promise<EndpointSummary>;
+export declare function disableEndpoint(app: string, id: string): Promise<EndpointSummary>;
+/** Fire a one-off signed test delivery through the real wire path. */
+export declare function sendExample(app: string, id: string, input: {
+    eventType: string;
+    payload?: JsonValue;
+}): Promise<SendExampleResponse>;
+/** Re-queue every failed delivery for the endpoint created at/after `since`. */
+export declare function recoverEndpoint(app: string, id: string, input: {
+    since: string;
+}): Promise<RecoverResponse>;
+export interface ListMessagesFilters {
+    eventType?: string;
+    before?: string;
+    limit?: number;
+}
+export declare function listMessages(app: string, filters?: ListMessagesFilters): Promise<Message[]>;
+export declare function getMessage(app: string, id: string): Promise<MessageDetail>;
+export declare function publishMessage(app: string, input: {
+    eventType: string;
+    payload: JsonValue;
+    timestamp?: string;
+    idempotencyKey?: string;
+}): Promise<PublishResponse>;
+export interface ListDeliveriesFilters {
+    status?: DeliveryStatus;
+    endpoint?: string;
+    before?: string;
+    limit?: number;
+}
+export declare function listDeliveries(app: string, filters?: ListDeliveriesFilters): Promise<Delivery[]>;
+export declare function getDelivery(app: string, id: string): Promise<DeliveryDetail>;
+/**
+ * The exact signed HTTP request this delivery sends. The signature and
+ * `webhook-timestamp` are computed live (each attempt re-signs).
+ */
+export declare function getDeliveryRequest(app: string, id: string): Promise<SignedRequest>;
+/** Re-queue a dead-lettered delivery (`failed` → `pending`, due immediately). */
+export declare function retryDelivery(app: string, id: string): Promise<Delivery>;
+export declare function listAudit(app: string): Promise<AuditEntry[]>;

package/dist/types-react/ui/components/JsonCodeEditor.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+/**
+ * A small controlled CodeMirror 6 editor for JSON. Syntax highlighting + line
+ * numbers + history; no autocomplete/lint (kept light). Reports raw text via
+ * `onChange`; the parent owns parsing/validation.
+ */
+export declare function JsonCodeEditor({ value, onChange, readOnly, placeholderText, }: {
+    value: string;
+    onChange: (text: string) => void;
+    readOnly?: boolean;
+    placeholderText?: string;
+}): React.JSX.Element;

package/dist/types-react/ui/components/ThemeToggle.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function ThemeToggle(): React.JSX.Element;

package/dist/types-react/ui/components/Toast.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export type ToastKind = "success" | "error" | "info" | "warning";
+export interface Toast {
+    id: string;
+    kind: ToastKind;
+    message: string;
+    detail?: string;
+}
+interface ToastContextValue {
+    add: (kind: ToastKind, message: string, detail?: string) => void;
+}
+export declare function useToast(): ToastContextValue;
+export declare function ToastProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export {};

package/dist/types-react/ui/components/primitives.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+export declare function ToggleSwitch({ checked, onCheckedChange, disabled, "aria-label": ariaLabel, }: {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled?: boolean;
+    "aria-label"?: string;
+}): React.JSX.Element;
+export interface SegmentOption<T extends string> {
+    value: T;
+    label: React.ReactNode;
+    "aria-label"?: string;
+}
+export declare function Segmented<T extends string>({ value, onValueChange, options, size, }: {
+    value: T;
+    onValueChange: (value: T) => void;
+    options: SegmentOption<T>[];
+    size?: "sm" | "md";
+}): React.JSX.Element;
+export interface DropdownOption {
+    value: string;
+    label: string;
+    description?: string;
+}
+export declare function Dropdown({ value, onValueChange, options, placeholder, disabled, className, "aria-label": ariaLabel, }: {
+    value: string;
+    onValueChange: (value: string) => void;
+    options: DropdownOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    "aria-label"?: string;
+}): React.JSX.Element;
+/**
+ * A single-select combobox that lets you pick an existing option **or type a new
+ * one** — when the typed text matches nothing, a "Create …" item appears and
+ * selecting it calls {@link onCreate}. Used for the project/environment switchers.
+ */
+export declare function CreatableCombobox({ value, options, onSelect, onCreate, placeholder, createLabel, disabled, className, "aria-label": ariaLabel, }: {
+    value: string;
+    options: string[];
+    onSelect: (value: string) => void;
+    onCreate: (value: string) => void;
+    placeholder?: string;
+    createLabel?: (query: string) => string;
+    disabled?: boolean;
+    className?: string;
+    "aria-label"?: string;
+}): React.JSX.Element;
+export declare const TextInput: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+export declare const TextArea: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/types-react/ui/components/ui-bits.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+type ButtonSize = "sm" | "md" | "icon";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    icon?: React.ReactNode;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare function Badge({ className, children }: {
+    className?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function Avatar({ initials, className }: {
+    initials: string;
+    className?: string;
+}): React.JSX.Element;
+export declare function Kbd({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export {};

package/dist/types-react/ui/components/webhook-bits.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+import type { DeliveryStatus } from "../types.ts";
+export declare function Spinner({ className }: {
+    className?: string;
+}): React.JSX.Element;
+export declare function LoadingRow({ label }: {
+    label: string;
+}): React.JSX.Element;
+export declare function DeliveryStatusBadge({ status }: {
+    status: DeliveryStatus;
+}): React.JSX.Element;
+/** Keys/ids render in JetBrains Mono per the design system. */
+export declare function Mono({ className, children }: {
+    className?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function PageHeader({ title, description, actions, }: {
+    title: string;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+}): React.JSX.Element;
+export declare function SectionCard({ title, description, children, className, }: {
+    title: string;
+    description?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+export declare function ModalDialog({ open, onClose, title, children, footer, wide, }: {
+    open: boolean;
+    onClose: () => void;
+    title: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    wide?: boolean;
+}): React.JSX.Element;
+export declare function ConfirmDialog({ open, onClose, onConfirm, title, confirmLabel, danger, loading, children, confirmDisabled, }: {
+    open: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: React.ReactNode;
+    confirmLabel: string;
+    danger?: boolean;
+    loading?: boolean;
+    children: React.ReactNode;
+    confirmDisabled?: boolean;
+}): React.JSX.Element;
+export declare function EmptyCard({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** Shown by app-scoped views when no application exists/is selected yet. */
+export declare function NoApplication(): React.JSX.Element;

package/dist/types-react/ui/lib/format.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Pure UI helpers — no React, no DOM. Unit-tested in `test/ui-lib.test.ts`
+ * (visual behavior is covered by the Playwright e2e suite instead).
+ *
+ * @module
+ */
+import type { DeliveryStatus, EventType } from "../types.ts";
+/** Absolute date-time, locale-aware. Returns `"—"` for missing/invalid input. */
+export declare function formatDateTime(iso: string | undefined | null): string;
+/**
+ * Compact relative time: `"just now"`, `"5m ago"`, `"in 2h"`, `"3d ago"`.
+ * `now` is injectable for tests; defaults to the current time.
+ */
+export declare function relativeTime(iso: string | undefined | null, now?: number): string;
+/** Attempt duration: `"87 ms"` below a second, `"1.25 s"` above. */
+export declare function formatDurationMs(ms: number | undefined | null): string;
+/** Human label for a delivery status (`failed` reads as the dead-letter state). */
+export declare function deliveryStatusLabel(status: DeliveryStatus): string;
+/** Tailwind classes for a delivery-status badge (flags badge tone conventions). */
+export declare function deliveryStatusTone(status: DeliveryStatus): string;
+/** Truncate with an ellipsis; never longer than `max` (including the ellipsis). */
+export declare function truncate(text: string, max: number): string;
+/**
+ * Append the app-scoped query string to an in-app path, preserving existing
+ * params on the path. `""` app (portal mode) leaves the path untouched.
+ */
+export declare function withAppQuery(path: string, app: string): string;
+/**
+ * Group an event-type catalog by `groupName`, ungrouped last. Groups sorted by
+ * name; entries keep catalog (name) order within a group.
+ */
+export declare function groupEventTypes(catalog: EventType[]): {
+    group: string;
+    types: EventType[];
+}[];
+/** Success rate in percent over terminal deliveries; `null` when there are none. */
+export declare function successRate(succeeded: number, failed: number): number | null;
+/** True when `iso` falls within the last `windowMs` before `now`. */
+export declare function withinWindow(iso: string | undefined | null, windowMs: number, now?: number): boolean;

package/dist/types-react/ui/lib/nav-guard.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A tiny process-wide navigation guard. A view with unsaved edits registers a
+ * blocker; the app's in-app navigation (tabs, project/env switch, opening another
+ * flag) calls {@link canLeave} first and aborts if the blocker says no.
+ *
+ * wouter has no built-in navigation blocker, so this bridges the dirty view to the
+ * navigation entry points without prop-drilling. Single active blocker (only one
+ * editor is open at a time).
+ *
+ * @module
+ */
+/** Returns `true` if navigation is allowed, `false` to block it (e.g. user cancelled). */
+type Blocker = () => boolean;
+/** Register the current blocker (replaces any previous one). */
+export declare function setNavBlocker(blocker: Blocker): void;
+/** Clear `blocker` if it is still the active one (safe from stale cleanups). */
+export declare function clearNavBlocker(blocker: Blocker): void;
+/** Consult the active blocker. `true` when navigation may proceed. */
+export declare function canLeave(): boolean;
+export {};