init

.github/workflows/npm-publish.yml

@@ -0,0 +1,48 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: NPM Package Publish
+
+on:
+  push:
+    branches: [main]
+  release:
+    types: [created]
+  workflow_dispatch:
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          registry-url: https://registry.npmjs.org/
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: latest
+      - uses: oven-sh/setup-bun@v2
+      - run: pnpm install
+      - run: pnpm build
+      - run: |
+          PACKAGE_NAME=$(jq -r '.name' package.json)
+          PACKAGE_VERSION=$(jq -r '.version' package.json)
+
+          # Get the version from npm registry
+          REGISTRY_VERSION=$(npm show "$PACKAGE_NAME" version)
+
+          # Compare versions
+          if [ "$PACKAGE_VERSION" == "$REGISTRY_VERSION" ]; then
+            echo "Version $PACKAGE_VERSION already exists in the npm registry."
+            exit 0
+          else
+            echo "Version $PACKAGE_VERSION does not exist in the npm registry. Proceeding..."
+            npm publish --provenance --access public
+          fi
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -0,0 +1,21 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

.prettierrc

@@ -0,0 +1,15 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}

CHANGELOG.md

@@ -0,0 +1,8 @@
+# jwt
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [fba6a49]
+  - @kksh/svelte@0.0.2

README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

components.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"style": "new-york",
+	"tailwind": {
+		"config": "tailwind.config.ts",
+		"css": "src/app.css",
+		"baseColor": "neutral"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils"
+	},
+	"typescript": true
+}

eslint.config.js

@@ -0,0 +1,33 @@
+import js from '@eslint/js';
+import ts from 'typescript-eslint';
+import svelte from 'eslint-plugin-svelte';
+import prettier from 'eslint-config-prettier';
+import globals from 'globals';
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte'],
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	}
+];

package.json

@@ -0,0 +1,106 @@
+{
+	"$schema": "https://schema.kunkun.sh/",
+	"name": "kunkun-ext-jwt",
+	"version": "0.0.9",
+	"private": true,
+	"kunkun": {
+		"name": "JWT Inspector",
+		"shortDescription": "Inspect JWT Token",
+		"longDescription": "Same as jwt.io; Display decoded JWT Token.",
+		"identifier": "jwt-inspector",
+		"icon": {
+			"type": "iconify",
+			"value": "logos:jwt-icon"
+		},
+		"demoImages": [],
+		"permissions": [
+			"clipboard:read-text",
+			"clipboard:write-text",
+			{
+				"permission": "open:folder",
+				"allow": [
+					{
+						"path": "$DESKTOP/**"
+					},
+					{
+						"path": "$DOWNLOAD"
+					},
+					{
+						"path": "$DOCUMENT/dev/*"
+					}
+				],
+				"deny": [
+					{
+						"path": "$DESKTOP/malicious.sh"
+					}
+				]
+			}
+		],
+		"customUiCmds": [
+			{
+				"main": "/",
+				"dist": "build",
+				"devMain": "http://localhost:5173",
+				"name": "View Decoded JWT",
+				"cmds": []
+			},
+			{
+				"main": "/search",
+				"dist": "build",
+				"devMain": "http://localhost:5173/search",
+				"name": "Search Decoded JWT",
+				"cmds": []
+			}
+		],
+		"templateUiCmds": []
+	},
+	"files": [
+		"build"
+	],
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"dependencies": {
+		"@kksh/api": "^0.0.48",
+		"@kksh/svelte": "0.1.4",
+		"clsx": "^2.1.1",
+		"dayjs": "^1.11.11",
+		"jose": "^5.6.3",
+		"lucide-svelte": "^0.416.0",
+		"mode-watcher": "^0.4.0",
+		"tailwind-merge": "^2.4.0",
+		"tailwind-variants": "^0.2.1",
+		"valibot": "^0.36.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-static": "^3.0.2",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@tailwindcss/typography": "^0.5.13",
+		"@types/eslint": "^9.6.0",
+		"autoprefixer": "^10.4.19",
+		"eslint": "^9.0.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"postcss": "^8.4.38",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"prettier-plugin-tailwindcss": "^0.6.4",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.6.0",
+		"tailwindcss": "^3.4.4",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.0.0-alpha.20",
+		"vite": "^5.0.3"
+	},
+	"type": "module",
+	"packageManager": "pnpm@9.9.0"
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+};

src/app.css

