@lobb-js/studio 0.1.42 → 0.2.0

package/dist/components/LlmButton.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { lobb } from "..";
+	import { lobb, ctx } from "../store.svelte";
 	import { Brain, LoaderIcon, Send } from "lucide-svelte";
 	import Button, { type ButtonProps } from "./ui/button/button.svelte";
 	import * as Popover from "./ui/popover";
 	import Textarea from "./ui/textarea/textarea.svelte";
 	import { toast } from "svelte-sonner";
-	import { ctx } from "../store.svelte";
 
 	interface LocalProp {
 		value?: any;

package/dist/components/Studio.svelte

@@ -2,8 +2,7 @@
     import { Toaster } from "./ui/sonner";
     import { onMount, onDestroy } from "svelte";
     import { ModeWatcher } from "mode-watcher";
-    import { ctx } from "../store.svelte";
-    import { lobb } from "..";
+    import { lobb, ctx } from "../store.svelte";
     import Header from "./header.svelte";
     import { LoaderCircle, ServerOff } from "lucide-svelte";
     import Dialog from "./confirmationDialog/confirmationDialog.svelte";

package/dist/components/codeEditor.svelte

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

package/dist/components/createManyButton.svelte

@@ -4,7 +4,7 @@
 	import Button, { type ButtonProps } from "./ui/button/button.svelte";
 	import { toast } from "svelte-sonner";
 	import CodeEditor from "./codeEditor.svelte";
-	import { lobb } from "..";
+	import { lobb } from "../store.svelte";
 	import { calculateDrawerWidth } from "../utils";
   import Drawer from "./drawer.svelte";
 

package/dist/components/dataTable/childRecords.svelte

@@ -10,7 +10,7 @@
         collectionName: string;
         recordId: string;
         width: number;
-        unifiedBgColor?: "bg-soft" | "bg-background";
+        unifiedBgColor?: "bg-muted/30" | "bg-background";
     }
 
     let { collectionName, recordId, width, unifiedBgColor }: Props = $props();

package/dist/components/dataTable/childRecords.svelte.d.ts

@@ -2,7 +2,7 @@ interface Props {
     collectionName: string;
     recordId: string;
     width: number;
-    unifiedBgColor?: "bg-soft" | "bg-background";
+    unifiedBgColor?: "bg-muted/30" | "bg-background";
 }
 declare const ChildRecords: import("svelte").Component<Props, {}, "">;
 type ChildRecords = ReturnType<typeof ChildRecords>;

package/dist/components/dataTable/dataTable.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import _ from "lodash";
-    import { lobb } from "../..";
+    import { lobb, ctx } from "../../store.svelte";
     import Footer from "./footer.svelte";
     import Header from "./header.svelte";
     import Table, { type TableProps } from "./table.svelte";
@@ -10,7 +10,6 @@
     import ChildRecords from "./childRecords.svelte";
     import FieldCell from "./fieldCell.svelte";
     import Skeleton from "../ui/skeleton/skeleton.svelte";
-    import { ctx } from "../../store.svelte";
     import Button from "../ui/button/button.svelte";
     import { showDialog } from "../confirmationDialog/store.svelte";
     import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";
@@ -22,7 +21,7 @@
         filter?: any;
         showHeader?: boolean;
         showFooter?: boolean;
-        unifiedBgColor?: "bg-soft" | "bg-background";
+        unifiedBgColor?: "bg-muted/30" | "bg-background";
         showDelete?: boolean;
         tableProps?: Partial<TableProps>;
         headerLeft?: Snippet<[]>;

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

@@ -5,7 +5,7 @@ interface Props {
     filter?: any;
     showHeader?: boolean;
     showFooter?: boolean;
-    unifiedBgColor?: "bg-soft" | "bg-background";
+    unifiedBgColor?: "bg-muted/30" | "bg-background";
     showDelete?: boolean;
     tableProps?: Partial<TableProps>;
     headerLeft?: Snippet<[]>;

package/dist/components/dataTable/header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ctx } from "../../store.svelte";
+    import { lobb, ctx } from "../../store.svelte";
     import { ListRestart, Plus, SquareStack, Trash } from "lucide-svelte";
     import LlmButton from "../LlmButton.svelte";
     import FilterButton from "./filterButton.svelte";
@@ -7,7 +7,6 @@
     import Button from "../ui/button/button.svelte";
     import CreateManyButton from "../createManyButton.svelte";
     import { showDialog } from "../confirmationDialog/store.svelte";
-    import { lobb } from "../..";
     import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
     import type { Snippet } from "svelte";
 

package/dist/components/dataTable/table.svelte

@@ -36,7 +36,7 @@
 
 		// other
 		parentWidth?: number;
-		unifiedBgColor?: "bg-soft" | "bg-background";
+		unifiedBgColor?: "bg-muted/30" | "bg-background";
 		select?: Select;
 		tableWidth?: number;
 	}
