@nsxbet/admin-sdk 0.5.1 → 0.6.0

package/dist/router/DynamicModule.d.ts

@@ -1,4 +1,6 @@
-import { Component, type ReactNode } from "react";
+import { type ReactNode } from "react";
+import { ModuleErrorBoundary } from "./ModuleErrorBoundary";
+import type { ModuleInfo } from "./ModuleErrorBoundary";
 interface DynamicModuleProps {
     /** Base URL where the module is hosted (e.g., "http://localhost:5001") */
     baseUrl: string;
@@ -8,30 +10,13 @@ interface DynamicModuleProps {
     fallback?: ReactNode;
     /** Custom error fallback */
     errorFallback?: ReactNode;
+    /** Module metadata for error boundary ownership display */
+    moduleInfo: ModuleInfo;
 }
 /**
  * Loading spinner shown while module is being fetched
  */
 declare function ModuleLoading(): import("react/jsx-runtime").JSX.Element;
-/**
- * Error boundary for catching module load errors
- */
-interface ErrorBoundaryProps {
-    children: ReactNode;
-    fallback?: ReactNode;
-    onRetry?: () => void;
-}
-interface ErrorBoundaryState {
-    hasError: boolean;
-    error?: Error;
-}
-declare class ModuleErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-    constructor(props: ErrorBoundaryProps);
-    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
-    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
-    handleRetry: () => void;
-    render(): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
-}
 /**
  * DynamicModule - Loads a module from a URL using React.lazy
  *
@@ -45,6 +30,5 @@ declare class ModuleErrorBoundary extends Component<ErrorBoundaryProps, ErrorBou
  * <DynamicModule baseUrl="http://localhost:5001" />
  * ```
  */
-export declare function DynamicModule({ baseUrl, globalName, fallback, errorFallback, }: DynamicModuleProps): import("react/jsx-runtime").JSX.Element;
+export declare function DynamicModule({ baseUrl, globalName, fallback, errorFallback, moduleInfo, }: DynamicModuleProps): import("react/jsx-runtime").JSX.Element;
 export { ModuleLoading, ModuleErrorBoundary };
-//# sourceMappingURL=DynamicModule.d.ts.map

package/dist/router/DynamicModule.js

@@ -1,48 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useMemo, Component } from "react";
-import { Icon, Card, CardContent, Button } from "@nsxbet/admin-ui";
+import { Suspense, lazy, useMemo, useCallback, useState } from "react";
+import { Icon } from "@nsxbet/admin-ui";
+import { useTranslation } from "react-i18next";
+import { validateModuleUrl } from "./url-allowlist";
+import { ModuleErrorBoundary } from "./ModuleErrorBoundary";
+import { trackError } from "../shell/telemetry";
 /**
  * Loading spinner shown while module is being fetched
  */
 function ModuleLoading() {
     return (_jsxs("div", { "data-testid": "module-loading", className: "flex flex-col items-center justify-center h-full min-h-[300px] gap-4", children: [_jsx("div", { className: "inline-flex p-4 rounded-full bg-primary/10", children: _jsx(Icon, { name: "loader-2", className: "h-8 w-8 text-primary animate-spin" }) }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-lg font-medium", children: "Loading module..." }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Please wait while the module is being loaded" })] })] }));
 }
