Update dependencies (security warnings), finish migration away from bits-ui/shadcn-svelte, and various cleanups

frontend/package.json

@@ -23,38 +23,31 @@
 	"devDependencies": {
 		"@iconify-json/carbon": "^1.2.8",
 		"@iconify-json/heroicons": "^1.2.2",
-		"@iconify-json/lucide": "^1.2.34",
-		"@internationalized/date": "^3.7.0",
-		"@playwright/test": "^1.50.1",
-		"@sveltejs/adapter-auto": "^4.0.0",
+		"@iconify-json/lucide": "^1.2.39",
+		"@playwright/test": "^1.52.0",
 		"@sveltejs/adapter-node": "^5.2.12",
-		"@sveltejs/adapter-static": "^3.0.8",
-		"@sveltejs/kit": "^2.20.2",
+		"@sveltejs/kit": "^2.20.7",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"@tailwindcss/postcss": "^4.1.0",
+		"@tailwindcss/postcss": "^4.1.4",
 		"@types/d3": "^7.4.3",
 		"@types/eslint": "^9.6.1",
 		"@types/lodash": "^4.17.16",
-		"@types/node": "^22.13.17",
-		"bits-ui": "^0.21.16",
-		"cmdk-sv": "^0.0.18",
-		"eslint": "^9.23.0",
-		"eslint-config-prettier": "^10.1.1",
-		"eslint-plugin-svelte": "^3.5.0",
-		"globals": "^15.15.0",
+		"@types/node": "^22.14.1",
+		"eslint": "^9.25.1",
+		"eslint-config-prettier": "^10.1.2",
+		"eslint-plugin-svelte": "^3.5.1",
+		"globals": "^16.0.0",
 		"prettier": "^3.5.3",
 		"prettier-plugin-svelte": "^3.3.3",
-		"svelte": "^5.25.6",
-		"svelte-check": "^4.1.5",
-		"svelte-intersection-observer": "^1.0.0",
-		"svelte-radix": "^1.1.1",
+		"svelte": "^5.28.2",
+		"svelte-check": "^4.1.6",
 		"sveltekit-search-params": "^4.0.0-next.0",
-		"tailwindcss": "^4.1.0",
-		"typescript": "^5.8.2",
-		"typescript-eslint": "^8.29.0",
+		"tailwindcss": "^4.1.4",
+		"typescript": "^5.8.3",
+		"typescript-eslint": "^8.31.0",
 		"unplugin-icons": "^22.1.0",
-		"vite": "^6.2.4",
-		"vitest": "^3.1.1"
+		"vite": "^6.3.3",
+		"vitest": "^3.1.2"
 	},
 	"type": "module",
 	"dependencies": {
@@ -64,24 +57,22 @@
 		"@layerstack/svelte-table": "^1.0.1-next.0",
 		"@layerstack/tailwind": "^2.0.0-next.2",
 		"@layerstack/utils": "^1.0.0",
-		"@tailwindcss/vite": "^4.1.0",
+		"@tailwindcss/vite": "^4.1.4",
 		"d3": "^7.9.0",
-		"dotenv": "^16.4.7",
 		"layerchart": "https://pkg.pr.new/layerchart@67759e2",
 		"lodash": "^4.17.21",
 		"runed": "^0.25.0",
-		"svelte-inspect-value": "0.3.0",
-		"svelte-ux": "^2.0.0-next.4",
-		"tailwind-variants": "^0.3.1"
+		"svelte-inspect-value": "0.6.2",
+		"svelte-ux": "^2.0.0-next.4"
 	},
 	"overrides": {
 		"cross-spawn": "^7.0.6",
 		"cookie": "^0.7.0",
 		"glob": "^9.0.0",
-		"vite": "^6.2.4",
+		"vite": "^6.3.3",
 		"nanoid": "^3.3.8"
 	},
 	"optionalDependencies": {
-		"@rollup/rollup-linux-x64-gnu": "^4.34.8"
+		"@rollup/rollup-linux-x64-gnu": "^4.40.0"
 	}
 }

frontend/src/app.css

