@lobb-js/studio 0.33.0 → 0.35.0

package/dist/applyUITheme.d.ts

@@ -0,0 +1,2 @@
+import type { UITheme } from "./store.types";
+export declare function applyUITheme(theme: UITheme | undefined): void;

package/dist/{applyStudioTheme.js → applyUITheme.js}

@@ -1,8 +1,8 @@
-// Studio theme injection. Writes the configured CSS-variable overrides
-// into a single <style> tag — light overrides under `:root`, dark under
+// UI theme injection. Writes the configured CSS-variable overrides into
+// a single <style> tag — light overrides under `:root`, dark under
 // `.dark` — so each mode picks up its own variant. Idempotent: re-runs
 // replace the previous block.
-const STYLE_ID = "lobb-studio-theme";
+const STYLE_ID = "lobb-ui-theme";
 function buildDeclarations(vars) {
     if (!vars)
         return "";
@@ -14,7 +14,7 @@ function buildDeclarations(vars) {
     }
     return out.join(" ");
 }
-export function applyStudioTheme(theme) {
+export function applyUITheme(theme) {
     if (typeof document === "undefined")
         return;
     document.getElementById(STYLE_ID)?.remove();

package/dist/components/LlmButton.svelte

@@ -16,6 +16,7 @@
 		format?: any;
 		messages?: any[];
 		variant?: ButtonProps["variant"];
+		size?: ButtonProps["size"];
 		class?: ButtonProps["class"];
 		Icon?: ButtonProps["Icon"];
 		children?: ButtonProps["children"];
@@ -28,6 +29,7 @@
 		description,
 		placeholder = "write prompt description",
 		variant = "default",
+		size,
 		Icon = Brain,
 		onApiResponseComplete,
 		messages,
@@ -98,7 +100,7 @@
 {#if ctx.meta.extensions.llm && ctx.meta.collections.llm_chat}
 	<Popover.Root bind:open={popoverOpen}>
 		<Popover.Trigger>
-			<Button {variant} class={props.class}>
+			<Button {variant} {size} class={props.class}>
 				{#if loading}
 					<LoaderIcon class="animate-spin" />
 				{:else}
@@ -129,7 +131,7 @@
 				<Button
 					type="submit"
 					Icon={Send}
-					class="h-7 px-3 text-xs font-normal">Submit</Button
+					size="sm">Submit</Button
 				>
 			</form>
 		</Popover.Content>

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

@@ -7,6 +7,7 @@ interface LocalProp {
     format?: any;
     messages?: any[];
     variant?: ButtonProps["variant"];
+    size?: ButtonProps["size"];
     class?: ButtonProps["class"];
     Icon?: ButtonProps["Icon"];
     children?: ButtonProps["children"];

package/dist/components/Studio.svelte

@@ -5,7 +5,7 @@
     import { createLobb } from "../store.svelte";
     import { setStudioContext } from "../context";
     import { LoaderCircle, ServerOff } from "lucide-svelte";
-    import MiniSidebar from "./miniSidebar.svelte";
+    import MainNav from "./mainNav.svelte";
     import * as Tooltip from "./ui/tooltip";
     import { page } from "$app/state";
     import { afterNavigate } from "$app/navigation";
@@ -17,7 +17,7 @@
     } from "../extensions/extensionUtils";
     import extensionMap from 'virtual:lobb-studio-extensions';
     import { mediaQueries } from "../utils";
-    import { applyStudioTheme } from "../applyStudioTheme";
+    import { applyUITheme } from "../applyUITheme";
     import Home from "./routes/home.svelte";
     import DataModel from "./routes/data_model/dataModel.svelte";
     import Collections from "./routes/collections/collections.svelte";
@@ -44,6 +44,12 @@
 
     let status: "loading" | "error" | "ready" = $state("loading");
     let isSmallScreen = $derived(!mediaQueries.sm.current);
+    // Horizontal nav forces the layout to row mode (top bar instead of
+    // left rail). Falls back to vertical when small-screen mode is on,
+    // since there's no useful horizontal layout below 640px.
+    const horizontalNav = $derived(
+        (ctx.meta as any)?.ui?.horizontalNav === true && !isSmallScreen,
+    );
 
     onMount(async () => {
         // Remove the static loading screen defined in app.html — it shows instantly
@@ -51,7 +57,7 @@
         document.getElementById("app-loading")?.remove();
         try {
             ctx.meta = await lobb.getMeta();
-            applyStudioTheme(ctx.meta.studio?.theme);
+            applyUITheme(ctx.meta.ui?.theme);
             ctx.extensions = await loadExtensions(lobb, ctx, extensionMap);
             await executeExtensionsOnStartup(lobb, ctx);
             loadExtensionWorkflows(ctx as any);
@@ -104,11 +110,13 @@
 {:else}
     <Tooltip.Provider delayDuration={0} disableHoverableContent={true}>
         <main
-            class="bg-muted h-screen w-screen"
-            style="display: grid; grid-template-columns: {isSmallScreen ? '1fr' : '3.5rem 1fr'};"
+            class="bg-muted h-screen w-screen overflow-hidden"
+            style={horizontalNav
+                ? "display: grid; grid-template-rows: 3rem 1fr;"
+                : `display: grid; grid-template-columns: ${isSmallScreen ? '1fr' : '3.5rem 1fr'};`}
         >
-            <MiniSidebar />
-            <div class="min-h-0 h-screen overflow-hidden">
+            <MainNav orientation={horizontalNav ? "horizontal" : "vertical"} />
+            <div class="min-h-0 h-full overflow-hidden">
                 {#if page.url.pathname.replace(/\/$/, "") === "/studio"}
                     <Home />
                 {:else if page.url.pathname.startsWith("/studio/collections")}

package/dist/components/codeEditor.svelte

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

package/dist/components/createManyButton.svelte

@@ -90,14 +90,14 @@
 				<Button
 					variant="outline"
 					onclick={() => hideDrawer()}
-					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={Plus}
 					onclick={handleCreateMany}
 				>

package/dist/components/dataTable/dataTable.svelte

@@ -279,7 +279,7 @@
 
 <div
     bind:clientWidth={dataTableContainerWidth}
-    class="flex flex-col overflow-auto h-full w-full"
+    class="flex flex-col overflow-auto h-full w-full bg-card"
 >
     {#snippet rowActionsSnippet(entry: Record<string, any>)}
         <ExtensionsComponents

package/dist/components/dataTable/dataTableTabs.svelte

@@ -44,7 +44,7 @@
 </script>
 
 {#if tabs}
-    <div class="flex items-center gap-1 px-3 py-1.5 border-b shrink-0 bg-background">
+    <div class="flex items-center gap-1 px-3 py-1.5 border-b shrink-0 bg-card">
         {#each tabs as tab}
             {@const key = tab.id ?? tab.label}
             {@const isActive = activeTab ? activeTab === key : (tab.default ?? tabs[0] === tab)}

package/dist/components/dataTable/filter.svelte

@@ -71,7 +71,8 @@
         <Popover.Trigger
             class={buttonVariants({
                 variant: "ghost",
-                class: "h-7 px-2 text-xs font-normal text-muted-foreground",
+                size: "sm",
+                class: "text-muted-foreground",
             })}
         >
             <Plus />
@@ -184,7 +185,7 @@
                                     <Popover.Trigger
                                         class={buttonVariants({
                                             variant: "ghost",
-                                            class: "h-7 px-2 text-xs font-normal",
+                                            size: "sm",
                                         })}
                                     >
                                         <Plus />

package/dist/components/dataTable/filterButton.svelte

@@ -21,7 +21,7 @@
 	<Popover.Trigger
 		class={buttonVariants({
 			variant: "ghost",
-			class: "h-7 px-3 text-xs font-normal",
+			size: "sm",
 		})}
 	>
 		<ListFilter />

package/dist/components/dataTable/footer.svelte

@@ -27,7 +27,7 @@
 
 <div
     bind:clientWidth={footerWidth}
-    class="flex justify-between box-content border-t bg-background px-2 h-10"
+    class="flex justify-between box-content border-t bg-card px-2 h-10"
 >
     <div class="flex items-center gap-2">
         <Button

package/dist/components/dataTable/header.svelte

@@ -4,7 +4,6 @@
     import type { ParentContext } from "./dataTable.svelte";
     import CanAccess from "../canAccess.svelte";
     import { Download, ListRestart, Plus, Trash, Link } from "lucide-svelte";
-    import * as Tooltip from "../ui/tooltip";
     import LlmButton from "../LlmButton.svelte";
     import FilterButton from "./filterButton.svelte";
     import SortButton from "./sortButton.svelte";
@@ -105,7 +104,7 @@
 </script>
 
 <div
-    class="flex justify-between items-center gap-2 p-2 border-b bg-background h-10"
+    class="flex justify-between items-center gap-2 p-2 border-b bg-card h-12"
     bind:clientWidth={headerWidth}
 >
     <div class="flex items-center gap-1">
@@ -115,7 +114,7 @@
                 Icon={Trash}
                 onclick={handleDeleteButton}
                 variant="outline"
-                class="h-7 px-3 text-xs font-normal"
+                size="sm"
             >
                 Delete {selectedRecords.length}
                 {selectedRecords.length > 1 ? "records" : "record"}
@@ -135,7 +134,7 @@
                 variant="outline"
                 title="Filter table with AI"
                 description="Tell the AI how do you want to filter the table"
-                class="h-7 px-3 text-xs font-normal"
+                size="sm"
                 format={{
                     type: "json_object",
                 }}
@@ -161,7 +160,8 @@
     <div>
         <Button
             variant="ghost"
-            class="h-7 px-2 font-normal text-muted-foreground"
+            size="sm"
+            class="text-muted-foreground"
             Icon={ListRestart}
             onclick={() => (params = { ...params })}
         >
@@ -169,20 +169,13 @@
         </Button>
         {#if showImport}
             <CanAccess collection={collectionName} action="create">
-                <Tooltip.Provider delayDuration={0}>
-                    <Tooltip.Root>
-                        <Tooltip.Trigger>
-                            <ImportButton
-                                {collectionName}
-                                variant="outline"
-                                class="h-7 px-2 text-xs font-normal"
-                                Icon={Download}
-                                onSuccessfullSave={() => (params = { ...params })}
-                            />
-                        </Tooltip.Trigger>
-                        <Tooltip.Content>Import</Tooltip.Content>
-                    </Tooltip.Root>
-                </Tooltip.Provider>
+                <ImportButton
+                    {collectionName}
+                    variant="outline"
+                    size="sm"
+                    Icon={Download}
+                    onSuccessfullSave={() => (params = { ...params })}
+                />
             </CanAccess>
         {/if}
         <ExtensionsComponents
@@ -195,7 +188,7 @@
             <SelectRecord
                 {collectionName}
                 variant="outline"
-                class="h-7 px-3 text-xs font-normal"
+                size="sm"
                 Icon={Link}
                 onSelect={handleLink}
             >
@@ -206,7 +199,7 @@
             <CreateDetailViewButton
                 {collectionName}
                 variant="default"
-                class="h-7 px-3 text-xs font-normal"
+                size="sm"
                 Icon={Plus}
                 onChanges={onCreate ? handleCreate : undefined}
                 onSuccessfullSave={onCreate ? undefined : handleCreate}

package/dist/components/dataTable/listViewChildren.svelte

@@ -61,7 +61,7 @@
                             <CreateDetailViewButton
                                 collectionName={child.collection}
                                 variant="ghost"
-                                class="h-7 px-3 text-xs font-normal"
+                                size="sm"
                                 Icon={Plus}
                                 values={{ [child.field]: recordId }}
                                 onSuccessfullSave={async () => { refreshDataTable = !refreshDataTable; }}

package/dist/components/dataTable/sort.svelte

@@ -143,7 +143,7 @@
             <Popover.Trigger
                 class={buttonVariants({
                     variant: "ghost",
-                    class: "h-7 px-3 text-xs font-normal",
+                    size: "sm",
                 })}
             >
                 <Plus />

package/dist/components/dataTable/sortButton.svelte

@@ -17,7 +17,7 @@
 	<Popover.Trigger
 		class={buttonVariants({
 			variant: "ghost",
-			class: "h-7 px-3 text-xs font-normal",
+			size: "sm",
 		})}
 	>
 		<ArrowDownWideNarrow />

package/dist/components/dataTable/table.svelte

@@ -182,7 +182,7 @@
 				flex items-center p-2.5 text-xs h-10
 				border-r border-b gap-2
 				{headerBorderTop ? 'border-t' : ''}
-				bg-muted-soft
+				bg-muted
 			"
 		>
 			<!-- collapsable toggle -->
@@ -207,7 +207,7 @@
 			class="
 				sticky top-0 z-10
 				flex items-center p-2.5 text-xs h-10
-				bg-muted-soft
+				bg-muted
 				{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
 				border-b gap-2
 				{headerBorderTop ? 'border-t' : ''}
@@ -234,7 +234,7 @@
 			class="
 				sticky top-0 right-0 z-20
 				flex items-center p-2.5 h-10
-				bg-muted-soft
+				bg-muted
 				border-l border-b
 				{headerBorderTop ? 'border-t' : ''}
 			"
@@ -249,7 +249,7 @@
 					class="
 						sticky left-0
 						flex items-center p-2.5 text-xs h-10
-						bg-background
+						bg-card
 						border-r gap-2
 					"
 				>
@@ -295,8 +295,8 @@
 					}}
 					class="
 						flex items-center p-2.5 text-xs h-10 text-nowrap overflow-clip
-						{select ? 'cursor-pointer' : ''}
-						bg-background
+						{select ? 'cursor-pointer hover:bg-accent' : ''}
+						bg-card
 						{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
 					"
 				>
@@ -313,7 +313,7 @@
 						sticky right-0 z-10
 						flex items-center p-2.5 text-xs h-10
 						border-l gap-2
-						bg-background
+						bg-card
 					"
 				>
 					{@render rowActions?.(entry, index)}
@@ -334,7 +334,7 @@
 						{expandedRows[index] ? '' : 'height: 0px;'}
 					"
 					class="
-						sticky left-0 top-0 overflow-auto bg-muted-soft
+						sticky left-0 top-0 overflow-auto bg-muted
 						
 						{expandedRows[index] ? 'border-t' : ''}
 					"

package/dist/components/dataTable/utils.js

@@ -1,4 +1,5 @@
 import { getFieldRelationTarget } from "../../relations";
+import { getFieldTypeLabel } from "../../utils";
 import { Binary, Braces, Brackets, Calendar, CalendarClock, Clock, Hash, Key, Link, Text, Type, } from "lucide-svelte/icons";
 import { icons } from "lucide-svelte";
 export function getCollectionColumns(ctx, collectionName) {
@@ -10,7 +11,7 @@ export function getCollectionColumns(ctx, collectionName) {
             continue;
         headers.push({
             id: field.key,
-            subtext: field.type,
+            subtext: getFieldTypeLabel(field.type),
             icon: getFieldIcon(ctx, fieldName, collectionName),
         });
     }

package/dist/components/dataTablePopup/dataTablePopup.svelte

@@ -59,7 +59,7 @@
 
 	<div
 		transition:scale={{ duration: 200, easing: cubicOut, start: 0.95 }}
-		class="fixed left-1/2 top-1/2 z-40 flex h-[85vh] w-[95vw] max-w-7xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border bg-background shadow-2xl"
+		class="fixed left-1/2 top-1/2 z-40 flex h-[85vh] w-[95vw] max-w-7xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border bg-card shadow-2xl"
 	>
 		<div class="flex h-12 shrink-0 items-center justify-between gap-4 border-b px-4">
 			<div class="text-sm font-medium">{title ?? collectionName}</div>

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

@@ -37,7 +37,7 @@
                     parentCollectionName={collectionName}
                     collectionName={child.collection}
                     parentRecord={{ id: entry.id, collectionName }}
-                    class="bg-muted-soft border rounded-md overflow-hidden"
+                    class="bg-muted border rounded-md overflow-hidden"
                     bind:value={entry[child.collection]}
                 >
                     <CreateManyView

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

@@ -143,14 +143,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 : Plus}
                 onclick={handleSave}
             >

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

@@ -6,6 +6,7 @@
 
 	interface LocalProp extends CreateDetailViewProp {
 		variant?: ButtonProps["variant"];
+		size?: ButtonProps["size"];
 		class?: ButtonProps["class"];
 		Icon?: ButtonProps["Icon"];
 		children?: ButtonProps["children"];
@@ -17,6 +18,7 @@
 
 <Button
 	variant={props.variant}
+	size={props.size}
 	class={props.class}
 	Icon={props.Icon}
 	onclick={() => { open = true; }}

package/dist/components/detailView/create/createDetailViewButton.svelte.d.ts

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

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

@@ -54,7 +54,7 @@
         {#each children as child}
             {@const localAdditions = (localChildren[child.collection]?.created.length ?? 0) + (localChildren[child.collection]?.linked.length ?? 0)}
             {#if localAdditions === 0}
-                <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">
@@ -67,7 +67,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)}
                             >
@@ -76,7 +76,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)}
                             >
@@ -86,7 +86,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: -1 }}

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

@@ -112,7 +112,7 @@
 >
     <div
         class="
-            flex items-center justify-between px-2 h-10 bg-muted-soft
+            flex items-center justify-between px-2 h-10 bg-muted
             {expanded ? 'border-b' : ''}
         "
     >
@@ -137,12 +137,12 @@
                 text="Select existing"
                 onSelect={onRecordSelect}
                 filter={selectRecordFilter}
-                class="h-7 px-2 font-normal text-xs"
+                size="sm"
                 variant="ghost"
             />
             <CreateDetailViewButton
                 variant="ghost"
-                class="h-7 px-2 font-normal text-xs"
+                size="sm"
                 Icon={Plus}
                 {collectionName}
                 onChanges={(updated) => { addChanges = updated; }}
@@ -165,7 +165,7 @@
         </div>
     </div>
     {#if expanded}
-        <div bind:clientWidth={tableWidth} class="bg-muted-soft overflow-auto">
+        <div bind:clientWidth={tableWidth} class="bg-muted overflow-auto">
             <Table
                 data={entries}
                 {columns}

package/dist/components/detailView/detailView.svelte

@@ -6,6 +6,7 @@
     import { getExtensionUtils } from "../../extensions/extensionUtils";
     import { getField, getFieldIcon } from "../dataTable/utils";
     import FieldInput from "./fieldInput.svelte";
+    import { getFieldTypeLabel } from "../../utils";
 
     interface Props {
         collectionName: string;
@@ -50,7 +51,7 @@
                                 <div class="h-fit">{field.label}</div>
                                 <div class="flex h-fit items-center gap-1 text-[0.7rem] text-muted-foreground">
                                     <FieldIcon size="12" />
-                                    {field.type}
+                                    {getFieldTypeLabel(field.type)}
                                 </div>
                             </div>
                         </ExtensionsComponents>

package/dist/components/detailView/fieldInput.svelte

@@ -87,7 +87,7 @@
 		{:else if field.label === "id"}
 			<Input
 				placeholder="AUTO GENERATED"
-				class="bg-muted-soft text-xs"
+				class="bg-muted text-xs"
 				bind:value
 			/>
 		{:else if fieldRelationTarget && entry}
@@ -127,7 +127,7 @@
 			>
 				<Select.Trigger
 					class="
-						h-9 w-full bg-muted-soft pr-8
+						h-9 w-full bg-muted pr-8
 						{destructive ? 'border-destructive bg-destructive/10' : ''}
 					"
 				>
@@ -159,7 +159,7 @@
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 				type="text"
 				class="
-					bg-muted-soft text-xs
+					bg-muted text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value
@@ -169,7 +169,7 @@
 				placeholder={ui?.placeholder ? ui.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
@@ -179,7 +179,7 @@
 				type="date"
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 				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={
@@ -198,7 +198,7 @@
 				type="time"
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 				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={
@@ -216,7 +216,7 @@
 				type="datetime-local"
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 				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={
@@ -237,7 +237,7 @@
 				<Select.Trigger
 					placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 					class="
-						bg-muted-soft pr-9
+						bg-muted pr-9
 						{destructive ? 'border-destructive bg-destructive/10' : ''}
 					"
 				>
@@ -265,7 +265,7 @@
 				scale={isFloat ? 20 : 0}
 				groupDigits={ui?.groupDigits ?? false}
 				class="
-					bg-muted-soft text-xs
+					bg-muted text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value
@@ -275,7 +275,7 @@
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 				type="text"
 				class="
-					bg-muted-soft text-xs
+					bg-muted text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value