next: updated deps

Author: niemyjski

src/Exceptionless.Web/ClientApp/package-lock.json

@@ -41,7 +41,7 @@
         "@sveltejs/adapter-static": "^3.0.8",
         "@sveltejs/kit": "^2.19.0",
         "@sveltejs/vite-plugin-svelte": "^5.0.3",
-        "@tailwindcss/vite": "^4.0.12",
+        "@tailwindcss/vite": "^4.0.14",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/svelte": "^5.2.7",
         "@types/eslint": "^9.6.1",
@@ -57,13 +57,13 @@
         "prettier-plugin-svelte": "^3.3.3",
         "prettier-plugin-tailwindcss": "^0.6.11",
         "storybook": "^8.6.4",
-        "svelte": "^5.22.6",
+        "svelte": "^5.23.0",
         "svelte-check": "^4.1.5",
         "swagger-typescript-api": "^13.0.23",
         "tslib": "^2.8.1",
         "typescript": "^5.8.2",
         "typescript-eslint": "^8.26.1",
-        "vite": "^6.2.1",
+        "vite": "^6.2.2",
         "vitest": "3.0.8"
     },
     "dependencies": {
@@ -73,22 +73,22 @@
         "@tanstack/svelte-query-devtools": "https://pkg.pr.new/@tanstack/svelte-query-devtools@28f98f9",
         "@tanstack/svelte-table": "^9.0.0-alpha.10",
         "@typeschema/class-validator": "^0.3.0",
-        "bits-ui": "^1.3.9",
+        "bits-ui": "^1.3.12",
         "class-validator": "^0.14.1",
         "clsx": "^2.1.1",
         "formsnap": "^2.0.0",
         "kit-query-params": "^0.0.26",
-        "lucide-svelte": "^0.479.0",
+        "lucide-svelte": "^0.481.0",
         "mode-watcher": "^0.5.1",
-        "oidc-client-ts": "^3.1.0",
+        "oidc-client-ts": "^3.2.0",
         "pretty-ms": "^9.2.0",
         "runed": "^0.24.0",
         "svelte-sonner": "^0.3.28",
         "svelte-time": "^2.0.1",
         "sveltekit-superforms": "^2.24.0",
         "tailwind-merge": "^3.0.2",
         "tailwind-variants": "^1.0.0",
-        "tailwindcss": "^4.0.12",
+        "tailwindcss": "^4.0.14",
         "throttle-debounce": "^5.0.2"
     },
     "type": "module"

src/Exceptionless.Web/ClientApp/package.json

@@ -5,6 +5,7 @@
 ### TODO
 
 - Investigate loading data in - export function load({ url, fetch }) {}
+- https://svelte.dev/docs/svelte/class#The-class:-directive migrate from cn / cslx
 
 #### shadcn svelte upgrade
 

src/Exceptionless.Web/ClientApp/resources.md

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    import { cn } from '$lib/utils';
+
+    interface Props extends HTMLAttributes<HTMLDivElement> {
+        children: Snippet;
+        class?: string;
+    }
+
+    let { children, class: className, ...props }: Props = $props();
+</script>
+
+<div
+    class={cn(
+        "flex-1",
+        className
+    )}
+    {...props}
+>
+    {@render children()}
+</div>

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/layouts/split-layout/content.svelte

@@ -0,0 +1,13 @@
+import Content from './content.svelte';
+import Root from './root.svelte';
+import Sidebar from './sidebar.svelte';
+
+export {
+    Content,
+    Root,
+    Sidebar,
+    //
+    Root as SplitLayout,
+    Content as SplitLayoutContent,
+    Sidebar as SplitLayoutSidebar
+};

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/layouts/split-layout/index.ts

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    import { cn } from '$lib/utils';
+
+    interface Props extends HTMLAttributes<HTMLDivElement> {
+        children: Snippet;
+        class?: string;
+    }
+
+    let { children, class: className, ...props }: Props = $props();
+</script>
+
+<div
+    class={cn(
+        "flex flex-col space-y-8 lg:flex-row lg:space-y-0 lg:space-x-12",
+        className
+    )}
+    {...props}
+>
+    {@render children()}
+</div>

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/layouts/split-layout/root.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    import { cn } from '$lib/utils';
+
+    interface Props extends HTMLAttributes<HTMLElement> {
+        children: Snippet;
+        width?: 'default' | 'narrow' | 'wide';
+    }
+
+    let { children, class: className, width = 'default', ...props }: Props = $props();
+
+    const widthClasses = {
+        default: 'lg:w-1/5',
+        narrow: 'lg:w-1/6',
+        wide: 'lg:w-1/4'
+    };
+</script>
+
+<aside
+    class={cn(
+        "w-full",
+        widthClasses[width],
+        className
+    )}
+    {...props}
+>
+    {@render children()}
+</aside>

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/layouts/split-layout/sidebar.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    import { page } from '$app/state';
+    import { Button } from '$comp/ui/button';
+    import { cubicInOut } from 'svelte/easing';
+    import { crossfade } from 'svelte/transition';
+
+    type Props = HTMLAttributes<HTMLButtonElement> & {
+        href: string;
+    };
+
+    let { class: className, href, title }: Props = $props();
+    const isActive = $derived(page.url.pathname === href);
+
+    const [send, receive] = crossfade({
+        duration: 250,
+        easing: cubicInOut
+    });
+</script>
+
+<Button
+    class={[!isActive && 'hover:underline', 'relative justify-start hover:bg-transparent', className]}
+    data-sveltekit-noscroll
+    {href}
+    variant="ghost"
+>
+    {#if isActive}
+        <div class="bg-muted absolute inset-0 rounded-md" in:send={{ key: 'active-sidebar-tab' }} out:receive={{ key: 'active-sidebar-tab' }}></div>
+    {/if}
+    <div class="relative">
+        {title}
+    </div>
+</Button>