-class ModuleErrorBoundary extends Component {
-    constructor(props) {
-        super(props);
-        Object.defineProperty(this, "handleRetry", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                this.setState({ hasError: false, error: undefined });
-                this.props.onRetry?.();
-            }
-        });
-        this.state = { hasError: false };
-    }
-    static getDerivedStateFromError(error) {
-        return { hasError: true, error };
-    }
-    componentDidCatch(error, errorInfo) {
-        console.error("[DynamicModule] Failed to load module:", error, errorInfo);
-    }
-    render() {
-        if (this.state.hasError) {
-            if (this.props.fallback) {
-                return this.props.fallback;
-            }
-            const errorMessage = this.state.error?.message || "An unexpected error occurred";
-            const isNetworkError = errorMessage.includes("Failed to fetch") ||
-                errorMessage.includes("NetworkError") ||
-                errorMessage.includes("Failed to load script");
-            return (_jsx("div", { "data-testid": "module-error", className: "flex items-center justify-center h-full min-h-[300px] p-6", children: _jsx(Card, { className: "max-w-md w-full", children: _jsx(CardContent, { className: "pt-6", children: _jsxs("div", { className: "flex flex-col items-center text-center gap-4", children: [_jsx("div", { className: "inline-flex p-4 rounded-full bg-destructive/10", children: _jsx(Icon, { name: isNetworkError ? "wifi-off" : "alert-triangle", className: "h-8 w-8 text-destructive" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-1", children: isNetworkError ? "Module Unavailable" : "Failed to Load Module" }), _jsx("p", { className: "text-sm text-muted-foreground mb-2", children: isNetworkError
-                                                ? "The module server is not responding. Please ensure the module is running."
-                                                : "An error occurred while loading the module." }), _jsx("p", { className: "text-xs font-mono text-muted-foreground bg-muted p-2 rounded break-all", children: errorMessage })] }), _jsx("div", { className: "flex gap-2", children: _jsxs(Button, { "data-testid": "module-retry-button", onClick: this.handleRetry, variant: "default", children: [_jsx(Icon, { name: "refresh-cw", className: "h-4 w-4 mr-2" }), "Try Again"] }) }), isNetworkError && (_jsx("p", { className: "text-xs text-muted-foreground", children: "Tip: Run the module dev server or check your network connection." }))] }) }) }) }));
-        }
-        return this.props.children;
-    }
-}
 /**
  * Load a script and return the global it exposes
  */
