@ovineko/spa-guard 0.0.2-alpha-0 → 0.0.3-alpha-0

package/README.md

@@ -92,9 +92,12 @@ The orchestrator serializes state into URL params for cross-reload continuity:
 
 When `options.html.loading.content` is configured, `showLoadingUI(attempt)` is called before the reload timer fires. It injects the loading HTML into the target element (selector from `options.html.fallback.selector`, defaulting to `body`), reveals the `data-spa-guard-section="retrying"` element, fills attempt numbers into `[data-spa-guard-content="attempt"]` elements, applies i18n via `applyI18n`/`getI18n`, and optionally hides or replaces the spinner based on `options.html.spinner`. If loading content is not configured or the target element is not found, `showLoadingUI` returns silently — the retry still proceeds normally.
 
+Default fallback/loading templates are theme-aware: they set `color-scheme: light dark` and apply neutral dark colors automatically via `@media (prefers-color-scheme: dark)`.
+
 ### Unhandledrejection serialization
 
 `serializeError` handles `PromiseRejectionEvent` with strict redaction guardrails. For HTTP-like errors it extracts only safe metadata: `status`, `statusText`, `url`, `method`, `response.type`, and `X-Request-ID` from response headers when present. Response body, request/response payload, and the full headers object are **never** included in serialized output. For request wrappers (`reason.request` / `reason.config`) only `method`, `url`, and `baseURL` are extracted. Deep object traversal is bounded by `MAX_DEPTH=4`, `MAX_KEYS=20`, and `MAX_STRING_LEN=500` to prevent oversized beacons. Circular references are handled via a `WeakSet` visited tracker. The output also includes `isTrusted`, `timeStamp` from the event, and runtime context (`pageUrl`, `constructorName`).
+This HTTP-like extraction also applies to `Error` subclasses that carry a `response` field (for example `ResponseError`), not only to plain objects.
 
 ### Retry reset
 

package/dist/_internal.js

@@ -3,13 +3,13 @@ import {
   isChunkError,
   listenInternal,
   serializeError
-} from "./chunk-4K3AQHLC.js";
+} from "./chunk-XIFXSNSD.js";
 import {
   SPINNER_ID,
   defaultSpinnerSvg,
   extractVersionFromHtml,
   sanitizeCssValue
-} from "./chunk-T42DLOQP.js";
+} from "./chunk-3UJ67DPX.js";
 import {
   dispatchAsyncRuntimeError,
   dispatchChunkLoadError,
@@ -18,7 +18,7 @@ import {
   dispatchNetworkTimeout,
   dispatchSyncRuntimeError,
   dispatchUnhandledRejection
-} from "./chunk-ORYUDYHU.js";
+} from "./chunk-PERG4557.js";
 import {
   applyI18n,
   debugSyncErrorEventType,
@@ -40,7 +40,7 @@ import {
   shouldIgnoreMessages,
   subscribe,
   triggerRetry
-} from "./chunk-LIKSIU75.js";
+} from "./chunk-GE63YJOT.js";
 import "./chunk-MLKGABMK.js";
 
 // src/common/handleErrorWithSpaGuard.ts

package/dist/{chunk-T42DLOQP.js → chunk-3UJ67DPX.js}

