@lobb-js/studio 0.34.0 → 0.35.0

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/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' : ''}
 			"
@@ -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/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/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">

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' : ''}
         "
     >
@@ -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

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/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">

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/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/importButton.svelte

@@ -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>

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

@@ -58,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 = {
@@ -70,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 = {
@@ -82,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");
@@ -95,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(
@@ -118,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 = {
@@ -130,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 = {
@@ -142,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 = {
@@ -154,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 = {
@@ -166,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
@@ -184,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/sidebar/sidebar.svelte

@@ -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"

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">
@@ -90,7 +90,7 @@
                     variant="ghost"
                     class="
 						flex items-center justify-between p-2 gap-2 text-muted-foreground
-						rounded-md {isselected ? 'bg-muted' : 'hover:bg-muted-soft'}
+						rounded-md {isselected ? 'bg-accent' : 'hover:bg-muted'}
 					"
                     title={node.name}
                 >

package/dist/utils.d.ts

@@ -18,6 +18,7 @@ export declare const mediaQueries: {
     xl: MediaQuery;
     '2xl': MediaQuery;
 };
+export declare function getFieldTypeLabel(type: string | undefined | null): string;
 export declare function calculateDrawerWidth(): number;
 export declare function getChangedProperties(oldObj: Record<string, any>, newObj: Record<string, any>): Record<string, any>;
 export declare function parseFunction(functionString: string): any;

package/dist/utils.js

@@ -12,6 +12,18 @@ export const mediaQueries = {
     xl: new MediaQuery('min-width: 1280px'),
     '2xl': new MediaQuery('min-width: 1536px'),
 };
+// User-facing label for a field type. "string"/"text" are jargon to
+// non-technical users, so we surface "Text"/"Long text" instead. Types
+// not in the map fall through to the raw identifier — extend as needed.
+const FIELD_TYPE_LABELS = {
+    string: "Text",
+    text: "Long text",
+};
+export function getFieldTypeLabel(type) {
+    if (!type)
+        return "";
+    return FIELD_TYPE_LABELS[type] ?? type;
+}
 export function calculateDrawerWidth() {
     const backgroundDrawerButtons = document.querySelectorAll(".backgroundDrawerButton");
     const drawersCount = Array.from(backgroundDrawerButtons).length;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/app.css

@@ -26,7 +26,6 @@
 
   --muted: oklch(0.97 0.001 138);
   --muted-foreground: oklch(0.55 0.012 138);
-  --muted-soft: oklch(0.985 0.001 138);
 
   --accent: oklch(0.95 0.001 138);
   --accent-foreground: oklch(0.20 0.012 138);
@@ -47,7 +46,7 @@
   --popover: oklch(0.18 0.012 138);
   --popover-foreground: oklch(0.94 0.012 138);
 
-  --primary: oklch(0.72 0.20 140);
+  --primary: oklch(0.72 0.20 138);
   --primary-foreground: oklch(0.16 0.012 138);
 
   --secondary: oklch(0.24 0.012 138);
@@ -55,7 +54,6 @@
 
   --muted: oklch(0.24 0.012 138);
   --muted-foreground: oklch(0.65 0.012 138);
-  --muted-soft: oklch(0.20 0.012 138);
 
   --accent: oklch(0.27 0.012 138);
   --accent-foreground: oklch(0.94 0.012 138);
@@ -64,7 +62,7 @@
 
   --border: oklch(1 0 0 / 8%);
   --input: oklch(1 0 0 / 12%);
-  --ring: oklch(0.72 0.20 140);
+  --ring: oklch(0.72 0.20 138);
 }
 
 @theme inline {
@@ -84,7 +82,6 @@
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
-  --color-muted-soft: var(--muted-soft);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);

package/src/lib/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/src/lib/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' : ''}
 			"
@@ -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/src/lib/components/dataTable/utils.ts

@@ -1,6 +1,7 @@
 import type { TableProps } from "./table.svelte";
 import type { CTX } from "../../store.types";
 import { getFieldRelationTarget } from "../../relations";
+import { getFieldTypeLabel } from "../../utils";
 
 import {
     Binary,
@@ -25,7 +26,7 @@ export function getCollectionColumns(ctx: CTX, collectionName: string): TablePro
         if ((field as any).ui?.hidden) continue;
         headers.push({
             id: field.key,
-            subtext: field.type,
+            subtext: getFieldTypeLabel(field.type),
             icon: getFieldIcon(ctx, fieldName, collectionName),
         });
     }

package/src/lib/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/src/lib/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">

package/src/lib/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' : ''}
         "
     >
@@ -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/src/lib/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/src/lib/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

package/src/lib/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/src/lib/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/src/lib/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">

package/src/lib/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/src/lib/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/src/lib/components/importButton.svelte

@@ -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>

package/src/lib/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/src/lib/components/rangeCalendarButton.svelte

@@ -58,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 = {
@@ -70,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 = {
@@ -82,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");
@@ -95,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(
@@ -118,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 = {
@@ -130,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 = {
@@ -142,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 = {
@@ -154,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 = {
@@ -166,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
@@ -184,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/src/lib/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/src/lib/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/src/lib/components/sidebar/sidebar.svelte

@@ -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"

package/src/lib/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">
@@ -90,7 +90,7 @@
                     variant="ghost"
                     class="
 						flex items-center justify-between p-2 gap-2 text-muted-foreground
-						rounded-md {isselected ? 'bg-muted' : 'hover:bg-muted-soft'}
+						rounded-md {isselected ? 'bg-accent' : 'hover:bg-muted'}
 					"
                     title={node.name}
                 >

package/src/lib/utils.ts

@@ -24,6 +24,18 @@ export const mediaQueries = {
     '2xl': new MediaQuery('min-width: 1536px'),
 }
 
+// User-facing label for a field type. "string"/"text" are jargon to
+// non-technical users, so we surface "Text"/"Long text" instead. Types
+// not in the map fall through to the raw identifier — extend as needed.
+const FIELD_TYPE_LABELS: Record<string, string> = {
+    string: "Text",
+    text: "Long text",
+};
+export function getFieldTypeLabel(type: string | undefined | null): string {
+    if (!type) return "";
+    return FIELD_TYPE_LABELS[type] ?? type;
+}
+
 
 export function calculateDrawerWidth() {
     const backgroundDrawerButtons = document.querySelectorAll(".backgroundDrawerButton");