@lobb-js/studio 0.13.0 → 0.15.0

package/dist/components/dataTable/dataTable.svelte

@@ -18,6 +18,7 @@
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils, loadExtensionComponents } from "../../extensions/extensionUtils";
     import Tabs from "./dataTableTabs.svelte";
+    import { fade } from "svelte/transition";
 
     const { lobb, ctx } = getStudioContext();
 
@@ -84,6 +85,7 @@
     });
 
     async function loadData(params: any) {
+        loading = true;
         // parsing sort before sending the request
         const paramsCopy = $state.snapshot(params);
         const sort: TableProps["sort"] = paramsCopy.sort;
@@ -154,7 +156,6 @@
         />
     {/snippet}
 
-    <Tabs {collectionName} {filter} bind:activeTabFilter />
     {#if showHeader}
         <Header bind:params {collectionName} bind:selectedRecords>
             {#snippet left()}
@@ -162,83 +163,88 @@
             {/snippet}
         </Header>
     {/if}
+    <Tabs {collectionName} {filter} bind:activeTabFilter />
     <div class="relative flex-1 overflow-auto w-full">
-        {#if loading}
-            <div class="flex flex-col gap-2 p-2 w-full">
-                <Skeleton class="h-8 w-full" />
-                <Skeleton class="h-8 w-[80%]" />
-                <Skeleton class="h-8 w-[60%]" />
-            </div>
-        {:else}
-            <Table
-                {data}
-                {columns}
-                showCollapsible={doesCollectionHasChildren}
-                selectByColumn="id"
-                showLastRowBorder={true}
-                showLastColumnBorder={true}
-                bind:sort={params.sort}
-                bind:selectedRecords
-                {unifiedBgColor}
-                bind:tableWidth={dataTableWidth}
-                {...tableProps}
-                rowActions={hasRowActions ? rowActionsSnippet : undefined}>
-                {#snippet tools(entry)}
-                    <UpdateDetailViewButton
-                        {collectionName}
-                        recordId={entry.id}
-                        variant="ghost"
-                        class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
-                        Icon={Pencil}
-                        onSuccessfullSave={async () => {
-                            params = { ...params };
-                        }}
-                    ></UpdateDetailViewButton>
-                    {#if showDelete}
-                        <Button
-                            class="h-6 w-6 text-muted-foreground hover:bg-transparent"
-                            variant="ghost"
-                            size="icon"
-                            onclick={() => handleDelete(entry.id)}
-                            Icon={Trash}
-                        ></Button>
-                    {/if}
-                    {#await getWorkflowTools($state.snapshot(entry))}
-                        <div></div>
-                    {:then workflowTools}
-                        {#each workflowTools as workflowTool}
-                            <Button
+        {#key activeTabFilter}
+            <div class="h-full w-full" in:fade={{ duration: 120 }}>
+                {#if loading}
+                    <div class="flex flex-col gap-2 p-2 w-full">
+                        <Skeleton class="h-8 w-full" />
+                        <Skeleton class="h-8 w-[80%]" />
+                        <Skeleton class="h-8 w-[60%]" />
+                    </div>
+                {:else}
+                    <Table
+                        {data}
+                        {columns}
+                        showCollapsible={doesCollectionHasChildren}
+                        selectByColumn="id"
+                        showLastRowBorder={true}
+                        showLastColumnBorder={true}
+                        bind:sort={params.sort}
+                        bind:selectedRecords
+                        {unifiedBgColor}
+                        bind:tableWidth={dataTableWidth}
+                        {...tableProps}
+                        rowActions={hasRowActions ? rowActionsSnippet : undefined}>
+                        {#snippet tools(entry)}
+                            <UpdateDetailViewButton
+                                {collectionName}
+                                recordId={entry.id}
                                 variant="ghost"
                                 class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
-                                Icon={icons[
-                                    workflowTool.icon as keyof typeof icons
-                                ]}
-                                onclick={workflowTool.onclick}
-                            ></Button>
-                        {/each}
-                    {/await}
-                {/snippet}
-                {#snippet overrideCell(value, column, entry)}
-                    <FieldCell
-                        {collectionName}
-                        fieldName={column.id}
-                        {value}
-                        {entry}
-                        tableParams={params}
-                    />
-                {/snippet}
-                {#snippet collapsible(entry)}
-                    <ChildRecords
-                        {collectionName}
-                        recordId={entry.id}
-                        width={dataTableWidth > dataTableContainerWidth
-                            ? dataTableContainerWidth
-                            : dataTableWidth}
-                        unifiedBgColor={unifiedBgColor ?? "bg-background"}
-                    />
-                {/snippet}
-            </Table>
-        {/if}
+                                Icon={Pencil}
+                                onSuccessfullSave={async () => {
+                                    params = { ...params };
+                                }}
+                            ></UpdateDetailViewButton>
+                            {#if showDelete}
+                                <Button
+                                    class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+                                    variant="ghost"
+                                    size="icon"
+                                    onclick={() => handleDelete(entry.id)}
+                                    Icon={Trash}
+                                ></Button>
+                            {/if}
+                            {#await getWorkflowTools($state.snapshot(entry))}
+                                <div></div>
+                            {:then workflowTools}
+                                {#each workflowTools as workflowTool}
+                                    <Button
+                                        variant="ghost"
+                                        class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
+                                        Icon={icons[
+                                            workflowTool.icon as keyof typeof icons
+                                        ]}
+                                        onclick={workflowTool.onclick}
+                                    ></Button>
+                                {/each}
+                            {/await}
+                        {/snippet}
+                        {#snippet overrideCell(value, column, entry)}
+                            <FieldCell
+                                {collectionName}
+                                fieldName={column.id}
+                                {value}
+                                {entry}
+                                tableParams={params}
+                            />
+                        {/snippet}
+                        {#snippet collapsible(entry)}
+                            <ChildRecords
+                                {collectionName}
+                                recordId={entry.id}
+                                width={dataTableWidth > dataTableContainerWidth
+                                    ? dataTableContainerWidth
+                                    : dataTableWidth}
+                                unifiedBgColor={unifiedBgColor ?? "bg-background"}
+                            />
+                        {/snippet}
+                    </Table>
+                {/if}
+            </div>
+        {/key}
     </div>
     {#if showFooter}
         <Footer

package/dist/components/dataTable/enumBadge.svelte

@@ -8,26 +8,47 @@
 
     const { value, enum: enumOptions }: Props = $props();
 
-    const levelClasses: Record<string, string> = {
-        success: "bg-green-100 text-green-700 border-green-200",
-        warning: "bg-yellow-100 text-yellow-700 border-yellow-300",
-        danger: "bg-red-100 text-red-700 border-red-200",
-        info: "bg-blue-100 text-blue-700 border-blue-200",
-        neutral: "bg-gray-100 text-gray-600 border-gray-200",
-        muted: "bg-gray-50 text-gray-400 border-gray-100",
+    const colorClasses: Record<string, string> = {
+        red:     "bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800",
+        rose:    "bg-rose-100 text-rose-700 border-rose-200 dark:bg-rose-900/30 dark:text-rose-300 dark:border-rose-800",
+        pink:    "bg-pink-100 text-pink-700 border-pink-200 dark:bg-pink-900/30 dark:text-pink-300 dark:border-pink-800",
+        fuchsia: "bg-fuchsia-100 text-fuchsia-700 border-fuchsia-200 dark:bg-fuchsia-900/30 dark:text-fuchsia-300 dark:border-fuchsia-800",
+        purple:  "bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-800",
+        violet:  "bg-violet-100 text-violet-700 border-violet-200 dark:bg-violet-900/30 dark:text-violet-300 dark:border-violet-800",
+        indigo:  "bg-indigo-100 text-indigo-700 border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800",
+        blue:    "bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800",
+        sky:     "bg-sky-100 text-sky-700 border-sky-200 dark:bg-sky-900/30 dark:text-sky-300 dark:border-sky-800",
+        cyan:    "bg-cyan-100 text-cyan-700 border-cyan-200 dark:bg-cyan-900/30 dark:text-cyan-300 dark:border-cyan-800",
+        teal:    "bg-teal-100 text-teal-700 border-teal-200 dark:bg-teal-900/30 dark:text-teal-300 dark:border-teal-800",
+        emerald: "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800",
+        green:   "bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800",
+        lime:    "bg-lime-100 text-lime-700 border-lime-200 dark:bg-lime-900/30 dark:text-lime-300 dark:border-lime-800",
+        yellow:  "bg-yellow-100 text-yellow-700 border-yellow-300 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-800",
+        amber:   "bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-800",
+        orange:  "bg-orange-100 text-orange-700 border-orange-200 dark:bg-orange-900/30 dark:text-orange-300 dark:border-orange-800",
+        slate:   "bg-slate-100 text-slate-600 border-slate-200 dark:bg-slate-800/50 dark:text-slate-300 dark:border-slate-700",
+        zinc:    "bg-zinc-100 text-zinc-600 border-zinc-200 dark:bg-zinc-800/50 dark:text-zinc-300 dark:border-zinc-700",
+        gray:    "bg-gray-100 text-gray-600 border-gray-200 dark:bg-gray-800/50 dark:text-gray-300 dark:border-gray-700",
+        stone:   "bg-stone-100 text-stone-600 border-stone-200 dark:bg-stone-800/50 dark:text-stone-300 dark:border-stone-700",
+        neutral: "bg-neutral-100 text-neutral-600 border-neutral-200 dark:bg-neutral-800/50 dark:text-neutral-300 dark:border-neutral-700",
     };
 
     const normalizedOptions = $derived(
-        (enumOptions as Array<string | EnumOption>).map((e) =>
-            typeof e === "string" ? { value: e, level: "neutral" as const } : e,
+        (enumOptions as Array<string | number | EnumOption>).map((e) =>
+            typeof e === "object" ? e : { value: e, color: undefined, description: undefined },
         ),
     );
 
-    const enumOption = $derived(normalizedOptions.find((e) => e.value === value));
+    const enumOption = $derived(normalizedOptions.find((e) => String(e.value) === String(value)));
 </script>
 
 {#if enumOption}
-    <span class="px-2 py-0.5 rounded-full text-xs font-medium border {levelClasses[enumOption.level]}">
-        {value}
+    <span class="flex items-center gap-1.5">
+        <span class="px-2 py-0.5 rounded-full text-xs font-medium border {enumOption.color ? colorClasses[enumOption.color] : colorClasses['gray']}">
+            {enumOption.value}
+        </span>
+        {#if enumOption.description}
+            <span class="text-xs text-muted-foreground">{enumOption.description}</span>
+        {/if}
     </span>
 {/if}

package/dist/components/dataTable/header.svelte

@@ -10,6 +10,8 @@
     import CreateManyButton from "../createManyButton.svelte";
     import { showDialog } from "../confirmationDialog/store.svelte";
     import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
+    import ExtensionsComponents from "../extensionsComponents.svelte";
+    import { getExtensionUtils } from "../../extensions/extensionUtils";
     import type { Snippet } from "svelte";
 
     interface Props {
@@ -142,6 +144,12 @@
             Icon={SquareStack}
             onSuccessfullSave={() => (params = { ...params })}
         ></CreateManyButton>
+        <ExtensionsComponents
+            name="listView.header.actions"
+            utils={getExtensionUtils(lobb, ctx)}
+            {collectionName}
+            refresh={() => { params = { ...params }; }}
+        />
         <CreateDetailViewButton
             {collectionName}
             variant="default"

package/dist/components/detailView/fieldInput.svelte

@@ -93,75 +93,60 @@
 					{destructive}
 				/>
 			</ExtensionsComponents>
-		{:else if field.type === "string" && field.enum}
-			{@const rawEnum = field.enum as (string | EnumOption)[]}
-			{@const enumOptions = rawEnum.map((e): EnumOption => typeof e === "string" ? { value: e, level: "neutral" } : e)}
+		{:else if field.enum}
+			{@const rawEnum = field.enum as (string | number | EnumOption)[]}
+			{@const isEnumOption = rawEnum.length > 0 && typeof rawEnum[0] === "object"}
+			{@const enumOptions = isEnumOption ? rawEnum as EnumOption[] : undefined}
 			<Select.Root
 				type="single"
-				onValueChange={(newValue) => {
-					value = newValue;
-				}}
+				bind:value={
+					() => value != null ? String(value) : null,
+					(v) => {
+						if (v == null) { value = null; return; }
+						const isNumeric = field.type === "integer" || field.type === "long" || field.type === "decimal" || field.type === "float";
+						value = isNumeric ? Number(v) : v;
+					}
+				}
 			>
 				<Select.Trigger
-					placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 					class="
 						h-9 w-full bg-muted/30 pr-8
 						{destructive ? 'border-destructive bg-destructive/10' : ''}
 					"
 				>
-					{#if value}
-						<EnumBadge {value} enum={enumOptions} />
+					{#if value != null && enumOptions}
+						<EnumBadge value={String(value)} enum={enumOptions} />
+					{:else if value != null}
+						{value}
 					{:else}
-						NULL
+						<span class="text-muted-foreground">{ui?.placeholder ?? "NULL"}</span>
 					{/if}
 				</Select.Trigger>
 				<Select.Content>
 					<Select.Group>
-						{#each enumOptions as option}
-							<Select.Item value={option.value} label={option.value}>
-								<EnumBadge value={option.value} enum={enumOptions} />
+						{#each rawEnum as option}
+							{@const optionValue = typeof option === "object" ? String(option.value) : String(option)}
+							<Select.Item value={optionValue} label={optionValue}>
+								{#if enumOptions}
+									<EnumBadge value={optionValue} enum={enumOptions} />
+								{:else}
+									{optionValue}
+								{/if}
 							</Select.Item>
 						{/each}
 					</Select.Group>
 				</Select.Content>
 			</Select.Root>
 		{:else if field.type === "string"}
-			<!-- if the string has a validator of type enum -->
-			{#if field.validators && field.validators.enum}
-				<Select.Root
-					type="single"
-					onValueChange={(newValue) => {
-						value = newValue;
-					}}
-				>
-					<Select.Trigger
-						placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
-						class="
-							h-9 w-full bg-muted/30 pr-8
-							{destructive ? 'border-destructive bg-destructive/10' : ''}
-						"
-					>
-						{value ? value : "NULL"}
-					</Select.Trigger>
-					<Select.Content>
-						<Select.Group>
-							{#each field.validators.enum as option}
-								<Select.Item value={option} label={option} />
-							{/each}
-						</Select.Group>
-					</Select.Content>
-				</Select.Root>
-			{:else}
-				<Input
-					placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
-					type="text"
-					class="
-						bg-muted/30 text-xs
-						{destructive ? 'border-destructive bg-destructive/10' : ''}
-					"
-					bind:value
-				/>
-			{/if}
+			<Input
+				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
+				type="text"
+				class="
+					bg-muted/30 text-xs
+					{destructive ? 'border-destructive bg-destructive/10' : ''}
+				"
+				bind:value
+			/>
 		{:else if field.type === "text"}
 			<Textarea
 				placeholder={ui?.placeholder ? ui.placeholder : value === "" ? "EMPTY STRING" : "NULL"}

package/dist/components/singletone.svelte

@@ -6,30 +6,27 @@
     import Button from "./ui/button/button.svelte";
     import { onMount } from "svelte";
     import { getStudioContext } from "../context";
+    import { toast } from "svelte-sonner";
+    import Skeleton from "./ui/skeleton/skeleton.svelte";
 
     const { lobb, ctx } = getStudioContext();
-  import { toast } from "svelte-sonner";
-  import Skeleton from "./ui/skeleton/skeleton.svelte";
 
     interface Props {
         collectionName: string;
     }
 
-    let {
-        collectionName,
-    }: Props = $props();
+    let { collectionName }: Props = $props();
 
     let entry = $state({});
     let loading = $state(true);
-    let singletonExists = $state(true);
     const formFields = getCollectionFields(ctx, collectionName);
 
     onMount(async () => {
-        const result = await lobb.readSingleton(collectionName);
-        const json = await result.json();
-        if (result.status === 404) {
-            singletonExists = false;
-        } else {
+        const result = await fetch(`${lobb.lobbUrl}/api/collections/${collectionName}/singleton`, {
+            headers: lobb.getHeaders() as HeadersInit,
+        });
+        if (result.status !== 404) {
+            const json = await result.json();
             entry = json.data;
         }
         loading = false;
@@ -43,29 +40,27 @@
     }
 </script>
 
-<div>
-    <div class="flex justify-between items-center gap-2 p-2 border-b bg-background h-10">
+<div class="flex flex-col h-full bg-background">
+    <div class="flex justify-between items-center gap-2 p-2 border-b h-10 shrink-0">
         <div class="flex items-center gap-1">
             <SidebarTrigger />
         </div>
         <div>
-            <Button
-                class="h-7 px-2 font-normal text-xs"
-                Icon={Save}
-                onclick={handleSave}
-            >
+            <Button class="h-7 px-2 font-normal text-xs" Icon={Save} onclick={handleSave}>
                 Save
             </Button>
         </div>
     </div>
 
     {#if loading}
-        <div class="flex flex-col gap-2 p-2 w-full">
+        <div class="flex flex-col gap-2 p-4 w-full">
             <Skeleton class="h-8 w-full" />
             <Skeleton class="h-8 w-[80%]" />
             <Skeleton class="h-8 w-[60%]" />
         </div>
     {:else}
-        <DetailViewForm bind:value={entry} fields={formFields} />
+        <div class="flex-1 overflow-y-auto max-w-xl">
+            <DetailViewForm bind:value={entry} fields={formFields} />
+        </div>
     {/if}
 </div>

package/dist/extensions/extension.types.d.ts

@@ -73,7 +73,7 @@ export interface ExtensionProps {
     utils: ExtensionUtils;
     [key: string]: any;
 }
-export type ExtensionComponentKey = `pages.${string}` | "studio.listView" | `dvFields.topRight.${string}.${string}` | `detailView.update.subRecords.${string}` | `detailView.create.subRecords.${string}` | `detailView.fields.topRight.${string}.${string}` | `detailView.fields.foreignKey.${string}` | `listView.entry.children.${string}` | `listView.entry.actions`;
+export type ExtensionComponentKey = `pages.${string}` | "studio.listView" | `dvFields.topRight.${string}.${string}` | `detailView.update.subRecords.${string}` | `detailView.create.subRecords.${string}` | `detailView.fields.topRight.${string}.${string}` | `detailView.fields.foreignKey.${string}` | `listView.entry.children.${string}` | `listView.entry.actions` | `listView.header.actions`;
 export type ExtensionComponent = any | {
     component: any;
     when: (props: Record<string, any>) => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.19.0",
+    "@lobb-js/core": "^0.21.0",
     "@chromatic-com/storybook": "^4.1.2",
     "@storybook/addon-a11y": "^10.0.1",
     "@storybook/addon-docs": "^10.0.1",

package/src/lib/components/dataTable/dataTable.svelte

@@ -18,6 +18,7 @@
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils, loadExtensionComponents } from "../../extensions/extensionUtils";
     import Tabs from "./dataTableTabs.svelte";
+    import { fade } from "svelte/transition";
 
     const { lobb, ctx } = getStudioContext();
 
@@ -84,6 +85,7 @@
     });
 
     async function loadData(params: any) {
+        loading = true;
         // parsing sort before sending the request
         const paramsCopy = $state.snapshot(params);
         const sort: TableProps["sort"] = paramsCopy.sort;
@@ -154,7 +156,6 @@
         />
     {/snippet}
 
-    <Tabs {collectionName} {filter} bind:activeTabFilter />
     {#if showHeader}
         <Header bind:params {collectionName} bind:selectedRecords>
             {#snippet left()}
@@ -162,83 +163,88 @@
             {/snippet}
         </Header>
     {/if}
+    <Tabs {collectionName} {filter} bind:activeTabFilter />
     <div class="relative flex-1 overflow-auto w-full">
-        {#if loading}
-            <div class="flex flex-col gap-2 p-2 w-full">
-                <Skeleton class="h-8 w-full" />
-                <Skeleton class="h-8 w-[80%]" />
-                <Skeleton class="h-8 w-[60%]" />
-            </div>
-        {:else}
-            <Table
-                {data}
-                {columns}
-                showCollapsible={doesCollectionHasChildren}
-                selectByColumn="id"
-                showLastRowBorder={true}
-                showLastColumnBorder={true}
-                bind:sort={params.sort}
-                bind:selectedRecords
-                {unifiedBgColor}
-                bind:tableWidth={dataTableWidth}
-                {...tableProps}
-                rowActions={hasRowActions ? rowActionsSnippet : undefined}>
-                {#snippet tools(entry)}
-                    <UpdateDetailViewButton
-                        {collectionName}
-                        recordId={entry.id}
-                        variant="ghost"
-                        class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
-                        Icon={Pencil}
-                        onSuccessfullSave={async () => {
-                            params = { ...params };
-                        }}
-                    ></UpdateDetailViewButton>
-                    {#if showDelete}
-                        <Button
-                            class="h-6 w-6 text-muted-foreground hover:bg-transparent"
-                            variant="ghost"
-                            size="icon"
-                            onclick={() => handleDelete(entry.id)}
-                            Icon={Trash}
-                        ></Button>
-                    {/if}
-                    {#await getWorkflowTools($state.snapshot(entry))}
-                        <div></div>
-                    {:then workflowTools}
-                        {#each workflowTools as workflowTool}
-                            <Button
+        {#key activeTabFilter}
+            <div class="h-full w-full" in:fade={{ duration: 120 }}>
+                {#if loading}
+                    <div class="flex flex-col gap-2 p-2 w-full">
+                        <Skeleton class="h-8 w-full" />
+                        <Skeleton class="h-8 w-[80%]" />
+                        <Skeleton class="h-8 w-[60%]" />
+                    </div>
+                {:else}
+                    <Table
+                        {data}
+                        {columns}
+                        showCollapsible={doesCollectionHasChildren}
+                        selectByColumn="id"
+                        showLastRowBorder={true}
+                        showLastColumnBorder={true}
+                        bind:sort={params.sort}
+                        bind:selectedRecords
+                        {unifiedBgColor}
+                        bind:tableWidth={dataTableWidth}
+                        {...tableProps}
+                        rowActions={hasRowActions ? rowActionsSnippet : undefined}>
+                        {#snippet tools(entry)}
+                            <UpdateDetailViewButton
+                                {collectionName}
+                                recordId={entry.id}
                                 variant="ghost"
                                 class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
-                                Icon={icons[
-                                    workflowTool.icon as keyof typeof icons
-                                ]}
-                                onclick={workflowTool.onclick}
-                            ></Button>
-                        {/each}
-                    {/await}
-                {/snippet}
-                {#snippet overrideCell(value, column, entry)}
-                    <FieldCell
-                        {collectionName}
-                        fieldName={column.id}
-                        {value}
-                        {entry}
-                        tableParams={params}
-                    />
-                {/snippet}
-                {#snippet collapsible(entry)}
-                    <ChildRecords
-                        {collectionName}
-                        recordId={entry.id}
-                        width={dataTableWidth > dataTableContainerWidth
-                            ? dataTableContainerWidth
-                            : dataTableWidth}
-                        unifiedBgColor={unifiedBgColor ?? "bg-background"}
-                    />
-                {/snippet}
-            </Table>
-        {/if}
+                                Icon={Pencil}
+                                onSuccessfullSave={async () => {
+                                    params = { ...params };
+                                }}
+                            ></UpdateDetailViewButton>
+                            {#if showDelete}
+                                <Button
+                                    class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+                                    variant="ghost"
+                                    size="icon"
+                                    onclick={() => handleDelete(entry.id)}
+                                    Icon={Trash}
+                                ></Button>
+                            {/if}
+                            {#await getWorkflowTools($state.snapshot(entry))}
+                                <div></div>
+                            {:then workflowTools}
+                                {#each workflowTools as workflowTool}
+                                    <Button
+                                        variant="ghost"
+                                        class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
+                                        Icon={icons[
+                                            workflowTool.icon as keyof typeof icons
+                                        ]}
+                                        onclick={workflowTool.onclick}
+                                    ></Button>
+                                {/each}
+                            {/await}
+                        {/snippet}
+                        {#snippet overrideCell(value, column, entry)}
+                            <FieldCell
+                                {collectionName}
+                                fieldName={column.id}
+                                {value}
+                                {entry}
+                                tableParams={params}
+                            />
+                        {/snippet}
+                        {#snippet collapsible(entry)}
+                            <ChildRecords
+                                {collectionName}
+                                recordId={entry.id}
+                                width={dataTableWidth > dataTableContainerWidth
+                                    ? dataTableContainerWidth
+                                    : dataTableWidth}
+                                unifiedBgColor={unifiedBgColor ?? "bg-background"}
+                            />
+                        {/snippet}
+                    </Table>
+                {/if}
+            </div>
+        {/key}
     </div>
     {#if showFooter}
         <Footer

package/src/lib/components/dataTable/enumBadge.svelte

@@ -8,26 +8,47 @@
 
     const { value, enum: enumOptions }: Props = $props();
 
-    const levelClasses: Record<string, string> = {
-        success: "bg-green-100 text-green-700 border-green-200",
-        warning: "bg-yellow-100 text-yellow-700 border-yellow-300",
-        danger: "bg-red-100 text-red-700 border-red-200",
-        info: "bg-blue-100 text-blue-700 border-blue-200",
-        neutral: "bg-gray-100 text-gray-600 border-gray-200",
-        muted: "bg-gray-50 text-gray-400 border-gray-100",
+    const colorClasses: Record<string, string> = {
+        red:     "bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800",
+        rose:    "bg-rose-100 text-rose-700 border-rose-200 dark:bg-rose-900/30 dark:text-rose-300 dark:border-rose-800",
+        pink:    "bg-pink-100 text-pink-700 border-pink-200 dark:bg-pink-900/30 dark:text-pink-300 dark:border-pink-800",
+        fuchsia: "bg-fuchsia-100 text-fuchsia-700 border-fuchsia-200 dark:bg-fuchsia-900/30 dark:text-fuchsia-300 dark:border-fuchsia-800",
+        purple:  "bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-800",
+        violet:  "bg-violet-100 text-violet-700 border-violet-200 dark:bg-violet-900/30 dark:text-violet-300 dark:border-violet-800",
+        indigo:  "bg-indigo-100 text-indigo-700 border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800",
+        blue:    "bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800",
+        sky:     "bg-sky-100 text-sky-700 border-sky-200 dark:bg-sky-900/30 dark:text-sky-300 dark:border-sky-800",
+        cyan:    "bg-cyan-100 text-cyan-700 border-cyan-200 dark:bg-cyan-900/30 dark:text-cyan-300 dark:border-cyan-800",
+        teal:    "bg-teal-100 text-teal-700 border-teal-200 dark:bg-teal-900/30 dark:text-teal-300 dark:border-teal-800",
+        emerald: "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800",
+        green:   "bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800",
+        lime:    "bg-lime-100 text-lime-700 border-lime-200 dark:bg-lime-900/30 dark:text-lime-300 dark:border-lime-800",
+        yellow:  "bg-yellow-100 text-yellow-700 border-yellow-300 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-800",
+        amber:   "bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-800",
+        orange:  "bg-orange-100 text-orange-700 border-orange-200 dark:bg-orange-900/30 dark:text-orange-300 dark:border-orange-800",
+        slate:   "bg-slate-100 text-slate-600 border-slate-200 dark:bg-slate-800/50 dark:text-slate-300 dark:border-slate-700",
+        zinc:    "bg-zinc-100 text-zinc-600 border-zinc-200 dark:bg-zinc-800/50 dark:text-zinc-300 dark:border-zinc-700",
+        gray:    "bg-gray-100 text-gray-600 border-gray-200 dark:bg-gray-800/50 dark:text-gray-300 dark:border-gray-700",
+        stone:   "bg-stone-100 text-stone-600 border-stone-200 dark:bg-stone-800/50 dark:text-stone-300 dark:border-stone-700",
+        neutral: "bg-neutral-100 text-neutral-600 border-neutral-200 dark:bg-neutral-800/50 dark:text-neutral-300 dark:border-neutral-700",
     };
 
     const normalizedOptions = $derived(
-        (enumOptions as Array<string | EnumOption>).map((e) =>
-            typeof e === "string" ? { value: e, level: "neutral" as const } : e,
+        (enumOptions as Array<string | number | EnumOption>).map((e) =>
+            typeof e === "object" ? e : { value: e, color: undefined, description: undefined },
         ),
     );
 
-    const enumOption = $derived(normalizedOptions.find((e) => e.value === value));
+    const enumOption = $derived(normalizedOptions.find((e) => String(e.value) === String(value)));
 </script>
 
 {#if enumOption}
-    <span class="px-2 py-0.5 rounded-full text-xs font-medium border {levelClasses[enumOption.level]}">
-        {value}
+    <span class="flex items-center gap-1.5">
+        <span class="px-2 py-0.5 rounded-full text-xs font-medium border {enumOption.color ? colorClasses[enumOption.color] : colorClasses['gray']}">
+            {enumOption.value}
+        </span>
+        {#if enumOption.description}
+            <span class="text-xs text-muted-foreground">{enumOption.description}</span>
+        {/if}
     </span>
 {/if}

package/src/lib/components/dataTable/header.svelte

@@ -10,6 +10,8 @@
     import CreateManyButton from "../createManyButton.svelte";
     import { showDialog } from "../confirmationDialog/store.svelte";
     import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
+    import ExtensionsComponents from "../extensionsComponents.svelte";
+    import { getExtensionUtils } from "../../extensions/extensionUtils";
     import type { Snippet } from "svelte";
 
     interface Props {
@@ -142,6 +144,12 @@
             Icon={SquareStack}
             onSuccessfullSave={() => (params = { ...params })}
         ></CreateManyButton>
+        <ExtensionsComponents
+            name="listView.header.actions"
+            utils={getExtensionUtils(lobb, ctx)}
+            {collectionName}
+            refresh={() => { params = { ...params }; }}
+        />
         <CreateDetailViewButton
             {collectionName}
             variant="default"

package/src/lib/components/detailView/fieldInput.svelte

@@ -93,75 +93,60 @@
 					{destructive}
 				/>
 			</ExtensionsComponents>
-		{:else if field.type === "string" && field.enum}
-			{@const rawEnum = field.enum as (string | EnumOption)[]}
-			{@const enumOptions = rawEnum.map((e): EnumOption => typeof e === "string" ? { value: e, level: "neutral" } : e)}
+		{:else if field.enum}
+			{@const rawEnum = field.enum as (string | number | EnumOption)[]}
+			{@const isEnumOption = rawEnum.length > 0 && typeof rawEnum[0] === "object"}
+			{@const enumOptions = isEnumOption ? rawEnum as EnumOption[] : undefined}
 			<Select.Root
 				type="single"
-				onValueChange={(newValue) => {
-					value = newValue;
-				}}
+				bind:value={
+					() => value != null ? String(value) : null,
+					(v) => {
+						if (v == null) { value = null; return; }
+						const isNumeric = field.type === "integer" || field.type === "long" || field.type === "decimal" || field.type === "float";
+						value = isNumeric ? Number(v) : v;
+					}
+				}
 			>
 				<Select.Trigger
-					placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 					class="
 						h-9 w-full bg-muted/30 pr-8
 						{destructive ? 'border-destructive bg-destructive/10' : ''}
 					"
 				>
-					{#if value}
-						<EnumBadge {value} enum={enumOptions} />
+					{#if value != null && enumOptions}
+						<EnumBadge value={String(value)} enum={enumOptions} />
+					{:else if value != null}
+						{value}
 					{:else}
-						NULL
+						<span class="text-muted-foreground">{ui?.placeholder ?? "NULL"}</span>
 					{/if}
 				</Select.Trigger>
 				<Select.Content>
 					<Select.Group>
-						{#each enumOptions as option}
-							<Select.Item value={option.value} label={option.value}>
-								<EnumBadge value={option.value} enum={enumOptions} />
+						{#each rawEnum as option}
+							{@const optionValue = typeof option === "object" ? String(option.value) : String(option)}
+							<Select.Item value={optionValue} label={optionValue}>
+								{#if enumOptions}
+									<EnumBadge value={optionValue} enum={enumOptions} />
+								{:else}
+									{optionValue}
+								{/if}
 							</Select.Item>
 						{/each}
 					</Select.Group>
 				</Select.Content>
 			</Select.Root>
 		{:else if field.type === "string"}
-			<!-- if the string has a validator of type enum -->
-			{#if field.validators && field.validators.enum}
-				<Select.Root
-					type="single"
-					onValueChange={(newValue) => {
-						value = newValue;
-					}}
-				>
-					<Select.Trigger
-						placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
-						class="
-							h-9 w-full bg-muted/30 pr-8
-							{destructive ? 'border-destructive bg-destructive/10' : ''}
-						"
-					>
-						{value ? value : "NULL"}
-					</Select.Trigger>
-					<Select.Content>
-						<Select.Group>
-							{#each field.validators.enum as option}
-								<Select.Item value={option} label={option} />
-							{/each}
-						</Select.Group>
-					</Select.Content>
-				</Select.Root>
-			{:else}
-				<Input
-					placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
-					type="text"
-					class="
-						bg-muted/30 text-xs
-						{destructive ? 'border-destructive bg-destructive/10' : ''}
-					"
-					bind:value
-				/>
-			{/if}
+			<Input
+				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
+				type="text"
+				class="
+					bg-muted/30 text-xs
+					{destructive ? 'border-destructive bg-destructive/10' : ''}
+				"
+				bind:value
+			/>
 		{:else if field.type === "text"}
 			<Textarea
 				placeholder={ui?.placeholder ? ui.placeholder : value === "" ? "EMPTY STRING" : "NULL"}

package/src/lib/components/singletone.svelte

@@ -6,30 +6,27 @@
     import Button from "./ui/button/button.svelte";
     import { onMount } from "svelte";
     import { getStudioContext } from "../context";
+    import { toast } from "svelte-sonner";
+    import Skeleton from "./ui/skeleton/skeleton.svelte";
 
     const { lobb, ctx } = getStudioContext();
-  import { toast } from "svelte-sonner";
-  import Skeleton from "./ui/skeleton/skeleton.svelte";
 
     interface Props {
         collectionName: string;
     }
 
-    let {
-        collectionName,
-    }: Props = $props();
+    let { collectionName }: Props = $props();
 
     let entry = $state({});
     let loading = $state(true);
-    let singletonExists = $state(true);
     const formFields = getCollectionFields(ctx, collectionName);
 
     onMount(async () => {
-        const result = await lobb.readSingleton(collectionName);
-        const json = await result.json();
-        if (result.status === 404) {
-            singletonExists = false;
-        } else {
+        const result = await fetch(`${lobb.lobbUrl}/api/collections/${collectionName}/singleton`, {
+            headers: lobb.getHeaders() as HeadersInit,
+        });
+        if (result.status !== 404) {
+            const json = await result.json();
             entry = json.data;
         }
         loading = false;
@@ -43,29 +40,27 @@
     }
 </script>
 
-<div>
-    <div class="flex justify-between items-center gap-2 p-2 border-b bg-background h-10">
+<div class="flex flex-col h-full bg-background">
+    <div class="flex justify-between items-center gap-2 p-2 border-b h-10 shrink-0">
         <div class="flex items-center gap-1">
             <SidebarTrigger />
         </div>
         <div>
-            <Button
-                class="h-7 px-2 font-normal text-xs"
-                Icon={Save}
-                onclick={handleSave}
-            >
+            <Button class="h-7 px-2 font-normal text-xs" Icon={Save} onclick={handleSave}>
                 Save
             </Button>
         </div>
     </div>
 
     {#if loading}
-        <div class="flex flex-col gap-2 p-2 w-full">
+        <div class="flex flex-col gap-2 p-4 w-full">
             <Skeleton class="h-8 w-full" />
             <Skeleton class="h-8 w-[80%]" />
             <Skeleton class="h-8 w-[60%]" />
         </div>
     {:else}
-        <DetailViewForm bind:value={entry} fields={formFields} />
+        <div class="flex-1 overflow-y-auto max-w-xl">
+            <DetailViewForm bind:value={entry} fields={formFields} />
+        </div>
     {/if}
 </div>

package/src/lib/extensions/extension.types.ts

@@ -93,7 +93,8 @@ export type ExtensionComponentKey =
     | `detailView.fields.topRight.${string}.${string}`
     | `detailView.fields.foreignKey.${string}`
     | `listView.entry.children.${string}`
-    | `listView.entry.actions`;
+    | `listView.entry.actions`
+    | `listView.header.actions`;
 
 export type ExtensionComponent =
     | any