@@ -12,17 +12,11 @@
 
 	--color-muted: hsl(0 0% 96.1%);
 	--color-muted-foreground: var(--color-neutral-800);
-	--color-muted-icon-neutral: var(--color-neutral-700);
-	--color-muted-icon-primary: var(--color-primary-700);
-
-	--color-popover: hsl(0 0% 100%);
-	--color-popover-foreground: hsl(0 0% 3.9%);
 
 	--color-card: hsl(0 0% 100%);
 	--color-card-foreground: hsl(0 0% 3.9%);
 
 	--color-border: var(--color-neutral-300);
-	--color-input: hsl(0 0% 89.8%);
 
 	/* Defined below */
 	/* --color-primary: var(--color-primary-300);
@@ -37,10 +31,6 @@
 	--color-destructive: hsl(0 72.2% 50.6%);
 	--color-destructive-foreground: hsl(0 0% 98%);
 
-	--color-ring: hsl(0 0% 3.9%);
-
-	--color-radius: 0.5rem;
-
 	--color-neutral-50: hsl(0 0% 98%);
 	--color-neutral-100: hsl(0 0% 95%);
 	--color-neutral-200: hsl(0 0% 93%);
@@ -170,17 +160,11 @@
 
 		--color-muted: hsl(0 0% 14.9%);
 		--color-muted-foreground: var(--color-neutral-800);
-		--color-muted-icon-neutral: var(--color-neutral-700);
-		--color-muted-icon-primary: var(--color-primary-700);
-
-		--color-popover: hsl(0 0% 3.9%);
-		--color-popover-foreground: hsl(0 0% 98%);
 
 		--color-card: hsl(0 0% 3.9%);
 		--color-card-foreground: hsl(0 0% 98%);
 
 		--color-border: var(--color-neutral-300);
-		--color-input: hsl(0 0% 14.9%);
 
 		--color-neutral-50: hsl(0 0% 5%);
 		--color-neutral-100: hsl(0 0% 8%);
@@ -227,8 +211,6 @@
 		--color-destructive: hsl(0 62.8% 30.6%);
 		--color-destructive-foreground: hsl(0 0% 98%);
 
-		--color-ring: hsl(0 0% 83.1%);
-
 		/* Scrollbar colors */
 		--color-scroll-thumb: hsla(0, 0%, 13%, 1);
 		--color-scroll-track: transparent;

frontend/src/lib/components/NavigationMenu.svelte

@@ -1,16 +1,25 @@
 <script lang="ts">
-	import { Dialog, Kbd, Menu, MenuItem, SelectField, Toggle, type MenuOption } from 'svelte-ux';
+	import {
+		Button,
+		Dialog,
+		Kbd,
+		Menu,
+		MenuItem,
+		NavItem,
+		SelectField,
+		Toggle,
+		type MenuOption
+	} from 'svelte-ux';
 	import { flatRollup } from 'd3';
 	import { autoFocus } from '@layerstack/svelte-actions';
 	import { cls } from '@layerstack/tailwind';
 
-	import { Button } from '$lib/components/ui/button';
 	import { page } from '$app/state';
 	import { Api } from '$lib/api/api';
 	import { goto } from '$app/navigation';
 	import { isMacOS } from '$lib/util/browser';
 	import { entityConfig, getEntityConfig } from '$lib/types/Entity';
-	import { Separator } from '$lib/components/ui/separator';
+	import Separator from '$lib/components/Separator.svelte';
 	import Logo from '$lib/components/Logo.svelte';
 
 	import IconChevronDown from '~icons/heroicons/chevron-down';
@@ -68,30 +77,25 @@
 			return [];
 		}
 	};
-
-	function isActiveRoute(searchString: string): boolean {
-		return page.url.pathname.startsWith(searchString);
-	}
 </script>
 
 <nav class="w-60 p-3 grid grid-rows-[auto_1fr_auto]">
 	<div>
 		<div class="ml-2 mt-1 mb-10 flex items-center justify-between">
