@lobb-js/studio 0.29.0 → 0.29.1

package/dist/components/importButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AlertCircle, Check, FileText, LoaderCircle, Upload, X } from "lucide-svelte";
+	import { AlertCircle, Check, Download, FileText, LoaderCircle, Upload, X } from "lucide-svelte";
 	import Button, { type ButtonProps } from "./ui/button/button.svelte";
 	import { toast } from "svelte-sonner";
 	import { getStudioContext } from "../context";
@@ -170,10 +170,15 @@
 	}
 </script>
 
-<Button variant={rest.variant} class={rest.class} Icon={rest.Icon} onclick={showDrawer}>
-	{#if rest.children}
-		{@render rest.children()}
-	{/if}
+<Button variant={rest.variant} class={rest.class} onclick={showDrawer}>
+	<ExtensionsComponents
+		name="collections.import.button.content"
+		utils={getExtensionUtils(lobb, ctx)}
+		{collectionName}
+	>
+		<rest.Icon />
+		Import
+	</ExtensionsComponents>
 </Button>
 
 <Dialog.Root
@@ -231,7 +236,7 @@
 						tabindex="0"
 						onkeydown={(e) => e.key === "Enter" && fileInput.click()}
 					>
-						<Upload class="mb-3 h-8 w-8 text-muted-foreground" />
+						<Download class="mb-3 h-8 w-8 text-muted-foreground" />
 						<p class="text-sm font-medium">Drop a file here or click to browse</p>
 						<p class="mt-1 text-xs text-muted-foreground">Supports .csv and .json</p>
 					</div>
@@ -244,7 +249,7 @@
 					/>
 				{:else}
 					<textarea
-						class="block h-56 w-full resize-none rounded-md border bg-muted/30 p-3 font-mono text-sm focus:outline-none focus:ring-1 focus:ring-ring"
+						class="block h-56 w-full resize-none rounded-md border bg-muted-soft p-3 font-mono text-sm focus:outline-none focus:ring-1 focus:ring-ring"
 						placeholder="Paste CSV or JSON here..."
 						bind:value={pasteContent}
 					></textarea>
@@ -279,7 +284,6 @@
 					data={transformedRows}
 					columns={collectionColumns.filter((c) => c.id !== "id")}
 					showCheckboxes={false}
-					unifiedBgColor="bg-background"
 					headerBorderTop={true}
 				/>
 			</div>
@@ -328,7 +332,6 @@
 						data={failedData}
 						columns={[{ id: "__error", icon: AlertCircle }, ...collectionColumns.filter((c) => c.id !== "id")]}
 						showCheckboxes={false}
-						unifiedBgColor="bg-background"
 						headerBorderTop={true}
 					>
 						{#snippet overrideCell(value, column)}

package/dist/components/landing.svelte

@@ -1,3 +1,10 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    onMount(() => {
+        document.getElementById("app-loading")?.remove();
+    });
+</script>
+
 <div class="min-h-screen flex items-center justify-center bg-background text-foreground p-6">
 	<div class="max-w-md text-center space-y-4">
 		<h1 class="text-2xl font-semibold">Lobb Studio</h1>

package/dist/components/landing.svelte.d.ts

@@ -1,18 +1,5 @@
-export default Landing;
-type Landing = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Landing: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
     (internal: unknown, props: {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const Landing: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Landing = InstanceType<typeof Landing>;
+export default Landing;

package/dist/components/miniSidebar.svelte

@@ -16,16 +16,19 @@
 	import Separator from "./ui/separator/separator.svelte";
 	import * as Tooltip from "./ui/tooltip";
 	import * as Accordion from "./ui/accordion/index.js";
+	import { onMount } from "svelte";
 
 	import { getStudioContext } from "../context";
 	import { getDashboardNavs } from "../extensions/extensionUtils";
+	import { emitEvent } from "../eventSystem";
 
-	const { ctx } = getStudioContext();
+	const { lobb, ctx } = getStudioContext();
 	import { mediaQueries } from "../utils";
 	import * as Popover from "./ui/popover";
-	import { location } from "@wjfe/n-savant";
+	import { page } from "$app/state";
+	import { goto } from "$app/navigation";
 
-	const sections: any = [
+	const rawSections: any[][] = [
 		[
 			{
 				label: "Home",
@@ -39,13 +42,15 @@
 			},
 			{
 				label: "Data Model",
-				href: "/studio/datamodel/graph",
+				href: "/studio/datamodel",
 				icon: Layers,
+				represents: "core_data_model",
 			},
 			{
 				label: "Workflows",
 				href: "/studio/workflows",
 				icon: Workflow,
+				represents: "core_workflows",
 			},
 		],
 		[],
@@ -55,20 +60,72 @@
 	const navs = getDashboardNavs(ctx);
 
 	if (navs.top) {
-		sections[0] = [...sections[0], ...navs.top];
+		rawSections[0] = [...rawSections[0], ...navs.top];
 	}
 	if (navs.middle) {
-		sections[1] = [...sections[1], ...navs.middle];
+		rawSections[1] = [...rawSections[1], ...navs.middle];
 	}
 	if (navs.bottom) {
-		sections[2] = [...sections[2], ...navs.bottom];
+		rawSections[2] = [...rawSections[2], ...navs.bottom];
 	}
 
+	// Items without a `represents` are always visible. Items with one are
+	// gated by emitting auth.canAccess — the auth extension (or any
+	// drop-in replacement) decides based on the current user's session.
+	// Start empty so nothing flashes before the answers come back.
+	let sections: any[][] = $state([[], [], []]);
+
+	async function isItemVisible(item: any): Promise<boolean> {
+		if (!item.represents) return true;
+		const res = await emitEvent(
+			{ lobb, ctx },
+			"auth.canAccess",
+			{ collection: item.represents, action: "read" },
+		);
+		return res === true;
+	}
+
+	// Highlight the nav item matching the current URL. "/studio" requires an
+	// exact match (otherwise it would light up on every sub-route since it's a
+	// prefix of everything); other items use startsWith so sub-paths
+	// (e.g. /studio/collections/risks) still highlight their parent.
+	// Popover items with children are active when any of their children match.
+	const currentPath = $derived(page.url.pathname);
+	function isItemActive(item: any): boolean {
+		if (item.navs) return item.navs.some((c: any) => isItemActive(c));
+		if (!item.href) return false;
+		if (item.href === "/studio") return currentPath === "/studio";
+		return currentPath === item.href || currentPath.startsWith(item.href + "/");
+	}
+
+	// onMount is enough — Studio gets remounted on login/logout (see
+	// remountStudio in @lobb-js/studio), so by the time this component
+	// mounts, ctx.extensions.auth.user / permissions are already populated.
+	onMount(async () => {
+		const result: any[][] = [[], [], []];
+		for (let i = 0; i < rawSections.length; i++) {
+			for (const item of rawSections[i]) {
+				if (item.navs) {
+					const visibleChildren: any[] = [];
+					for (const child of item.navs) {
+						if (await isItemVisible(child)) visibleChildren.push(child);
+					}
+					if (visibleChildren.length && (await isItemVisible(item))) {
+						result[i].push({ ...item, navs: visibleChildren });
+					}
+				} else if (await isItemVisible(item)) {
+					result[i].push(item);
+				}
+			}
+		}
+		sections = result;
+	});
 </script>
 
 {#snippet section(section: any)}
 	<div class="flex flex-col {isSmallScreen ? 'gap-0' : 'gap-2'}">
 		{#each section as item}
+			{@const active = isItemActive(item)}
 			{#if isSmallScreen}
 				{#if !item.navs}
 					<Button
@@ -76,11 +133,13 @@
 							if (item.onclick) {
 								item.onclick();
 							} else {
-								location.navigate(item.href);
+								goto(item.href);
 							}
 							isCollapsed = true;
 						}}
-						class="flex items-center justify-start flex-nowrap text-muted-foreground text-nowrap h-10 w-full"
+						class="flex items-center justify-start flex-nowrap text-nowrap h-10 w-full {active
+							? 'bg-accent text-accent-foreground'
+							: 'text-muted-foreground'}"
 						variant="ghost"
 						size="icon"
 						Icon={item.icon}
@@ -92,7 +151,9 @@
 						<Accordion.Item class="border-b-0">
 							<Accordion.Trigger class="justify-between p-0 h-10">
 								<div
-									class="flex items-center gap-2 text-muted-foreground"
+									class="flex items-center gap-2 {active
+										? 'text-accent-foreground'
+										: 'text-muted-foreground'}"
 								>
 									<item.icon size="18" />
 									<div class="text-nowrap">{item.label}</div>
@@ -100,16 +161,19 @@
 							</Accordion.Trigger>
 							<Accordion.Content class="pl-2 border-l">
 								{#each item.navs as childItem}
+									{@const childActive = isItemActive(childItem)}
 									<Button
 										onclick={() => {
 											if (childItem.onclick) {
 												childItem.onclick();
 											} else {
-												location.navigate(item.href);
+												goto(item.href);
 											}
 											isCollapsed = true;
 										}}
-										class="flex items-center justify-start flex-nowrap text-muted-foreground text-nowrap h-8 w-full"
+										class="flex items-center justify-start flex-nowrap text-nowrap h-8 w-full {childActive
+											? 'bg-accent text-accent-foreground'
+											: 'text-muted-foreground'}"
 										variant="ghost"
 										size="icon"
 										Icon={childItem.icon}
@@ -133,7 +197,9 @@
 									isCollapsed = true;
 								}}
 								href={item.href}
-								class="text-muted-foreground"
+								class={active
+									? 'bg-accent text-accent-foreground'
+									: 'text-muted-foreground'}
 								variant="ghost"
 								size="icon"
 								Icon={item.icon}
@@ -142,7 +208,9 @@
 							<Popover.Root>
 								<Popover.Trigger>
 									<Button
-										class="text-muted-foreground"
+										class={active
+											? 'bg-accent text-accent-foreground'
+											: 'text-muted-foreground'}
 										variant="ghost"
 										size="icon"
 										Icon={item.icon}
@@ -155,12 +223,15 @@
 								>
 									<div class="py-1">
 										{#each item.navs as childItem}
+											{@const childActive = isItemActive(childItem)}
 											<div
 												class="px-1 text-xs text-muted-foreground"
 											>
 												<Button
 													variant="ghost"
-													class="flex h-7 w-full justify-start p-2 text-xs font-normal text-muted-foreground"
+													class="flex h-7 w-full justify-start p-2 text-xs font-normal {childActive
+														? 'bg-accent text-accent-foreground'
+														: 'text-muted-foreground'}"
 													Icon={childItem.icon}
 													onclick={() => {
 														if (childItem.onclick) {

package/dist/components/miniSidebar.svelte.d.ts

@@ -1,20 +1,5 @@
 export declare let collapseMiniSideBar: () => void;
 export declare let expandMiniSideBar: () => void;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const MiniSidebar: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type MiniSidebar = InstanceType<typeof MiniSidebar>;
+declare const MiniSidebar: import("svelte").Component<Record<string, never>, {}, "">;
+type MiniSidebar = ReturnType<typeof MiniSidebar>;
 export default MiniSidebar;

package/dist/components/polymorphicInput.svelte

@@ -70,7 +70,7 @@
     }
 </script>
 
-<div class="flex h-9 w-full items-center gap-1.5 rounded-md border pl-1.5 pr-9 text-xs bg-muted/30 {destructive ? 'border-destructive bg-destructive/10' : ''}">
+<div class="flex h-9 w-full items-center gap-1.5 rounded-md border pl-1.5 pr-9 text-xs bg-muted-soft {destructive ? 'border-destructive bg-destructive/10' : ''}">
     <!-- Collection picker -->
     <Popover.Root bind:open={collectionPopoverOpen}>
         <Popover.Trigger>

package/dist/components/rangeCalendarButton.svelte

@@ -59,7 +59,7 @@
                     class="flex flex-col overflow-hidden text-muted-foreground"
                 >
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             value = {
@@ -71,7 +71,7 @@
                         Today
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             value = {
@@ -83,7 +83,7 @@
                         Yesterday
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             const weekStart = startOfWeek(currentDate, "en-US");
@@ -96,7 +96,7 @@
                         This week (Sun - Today)
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             const thisWeekStart = startOfWeek(
@@ -119,7 +119,7 @@
                         Last week (Sun - Sat)
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             value = {
@@ -131,7 +131,7 @@
                         Last 7 days
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             value = {
@@ -143,7 +143,7 @@
                         Last 30 days
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             value = {
@@ -155,7 +155,7 @@
                         Last 90 days
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             value = {
@@ -167,7 +167,7 @@
                         Last 12 months
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             const lastYearStart = currentDate
@@ -185,7 +185,7 @@
                         Last Calendar year
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             const yearStart = currentDate.set({

package/dist/components/richTextEditor.svelte

@@ -120,7 +120,7 @@
 	}
 </script>
 
-<div class="flex flex-col rounded-md border bg-muted/30">
+<div class="flex flex-col rounded-md border bg-muted-soft">
 	<div class="flex flex-wrap items-center gap-0.5 border-b p-1.5">
 		{#if editor}
 			<button

package/dist/components/routes/collections/collections.svelte

@@ -2,9 +2,11 @@
     import type { SideBarData, SideBarNode } from "../../sidebar/sidebarElements.svelte";
     import Sidebar from "../../sidebar/sidebar.svelte";
     import { getStudioContext } from "../../../context";
+    import { emitEvent } from "../../../eventSystem";
     import Collection from "./collection.svelte";
+    import { onMount } from "svelte";
 
-    const { ctx } = getStudioContext();
+    const { lobb, ctx } = getStudioContext();
     import { Table, Cpu, LibraryBig } from "lucide-svelte";
     import * as Icons from "lucide-svelte";
 
@@ -15,21 +17,40 @@
 
     let { collectionName } = $props();
 
-    const collectionsList = $state(getCollectionsList());
+    // Start empty so unreadable collections never flash. Populated after the
+    // auth.canAccess checks resolve below.
+    let collectionsList = $state<SideBarData>([]);
 
-    function getCollectionsList(): SideBarData {
+    onMount(async () => {
         const collections = ctx.meta.collections;
 
-        const groups = new Map<string, SideBarNode[]>();
+        // 1. Determine which collections the current user can read.
+        //    Virtual collections (identifiers only — no rows) are excluded.
+        const allNames = Object.keys(collections).filter(
+            (name) => !collections[name].virtual,
+        );
+        const visibleNames = (
+            await Promise.all(
+                allNames.map(async (name) => {
+                    const res = await emitEvent(
+                        { lobb, ctx },
+                        "auth.canAccess",
+                        { collection: name, action: "read" },
+                    );
+                    return res === true ? name : null;
+                }),
+            )
+        ).filter((n): n is string => n !== null);
 
-        for (const [name, value] of Object.entries(collections)) {
+        // 2. Group the visible collections by their category/owner.
+        const groups = new Map<string, SideBarNode[]>();
+        for (const name of visibleNames) {
+            const value = collections[name];
             let groupKey: string = (value as any).category ?? (value as any).owner;
             if (groupKey === "__project") groupKey = "project";
             else if (groupKey === "__core") groupKey = "core";
 
-            if (!groups.has(groupKey)) {
-                groups.set(groupKey, []);
-            }
+            if (!groups.has(groupKey)) groups.set(groupKey, []);
             groups.get(groupKey)!.push({
                 type: "element",
                 name,
@@ -38,6 +59,7 @@
             });
         }
 
+        // 3. Build the sidebar tree and put `core` last.
         const result: SideBarData = [];
         for (const [groupKey, children] of groups) {
             const extensionIconName = ctx.meta.extensions?.[groupKey]?.icon;
@@ -51,12 +73,12 @@
             });
         }
 
-        return result.sort((a, b) => {
+        collectionsList = result.sort((a, b) => {
             if ((a as any).name === "core") return 1;
             if ((b as any).name === "core") return -1;
             return 0;
         });
-    }
+    });
 </script>
 
 <Sidebar title="Collections" data={collectionsList}>

package/dist/components/routes/data_model/dataModel.svelte

@@ -1,34 +1,12 @@
 <script lang="ts">
     import { SvelteFlowProvider } from "@xyflow/svelte";
     import Flow from "./flow.svelte";
-    import Sidebar from "../../sidebar/sidebar.svelte";
-    import { location } from "@wjfe/n-savant";
-    import SyncManager from "./syncManager.svelte";
-    import SidebarTrigger from "../../sidebar/sidebarTrigger.svelte";
-
-    const currentPage = $derived(location.url.pathname.replace("/studio", "").split("/")[2]);
 </script>
 
-<Sidebar
-    title="Data Model"
-    showSearch={false}
-    data={[
-        { type: "element", name: "graph", href: "/studio/datamodel/graph" },
-        { type: "element", name: "query_editor", href: "/studio/datamodel/query_editor" },
-    ]}
->
-    <div class="relative h-full w-full">
-        {#if currentPage === "graph"}
-            <SvelteFlowProvider>
-                <div style:width="100%" style:height="100%">
-                    <Flow />
-                </div>
-            </SvelteFlowProvider>
-        {:else if currentPage === "query_editor"}
-            <SyncManager />
-        {/if}
-        <div class="absolute top-0 left-0 p-2.5">
-            <SidebarTrigger />
+<div class="relative h-full w-full">
+    <SvelteFlowProvider>
+        <div style:width="100%" style:height="100%">
+            <Flow />
         </div>
-    </div>
-</Sidebar>
+    </SvelteFlowProvider>
+</div>

package/dist/components/routes/data_model/dataModel.svelte.d.ts

@@ -1,3 +1,18 @@
-declare const DataModel: import("svelte").Component<Record<string, never>, {}, "">;
-type DataModel = ReturnType<typeof DataModel>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DataModel: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DataModel = InstanceType<typeof DataModel>;
 export default DataModel;

package/dist/components/routes/extensions/publicExtension.svelte

@@ -0,0 +1,19 @@
+<script>
+    import ExtensionsComponents from "../../extensionsComponents.svelte";
+    import { getExtensionUtils } from "../../../extensions/extensionUtils";
+    import { getStudioContext } from "../../../context";
+
+    let { extension, page } = $props();
+
+    const { lobb, ctx } = getStudioContext();
+</script>
+
+<div class="grid h-full w-full overflow-auto bg-background">
+    {#key extension && page}
+        <ExtensionsComponents
+            name="publicPages.{page}"
+            utils={getExtensionUtils(lobb, ctx)}
+            filterByExtensions={[extension]}
+        />
+    {/key}
+</div>

package/dist/components/routes/extensions/publicExtension.svelte.d.ts

@@ -0,0 +1,13 @@
+export default PublicExtension;
+type PublicExtension = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const PublicExtension: import("svelte").Component<{
+    extension: any;
+    page: any;
+}, {}, "">;
+type $$ComponentProps = {
+    extension: any;
+    page: any;
+};

package/dist/components/routes/home.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import Button from "../ui/button/button.svelte";
-    import { location } from "@wjfe/n-savant";
+    import { goto } from "$app/navigation";
     import { ArrowRight } from "lucide-svelte";
     import HomeFooter from "./homeFooter.svelte";
 </script>
@@ -21,7 +21,7 @@
                 Icon={ArrowRight}
                 variant="outline"
                 class="h-7 px-3 text-xs font-normal"
-                onclick={() => location.navigate("/studio/collections")}
+                onclick={() => goto("/studio/collections")}
             >
                 Go to collections
             </Button>