@@ -2,7 +2,7 @@ import {
   defaultSpinnerHtml,
   getOptions,
   spinnerStateWindowKey
-} from "./chunk-LIKSIU75.js";
+} from "./chunk-GE63YJOT.js";
 
 // src/common/parseVersion.ts
 function extractVersionFromHtml(html) {

package/dist/{chunk-LIKSIU75.js → chunk-GE63YJOT.js}

@@ -135,8 +135,8 @@ function setTranslations(translations) {
 }
 
 // src/common/html.generated.ts
-var defaultErrorFallbackHtml = `<style>.spa-guard-error-id:has(.spa-guard-retry-id:empty){display:none}.spa-guard-error-id{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace}</style><div style="display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;font-family:system-ui,sans-serif"><div style="text-align:center;max-width:480px"><div style="margin-bottom:1.5rem"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 24 24" stroke="#b0b0b0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div><h1 data-spa-guard-content="heading" style="font-size:1.375rem;font-weight:600;margin:0 0 .5rem;color:#1a1a1a;line-height:1.3">Something went wrong</h1><p data-spa-guard-content="message" style="max-width:600px;margin:0 auto 1.5rem;color:#666;font-size:.9375rem;line-height:1.5">Please refresh the page to continue.</p><div style="display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap"><button data-spa-guard-action="try-again" type="button" style="display:none;padding:.5rem 1.25rem;font-size:.875rem;font-family:inherit;border-radius:6px;border:1px solid #d0d0d0;background:#fff;color:#333;cursor:pointer;line-height:1.5">Try again</button> <button data-spa-guard-action="reload" type="button" style="padding:.5rem 1.25rem;font-size:.875rem;font-family:inherit;border-radius:6px;border:1px solid transparent;background:#111;color:#fff;cursor:pointer;line-height:1.5">Reload page</button></div><p class="spa-guard-error-id" style="margin-top:1.5rem;font-size:.6875rem;color:#999">Error ID: <span class="spa-guard-retry-id"></span></p></div></div>`;
-var defaultLoadingFallbackHtml = `<div style="display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;font-family:system-ui,sans-serif"><div style="text-align:center"><div data-spa-guard-spinner style="margin-bottom:1.25rem"></div><h2 data-spa-guard-content="loading" style="font-size:1.125rem;font-weight:600;margin:0 0 .25rem;color:#1a1a1a">Loading...</h2><p data-spa-guard-section="retrying" style="display:none;font-size:.8125rem;color:#999;margin:.5rem 0 0"><span data-spa-guard-content="retrying">Retry attempt</span> <span data-spa-guard-content="attempt"></span></p></div></div>`;
+var defaultErrorFallbackHtml = `<style>.spa-guard-error-id:has(.spa-guard-retry-id:empty){display:none}.spa-guard-error-id{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace}.spa-guard-fallback-root{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;font-family:system-ui,sans-serif;background:#fff;color:#1a1a1a;color-scheme:light dark}.spa-guard-fallback-icon{stroke:#b0b0b0}.spa-guard-fallback-message{color:#666}.spa-guard-fallback-muted{color:#999}.spa-guard-btn-secondary{border:1px solid #d0d0d0;background:#fff;color:#333}.spa-guard-btn-primary{border:1px solid transparent;background:#111;color:#fff}@media (prefers-color-scheme:dark){.spa-guard-fallback-root{background:#111318;color:#e7eaf0}.spa-guard-fallback-icon{stroke:#8b95a7}.spa-guard-fallback-message{color:#b8bfca}.spa-guard-fallback-muted{color:#8b95a7}.spa-guard-btn-secondary{border-color:#3b4351;background:#1a1f28;color:#d8deea}.spa-guard-btn-primary{background:#e7eaf0;color:#151922}}</style><div class="spa-guard-fallback-root"><div style="text-align:center;max-width:480px"><div style="margin-bottom:1.5rem"><svg class="spa-guard-fallback-icon" xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div><h1 data-spa-guard-content="heading" style="font-size:1.375rem;font-weight:600;margin:0 0 .5rem;line-height:1.3">Something went wrong</h1><p data-spa-guard-content="message" class="spa-guard-fallback-message" style="max-width:600px;margin:0 auto 1.5rem;font-size:.9375rem;line-height:1.5">Please refresh the page to continue.</p><div style="display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap"><button data-spa-guard-action="try-again" type="button" class="spa-guard-btn-secondary" style="display:none;padding:.5rem 1.25rem;font-size:.875rem;font-family:inherit;border-radius:6px;cursor:pointer;line-height:1.5">Try again</button> <button data-spa-guard-action="reload" type="button" class="spa-guard-btn-primary" style="padding:.5rem 1.25rem;font-size:.875rem;font-family:inherit;border-radius:6px;cursor:pointer;line-height:1.5">Reload page</button></div><p class="spa-guard-error-id spa-guard-fallback-muted" style="margin-top:1.5rem;font-size:.6875rem">Error ID: <span class="spa-guard-retry-id"></span></p></div></div>`;
+var defaultLoadingFallbackHtml = `<style>.spa-guard-loading-root{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;font-family:system-ui,sans-serif;background:#fff;color:#1a1a1a;color-scheme:light dark}.spa-guard-loading-muted{color:#999}@media (prefers-color-scheme:dark){.spa-guard-loading-root{background:#111318;color:#e7eaf0}.spa-guard-loading-muted{color:#8b95a7}}</style><div class="spa-guard-loading-root"><div style="text-align:center"><div data-spa-guard-spinner style="margin-bottom:1.25rem"></div><h2 data-spa-guard-content="loading" style="font-size:1.125rem;font-weight:600;margin:0 0 .25rem">Loading...</h2><p data-spa-guard-section="retrying" class="spa-guard-loading-muted" style="display:none;font-size:.8125rem;margin:.5rem 0 0"><span data-spa-guard-content="retrying">Retry attempt</span> <span data-spa-guard-content="attempt"></span></p></div></div>`;
 var defaultSpinnerHtml = `<svg width="40" height="40" viewBox="0 0 40 40" style="animation:spa-guard-spin .8s linear infinite"><circle cx="20" cy="20" r="16" fill="none" stroke="#e8e8e8" stroke-width="3"/><circle cx="20" cy="20" r="16" fill="none" stroke="#666" stroke-width="3" stroke-dasharray="80" stroke-dashoffset="60" stroke-linecap="round"/></svg><style>@keyframes spa-guard-spin{to{transform:rotate(360deg)}}</style>`;
 
 // src/common/options.ts

package/dist/{chunk-ORYUDYHU.js → chunk-PERG4557.js}

@@ -4,7 +4,7 @@ import {
   emitEvent,
   getOptions,
   setFallbackStateForDebug
-} from "./chunk-LIKSIU75.js";
+} from "./chunk-GE63YJOT.js";
 
 // src/runtime/debug/errorDispatchers.ts
 function dispatchAsyncRuntimeError() {

package/dist/{chunk-IZAXNDHZ.js → chunk-VZ2DLGXX.js}

@@ -3,7 +3,7 @@ import {
   getRetryAttemptFromUrl,
   getRetryStateFromUrl,
   subscribe
-} from "./chunk-LIKSIU75.js";
+} from "./chunk-GE63YJOT.js";
 
 // src/runtime/state.ts
 var getInitialStateFromUrl = () => {

package/dist/{chunk-4K3AQHLC.js → chunk-XIFXSNSD.js}

@@ -11,7 +11,7 @@ import {
   shouldIgnoreMessages,
   staticAssetRecoveryKey,
   triggerRetry
-} from "./chunk-LIKSIU75.js";
+} from "./chunk-GE63YJOT.js";
 
 // src/common/isChunkError.ts
 var isChunkError = (error) => {
@@ -157,9 +157,6 @@ var serializeRejectionReason = (reason, visited, depth) => {
       type: "Error"
     };
   }
