From c1fe3edcefc4edbf744587da14bb6a743a5a8b4b Mon Sep 17 00:00:00 2001
From: Tyson <TysonS.417@gmail.com>
Date: Sat, 3 May 2025 08:06:05 -0700
Subject: [PATCH 1/9] create runed file

---
 src/lib/client/SuperDebugRuned.svelte | 720 ++++++++++++++++++++++++++
 1 file changed, 720 insertions(+)
 create mode 100644 src/lib/client/SuperDebugRuned.svelte

diff --git a/src/lib/client/SuperDebugRuned.svelte b/src/lib/client/SuperDebugRuned.svelte
new file mode 100644
index 00000000..12350ca0
--- /dev/null
+++ b/src/lib/client/SuperDebugRuned.svelte
@@ -0,0 +1,720 @@
+<script>
+	import { browser } from '$app/environment';
+	import { page } from '$app/stores';
+	import { readable, get } from 'svelte/store';
+	import { clipboardCopy } from './clipboardCopy.js';
+
+	let styleInit = false;
+
+	/**
+	 * @typedef {unknown | Promise<unknown>} EncodeableData
+	 * @typedef {import('svelte/store').Readable<EncodeableData>} EncodeableDataStore
+	 *
+	 * @typedef {EncodeableData | EncodeableDataStore} DebugData
+	 */
+
+	/**
+	 * Data to be displayed as pretty JSON.
+	 *
+	 * @type {DebugData}
+	 */
+	export let data;
+	/**
+	 * Controls when the component should be displayed.
+	 *
+	 * Default: `true`.
+	 */
+	export let display = true;
+	/**
+	 * Controls when to show the HTTP status code of the current page (reflecs the status code of the last request).
+	 *
+	 * Default is `true`.
+	 */
+	export let status = true;
+	/**
+	 * Optional label to identify the component easily.
+	 */
+	export let label = '';
+	/**
+	 * Controls the maximum length of a string field of the data prop.
+	 *
+	 * Default is `120` characters. Set to `0` to disable trimming.
+	 */
+	export let stringTruncate = 120;
+	/**
+	 * Reference to the pre element that contains the data.
+	 *
+	 * @type {HTMLPreElement | undefined}
+	 */
+	export let ref = undefined;
+	/**
+	 * Controls if the data prop should be treated as a promise (skips promise detection when true).
+	 *
+	 * Default is `false`.
+	 * @deprecated Promises are auto-detected from 1.3.0.
+	 */
+	export let promise = false;
+	/**
+	 * Controls if the data prop should be treated as a plain object (skips promise and store detection when true, prevails over promise prop).
+	 *
+	 * Default is `false`.
+	 */
+	export let raw = false;
+	/**
+	 * Enables the display of fields of the data prop that are functions.
+	 *
+	 * Default is `false`.
+	 */
+	export let functions = false;
+	/**
+	 * Theme, which can also be customized with CSS variables:
+	 *
+	 * ```txt
+	 * --sd-bg-color
+	 * --sd-label-color
+	 * --sd-promise-loading-color
+	 * --sd-promise-rejected-color
+	 * --sd-code-default
+	 * --sd-info
+	 * --sd-success
+	 * --sd-redirect
+	 * --sd-error
+	 * --sd-code-key
+	 * --sd-code-string
+	 * --sd-code-date
+	 * --sd-code-boolean
+	 * --sd-code-number
+	 * --sd-code-bigint
+	 * --sd-code-null
+	 * --sd-code-nan
+	 * --sd-code-undefined
+	 * --sd-code-function
+	 * --sd-code-symbol
+	 * --sd-code-error
+	 * --sd-sb-width
+	 * --sd-sb-height
+	 * --sd-sb-track-color
+	 * --sd-sb-track-color-focus
+	 * --sd-sb-thumb-color
+	 * --sd-sb-thumb-color-focus
+	 * ```
+	 *
+	 * @type {"default" | "vscode"}
+	 */
+	export let theme = 'default';
+
+	///// Collapse behavior ///////////////////////////////////////////
+
+	/**
+	 * Will show a collapse bar at the bottom of the component, that can be used to hide and show the output. Default is `false`.
+	 * When toggled, the state is saved in session storage for all SuperDebug components on the page.
+	 */
+	export let collapsible = false;
+
+	/**
+	 * Initial state for the collapsed component. Use together with the `collapsible` prop.
+	 * On subsequent page loads, the session storage will determine the state of all SuperDebug components on the page.
+	 */
+	export let collapsed = false;
+
+	if (browser && collapsible) setCollapse();
+
+	/**
+	 * @param {boolean|undefined} status
+	 */
+	function setCollapse(status = undefined) {
+		let data;
+		// eslint-disable-next-line svelte/valid-compile
+		const route = $page.route.id ?? '';
+
+		try {
+			if (sessionStorage.SuperDebug) {
+				data = JSON.parse(sessionStorage.SuperDebug);
+			}
+
+			data = { collapsed: data && data.collapsed ? data.collapsed : {} };
+
+			data.collapsed[route] = status === undefined ? (data.collapsed[route] ?? collapsed) : status;
+		} catch {
+			data = {
+				collapsed: {
+					[route]: collapsed
+				}
+			};
+		}
+
+		if (status !== undefined) {
+			sessionStorage.SuperDebug = JSON.stringify(data);
+		}
+
+		collapsed = data.collapsed[route];
+	}
+
+	/**
+	 * @type {ReturnType<typeof setTimeout> | undefined}
+	 */
+	let copied;
+
+	/**
+	 * @param {Event} e
+	 */
+	async function copyContent(e) {
+		if (!e.target) return;
+		const parent = /** @type {HTMLElement} */ (e.target).closest('.super-debug');
+		if (!parent) return;
+
+		const codeEl = /** @type {HTMLPreElement} */ (parent.querySelector('.super-debug--code'));
+		if (!codeEl) return;
+
+		clearTimeout(copied);
+		await clipboardCopy(codeEl.innerText);
+		copied = setTimeout(() => (copied = undefined), 900);
+	}
+
+	/**
+	 * @param {File} file
+	 */
+	function fileToJSON(file) {
+		return {
+			name: file.name,
+			size: file.size,
+			type: file.type,
+			lastModified: new Date(file.lastModified)
+		};
+	}
+
+	///////////////////////////////////////////////////////////////////
+
+	/**
+	 * @param {unknown} json
+	 * @returns {string}
+	 */
+	function syntaxHighlight(json) {
+		switch (typeof json) {
+			case 'function': {
+				return `<span class="function">[function ${json.name ?? 'unnamed'}]</span>`;
+			}
+			case 'symbol': {
+				return `<span class="symbol">${json.toString()}</span>`;
+			}
+		}
+
+		const encodedString = JSON.stringify(
+			json,
+			function (key, value) {
+				if (value === undefined) {
+					return '#}#undefined';
+				}
+				if (typeof this === 'object' && this[key] instanceof Date) {
+					// @ts-expect-error Date checking works with isNaN
+					return '#}D#' + (isNaN(this[key]) ? 'Invalid Date' : value);
+				}
+				if (typeof value === 'number') {
+					if (value == Number.POSITIVE_INFINITY) return '#}#Inf';
+					if (value == Number.NEGATIVE_INFINITY) return '#}#-Inf';
+					if (isNaN(value)) return '#}#NaN';
+				}
+				if (typeof value === 'bigint') {
+					return '#}BI#' + value;
+				}
+				if (typeof value === 'function' && functions) {
+					return '#}F#' + `[function ${value.name}]`;
+				}
+				if (value instanceof Error) {
+					return '#}E#' + `${value.name}: ${value.message || value.cause || '(No error message)'}`;
+				}
+				if (value instanceof Set) {
+					return Array.from(value);
+				}
+				if (value instanceof Map) {
+					return Array.from(value.entries());
+				}
+				if (
+					typeof this === 'object' &&
+					typeof this[key] == 'object' &&
+					this[key] &&
+					'toExponential' in this[key]
+				) {
+					return '#}DE#' + this[key].toString();
+				}
+				if (browser && typeof this === 'object' && this[key] instanceof File) {
+					return fileToJSON(this[key]);
+				}
+				if (browser && typeof this === 'object' && this[key] instanceof FileList) {
+					/** @type FileList */
+					const list = this[key];
+					const output = [];
+					for (let i = 0; i < list.length; i++) {
+						const file = list.item(i);
+						if (file) output.push(fileToJSON(file));
+					}
+					return output;
+				}
+				return value;
+			},
+			2
+		)
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;');
+
+		return encodedString.replace(
+			/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g,
+			function (match) {
+				let cls = 'number';
+				if (/^"/.test(match)) {
+					if (/:$/.test(match)) {
+						cls = 'key';
+						match = match.slice(1, -2) + ':';
+					} else {
+						cls = 'string';
+						match =
+							stringTruncate > 0 && match.length > stringTruncate
+								? match.slice(0, stringTruncate / 2) +
+									`[..${match.length - stringTruncate}/${match.length}..]` +
+									match.slice(-stringTruncate / 2)
+								: match;
+
+						if (match == '"#}#undefined"') {
+							cls = 'undefined';
+							match = 'undefined';
+						} else if (match.startsWith('"#}D#')) {
+							cls = 'date';
+							match = match.slice(5, -1);
+						} else if (match == '"#}#NaN"') {
+							cls = 'nan';
+							match = 'NaN';
+						} else if (match == '"#}#Inf"') {
+							cls = 'nan';
+							match = 'Infinity';
+						} else if (match == '"#}#-Inf"') {
+							cls = 'nan';
+							match = '-Infinity';
+						} else if (match.startsWith('"#}BI#')) {
+							cls = 'bigint';
+							match = match.slice(6, -1) + 'n';
+						} else if (match.startsWith('"#}F#')) {
+							cls = 'function';
+							match = match.slice(5, -1);
+						} else if (match.startsWith('"#}E#')) {
+							cls = 'error';
+							match = match.slice(5, -1);
+						} else if (match.startsWith('"#}DE#')) {
+							cls = 'number';
+							match = match.slice(6, -1);
+						}
+					}
+				} else if (/true|false/.test(match)) {
+					cls = 'boolean';
+				} else if (/null/.test(match)) {
+					cls = 'null';
+				}
+				return '<span class="' + cls + '">' + match + '</span>';
+			}
+		);
+	}
+
+	/**
+	 * @param {EncodeableData} data
+	 * @param {boolean} raw
+	 * @param {boolean} promise
+	 * @returns {data is Promise<unknown>}
+	 */
+	function assertPromise(data, raw, promise) {
+		if (raw) {
+			return false;
+		}
+		return (
+			promise ||
+			(typeof data === 'object' &&
+				data !== null &&
+				'then' in data &&
+				typeof data['then'] === 'function')
+		);
+	}
+
+	/**
+	 * @param {DebugData} data
+	 * @param {boolean} raw
+	 * @returns {data is EncodeableDataStore}
+	 */
+	function assertStore(data, raw) {
+		if (raw) {
+			return false;
+		}
+		return (
+			typeof data === 'object' &&
+			data !== null &&
+			'subscribe' in data &&
+			typeof data['subscribe'] === 'function'
+		);
+	}
+
+	$: themeStyle =
+		theme === 'vscode'
+			? `
+      --sd-vscode-bg-color: #1f1f1f;
+      --sd-vscode-label-color: #cccccc;
+      --sd-vscode-code-default: #8c8a89;
+      --sd-vscode-code-key: #9cdcfe;
+      --sd-vscode-code-string: #ce9171;
+      --sd-vscode-code-number: #b5c180;
+      --sd-vscode-code-boolean: #4a9cd6;
+      --sd-vscode-code-null: #4a9cd6;
+      --sd-vscode-code-undefined: #4a9cd6;
+      --sd-vscode-code-nan: #4a9cd6;
+      --sd-vscode-code-symbol: #4de0c5;
+      --sd-vscode-sb-thumb-color: #35373a;
+      --sd-vscode-sb-thumb-color-focus: #4b4d50;
+    `
+			: undefined;
+
+	/** @type {import('svelte/store').Readable<EncodeableData>} */
+	$: debugData = assertStore(data, raw) ? data : readable(data);
+</script>
+
+{#if !styleInit}
+	<style>
+		.super-debug--absolute {
+			position: absolute;
+		}
+
+		.super-debug--top-0 {
+			top: 0;
+		}
+
+		.super-debug--inset-x-0 {
+			left: 0px;
+			right: 0px;
+		}
+
+		.super-debug--hidden {
+			height: 0;
+			overflow: hidden;
+		}
+
+		.super-debug--hidden:not(.super-debug--with-label) {
+			height: 1.5em;
+		}
+
+		.super-debug--rotated {
+			transform: rotate(180deg);
+		}
+
+		.super-debug {
+			--_sd-bg-color: var(--sd-bg-color, var(--sd-vscode-bg-color, rgb(30, 41, 59)));
+			position: relative;
+			background-color: var(--_sd-bg-color);
+			border-radius: 0.5rem;
+			overflow: hidden;
+		}
+
+		.super-debug--pre {
+			overflow-x: auto;
+		}
+
+		.super-debug--collapse {
+			display: block;
+			width: 100%;
+			color: rgba(255, 255, 255, 0.25);
+			background-color: rgba(255, 255, 255, 0.15);
+			padding: 5px 0;
+			display: flex;
+			justify-content: center;
+			border-color: transparent;
+			margin: 0;
+			padding: 3px 0;
+		}
+
+		.super-debug--collapse:focus {
+			color: #fafafa;
+			background-color: rgba(255, 255, 255, 0.25);
+		}
+
+		.super-debug--collapse:is(:hover) {
+			color: rgba(255, 255, 255, 0.35);
+			background-color: rgba(255, 255, 255, 0.25);
+		}
+
+		.super-debug--status {
+			display: flex;
+			padding: 1em;
+			padding-bottom: 0;
+			justify-content: space-between;
+			font-family:
+				Inconsolata, Monaco, Consolas, 'Lucida Console', 'Courier New', Courier, monospace;
+		}
+
+		.super-debug--right-status {
+			display: flex;
+			gap: 0.55em;
+		}
+
+		.super-debug--copy {
+			margin: 0;
+			padding: 0;
+			padding-top: 2px;
+			background-color: transparent;
+			border: 0;
+			color: #666;
+			cursor: pointer;
+		}
+
+		.super-debug--copy:hover {
+			background-color: transparent;
+			color: #666;
+		}
+
+		.super-debug--copy:focus {
+			background-color: transparent;
+			color: #666;
+		}
+
+		.super-debug--label {
+			color: var(--sd-label-color, var(--sd-vscode-label-color, white));
+		}
+
+		.super-debug--promise-loading {
+			color: var(--sd-promise-loading-color, var(--sd-vscode-promise-loading-color, #999));
+		}
+
+		.super-debug--promise-rejected {
+			color: var(--sd-promise-rejected-color, var(--sd-vscode-promise-rejected-color, #ff475d));
+		}
+
+		.super-debug pre {
+			color: var(--sd-code-default, var(--sd-vscode-code-default, #999));
+			background-color: var(--_sd-bg-color);
+			font-size: 1em;
+			margin-bottom: 0;
+			padding: 1em 0 1em 1em;
+		}
+
+		.super-debug--info {
+			color: var(--sd-info, var(--sd-vscode-info, rgb(85, 85, 255)));
+		}
+
+		.super-debug--success {
+			color: var(--sd-success, var(--sd-vscode-success, #2cd212));
+		}
+
+		.super-debug--redirect {
+			color: var(--sd-redirect, var(--sd-vscode-redirect, #03cae5));
+		}
+
+		.super-debug--error {
+			color: var(--sd-error, var(--sd-vscode-error, #ff475d));
+		}
+
+		.super-debug--code .key {
+			color: var(--sd-code-key, var(--sd-vscode-code-key, #eab308));
+		}
+
+		.super-debug--code .string {
+			color: var(--sd-code-string, var(--sd-vscode-code-string, #6ec687));
+		}
+
+		.super-debug--code .date {
+			color: var(--sd-code-date, var(--sd-vscode-code-date, #f06962));
+		}
+
+		.super-debug--code .boolean {
+			color: var(--sd-code-boolean, var(--sd-vscode-code-boolean, #79b8ff));
+		}
+
+		.super-debug--code .number {
+			color: var(--sd-code-number, var(--sd-vscode-code-number, #af77e9));
+		}
+
+		.super-debug--code .bigint {
+			color: var(--sd-code-bigint, var(--sd-vscode-code-bigint, #af77e9));
+		}
+
+		.super-debug--code .null {
+			color: var(--sd-code-null, var(--sd-vscode-code-null, #238afe));
+		}
+
+		.super-debug--code .nan {
+			color: var(--sd-code-nan, var(--sd-vscode-code-nan, #af77e9));
+		}
+
+		.super-debug--code .undefined {
+			color: var(--sd-code-undefined, var(--sd-vscode-code-undefined, #238afe));
+		}
+
+		.super-debug--code .function {
+			color: var(--sd-code-function, var(--sd-vscode-code-function, #f06962));
+		}
+
+		.super-debug--code .symbol {
+			color: var(--sd-code-symbol, var(--sd-vscode-code-symbol, #4de0c5));
+		}
+
+		.super-debug--code .error {
+			color: var(--sd-code-error, var(--sd-vscode-code-error, #ff475d));
+		}
+
+		.super-debug pre::-webkit-scrollbar {
+			width: var(--sd-sb-width, var(--sd-vscode-sb-width, 1rem));
+			height: var(--sd-sb-height, var(--sd-vscode-sb-height, 1rem));
+		}
+
+		.super-debug pre::-webkit-scrollbar-track {
+			border-radius: 12px;
+			background-color: var(
+				--sd-sb-track-color,
+				var(--sd-vscode-sb-track-color, hsl(0, 0%, 40%, 0.2))
+			);
+		}
+		.super-debug:is(:focus-within, :hover) pre::-webkit-scrollbar-track {
+			border-radius: 12px;
+			background-color: var(
+				--sd-sb-track-color-focus,
+				var(--sd-vscode-sb-track-color-focus, hsl(0, 0%, 50%, 0.2))
+			);
+		}
+
+		.super-debug pre::-webkit-scrollbar-thumb {
+			border-radius: 12px;
+			background-color: var(
+				--sd-sb-thumb-color,
+				var(--sd-vscode-sb-thumb-color, hsl(217, 50%, 50%, 0.5))
+			);
+		}
+		.super-debug:is(:focus-within, :hover) pre::-webkit-scrollbar-thumb {
+			border-radius: 12px;
+			background-color: var(
+				--sd-sb-thumb-color-focus,
+				var(--sd-vscode-sb-thumb-color-focus, hsl(217, 50%, 50%))
+			);
+		}
+	</style>
+	<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
+	{@const init = styleInit = true}
+{/if}
+
+<!-- eslint-disable svelte/no-at-html-tags -->
+{#if display}
+	<div
+		class="super-debug"
+		class:super-debug--collapsible={collapsible}
+		style={themeStyle}
+		dir="ltr"
+	>
+		<div
+			class="super-debug--status {label === ''
+				? 'super-debug--absolute super-debug--inset-x-0 super-debug--top-0'
+				: ''}"
+		>
+			<div class="super-debug--label">{label}</div>
+			<div class="super-debug--right-status">
+				<button type="button" class="super-debug--copy" on:click={copyContent}>
+					{#if !copied}
+						<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
+							><g
+								fill="none"
+								stroke="currentColor"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								><path
+									d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z"
+								/><path
+									d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1"
+								/></g
+							></svg
+						>
+					{:else}
+						<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
+							><g
+								fill="none"
+								stroke="currentColor"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								><path d="M15 12v6m-3-3h6" /><rect
+									width="14"
+									height="14"
+									x="8"
+									y="8"
+									rx="2"
+									ry="2"
+								/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></g
+							></svg
+						>
+					{/if}
+				</button>
+				{#if status}
+					<div
+						class:super-debug--info={$page.status < 200}
+						class:super-debug--success={$page.status >= 200 && $page.status < 300}
+						class:super-debug--redirect={$page.status >= 300 && $page.status < 400}
+						class:super-debug--error={$page.status >= 400}
+					>
+						{$page.status}
+					</div>
+				{/if}
+			</div>
+		</div>
+		<pre
+			class="super-debug--pre"
+			class:super-debug--with-label={label}
+			class:super-debug--hidden={collapsed}
+			bind:this={ref}><code class="super-debug--code"
+				><slot
+					>{#if assertPromise($debugData, raw, promise)}{#await $debugData}<div
+								class="super-debug--promise-loading">Loading data...</div>{:then result}{@html syntaxHighlight(
+								assertStore(result, raw) ? get(result) : result
+							)}{:catch error}<span class="super-debug--promise-rejected">Rejected:</span
+							> {@html syntaxHighlight(error)}{/await}{:else}{@html syntaxHighlight(
+							$debugData
+						)}{/if}</slot
+				></code
+			></pre>
+		{#if collapsible}
+			<button
+				type="button"
+				on:click|preventDefault={() => setCollapse(!collapsed)}
+				class="super-debug--collapse"
+				aria-label="Collapse"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="20"
+					height="20"
+					viewBox="0 0 24 24"
+					class:super-debug--rotated={collapsed}
+					><path
+						fill="currentColor"
+						d="M4.08 11.92L12 4l7.92 7.92l-1.42 1.41l-5.5-5.5V22h-2V7.83l-5.5 5.5l-1.42-1.41M12 4h10V2H2v2h10Z"
+					/></svg
+				>
+			</button>
+		{/if}
+	</div>
+{/if}
+
+<!--
+  @component
+
+  SuperDebug is a debugging component that gives you colorized and nicely formatted output for any data structure, usually $form.
+  
+  Other use cases includes debugging plain objects, promises, stores and more.
+
+  More info: https://superforms.rocks/super-debug
+  
+  **Short example:**
+
+  ```svelte
+  <script>
+    import SuperDebug from 'sveltekit-superforms';
+    import { superForm } from 'sveltekit-superforms';
+
+    export let data;
+    
+    const { errors, form, enhance } = superForm(data.form);
+  </script>
+  
+  <SuperDebug data={$form} label="My form data" />
+  ```
+-->

From 5450c509219e47ed3953c116a1065c1700f6f4bf Mon Sep 17 00:00:00 2001
From: Tyson <TysonS.417@gmail.com>
Date: Sat, 3 May 2025 08:43:45 -0700
Subject: [PATCH 2/9] convert SuperDebug to ts

---
 src/lib/client/SuperDebugRuned.svelte | 53 ++++++++++++++++-----------
 1 file changed, 32 insertions(+), 21 deletions(-)

diff --git a/src/lib/client/SuperDebugRuned.svelte b/src/lib/client/SuperDebugRuned.svelte
index 12350ca0..0ceb8d75 100644
--- a/src/lib/client/SuperDebugRuned.svelte
+++ b/src/lib/client/SuperDebugRuned.svelte
@@ -1,4 +1,5 @@
-<script>
+<script lang="ts">
+	import type { Readable } from 'svelte/store';
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
 	import { readable, get } from 'svelte/store';
@@ -6,19 +7,18 @@
 
 	let styleInit = false;
 
-	/**
-	 * @typedef {unknown | Promise<unknown>} EncodeableData
-	 * @typedef {import('svelte/store').Readable<EncodeableData>} EncodeableDataStore
-	 *
-	 * @typedef {EncodeableData | EncodeableDataStore} DebugData
-	 */
+	type EncodeableData = unknown | Promise<unknown>;
+
+	type EncodeableDataStore = Readable<EncodeableData>;
+
+	type DebugData = EncodeableData | EncodeableDataStore;
 
 	/**
 	 * Data to be displayed as pretty JSON.
 	 *
 	 * @type {DebugData}
 	 */
-	export let data;
+	export let data: DebugData;
 	/**
 	 * Controls when the component should be displayed.
 	 *
@@ -46,7 +46,7 @@
 	 *
 	 * @type {HTMLPreElement | undefined}
 	 */
-	export let ref = undefined;
+	export let ref: HTMLPreElement | undefined = undefined;
 	/**
 	 * Controls if the data prop should be treated as a promise (skips promise detection when true).
 	 *
@@ -101,7 +101,7 @@
 	 *
 	 * @type {"default" | "vscode"}
 	 */
-	export let theme = 'default';
+	export let theme: 'default' | 'vscode' = 'default';
 
 	///// Collapse behavior ///////////////////////////////////////////
 
@@ -122,7 +122,7 @@
 	/**
 	 * @param {boolean|undefined} status
 	 */
-	function setCollapse(status = undefined) {
+	function setCollapse(status: boolean | undefined = undefined) {
 		let data;
 		// eslint-disable-next-line svelte/valid-compile
 		const route = $page.route.id ?? '';
@@ -153,17 +153,24 @@
 	/**
 	 * @type {ReturnType<typeof setTimeout> | undefined}
 	 */
-	let copied;
+	let copied: ReturnType<typeof setTimeout> | undefined;
 
 	/**
-	 * @param {Event} e
+	 * @param {MouseEvent & {
+			currentTarget: EventTarget & HTMLButtonElement;
+		}} e
 	 */
-	async function copyContent(e) {
+	async function copyContent(
+		e: MouseEvent & {
+			currentTarget: EventTarget & HTMLButtonElement;
+		}
+	) {
 		if (!e.target) return;
-		const parent = /** @type {HTMLElement} */ (e.target).closest('.super-debug');
+		// @ts-expect-error why not use e.currentTarget here?
+		const parent = e.target.closest('.super-debug');
 		if (!parent) return;
 
-		const codeEl = /** @type {HTMLPreElement} */ (parent.querySelector('.super-debug--code'));
+		const codeEl = parent.querySelector<HTMLPreElement>('.super-debug--code');
 		if (!codeEl) return;
 
 		clearTimeout(copied);
@@ -174,7 +181,7 @@
 	/**
 	 * @param {File} file
 	 */
-	function fileToJSON(file) {
+	function fileToJSON(file: File) {
 		return {
 			name: file.name,
 			size: file.size,
@@ -189,7 +196,7 @@
 	 * @param {unknown} json
 	 * @returns {string}
 	 */
-	function syntaxHighlight(json) {
+	function syntaxHighlight(json: unknown): string {
 		switch (typeof json) {
 			case 'function': {
 				return `<span class="function">[function ${json.name ?? 'unnamed'}]</span>`;
@@ -242,7 +249,7 @@
 				}
 				if (browser && typeof this === 'object' && this[key] instanceof FileList) {
 					/** @type FileList */
-					const list = this[key];
+					const list: FileList = this[key];
 					const output = [];
 					for (let i = 0; i < list.length; i++) {
 						const file = list.item(i);
@@ -320,7 +327,11 @@
 	 * @param {boolean} promise
 	 * @returns {data is Promise<unknown>}
 	 */
-	function assertPromise(data, raw, promise) {
+	function assertPromise(
+		data: EncodeableData,
+		raw: boolean,
+		promise: boolean
+	): data is Promise<unknown> {
 		if (raw) {
 			return false;
 		}
@@ -338,7 +349,7 @@
 	 * @param {boolean} raw
 	 * @returns {data is EncodeableDataStore}
 	 */
-	function assertStore(data, raw) {
+	function assertStore(data: DebugData, raw: boolean): data is EncodeableDataStore {
 		if (raw) {
 			return false;
 		}

From 3f835c37d2dca45e3382cf00b62a91227c518b14 Mon Sep 17 00:00:00 2001
From: Tyson <TysonS.417@gmail.com>
Date: Sat, 3 May 2025 08:44:38 -0700
Subject: [PATCH 3/9] convert to runes

---
 src/lib/client/SuperDebugRuned.svelte | 274 ++++++++++++++------------
 1 file changed, 144 insertions(+), 130 deletions(-)

diff --git a/src/lib/client/SuperDebugRuned.svelte b/src/lib/client/SuperDebugRuned.svelte
index 0ceb8d75..8b3bbac1 100644
--- a/src/lib/client/SuperDebugRuned.svelte
+++ b/src/lib/client/SuperDebugRuned.svelte
@@ -1,121 +1,139 @@
 <script lang="ts">
 	import type { Readable } from 'svelte/store';
 	import { browser } from '$app/environment';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import { readable, get } from 'svelte/store';
 	import { clipboardCopy } from './clipboardCopy.js';
 
-	let styleInit = false;
-
 	type EncodeableData = unknown | Promise<unknown>;
 
 	type EncodeableDataStore = Readable<EncodeableData>;
 
 	type DebugData = EncodeableData | EncodeableDataStore;
 
-	/**
-	 * Data to be displayed as pretty JSON.
-	 *
-	 * @type {DebugData}
-	 */
-	export let data: DebugData;
-	/**
-	 * Controls when the component should be displayed.
-	 *
-	 * Default: `true`.
-	 */
-	export let display = true;
-	/**
-	 * Controls when to show the HTTP status code of the current page (reflecs the status code of the last request).
-	 *
-	 * Default is `true`.
-	 */
-	export let status = true;
-	/**
-	 * Optional label to identify the component easily.
-	 */
-	export let label = '';
-	/**
-	 * Controls the maximum length of a string field of the data prop.
-	 *
-	 * Default is `120` characters. Set to `0` to disable trimming.
-	 */
-	export let stringTruncate = 120;
-	/**
-	 * Reference to the pre element that contains the data.
-	 *
-	 * @type {HTMLPreElement | undefined}
-	 */
-	export let ref: HTMLPreElement | undefined = undefined;
-	/**
-	 * Controls if the data prop should be treated as a promise (skips promise detection when true).
-	 *
-	 * Default is `false`.
-	 * @deprecated Promises are auto-detected from 1.3.0.
-	 */
-	export let promise = false;
-	/**
-	 * Controls if the data prop should be treated as a plain object (skips promise and store detection when true, prevails over promise prop).
-	 *
-	 * Default is `false`.
-	 */
-	export let raw = false;
-	/**
-	 * Enables the display of fields of the data prop that are functions.
-	 *
-	 * Default is `false`.
-	 */
-	export let functions = false;
-	/**
-	 * Theme, which can also be customized with CSS variables:
-	 *
-	 * ```txt
-	 * --sd-bg-color
-	 * --sd-label-color
-	 * --sd-promise-loading-color
-	 * --sd-promise-rejected-color
-	 * --sd-code-default
-	 * --sd-info
-	 * --sd-success
-	 * --sd-redirect
-	 * --sd-error
-	 * --sd-code-key
-	 * --sd-code-string
-	 * --sd-code-date
-	 * --sd-code-boolean
-	 * --sd-code-number
-	 * --sd-code-bigint
-	 * --sd-code-null
-	 * --sd-code-nan
-	 * --sd-code-undefined
-	 * --sd-code-function
-	 * --sd-code-symbol
-	 * --sd-code-error
-	 * --sd-sb-width
-	 * --sd-sb-height
-	 * --sd-sb-track-color
-	 * --sd-sb-track-color-focus
-	 * --sd-sb-thumb-color
-	 * --sd-sb-thumb-color-focus
-	 * ```
-	 *
-	 * @type {"default" | "vscode"}
-	 */
-	export let theme: 'default' | 'vscode' = 'default';
-
-	///// Collapse behavior ///////////////////////////////////////////
+	interface Props {
+		/**
+		 * Data to be displayed as pretty JSON.
+		 *
+		 * @type {DebugData}
+		 */
+		data: DebugData;
+		/**
+		 * Controls when the component should be displayed.
+		 *
+		 * Default: `true`.
+		 */
+		display?: boolean;
+		/**
+		 * Controls when to show the HTTP status code of the current page (reflecs the status code of the last request).
+		 *
+		 * Default is `true`.
+		 */
+		status?: boolean;
+		/**
+		 * Optional label to identify the component easily.
+		 */
+		label?: string;
+		/**
+		 * Controls the maximum length of a string field of the data prop.
+		 *
+		 * Default is `120` characters. Set to `0` to disable trimming.
+		 */
+		stringTruncate?: number;
+		/**
+		 * Reference to the pre element that contains the data.
+		 *
+		 * @type {HTMLPreElement | undefined}
+		 */
+		ref?: HTMLPreElement | undefined;
+		/**
+		 * Controls if the data prop should be treated as a promise (skips promise detection when true).
+		 *
+		 * Default is `false`.
+		 * @deprecated Promises are auto-detected from 1.3.0.
+		 */
+		promise?: boolean;
+		/**
+		 * Controls if the data prop should be treated as a plain object (skips promise and store detection when true, prevails over promise prop).
+		 *
+		 * Default is `false`.
+		 */
+		raw?: boolean;
+		/**
+		 * Enables the display of fields of the data prop that are functions.
+		 *
+		 * Default is `false`.
+		 */
+		functions?: boolean;
+		/**
+		 * Theme, which can also be customized with CSS variables:
+		 *
+		 * ```txt
+		 * --sd-bg-color
+		 * --sd-label-color
+		 * --sd-promise-loading-color
+		 * --sd-promise-rejected-color
+		 * --sd-code-default
+		 * --sd-info
+		 * --sd-success
+		 * --sd-redirect
+		 * --sd-error
+		 * --sd-code-key
+		 * --sd-code-string
+		 * --sd-code-date
+		 * --sd-code-boolean
+		 * --sd-code-number
+		 * --sd-code-bigint
+		 * --sd-code-null
+		 * --sd-code-nan
+		 * --sd-code-undefined
+		 * --sd-code-function
+		 * --sd-code-symbol
+		 * --sd-code-error
+		 * --sd-sb-width
+		 * --sd-sb-height
+		 * --sd-sb-track-color
+		 * --sd-sb-track-color-focus
+		 * --sd-sb-thumb-color
+		 * --sd-sb-thumb-color-focus
+		 * ```
+		 *
+		 * @type {"default" | "vscode"}
+		 */
+		theme?: 'default' | 'vscode';
+		/**
+		 * Will show a collapse bar at the bottom of the component, that can be used to hide and show the output. Default is `false`.
+		 * When toggled, the state is saved in session storage for all SuperDebug components on the page.
+		 */
+		collapsible?: boolean;
+		/**
+		 * Initial state for the collapsed component. Use together with the `collapsible` prop.
+		 * On subsequent page loads, the session storage will determine the state of all SuperDebug components on the page.
+		 */
+		collapsed?: boolean;
+		children?: import('svelte').Snippet;
+	}
 
-	/**
-	 * Will show a collapse bar at the bottom of the component, that can be used to hide and show the output. Default is `false`.
-	 * When toggled, the state is saved in session storage for all SuperDebug components on the page.
-	 */
-	export let collapsible = false;
+	let {
+		data,
+		display = true,
+		status = true,
+		label = '',
+		stringTruncate = 120,
+		ref = $bindable(undefined),
+		promise = false,
+		raw = false,
+		functions = false,
+		theme = 'default',
+		collapsible = false,
+		collapsed = $bindable(false),
+		children
+	}: Props = $props();
+
+	let copied = $state<ReturnType<typeof setTimeout> | undefined>();
+	let styleInit = $state(false);
 
-	/**
-	 * Initial state for the collapsed component. Use together with the `collapsible` prop.
-	 * On subsequent page loads, the session storage will determine the state of all SuperDebug components on the page.
-	 */
-	export let collapsed = false;
+	///// Collapse behavior ///////////////////////////////////////////
 
 	if (browser && collapsible) setCollapse();
 
@@ -125,7 +143,7 @@
 	function setCollapse(status: boolean | undefined = undefined) {
 		let data;
 		// eslint-disable-next-line svelte/valid-compile
-		const route = $page.route.id ?? '';
+		const route = page.route.id ?? '';
 
 		try {
 			if (sessionStorage.SuperDebug) {
@@ -150,11 +168,6 @@
 		collapsed = data.collapsed[route];
 	}
 
-	/**
-	 * @type {ReturnType<typeof setTimeout> | undefined}
-	 */
-	let copied: ReturnType<typeof setTimeout> | undefined;
-
 	/**
 	 * @param {MouseEvent & {
 			currentTarget: EventTarget & HTMLButtonElement;
@@ -361,7 +374,7 @@
 		);
 	}
 
-	$: themeStyle =
+	const themeStyle = $derived(
 		theme === 'vscode'
 			? `
       --sd-vscode-bg-color: #1f1f1f;
@@ -378,10 +391,10 @@
       --sd-vscode-sb-thumb-color: #35373a;
       --sd-vscode-sb-thumb-color-focus: #4b4d50;
     `
-			: undefined;
+			: undefined
+	);
 
-	/** @type {import('svelte/store').Readable<EncodeableData>} */
-	$: debugData = assertStore(data, raw) ? data : readable(data);
+	let debugData = $derived(assertStore(data, raw) ? data : readable(data));
 </script>
 
 {#if !styleInit}
@@ -619,7 +632,7 @@
 		>
 			<div class="super-debug--label">{label}</div>
 			<div class="super-debug--right-status">
-				<button type="button" class="super-debug--copy" on:click={copyContent}>
+				<button type="button" class="super-debug--copy" onclick={copyContent}>
 					{#if !copied}
 						<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
 							><g
@@ -657,12 +670,12 @@
 				</button>
 				{#if status}
 					<div
-						class:super-debug--info={$page.status < 200}
-						class:super-debug--success={$page.status >= 200 && $page.status < 300}
-						class:super-debug--redirect={$page.status >= 300 && $page.status < 400}
-						class:super-debug--error={$page.status >= 400}
+						class:super-debug--info={page.status < 200}
+						class:super-debug--success={page.status >= 200 && page.status < 300}
+						class:super-debug--redirect={page.status >= 300 && page.status < 400}
+						class:super-debug--error={page.status >= 400}
 					>
-						{$page.status}
+						{page.status}
 					</div>
 				{/if}
 			</div>
@@ -672,20 +685,21 @@
 			class:super-debug--with-label={label}
 			class:super-debug--hidden={collapsed}
 			bind:this={ref}><code class="super-debug--code"
-				><slot
-					>{#if assertPromise($debugData, raw, promise)}{#await $debugData}<div
-								class="super-debug--promise-loading">Loading data...</div>{:then result}{@html syntaxHighlight(
-								assertStore(result, raw) ? get(result) : result
-							)}{:catch error}<span class="super-debug--promise-rejected">Rejected:</span
-							> {@html syntaxHighlight(error)}{/await}{:else}{@html syntaxHighlight(
-							$debugData
-						)}{/if}</slot
-				></code
+				>{#if children}{@render children()}{:else if assertPromise($debugData, raw, promise)}{#await $debugData}<div
+							class="super-debug--promise-loading">Loading data...</div>{:then result}{@html syntaxHighlight(
+							assertStore(result, raw) ? get(result) : result
+						)}{:catch error}<span class="super-debug--promise-rejected">Rejected:</span
+						> {@html syntaxHighlight(error)}{/await}{:else}{@html syntaxHighlight(
+						$debugData
+					)}{/if}</code
 			></pre>
 		{#if collapsible}
 			<button
 				type="button"
-				on:click|preventDefault={() => setCollapse(!collapsed)}
+				onclick={(e) => {
+					e.preventDefault();
+					setCollapse(!collapsed);
+				}}
 				class="super-debug--collapse"
 				aria-label="Collapse"
 			>

From 0cbb6002caa6ab68e8a64364fdd54d08330b118b Mon Sep 17 00:00:00 2001
From: Tyson <TysonS.417@gmail.com>
Date: Sat, 3 May 2025 08:52:31 -0700
Subject: [PATCH 4/9] add SuperDebugRuned export

---
 src/lib/client/SuperDebugRuned.svelte | 8 ++++----
 src/lib/index.ts                      | 2 ++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/lib/client/SuperDebugRuned.svelte b/src/lib/client/SuperDebugRuned.svelte
index 8b3bbac1..f559065d 100644
--- a/src/lib/client/SuperDebugRuned.svelte
+++ b/src/lib/client/SuperDebugRuned.svelte
@@ -722,7 +722,7 @@
 <!--
   @component
 
-  SuperDebug is a debugging component that gives you colorized and nicely formatted output for any data structure, usually $form.
+  SuperDebugRuned is a debugging component that gives you colorized and nicely formatted output for any data structure, usually $form.
   
   Other use cases includes debugging plain objects, promises, stores and more.
 
@@ -732,14 +732,14 @@
 
   ```svelte
   <script>
-    import SuperDebug from 'sveltekit-superforms';
+    import { SuperDebugRuned } from 'sveltekit-superforms';
     import { superForm } from 'sveltekit-superforms';
 
-    export let data;
+    const { data } = $props();
     
     const { errors, form, enhance } = superForm(data.form);
   </script>
   
-  <SuperDebug data={$form} label="My form data" />
+  <SuperDebugRuned data={$form} label="My form data" />
   ```
 -->
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 5ae87143..2ef70a4a 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,6 +1,8 @@
 import SuperDebug from './client/SuperDebug.svelte';
+import SuperDebugRuned from './client/SuperDebugRuned.svelte';
 
 export default SuperDebug;
+export { SuperDebugRuned };
 export { SuperFormError, SchemaError } from './errors.js';
 
 export type { InputConstraints, InputConstraint } from '$lib/jsonSchema/constraints.js';

From 039971b58e198dc6f505e620a66c15b96e9cdf48 Mon Sep 17 00:00:00 2001
From: Tyson <TysonS.417@gmail.com>
Date: Sat, 3 May 2025 09:23:12 -0700
Subject: [PATCH 5/9] remove named export

---
 src/lib/client/SuperDebug.svelte       | 700 +-----------------------
 src/lib/client/SuperDebugLegacy.svelte | 720 +++++++++++++++++++++++++
 src/lib/client/SuperDebugRuned.svelte  |   2 +-
 src/lib/index.ts                       |   2 -
 4 files changed, 731 insertions(+), 693 deletions(-)
 create mode 100644 src/lib/client/SuperDebugLegacy.svelte

diff --git a/src/lib/client/SuperDebug.svelte b/src/lib/client/SuperDebug.svelte
index 12350ca0..198894e0 100644
--- a/src/lib/client/SuperDebug.svelte
+++ b/src/lib/client/SuperDebug.svelte
@@ -1,697 +1,17 @@
-<script>
-	import { browser } from '$app/environment';
-	import { page } from '$app/stores';
-	import { readable, get } from 'svelte/store';
-	import { clipboardCopy } from './clipboardCopy.js';
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { VERSION } from 'svelte/compiler';
+	import SuperDebugLegacy from './SuperDebugLegacy.svelte';
+	import SuperDebugRuned from './SuperDebugRuned.svelte';
 
-	let styleInit = false;
-
-	/**
-	 * @typedef {unknown | Promise<unknown>} EncodeableData
-	 * @typedef {import('svelte/store').Readable<EncodeableData>} EncodeableDataStore
-	 *
-	 * @typedef {EncodeableData | EncodeableDataStore} DebugData
-	 */
-
-	/**
-	 * Data to be displayed as pretty JSON.
-	 *
-	 * @type {DebugData}
-	 */
-	export let data;
-	/**
-	 * Controls when the component should be displayed.
-	 *
-	 * Default: `true`.
-	 */
-	export let display = true;
-	/**
-	 * Controls when to show the HTTP status code of the current page (reflecs the status code of the last request).
-	 *
-	 * Default is `true`.
-	 */
-	export let status = true;
-	/**
-	 * Optional label to identify the component easily.
-	 */
-	export let label = '';
-	/**
-	 * Controls the maximum length of a string field of the data prop.
-	 *
-	 * Default is `120` characters. Set to `0` to disable trimming.
-	 */
-	export let stringTruncate = 120;
-	/**
-	 * Reference to the pre element that contains the data.
-	 *
-	 * @type {HTMLPreElement | undefined}
-	 */
-	export let ref = undefined;
-	/**
-	 * Controls if the data prop should be treated as a promise (skips promise detection when true).
-	 *
-	 * Default is `false`.
-	 * @deprecated Promises are auto-detected from 1.3.0.
-	 */
-	export let promise = false;
-	/**
-	 * Controls if the data prop should be treated as a plain object (skips promise and store detection when true, prevails over promise prop).
-	 *
-	 * Default is `false`.
-	 */
-	export let raw = false;
-	/**
-	 * Enables the display of fields of the data prop that are functions.
-	 *
-	 * Default is `false`.
-	 */
-	export let functions = false;
-	/**
-	 * Theme, which can also be customized with CSS variables:
-	 *
-	 * ```txt
-	 * --sd-bg-color
-	 * --sd-label-color
-	 * --sd-promise-loading-color
-	 * --sd-promise-rejected-color
-	 * --sd-code-default
-	 * --sd-info
-	 * --sd-success
-	 * --sd-redirect
-	 * --sd-error
-	 * --sd-code-key
-	 * --sd-code-string
-	 * --sd-code-date
-	 * --sd-code-boolean
-	 * --sd-code-number
-	 * --sd-code-bigint
-	 * --sd-code-null
-	 * --sd-code-nan
-	 * --sd-code-undefined
-	 * --sd-code-function
-	 * --sd-code-symbol
-	 * --sd-code-error
-	 * --sd-sb-width
-	 * --sd-sb-height
-	 * --sd-sb-track-color
-	 * --sd-sb-track-color-focus
-	 * --sd-sb-thumb-color
-	 * --sd-sb-thumb-color-focus
-	 * ```
-	 *
-	 * @type {"default" | "vscode"}
-	 */
-	export let theme = 'default';
-
-	///// Collapse behavior ///////////////////////////////////////////
-
-	/**
-	 * Will show a collapse bar at the bottom of the component, that can be used to hide and show the output. Default is `false`.
-	 * When toggled, the state is saved in session storage for all SuperDebug components on the page.
-	 */
-	export let collapsible = false;
-
-	/**
-	 * Initial state for the collapsed component. Use together with the `collapsible` prop.
-	 * On subsequent page loads, the session storage will determine the state of all SuperDebug components on the page.
-	 */
-	export let collapsed = false;
-
-	if (browser && collapsible) setCollapse();
-
-	/**
-	 * @param {boolean|undefined} status
-	 */
-	function setCollapse(status = undefined) {
-		let data;
-		// eslint-disable-next-line svelte/valid-compile
-		const route = $page.route.id ?? '';
-
-		try {
-			if (sessionStorage.SuperDebug) {
-				data = JSON.parse(sessionStorage.SuperDebug);
-			}
-
-			data = { collapsed: data && data.collapsed ? data.collapsed : {} };
-
-			data.collapsed[route] = status === undefined ? (data.collapsed[route] ?? collapsed) : status;
-		} catch {
-			data = {
-				collapsed: {
-					[route]: collapsed
-				}
-			};
-		}
-
-		if (status !== undefined) {
-			sessionStorage.SuperDebug = JSON.stringify(data);
-		}
-
-		collapsed = data.collapsed[route];
-	}
-
-	/**
-	 * @type {ReturnType<typeof setTimeout> | undefined}
-	 */
-	let copied;
-
-	/**
-	 * @param {Event} e
-	 */
-	async function copyContent(e) {
-		if (!e.target) return;
-		const parent = /** @type {HTMLElement} */ (e.target).closest('.super-debug');
-		if (!parent) return;
-
-		const codeEl = /** @type {HTMLPreElement} */ (parent.querySelector('.super-debug--code'));
-		if (!codeEl) return;
-
-		clearTimeout(copied);
-		await clipboardCopy(codeEl.innerText);
-		copied = setTimeout(() => (copied = undefined), 900);
-	}
-
-	/**
-	 * @param {File} file
-	 */
-	function fileToJSON(file) {
-		return {
-			name: file.name,
-			size: file.size,
-			type: file.type,
-			lastModified: new Date(file.lastModified)
-		};
-	}
-
-	///////////////////////////////////////////////////////////////////
-
-	/**
-	 * @param {unknown} json
-	 * @returns {string}
-	 */
-	function syntaxHighlight(json) {
-		switch (typeof json) {
-			case 'function': {
-				return `<span class="function">[function ${json.name ?? 'unnamed'}]</span>`;
-			}
-			case 'symbol': {
-				return `<span class="symbol">${json.toString()}</span>`;
-			}
-		}
-
-		const encodedString = JSON.stringify(
-			json,
-			function (key, value) {
-				if (value === undefined) {
-					return '#}#undefined';
-				}
-				if (typeof this === 'object' && this[key] instanceof Date) {
-					// @ts-expect-error Date checking works with isNaN
-					return '#}D#' + (isNaN(this[key]) ? 'Invalid Date' : value);
-				}
-				if (typeof value === 'number') {
-					if (value == Number.POSITIVE_INFINITY) return '#}#Inf';
-					if (value == Number.NEGATIVE_INFINITY) return '#}#-Inf';
-					if (isNaN(value)) return '#}#NaN';
-				}
-				if (typeof value === 'bigint') {
-					return '#}BI#' + value;
-				}
-				if (typeof value === 'function' && functions) {
-					return '#}F#' + `[function ${value.name}]`;
-				}
-				if (value instanceof Error) {
-					return '#}E#' + `${value.name}: ${value.message || value.cause || '(No error message)'}`;
-				}
-				if (value instanceof Set) {
-					return Array.from(value);
-				}
-				if (value instanceof Map) {
-					return Array.from(value.entries());
-				}
-				if (
-					typeof this === 'object' &&
-					typeof this[key] == 'object' &&
-					this[key] &&
-					'toExponential' in this[key]
-				) {
-					return '#}DE#' + this[key].toString();
-				}
-				if (browser && typeof this === 'object' && this[key] instanceof File) {
-					return fileToJSON(this[key]);
-				}
-				if (browser && typeof this === 'object' && this[key] instanceof FileList) {
-					/** @type FileList */
-					const list = this[key];
-					const output = [];
-					for (let i = 0; i < list.length; i++) {
-						const file = list.item(i);
-						if (file) output.push(fileToJSON(file));
-					}
-					return output;
-				}
-				return value;
-			},
-			2
-		)
-			.replace(/&/g, '&amp;')
-			.replace(/</g, '&lt;')
-			.replace(/>/g, '&gt;');
-
-		return encodedString.replace(
-			/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g,
-			function (match) {
-				let cls = 'number';
-				if (/^"/.test(match)) {
-					if (/:$/.test(match)) {
-						cls = 'key';
-						match = match.slice(1, -2) + ':';
-					} else {
-						cls = 'string';
-						match =
-							stringTruncate > 0 && match.length > stringTruncate
-								? match.slice(0, stringTruncate / 2) +
-									`[..${match.length - stringTruncate}/${match.length}..]` +
-									match.slice(-stringTruncate / 2)
-								: match;
-
-						if (match == '"#}#undefined"') {
-							cls = 'undefined';
-							match = 'undefined';
-						} else if (match.startsWith('"#}D#')) {
-							cls = 'date';
-							match = match.slice(5, -1);
-						} else if (match == '"#}#NaN"') {
-							cls = 'nan';
-							match = 'NaN';
-						} else if (match == '"#}#Inf"') {
-							cls = 'nan';
-							match = 'Infinity';
-						} else if (match == '"#}#-Inf"') {
-							cls = 'nan';
-							match = '-Infinity';
-						} else if (match.startsWith('"#}BI#')) {
-							cls = 'bigint';
-							match = match.slice(6, -1) + 'n';
-						} else if (match.startsWith('"#}F#')) {
-							cls = 'function';
-							match = match.slice(5, -1);
-						} else if (match.startsWith('"#}E#')) {
-							cls = 'error';
-							match = match.slice(5, -1);
-						} else if (match.startsWith('"#}DE#')) {
-							cls = 'number';
-							match = match.slice(6, -1);
-						}
-					}
-				} else if (/true|false/.test(match)) {
-					cls = 'boolean';
-				} else if (/null/.test(match)) {
-					cls = 'null';
-				}
-				return '<span class="' + cls + '">' + match + '</span>';
-			}
-		);
-	}
-
-	/**
-	 * @param {EncodeableData} data
-	 * @param {boolean} raw
-	 * @param {boolean} promise
-	 * @returns {data is Promise<unknown>}
-	 */
-	function assertPromise(data, raw, promise) {
-		if (raw) {
-			return false;
-		}
-		return (
-			promise ||
-			(typeof data === 'object' &&
-				data !== null &&
-				'then' in data &&
-				typeof data['then'] === 'function')
-		);
-	}
-
-	/**
-	 * @param {DebugData} data
-	 * @param {boolean} raw
-	 * @returns {data is EncodeableDataStore}
-	 */
-	function assertStore(data, raw) {
-		if (raw) {
-			return false;
-		}
-		return (
-			typeof data === 'object' &&
-			data !== null &&
-			'subscribe' in data &&
-			typeof data['subscribe'] === 'function'
-		);
-	}
-
-	$: themeStyle =
-		theme === 'vscode'
-			? `
-      --sd-vscode-bg-color: #1f1f1f;
-      --sd-vscode-label-color: #cccccc;
-      --sd-vscode-code-default: #8c8a89;
-      --sd-vscode-code-key: #9cdcfe;
-      --sd-vscode-code-string: #ce9171;
-      --sd-vscode-code-number: #b5c180;
-      --sd-vscode-code-boolean: #4a9cd6;
-      --sd-vscode-code-null: #4a9cd6;
-      --sd-vscode-code-undefined: #4a9cd6;
-      --sd-vscode-code-nan: #4a9cd6;
-      --sd-vscode-code-symbol: #4de0c5;
-      --sd-vscode-sb-thumb-color: #35373a;
-      --sd-vscode-sb-thumb-color-focus: #4b4d50;
-    `
-			: undefined;
-
-	/** @type {import('svelte/store').Readable<EncodeableData>} */
-	$: debugData = assertStore(data, raw) ? data : readable(data);
+	export let props: ComponentProps<SuperDebugLegacy> | ComponentProps<typeof SuperDebugRuned>;
 </script>
 
-{#if !styleInit}
-	<style>
-		.super-debug--absolute {
-			position: absolute;
-		}
-
-		.super-debug--top-0 {
-			top: 0;
-		}
-
-		.super-debug--inset-x-0 {
-			left: 0px;
-			right: 0px;
-		}
-
-		.super-debug--hidden {
-			height: 0;
-			overflow: hidden;
-		}
-
-		.super-debug--hidden:not(.super-debug--with-label) {
-			height: 1.5em;
-		}
-
-		.super-debug--rotated {
-			transform: rotate(180deg);
-		}
-
-		.super-debug {
-			--_sd-bg-color: var(--sd-bg-color, var(--sd-vscode-bg-color, rgb(30, 41, 59)));
-			position: relative;
-			background-color: var(--_sd-bg-color);
-			border-radius: 0.5rem;
-			overflow: hidden;
-		}
-
-		.super-debug--pre {
-			overflow-x: auto;
-		}
-
-		.super-debug--collapse {
-			display: block;
-			width: 100%;
-			color: rgba(255, 255, 255, 0.25);
-			background-color: rgba(255, 255, 255, 0.15);
-			padding: 5px 0;
-			display: flex;
-			justify-content: center;
-			border-color: transparent;
-			margin: 0;
-			padding: 3px 0;
-		}
-
-		.super-debug--collapse:focus {
-			color: #fafafa;
-			background-color: rgba(255, 255, 255, 0.25);
-		}
-
-		.super-debug--collapse:is(:hover) {
-			color: rgba(255, 255, 255, 0.35);
-			background-color: rgba(255, 255, 255, 0.25);
-		}
-
-		.super-debug--status {
-			display: flex;
-			padding: 1em;
-			padding-bottom: 0;
-			justify-content: space-between;
-			font-family:
-				Inconsolata, Monaco, Consolas, 'Lucida Console', 'Courier New', Courier, monospace;
-		}
-
-		.super-debug--right-status {
-			display: flex;
-			gap: 0.55em;
-		}
-
-		.super-debug--copy {
-			margin: 0;
-			padding: 0;
-			padding-top: 2px;
-			background-color: transparent;
-			border: 0;
-			color: #666;
-			cursor: pointer;
-		}
-
-		.super-debug--copy:hover {
-			background-color: transparent;
-			color: #666;
-		}
-
-		.super-debug--copy:focus {
-			background-color: transparent;
-			color: #666;
-		}
-
-		.super-debug--label {
-			color: var(--sd-label-color, var(--sd-vscode-label-color, white));
-		}
-
-		.super-debug--promise-loading {
-			color: var(--sd-promise-loading-color, var(--sd-vscode-promise-loading-color, #999));
-		}
-
-		.super-debug--promise-rejected {
-			color: var(--sd-promise-rejected-color, var(--sd-vscode-promise-rejected-color, #ff475d));
-		}
-
-		.super-debug pre {
-			color: var(--sd-code-default, var(--sd-vscode-code-default, #999));
-			background-color: var(--_sd-bg-color);
-			font-size: 1em;
-			margin-bottom: 0;
-			padding: 1em 0 1em 1em;
-		}
-
-		.super-debug--info {
-			color: var(--sd-info, var(--sd-vscode-info, rgb(85, 85, 255)));
-		}
-
-		.super-debug--success {
-			color: var(--sd-success, var(--sd-vscode-success, #2cd212));
-		}
-
-		.super-debug--redirect {
-			color: var(--sd-redirect, var(--sd-vscode-redirect, #03cae5));
-		}
-
-		.super-debug--error {
-			color: var(--sd-error, var(--sd-vscode-error, #ff475d));
-		}
-
-		.super-debug--code .key {
-			color: var(--sd-code-key, var(--sd-vscode-code-key, #eab308));
-		}
-
-		.super-debug--code .string {
-			color: var(--sd-code-string, var(--sd-vscode-code-string, #6ec687));
-		}
-
-		.super-debug--code .date {
-			color: var(--sd-code-date, var(--sd-vscode-code-date, #f06962));
-		}
-
-		.super-debug--code .boolean {
-			color: var(--sd-code-boolean, var(--sd-vscode-code-boolean, #79b8ff));
-		}
-
-		.super-debug--code .number {
-			color: var(--sd-code-number, var(--sd-vscode-code-number, #af77e9));
-		}
-
-		.super-debug--code .bigint {
-			color: var(--sd-code-bigint, var(--sd-vscode-code-bigint, #af77e9));
-		}
-
-		.super-debug--code .null {
-			color: var(--sd-code-null, var(--sd-vscode-code-null, #238afe));
-		}
-
-		.super-debug--code .nan {
-			color: var(--sd-code-nan, var(--sd-vscode-code-nan, #af77e9));
-		}
-
-		.super-debug--code .undefined {
-			color: var(--sd-code-undefined, var(--sd-vscode-code-undefined, #238afe));
-		}
-
-		.super-debug--code .function {
-			color: var(--sd-code-function, var(--sd-vscode-code-function, #f06962));
-		}
-
-		.super-debug--code .symbol {
-			color: var(--sd-code-symbol, var(--sd-vscode-code-symbol, #4de0c5));
-		}
-
-		.super-debug--code .error {
-			color: var(--sd-code-error, var(--sd-vscode-code-error, #ff475d));
-		}
-
-		.super-debug pre::-webkit-scrollbar {
-			width: var(--sd-sb-width, var(--sd-vscode-sb-width, 1rem));
-			height: var(--sd-sb-height, var(--sd-vscode-sb-height, 1rem));
-		}
-
-		.super-debug pre::-webkit-scrollbar-track {
-			border-radius: 12px;
-			background-color: var(
-				--sd-sb-track-color,
-				var(--sd-vscode-sb-track-color, hsl(0, 0%, 40%, 0.2))
-			);
-		}
-		.super-debug:is(:focus-within, :hover) pre::-webkit-scrollbar-track {
-			border-radius: 12px;
-			background-color: var(
-				--sd-sb-track-color-focus,
-				var(--sd-vscode-sb-track-color-focus, hsl(0, 0%, 50%, 0.2))
-			);
-		}
-
-		.super-debug pre::-webkit-scrollbar-thumb {
-			border-radius: 12px;
-			background-color: var(
-				--sd-sb-thumb-color,
-				var(--sd-vscode-sb-thumb-color, hsl(217, 50%, 50%, 0.5))
-			);
-		}
-		.super-debug:is(:focus-within, :hover) pre::-webkit-scrollbar-thumb {
-			border-radius: 12px;
-			background-color: var(
-				--sd-sb-thumb-color-focus,
-				var(--sd-vscode-sb-thumb-color-focus, hsl(217, 50%, 50%))
-			);
-		}
-	</style>
-	<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
-	{@const init = styleInit = true}
-{/if}
 
-<!-- eslint-disable svelte/no-at-html-tags -->
-{#if display}
-	<div
-		class="super-debug"
-		class:super-debug--collapsible={collapsible}
-		style={themeStyle}
-		dir="ltr"
-	>
-		<div
-			class="super-debug--status {label === ''
-				? 'super-debug--absolute super-debug--inset-x-0 super-debug--top-0'
-				: ''}"
-		>
-			<div class="super-debug--label">{label}</div>
-			<div class="super-debug--right-status">
-				<button type="button" class="super-debug--copy" on:click={copyContent}>
-					{#if !copied}
-						<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
-							><g
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								><path
-									d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z"
-								/><path
-									d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1"
-								/></g
-							></svg
-						>
-					{:else}
-						<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
-							><g
-								fill="none"
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								><path d="M15 12v6m-3-3h6" /><rect
-									width="14"
-									height="14"
-									x="8"
-									y="8"
-									rx="2"
-									ry="2"
-								/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></g
-							></svg
-						>
-					{/if}
-				</button>
-				{#if status}
-					<div
-						class:super-debug--info={$page.status < 200}
-						class:super-debug--success={$page.status >= 200 && $page.status < 300}
-						class:super-debug--redirect={$page.status >= 300 && $page.status < 400}
-						class:super-debug--error={$page.status >= 400}
-					>
-						{$page.status}
-					</div>
-				{/if}
-			</div>
-		</div>
-		<pre
-			class="super-debug--pre"
-			class:super-debug--with-label={label}
-			class:super-debug--hidden={collapsed}
-			bind:this={ref}><code class="super-debug--code"
-				><slot
-					>{#if assertPromise($debugData, raw, promise)}{#await $debugData}<div
-								class="super-debug--promise-loading">Loading data...</div>{:then result}{@html syntaxHighlight(
-								assertStore(result, raw) ? get(result) : result
-							)}{:catch error}<span class="super-debug--promise-rejected">Rejected:</span
-							> {@html syntaxHighlight(error)}{/await}{:else}{@html syntaxHighlight(
-							$debugData
-						)}{/if}</slot
-				></code
-			></pre>
-		{#if collapsible}
-			<button
-				type="button"
-				on:click|preventDefault={() => setCollapse(!collapsed)}
-				class="super-debug--collapse"
-				aria-label="Collapse"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="20"
-					height="20"
-					viewBox="0 0 24 24"
-					class:super-debug--rotated={collapsed}
-					><path
-						fill="currentColor"
-						d="M4.08 11.92L12 4l7.92 7.92l-1.42 1.41l-5.5-5.5V22h-2V7.83l-5.5 5.5l-1.42-1.41M12 4h10V2H2v2h10Z"
-					/></svg
-				>
-			</button>
-		{/if}
-	</div>
+{#if VERSION[0] == '3' || VERSION[0] == '4'}
+	<SuperDebugLegacy {...props} />
+{:else}
+	<SuperDebugRuned {...props} />
 {/if}
 
 <!--
diff --git a/src/lib/client/SuperDebugLegacy.svelte b/src/lib/client/SuperDebugLegacy.svelte
new file mode 100644
index 00000000..12350ca0
--- /dev/null
+++ b/src/lib/client/SuperDebugLegacy.svelte
@@ -0,0 +1,720 @@
+<script>
+	import { browser } from '$app/environment';
+	import { page } from '$app/stores';
+	import { readable, get } from 'svelte/store';
+	import { clipboardCopy } from './clipboardCopy.js';
+
+	let styleInit = false;
+
+	/**
+	 * @typedef {unknown | Promise<unknown>} EncodeableData
+	 * @typedef {import('svelte/store').Readable<EncodeableData>} EncodeableDataStore
+	 *
+	 * @typedef {EncodeableData | EncodeableDataStore} DebugData
+	 */
+
+	/**
+	 * Data to be displayed as pretty JSON.
+	 *
+	 * @type {DebugData}
+	 */
+	export let data;
+	/**
+	 * Controls when the component should be displayed.
+	 *
+	 * Default: `true`.
+	 */
+	export let display = true;
+	/**
+	 * Controls when to show the HTTP status code of the current page (reflecs the status code of the last request).
+	 *
+	 * Default is `true`.
+	 */
+	export let status = true;
+	/**
+	 * Optional label to identify the component easily.
+	 */
+	export let label = '';
+	/**
+	 * Controls the maximum length of a string field of the data prop.
+	 *
+	 * Default is `120` characters. Set to `0` to disable trimming.
+	 */
+	export let stringTruncate = 120;
+	/**
+	 * Reference to the pre element that contains the data.
+	 *
+	 * @type {HTMLPreElement | undefined}
+	 */
+	export let ref = undefined;
+	/**
+	 * Controls if the data prop should be treated as a promise (skips promise detection when true).
+	 *
+	 * Default is `false`.
+	 * @deprecated Promises are auto-detected from 1.3.0.
+	 */
+	export let promise = false;
+	/**
+	 * Controls if the data prop should be treated as a plain object (skips promise and store detection when true, prevails over promise prop).
+	 *
+	 * Default is `false`.
+	 */
+	export let raw = false;
+	/**
+	 * Enables the display of fields of the data prop that are functions.
+	 *
+	 * Default is `false`.
+	 */
+	export let functions = false;
+	/**
+	 * Theme, which can also be customized with CSS variables:
+	 *
+	 * ```txt
+	 * --sd-bg-color
+	 * --sd-label-color
+	 * --sd-promise-loading-color
+	 * --sd-promise-rejected-color
+	 * --sd-code-default
+	 * --sd-info
+	 * --sd-success
+	 * --sd-redirect
+	 * --sd-error
+	 * --sd-code-key
+	 * --sd-code-string
+	 * --sd-code-date
+	 * --sd-code-boolean
+	 * --sd-code-number
+	 * --sd-code-bigint
+	 * --sd-code-null
+	 * --sd-code-nan
+	 * --sd-code-undefined
+	 * --sd-code-function
+	 * --sd-code-symbol
+	 * --sd-code-error
+	 * --sd-sb-width
+	 * --sd-sb-height
+	 * --sd-sb-track-color
+	 * --sd-sb-track-color-focus
+	 * --sd-sb-thumb-color
+	 * --sd-sb-thumb-color-focus
+	 * ```
+	 *
+	 * @type {"default" | "vscode"}
+	 */
+	export let theme = 'default';
+
+	///// Collapse behavior ///////////////////////////////////////////
+
+	/**
+	 * Will show a collapse bar at the bottom of the component, that can be used to hide and show the output. Default is `false`.
+	 * When toggled, the state is saved in session storage for all SuperDebug components on the page.
+	 */
+	export let collapsible = false;
+
+	/**
+	 * Initial state for the collapsed component. Use together with the `collapsible` prop.
+	 * On subsequent page loads, the session storage will determine the state of all SuperDebug components on the page.
+	 */
+	export let collapsed = false;
+
+	if (browser && collapsible) setCollapse();
+
+	/**
+	 * @param {boolean|undefined} status
+	 */
+	function setCollapse(status = undefined) {
+		let data;
+		// eslint-disable-next-line svelte/valid-compile
+		const route = $page.route.id ?? '';
+
+		try {
+			if (sessionStorage.SuperDebug) {
+				data = JSON.parse(sessionStorage.SuperDebug);
+			}
+
+			data = { collapsed: data && data.collapsed ? data.collapsed : {} };
+
+			data.collapsed[route] = status === undefined ? (data.collapsed[route] ?? collapsed) : status;
+		} catch {
+			data = {
+				collapsed: {
+					[route]: collapsed
+				}
+			};
+		}
+
+		if (status !== undefined) {
+			sessionStorage.SuperDebug = JSON.stringify(data);
+		}
+
+		collapsed = data.collapsed[route];
+	}
+
+	/**
+	 * @type {ReturnType<typeof setTimeout> | undefined}
+	 */
+	let copied;
+
+	/**
+	 * @param {Event} e
+	 */
+	async function copyContent(e) {
+		if (!e.target) return;
+		const parent = /** @type {HTMLElement} */ (e.target).closest('.super-debug');
+		if (!parent) return;
+
+		const codeEl = /** @type {HTMLPreElement} */ (parent.querySelector('.super-debug--code'));
+		if (!codeEl) return;
+
+		clearTimeout(copied);
+		await clipboardCopy(codeEl.innerText);
+		copied = setTimeout(() => (copied = undefined), 900);
+	}
+
+	/**
+	 * @param {File} file
+	 */
+	function fileToJSON(file) {
+		return {
+			name: file.name,
+			size: file.size,
+			type: file.type,
+			lastModified: new Date(file.lastModified)
+		};
+	}
+
+	///////////////////////////////////////////////////////////////////
+
+	/**
+	 * @param {unknown} json
+	 * @returns {string}
+	 */
+	function syntaxHighlight(json) {
+		switch (typeof json) {
+			case 'function': {
+				return `<span class="function">[function ${json.name ?? 'unnamed'}]</span>`;
+			}
+			case 'symbol': {
+				return `<span class="symbol">${json.toString()}</span>`;
+			}
+		}
+
+		const encodedString = JSON.stringify(
+			json,
+			function (key, value) {
+				if (value === undefined) {
+					return '#}#undefined';
+				}
+				if (typeof this === 'object' && this[key] instanceof Date) {
+					// @ts-expect-error Date checking works with isNaN
+					return '#}D#' + (isNaN(this[key]) ? 'Invalid Date' : value);
+				}
+				if (typeof value === 'number') {
+					if (value == Number.POSITIVE_INFINITY) return '#}#Inf';
+					if (value == Number.NEGATIVE_INFINITY) return '#}#-Inf';
+					if (isNaN(value)) return '#}#NaN';
+				}
+				if (typeof value === 'bigint') {
+					return '#}BI#' + value;
+				}
+				if (typeof value === 'function' && functions) {
+					return '#}F#' + `[function ${value.name}]`;
+				}
+				if (value instanceof Error) {
+					return '#}E#' + `${value.name}: ${value.message || value.cause || '(No error message)'}`;
+				}
+				if (value instanceof Set) {
+					return Array.from(value);
+				}
+				if (value instanceof Map) {
+					return Array.from(value.entries());
+				}
+				if (
+					typeof this === 'object' &&
+					typeof this[key] == 'object' &&
+					this[key] &&
+					'toExponential' in this[key]
+				) {
+					return '#}DE#' + this[key].toString();
+				}
+				if (browser && typeof this === 'object' && this[key] instanceof File) {
+					return fileToJSON(this[key]);
+				}
+				if (browser && typeof this === 'object' && this[key] instanceof FileList) {
+					/** @type FileList */
+					const list = this[key];
+					const output = [];
+					for (let i = 0; i < list.length; i++) {
+						const file = list.item(i);
+						if (file) output.push(fileToJSON(file));
+					}
+					return output;
+				}
+				return value;
+			},
+			2
+		)
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;');
+
+		return encodedString.replace(
+			/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g,
+			function (match) {
+				let cls = 'number';
+				if (/^"/.test(match)) {
+					if (/:$/.test(match)) {
+						cls = 'key';
+						match = match.slice(1, -2) + ':';
+					} else {
+						cls = 'string';
+						match =
+							stringTruncate > 0 && match.length > stringTruncate
+								? match.slice(0, stringTruncate / 2) +
+									`[..${match.length - stringTruncate}/${match.length}..]` +
+									match.slice(-stringTruncate / 2)
+								: match;
+
+						if (match == '"#}#undefined"') {
+							cls = 'undefined';
+							match = 'undefined';
+						} else if (match.startsWith('"#}D#')) {
+							cls = 'date';
+							match = match.slice(5, -1);
+						} else if (match == '"#}#NaN"') {
+							cls = 'nan';
+							match = 'NaN';
+						} else if (match == '"#}#Inf"') {
+							cls = 'nan';
+							match = 'Infinity';
+						} else if (match == '"#}#-Inf"') {
+							cls = 'nan';
+							match = '-Infinity';
+						} else if (match.startsWith('"#}BI#')) {
+							cls = 'bigint';
+							match = match.slice(6, -1) + 'n';
+						} else if (match.startsWith('"#}F#')) {
+							cls = 'function';
+							match = match.slice(5, -1);
+						} else if (match.startsWith('"#}E#')) {
+							cls = 'error';
+							match = match.slice(5, -1);
+						} else if (match.startsWith('"#}DE#')) {
+							cls = 'number';
+							match = match.slice(6, -1);
+						}
+					}
+				} else if (/true|false/.test(match)) {
+					cls = 'boolean';
+				} else if (/null/.test(match)) {
+					cls = 'null';
+				}
+				return '<span class="' + cls + '">' + match + '</span>';
+			}
+		);
+	}
+
+	/**
+	 * @param {EncodeableData} data
+	 * @param {boolean} raw
+	 * @param {boolean} promise
+	 * @returns {data is Promise<unknown>}
+	 */
+	function assertPromise(data, raw, promise) {
+		if (raw) {
+			return false;
+		}
+		return (
+			promise ||
+			(typeof data === 'object' &&
+				data !== null &&
+				'then' in data &&
+				typeof data['then'] === 'function')
+		);
+	}
+
+	/**
+	 * @param {DebugData} data
+	 * @param {boolean} raw
+	 * @returns {data is EncodeableDataStore}
+	 */
+	function assertStore(data, raw) {
+		if (raw) {
+			return false;
+		}
+		return (
+			typeof data === 'object' &&
+			data !== null &&
+			'subscribe' in data &&
+			typeof data['subscribe'] === 'function'
+		);
+	}
+
+	$: themeStyle =
+		theme === 'vscode'
+			? `
+      --sd-vscode-bg-color: #1f1f1f;
+      --sd-vscode-label-color: #cccccc;
+      --sd-vscode-code-default: #8c8a89;
+      --sd-vscode-code-key: #9cdcfe;
+      --sd-vscode-code-string: #ce9171;
+      --sd-vscode-code-number: #b5c180;
+      --sd-vscode-code-boolean: #4a9cd6;
+      --sd-vscode-code-null: #4a9cd6;
+      --sd-vscode-code-undefined: #4a9cd6;
+      --sd-vscode-code-nan: #4a9cd6;
+      --sd-vscode-code-symbol: #4de0c5;
+      --sd-vscode-sb-thumb-color: #35373a;
+      --sd-vscode-sb-thumb-color-focus: #4b4d50;
+    `
+			: undefined;
+
+	/** @type {import('svelte/store').Readable<EncodeableData>} */
+	$: debugData = assertStore(data, raw) ? data : readable(data);
+</script>
+
+{#if !styleInit}
+	<style>
+		.super-debug--absolute {
+			position: absolute;
+		}
+
+		.super-debug--top-0 {
+			top: 0;
+		}
+
+		.super-debug--inset-x-0 {
+			left: 0px;
+			right: 0px;
+		}
+
+		.super-debug--hidden {
+			height: 0;
+			overflow: hidden;
+		}
+
+		.super-debug--hidden:not(.super-debug--with-label) {
+			height: 1.5em;
+		}
+
+		.super-debug--rotated {
+			transform: rotate(180deg);
+		}
+
+		.super-debug {
+			--_sd-bg-color: var(--sd-bg-color, var(--sd-vscode-bg-color, rgb(30, 41, 59)));
+			position: relative;
+			background-color: var(--_sd-bg-color);
+			border-radius: 0.5rem;
+			overflow: hidden;
+		}
+
+		.super-debug--pre {
+			overflow-x: auto;
+		}
+
+		.super-debug--collapse {
+			display: block;
+			width: 100%;
+			color: rgba(255, 255, 255, 0.25);
+			background-color: rgba(255, 255, 255, 0.15);
+			padding: 5px 0;
+			display: flex;
+			justify-content: center;
+			border-color: transparent;
+			margin: 0;
+			padding: 3px 0;
+		}
+
+		.super-debug--collapse:focus {
+			color: #fafafa;
+			background-color: rgba(255, 255, 255, 0.25);
+		}
+
+		.super-debug--collapse:is(:hover) {
+			color: rgba(255, 255, 255, 0.35);
+			background-color: rgba(255, 255, 255, 0.25);
+		}
+
+		.super-debug--status {
+			display: flex;
+			padding: 1em;
+			padding-bottom: 0;
+			justify-content: space-between;
+			font-family:
+				Inconsolata, Monaco, Consolas, 'Lucida Console', 'Courier New', Courier, monospace;
+		}
+
+		.super-debug--right-status {
+			display: flex;
+			gap: 0.55em;
+		}
+
+		.super-debug--copy {
+			margin: 0;
+			padding: 0;
+			padding-top: 2px;
+			background-color: transparent;
+			border: 0;
+			color: #666;
+			cursor: pointer;
+		}
+
+		.super-debug--copy:hover {
+			background-color: transparent;
+			color: #666;
+		}
+
+		.super-debug--copy:focus {
+			background-color: transparent;
+			color: #666;
+		}
+
+		.super-debug--label {
+			color: var(--sd-label-color, var(--sd-vscode-label-color, white));
+		}
+
+		.super-debug--promise-loading {
+			color: var(--sd-promise-loading-color, var(--sd-vscode-promise-loading-color, #999));
+		}
+
+		.super-debug--promise-rejected {
+			color: var(--sd-promise-rejected-color, var(--sd-vscode-promise-rejected-color, #ff475d));
+		}
+
+		.super-debug pre {
+			color: var(--sd-code-default, var(--sd-vscode-code-default, #999));
+			background-color: var(--_sd-bg-color);
+			font-size: 1em;
+			margin-bottom: 0;
+			padding: 1em 0 1em 1em;
+		}
+
+		.super-debug--info {
+			color: var(--sd-info, var(--sd-vscode-info, rgb(85, 85, 255)));
+		}
+
+		.super-debug--success {
+			color: var(--sd-success, var(--sd-vscode-success, #2cd212));
+		}
+
+		.super-debug--redirect {
+			color: var(--sd-redirect, var(--sd-vscode-redirect, #03cae5));
+		}
+
+		.super-debug--error {
+			color: var(--sd-error, var(--sd-vscode-error, #ff475d));
+		}
+
+		.super-debug--code .key {
+			color: var(--sd-code-key, var(--sd-vscode-code-key, #eab308));
+		}
+
+		.super-debug--code .string {
+			color: var(--sd-code-string, var(--sd-vscode-code-string, #6ec687));
+		}
+
+		.super-debug--code .date {
+			color: var(--sd-code-date, var(--sd-vscode-code-date, #f06962));
+		}
+
+		.super-debug--code .boolean {
+			color: var(--sd-code-boolean, var(--sd-vscode-code-boolean, #79b8ff));
+		}
+
+		.super-debug--code .number {
+			color: var(--sd-code-number, var(--sd-vscode-code-number, #af77e9));
+		}
+
+		.super-debug--code .bigint {
+			color: var(--sd-code-bigint, var(--sd-vscode-code-bigint, #af77e9));
+		}
+
+		.super-debug--code .null {
+			color: var(--sd-code-null, var(--sd-vscode-code-null, #238afe));
+		}
+
+		.super-debug--code .nan {
+			color: var(--sd-code-nan, var(--sd-vscode-code-nan, #af77e9));
+		}
+
+		.super-debug--code .undefined {
+			color: var(--sd-code-undefined, var(--sd-vscode-code-undefined, #238afe));
+		}
+
+		.super-debug--code .function {
+			color: var(--sd-code-function, var(--sd-vscode-code-function, #f06962));
+		}
+
+		.super-debug--code .symbol {
+			color: var(--sd-code-symbol, var(--sd-vscode-code-symbol, #4de0c5));
+		}
+
+		.super-debug--code .error {
+			color: var(--sd-code-error, var(--sd-vscode-code-error, #ff475d));
+		}
+
+		.super-debug pre::-webkit-scrollbar {
+			width: var(--sd-sb-width, var(--sd-vscode-sb-width, 1rem));
+			height: var(--sd-sb-height, var(--sd-vscode-sb-height, 1rem));
+		}
+
+		.super-debug pre::-webkit-scrollbar-track {
+			border-radius: 12px;
+			background-color: var(
+				--sd-sb-track-color,
+				var(--sd-vscode-sb-track-color, hsl(0, 0%, 40%, 0.2))
+			);
+		}
+		.super-debug:is(:focus-within, :hover) pre::-webkit-scrollbar-track {
+			border-radius: 12px;
+			background-color: var(
+				--sd-sb-track-color-focus,
+				var(--sd-vscode-sb-track-color-focus, hsl(0, 0%, 50%, 0.2))
+			);
+		}
+
+		.super-debug pre::-webkit-scrollbar-thumb {
+			border-radius: 12px;
+			background-color: var(
+				--sd-sb-thumb-color,
+				var(--sd-vscode-sb-thumb-color, hsl(217, 50%, 50%, 0.5))
+			);
+		}
+		.super-debug:is(:focus-within, :hover) pre::-webkit-scrollbar-thumb {
+			border-radius: 12px;
+			background-color: var(
+				--sd-sb-thumb-color-focus,
+				var(--sd-vscode-sb-thumb-color-focus, hsl(217, 50%, 50%))
+			);
+		}
+	</style>
+	<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
+	{@const init = styleInit = true}
+{/if}
+
+<!-- eslint-disable svelte/no-at-html-tags -->
+{#if display}
+	<div
+		class="super-debug"
+		class:super-debug--collapsible={collapsible}
+		style={themeStyle}
+		dir="ltr"
+	>
+		<div
+			class="super-debug--status {label === ''
+				? 'super-debug--absolute super-debug--inset-x-0 super-debug--top-0'
+				: ''}"
+		>
+			<div class="super-debug--label">{label}</div>
+			<div class="super-debug--right-status">
+				<button type="button" class="super-debug--copy" on:click={copyContent}>
+					{#if !copied}
+						<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
+							><g
+								fill="none"
+								stroke="currentColor"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								><path
+									d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z"
+								/><path
+									d="M4.012 16.737A2.005 2.005 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1"
+								/></g
+							></svg
+						>
+					{:else}
+						<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
+							><g
+								fill="none"
+								stroke="currentColor"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								><path d="M15 12v6m-3-3h6" /><rect
+									width="14"
+									height="14"
+									x="8"
+									y="8"
+									rx="2"
+									ry="2"
+								/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></g
+							></svg
+						>
+					{/if}
+				</button>
+				{#if status}
+					<div
+						class:super-debug--info={$page.status < 200}
+						class:super-debug--success={$page.status >= 200 && $page.status < 300}
+						class:super-debug--redirect={$page.status >= 300 && $page.status < 400}
+						class:super-debug--error={$page.status >= 400}
+					>
+						{$page.status}
+					</div>
+				{/if}
+			</div>
+		</div>
+		<pre
+			class="super-debug--pre"
+			class:super-debug--with-label={label}
+			class:super-debug--hidden={collapsed}
+			bind:this={ref}><code class="super-debug--code"
+				><slot
+					>{#if assertPromise($debugData, raw, promise)}{#await $debugData}<div
+								class="super-debug--promise-loading">Loading data...</div>{:then result}{@html syntaxHighlight(
+								assertStore(result, raw) ? get(result) : result
+							)}{:catch error}<span class="super-debug--promise-rejected">Rejected:</span
+							> {@html syntaxHighlight(error)}{/await}{:else}{@html syntaxHighlight(
+							$debugData
+						)}{/if}</slot
+				></code
+			></pre>
+		{#if collapsible}
+			<button
+				type="button"
+				on:click|preventDefault={() => setCollapse(!collapsed)}
+				class="super-debug--collapse"
+				aria-label="Collapse"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="20"
+					height="20"
+					viewBox="0 0 24 24"
+					class:super-debug--rotated={collapsed}
+					><path
+						fill="currentColor"
+						d="M4.08 11.92L12 4l7.92 7.92l-1.42 1.41l-5.5-5.5V22h-2V7.83l-5.5 5.5l-1.42-1.41M12 4h10V2H2v2h10Z"
+					/></svg
+				>
+			</button>
+		{/if}
+	</div>
+{/if}
+
+<!--
+  @component
+
+  SuperDebug is a debugging component that gives you colorized and nicely formatted output for any data structure, usually $form.
+  
+  Other use cases includes debugging plain objects, promises, stores and more.
+
+  More info: https://superforms.rocks/super-debug
+  
+  **Short example:**
+
+  ```svelte
+  <script>
+    import SuperDebug from 'sveltekit-superforms';
+    import { superForm } from 'sveltekit-superforms';
+
+    export let data;
+    
+    const { errors, form, enhance } = superForm(data.form);
+  </script>
+  
+  <SuperDebug data={$form} label="My form data" />
+  ```
+-->
diff --git a/src/lib/client/SuperDebugRuned.svelte b/src/lib/client/SuperDebugRuned.svelte
index f559065d..a59c1fdb 100644
--- a/src/lib/client/SuperDebugRuned.svelte
+++ b/src/lib/client/SuperDebugRuned.svelte
@@ -732,7 +732,7 @@
 
   ```svelte
   <script>
-    import { SuperDebugRuned } from 'sveltekit-superforms';
+    import SuperDebug from 'sveltekit-superforms';
     import { superForm } from 'sveltekit-superforms';
 
     const { data } = $props();
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 2ef70a4a..5ae87143 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,8 +1,6 @@
 import SuperDebug from './client/SuperDebug.svelte';
-import SuperDebugRuned from './client/SuperDebugRuned.svelte';
 
 export default SuperDebug;
-export { SuperDebugRuned };
 export { SuperFormError, SchemaError } from './errors.js';
 
 export type { InputConstraints, InputConstraint } from '$lib/jsonSchema/constraints.js';

From 00f5e93799c57af18df697352e5cdca593351686 Mon Sep 17 00:00:00 2001
From: Tyson <TysonS.417@gmail.com>
Date: Sat, 3 May 2025 16:18:27 -0700
Subject: [PATCH 6/9] just use startsWith

---
 src/lib/client/SuperDebug.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/client/SuperDebug.svelte b/src/lib/client/SuperDebug.svelte
index 198894e0..d6223f02 100644
--- a/src/lib/client/SuperDebug.svelte
+++ b/src/lib/client/SuperDebug.svelte
@@ -7,8 +7,7 @@
 	export let props: ComponentProps<SuperDebugLegacy> | ComponentProps<typeof SuperDebugRuned>;
 </script>
 
-
-{#if VERSION[0] == '3' || VERSION[0] == '4'}
+{#if VERSION.startsWith('3') || VERSION.startsWith('4')}
 	<SuperDebugLegacy {...props} />
 {:else}
 	<SuperDebugRuned {...props} />

From 592a4eec341416d53d515347e03d2a7c2ebd3c10 Mon Sep 17 00:00:00 2001
From: Tyson <TysonS.417@gmail.com>
Date: Mon, 5 May 2025 15:32:16 -0700
Subject: [PATCH 7/9] resolve ts error

---
 src/lib/client/SuperDebug.svelte | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/lib/client/SuperDebug.svelte b/src/lib/client/SuperDebug.svelte
index d6223f02..ea6df25b 100644
--- a/src/lib/client/SuperDebug.svelte
+++ b/src/lib/client/SuperDebug.svelte
@@ -4,13 +4,15 @@
 	import SuperDebugLegacy from './SuperDebugLegacy.svelte';
 	import SuperDebugRuned from './SuperDebugRuned.svelte';
 
-	export let props: ComponentProps<SuperDebugLegacy> | ComponentProps<typeof SuperDebugRuned>;
+	type $$Props = ComponentProps<typeof SuperDebugRuned>;
+
+	export let data: $$Props['data'];
 </script>
 
 {#if VERSION.startsWith('3') || VERSION.startsWith('4')}
-	<SuperDebugLegacy {...props} />
+	<SuperDebugLegacy {data} {...$$restProps} />
 {:else}
-	<SuperDebugRuned {...props} />
+	<SuperDebugRuned {data} {...$$restProps} />
 {/if}
 
 <!--

From 7c67f0b302e33c9f9940b310a298ccafcbc34dec Mon Sep 17 00:00:00 2001
From: Tyson <TysonS.417@gmail.com>
Date: Wed, 7 May 2025 19:18:38 -0700
Subject: [PATCH 8/9] replace all store logic with runes

---
 src/lib/client/SuperDebugRuned.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/client/SuperDebugRuned.svelte b/src/lib/client/SuperDebugRuned.svelte
index a59c1fdb..5e9c70a9 100644
--- a/src/lib/client/SuperDebugRuned.svelte
+++ b/src/lib/client/SuperDebugRuned.svelte
@@ -2,7 +2,7 @@
 	import type { Readable } from 'svelte/store';
 	import { browser } from '$app/environment';
 	import { page } from '$app/state';
-	import { readable, get } from 'svelte/store';
+	import { fromStore } from 'svelte/store';
 	import { clipboardCopy } from './clipboardCopy.js';
 
 	type EncodeableData = unknown | Promise<unknown>;
@@ -394,7 +394,7 @@
 			: undefined
 	);
 
-	let debugData = $derived(assertStore(data, raw) ? data : readable(data));
+	const debugData = $derived(assertStore(data, raw) ? fromStore(data) : data);
 </script>
 
 {#if !styleInit}
@@ -685,12 +685,12 @@
 			class:super-debug--with-label={label}
 			class:super-debug--hidden={collapsed}
 			bind:this={ref}><code class="super-debug--code"
-				>{#if children}{@render children()}{:else if assertPromise($debugData, raw, promise)}{#await $debugData}<div
+				>{#if children}{@render children()}{:else if assertPromise(debugData, raw, promise)}{#await debugData}<div
 							class="super-debug--promise-loading">Loading data...</div>{:then result}{@html syntaxHighlight(
-							assertStore(result, raw) ? get(result) : result
+							assertStore(result, raw) ? fromStore(result) : result
 						)}{:catch error}<span class="super-debug--promise-rejected">Rejected:</span
 						> {@html syntaxHighlight(error)}{/await}{:else}{@html syntaxHighlight(
-						$debugData
+						debugData
 					)}{/if}</code
 			></pre>
 		{#if collapsible}

From 302eeb043357f42391bdfa355135aacf2317ff32 Mon Sep 17 00:00:00 2001
From: Tyson <TysonS.417@gmail.com>
Date: Wed, 7 May 2025 19:19:17 -0700
Subject: [PATCH 9/9] remove unused var

---
 src/lib/client/SuperDebugRuned.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/lib/client/SuperDebugRuned.svelte b/src/lib/client/SuperDebugRuned.svelte
index 5e9c70a9..6acd1806 100644
--- a/src/lib/client/SuperDebugRuned.svelte
+++ b/src/lib/client/SuperDebugRuned.svelte
@@ -613,8 +613,6 @@
 			);
 		}
 	</style>
-	<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
-	{@const init = styleInit = true}
 {/if}
 
 <!-- eslint-disable svelte/no-at-html-tags -->