@lobb-js/studio 0.33.0 → 0.35.0

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

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

package/src/lib/components/detailView/update/updateDetailViewButton.svelte

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

package/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">
@@ -75,7 +75,7 @@
                             <SelectRecord
                                 collectionName={child.collection}
                                 variant="outline"
-                                class="h-7 px-3 text-xs font-normal"
+                                size="sm"
                                 Icon={Link}
                                 onSelect={(r) => handleEmptyLink(child.collection, r)}
                             >
@@ -84,7 +84,7 @@
                             <CreateDetailViewButton
                                 collectionName={child.collection}
                                 variant="default"
-                                class="h-7 px-3 text-xs font-normal"
+                                size="sm"
                                 Icon={Plus}
                                 onChanges={(c) => handleEmptyCreate(child.collection, c)}
                             >
@@ -94,7 +94,7 @@
                     </div>
                 </div>
             {:else}
-                <div class="rounded-lg border bg-background overflow-hidden flex flex-col max-h-96">
+                <div class="rounded-lg border bg-card overflow-hidden flex flex-col max-h-96">
                     <DataTable
                         collectionName={child.collection}
                         searchParams={{ children_of: collectionName, parent_id: entry.id }}

package/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/drawer.svelte

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

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