-			<Button variant="link" href="/" class="p-0 h-6 w-6">
-				<Logo class="text-foreground" />
-			</Button>
+			<a href="/">
+				<Logo class="h-6 w-6" />
+			</a>
 		</div>
 
 		<Button
-			variant="outline"
 			size="sm"
-			class="mb-[22px] w-full flex justify-start pl-2"
+			class="mb-[22px] pl-2 border border-neutral-400"
+			fullWidth
 			onclick={() => (open = true)}
-			icon="leading"
 		>
 			<IconMagnifyingGlass class="text-foreground" />
-			<span class="text-muted-foreground">Search</span>
-			<span class="ml-auto text-xs text-muted-foreground">
+			<span class="text-surface-content/50">Search</span>
+			<span class="ml-auto">
 				<Kbd
 					command={isMacOS()}
 					control={!isMacOS()}
@@ -103,97 +107,63 @@
 	</div>
 
 	<div>
-		<Button variant="ghost" class="text-sm" size="nav" href="/" icon="leading">
-			<IconSquaresSolid class="text-muted-icon-neutral h-4 w-4" />
-			<span>Home</span>
-		</Button>
+		<NavItem path="/" currentUrl={page.url}>
+			<IconSquaresSolid />
+			Home
+		</NavItem>
 
 		<Separator class="my-4" />
 
-		<span class="mb-[10px] px-2 text-xs font-medium text-muted-icon-neutral">Datasets</span>
+		<div class="mb-2 px-2 text-xs font-medium text-surface-content/40">Datasets</div>
 