@@ -0,0 +1,80 @@
+@import url("@kksh/svelte/themes");
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 0 0% 3.9%;
+
+		--muted: 0 0% 96.1%;
+		--muted-foreground: 0 0% 45.1%;
+
+		--popover: 0 0% 100%;
+		--popover-foreground: 0 0% 3.9%;
+
+		--card: 0 0% 100%;
+		--card-foreground: 0 0% 3.9%;
+
+		--border: 0 0% 89.8%;
+		--input: 0 0% 89.8%;
+
+		--primary: 0 0% 9%;
+		--primary-foreground: 0 0% 98%;
+
+		--secondary: 0 0% 96.1%;
+		--secondary-foreground: 0 0% 9%;
+
+		--accent: 0 0% 96.1%;
+		--accent-foreground: 0 0% 9%;
+
+		--destructive: 0 72.2% 50.6%;
+		--destructive-foreground: 0 0% 98%;
+
+		--ring: 0 0% 3.9%;
+
+		--radius: 0.5rem;
+	}
+
+	.dark {
+		--background: 0 0% 3.9%;
+		--foreground: 0 0% 98%;
+
+		--muted: 0 0% 14.9%;
+		--muted-foreground: 0 0% 63.9%;
+
+		--popover: 0 0% 3.9%;
+		--popover-foreground: 0 0% 98%;
+
+		--card: 0 0% 3.9%;
+		--card-foreground: 0 0% 98%;
+
+		--border: 0 0% 14.9%;
+		--input: 0 0% 14.9%;
+
+		--primary: 0 0% 98%;
+		--primary-foreground: 0 0% 9%;
+
+		--secondary: 0 0% 14.9%;
+		--secondary-foreground: 0 0% 98%;
+
+		--accent: 0 0% 14.9%;
+		--accent-foreground: 0 0% 98%;
+
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 0% 98%;
+
+		--ring: 0 0% 83.1%;
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+
+	body {
+		@apply bg-background text-foreground;
+	}
+}

src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/lib/components/ThemeCustomizer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { ThemeCustomizerButton, type ThemeConfig, updateTheme } from '@kksh/svelte';
+	import { ui } from '@kksh/api/ui/iframe';
+	import { onMount } from 'svelte';
+
+	let config: ThemeConfig = {
+		radius: 0.5,
+		theme: 'zinc',
+		lightMode: 'auto'
+	};
+	onMount(() => {
+		ui.getTheme().then((theme) => {
+			config = theme;
+		});
+	});
+
+	$: updateTheme(config);
+</script>
+
+<ThemeCustomizerButton bind:config />

src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

src/lib/jwt.ts

@@ -0,0 +1,57 @@
+import { object, string, type InferOutput } from 'valibot';
+import * as jose from 'jose';
+
+export const JwtToken = object({
+	header: string(),
+	payload: string(),
+	signature: string()
+});
+export type JwtToken = InferOutput<typeof JwtToken>;
+export function splitJwt(token: string): JwtToken {
+	const [header, payload, signature] = token.split('.');
+	return { header, payload, signature };
+}
+// class JWT
+export function jwtIsValid(token: string): boolean {
+	try {
+		jose.decodeJwt(token);
+		return true;
+	} catch (error) {
+		return false;
+	}
+}
+
+export const claimsDef: Record<string, string> = {
+	exp: 'Expiration time (seconds since Unix epoch)',
+	nbf: 'Not valid before (seconds since Unix epoch)',
+	iat: 'Issued at (seconds since Unix epoch)',
+	iss: 'Issuer (who created and signed this token)',
+	sub: 'Subject (whom the token refers to)',
+	aud: 'Audience (who or what the token is intended for)',
+	jti: 'JWT ID (unique identifier for this token)',
+	typ: 'Type of token',
+	azp: 'Authorized party (the party to which this token was issued)',
+	alg: 'Signature or encryption algorithm',
+	jku: 'JSON Web Key Set URL',
+	jwk: 'JSON Web Key Set (embedded)',
+	kid: 'Key ID',
+	x5u: 'X.509 Certificate URL',
+	x5t: 'X.509 Fingerprint (SHA-1)',
+	'x5t#S256': 'X.509 Fingerprint (SHA-256)',
+	cty: 'Content type',
+	crit: 'Extensions or claims that MUST be processed or verified',
+	enc: 'Encryption algorithm',
+	zip: 'Compression algorithm',
+	kty: 'Key type',
+	use: 'Intended use of key: "sig" or "enc" (other values accepted)',
+	key_ops: 'Intended operations for this key',
+	sid: 'Session ID (String identifier for a Session)',
+	updated_at: 'Last modification timestamp',
+	at_hash: 'Access Token hash value',
+	c_hash: 'Authorization Code hash value',
+	s_hash: 'State hash value',
+	nonce: 'Unique value associating request to token',
+	auth_time: 'Time when authentication occurred',
+	amr: 'Authentication methods array',
+	acr: 'Authentication context class'
+} as const;

