@lobb-js/studio 0.33.0 → 0.35.0

package/dist/components/detailView/fieldInputReplacement.svelte

@@ -49,7 +49,7 @@
 				placeholder={field.placeholder ? field.placeholder : "NULL"}
 				type="text"
 				class="
-					bg-muted-soft text-xs
+					bg-muted text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value
@@ -64,7 +64,7 @@
 				<Select.Trigger
 					placeholder={field.placeholder ? field.placeholder : "NULL"}
 					class="
-						h-9 w-full bg-muted-soft pr-8
+						h-9 w-full bg-muted pr-8
 						{destructive ? 'border-destructive bg-destructive/10' : ''}
 					"
 				>
@@ -84,7 +84,7 @@
 					placeholder={field.placeholder ? field.placeholder : value === "" ? "EMPTY STRING" : "NULL"}
 					rows={5}
 					class="
-						bg-muted-soft text-xs
+						bg-muted text-xs
 						{destructive ? 'border-destructive bg-destructive/10' : ''}
 					"
 					bind:value
@@ -98,7 +98,7 @@
 			<Input
 				type="date"
 				class="
-					dateInput block w-full bg-muted-soft pr-9 text-xs
+					dateInput block w-full bg-muted pr-9 text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value={
@@ -116,7 +116,7 @@
 			<Input
 				type="time"
 				class="
-					dateInput block w-full bg-muted-soft pr-9 text-xs
+					dateInput block w-full bg-muted pr-9 text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value={
@@ -133,7 +133,7 @@
 			<Input
 				type="datetime-local"
 				class="
-					dateInput block w-full bg-muted-soft pr-9 text-xs
+					dateInput block w-full bg-muted pr-9 text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value={
@@ -154,7 +154,7 @@
 				<Select.Root type="single" bind:value>
 					<Select.Trigger
 						class="
-							bg-muted-soft pr-9
+							bg-muted pr-9
 							{destructive ? 'border-destructive bg-destructive/10' : ''}
 						"
 					>

package/dist/components/detailView/passwordInput.svelte

@@ -21,7 +21,7 @@
 <Input
     type="password"
     placeholder="••••••"
-    class="bg-muted-soft text-xs {destructive ? 'border-destructive bg-destructive/10' : ''}"
+    class="bg-muted text-xs {destructive ? 'border-destructive bg-destructive/10' : ''}"
     value={displayValue}
     oninput={onInput}
 />

package/dist/components/detailView/update/updateDetailView.svelte

@@ -180,14 +180,14 @@
             <Button
                 variant="outline"
                 onclick={handleCancel}
-                class="h-7 px-3 text-xs font-normal"
+                size="sm"
                 Icon={X}
             >
                 Cancel
             </Button>
             <Button
                 variant="default"
-                class="h-7 px-3 text-xs font-normal"
+                size="sm"
                 Icon={submitButton?.icon ? submitButton.icon : Pencil}
                 onclick={handleSave}
                 disabled={!hasChanges}

package/dist/components/detailView/update/updateDetailViewButton.svelte

@@ -7,6 +7,7 @@
 
 	interface LocalProp extends UpdateDetailViewProp {
 		variant?: ButtonProps["variant"];
+		size?: ButtonProps["size"];
 		class?: ButtonProps["class"];
 		Icon?: ButtonProps["Icon"];
 		children?: ButtonProps["children"];
@@ -33,6 +34,7 @@
 
 <Button
 	variant={props.variant}
+	size={props.size}
 	class={props.class}
 	Icon={props.Icon}
 	onclick={openView}

package/dist/components/detailView/update/updateDetailViewButton.svelte.d.ts

@@ -2,6 +2,7 @@ import type { UpdateDetailViewProp } from "./updateDetailView.svelte";
 import type { ButtonProps } from "../../ui/button/button.svelte";
 interface LocalProp extends UpdateDetailViewProp {
     variant?: ButtonProps["variant"];
+    size?: ButtonProps["size"];
     class?: ButtonProps["class"];
     Icon?: ButtonProps["Icon"];
     children?: ButtonProps["children"];

package/dist/components/detailView/update/updateDetailViewChildren.svelte

@@ -62,7 +62,7 @@
             {@const localAdditions = (localChildren[child.collection]?.created.length ?? 0) + (localChildren[child.collection]?.linked.length ?? 0)}
             {@const showEmpty = serverCount !== undefined && serverCount === 0 && localAdditions === 0}
             {#if showEmpty}
-                <div class="rounded-lg border bg-muted-soft overflow-hidden flex flex-col">
+                <div class="rounded-lg border bg-muted overflow-hidden flex flex-col">
                     <div class="flex flex-col items-center justify-center gap-3 py-6 px-4">
                         <div class="flex flex-col items-center gap-2 text-center">
                             <div class="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
@@ -75,7 +75,7 @@
                             <SelectRecord
                                 collectionName={child.collection}
                                 variant="outline"
-                                class="h-7 px-3 text-xs font-normal"
+                                size="sm"
                                 Icon={Link}
                                 onSelect={(r) => handleEmptyLink(child.collection, r)}
                             >
@@ -84,7 +84,7 @@
                             <CreateDetailViewButton
                                 collectionName={child.collection}
                                 variant="default"
-                                class="h-7 px-3 text-xs font-normal"
+                                size="sm"
                                 Icon={Plus}
                                 onChanges={(c) => handleEmptyCreate(child.collection, c)}
                             >
@@ -94,7 +94,7 @@
                     </div>
                 </div>
             {:else}
-                <div class="rounded-lg border bg-background overflow-hidden flex flex-col max-h-96">
+                <div class="rounded-lg border bg-card overflow-hidden flex flex-col max-h-96">
                     <DataTable
                         collectionName={child.collection}
                         searchParams={{ children_of: collectionName, parent_id: entry.id }}

package/dist/components/diffViewer.svelte

@@ -96,7 +96,7 @@
 	});
 </script>
 
-<div class={cn("w-full resize-y rounded-md border bg-muted-soft shadow-sm", className)}>
+<div class={cn("w-full resize-y rounded-md border bg-muted shadow-sm", className)}>
 	<div
 		bind:this={editorContainer}
 		class="editor pl-2"

package/dist/components/drawer.svelte

@@ -38,8 +38,8 @@
     <div
         transition:slide={{ axis: position === "bottom" ? "y" : "x" }}
         class={position === "bottom"
-            ? "fixed bottom-0 left-0 z-40 flex h-[60vh] w-full flex-col border-t bg-background"
-            : "fixed right-0 top-0 z-40 flex h-full w-full flex-col border-l bg-background"}
+            ? "fixed bottom-0 left-0 z-40 flex h-[60vh] w-full flex-col border-t bg-card"
+            : "fixed right-0 top-0 z-40 flex h-full w-full flex-col border-l bg-card"}
         style={position === "side" ? `max-width: ${calculateDrawerWidth()}px;` : ""}
     >
         {@render children?.()}

package/dist/components/foreingKeyInput.svelte

@@ -85,7 +85,7 @@
             placeholder={"NULL"}
             type="number"
             class="
-                bg-muted-soft text-xs
+                bg-muted text-xs
                 {destructive ? 'border-destructive bg-destructive/10' : ''}
             "
             bind:value={
@@ -98,7 +98,7 @@
     <div class="relative z-10">
         <Input
             placeholder={"PARENT ID"}
-            class="bg-muted-soft text-xs"
+            class="bg-muted text-xs"
             disabled={true}
         />
     </div>

package/dist/components/horizontalNav.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { page } from "$app/state";
+	import Button from "./ui/button/button.svelte";
+	import Separator from "./ui/separator/separator.svelte";
+	import * as Popover from "./ui/popover";
+	import { getStudioContext } from "../context";
+	import { buildNavSections, isItemActive, type NavItem } from "./mainNavShared";
+
+	const { lobb, ctx } = getStudioContext();
+
+	let sections: NavItem[][] = $state([[], [], []]);
+	onMount(async () => {
+		sections = await buildNavSections(lobb, ctx);
+	});
+
+	const currentPath = $derived(page.url.pathname.replace(/\/$/, "") || "/");
+</script>
+
+{#snippet section(section: NavItem[])}
+	<div class="flex flex-row items-center gap-1">
+		{#each section as item}
+			{@const active = isItemActive(currentPath, item)}
+			{#if !item.navs}
+				<Button
+					onclick={() => { if (item.onclick) item.onclick(); }}
+					href={item.href}
+					class="h-8 px-2.5 text-xs font-normal {active
+						? 'bg-accent text-foreground'
+						: 'text-foreground/70 hover:bg-accent/50 hover:text-foreground'}"
+					variant="ghost"
+					Icon={item.icon}
+				>
+					{item.label}
+				</Button>
+			{:else}
+				<Popover.Root>
+					<Popover.Trigger>
+						<Button
+							class="h-8 px-2.5 text-xs font-normal {active
+								? 'bg-accent text-accent-foreground'
+								: 'text-muted-foreground'}"
+							variant="ghost"
+							Icon={item.icon}
+						>
+							{item.label}
+						</Button>
+					</Popover.Trigger>
+					<Popover.Content sideOffset={6} side="bottom" align="start" class="w-60 p-0">
+						<div class="py-1">
+							{#each item.navs as childItem}
+								{@const childActive = isItemActive(currentPath, 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 {childActive
+											? 'bg-accent text-accent-foreground'
+											: 'text-muted-foreground'}"
+										Icon={childItem.icon}
+										onclick={() => { if (childItem.onclick) childItem.onclick(); }}
+										href={childItem.href}
+									>
+										{childItem.label}
+									</Button>
+								</div>
+							{/each}
+						</div>
+					</Popover.Content>
+				</Popover.Root>
+			{/if}
+		{/each}
+	</div>
+{/snippet}
+
+<div class="relative border-b border-border bg-card text-foreground h-12 w-full px-3 flex items-center justify-between gap-2">
+	<div class="flex flex-row items-center gap-2">
+		{@render section(sections[0])}
+		{#if sections[1].length > 0}
+			<Separator orientation="vertical" class="h-6 bg-border" />
+			{@render section(sections[1])}
+		{/if}
+	</div>
+
+	{@render section(sections[2])}
+</div>

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

@@ -0,0 +1,3 @@
+declare const HorizontalNav: import("svelte").Component<Record<string, never>, {}, "">;
+type HorizontalNav = ReturnType<typeof HorizontalNav>;
+export default HorizontalNav;

package/dist/components/importButton.svelte

@@ -170,7 +170,7 @@
 	}
 </script>
 
-<Button variant={rest.variant} class={rest.class} onclick={showDrawer}>
+<Button variant={rest.variant} size={rest.size} class={rest.class} onclick={showDrawer}>
 	<ExtensionsComponents
 		name="collections.import.button.content"
 		utils={getExtensionUtils(lobb, ctx)}
@@ -249,7 +249,7 @@
 					/>
 				{:else}
 					<textarea
-						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"
+						class="block h-56 w-full resize-none rounded-md border bg-muted 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>
@@ -264,11 +264,11 @@
 			</div>
 
 			<div class="flex h-12 shrink-0 items-center justify-end gap-2 border-t px-4">
-				<Button variant="outline" onclick={hideDrawer} class="h-7 px-3 text-xs font-normal" Icon={X}>
+				<Button variant="outline" onclick={hideDrawer} size="sm" Icon={X}>
 					Cancel
 				</Button>
 				{#if activeTab === "paste"}
-					<Button onclick={() => processContent(pasteContent)} class="h-7 px-3 text-xs font-normal" Icon={FileText}>
+					<Button onclick={() => processContent(pasteContent)} size="sm" Icon={FileText}>
 						Parse
 					</Button>
 				{/if}
@@ -289,10 +289,10 @@
 			</div>
 
 			<div class="flex h-12 shrink-0 items-center justify-end gap-2 border-t px-4">
-				<Button variant="outline" onclick={() => (step = "input")} class="h-7 px-3 text-xs font-normal" Icon={X}>
+				<Button variant="outline" onclick={() => (step = "input")} size="sm" Icon={X}>
 					Cancel
 				</Button>
-				<Button onclick={handleImport} class="h-7 px-3 text-xs font-normal" Icon={Check}>
+				<Button onclick={handleImport} size="sm" Icon={Check}>
 					Import {transformedRows.length} records
 				</Button>
 			</div>
@@ -345,7 +345,7 @@
 				</div>
 			{/if}
 			<div class="flex h-12 shrink-0 items-center justify-end gap-2 border-t px-4">
-				<Button onclick={hideDrawer} class="h-7 px-3 text-xs font-normal" Icon={Check}>
+				<Button onclick={hideDrawer} size="sm" Icon={Check}>
 					Done
 				</Button>
 			</div>

package/dist/components/mainNav.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import VerticalNav from "./verticalNav.svelte";
+	import HorizontalNav from "./horizontalNav.svelte";
+
+	interface Props {
+		orientation?: "vertical" | "horizontal";
+	}
+	const { orientation = "vertical" }: Props = $props();
+</script>
+
+{#if orientation === "horizontal"}
+	<HorizontalNav />
+{:else}
+	<VerticalNav />
+{/if}

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

@@ -0,0 +1,6 @@
+interface Props {
+    orientation?: "vertical" | "horizontal";
+}
+declare const MainNav: import("svelte").Component<Props, {}, "">;
+type MainNav = ReturnType<typeof MainNav>;
+export default MainNav;

package/dist/components/mainNavShared.d.ts

@@ -0,0 +1,10 @@
+export type NavItem = {
+    label: string;
+    href?: string;
+    icon: any;
+    represents?: string;
+    onclick?: () => void;
+    navs?: NavItem[];
+};
+export declare function buildNavSections(lobb: any, ctx: any): Promise<NavItem[][]>;
+export declare function isItemActive(currentPath: string, item: NavItem): boolean;

package/dist/components/mainNavShared.js

@@ -0,0 +1,62 @@
+import { House, Layers, Library, Workflow } from "lucide-svelte";
+import { emitEvent } from "../eventSystem";
+import { getDashboardNavs } from "../extensions/extensionUtils";
+async function isItemVisible(lobb, ctx, item) {
+    if (!item.represents)
+        return true;
+    const res = await emitEvent({ lobb, ctx }, "auth.canAccess", {
+        collection: item.represents,
+        action: "read",
+    });
+    return res === true;
+}
+export async function buildNavSections(lobb, ctx) {
+    const rawSections = [
+        [
+            { label: "Home", href: "/studio", icon: House },
+            { label: "Collections", href: "/studio/collections", icon: Library },
+            { label: "Data Model", href: "/studio/datamodel", icon: Layers, represents: "core_data_model" },
+            { label: "Workflows", href: "/studio/workflows", icon: Workflow, represents: "core_workflows" },
+        ],
+        [],
+        [],
+    ];
+    const navs = getDashboardNavs(ctx);
+    if (navs.top)
+        rawSections[0].push(...navs.top);
+    if (navs.middle)
+        rawSections[1].push(...navs.middle);
+    if (navs.bottom)
+        rawSections[2].push(...navs.bottom);
+    const result = [[], [], []];
+    for (let i = 0; i < rawSections.length; i++) {
+        for (const item of rawSections[i]) {
+            if (item.navs) {
+                const visibleChildren = [];
+                for (const child of item.navs) {
+                    if (await isItemVisible(lobb, ctx, child))
+                        visibleChildren.push(child);
+                }
+                if (visibleChildren.length && (await isItemVisible(lobb, ctx, item))) {
+                    result[i].push({ ...item, navs: visibleChildren });
+                }
+            }
+            else if (await isItemVisible(lobb, ctx, item)) {
+                result[i].push(item);
+            }
+        }
+    }
+    return result;
+}
+export function isItemActive(currentPath, item) {
+    if (item.navs)
+        return item.navs.some((c) => isItemActive(currentPath, c));
+    if (!item.href)
+        return false;
+    const itemHref = item.href.replace(/\/$/, "") || "/";
+    // "/studio" needs an exact match — it's a prefix of every other
+    // route, so startsWith would always light it up.
+    if (itemHref === "/studio")
+        return currentPath === "/studio";
+    return currentPath === itemHref || currentPath.startsWith(itemHref + "/");
+}

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-soft {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 {destructive ? 'border-destructive bg-destructive/10' : ''}">
     <!-- Collection picker -->
     <Popover.Root bind:open={collectionPopoverOpen}>
         <Popover.Trigger>

package/dist/components/rangeCalendarButton.svelte

@@ -33,9 +33,8 @@
     <Popover.Root>
         <Popover.Trigger
             class={cn(
-                buttonVariants({ variant: "outline" }),
+                buttonVariants({ variant: "outline", size: "sm" }),
                 !value && "text-muted-foreground",
-                "h-7 px-3 text-xs font-normal",
             )}
         >
             <CalendarIcon class="mr-2 size-4" />
@@ -59,7 +58,7 @@
                     class="flex flex-col overflow-hidden text-muted-foreground"
                 >
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             value = {
@@ -71,7 +70,7 @@
                         Today
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             value = {
@@ -83,7 +82,7 @@
                         Yesterday
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             const weekStart = startOfWeek(currentDate, "en-US");
@@ -96,7 +95,7 @@
                         This week (Sun - Today)
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             const thisWeekStart = startOfWeek(
@@ -119,7 +118,7 @@
                         Last week (Sun - Sat)
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             value = {
@@ -131,7 +130,7 @@
                         Last 7 days
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             value = {
@@ -143,7 +142,7 @@
                         Last 30 days
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             value = {
@@ -155,7 +154,7 @@
                         Last 90 days
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             value = {
@@ -167,7 +166,7 @@
                         Last 12 months
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             const lastYearStart = currentDate
@@ -185,7 +184,7 @@
                         Last Calendar year
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             const yearStart = currentDate.set({

package/dist/components/richTextEditor.svelte

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

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

@@ -8,7 +8,7 @@
     const { lobb, ctx } = getStudioContext();
 </script>
 
-<div class="grid h-full w-full overflow-auto bg-background">
+<div class="grid h-full w-full overflow-hidden bg-background">
     {#key extension && page}
         <ExtensionsComponents
             name="publicPages.{page}"

package/dist/components/routes/home.svelte

@@ -33,7 +33,7 @@
                 <Button
                     Icon={ArrowRight}
                     variant="outline"
-                    class="h-7 px-3 text-xs font-normal"
+                    size="sm"
                     onclick={() => goto("/studio/collections")}
                 >
                     Go to collections

package/dist/components/routes/workflows/workflows.svelte

@@ -103,7 +103,7 @@
     {#snippet belowSearch()}
         <div class="pb-4 px-2">
             <Button
-                class="h-7 px-3 text-xs font-normal w-full"
+                size="sm" class="w-full"
                 variant="outline"
                 onclick={() => goto("/studio/workflows/new")}
                 Icon={Plus}

package/dist/components/setServerPage.svelte

@@ -34,7 +34,7 @@
 			<div class="text-4xl">Welcome back</div>
 			<div>Sign in to your account</div>
 		</div>
-		<div class="flex flex-col gap-6 rounded-md border bg-white p-6">
+		<div class="flex flex-col gap-6 rounded-md border bg-card p-6">
 			<div class="flex flex-col gap-2">
 				<div>
 					<div class="mb-1 text-sm font-medium">Server</div>

package/dist/components/sidebar/sidebar.svelte

@@ -90,7 +90,7 @@
 >
     <div
         class="
-			bg-background border-r overflow-hidden
+			bg-card border-r overflow-hidden
 		"
         style="
 			{sidebarProperties.collapsed ? 'border-right-width: 0px; padding: 0px;' : ''}
@@ -107,7 +107,7 @@
                 {#if showSearch}
                     <div class="p-2">
                         <div
-                            class="flex items-center px-4 py-1 text-muted-foreground bg-muted-soft border rounded-md"
+                            class="flex items-center px-4 py-1 text-muted-foreground bg-muted border rounded-md"
                         >
                             <input
                                 type="text"
@@ -123,7 +123,7 @@
             </div>
             <div
                 class="
-					text-primary p-2 overflow-y-auto overflow-x-clip
+					text-foreground p-2 overflow-y-auto overflow-x-clip
 				"
                 style="max-height: {sidebarBodyHeight}px;"
             >

package/dist/components/sidebar/sidebarElements.svelte

@@ -58,7 +58,7 @@
         {#each data as node, index}
             {#if node.type === "directory"}
                 <button
-                    class="flex items-center justify-between p-2 gap-2 text-muted-foreground rounded-md hover:bg-muted-soft cursor-pointer"
+                    class="flex items-center justify-between p-2 gap-2 text-muted-foreground rounded-md hover:bg-muted cursor-pointer"
                     onclick={() => toggleDir(index)}
                 >
                     <div class="flex items-center gap-2">
@@ -89,8 +89,8 @@
                     href={node.href}
                     variant="ghost"
                     class="
-						flex items-center justify-between p-2 gap-2 hover:bg-muted-soft text-muted-foreground
-						rounded-md {isselected ? 'bg-muted' : ''}
+						flex items-center justify-between p-2 gap-2 text-muted-foreground
+						rounded-md {isselected ? 'bg-accent' : 'hover:bg-muted'}
 					"
                     title={node.name}
                 >
@@ -98,7 +98,7 @@
                         {#if node.icon}
                             <node.icon size="17.5" />
                         {/if}
-                        <div class="text-xs {isselected ? 'text-primary font-medium' : ''}">
+                        <div class="text-xs {isselected ? 'text-foreground font-medium' : ''}">
                             {node.name}
                         </div>
                     </div>