-  if (reason instanceof Error) {
-    return serializeSafeError(reason, visited, depth);
-  }
   const reasonObj = reason;
   if (reasonObj.response != null) {
     const response = reasonObj.response;
@@ -212,6 +209,9 @@ var serializeRejectionReason = (reason, visited, depth) => {
     }
     return result;
   }
+  if (reason instanceof Error) {
+    return serializeSafeError(reason, visited, depth);
+  }
   return {
     type: "object",
     value: extractBoundedObject(reasonObj, visited, depth)

package/dist/common/html.generated.d.ts

@@ -1,3 +1,3 @@
-export declare const defaultErrorFallbackHtml = "<style>.spa-guard-error-id:has(.spa-guard-retry-id:empty){display:none}.spa-guard-error-id{font-family:ui-monospace,SFMono-Regular,Consolas,\"Liberation Mono\",Menlo,monospace}</style><div style=\"display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;font-family:system-ui,sans-serif\"><div style=\"text-align:center;max-width:480px\"><div style=\"margin-bottom:1.5rem\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"#b0b0b0\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/></svg></div><h1 data-spa-guard-content=\"heading\" style=\"font-size:1.375rem;font-weight:600;margin:0 0 .5rem;color:#1a1a1a;line-height:1.3\">Something went wrong</h1><p data-spa-guard-content=\"message\" style=\"max-width:600px;margin:0 auto 1.5rem;color:#666;font-size:.9375rem;line-height:1.5\">Please refresh the page to continue.</p><div style=\"display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap\"><button data-spa-guard-action=\"try-again\" type=\"button\" style=\"display:none;padding:.5rem 1.25rem;font-size:.875rem;font-family:inherit;border-radius:6px;border:1px solid #d0d0d0;background:#fff;color:#333;cursor:pointer;line-height:1.5\">Try again</button> <button data-spa-guard-action=\"reload\" type=\"button\" style=\"padding:.5rem 1.25rem;font-size:.875rem;font-family:inherit;border-radius:6px;border:1px solid transparent;background:#111;color:#fff;cursor:pointer;line-height:1.5\">Reload page</button></div><p class=\"spa-guard-error-id\" style=\"margin-top:1.5rem;font-size:.6875rem;color:#999\">Error ID: <span class=\"spa-guard-retry-id\"></span></p></div></div>";
-export declare const defaultLoadingFallbackHtml = "<div style=\"display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;font-family:system-ui,sans-serif\"><div style=\"text-align:center\"><div data-spa-guard-spinner style=\"margin-bottom:1.25rem\"></div><h2 data-spa-guard-content=\"loading\" style=\"font-size:1.125rem;font-weight:600;margin:0 0 .25rem;color:#1a1a1a\">Loading...</h2><p data-spa-guard-section=\"retrying\" style=\"display:none;font-size:.8125rem;color:#999;margin:.5rem 0 0\"><span data-spa-guard-content=\"retrying\">Retry attempt</span> <span data-spa-guard-content=\"attempt\"></span></p></div></div>";
+export declare const defaultErrorFallbackHtml = "<style>.spa-guard-error-id:has(.spa-guard-retry-id:empty){display:none}.spa-guard-error-id{font-family:ui-monospace,SFMono-Regular,Consolas,\"Liberation Mono\",Menlo,monospace}.spa-guard-fallback-root{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;font-family:system-ui,sans-serif;background:#fff;color:#1a1a1a;color-scheme:light dark}.spa-guard-fallback-icon{stroke:#b0b0b0}.spa-guard-fallback-message{color:#666}.spa-guard-fallback-muted{color:#999}.spa-guard-btn-secondary{border:1px solid #d0d0d0;background:#fff;color:#333}.spa-guard-btn-primary{border:1px solid transparent;background:#111;color:#fff}@media (prefers-color-scheme:dark){.spa-guard-fallback-root{background:#111318;color:#e7eaf0}.spa-guard-fallback-icon{stroke:#8b95a7}.spa-guard-fallback-message{color:#b8bfca}.spa-guard-fallback-muted{color:#8b95a7}.spa-guard-btn-secondary{border-color:#3b4351;background:#1a1f28;color:#d8deea}.spa-guard-btn-primary{background:#e7eaf0;color:#151922}}</style><div class=\"spa-guard-fallback-root\"><div style=\"text-align:center;max-width:480px\"><div style=\"margin-bottom:1.5rem\"><svg class=\"spa-guard-fallback-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/></svg></div><h1 data-spa-guard-content=\"heading\" style=\"font-size:1.375rem;font-weight:600;margin:0 0 .5rem;line-height:1.3\">Something went wrong</h1><p data-spa-guard-content=\"message\" class=\"spa-guard-fallback-message\" style=\"max-width:600px;margin:0 auto 1.5rem;font-size:.9375rem;line-height:1.5\">Please refresh the page to continue.</p><div style=\"display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap\"><button data-spa-guard-action=\"try-again\" type=\"button\" class=\"spa-guard-btn-secondary\" style=\"display:none;padding:.5rem 1.25rem;font-size:.875rem;font-family:inherit;border-radius:6px;cursor:pointer;line-height:1.5\">Try again</button> <button data-spa-guard-action=\"reload\" type=\"button\" class=\"spa-guard-btn-primary\" style=\"padding:.5rem 1.25rem;font-size:.875rem;font-family:inherit;border-radius:6px;cursor:pointer;line-height:1.5\">Reload page</button></div><p class=\"spa-guard-error-id spa-guard-fallback-muted\" style=\"margin-top:1.5rem;font-size:.6875rem\">Error ID: <span class=\"spa-guard-retry-id\"></span></p></div></div>";
+export declare const defaultLoadingFallbackHtml = "<style>.spa-guard-loading-root{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;font-family:system-ui,sans-serif;background:#fff;color:#1a1a1a;color-scheme:light dark}.spa-guard-loading-muted{color:#999}@media (prefers-color-scheme:dark){.spa-guard-loading-root{background:#111318;color:#e7eaf0}.spa-guard-loading-muted{color:#8b95a7}}</style><div class=\"spa-guard-loading-root\"><div style=\"text-align:center\"><div data-spa-guard-spinner style=\"margin-bottom:1.25rem\"></div><h2 data-spa-guard-content=\"loading\" style=\"font-size:1.125rem;font-weight:600;margin:0 0 .25rem\">Loading...</h2><p data-spa-guard-section=\"retrying\" class=\"spa-guard-loading-muted\" style=\"display:none;font-size:.8125rem;margin:.5rem 0 0\"><span data-spa-guard-content=\"retrying\">Retry attempt</span> <span data-spa-guard-content=\"attempt\"></span></p></div></div>";
 export declare const defaultSpinnerHtml = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" style=\"animation:spa-guard-spin .8s linear infinite\"><circle cx=\"20\" cy=\"20\" r=\"16\" fill=\"none\" stroke=\"#e8e8e8\" stroke-width=\"3\"/><circle cx=\"20\" cy=\"20\" r=\"16\" fill=\"none\" stroke=\"#666\" stroke-width=\"3\" stroke-dasharray=\"80\" stroke-dashoffset=\"60\" stroke-linecap=\"round\"/></svg><style>@keyframes spa-guard-spin{to{transform:rotate(360deg)}}</style>";

package/dist/common/index.js

@@ -2,7 +2,7 @@ import {
   createLogger,
   listenInternal,
   serializeError
-} from "../chunk-4K3AQHLC.js";
+} from "../chunk-XIFXSNSD.js";
 import {
   ForceRetryError,
   disableDefaultRetry,
@@ -16,7 +16,7 @@ import {
   resetFallbackMode,
   subscribe,
   triggerRetry
-} from "../chunk-LIKSIU75.js";
+} from "../chunk-GE63YJOT.js";
 import {
   __export
 } from "../chunk-MLKGABMK.js";