src/lib/utils.ts

@@ -0,0 +1,56 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { cubicOut } from 'svelte/easing';
+import type { TransitionConfig } from 'svelte/transition';
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+type FlyAndScaleParams = {
+	y?: number;
+	x?: number;
+	start?: number;
+	duration?: number;
+};
+
+export const flyAndScale = (
+	node: Element,
+	params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
+): TransitionConfig => {
+	const style = getComputedStyle(node);
+	const transform = style.transform === 'none' ? '' : style.transform;
+
+	const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
+		const [minA, maxA] = scaleA;
+		const [minB, maxB] = scaleB;
+
+		const percentage = (valueA - minA) / (maxA - minA);
+		const valueB = percentage * (maxB - minB) + minB;
+
+		return valueB;
+	};
+
+	const styleToString = (style: Record<string, number | string | undefined>): string => {
+		return Object.keys(style).reduce((str, key) => {
+			if (style[key] === undefined) return str;
+			return str + `${key}:${style[key]};`;
+		}, '');
+	};
+
+	return {
+		duration: params.duration ?? 200,
+		delay: 0,
+		css: (t) => {
+			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+
+			return styleToString({
+				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+				opacity: t
+			});
+		},
+		easing: cubicOut
+	};
+};

src/routes/+layout.svelte

@@ -0,0 +1,17 @@
+<script>
+	import '../app.css';
+	import { ModeWatcher } from 'mode-watcher';
+	import { ui } from '@kksh/api/ui/iframe';
+	import { updateTheme } from '@kksh/svelte';
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		ui.registerDragRegion();
+		ui.getTheme().then((theme) => {
+			updateTheme(theme);
+		});
+	});
+</script>
+
+<ModeWatcher />
+<slot></slot>

src/routes/+layout.ts

@@ -0,0 +1,2 @@
+export const prerender = true;
+export const ssr = false;

src/routes/+page.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { Button, Resizable, Textarea, Label, Toaster, ThemeWrapper } from '@kksh/svelte';
+	import { onMount } from 'svelte';
+	import * as jose from 'jose';
+	import { JwtToken, jwtIsValid, splitJwt } from '$lib/jwt';
+	import { parse, flatten, safeParse } from 'valibot';
+	import { ModeWatcher } from 'mode-watcher';
+	import { clipboard, toast, ui } from '@kksh/api/ui/iframe';
+
+	let jwtToken: JwtToken = {
+		header: '',
+		payload: '',
+		signature: ''
+	};
+	let fullJwtTokenStr = '';
+	$: {
+		if (jwtToken && jwtToken.header && jwtToken.payload && jwtToken.signature) {
+			fullJwtTokenStr = `${jwtToken.header}.${jwtToken.payload}.${jwtToken.signature}`;
+		}
+	}
+	let payload = {};
+	let header = {};
+
+	$: {
+		if (jwtIsValid(fullJwtTokenStr)) {
+			payload = jose.decodeJwt(fullJwtTokenStr);
+			header = jose.decodeProtectedHeader(fullJwtTokenStr);
+		}
+	}
+	onMount(async () => {
+		pasteJwt();
+		ui.showBackButton('bottom-right');
+		document.addEventListener('keydown', (event) => {
+			console.log(event);
+			if (event.key === 'Escape') {
+				ui.goBack();
+			}
+		});
+		// document.querySelectorAll('.kunkun-drag-region').forEach((el) => {
+		// 	(el as HTMLElement).click();
+		// });
+	});
+
+	function pasteJwt() {
+		clipboard.readText().then((text) => {
+			console.log('pasteJwt', text);
+			if (jwtIsValid(text)) {
+				const parseResult = safeParse(JwtToken, splitJwt(text));
+				console.log('parseResult', parseResult);
+
+				if (parseResult.success) {
+					jwtToken = parseResult.output;
+				} else {
+					console.error(flatten<typeof JwtToken>(parseResult.issues));
+					toast.error('Invalid JWT Token from clipboard');
+				}
+			} else {
+				toast.error('Invalid JWT Token from clipboard');
+			}
+		});
+	}
+</script>
+
+<Toaster />
+<ModeWatcher />
+<ThemeWrapper>
+	<div class="flex h-screen flex-col border px-1">
+		<div class="kunkun-drag-region h-8" />
+		<Resizable.PaneGroup direction="horizontal" class="h-full w-full rounded-lg pb-2">
+			<Resizable.Pane defaultSize={50}>
+				<div class="flex h-full w-full flex-col gap-1.5 px-3">
+					<Label for="message" class="text-lg">JWT Token</Label>
+					<div class="grow">
+						<span class="box-border whitespace-pre-wrap text-wrap break-words text-red-400"
+							>{jwtToken.header}</span
+						>
+						<span>.</span>
+						<span class="box-border whitespace-pre-wrap text-wrap break-words text-purple-400"
+							>{jwtToken.payload}</span
+						>
+						<span>.</span>
+						<span class=" box-border whitespace-pre-wrap text-wrap break-words text-cyan-400"
+							>{jwtToken.signature}</span
+						>
+					</div>
+					<Button class="" on:click={pasteJwt}>Paste JWT</Button>
+				</div>
+			</Resizable.Pane>
+			<Resizable.Handle />
+			<Resizable.Pane defaultSize={50} class="px-4">
+				<Label for="message"
+					>HEADER: <span class="text-muted-foreground">Algorithm & Token Type</span></Label
+				>
+				<pre class="text-red-400">{JSON.stringify(header, null, 2)}</pre>
+				<Label for="message">PAYLOAD: <span class="text-muted-foreground">DATA</span></Label>
+				<pre class=" text-purple-400">{JSON.stringify(payload, null, 2)}</pre>
+			</Resizable.Pane>
+		</Resizable.PaneGroup>
+	</div>
+</ThemeWrapper>