@@ -102,28 +70,37 @@ async function fetchModuleEntry(baseUrl) {
  * <DynamicModule baseUrl="http://localhost:5001" />
  * ```
  */
-export function DynamicModule({ baseUrl, globalName, fallback, errorFallback, }) {
-    // Normalize baseUrl (remove trailing slash)
+export function DynamicModule({ baseUrl, globalName, fallback, errorFallback, moduleInfo, }) {
+    const { t, i18n } = useTranslation("shell");
     const normalizedUrl = baseUrl.endsWith("/") ? baseUrl.slice(0, -1) : baseUrl;
-    // Create lazy component - memoized to avoid re-creating on every render
+    const [retryCount, setRetryCount] = useState(0);
+    const handleError = useCallback((error, meta) => {
+        trackError(error, {
+            moduleId: meta.moduleId,
+            ownerTeam: meta.ownerTeam,
+            errorType: meta.errorType,
+        });
+    }, []);
+    const handleRetry = useCallback(() => {
+        setRetryCount((c) => c + 1);
+    }, []);
+    // retryCount in deps forces a fresh lazy() instance, bypassing React.lazy's cached rejection
     const ModuleComponent = useMemo(() => lazy(async () => {
         try {
-            // Step 1: Fetch manifest to get entry path
+            const manifestUrl = `${normalizedUrl}/module.manifest.json`;
+            validateModuleUrl(manifestUrl);
             const entry = await fetchModuleEntry(normalizedUrl);
-            // Step 2: Load the module
             const moduleUrl = `${normalizedUrl}/${entry}`;
+            validateModuleUrl(moduleUrl);
             console.log(`[DynamicModule] Loading module from ${moduleUrl}`);
             let moduleExport;
             if (globalName) {
-                // IIFE format: load script and get global
                 moduleExport = await loadScript(moduleUrl, globalName);
             }
             else {
-                // ES module format: use dynamic import
                 moduleExport = await import(/* @vite-ignore */ moduleUrl);
             }
             console.log(`[DynamicModule] Module loaded successfully`);
-            // Handle both default export and direct component
             const mod = moduleExport;
             const Component = (mod.default || mod.App || mod);
             if (typeof Component !== "function") {
@@ -135,7 +112,7 @@ export function DynamicModule({ baseUrl, globalName, fallback, errorFallback, })
             console.error(`[DynamicModule] Failed to load module:`, error);
             throw error;
         }
-    }), [normalizedUrl, globalName]);
-    return (_jsx(ModuleErrorBoundary, { fallback: errorFallback, children: _jsx(Suspense, { fallback: fallback ?? _jsx(ModuleLoading, {}), children: _jsx(ModuleComponent, {}) }) }));
+    }), [normalizedUrl, globalName, retryCount]);
+    return (_jsx(ModuleErrorBoundary, { fallback: errorFallback, moduleInfo: moduleInfo, onError: handleError, onRetry: handleRetry, locale: i18n.language, t: (key) => t(key), children: _jsx(Suspense, { fallback: fallback ?? _jsx(ModuleLoading, {}), children: _jsx(ModuleComponent, {}) }) }));
 }
 export { ModuleLoading, ModuleErrorBoundary };

package/dist/router/ModuleErrorBoundary.d.ts

@@ -0,0 +1,39 @@
+import { Component, type ReactNode } from "react";
+import type { LocalizedField } from "../i18n/config.js";
+export interface ModuleInfo {
+    id: string;
+    title: LocalizedField;
+    owners: {
+        team: string;
+        supportChannel: string;
+    };
+}
+export interface ErrorBoundaryProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+    onRetry?: () => void;
+    moduleInfo?: ModuleInfo;
+    onError?: (error: unknown, meta: {
+        errorType: "render" | "unhandledRejection";
+        moduleId?: string;
+        ownerTeam?: string;
+    }) => void;
+    locale?: string;
+    t?: (key: string) => string;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error?: Error;
+}
+declare class ModuleErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    private handleUnhandledRejection;
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    handleRetry: () => void;
+    handleReload: () => void;
+    render(): ReactNode;
+}
+export { ModuleErrorBoundary };

package/dist/router/ModuleErrorBoundary.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from "react";
+import { Icon, Card, CardContent, Button } from "@nsxbet/admin-ui";
+function resolveTitle(title, locale) {
+    if (!title || typeof title !== "object")
+        return "";
+    const resolved = title[locale];
+    if (typeof resolved === "string")
+        return resolved;
+    return title["en-US"] ?? Object.values(title)[0] ?? "";
+}
+function isUrl(value) {
+    return value.startsWith("http://") || value.startsWith("https://");
+}
+function SupportChannelDisplay({ channel }) {
+    if (isUrl(channel)) {
+        return (_jsx("a", { href: channel, target: "_blank", rel: "noopener noreferrer", className: "text-primary underline underline-offset-2 hover:text-primary/80", children: channel }));
+    }
+    if (channel.startsWith("#")) {
+        return (_jsx("span", { className: "inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 font-mono text-xs", children: channel }));
+    }
+    return _jsx("span", { children: channel });
+}
+class ModuleErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "handleUnhandledRejection", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "handleRetry", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.setState({ hasError: false, error: undefined });
+                this.props.onRetry?.();
+            }
+        });
+        Object.defineProperty(this, "handleReload", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                window.location.reload();
+            }
+        });
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidMount() {
+        this.handleUnhandledRejection = (event) => {
+            this.props.onError?.(event.reason, {
+                errorType: "unhandledRejection",
+                moduleId: this.props.moduleInfo?.id,
+                ownerTeam: this.props.moduleInfo?.owners.team,
+            });
+        };
+        window.addEventListener("unhandledrejection", this.handleUnhandledRejection);
+    }
+    componentWillUnmount() {
+        if (this.handleUnhandledRejection) {
+            window.removeEventListener("unhandledrejection", this.handleUnhandledRejection);
+            this.handleUnhandledRejection = null;
+        }
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error("[DynamicModule] Failed to load module:", error, errorInfo);
+        this.props.onError?.(error, {
+            errorType: "render",
+            moduleId: this.props.moduleInfo?.id,
+            ownerTeam: this.props.moduleInfo?.owners.team,
+        });
+    }
+    render() {
+        if (this.state.hasError) {
+            if (this.props.fallback) {
+                return this.props.fallback;
+            }
+            const { moduleInfo, locale = "en-US", t } = this.props;
+            const errorMessage = this.state.error?.message || "An unexpected error occurred";
+            const isNetworkError = errorMessage.includes("Failed to fetch") ||
+                errorMessage.includes("NetworkError") ||
+                errorMessage.includes("Failed to load script");
+            const moduleTitle = moduleInfo ? resolveTitle(moduleInfo.title, locale) : undefined;
+            const showOwnership = moduleInfo && moduleInfo.owners.team;
+            const label = (key, fallback) => (t ? t(key) : fallback);
+            return (_jsx("div", { "data-testid": "module-error", className: "flex items-center justify-center h-full min-h-[300px] p-6", children: _jsxs("div", { className: "max-w-lg w-full space-y-6", children: [_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "shrink-0 mt-0.5 inline-flex p-3 rounded-xl bg-destructive/10", children: _jsx(Icon, { name: isNetworkError ? "wifi-off" : "alert-triangle", className: "h-6 w-6 text-destructive" }) }), _jsxs("div", { className: "space-y-1 min-w-0", children: [_jsx("h3", { className: "text-base font-semibold leading-tight", children: isNetworkError
+                                                ? label("moduleError.networkTitle", "Module Unavailable")
+                                                : label("moduleError.title", "Failed to Load Module") }), _jsx("p", { className: "text-sm text-muted-foreground leading-relaxed", children: isNetworkError
+                                                ? label("moduleError.networkDescription", "The module server is not responding. Please ensure the module is running.")
+                                                : label("moduleError.description", "An error occurred while loading the module.") })] })] }), showOwnership && (_jsx(Card, { className: "bg-muted/40 border-border/50", children: _jsxs(CardContent, { className: "p-4 space-y-3", children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: label("moduleError.contactHeading", "Report this issue") }), _jsxs("div", { className: "space-y-2", children: [moduleTitle && (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Icon, { name: "box", className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }), _jsx("span", { className: "font-medium truncate", children: moduleTitle })] })), _jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Icon, { name: "users", className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }), _jsxs("span", { className: "text-muted-foreground", children: [label("moduleError.ownerTeam", "Owner"), ":"] }), _jsx("span", { children: moduleInfo.owners.team })] }), moduleInfo.owners.supportChannel && (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Icon, { name: "message-circle", className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }), _jsxs("span", { className: "text-muted-foreground", children: [label("moduleError.supportChannel", "Support"), ":"] }), _jsx(SupportChannelDisplay, { channel: moduleInfo.owners.supportChannel })] }))] })] }) })), _jsx("div", { className: "rounded-lg border border-border/50 bg-muted/30 px-3 py-2", children: _jsx("p", { className: "text-xs font-mono text-muted-foreground break-all", children: errorMessage }) }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs(Button, { "data-testid": "module-retry-button", onClick: this.handleRetry, variant: "default", size: "sm", children: [_jsx(Icon, { name: "refresh-cw", className: "h-3.5 w-3.5 mr-1.5" }), label("moduleError.retry", "Try Again")] }), _jsxs(Button, { "data-testid": "module-reload-button", onClick: this.handleReload, variant: "ghost", size: "sm", children: [_jsx(Icon, { name: "rotate-cw", className: "h-3.5 w-3.5 mr-1.5" }), label("moduleError.reload", "Reload Page")] })] })] }) }));
+        }
+        return this.props.children;
+    }
+}
+export { ModuleErrorBoundary };

package/dist/router/index.d.ts

@@ -1,2 +1,2 @@
 export { DynamicModule, ModuleLoading, ModuleErrorBoundary } from "./DynamicModule";
-//# sourceMappingURL=index.d.ts.map
+export type { ModuleInfo, ErrorBoundaryProps } from "./ModuleErrorBoundary";

package/dist/router/url-allowlist.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Module URL allowlist validation
+ *
+ * Validates module URLs against VITE_ALLOWED_MODULE_ORIGINS before
+ * import() or loadScript() to prevent loading code from untrusted origins.
+ */
+/** Options for validateModuleUrl (used by tests to override env) */
+export interface ValidateModuleUrlOptions {
+    /** Override allowlist (comma-separated patterns). Default: VITE_ALLOWED_MODULE_ORIGINS */
+    allowlist?: string;
+    /** Override dev mode. Default: import.meta.env.DEV */
+    isDev?: boolean;
+}
+/**
+ * Validate that a module URL is allowed before loading.
+ * Throws with a descriptive error if validation fails.
+ *
+ * @param url - Full module URL (e.g. https://cdn.example.com/spa.js)
+ * @param options - Optional overrides for testing (uses env vars when omitted)
+ * @throws Error if URL is malformed, non-HTTP, or hostname not in allowlist
+ */
+export declare function validateModuleUrl(url: string, options?: ValidateModuleUrlOptions): void;

package/dist/router/url-allowlist.js

@@ -0,0 +1,65 @@
+/**
+ * Module URL allowlist validation
+ *
+ * Validates module URLs against VITE_ALLOWED_MODULE_ORIGINS before
+ * import() or loadScript() to prevent loading code from untrusted origins.
+ */
+/**
+ * Parse allowlist patterns from comma-separated string.
+ * Format: comma-separated patterns supporting *.domain wildcard.
+ */
+function getAllowlistPatterns(raw) {
+    if (typeof raw !== 'string' || raw.trim() === '') {
+        return [];
+    }
+    return raw.split(',').map((p) => p.trim()).filter(Boolean);
+}
+/**
+ * Check if hostname matches a pattern (exact or *.domain wildcard).
+ * For *.domain: matches apex (domain) and any subdomain (*.domain).
+ */
+function hostnameMatchesPattern(hostname, pattern) {
+    if (pattern.startsWith('*.')) {
+        const suffix = pattern.slice(1); // e.g. ".nsx.dev"
+        const apex = pattern.slice(2); // e.g. "nsx.dev"
+        return hostname === apex || hostname.endsWith(suffix);
+    }
+    return hostname === pattern;
+}
+/**
+ * Validate that a module URL is allowed before loading.
+ * Throws with a descriptive error if validation fails.
+ *
+ * @param url - Full module URL (e.g. https://cdn.example.com/spa.js)
+ * @param options - Optional overrides for testing (uses env vars when omitted)
+ * @throws Error if URL is malformed, non-HTTP, or hostname not in allowlist
+ */
+export function validateModuleUrl(url, options) {
+    let parsed;
+    try {
+        parsed = new URL(url);
+    }
+    catch {
+        throw new Error(`[DynamicModule] Invalid module URL: "${url}" is not a valid URL`);
+    }
+    const protocol = parsed.protocol;
+    if (protocol !== 'http:' && protocol !== 'https:') {
+        throw new Error(`[DynamicModule] Module URL must use http: or https: protocol. Got: ${protocol}`);
+    }
+    const hostname = parsed.hostname;
+    const isDev = options?.isDev ?? import.meta.env.DEV === true;
+    const rawAllowlist = options?.allowlist ?? import.meta.env.VITE_ALLOWED_MODULE_ORIGINS;
+    // Dev mode: always allow localhost and 127.0.0.1
+    if (isDev && (hostname === 'localhost' || hostname === '127.0.0.1')) {
+        return;
+    }
+    const patterns = getAllowlistPatterns(rawAllowlist);
+    if (patterns.length === 0) {
+        throw new Error(`[DynamicModule] Module URL "${url}" rejected: VITE_ALLOWED_MODULE_ORIGINS is not set or empty. ` +
+            'Configure trusted origins (e.g. *.nsx.dev,*.nsx.services) in your environment.');
+    }
+    const allowed = patterns.some((p) => hostnameMatchesPattern(hostname, p));
+    if (!allowed) {
+        throw new Error(`[DynamicModule] Module URL "${url}" rejected: hostname "${hostname}" is not in allowlist [${patterns.join(', ')}]`);
+    }
+}

package/dist/shell/AdminShell.d.ts

@@ -35,4 +35,3 @@ export interface AdminShellProps {
     environment?: string;
 }
 export declare function AdminShell({ modules: manifests, children, keycloak, authClient: providedAuthClient, registryClient, apiUrl, inMemoryRegistry, environment, }: AdminShellProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=AdminShell.d.ts.map