-		<ul>
-			{#each navItems.filter((item) => item.path != null) as item}
-				<li>
-					<Button
-						variant={isActiveRoute(item.path) ? 'default' : 'ghost'}
-						size="nav"
-						href={item.path}
-						icon="leading"
-						class="text-sm"
-					>
-						<item.icon
-							class={`h-4 w-4 ${isActiveRoute(item.path) ? 'text-muted-icon-primary' : 'text-muted-icon-neutral'}`}
-						/>
-						{item.label}
-					</Button>
-				</li>
-			{/each}
-		</ul>
+		{#each navItems.filter((item) => item.path != null) as item}
+			<NavItem path={item.path} currentUrl={page.url}>
+				<item.icon />
+				{item.label}
+			</NavItem>
+		{/each}
 	</div>
 
 	<div>
 		<Separator class="mb-6" />
 
-		<span class="mb-[7px] px-2 text-xs font-medium text-muted-icon-neutral">Resources</span>
+		<div class="mb-2 px-2 text-xs font-medium text-surface-content/40">Resources</div>
 
-		<Button
-			variant="ghost"
-			class="w-full text-sm my-[2px]"
-			size="nav"
-			href="https://docs.chronon.ai"
-			target="_blank"
-			rel="noopener noreferrer"
-			icon="leading"
-		>
-			<IconDocumentText class="text-muted-icon-neutral" />
-			<span class="text-muted-foreground">Chronon docs</span>
-		</Button>
+		<NavItem path="https://docs.chronon.ai" currentUrl={page.url} target="_blank">
+			<IconDocumentText />
+			<span class="text-surface-content/60">Chronon docs</span>
+		</NavItem>
 
-		<Button
-			variant="ghost"
-			class="w-full text-sm my-[2px]"
-			size="nav"
-			href="https://join.slack.com/t/chrononworkspace/shared_invite/zt-1no5t3lxd-mFUo644T6tPJOeTeZRTggw"
+		<NavItem
+			path="https://join.slack.com/t/chrononworkspace/shared_invite/zt-1no5t3lxd-mFUo644T6tPJOeTeZRTggw"
+			currentUrl={page.url}
 			target="_blank"
-			rel="noopener noreferrer"
-			icon="leading"
 		>
-			<IconQuestionMarkCircle16Solid class="text-muted-icon-neutral" />
-			<span class="text-muted-foreground">Support</span>
-		</Button>
+			<IconQuestionMarkCircle16Solid />
+			<span class="text-surface-content/60">Support</span>
+		</NavItem>
 
-		<div class="flex justify-start">
-			<Button
-				variant="outline"
-				size="sm"
-				class="text-[13px] mb-1 mt-5 ml-2"
-				href="mailto:[email protected]"
-				icon="leading"
-			>
-				<IconChatBubbleOvalLeft16Solid class="text-muted-icon-neutral" />
-				<span class="text-muted-foreground">Got feedback?</span>
-			</Button>
-		</div>
+		<Button href="mailto:[email protected]" class="border border-neutral-400 px-3 ml-2 mt-5">
+			<IconChatBubbleOvalLeft16Solid class="text-surface-content/40" />
+			<span class="text-surface-content/50">Got feedback?</span>
+		</Button>
 
 		<Separator class="mt-[19px] mb-3" />
 
-		<div class="flex items-center">
-			<Toggle let:on={open} let:toggle let:toggleOff>
-				<Button variant="ghost" on:click={toggle}>
-					<IconUser class="text-muted-foreground" />
-					<span class="ml-3 text-muted-foreground text-sm">{user.name}</span>
-					<IconChevronDown
-						class={cls('ml-3 text-muted-foreground transition-transform', open && '-rotate-180')}
-					/>
+		<Toggle let:on={open} let:toggle let:toggleOff>
+			<Button on:click={toggle}>
+				<IconUser class="text-surface-content/50" />
+				<span class="ml-3 text-sm text-surface-content/70">{user.name}</span>
+				<IconChevronDown
+					class={cls('ml-3 text-surface-content/50 transition-transform', open && '-rotate-180')}
+				/>
 
-					<Menu {open} on:close={toggleOff} matchWidth class="p-1">
-						<MenuItem on:click={() => alert('Settings clicked')}>Settings</MenuItem>
-						<MenuItem on:click={() => alert('Sign out clicked')}>Sign out</MenuItem>
-					</Menu>
-				</Button>
-			</Toggle>
-		</div>
+				<Menu {open} on:close={toggleOff} matchWidth class="p-1">
+					<MenuItem on:click={() => alert('Settings clicked')}>Settings</MenuItem>
+					<MenuItem on:click={() => alert('Sign out clicked')}>Sign out</MenuItem>
+				</Menu>
+			</Button>
+		</Toggle>
 	</div>
 </nav>
 

frontend/src/lib/components/PageHeader.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import Button from '$lib/components/ui/button/button.svelte';
+	import { Button } from 'svelte-ux';
 	import IconBookOpen from '~icons/heroicons/book-open-16-solid';
 
 	let { title, learnHref, children }: { title: string; learnHref?: string; children?: Snippet } =
@@ -15,9 +15,13 @@
 		{/if}
 
 		{#if learnHref}
-			<Button variant="outline" href={learnHref} target="_blank" icon="leading" size="sm">
-				<IconBookOpen class="text-neutral-800" />
-				<span class="text-neutral-800">Learn</span>
+			<Button
+				href={learnHref}
+				target="_blank"
+				class="border border-surface-content/10 rounded-md text-xs text-surface-content/70"
+			>
+				<IconBookOpen class="text-surface-content/70" />
+				Learn
 			</Button>
 		{/if}
 	</div>

frontend/src/lib/components/ResetZoomButton.svelte

@@ -1,11 +1,20 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
+	import { type ComponentProps } from 'svelte';
+	import { Button as ButtonUX } from 'svelte-ux';
+	import { cls } from '@layerstack/tailwind';
+
 	import IconArrowUturnLeft from '~icons/heroicons/arrow-uturn-left-16-solid';
 
-	const { onClick, class: className }: { onClick: () => void; class?: string } = $props();
+	const { onClick, ...restProps }: { onClick: () => void } & ComponentProps<ButtonUX> = $props();
 </script>
 
-<Button on:click={onClick} variant="outline" icon="leading" class={className} size="sm">
+<ButtonUX
+	on:click={onClick}
+	class={cls(
+		'border border-surface-content/10 rounded-md text-xs _text-surface-content/70',
+		restProps.class
+	)}
+>
 	<IconArrowUturnLeft />
 	Reset Zoom
-</Button>
+</ButtonUX>