package/dist/runtime/debug/index.js

@@ -8,13 +8,13 @@ import {
   dispatchStaticAsset404,
   dispatchSyncRuntimeError,
   dispatchUnhandledRejection
-} from "../../chunk-ORYUDYHU.js";
+} from "../../chunk-PERG4557.js";
 import {
   subscribeToState
-} from "../../chunk-IZAXNDHZ.js";
+} from "../../chunk-VZ2DLGXX.js";
 import {
   subscribe
-} from "../../chunk-LIKSIU75.js";
+} from "../../chunk-GE63YJOT.js";
 import "../../chunk-MLKGABMK.js";
 
 // src/runtime/debug/index.ts

package/dist/runtime/index.js

@@ -3,11 +3,11 @@ import {
   extractVersionFromHtml,
   getSpinnerHtml,
   showSpinner
-} from "../chunk-T42DLOQP.js";
+} from "../chunk-3UJ67DPX.js";
 import {
   getState,
   subscribeToState
-} from "../chunk-IZAXNDHZ.js";
+} from "../chunk-VZ2DLGXX.js";
 import {
   ForceRetryError,
   getLogger,
@@ -17,7 +17,7 @@ import {
   markRetryHealthyBoot,
   setTranslations,
   versionCheckStateWindowKey
-} from "../chunk-LIKSIU75.js";
+} from "../chunk-GE63YJOT.js";
 import "../chunk-MLKGABMK.js";
 
 // src/common/checkVersion.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ovineko/spa-guard",
-  "version": "0.0.2-alpha-0",
+  "version": "0.0.3-alpha-0",
   "description": "Chunk load error handling for SPAs — core runtime, error handling, schema, i18n",
   "keywords": [
     "spa",