src/routes/search/+page.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import { Alert, Button, ThemeWrapper, Command } from '@kksh/svelte';
+	import Calendar from 'lucide-svelte/icons/calendar';
+	import * as jose from 'jose';
+	import { JwtToken, jwtIsValid, splitJwt, claimsDef } from '$lib/jwt';
+	import { onMount } from 'svelte';
+	import dayjs from 'dayjs';
+	import timezone from 'dayjs/plugin/timezone';
+	import utc from 'dayjs/plugin/utc';
+	import { ModeWatcher } from 'mode-watcher';
+	import { clipboard, toast, ui, log } from '@kksh/api/ui/iframe';
+	import { parse, string, number, union, safeParse } from 'valibot';
+
+	dayjs.extend(timezone);
+	dayjs.extend(utc);
+
+	let jwtToken: JwtToken = {
+		header: '',
+		payload: '',
+		signature: ''
+	};
+	let fullJwtTokenStr = '';
+	$: {
+		if (jwtToken && jwtToken.header && jwtToken.payload && jwtToken.signature) {
+			fullJwtTokenStr = `${jwtToken.header}.${jwtToken.payload}.${jwtToken.signature}`;
+		}
+	}
+	let payload = {};
+	let header = {};
+	$: {
+		if (jwtIsValid(fullJwtTokenStr)) {
+			payload = jose.decodeJwt(fullJwtTokenStr);
+			header = jose.decodeProtectedHeader(fullJwtTokenStr);
+		}
+	}
+
+	onMount(async () => {
+		pasteJwt();
+		ui.showBackButton('bottom-right');
+	});
+
+	function pasteJwt() {
+		clipboard.readText().then((text) => {
+			if (jwtIsValid(text)) {
+				jwtToken = parse(JwtToken, splitJwt(text));
+			} else {
+				toast.error('Invalid JWT in Clipboard');
+			}
+		});
+	}
+
+	function onSelect(key: string, val: unknown) {
+		// val is either string or number, safe parse it with zod
+		const schema = union([string(), number()]);
+		const parsed = safeParse(schema, val);
+		if (!parsed.success) {
+			console.error(parsed.issues);
+			toast.error('Invalid Data Type');
+			return;
+		} else {
+			const content = parsed.output.toString();
+			clipboard
+				.writeText(content)
+				.then(() => toast.success('Copied To Clipboard', { description: content }))
+				.catch((err) => {
+					log.error(`Failed to Copy To Clipboard: ${err.toString()}`);
+					return toast.error('Failed to Copy To Clipboard');
+				});
+		}
+	}
+
+	function displayDate(val: unknown) {
+		if (typeof val === 'number') {
+			const date = new Date(val * 1000);
+			return date;
+			//   return dayjs(date).format("YYYY-MM-DD - hh:mm:ss SSS [Z] A");
+		} else if (typeof val === 'string') {
+			const date = new Date(parseInt(val) * 1000);
+			return date;
+		}
+	}
+</script>
+
+<ThemeWrapper>
+	<Command.Root class="h-screen w-full px-2">
+		<Command.Input placeholder="Type a command or search..." autofocus />
+		<Command.List class="h-full">
+			<Command.Empty>
+				No JWT found in Clipboard.
+				<br />
+				<Button class="mt-5" on:click={pasteJwt}>Load From Clipboard</Button>
+			</Command.Empty>
+			{#if Object.values(header).length > 0}
+				<Command.Group heading="HEAD: ALGORITHM & TOKEN TYPE">
+					{#each Object.entries(header) as [key, val]}
+						<Command.Item onSelect={() => onSelect(key, val)} class="flex justify-between">
+							<span class="flex items-center">
+								<Calendar class="mr-2 h-4 w-4" />
+								<span>{key}</span>
+								<span class="ml-3 text-muted-foreground">{val}</span>
+							</span>
+							<span class="text-muted-foreground">{claimsDef[key]}</span>
+						</Command.Item>
+					{/each}
+				</Command.Group>
+			{/if}
+			{#if Object.values(payload).length > 0}
+				<Command.Group heading="PAYLOAD: DATA">
+					{#each Object.entries(payload) as [key, val]}
+						<Command.Item onSelect={() => onSelect(key, val)} class="flex justify-between">
+							<span class="flex items-center">
+								<Calendar class="mr-2 h-4 w-4" />
+								<span>{key}</span>
+								{#if ['iat', 'exp'].includes(key)}
+									<span class="ml-3 text-muted-foreground">{displayDate(val)}</span>
+								{:else}
+									<span class="ml-3 text-muted-foreground">{val}</span>
+								{/if}
+							</span>
+							{#if claimsDef[key]}
+								<span class="text-muted-foreground">{claimsDef[key]}</span>
+							{/if}
+						</Command.Item>
+					{/each}
+				</Command.Group>
+			{/if}
+		</Command.List>
+	</Command.Root>
+</ThemeWrapper>

svelte.config.js

@@ -0,0 +1,22 @@
+import adapter from '@sveltejs/adapter-static';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// outDir: 'dist',
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter(),
+		alias: {
+			'@/*': './src/lib/*'
+		}
+	}
+};
+
+export default config;

tailwind.config.ts

@@ -0,0 +1,67 @@
+import { fontFamily } from 'tailwindcss/defaultTheme';
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+	darkMode: ['class'],
+	content: [
+		'./src/**/*.{html,js,svelte,ts}',
+		'node_modules/@kksh/svelte/dist/**/*.{html,js,svelte,ts}'
+	],
+	safelist: ['dark'],
+	theme: {
+		container: {
+			center: true,
+			padding: '2rem',
+			screens: {
+				'2xl': '1400px'
+			}
+		},
+		extend: {
+			colors: {
+				border: 'hsl(var(--border) / <alpha-value>)',
+				input: 'hsl(var(--input) / <alpha-value>)',
+				ring: 'hsl(var(--ring) / <alpha-value>)',
+				background: 'hsl(var(--background) / <alpha-value>)',
+				foreground: 'hsl(var(--foreground) / <alpha-value>)',
+				primary: {
+					DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
+					foreground: 'hsl(var(--primary-foreground) / <alpha-value>)'
+				},
+				secondary: {
+					DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
+					foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)'
+				},
+				destructive: {
+					DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
+					foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)'
+				},
+				muted: {
+					DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
+					foreground: 'hsl(var(--muted-foreground) / <alpha-value>)'
+				},
+				accent: {
+					DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
+					foreground: 'hsl(var(--accent-foreground) / <alpha-value>)'
+				},
+				popover: {
+					DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
+					foreground: 'hsl(var(--popover-foreground) / <alpha-value>)'
+				},
+				card: {
+					DEFAULT: 'hsl(var(--card) / <alpha-value>)',
+					foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
+				}
+			},
+			borderRadius: {
+				lg: 'var(--radius)',
+				md: 'calc(var(--radius) - 2px)',
+				sm: 'calc(var(--radius) - 4px)'
+			},
+			fontFamily: {
+				sans: [...fontFamily.sans]
+			}
+		}
+	}
+};
+
+export default config;

tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});