@@ -179,7 +179,7 @@
 				sticky left-0 top-0 z-20
 				flex items-center p-2.5 text-xs h-10
 				border-r border-b gap-2
-				{unifiedBgColor ? unifiedBgColor : 'bg-soft'}
+				{unifiedBgColor ? unifiedBgColor : 'bg-muted/30'}
 			"
 		>
 			<!-- collapsable toggle -->
@@ -204,7 +204,7 @@
 			class="
 				sticky top-0 z-10
 				flex items-center p-2.5 text-xs h-10
-				{unifiedBgColor ? unifiedBgColor : 'bg-soft'}
+				{unifiedBgColor ? unifiedBgColor : 'bg-muted/30'}
 				{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
 				border-b gap-2
 			"
@@ -307,7 +307,7 @@
 						{expandedRows[index] ? '' : 'height: 0px;'}
 					"
 					class="
-						sticky left-0 top-0 overflow-auto bg-soft
+						sticky left-0 top-0 overflow-auto bg-muted/30
 						{unifiedBgColor ? unifiedBgColor : ''}
 						{expandedRows[index] ? 'border-t' : ''}
 					"

package/dist/components/dataTable/table.svelte.d.ts

@@ -22,7 +22,7 @@ export interface TableProps {
     tools?: Snippet<[Entry, number]>;
     collapsible?: Snippet<[Entry, number]>;
     parentWidth?: number;
-    unifiedBgColor?: "bg-soft" | "bg-background";
+    unifiedBgColor?: "bg-muted/30" | "bg-background";
     select?: Select;
     tableWidth?: number;
 }

package/dist/components/detailView/create/children.svelte

@@ -49,7 +49,7 @@
                         id: entry.id,
                         collectionName: collectionName,
                     }}
-                    class="bg-soft border rounded-md overflow-hidden"
+                    class="bg-muted/30 border rounded-md overflow-hidden"
                     bind:value={entry[childCollection]}
                 >
                     <CreateManyView

package/dist/components/detailView/create/createDetailView.svelte

@@ -19,9 +19,8 @@
 <script lang="ts">
     import { ArrowLeft, Plus, X } from "lucide-svelte";
     import Button from "../../ui/button/button.svelte";
-    import { lobb } from "../../..";
+    import { lobb, ctx } from "../../../store.svelte";
     import { toast } from "svelte-sonner";
-    import { ctx } from "../../../store.svelte";
     import ExtensionsComponents from "../../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../../extensions/extensionUtils";
     import { getField, getFieldIcon } from "../../dataTable/utils";

package/dist/components/detailView/create/createManyView.svelte

@@ -106,7 +106,7 @@
 >
     <div
         class="
-            flex items-center justify-between px-2 h-10 bg-soft
+            flex items-center justify-between px-2 h-10 bg-muted/30
             {expanded ? 'border-b' : ''}
         "
     >
