@gracile-labs/better-errors 0.1.0-next.0

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2024 Julian Cataldo — https://gracile.js.org
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,15 @@
+# Gracile — Better Errors
+
+A thin, full-stack, **web** framework.
+
+---
+
+Largely extracted from https://github.com/withastro/astro/blob/cf65476b27053333cf5a36f6f9f46b794c98dfa2/packages/astro/src/core/errors. Kudos for their inventivity.
+
+This could theoretically be used with any Vite full-stack setup, at least it's made so.
+
+---
+
+- [Documentation website (gracile.js.org)](https://gracile.js.org/)
+- [Documentation website repository](https://github.com/gracile-web/website)
+- [Starter projects repository](https://github.com/gracile-web/starter-projects)

package/dist/dev/custom-overlay/assets.d.ts

@@ -0,0 +1,7 @@
+export declare const openNewWindowIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" width=\"16\" height=\"16\" fill=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M14 2h-4m4 0L8 8m6-6v4\"/><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\" d=\"M14 8.667V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.333\"/></svg>";
+export declare const iconTablerSun: import("lit").TemplateResult<1>;
+export declare const hintIcon: import("lit").TemplateResult<1>;
+export declare const messageIcon: import("lit").TemplateResult<1>;
+export declare const iconTablerMoon: import("lit").TemplateResult<1>;
+export declare const logo: import("lit").TemplateResult<1>;
+//# sourceMappingURL=assets.d.ts.map

package/dist/dev/custom-overlay/assets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assets.d.ts","sourceRoot":"","sources":["../../../src/dev/custom-overlay/assets.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB,2YAC+U,CAAC;AAE9W,eAAO,MAAM,aAAa,iCAkBnB,CAAC;AAER,eAAO,MAAM,QAAQ,iCAgBpB,CAAC;AAEF,eAAO,MAAM,WAAW,iCAgBvB,CAAC;AAEF,eAAO,MAAM,cAAc,iCAiBpB,CAAC;AAER,eAAO,MAAM,IAAI,iCAuCV,CAAC"}

package/dist/dev/custom-overlay/assets.js

@@ -0,0 +1,115 @@
+import { html } from 'lit';
+// const houstonLogo = `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="175" height="131" fill="none"><path fill="currentColor" d="M55.977 81.512c0 8.038-6.516 14.555-14.555 14.555S26.866 89.55 26.866 81.512c0-8.04 6.517-14.556 14.556-14.556 8.039 0 14.555 6.517 14.555 14.556Zm24.745-5.822c0-.804.651-1.456 1.455-1.456h11.645c.804 0 1.455.652 1.455 1.455v11.645c0 .804-.651 1.455-1.455 1.455H82.177a1.456 1.456 0 0 1-1.455-1.455V75.689Zm68.411 5.822c0 8.038-6.517 14.555-14.556 14.555-8.039 0-14.556-6.517-14.556-14.555 0-8.04 6.517-14.556 14.556-14.556 8.039 0 14.556 6.517 14.556 14.556Z"/><rect width="168.667" height="125" x="3.667" y="3" stroke="currentColor" stroke-width="4" rx="20.289"/></svg>`;
+/* prettier-ignore */
+export const openNewWindowIcon = `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="16" height="16" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14 2h-4m4 0L8 8m6-6v4"/><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M14 8.667V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.333"/></svg>`;
+export const iconTablerSun = html `<svg
+	xmlns="http://www.w3.org/2000/svg"
+	aria-hidden="true"
+	class="icon-tabler icon-tabler-sun"
+	width="15px"
+	height="15px"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	fill="none"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+	<circle cx="12" cy="12" r="4" />
+	<path
+		d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
+	/>
+</svg>`;
+export const hintIcon = html `
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+		width="24"
+		height="24"
+		fill="none"
+	>
+		<path
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="1.5"
+			d="m21 2-1 1M3 2l1 1m17 13-1-1M3 16l1-1m5 3h6m-5 3h4M12 3C8 3 5.952 4.95 6 8c.023 1.487.5 2.5 1.5 3.5S9 13 9 15h6c0-2 .5-2.5 1.5-3.5h0c1-1 1.477-2.013 1.5-3.5.048-3.05-2-5-6-5Z"
+		/>
+	</svg>
+`;
+export const messageIcon = html `
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+		width="24"
+		height="24"
+		fill="none"
+	>
+		<path
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="1.5"
+			d="M12 7v6m0 4.01.01-.011M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"
+		/>
+	</svg>
+`;
+export const iconTablerMoon = html ` <svg
+	xmlns="http://www.w3.org/2000/svg"
+	aria-hidden="true"
+	class="icon-tabler icon-tabler-moon"
+	width="15"
+	height="15"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	fill="none"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+>
+	<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+	<path
+		d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"
+	/>
+</svg>`;
+export const logo = html `<svg
+	xmlns="http://www.w3.org/2000/svg"
+	aria-hidden="true"
+	width="120"
+	height="120"
+	xml:space="preserve"
+	style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"
+	viewBox="0 0 630 630"
+>
+	<g transform="matrix(.877 .23499 -.25635 .95673 119.498 -60.39)">
+		<circle cx="315" cy="315" r="315" style="fill:url(#a)" />
+		<path
+			d="M315 0c173.853 0 315 141.147 315 315S488.853 630 315 630 0 488.853 0 315 141.147 0 315 0Zm0 13.125c166.309 0 300.682 135.566 300.682 301.875S481.309 616.875 315 616.875C148.691 616.875 14.318 481.309 14.318 315S148.691 13.125 315 13.125Z"
+			style="fill:#1a1a1e"
+		/>
+	</g>
+	<path
+		d="M.238.087A.195.195 0 0 1 .135.058.215.215 0 0 1 .06-.029a.293.293 0 0 1-.028-.135c0-.051.008-.103.024-.156a.699.699 0 0 1 .162-.278.475.475 0 0 1 .115-.089.258.258 0 0 1 .121-.032.14.14 0 0 1 .07.016c.017.011.03.026.038.044a.158.158 0 0 1 .011.058.215.215 0 0 1-.012.07.181.181 0 0 1-.034.058C.512-.458.496-.45.479-.45a.036.036 0 0 1-.022-.007.073.073 0 0 1-.02-.026.162.162 0 0 0 .034-.035.303.303 0 0 0 .032-.056.135.135 0 0 0 .014-.054.05.05 0 0 0-.012-.034C.496-.671.482-.675.463-.675a.16.16 0 0 0-.092.033.447.447 0 0 0-.091.089.764.764 0 0 0-.152.4c0 .061.013.108.04.141.026.034.057.051.094.051A.127.127 0 0 0 .338.013a.243.243 0 0 0 .061-.069.454.454 0 0 0 .062-.19.9.9 0 0 0-.051-.008 1.011 1.011 0 0 0-.056-.002H.322l-.034.002a.1.1 0 0 1 .029-.052.076.076 0 0 1 .051-.016c.02 0 .04.003.061.009a4.452 4.452 0 0 0 .123.039l-.01.031-.029.091a.854.854 0 0 0-.026.108l-.002.043.001.042.002.052C.468.09.453.085.444.076A.063.063 0 0 1 .425.044.148.148 0 0 1 .42.009v-.01l.001-.01a.317.317 0 0 1-.08.071.2.2 0 0 1-.103.027Z"
+		style="fill-rule:nonzero"
+		transform="translate(115.745 497.368) scale(589.0308)"
+	/>
+	<path
+		d="M6516.9 5139.28c-23.64 24.86-49.83 45.96-78.54 63.32-38.12 23.04-81.04 34.61-128.8 34.61-46.96 0-90.14-12.37-129.56-37.11-39.27-24.65-70.68-60.51-94.08-107.72-23.09-46.59-34.76-102.43-34.76-167.57 0-62.67 9.75-126.16 29.28-190.46 19.46-64.05 46.21-125.05 80.26-183.02 34.06-57.99 73-109.68 116.79-155.1 44.07-45.7 90.8-81.78 140.17-108.29 50.15-26.95 100.53-40.34 151.1-40.34 37.75 0 67.7 7.39 90.01 21.55 22.8 14.47 39.21 33.58 49.3 57.27 9.78 22.96 14.7 47.62 14.7 73.99 0 29.25-5.21 58.51-15.66 87.77-10.56 29.57-24.99 54.04-43.16 73.48-19.63 20.99-41.46 31.15-65.19 31.15-11.93 0-22.88-3.46-32.82-10.42-9.08-6.35-18.42-17.93-27.5-35.16-2.67-5.08-1.07-11.36 3.71-14.55 11.2-7.47 23.58-20.66 37.4-39.34 14.36-19.4 26.96-40.94 37.83-64.61 10.4-22.67 15.78-42.88 15.78-60.72 0-12.95-3.93-23.85-12.02-32.59-8.3-8.96-22.33-12.61-41.58-12.61-33.94 0-68.72 12.89-104.54 38.15-37.17 26.22-72.55 61.08-106.2 104.51-33.98 43.85-64.59 92.85-91.85 146.98-27.27 54.14-48.81 109.46-64.62 165.98-15.7 56.14-23.58 109.33-23.58 159.58 0 69.79 14.72 124.16 45.02 162.89 29.19 37.32 63.93 56.3 104.57 56.3 30.37 0 58.3-9.68 83.86-28.94 26.57-20.03 50.02-46.45 70.43-79.18 20.72-33.23 37.33-69.39 49.84-108.49 11.42-35.68 18.94-70.7 22.56-105.08-16.51-3-33.42-5.31-50.74-6.95-20.87-1.97-42.72-2.95-65.55-2.95-12.68 0-25.37.2-38.05.6-12.71.39-26.22.99-40.53 1.78a11.194 11.194 0 0 1-11.47-13.97c7.89-30.7 20.71-53.1 37.81-67.57 17.46-14.76 40.4-22.45 69.04-22.45 25.1 0 50.41 3.96 75.93 11.91 24.52 7.64 49.44 15.88 74.77 24.72 24.8 8.66 49.02 15.75 72.65 21.27 3.05.71 5.66 2.66 7.2 5.39 1.55 2.73 1.88 5.98.92 8.96 0 0-12 37.2-12.02 37.24-14.39 43.95-26.17 80.52-35.36 109.68-9.1 28.89-16.03 53.42-20.78 73.6-4.67 19.86-7.8 37.76-9.36 53.72-1.56 16.06-2.34 32.69-2.34 49.92 0 15.83.39 32.26 1.18 49.28.81 17.24 1.61 38.29 2.41 63.16.11 3.29-1.24 6.46-3.68 8.67a11.2 11.2 0 0 1-9 2.79c-26.84-3.58-46.58-11.82-59.55-23.9-13.28-12.36-21.92-26.81-26.04-43.29-3.23-12.91-5.09-25.52-5.59-37.84Zm-207.34 86.73c-44.8 0-86-11.8-123.6-35.4-37.6-23.6-67.6-58-90-103.2-22.4-45.2-33.6-99.4-33.6-162.6 0-61.6 9.6-124 28.8-187.2 19.2-63.2 45.6-123.4 79.2-180.6 33.6-57.2 72-108.2 115.2-153s89-80.2 137.4-106.2c48.4-26 97-39 145.8-39 35.2 0 63.2 6.6 84 19.8 20.8 13.2 35.8 30.6 45 52.2 9.2 21.6 13.8 44.8 13.8 69.6 0 28-5 56-15 84s-23.6 51.2-40.8 69.6c-17.2 18.4-36.2 27.6-57 27.6-9.6 0-18.4-2.8-26.4-8.4-8-5.6-16-16-24-31.2 12-8 25.4-22 40.2-42 14.8-20 27.8-42.2 39-66.6 11.2-24.4 16.8-46.2 16.8-65.4 0-16-5-29.4-15-40.2-10-10.8-26.6-16.2-49.8-16.2-36 0-73 13.4-111 40.2-38 26.8-74.2 62.4-108.6 106.8-34.4 44.4-65.4 94-93 148.8-27.6 54.8-49.4 110.8-65.4 168-16 57.2-24 111.4-24 162.6 0 72.8 15.8 129.4 47.4 169.8 31.6 40.4 69.4 60.6 113.4 60.6 32.8 0 63-10.4 90.6-31.2 27.6-20.8 52-48.2 73.2-82.2 21.2-34 38.2-71 51-111 12.8-40 20.8-79.2 24-117.6-20-4-40.6-7-61.8-9-21.2-2-43.4-3-66.6-3-12.8 0-25.6.2-38.4.6-12.8.4-26.4 1-40.8 1.8 7.2-28 18.6-48.6 34.2-61.8 15.6-13.2 36.2-19.8 61.8-19.8 24 0 48.2 3.8 72.6 11.4 24.4 7.6 49.2 15.8 74.4 24.6 25.2 8.8 49.8 16 73.8 21.6l-12 37.2c-14.4 44-26.2 80.6-35.4 109.8-9.2 29.2-16.2 54-21 74.4-4.8 20.4-8 38.8-9.6 55.2-1.6 16.4-2.4 33.4-2.4 51 0 16 .4 32.6 1.2 49.8.8 17.2 1.6 38.2 2.4 63-24-3.2-41.8-10.2-53.4-21-11.6-10.8-19.2-23.4-22.8-37.8-3.6-14.4-5.4-28.4-5.4-42v-12c0-4 .4-8 1.2-12-28 34.4-60.2 62.6-96.6 84.6-36.4 22-77.4 33-123 33Z"
+		style="fill:#fff"
+		transform="matrix(.49086 0 0 .49086 -2841.17 -2016.62)"
+	/>
+	<defs>
+		<radialGradient
+			id="a"
+			cx="0"
+			cy="0"
+			r="1"
+			gradientTransform="matrix(315 0 0 315 315 315)"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop offset="0" style="stop-color:white;stop-opacity:1" />
+			<stop offset="1" style="stop-color:#57d5a3;stop-opacity:1" />
+		</radialGradient>
+	</defs>
+</svg>`;

package/dist/dev/custom-overlay/vite-custom-overlay.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+import type { BetterErrorPayload } from '../vite.js';
+export declare class ViteCustomOverlay extends LitElement {
+    static styles: import("lit").CSSResult[];
+    accessor errorPayload: BetterErrorPayload['err'] | null;
+    root: ShadowRoot;
+    protected firstUpdated(): void;
+    initTheme(): void;
+    static createLink(text: string, href: string | undefined): HTMLDivElement;
+    appendCode(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vite-custom-overlay': ViteCustomOverlay;
+    }
+}
+//# sourceMappingURL=vite-custom-overlay.d.ts.map

package/dist/dev/custom-overlay/vite-custom-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite-custom-overlay.d.ts","sourceRoot":"","sources":["../../../src/dev/custom-overlay/vite-custom-overlay.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAGrD,qBACa,iBAAkB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,4BAOX;IAE0B,QAAQ,CAAC,YAAY,EAC9C,kBAAkB,CAAC,KAAK,CAAC,GACzB,IAAI,CAAQ;IAEf,IAAI,aAAoB;IAExB,SAAS,CAAC,YAAY,IAAI,IAAI;IAQ9B,SAAS;IAyBT,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,cAAc;IAkBzE,UAAU;IA2FV,MAAM;CAqEN;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,iBAAiB,CAAC;KACzC;CACD"}

package/dist/dev/custom-overlay/vite-custom-overlay.js

@@ -0,0 +1,208 @@
+// TODO: Convert remaining imperative code
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ViteCustomOverlay_1;
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import * as assets from './assets.js';
+import { style } from './vite-custom-overlay.styles.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+let ViteCustomOverlay = class ViteCustomOverlay extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.#errorPayload_accessor_storage = null;
+        this.root = this.shadowRoot;
+    }
+    static { ViteCustomOverlay_1 = this; }
+    static { this.styles = [
+        style,
+        css `
+			:host {
+				display: contents;
+			}
+		`,
+    ]; }
+    #errorPayload_accessor_storage;
+    get errorPayload() { return this.#errorPayload_accessor_storage; }
+    set errorPayload(value) { this.#errorPayload_accessor_storage = value; }
+    firstUpdated() {
+        this?.classList.add('betterr-dark');
+        this.root = this.shadowRoot;
+        this.appendCode();
+        this.initTheme();
+    }
+    initTheme() {
+        const themeToggle = this.root.querySelector('.theme-toggle-checkbox');
+        if (localStorage['betterrErrorOverlayTheme'] === 'dark' ||
+            (!('betterrErrorOverlayTheme' in localStorage) &&
+                window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            this?.classList.add('betterr-dark');
+            localStorage['betterrErrorOverlayTheme'] = 'dark';
+            themeToggle.checked = true;
+        }
+        else {
+            this?.classList.remove('betterr-dark');
+            themeToggle.checked = false;
+        }
+        themeToggle?.addEventListener('click', () => {
+            const isDark = localStorage['betterrErrorOverlayTheme'] === 'dark' ||
+                this?.classList.contains('betterr-dark');
+            this?.classList.toggle('betterr-dark', !isDark);
+            localStorage['betterrErrorOverlayTheme'] = isDark ? 'light' : 'dark';
+        });
+    }
+    static createLink(text, href) {
+        const linkContainer = document.createElement('div');
+        const linkElement = href
+            ? document.createElement('a')
+            : document.createElement('button');
+        linkElement.innerHTML = text;
+        if (href && linkElement instanceof HTMLAnchorElement) {
+            linkElement.href = href;
+            linkElement.target = '_blank';
+        }
+        linkContainer.appendChild(linkElement);
+        linkContainer.className = 'link';
+        return linkContainer;
+    }
+    appendCode() {
+        const err = this.errorPayload;
+        if (!err)
+            throw new ReferenceError();
+        const code = this.root.querySelector('#code');
+        if (code && err.loc?.file) {
+            code.style.display = 'block';
+            const codeHeader = code.querySelector('#code header');
+            const codeContent = code.querySelector('#code-content');
+            if (codeHeader) {
+                const separator = err.loc.file.includes('/') ? '/' : '\\';
+                const cleanFile = err.loc.file.split(separator).slice(-2).join('/');
+                const fileLocation = [cleanFile, err.loc.line, err.loc.column]
+                    .filter(Boolean)
+                    .join(':');
+                const absoluteFileLocation = [
+                    err.loc.file,
+                    err.loc.line,
+                    err.loc.column,
+                ]
+                    .filter(Boolean)
+                    .join(':');
+                const codeFile = codeHeader.getElementsByTagName('h2')[0];
+                if (codeFile) {
+                    codeFile.textContent = fileLocation;
+                    codeFile.title = absoluteFileLocation;
+                }
+                const editorLink = ViteCustomOverlay_1.createLink(`Open in editor${assets.openNewWindowIcon}`, undefined);
+                editorLink.onclick = () => {
+                    fetch(`/__open-in-editor?file=${encodeURIComponent(absoluteFileLocation)}`).catch(console.error);
+                };
+                codeHeader.appendChild(editorLink);
+            }
+            const hint = this.root.querySelector('#hint');
+            if (hint && err.hint) {
+                hint.style.display = 'flex';
+            }
+            const docslink = this.root.querySelector('#message');
+            if (docslink && err.docslink) {
+                docslink.appendChild(ViteCustomOverlay_1.createLink(`See Docs Reference${assets.openNewWindowIcon}`, err.docslink));
+            }
+            if (codeContent && err.highlightedCode) {
+                codeContent.innerHTML = err.highlightedCode;
+                window.requestAnimationFrame(() => {
+                    // NOTE: This cannot be `codeContent.querySelector` because `codeContent` still contain the old HTML
+                    const errorLine = this.root.querySelector('.error-line');
+                    if (errorLine) {
+                        if (errorLine.parentElement?.parentElement) {
+                            errorLine.parentElement.parentElement.scrollTop =
+                                errorLine.offsetTop -
+                                    errorLine.parentElement.parentElement.offsetTop -
+                                    8;
+                        }
+                        // Add an empty line below the error line so we can show a caret under the error
+                        if (err.loc?.column) {
+                            errorLine.insertAdjacentHTML('afterend', `\n<span class="line error-caret"><span style="padding-left:${err.loc.column - 1}ch;">^</span></span>`);
+                        }
+                    }
+                });
+            }
+        }
+    }
+    render() {
+        if (!this.errorPayload)
+            throw new ReferenceError('Missing payload!');
+        return html `
+			<div id="backdrop" class="betterr-dark">
+				<div id="layout">
+					<div id="theme-toggle-wrapper">
+						<div>
+							<input type="checkbox" class="theme-toggle-checkbox" id="chk" />
+							<label id="theme-toggle-label" for="chk">
+								${assets.iconTablerSun} ${assets.iconTablerMoon}
+
+								<div id="theme-toggle-ball">
+									<span class="sr-only">Use dark theme</span>
+								</div>
+							</label>
+						</div>
+					</div>
+
+					<header id="header">
+						<section id="header-left">
+							<h2 id="name">${this.errorPayload.name}</h2>
+							<h1 id="title">
+								${this.errorPayload.title || 'An error occurred.'}
+							</h1>
+						</section>
+						<div id="betterr-logo-overlay"></div>
+						<div id="betterr-logo">${assets.logo}</div>
+					</header>
+
+					<section id="message-hints">
+						<section id="message">
+							<span id="message-icon">${assets.messageIcon}</span>
+							<!-- prettier-ignore -->
+							<div id="message-content">${unsafeHTML(this.errorPayload['message'])}</div>
+						</section>
+
+						<section id="hint">
+							<span id="hint-icon"> ${assets.hintIcon} </span>
+							<div id="hint-content">${this.errorPayload.hint}</div>
+						</section>
+					</section>
+
+					<section id="code">
+						<header>
+							<h2></h2>
+						</header>
+
+						<div id="code-content"></div>
+					</section>
+
+					<section id="stack">
+						<h2>Stack Trace</h2>
+						<div id="stack-content">${this.errorPayload['stack']}</div>
+					</section>
+
+					${this.errorPayload.cause
+            ? html ` <!--  -->
+								<section id="cause">
+									<h2>Cause</h2>
+									<div id="cause-content">${this.errorPayload.cause}</div>
+								</section>`
+            : null}
+				</div>
+			</div>
+		`;
+    }
+};
+__decorate([
+    property({ type: Object })
+], ViteCustomOverlay.prototype, "errorPayload", null);
+ViteCustomOverlay = ViteCustomOverlay_1 = __decorate([
+    customElement('vite-custom-overlay')
+], ViteCustomOverlay);
+export { ViteCustomOverlay };

package/dist/dev/custom-overlay/vite-custom-overlay.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const style: import("lit").CSSResult;
+//# sourceMappingURL=vite-custom-overlay.styles.d.ts.map

package/dist/dev/custom-overlay/vite-custom-overlay.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite-custom-overlay.styles.d.ts","sourceRoot":"","sources":["../../../src/dev/custom-overlay/vite-custom-overlay.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,yBAkiBjB,CAAC"}