@wooksjs/event-http 0.6.1 → 0.6.2

package/dist/index.cjs

@@ -338,24 +338,393 @@ let EHttpStatusCode = /* @__PURE__ */ function(EHttpStatusCode$1) {
 	return EHttpStatusCode$1;
 }({});
 
+//#endregion
+//#region packages/event-http/src/errors/403.tl.svg
+function _403_tl_default(ctx) {
+	return `<svg height="64" viewBox="0 4 100 96" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#888888" stroke-width="2">
+  <path d="M50 90.625C64.4042 87.1875 83.5751 69.8667 83.5751 48.6937V24.0854L50 9.375L16.425 24.0833V48.6937C16.425 69.8667 35.5959 87.1875 50 90.625Z" fill="#ff000050">
+    <animate attributeName="fill" dur="2s" repeatCount="indefinite"
+             values="#ff000000;#ff000050;#ff000000" />
+  </path>
+
+  <path d="M61.5395 46.0812H38.4604C37.1061 46.0812 36.0083 47.1791 36.0083 48.5333V65.075C36.0083 66.4292 37.1061 67.5271 38.4604 67.5271H61.5395C62.8938 67.5271 63.9916 66.4292 63.9916 65.075V48.5333C63.9916 47.1791 62.8938 46.0812 61.5395 46.0812Z" />
+
+  <path d="M41.7834 46.0834V39.6813C41.7834 37.5021 42.6491 35.4121 44.1901 33.8712C45.731 32.3303 47.8209 31.4646 50.0001 31.4646C52.1793 31.4646 54.2693 32.3303 55.8102 33.8712C57.3511 35.4121 58.2168 37.5021 58.2168 39.6813V46.0813" />
+</svg>
+`;
+}
+
+//#endregion
+//#region packages/event-http/src/errors/404.tl.svg
+function _404_tl_default(ctx) {
+	return `<svg height="64" viewBox="0 20 100 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <path id="sheet" d="M86.5 36.5V47.5H97.5V92.5H52.5V36.5H86.5ZM63 68.5H87V67.5H63V68.5ZM63 63.5H87V62.5H63V63.5ZM63 58.5H87V57.5H63V58.5ZM96.793 46.5H87.5V37.207L96.793 46.5Z" fill="#88888833" stroke="#888888aa"/>
+  </defs>
+
+  <g id="queue" transform="translate(-5 -10)">
+    <use href="#sheet" opacity="0">
+      <animateTransform attributeName="transform" type="translate"
+                        dur="3s" repeatCount="indefinite"
+                        keyTimes="0;0.1;0.32;0.42;1"
+                        values="30 0; -20 0; -20 0; -70 0; -70 0" />
+      <animate attributeName="opacity"
+               dur="3s" repeatCount="indefinite"
+                        keyTimes="0;0.1;0.32;0.42;1"
+               values="0;1;1;0;0" />
+    </use>
+
+    <use href="#sheet" opacity="0">
+      <animateTransform attributeName="transform" type="translate"
+                        dur="3s" begin="1s" repeatCount="indefinite"
+                        keyTimes="0;0.1;0.32;0.42;1"
+                        values="30 0; -20 0; -20 0; -70 0; -70 0" />
+      <animate attributeName="opacity"
+               dur="3s" begin="1s" repeatCount="indefinite"
+                        keyTimes="0;0.1;0.32;0.42;1"
+               values="0;1;1;0;0" />
+    </use>
+
+    <use href="#sheet" opacity="0">
+      <animateTransform attributeName="transform" type="translate"
+                        dur="3s" begin="2s" repeatCount="indefinite"
+                        keyTimes="0;0.1;0.32;0.42;1"
+                        values="30 0; -20 0; -20 0; -70 0; -70 0" />
+      <animate attributeName="opacity"
+               dur="3s" begin="2s" repeatCount="indefinite"
+                        keyTimes="0;0.1;0.32;0.42;1"
+               values="0;1;1;0;0" />
+    </use>
+  </g>
+
+  <g>
+    <path d="M49.5 32.5C58.3366 32.5 65.5 39.6634 65.5 48.5C65.5 54.4781 62.222 59.6923 57.3584 62.4404C55.0386 63.7512 52.3591 64.5 49.5 64.5C40.6634 64.5 33.5 57.3366 33.5 48.5C33.5 39.6634 40.6634 32.5 49.5 32.5Z" fill="#ffffff50" stroke="#888888" stroke-width="3"/>
+
+    <path d="M62.7101 74.5691C63.117 75.2907 64.0318 75.5459 64.7534 75.139C65.4751 74.7321 65.7302 73.8173 65.3233 73.0957L62.7101 74.5691ZM58.05 63.25L56.7434 63.9867L62.7101 74.5691L64.0167 73.8324L65.3233 73.0957L59.3567 62.5133L58.05 63.25Z" fill="#888888"/>
+  </g>
+</svg>
+
+`;
+}
+
+//#endregion
+//#region packages/event-http/src/errors/500.tl.svg
+function _500_tl_default(ctx) {
+	return `<svg  height="64" viewBox="0 0 120 100" xmlns="http://www.w3.org/2000/svg">
+
+  <g id="server">
+
+<g fill="#88888888" stroke="#88888888" stroke-width="2" >
+<path d="M18 90C13.5817 90 10 86.4182 10 82V38C10 33.5817 13.5817 30 18 30H50.5L58 43L52.5 53L56 68.5L49.0098 89.97L61.2141 71.4358L58.363 54.315L64.7769 43.5511L58.2763 30.2943L104.243 32.0434C108.658 32.2114 112.101 35.9267 111.933 40.3418L110.26 84.31C110.092 88.725 106.377 92.168 101.962 92L49 90H18Z" />
+</g>
+    <circle cx="30" cy="60" r="6" fill="red">
+      <animate attributeName="fill" dur="0.8s"
+               values="red;#2d0000;red" repeatCount="indefinite"/>
+    </circle>
+
+  </g>
+
+  <g fill="lightgray" opacity="0.75">
+    <circle cx="50" cy="35" r="6">
+      <animate attributeName="cy" from="35" to="15" dur="2s"
+               repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.75;0" dur="2s"
+               repeatCount="indefinite"/>
+    </circle>
+    <circle cx="60" cy="40" r="4">
+      <animate attributeName="cy" from="40" to="20" dur="2s"
+               begin="0.4s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.75;0" dur="2s"
+               begin="0.4s" repeatCount="indefinite"/>
+    </circle>
+  </g>
+
+</svg>
+`;
+}
+
+//#endregion
+//#region packages/event-http/src/errors/error.tl.html
+function error_tl_default(ctx) {
+	const { statusCode, statusMessage, icon, message, details, link, image, version } = ctx;
+	return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${statusCode} ${statusMessage}</title>
+    <style>
+      body {
+        font-family: -apple-system, BlinkMacMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+          Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        min-height: 100vh;
+        margin: 0;
+        padding: 0 20px;
+        box-sizing: border-box;
+        transition:
+          background-color 0.3s ease,
+          color 0.3s ease;
+      }
+
+      .error-container {
+        padding: 48px;
+        padding-bottom: 12px !important;
+        background-color: #ffffff;
+        border-radius: 0 0 12px 12px;
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+        text-align: center;
+        max-width: 650px;
+        width: 100%;
+        transition:
+          background-color 0.3s ease,
+          border-color 0.3s ease,
+          box-shadow 0.3s ease;
+      }
+
+      .status-code {
+        font-size: 5rem;
+        font-weight: 900;
+        margin-bottom: 5px;
+        line-height: 1;
+        transition: color 0.3s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1rem;
+        position: relative;
+        margin-right: 24px;
+      }
+
+      .status-text {
+        font-size: 2.25rem;
+        font-weight: 700;
+        margin-bottom: 25px;
+        transition: color 0.3s ease;
+      }
+
+      .error-message {
+        font-size: 1.25rem;
+        margin-bottom: 40px;
+        line-height: 1.7;
+        transition: color 0.3s ease;
+      }
+
+      .json-details-container {
+        padding: 20px;
+        border-radius: 8px;
+        text-align: left;
+        overflow-x: auto;
+        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+        font-size: 0.9rem;
+        border: 1px solid;
+        transition:
+          background-color 0.3s ease,
+          color 0.3s ease,
+          border-color 0.3s ease;
+      }
+
+      .json-details-container pre {
+        margin: 0;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+
+      .json-details-container code {
+        display: block;
+      }
+
+      body {
+        background-color: #f8fafc;
+        color: #1f2937;
+      }
+      .error-container {
+        background-color: #ffffff;
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+      }
+      .status-code {
+        color: #dc2626;
+      }
+      .status-text {
+        color: #1f2937;
+      }
+      .error-message {
+        color: #4b5563;
+      }
+      .json-details-container {
+        background-color: #f0f4f8;
+        color: #374151;
+        border-color: #d1d5db;
+      }
+      .json-details-container p {
+        color: #6b7280;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        body {
+          background-color: #2d3748;
+          color: #e2e8f0;
+        }
+        .error-container {
+          background-color: #1a202c;
+          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
+        }
+        .status-code {
+          color: #f56565;
+        }
+        .status-text {
+          color: #cbd5e1;
+        }
+        .error-message {
+          color: #a0aec0;
+        }
+        .json-details-container {
+          background-color: #2d3748;
+          color: #e2e8f0;
+          border-color: #4a5568;
+        }
+        .json-details-container p {
+          color: #a0aec0;
+        }
+      }
+
+      .footer {
+        display: flex;
+        gap: 0.25rem;
+        font-size: 0.6em;
+        justify-content: flex-end;
+        align-items: center;
+        margin-top: 12px;
+        opacity: 0.5;
+        transition: 0.25s ease-in-out;
+      }
+
+      .footer img {
+        filter: grayscale(0.5);
+        transition: 0.25s ease-in-out;
+      }
+
+      .footer:hover {
+        opacity: 1;
+      }
+      .footer:hover img {
+        filter: grayscale(0);
+      }
+
+      @media (max-width: 768px) {
+        body {
+          padding: 15px;
+        }
+        .error-container {
+          padding: 32px;
+        }
+        .status-code {
+          font-size: 4rem;
+        }
+        .status-text {
+          font-size: 1.8rem;
+        }
+        .error-message {
+          font-size: 1.1rem;
+          margin-bottom: 30px;
+        }
+        .json-details-container {
+          font-size: 0.85rem;
+        }
+      }
+
+      @media (max-width: 480px) {
+        body {
+          padding: 10px;
+        }
+        .error-container {
+          padding: 24px;
+          border-radius: 8px;
+        }
+        .status-code {
+          font-size: 3rem;
+        }
+        .status-text {
+          font-size: 1.5rem;
+          margin-bottom: 20px;
+        }
+        .error-message {
+          font-size: 1rem;
+          margin-bottom: 25px;
+        }
+        .json-details-container {
+          padding: 15px;
+          font-size: 0.8rem;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="error-container">
+      <div id="statusCode" class="status-code">${icon} ${statusCode}</div>
+
+      <div id="statusText" class="status-text">${statusMessage}</div>
+
+      <p id="errorMessage" class="error-message">${message}</p>
+
+      <!-- prettier-ignore -->
+      <div class="json-details-container"style="display: ${details ? "block" : "none"};">
+        <p class="text-sm">Technical Details:</p>
+        <pre><code id="jsonDetails">${details}</code></pre>
+      </div>
+      <div class="footer">
+        Powered by
+        <a href="${link}" target="_blank">
+          <img height="20" alt="%{poweredBy}" src="${image}" />
+        </a>
+        v${version}
+      </div>
+    </div>
+  </body>
+</html>
+`;
+}
+
 //#endregion
 //#region packages/event-http/src/errors/error-renderer.ts
-const preStyles = "font-family: monospace;width: 100%;max-width: 900px;padding: 10px;margin: 20px auto;border-radius: 8px;background-color: #494949;box-shadow: 0px 0px 3px 2px rgb(255 255 255 / 20%);";
+let framework = {
+	version: "0.6.1",
+	poweredBy: `wooksjs`,
+	link: `https://wooks.moost.org/`,
+	image: `https://wooks.moost.org/wooks-full-logo.png`
+};
 var HttpErrorRenderer = class extends BaseHttpResponseRenderer {
+	constructor(opts) {
+		super();
+		this.opts = opts;
+	}
+	icons = {
+		401: typeof _403_tl_default === "function" ? _403_tl_default({}) : "",
+		403: typeof _403_tl_default === "function" ? _403_tl_default({}) : "",
+		404: typeof _404_tl_default === "function" ? _404_tl_default({}) : "",
+		500: typeof _500_tl_default === "function" ? _500_tl_default({}) : ""
+	};
+	static registerFramework(opts) {
+		framework = opts;
+	}
 	renderHtml(response) {
 		const data = response.body || {};
 		response.setContentType("text/html");
-		const keys = Object.keys(data).filter((key) => ![
-			"statusCode",
-			"error",
-			"message"
-		].includes(key));
-		return `<html style="background-color: #333; color: #bbb;"><head><title>${data.statusCode} ${httpStatusCodes[data.statusCode]}</title></head><body><center><h1>${data.statusCode} ${httpStatusCodes[data.statusCode]}</h1></center><center><h4>${data.message}</h1></center><hr color="#666"><center style="color: #666;"> Wooks v0.6.0 </center>${keys.length > 0 ? `<pre style="${preStyles}">${JSON.stringify({
-			...data,
-			statusCode: void 0,
-			message: void 0,
-			error: void 0
-		}, null, "  ")}</pre>` : ""}</body></html>`;
+		const hasDetails = Object.keys(data).length > 3;
+		const icon = data.statusCode >= 500 ? this.icons[500] : this.icons[data.statusCode] || "";
+		return typeof error_tl_default === "function" ? error_tl_default({
+			icon,
+			statusCode: data.statusCode,
+			statusMessage: httpStatusCodes[data.statusCode],
+			message: data.message,
+			details: hasDetails ? JSON.stringify(data, null, "  ") : "",
+			version: (this.opts || framework).version,
+			poweredBy: (this.opts || framework).poweredBy,
+			link: (this.opts || framework).link,
+			image: (this.opts || framework).image
+		}) : JSON.stringify(data, null, "  ");
 	}
 	renderText(response) {
 		const data = response.body || {};

package/dist/index.d.ts

@@ -394,6 +394,30 @@ interface TWooksErrorBodyExt extends TWooksErrorBody {
 }
 
 declare class HttpErrorRenderer extends BaseHttpResponseRenderer<TWooksErrorBodyExt> {
+    protected opts?: {
+        version: string;
+        poweredBy: string;
+        link: string;
+        image: string;
+    } | undefined;
+    constructor(opts?: {
+        version: string;
+        poweredBy: string;
+        link: string;
+        image: string;
+    } | undefined);
+    protected icons: {
+        401: string;
+        403: string;
+        404: string;
+        500: string;
+    };
+    static registerFramework(opts: {
+        version: string;
+        poweredBy: string;
+        link: string;
+        image: string;
+    }): void;
     renderHtml(response: BaseHttpResponse<TWooksErrorBodyExt>): string;
     renderText(response: BaseHttpResponse<TWooksErrorBodyExt>): string;
     renderJson(response: BaseHttpResponse<TWooksErrorBodyExt>): string;

package/dist/index.mjs

@@ -315,24 +315,393 @@ let EHttpStatusCode = /* @__PURE__ */ function(EHttpStatusCode$1) {
 	return EHttpStatusCode$1;
 }({});
 
+//#endregion
+//#region packages/event-http/src/errors/403.tl.svg
+function _403_tl_default(ctx) {
+	return `<svg height="64" viewBox="0 4 100 96" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#888888" stroke-width="2">
+  <path d="M50 90.625C64.4042 87.1875 83.5751 69.8667 83.5751 48.6937V24.0854L50 9.375L16.425 24.0833V48.6937C16.425 69.8667 35.5959 87.1875 50 90.625Z" fill="#ff000050">
+    <animate attributeName="fill" dur="2s" repeatCount="indefinite"
+             values="#ff000000;#ff000050;#ff000000" />
+  </path>
+
+  <path d="M61.5395 46.0812H38.4604C37.1061 46.0812 36.0083 47.1791 36.0083 48.5333V65.075C36.0083 66.4292 37.1061 67.5271 38.4604 67.5271H61.5395C62.8938 67.5271 63.9916 66.4292 63.9916 65.075V48.5333C63.9916 47.1791 62.8938 46.0812 61.5395 46.0812Z" />
+
+  <path d="M41.7834 46.0834V39.6813C41.7834 37.5021 42.6491 35.4121 44.1901 33.8712C45.731 32.3303 47.8209 31.4646 50.0001 31.4646C52.1793 31.4646 54.2693 32.3303 55.8102 33.8712C57.3511 35.4121 58.2168 37.5021 58.2168 39.6813V46.0813" />
+</svg>
+`;
+}
+
+//#endregion
+//#region packages/event-http/src/errors/404.tl.svg
+function _404_tl_default(ctx) {
+	return `<svg height="64" viewBox="0 20 100 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <path id="sheet" d="M86.5 36.5V47.5H97.5V92.5H52.5V36.5H86.5ZM63 68.5H87V67.5H63V68.5ZM63 63.5H87V62.5H63V63.5ZM63 58.5H87V57.5H63V58.5ZM96.793 46.5H87.5V37.207L96.793 46.5Z" fill="#88888833" stroke="#888888aa"/>
+  </defs>
+
+  <g id="queue" transform="translate(-5 -10)">
+    <use href="#sheet" opacity="0">
+      <animateTransform attributeName="transform" type="translate"
+                        dur="3s" repeatCount="indefinite"
+                        keyTimes="0;0.1;0.32;0.42;1"
+                        values="30 0; -20 0; -20 0; -70 0; -70 0" />
+      <animate attributeName="opacity"
+               dur="3s" repeatCount="indefinite"
+                        keyTimes="0;0.1;0.32;0.42;1"
+               values="0;1;1;0;0" />
+    </use>
+
+    <use href="#sheet" opacity="0">
+      <animateTransform attributeName="transform" type="translate"
+                        dur="3s" begin="1s" repeatCount="indefinite"
+                        keyTimes="0;0.1;0.32;0.42;1"
+                        values="30 0; -20 0; -20 0; -70 0; -70 0" />
+      <animate attributeName="opacity"
+               dur="3s" begin="1s" repeatCount="indefinite"
+                        keyTimes="0;0.1;0.32;0.42;1"
+               values="0;1;1;0;0" />
+    </use>
+
+    <use href="#sheet" opacity="0">
+      <animateTransform attributeName="transform" type="translate"
+                        dur="3s" begin="2s" repeatCount="indefinite"
+                        keyTimes="0;0.1;0.32;0.42;1"
+                        values="30 0; -20 0; -20 0; -70 0; -70 0" />
+      <animate attributeName="opacity"
+               dur="3s" begin="2s" repeatCount="indefinite"
+                        keyTimes="0;0.1;0.32;0.42;1"
+               values="0;1;1;0;0" />
+    </use>
+  </g>
+
+  <g>
+    <path d="M49.5 32.5C58.3366 32.5 65.5 39.6634 65.5 48.5C65.5 54.4781 62.222 59.6923 57.3584 62.4404C55.0386 63.7512 52.3591 64.5 49.5 64.5C40.6634 64.5 33.5 57.3366 33.5 48.5C33.5 39.6634 40.6634 32.5 49.5 32.5Z" fill="#ffffff50" stroke="#888888" stroke-width="3"/>
+
+    <path d="M62.7101 74.5691C63.117 75.2907 64.0318 75.5459 64.7534 75.139C65.4751 74.7321 65.7302 73.8173 65.3233 73.0957L62.7101 74.5691ZM58.05 63.25L56.7434 63.9867L62.7101 74.5691L64.0167 73.8324L65.3233 73.0957L59.3567 62.5133L58.05 63.25Z" fill="#888888"/>
+  </g>
+</svg>
+
+`;
+}
+
+//#endregion
+//#region packages/event-http/src/errors/500.tl.svg
+function _500_tl_default(ctx) {
+	return `<svg  height="64" viewBox="0 0 120 100" xmlns="http://www.w3.org/2000/svg">
+
+  <g id="server">
+
+<g fill="#88888888" stroke="#88888888" stroke-width="2" >
+<path d="M18 90C13.5817 90 10 86.4182 10 82V38C10 33.5817 13.5817 30 18 30H50.5L58 43L52.5 53L56 68.5L49.0098 89.97L61.2141 71.4358L58.363 54.315L64.7769 43.5511L58.2763 30.2943L104.243 32.0434C108.658 32.2114 112.101 35.9267 111.933 40.3418L110.26 84.31C110.092 88.725 106.377 92.168 101.962 92L49 90H18Z" />
+</g>
+    <circle cx="30" cy="60" r="6" fill="red">
+      <animate attributeName="fill" dur="0.8s"
+               values="red;#2d0000;red" repeatCount="indefinite"/>
+    </circle>
+
+  </g>
+
+  <g fill="lightgray" opacity="0.75">
+    <circle cx="50" cy="35" r="6">
+      <animate attributeName="cy" from="35" to="15" dur="2s"
+               repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.75;0" dur="2s"
+               repeatCount="indefinite"/>
+    </circle>
+    <circle cx="60" cy="40" r="4">
+      <animate attributeName="cy" from="40" to="20" dur="2s"
+               begin="0.4s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.75;0" dur="2s"
+               begin="0.4s" repeatCount="indefinite"/>
+    </circle>
+  </g>
+
+</svg>
+`;
+}
+
+//#endregion
+//#region packages/event-http/src/errors/error.tl.html
+function error_tl_default(ctx) {
+	const { statusCode, statusMessage, icon, message, details, link, image, version } = ctx;
+	return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${statusCode} ${statusMessage}</title>
+    <style>
+      body {
+        font-family: -apple-system, BlinkMacMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+          Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        min-height: 100vh;
+        margin: 0;
+        padding: 0 20px;
+        box-sizing: border-box;
+        transition:
+          background-color 0.3s ease,
+          color 0.3s ease;
+      }
+
+      .error-container {
+        padding: 48px;
+        padding-bottom: 12px !important;
+        background-color: #ffffff;
+        border-radius: 0 0 12px 12px;
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+        text-align: center;
+        max-width: 650px;
+        width: 100%;
+        transition:
+          background-color 0.3s ease,
+          border-color 0.3s ease,
+          box-shadow 0.3s ease;
+      }
+
+      .status-code {
+        font-size: 5rem;
+        font-weight: 900;
+        margin-bottom: 5px;
+        line-height: 1;
+        transition: color 0.3s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1rem;
+        position: relative;
+        margin-right: 24px;
+      }
+
+      .status-text {
+        font-size: 2.25rem;
+        font-weight: 700;
+        margin-bottom: 25px;
+        transition: color 0.3s ease;
+      }
+
+      .error-message {
+        font-size: 1.25rem;
+        margin-bottom: 40px;
+        line-height: 1.7;
+        transition: color 0.3s ease;
+      }
+
+      .json-details-container {
+        padding: 20px;
+        border-radius: 8px;
+        text-align: left;
+        overflow-x: auto;
+        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+        font-size: 0.9rem;
+        border: 1px solid;
+        transition:
+          background-color 0.3s ease,
+          color 0.3s ease,
+          border-color 0.3s ease;
+      }
+
+      .json-details-container pre {
+        margin: 0;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+
+      .json-details-container code {
+        display: block;
+      }
+
+      body {
+        background-color: #f8fafc;
+        color: #1f2937;
+      }
+      .error-container {
+        background-color: #ffffff;
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+      }
+      .status-code {
+        color: #dc2626;
+      }
+      .status-text {
+        color: #1f2937;
+      }
+      .error-message {
+        color: #4b5563;
+      }
+      .json-details-container {
+        background-color: #f0f4f8;
+        color: #374151;
+        border-color: #d1d5db;
+      }
+      .json-details-container p {
+        color: #6b7280;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        body {
+          background-color: #2d3748;
+          color: #e2e8f0;
+        }
+        .error-container {
+          background-color: #1a202c;
+          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
+        }
+        .status-code {
+          color: #f56565;
+        }
+        .status-text {
+          color: #cbd5e1;
+        }
+        .error-message {
+          color: #a0aec0;
+        }
+        .json-details-container {
+          background-color: #2d3748;
+          color: #e2e8f0;
+          border-color: #4a5568;
+        }
+        .json-details-container p {
+          color: #a0aec0;
+        }
+      }
+
+      .footer {
+        display: flex;
+        gap: 0.25rem;
+        font-size: 0.6em;
+        justify-content: flex-end;
+        align-items: center;
+        margin-top: 12px;
+        opacity: 0.5;
+        transition: 0.25s ease-in-out;
+      }
+
+      .footer img {
+        filter: grayscale(0.5);
+        transition: 0.25s ease-in-out;
+      }
+
+      .footer:hover {
+        opacity: 1;
+      }
+      .footer:hover img {
+        filter: grayscale(0);
+      }
+
+      @media (max-width: 768px) {
+        body {
+          padding: 15px;
+        }
+        .error-container {
+          padding: 32px;
+        }
+        .status-code {
+          font-size: 4rem;
+        }
+        .status-text {
+          font-size: 1.8rem;
+        }
+        .error-message {
+          font-size: 1.1rem;
+          margin-bottom: 30px;
+        }
+        .json-details-container {
+          font-size: 0.85rem;
+        }
+      }
+
+      @media (max-width: 480px) {
+        body {
+          padding: 10px;
+        }
+        .error-container {
+          padding: 24px;
+          border-radius: 8px;
+        }
+        .status-code {
+          font-size: 3rem;
+        }
+        .status-text {
+          font-size: 1.5rem;
+          margin-bottom: 20px;
+        }
+        .error-message {
+          font-size: 1rem;
+          margin-bottom: 25px;
+        }
+        .json-details-container {
+          padding: 15px;
+          font-size: 0.8rem;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="error-container">
+      <div id="statusCode" class="status-code">${icon} ${statusCode}</div>
+
+      <div id="statusText" class="status-text">${statusMessage}</div>
+
+      <p id="errorMessage" class="error-message">${message}</p>
+
+      <!-- prettier-ignore -->
+      <div class="json-details-container"style="display: ${details ? "block" : "none"};">
+        <p class="text-sm">Technical Details:</p>
+        <pre><code id="jsonDetails">${details}</code></pre>
+      </div>
+      <div class="footer">
+        Powered by
+        <a href="${link}" target="_blank">
+          <img height="20" alt="%{poweredBy}" src="${image}" />
+        </a>
+        v${version}
+      </div>
+    </div>
+  </body>
+</html>
+`;
+}
+
 //#endregion
 //#region packages/event-http/src/errors/error-renderer.ts
-const preStyles = "font-family: monospace;width: 100%;max-width: 900px;padding: 10px;margin: 20px auto;border-radius: 8px;background-color: #494949;box-shadow: 0px 0px 3px 2px rgb(255 255 255 / 20%);";
+let framework = {
+	version: "0.6.1",
+	poweredBy: `wooksjs`,
+	link: `https://wooks.moost.org/`,
+	image: `https://wooks.moost.org/wooks-full-logo.png`
+};
 var HttpErrorRenderer = class extends BaseHttpResponseRenderer {
+	constructor(opts) {
+		super();
+		this.opts = opts;
+	}
+	icons = {
+		401: typeof _403_tl_default === "function" ? _403_tl_default({}) : "",
+		403: typeof _403_tl_default === "function" ? _403_tl_default({}) : "",
+		404: typeof _404_tl_default === "function" ? _404_tl_default({}) : "",
+		500: typeof _500_tl_default === "function" ? _500_tl_default({}) : ""
+	};
+	static registerFramework(opts) {
+		framework = opts;
+	}
 	renderHtml(response) {
 		const data = response.body || {};
 		response.setContentType("text/html");
-		const keys = Object.keys(data).filter((key) => ![
-			"statusCode",
-			"error",
-			"message"
-		].includes(key));
-		return `<html style="background-color: #333; color: #bbb;"><head><title>${data.statusCode} ${httpStatusCodes[data.statusCode]}</title></head><body><center><h1>${data.statusCode} ${httpStatusCodes[data.statusCode]}</h1></center><center><h4>${data.message}</h1></center><hr color="#666"><center style="color: #666;"> Wooks v0.6.0 </center>${keys.length > 0 ? `<pre style="${preStyles}">${JSON.stringify({
-			...data,
-			statusCode: void 0,
-			message: void 0,
-			error: void 0
-		}, null, "  ")}</pre>` : ""}</body></html>`;
+		const hasDetails = Object.keys(data).length > 3;
+		const icon = data.statusCode >= 500 ? this.icons[500] : this.icons[data.statusCode] || "";
+		return typeof error_tl_default === "function" ? error_tl_default({
+			icon,
+			statusCode: data.statusCode,
+			statusMessage: httpStatusCodes[data.statusCode],
+			message: data.message,
+			details: hasDetails ? JSON.stringify(data, null, "  ") : "",
+			version: (this.opts || framework).version,
+			poweredBy: (this.opts || framework).poweredBy,
+			link: (this.opts || framework).link,
+			image: (this.opts || framework).image
+		}) : JSON.stringify(data, null, "  ");
 	}
 	renderText(response) {
 		const data = response.body || {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wooksjs/event-http",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "@wooksjs/event-http",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -41,8 +41,8 @@
   "peerDependencies": {
     "@prostojs/router": "^0.2.1",
     "@prostojs/logger": "^0.4.3",
-    "@wooksjs/event-core": "^0.6.1",
-    "wooks": "^0.6.1"
+    "@wooksjs/event-core": "^0.6.2",
+    "wooks": "^0.6.2"
   },
   "dependencies": {},
   "homepage": "https://github.com/wooksjs/wooksjs/tree/main/packages/event-http#readme",