@@ -159,13 +159,13 @@
         </div>
     </div>
     {#if expanded}
-        <div bind:clientWidth={tableWidth} class="bg-soft overflow-auto">
+        <div bind:clientWidth={tableWidth} class="bg-muted/30 overflow-auto">
             <Table
                 data={entries}
                 {columns}
                 selectByColumn="id"
                 showCollapsible={doesCollectionHasChildren}
-                unifiedBgColor="bg-soft"
+                unifiedBgColor="bg-muted/30"
             >
                 {#snippet tools(entry, index)}
                     <Button
@@ -234,7 +234,7 @@
                             {collectionName}
                             recordId={entry.id}
                             width={tableWidth}
-                            unifiedBgColor="bg-soft"
+                            unifiedBgColor="bg-muted/30"
                         />
                     {:else}
                         <SubRecords

package/dist/components/detailView/fieldInput.svelte

@@ -1,15 +1,11 @@
 <script lang="ts">
 	import { ctx } from "../../store.svelte";
-	import {
-		getDiscriminatorFieldRelation,
-		getFieldRelation,
-	} from "../../utils";
+	import { getFieldRelation } from "../../utils";
 	import { Ban, Check, CircleAlert, X } from "lucide-svelte";
 	import { getField } from "../dataTable/utils";
 	import Button from "../ui/button/button.svelte";
 	import FieldCustomInput from "./fieldCustomInput.svelte";
 	import Input from "../ui/input/input.svelte";
-	import Combobox from "../combobox.svelte";
 	import * as Select from "../ui/select/index";
 	import Textarea from "../ui/textarea/textarea.svelte";
 	import ForeingKeyInput from "../foreingKeyInput.svelte";
@@ -38,10 +34,6 @@
 		ctx.meta.collections[collectionName].fields[fieldName].ui;
 	const field = getField(fieldName, collectionName);
 	const fieldRelation = getFieldRelation(collectionName, fieldName);
-	const discriminatorFieldRelation = getDiscriminatorFieldRelation(
-		collectionName,
-		fieldName,
-	);
 	const isDisabled = field.key === 'id' || Boolean(ui?.disabled)
 	const disabledClasses = "pointer-events-none opacity-50";
 	const destructive: boolean = $derived(Boolean(errorMessages.length));
@@ -74,30 +66,7 @@
 		{:else if field.label === "id"}
 			<Input
 				placeholder="AUTO GENERATED"
-				class="bg-soft text-xs"
-				bind:value
-			/>
-		{:else if discriminatorFieldRelation}
-			{@const availableCollections =
-				discriminatorFieldRelation.to === "*"
-					? Object.keys(ctx.meta.collections)
-					: discriminatorFieldRelation.to.map(
-							(item: any) => item.collection,
-						)}
-			{@const collections = availableCollections.map((key: any) => {
-				return {
-					label: key,
-					value: key,
-				};
-			})}
-			<Combobox
-				placeholder="NULL"
-				searchPlaceholder="Search Collections"
-				options={collections}
-				buttonClass="
-					bg-soft text-muted-foreground px-0 pl-4 pr-8 font-normal
-					{destructive ? 'border-destructive bg-destructive/10' : ''}
-				"
+				class="bg-muted/30 text-xs"
 				bind:value
 			/>
 		{:else if fieldRelation && entry}
@@ -132,7 +101,7 @@
 					<Select.Trigger
 						placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 						class="
-							h-9 w-full bg-soft pr-8
+							h-9 w-full bg-muted/30 pr-8
 							{destructive ? 'border-destructive bg-destructive/10' : ''}
 						"
 					>
@@ -151,7 +120,7 @@
 					placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 					type="text"
 					class="
-						bg-soft text-xs
+						bg-muted/30 text-xs
 						{destructive ? 'border-destructive bg-destructive/10' : ''}
 					"
 					bind:value
@@ -162,7 +131,7 @@
 				placeholder={ui?.placeholder ? ui.placeholder : value === "" ? "EMPTY STRING" : "NULL"}
 				rows={5}
 				class="
-					bg-soft text-xs
+					bg-muted/30 text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value
@@ -172,7 +141,7 @@
 				type="date"
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 				class="
-					dateInput block w-full bg-soft pr-9 text-xs
+					dateInput block w-full bg-muted/30 pr-9 text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value={
@@ -191,7 +160,7 @@
 				type="time"
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 				class="
-					dateInput block w-full bg-soft pr-9 text-xs
+					dateInput block w-full bg-muted/30 pr-9 text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value={
@@ -209,7 +178,7 @@
 				type="datetime-local"
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 				class="
-					dateInput block w-full bg-soft pr-9 text-xs
+					dateInput block w-full bg-muted/30 pr-9 text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value={
@@ -230,7 +199,7 @@
 				<Select.Trigger
 					placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 					class="
-						bg-soft pr-9
+						bg-muted/30 pr-9
 						{destructive ? 'border-destructive bg-destructive/10' : ''}
 					"
 				>
@@ -257,7 +226,7 @@
 				type="number"
 				step="any"
 				class="
-					bg-soft text-xs
+					bg-muted/30 text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value
@@ -267,7 +236,7 @@
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 				type="number"
 				class="
-					bg-soft text-xs
+					bg-muted/30 text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value

package/dist/components/detailView/fieldInputReplacement.svelte

@@ -49,7 +49,7 @@
 				placeholder={field.placeholder ? field.placeholder : "NULL"}
 				type="text"
 				class="
-					bg-soft text-xs
+					bg-muted/30 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-soft pr-8
+						h-9 w-full bg-muted/30 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-soft text-xs
+						bg-muted/30 text-xs
 						{destructive ? 'border-destructive bg-destructive/10' : ''}
 					"
 					bind:value
@@ -98,7 +98,7 @@
 			<Input
 				type="date"
 				class="
-					dateInput block w-full bg-soft pr-9 text-xs
+					dateInput block w-full bg-muted/30 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-soft pr-9 text-xs
+					dateInput block w-full bg-muted/30 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-soft pr-9 text-xs
+					dateInput block w-full bg-muted/30 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-soft pr-9
+							bg-muted/30 pr-9
 							{destructive ? 'border-destructive bg-destructive/10' : ''}
 						"
 					>

package/dist/components/detailView/store.svelte.js

@@ -47,7 +47,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import CreateDetailView from "./create/createDetailView.svelte";
 import UpdateDetailView from "./update/updateDetailView.svelte";
-import { lobb } from "../..";
+import { lobb } from "../../store.svelte";
 import { getCollectionParamsFields } from "../dataTable/utils";
 import { mount, unmount } from "svelte";
 export function openCreateDetailView(props) {

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

@@ -38,11 +38,11 @@
                     filter={{
                         [childField]: entry.id,
                     }}
-                    class="bg-soft border rounded-md overflow-hidden"
+                    class="bg-muted/30 border rounded-md overflow-hidden"
                 >
                     <div class="border rounded-md overflow-clip">
                         <div
-                            class="flex items-center justify-between px-2 h-10 bg-soft border-b"
+                            class="flex items-center justify-between px-2 h-10 bg-muted/30 border-b"
                         >
                             <div class="flex-1 flex h-full items-center gap-2">
                                 <TableIcon
@@ -74,7 +74,7 @@
                                     filter={{
                                         [childField]: entry.id,
                                     }}
-                                    unifiedBgColor="bg-soft"
+                                    unifiedBgColor="bg-muted/30"
                                     showHeader={false}
                                     showFooter={false}
                                     showDelete={true}

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

@@ -21,9 +21,8 @@
     import { ArrowLeft, Pencil, X } from "lucide-svelte";
     import Button from "../../ui/button/button.svelte";
     import { fade, fly } from "svelte/transition";
-    import { lobb } from "../../..";
+    import { lobb, ctx } from "../../../store.svelte";
     import { toast } from "svelte-sonner";
-    import { ctx } from "../../../store.svelte";
     import ExtensionsComponents from "../../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../../extensions/extensionUtils";
     import { calculateDrawerWidth, getChangedProperties } from "../../../utils";

package/dist/components/diffViewer.svelte

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

package/dist/components/foreingKeyInput.svelte

@@ -63,7 +63,7 @@
             placeholder={"NULL"}
             type="number"
             class="
-                bg-soft text-xs
+                bg-muted/30 text-xs
                 {destructive ? 'border-destructive bg-destructive/10' : ''}
             "
             bind:value={() => refrenceId, (v) => (value.id = v)}
@@ -73,7 +73,7 @@
     <div class="relative z-10">
         <Input
             placeholder={"PARENT ID"}
-            class="bg-soft text-xs"
+            class="bg-muted/30 text-xs"
             disabled={true}
         />
     </div>

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-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 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-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 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-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 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-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 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-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 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-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 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-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 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-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 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-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 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-soft hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             const yearStart = currentDate.set({

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

@@ -1,13 +1,12 @@
 <script lang="ts">
     import DiffViewer from "../../diffViewer.svelte";
-    import { ctx } from "../../../store.svelte";
+    import { lobb, ctx } from "../../../store.svelte";
     import { onMount } from "svelte";
     import stringify from "json-stable-stringify";
     import CodeEditor from "../../codeEditor.svelte";
     import Table from "../../dataTable/table.svelte";
     import Button from "../../ui/button/button.svelte";
     import { LoaderCircle, SendHorizontal } from "lucide-svelte";
-    import { lobb } from "../../..";
 
     let configSchema: string = $state("");
     let dbSchema: string = $state("");

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

@@ -3,10 +3,9 @@
     import WorkflowEditor, {
         type WorkflowEntry,
     } from "../../workflowEditor.svelte";
-    import { lobb } from "../../..";
+    import { lobb, ctx } from "../../../store.svelte";
     import Sidebar from "../../sidebar/sidebar.svelte";
     import Button from "../../ui/button/button.svelte";
-    import { ctx } from "../../../store.svelte";
     import { location } from "@wjfe/n-savant";
     import { CircleSlash2, Plus, Trash2 } from "lucide-svelte";
     import { onMount } from "svelte";

package/dist/components/sidebar/sidebar.svelte

@@ -99,7 +99,7 @@
                 {#if showSearch}
                     <div class="p-2">
                         <div
-                            class="flex items-center px-4 py-1 text-muted-foreground bg-soft border rounded-md"
+                            class="flex items-center px-4 py-1 text-muted-foreground bg-muted/30 border rounded-md"
                         >
                             <input
                                 type="text"

package/dist/components/sidebar/sidebarElements.svelte

@@ -107,7 +107,7 @@
                     href={element.href}
                     variant="ghost"
                     class="
-						flex items-center justify-between p-2 gap-2 hover:bg-soft text-muted-foreground
+						flex items-center justify-between p-2 gap-2 hover:bg-muted/30 text-muted-foreground
 						rounded-md {isselected ? 'bg-muted' : ''}
 					"
                     title={element.name}

package/dist/components/singletone.svelte

@@ -5,7 +5,7 @@
     import SidebarTrigger from "./sidebar/sidebarTrigger.svelte";
     import Button from "./ui/button/button.svelte";
     import { onMount } from "svelte";
-    import { lobb } from "..";
+    import { lobb } from "../store.svelte";
   import { toast } from "svelte-sonner";
   import Skeleton from "./ui/skeleton/skeleton.svelte";