mongoku 2.2.4 → 2.4.0

package/src/app.css

@@ -1,138 +1,142 @@
 @import "tailwindcss";
-@import "@fontsource/cuprum";
-@import "@fontsource/rajdhani";
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-/* Dark mode (default) */
-:root[data-theme="dark"] {
-	--color-1: hsl(216, 26%, 15%);
-	--color-1-5: hsl(218, 25%, 18%);
-	--light-background: hsl(220, 23%, 21%);
-	--color-3: hsl(217, 20%, 25%);
-	--color-4: hsl(220, 20%, 30%);
+/* Light mode (Apple-style) */
+:root[data-theme="light"] {
+	--color-1: #f5f5f7;
+	--color-1-5: #ffffff;
+	--light-background: #ffffff;
+	--color-3: #f0f0f2;
+	--color-4: #e5e5e7;
 
 	--background-color: var(--color-1);
-	--border-color: var(--color-3);
+	--border-color: var(--color-4);
 
-	--text: hsl(0, 0%, 88%);
-	--text-inverse: hsl(0, 0%, 12%);
-	--text-darker: hsl(0, 0%, 57%);
-	--text-lighter: hsl(0, 0%, 100%);
-	--text-secondary: hsl(0, 0%, 60%);
-	--link: hsl(211, 100%, 89%);
+	--text: #1d1d1f;
+	--text-inverse: #ffffff;
+	--text-darker: #6e6e73;
+	--text-lighter: #000000;
+	--text-secondary: #86868b;
+	--link: #007aff;
 
-	--error: hsl(0, 78%, 28%);
+	--error: #ff3b30;
 
-	--button-danger: #a31515;
-	--button-danger-l: #a54c4c;
-	--button-success: #008000;
-	--button-success-l: #4e994e;
-	--button-light: hsl(0, 0%, 88%);
-	--button-light-hover: hsl(0, 0%, 100%);
+	--button-danger: #ff3b30;
+	--button-danger-l: #ff6961;
+	--button-success: #34c759;
+	--button-success-l: #5dd879;
+	--button-light: #1d1d1f;
+	--button-light-hover: #000000;
 
-	--code-namespace: #9cdcfe;
-	--code-boolean: #569cd6;
-	--code-null: #569cd6;
-	--code-numbers: #b5cea8;
-	--code-string: #ce9178;
-	--code-links: #4e94ce;
-	--code-summary: #6a9955;
-	--code-regexp: #ce696b;
-	--code-function: #dcdcaa;
+	--code-namespace: #0070c1;
+	--code-boolean: #007aff;
+	--code-null: #007aff;
+	--code-numbers: #098658;
+	--code-string: #d73a49;
+	--code-links: #0451a5;
+	--code-summary: #22863a;
+	--code-regexp: #d16969;
+	--code-function: #6f42c1;
 
-	--border: 1px solid var(--color-3);
+	--border: 1px solid var(--color-4);
 }
 
-/* Light mode */
-:root[data-theme="light"] {
-	--color-1: hsl(0, 0%, 98%);
-	--color-1-5: hsl(0, 0%, 96%);
-	--light-background: hsl(0, 0%, 94%);
-	--color-3: hsl(0, 0%, 88%);
-	--color-4: hsl(0, 0%, 80%);
+/* Dark mode (Apple-style) */
+:root[data-theme="dark"] {
+	--color-1: #1c1c1e;
+	--color-1-5: #2c2c2e;
+	--light-background: #2c2c2e;
+	--color-3: #3a3a3c;
+	--color-4: #48484a;
 
 	--background-color: var(--color-1);
 	--border-color: var(--color-3);
 
-	--text: hsl(0, 0%, 12%);
-	--text-inverse: hsl(0, 0%, 88%);
-	--text-darker: hsl(0, 0%, 43%);
-	--text-lighter: hsl(0, 0%, 0%);
-	--text-secondary: hsl(0, 0%, 40%);
-	--link: hsl(211, 100%, 35%);
+	--text: #f5f5f7;
+	--text-inverse: #1c1c1e;
+	--text-darker: #98989d;
+	--text-lighter: #ffffff;
+	--text-secondary: #8e8e93;
+	--link: #0a84ff;
 
-	--error: hsl(0, 78%, 50%);
+	--error: #ff453a;
 
-	--button-danger: #d13438;
-	--button-danger-l: #e57373;
-	--button-success: #2e7d32;
-	--button-success-l: #66bb6a;
-	--button-light: hsl(0, 0%, 25%);
-	--button-light-hover: hsl(0, 0%, 15%);
+	--button-danger: #ff453a;
+	--button-danger-l: #ff6961;
+	--button-success: #32d74b;
+	--button-success-l: #5dd879;
+	--button-light: #f5f5f7;
+	--button-light-hover: #ffffff;
 
-	--code-namespace: #0070c1;
-	--code-boolean: #0000ff;
-	--code-null: #0000ff;
-	--code-numbers: #098658;
-	--code-string: #a31515;
-	--code-links: #0451a5;
-	--code-summary: #008000;
-	--code-regexp: #d16969;
-	--code-function: #795e26;
+	--code-namespace: #9cdcfe;
+	--code-boolean: #0a84ff;
+	--code-null: #0a84ff;
+	--code-numbers: #a5d6a7;
+	--code-string: #ff8a65;
+	--code-links: #4fc3f7;
+	--code-summary: #81c784;
+	--code-regexp: #ef9a9a;
+	--code-function: #dcdcaa;
 
 	--border: 1px solid var(--color-3);
 }
 
-/* Fallback for initial load before script runs */
+/* Fallback for initial load before script runs (default to light) */
 :root:not([data-theme]) {
-	--color-1: hsl(216, 26%, 15%);
-	--color-1-5: hsl(218, 25%, 18%);
-	--light-background: hsl(220, 23%, 21%);
-	--color-3: hsl(217, 20%, 25%);
-	--color-4: hsl(220, 20%, 30%);
+	--color-1: #f5f5f7;
+	--color-1-5: #ffffff;
+	--light-background: #ffffff;
+	--color-3: #f0f0f2;
+	--color-4: #e5e5e7;
 
 	--background-color: var(--color-1);
-	--border-color: var(--color-3);
+	--border-color: var(--color-4);
 
-	--text: hsl(0, 0%, 88%);
-	--text-inverse: hsl(0, 0%, 12%);
-	--text-darker: hsl(0, 0%, 57%);
-	--text-lighter: hsl(0, 0%, 100%);
-	--text-secondary: hsl(0, 0%, 60%);
-	--link: hsl(211, 100%, 89%);
+	--text: #1d1d1f;
+	--text-inverse: #ffffff;
+	--text-darker: #6e6e73;
+	--text-lighter: #000000;
+	--text-secondary: #86868b;
+	--link: #007aff;
 
-	--error: hsl(0, 78%, 28%);
+	--error: #ff3b30;
 
-	--button-danger: #a31515;
-	--button-danger-l: #a54c4c;
-	--button-success: #008000;
-	--button-success-l: #4e994e;
-	--button-light: hsl(0, 0%, 88%);
-	--button-light-hover: hsl(0, 0%, 100%);
+	--button-danger: #ff3b30;
+	--button-danger-l: #ff6961;
+	--button-success: #34c759;
+	--button-success-l: #5dd879;
+	--button-light: #1d1d1f;
+	--button-light-hover: #000000;
 
-	--code-namespace: #9cdcfe;
-	--code-boolean: #569cd6;
-	--code-null: #569cd6;
-	--code-numbers: #b5cea8;
-	--code-string: #ce9178;
-	--code-links: #4e94ce;
-	--code-summary: #6a9955;
-	--code-regexp: #ce696b;
-	--code-function: #dcdcaa;
+	--code-namespace: #0070c1;
+	--code-boolean: #007aff;
+	--code-null: #007aff;
+	--code-numbers: #098658;
+	--code-string: #d73a49;
+	--code-links: #0451a5;
+	--code-summary: #22863a;
+	--code-regexp: #d16969;
+	--code-function: #6f42c1;
 
-	--border: 1px solid var(--color-3);
+	--border: 1px solid var(--color-4);
 }
 
 @layer base {
+	html {
+		height: 100%;
+	}
+
 	body {
 		background-color: var(--background-color);
-		font-family: "Rajdhani", sans-serif;
+		font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Inter", system-ui, sans-serif;
 		color: var(--text);
 		min-height: 100vh;
 		tab-size: 2;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
 	}
 
 	a:hover {
@@ -142,10 +146,13 @@
 	input[type="text"],
 	input[type="number"],
 	textarea {
-		@apply rounded-md px-2 py-1.5 text-sm;
-		background-color: var(--color-1);
+		@apply rounded-2xl px-4 py-3 text-sm;
+		background-color: var(--color-3);
 		color: var(--text);
 		border: 1px solid var(--color-4);
+		transition:
+			border-color 0.2s,
+			background-color 0.2s;
 	}
 
 	input[type="text"]:focus,
@@ -153,6 +160,18 @@
 	textarea:focus {
 		outline: none;
 		border-color: var(--link);
+		background-color: var(--light-background);
+	}
+
+	input::placeholder,
+	textarea::placeholder {
+		color: var(--text-secondary);
+		opacity: 1;
+	}
+
+	::selection {
+		background-color: rgba(0, 122, 255, 0.2);
+		color: var(--text);
 	}
 }
 
@@ -169,74 +188,94 @@
 
 @layer components {
 	.btn {
-		@apply px-4 py-2 rounded-md cursor-pointer font-medium transition-all duration-200 border;
+		@apply px-4 py-2 rounded-xl cursor-pointer font-semibold transition-all duration-200 border;
+		font-size: 14px;
 	}
 
 	.btn-sm {
-		@apply px-2 py-1.5 text-sm;
+		@apply px-3 py-2 text-sm;
 	}
 
 	.btn-default {
-		background-color: var(--color-1);
+		background-color: var(--light-background);
 		color: var(--text);
 		border-color: var(--color-4);
 	}
 
-	.btn-default:hover {
-		background-color: var(--color-3);
+	.btn-default:hover:not(:disabled) {
+		background-color: var(--color-1-5);
+		filter: brightness(0.98);
 	}
 
 	.btn-danger {
-		background-color: var(--button-danger-l);
-		color: var(--text-lighter);
-		border-color: var(--button-danger);
+		background-color: var(--button-danger);
+		color: white;
+		border-color: transparent;
 	}
 
-	.btn-danger:hover {
-		background-color: var(--button-danger);
+	.btn-danger:hover:not(:disabled) {
+		filter: brightness(1.1);
 	}
 
 	.btn-success {
-		background-color: var(--button-success-l);
-		color: var(--text-lighter);
-		border-color: var(--button-success);
+		background-color: var(--button-success);
+		color: white;
+		border-color: transparent;
 	}
 
-	.btn-success:hover {
-		background-color: var(--button-success);
+	.btn-success:hover:not(:disabled) {
+		filter: brightness(1.05);
+	}
+
+	.btn-primary {
+		background-color: var(--link);
+		color: white;
+		border-color: transparent;
+	}
+
+	.btn-primary:hover:not(:disabled) {
+		filter: brightness(1.1);
 	}
 
 	.btn-outline-danger {
 		background: transparent;
 		color: var(--button-danger);
-		border-color: var(--button-danger);
+		border-color: rgba(255, 59, 48, 0.3);
 	}
 
-	.btn-outline-danger:hover {
-		background-color: var(--button-danger-l);
-		color: var(--text-lighter);
+	.btn-outline-danger:hover:not(:disabled) {
+		background-color: rgba(255, 59, 48, 0.1);
 	}
 
 	.btn-outline-success {
 		background: transparent;
 		color: var(--button-success);
-		border-color: var(--button-success);
+		border-color: rgba(52, 199, 89, 0.3);
 	}
 
-	.btn-outline-success:hover {
-		background-color: var(--button-success-l);
-		color: var(--text-lighter);
+	.btn-outline-success:hover:not(:disabled) {
+		background-color: rgba(52, 199, 89, 0.1);
 	}
 
 	.btn-outline-light {
 		background: transparent;
-		color: var(--button-light);
-		border-color: var(--button-light);
+		color: var(--text);
+		border-color: var(--color-4);
+	}
+
+	.btn-outline-light:hover:not(:disabled) {
+		background-color: var(--color-3);
+	}
+
+	.btn-outline-primary {
+		background: transparent;
+		color: var(--link);
+		border-color: var(--link);
 	}
 
-	.btn-outline-light:hover {
-		background-color: var(--color-4);
-		color: var(--button-light-hover);
+	.btn-outline-primary:hover:not(:disabled) {
+		background-color: var(--link);
+		color: white;
 	}
 
 	.btn:disabled {
@@ -261,8 +300,8 @@
 	}
 
 	.table th {
-		font-weight: 500;
-		color: var(--text-lighter);
+		font-weight: 600;
+		color: var(--text);
 	}
 
 	.table tbody tr:hover {
@@ -271,15 +310,17 @@
 
 	.badge {
 		display: inline-block;
-		padding: 4px 8px;
-		border-radius: 3px;
+		padding: 4px 10px;
+		border-radius: 8px;
 		font-size: 12px;
-		margin-right: 8px;
+		border: 1px solid var(--color-4);
+		background-color: var(--light-background);
 	}
 
 	.badge-danger {
 		background-color: var(--button-danger);
-		color: var(--text-lighter);
+		color: white;
+		border-color: transparent;
 	}
 
 	.modal-overlay {
@@ -288,7 +329,8 @@
 		left: 0;
 		right: 0;
 		bottom: 0;
-		background-color: rgba(0, 0, 0, 0.5);
+		background-color: rgba(0, 0, 0, 0.4);
+		backdrop-filter: blur(4px);
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -297,19 +339,20 @@
 
 	.modal {
 		background-color: var(--light-background);
-		border: 1px solid var(--color-3);
-		border-radius: 4px;
+		border: 1px solid var(--color-4);
+		border-radius: 1.25rem;
 		max-width: 500px;
 		width: 90%;
+		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
 	}
 
 	.modal-body {
-		padding: 20px;
+		padding: 24px;
 	}
 
 	.modal-footer {
-		border-top: 1px solid var(--color-3);
-		padding: 15px 20px;
+		border-top: 1px solid var(--color-4);
+		padding: 16px 24px;
 		display: flex;
 		justify-content: flex-end;
 		gap: 10px;

package/src/app.html

@@ -1,21 +1,34 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="h-full">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="color-scheme" content="light dark" />
 		<script>
-			// Immediately set theme to prevent flash
+			// Set initial theme early to avoid flash
 			(function () {
-				const theme = localStorage.getItem("theme") || "dark";
-				let actualTheme;
+				try {
+					const stored = localStorage.getItem("theme");
+					const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+					const theme = stored || "system";
+					let actualTheme;
 
-				if (theme === "system") {
-					actualTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-				} else {
-					actualTheme = theme;
-				}
+					if (theme === "system") {
+						actualTheme = prefersDark ? "dark" : "light";
+					} else {
+						actualTheme = theme;
+					}
 
-				document.documentElement.setAttribute("data-theme", actualTheme);
+					document.documentElement.setAttribute("data-theme", actualTheme);
+					document.documentElement.setAttribute("data-theme-mode", theme);
+
+					// Also add/remove dark class for Tailwind
+					if (actualTheme === "dark") {
+						document.documentElement.classList.add("dark");
+					} else {
+						document.documentElement.classList.remove("dark");
+					}
+				} catch (e) {}
 			})();
 		</script>
 		%sveltekit.head%

package/src/lib/actions/portal.ts

@@ -0,0 +1,42 @@
+import { tick } from "svelte";
+
+/**
+ * This action is used to create a portal for a given node.
+ *
+ * On the container:
+ * <div use:createPortal></div>
+ *
+ * On the target:
+ * <div use:portal></div>
+ *
+ * Or if you want to use a custom id:
+ * <div use:createPortal="custom-id"></div>
+ * <div use:portal="custom-id"></div>
+ */
+
+const portal_map = new Map<string, HTMLElement>();
+
+export function createPortal(node: HTMLElement, id = "default") {
+	const key = `$$portal.${id}`;
+	if (portal_map.has(key)) throw `duplicate portal key "${id}"`;
+	else portal_map.set(key, node);
+	return { destroy: portal_map.delete.bind(portal_map, key) };
+}
+
+function mount(node: HTMLElement, key: string) {
+	if (!portal_map.has(key)) throw `unknown portal ${key}`;
+	const host = portal_map.get(key)!;
+	host.insertBefore(node, null);
+	return () => host.contains(node) && host.removeChild(node);
+}
+
+export function portal(node: HTMLElement, id = "default") {
+	let destroy: (() => void) | undefined;
+	const key = `$$portal.${id}`;
+	if (!portal_map.has(key))
+		tick().then(() => {
+			destroy = mount(node, key);
+		});
+	else destroy = mount(node, key);
+	return { destroy: () => destroy?.() };
+}

package/src/lib/components/Breadcrumbs.svelte

@@ -18,65 +18,25 @@
 </script>
 
 {#if breadcrumbs.length > 0}
-	<nav class="breadcrumbs" aria-label="Breadcrumb">
-		<ol class="breadcrumb-list">
-			{#each breadcrumbs as crumb, index (index)}
-				<li class="breadcrumb-item">
-					{#if crumb.href && index < breadcrumbs.length - 1}
-						<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
-						<a href={resolve(crumb.href as any)} class="breadcrumb-link">{crumb.label}</a>
-					{:else}
-						<span class="breadcrumb-current">{crumb.label}</span>
-					{/if}
-					{#if index < breadcrumbs.length - 1}
-						<span class="breadcrumb-separator">/</span>
-					{/if}
-				</li>
-			{/each}
-		</ol>
+	<nav aria-label="Breadcrumb" class="hidden md:flex items-center gap-1 text-sm">
+		{#each breadcrumbs as crumb, index (index)}
+			{#if crumb.href && index < breadcrumbs.length - 1}
+				<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+				<a
+					href={resolve(crumb.href as any)}
+					class="px-2 py-1 rounded-md hover:bg-[var(--color-3)] transition no-underline"
+					style="color: var(--text);"
+				>
+					{crumb.label}
+				</a>
+			{:else}
+				<span aria-current="page" class="px-2 py-1 rounded-md font-medium" style="color: var(--text);">
+					{crumb.label}
+				</span>
+			{/if}
+			{#if index < breadcrumbs.length - 1}
+				<span style="color: var(--text-secondary);">/</span>
+			{/if}
+		{/each}
 	</nav>
 {/if}
-
-<style lang="postcss">
-	.breadcrumbs {
-		margin-left: 20px;
-		font-size: 16px;
-	}
-
-	.breadcrumb-list {
-		display: flex;
-		align-items: center;
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		gap: 8px;
-	}
-
-	.breadcrumb-item {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-
-	.breadcrumb-link {
-		color: var(--text);
-		text-decoration: none;
-		transition: color 0.2s;
-
-		&:hover {
-			color: var(--text);
-			text-decoration: underline;
-		}
-	}
-
-	.breadcrumb-current {
-		color: var(--text-darker);
-		font-weight: 500;
-	}
-
-	.breadcrumb-separator {
-		color: var(--text-darker);
-		font-weight: 300;
-		user-select: none;
-	}
-</style>

package/src/lib/components/JsonValue.svelte

@@ -52,6 +52,7 @@
 	let fetchedCollection = $state<string | null>(null);
 	let isFetching = $state(false);
 	let fetchError = $state<string | null>(null);
+	let hideTooltipTimeout: ReturnType<typeof setTimeout> | null = null;
 
 	// Check if current key has a mapping
 	const currentKeyPath = $derived([keyPath, key].filter(Boolean).join("."));
@@ -59,6 +60,12 @@
 	async function handleMouseEnter() {
 		if (!hasMappings || !fetchMappedDocument) return;
 
+		// Clear any pending hide timeout
+		if (hideTooltipTimeout) {
+			clearTimeout(hideTooltipTimeout);
+			hideTooltipTimeout = null;
+		}
+
 		showTooltip = true;
 
 		// If already fetched, don't fetch again
@@ -85,6 +92,23 @@
 	}
 
 	function handleMouseLeave() {
+		// Delay hiding to allow moving mouse to tooltip
+		hideTooltipTimeout = setTimeout(() => {
+			showTooltip = false;
+			hideTooltipTimeout = null;
+		}, 100);
+	}
+
+	function handleTooltipMouseEnter() {
+		// Cancel hiding when mouse enters tooltip
+		if (hideTooltipTimeout) {
+			clearTimeout(hideTooltipTimeout);
+			hideTooltipTimeout = null;
+		}
+	}
+
+	function handleTooltipMouseLeave() {
+		// Hide tooltip when mouse leaves tooltip content
 		showTooltip = false;
 	}
 
@@ -295,7 +319,12 @@
 		{/if}
 	{/snippet}
 	{#if hasMappings}
-		<Tooltip show={showTooltip} tooltipClass="max-w-[600px] max-h-[400px] overflow-auto whitespace-pre-wrap">
+		<Tooltip
+			show={showTooltip}
+			tooltipClass="max-w-[600px] max-h-[400px] overflow-auto whitespace-pre-wrap"
+			onTooltipMouseEnter={handleTooltipMouseEnter}
+			onTooltipMouseLeave={handleTooltipMouseLeave}
+		>
 			{#snippet trigger()}
 				<span
 					class="string mapped"