@xtandard/webhooks 0.1.3 → 0.1.4

package/dist/testing.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_core = require("./core-DkIXozBY.cjs");
+const require_core = require("./core-FOX5QhoI.cjs");
 const require_signing = require("./signing.cjs");
-const require_dispatcher = require("./dispatcher-Bn4O874S.cjs");
+const require_dispatcher = require("./dispatcher-Dw8nhSxY.cjs");
 const require_memory = require("./memory-8Ef-PL5a.cjs");
 let node_http = require("node:http");
 //#region src/testing.ts

package/dist/testing.mjs

@@ -1,6 +1,6 @@
-import { o as createWebhooksCore } from "./core-tmmtadF1.mjs";
+import { o as createWebhooksCore } from "./core-CSnkgzmP.mjs";
 import { verify } from "./signing.mjs";
-import { n as createDispatcher } from "./dispatcher-CQcoIsS9.mjs";
+import { n as createDispatcher } from "./dispatcher-DIcpJOU0.mjs";
 import { t as createMemoryStorage } from "./memory-BMsSSwqn.mjs";
 import { createServer } from "node:http";
 //#region src/testing.ts

package/dist/types-elysia2/version.d.ts

@@ -5,4 +5,4 @@
  * @module
  */
 /** The published package version. */
-export declare const VERSION = "0.1.3";
+export declare const VERSION = "0.1.4";

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

@@ -27,6 +27,8 @@ import type { BaseLocationHook } from "wouter";
 import { QueryClient } from "@tanstack/react-query";
 import { type FetchLike } from "./ui/api.ts";
 import "./ui/styles.css";
+/** Theme modes for the embedded components (see {@link WebhooksDashboardProps.theme}). */
+export type EmbedTheme = "auto" | "inherit" | "light" | "dark";
 /** Props for {@link WebhooksDashboard}. */
 export interface WebhooksDashboardProps {
     /**
@@ -48,8 +50,19 @@ export interface WebhooksDashboardProps {
     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";
+    /**
+     * Theme handling. The embed never writes to the host document — it resolves a
+     * theme and applies it to its own wrapper (`data-theme`), so surfaces, text,
+     * borders and code views always come from one theme.
+     * - `"auto"` (default) — the panel's own system/light/dark switcher (preference
+     *   persisted in localStorage).
+     * - `"inherit"` — follow the host page, live: a `dark`/`light` class or
+     *   `data-theme` attribute on `<html>` (then `<body>`), falling back to the OS
+     *   `prefers-color-scheme`. The switcher is hidden; the host owns the theme.
+     * - `"light"` / `"dark"` — force one theme (switcher hidden). Useful when the
+     *   host tracks its theme some other way: pass its resolved value.
+     */
+    theme?: EmbedTheme;
     /** Extra className on the dashboard root wrapper. */
     className?: string;
     /**
@@ -94,5 +107,5 @@ export declare function WebhooksDashboard({ apiBaseUrl, credentials, fetch: fetc
  */
 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 { setThemePref, getThemePref, detectHostTheme, type ThemePref, type ResolvedTheme, } from "./ui/theme.ts";
 export default WebhooksDashboard;

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

@@ -12,11 +12,13 @@ declare global {
  * 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, }: {
+export declare function App({ locationHook, base, logoUrl, initialApplicationKey, showThemeToggle, }: {
     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;
+    /** Show the system/light/dark switcher. Off when an embedding host owns the theme. */
+    showThemeToggle?: boolean;
 }): React.ReactElement;

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

@@ -1,12 +1,40 @@
 /**
- * Theme preference: `system` (follows the OS), `light`, or `dark`. The resolved
- * value is written to `<html data-theme>`; the preference is persisted in
- * localStorage. `system` live-updates when the OS scheme changes.
+ * Theme preference: `system` (follows the OS), `light`, or `dark`. The
+ * preference is persisted in localStorage; `system` live-updates when the OS
+ * scheme changes.
+ *
+ * The standalone SPA writes the resolved theme to `<html data-theme>` (see
+ * {@link initTheme}). The React embed never touches the host document: it puts
+ * `data-theme` on its own wrapper, either from this preference (`theme="auto"`)
+ * or from the host page's theme ({@link detectHostTheme}, `theme="inherit"`).
  */
 export type ThemePref = "system" | "light" | "dark";
+/** A concrete, resolved theme. */
+export type ResolvedTheme = "light" | "dark";
 export declare function getThemePref(): ThemePref;
 /** The concrete theme a preference resolves to right now. */
-export declare function resolveTheme(pref: ThemePref): "light" | "dark";
+export declare function resolveTheme(pref: ThemePref): ResolvedTheme;
+/** Persist a preference and notify subscribers (the SPA root, embedded dashboards). */
 export declare function setThemePref(pref: ThemePref): void;
-/** Apply the stored preference and keep `system` in sync with the OS. Call once at boot. */
+/** Subscribe to preference changes made via {@link setThemePref}. Returns an unsubscribe. */
+export declare function subscribeThemePref(listener: (pref: ThemePref) => void): () => void;
+/** Subscribe to OS color-scheme changes. Returns an unsubscribe. */
+export declare function subscribeSystemTheme(listener: () => void): () => void;
+/**
+ * Standalone SPA: apply the stored preference to `<html data-theme>`, follow
+ * later changes, and keep `system` in sync with the OS. Call once at boot.
+ */
 export declare function initTheme(): void;
+/**
+ * The host page's theme, for `theme="inherit"`: a `dark`/`light` class or
+ * `data-theme` attribute on `<html>` (then `<body>`) — the conventions used by
+ * class- and attribute-based theme switchers — falling back to the OS
+ * `prefers-color-scheme` when the host sets neither.
+ */
+export declare function detectHostTheme(): ResolvedTheme;
+/**
+ * Call `listener` whenever the host page's theme may have changed: `class` /
+ * `data-theme` / `style` mutations on `<html>` or `<body>`, or an OS scheme
+ * change. Returns an unsubscribe.
+ */
+export declare function watchHostTheme(listener: () => void): () => void;