@lobb-js/studio 0.17.0 → 0.18.1

package/dist/components/dataTable/table.svelte

@@ -28,6 +28,7 @@
 		// styles
 		showLastRowBorder?: boolean;
 		showLastColumnBorder?: boolean;
+		headerBorderTop?: boolean;
 
 		// snippets
 		overrideCell?: Snippet<[any, Column, Entry]>;
@@ -70,6 +71,7 @@
 		selectByColumn,
 		showLastRowBorder,
 		showLastColumnBorder,
+		headerBorderTop = false,
 		parentWidth,
 		overrideCell,
 		tools,
@@ -181,6 +183,7 @@
 				sticky left-0 top-0 z-20
 				flex items-center p-2.5 text-xs h-10
 				border-r border-b gap-2
+				{headerBorderTop ? 'border-t' : ''}
 				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
 			"
 		>
@@ -209,6 +212,7 @@
 				{unifiedBgColor ? unifiedBgColor : 'bg-muted/30'}
 				{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
 				border-b gap-2
+				{headerBorderTop ? 'border-t' : ''}
 			"
 		>
 			{#if sort[column.id] === "asc"}
@@ -234,6 +238,7 @@
 				flex items-center p-2.5 h-10
 				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
 				border-l border-b
+				{headerBorderTop ? 'border-t' : ''}
 			"
 		></div>
 	{/if}

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

@@ -18,6 +18,7 @@ export interface TableProps {
     showCheckboxes?: boolean;
     showLastRowBorder?: boolean;
     showLastColumnBorder?: boolean;
+    headerBorderTop?: boolean;
     overrideCell?: Snippet<[any, Column, Entry]>;
     tools?: Snippet<[Entry, number]>;
     rowActions?: Snippet<[Entry, number]>;

package/dist/components/detailView/utils.js

@@ -14,14 +14,13 @@ import { getFieldRelation } from "../../utils";
 import { getField } from "../dataTable/utils";
 export function getDefaultEntry(ctx, fieldNames, collectionName, values) {
     return Object.fromEntries(fieldNames.map(function (fieldName) {
-        var _a;
         var value = null;
         var field = getField(ctx, fieldName, collectionName);
         if (values && values[fieldName] !== undefined) {
             value = values[fieldName];
         }
-        else if ((_a = field.pre_processors) === null || _a === void 0 ? void 0 : _a.default) {
-            var defualtValue = field.pre_processors.default;
+        else if (field.default !== undefined && field.default !== null) {
+            var defualtValue = field.default;
             if (typeof defualtValue === "string") {
                 value = Mustache.render(defualtValue, {
                     now: new Date().toISOString(),

package/dist/components/importButton.svelte

@@ -4,9 +4,8 @@
 	import { toast } from "svelte-sonner";
 	import { getStudioContext } from "../context";
 	import * as Dialog from "./ui/dialog";
-	import Table from "./dataTable/table.svelte";
-	import FieldCell from "./dataTable/fieldCell.svelte";
 	import { getCollectionColumns } from "./dataTable/utils";
+	import Table from "./dataTable/table.svelte";
 	import Fuse from "fuse.js";
 	import { emitEvent } from "../eventSystem";
 
@@ -21,11 +20,12 @@
 
 	let openDrawer = $state(false);
 	let activeTab = $state<"upload" | "paste">("upload");
-	let step = $state<"input" | "processing" | "preview">("input");
+	let step = $state<"input" | "processing" | "preview" | "results">("input");
 	let pasteContent = $state("");
 	let isDragging = $state(false);
 	let parseError = $state("");
 	let transformedRows = $state<any[]>([]);
+	let importResults = $state<{ row: any; error: string | null }[]>([]);
 
 	const collectionColumns = $derived(getCollectionColumns(ctx, collectionName) ?? []);
 
@@ -43,8 +43,7 @@
 			Object.fromEntries(
 				collectionColumns.map((c) => {
 					const csvCol = Object.keys(mapping).find((k) => mapping[k] === c.id);
-					const raw = csvCol ? row[csvCol] ?? null : null;
-					return [c.id, raw];
+					return [c.id, csvCol ? row[csvCol] : null];
 				})
 			)
 		);
@@ -99,13 +98,7 @@
 		try {
 			const rows = detectAndParse(content);
 			if (rows.length === 0) throw new Error("No data rows found");
-			const mapped = applyColumnMapping(rows);
-			step = "processing";
-			const eventResult = await emitEvent({ lobb, ctx }, "studio.collections.import", {
-				collectionName,
-				rows: mapped,
-			});
-			transformedRows = eventResult.rows ?? mapped;
+			transformedRows = applyColumnMapping(rows);
 			step = "preview";
 		} catch (e: any) {
 			step = "input";
@@ -126,14 +119,36 @@
 	}
 
 	async function handleImport() {
-		const res = await lobb.createMany(collectionName, transformedRows);
-		if (res.status >= 400) {
-			toast.error("Import failed");
-			return;
+		step = "processing";
+		try {
+			const eventResult = await emitEvent({ lobb, ctx }, "studio.collections.import", {
+				collectionName,
+				rows: transformedRows.map((r) => ({ ...r })),
+			});
+			const finalRows = eventResult.rows ?? transformedRows;
+
+			const results: { row: any; error: string | null }[] = [];
+			for (const row of finalRows) {
+				const response = await lobb.createOne(collectionName, row);
+				if (response.ok) {
+					results.push({ row, error: null });
+				} else {
+					const body = await response.json().catch(() => null);
+					const message = body?.details
+						? Object.entries(body.details).map(([f, msgs]) => `${f}: ${(msgs as string[]).join(", ")}`).join(" | ")
+						: (body?.message ?? `HTTP ${response.status}`);
+					results.push({ row, error: message });
+				}
+			}
+
+			importResults = results;
+			const succeeded = results.filter((r) => r.error === null);
+
+			if (succeeded.length > 0 && onSuccessfullSave) await onSuccessfullSave();
+			step = "results";
+		} catch (e: any) {
+			step = "preview";
 		}
-		toast.success(`Imported ${transformedRows.length} records`);
-		if (onSuccessfullSave) await onSuccessfullSave();
-		hideDrawer();
 	}
 
 	function showDrawer() {
@@ -143,11 +158,14 @@
 
 	function hideDrawer() {
 		openDrawer = false;
-		step = "input";
-		activeTab = "upload";
-		pasteContent = "";
-		transformedRows = [];
-		parseError = "";
+		setTimeout(() => {
+			step = "input";
+			activeTab = "upload";
+			pasteContent = "";
+			transformedRows = [];
+			importResults = [];
+			parseError = "";
+		}, 200);
 	}
 </script>
 
@@ -162,7 +180,7 @@
 	onOpenChange={(open) => { if (!open) hideDrawer(); }}
 >
 	<Dialog.Content
-		class="flex flex-col gap-0 p-0 overflow-hidden {step === 'preview' ? 'max-w-5xl h-[80vh]' : 'max-w-lg'}"
+		class="flex flex-col gap-0 p-0 overflow-clip {step === 'preview' || (step === 'results' && importResults.some((r) => r.error !== null)) ? 'max-w-5xl h-[80vh]' : 'max-w-lg'}"
 	>
 		<!-- Header -->
 		<div class="flex h-12 shrink-0 items-center justify-between border-b px-4">
@@ -244,29 +262,19 @@
 				{/if}
 			</div>
 
-		{:else}
+		{:else if step === "preview"}
 			<!-- Preview -->
-			<div class="shrink-0 border-b px-4 py-2 text-sm text-muted-foreground">
+			<div class="shrink-0 px-4 py-2 text-sm text-muted-foreground">
 				{transformedRows.length} rows ready to import
 			</div>
-			<div class="flex-1 overflow-auto">
+			<div class="relative flex-1 overflow-auto w-full">
 				<Table
 					data={transformedRows}
-					columns={collectionColumns}
-					showLastRowBorder={true}
-					showLastColumnBorder={true}
+					columns={collectionColumns.filter((c) => c.id !== "id")}
 					showCheckboxes={false}
 					unifiedBgColor="bg-background"
-				>
-					{#snippet overrideCell(value, column, entry)}
-						<FieldCell
-							{collectionName}
-							fieldName={column.id}
-							{value}
-							{entry}
-						/>
-					{/snippet}
-				</Table>
+					headerBorderTop={true}
+				/>
 			</div>
 
 			<div class="flex h-12 shrink-0 items-center justify-end gap-2 border-t px-4">
@@ -277,6 +285,60 @@
 					Import {transformedRows.length} records
 				</Button>
 			</div>
+
+		{:else if step === "results"}
+			{@const failed = importResults.filter((r) => r.error !== null)}
+			{@const succeeded = importResults.filter((r) => r.error === null)}
+			{@const failedData = failed.map((r) => ({ __error: r.error, ...r.row }))}
+			{#if failed.length === 0}
+				<div class="flex flex-1 flex-col items-center justify-center gap-6 px-8 py-12">
+					<div class="flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+						<Check size="22" class="text-foreground" />
+					</div>
+					<div class="text-center">
+						<p class="text-sm font-medium text-foreground">Import complete</p>
+						<p class="mt-1 text-xs text-muted-foreground">{succeeded.length} {succeeded.length === 1 ? "record" : "records"} imported successfully</p>
+					</div>
+				</div>
+			{:else}
+				<!-- Summary strip -->
+				<div class="shrink-0 px-4 py-3 flex items-center gap-4">
+					<div class="flex items-center gap-1.5">
+						<span class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-muted">
+							<Check size="11" class="text-foreground" />
+						</span>
+						<span class="text-xs text-muted-foreground">{succeeded.length} imported</span>
+					</div>
+					<div class="flex items-center gap-1.5">
+						<span class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-destructive/10">
+							<X size="11" class="text-destructive" />
+						</span>
+						<span class="text-xs text-muted-foreground">{failed.length} failed</span>
+					</div>
+				</div>
+				<div class="relative flex-1 overflow-auto w-full">
+					<Table
+						data={failedData}
+						columns={[{ id: "__error", icon: AlertCircle }, ...collectionColumns.filter((c) => c.id !== "id")]}
+						showCheckboxes={false}
+						unifiedBgColor="bg-background"
+						headerBorderTop={true}
+					>
+						{#snippet overrideCell(value, column)}
+							{#if column.id === "__error"}
+								<span class="text-destructive">{value}</span>
+							{:else}
+								{value}
+							{/if}
+						{/snippet}
+					</Table>
+				</div>
+			{/if}
+			<div class="flex h-12 shrink-0 items-center justify-end gap-2 border-t px-4">
+				<Button onclick={hideDrawer} class="h-7 px-3 text-xs font-normal" Icon={Check}>
+					Done
+				</Button>
+			</div>
 		{/if}
 	</Dialog.Content>
 </Dialog.Root>

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

@@ -58,7 +58,7 @@
         } else {
             const workflowHandlerDefaultValue =
                 ctx.meta.collections.core_workflows.fields.handler
-                    .pre_processors.default;
+                    .default;
             workflowEntry = {
                 name: "",
                 event_name: "",

package/package.json

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

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

@@ -28,6 +28,7 @@
 		// styles
 		showLastRowBorder?: boolean;
 		showLastColumnBorder?: boolean;
+		headerBorderTop?: boolean;
 
 		// snippets
 		overrideCell?: Snippet<[any, Column, Entry]>;
@@ -70,6 +71,7 @@
 		selectByColumn,
 		showLastRowBorder,
 		showLastColumnBorder,
+		headerBorderTop = false,
 		parentWidth,
 		overrideCell,
 		tools,
@@ -181,6 +183,7 @@
 				sticky left-0 top-0 z-20
 				flex items-center p-2.5 text-xs h-10
 				border-r border-b gap-2
+				{headerBorderTop ? 'border-t' : ''}
 				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
 			"
 		>
@@ -209,6 +212,7 @@
 				{unifiedBgColor ? unifiedBgColor : 'bg-muted/30'}
 				{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
 				border-b gap-2
+				{headerBorderTop ? 'border-t' : ''}
 			"
 		>
 			{#if sort[column.id] === "asc"}
@@ -234,6 +238,7 @@
 				flex items-center p-2.5 h-10
 				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
 				border-l border-b
+				{headerBorderTop ? 'border-t' : ''}
 			"
 		></div>
 	{/if}

package/src/lib/components/detailView/utils.ts

@@ -11,8 +11,8 @@ export function getDefaultEntry(ctx: CTX, fieldNames: string[], collectionName:
             const field = getField(ctx, fieldName, collectionName);
             if (values && values[fieldName] !== undefined) {
                 value = values[fieldName];
-            } else if (field.pre_processors?.default) {
-                const defualtValue = field.pre_processors.default;
+            } else if (field.default !== undefined && field.default !== null) {
+                const defualtValue = field.default;
                 if (typeof defualtValue === "string") {
                     value = Mustache.render(defualtValue, {
                         now: new Date().toISOString(),

package/src/lib/components/importButton.svelte

@@ -4,9 +4,8 @@
 	import { toast } from "svelte-sonner";
 	import { getStudioContext } from "../context";
 	import * as Dialog from "./ui/dialog";
-	import Table from "./dataTable/table.svelte";
-	import FieldCell from "./dataTable/fieldCell.svelte";
 	import { getCollectionColumns } from "./dataTable/utils";
+	import Table from "./dataTable/table.svelte";
 	import Fuse from "fuse.js";
 	import { emitEvent } from "../eventSystem";
 
@@ -21,11 +20,12 @@
 
 	let openDrawer = $state(false);
 	let activeTab = $state<"upload" | "paste">("upload");
-	let step = $state<"input" | "processing" | "preview">("input");
+	let step = $state<"input" | "processing" | "preview" | "results">("input");
 	let pasteContent = $state("");
 	let isDragging = $state(false);
 	let parseError = $state("");
 	let transformedRows = $state<any[]>([]);
+	let importResults = $state<{ row: any; error: string | null }[]>([]);
 
 	const collectionColumns = $derived(getCollectionColumns(ctx, collectionName) ?? []);
 
@@ -43,8 +43,7 @@
 			Object.fromEntries(
 				collectionColumns.map((c) => {
 					const csvCol = Object.keys(mapping).find((k) => mapping[k] === c.id);
-					const raw = csvCol ? row[csvCol] ?? null : null;
-					return [c.id, raw];
+					return [c.id, csvCol ? row[csvCol] : null];
 				})
 			)
 		);
@@ -99,13 +98,7 @@
 		try {
 			const rows = detectAndParse(content);
 			if (rows.length === 0) throw new Error("No data rows found");
-			const mapped = applyColumnMapping(rows);
-			step = "processing";
-			const eventResult = await emitEvent({ lobb, ctx }, "studio.collections.import", {
-				collectionName,
-				rows: mapped,
-			});
-			transformedRows = eventResult.rows ?? mapped;
+			transformedRows = applyColumnMapping(rows);
 			step = "preview";
 		} catch (e: any) {
 			step = "input";
@@ -126,14 +119,36 @@
 	}
 
 	async function handleImport() {
-		const res = await lobb.createMany(collectionName, transformedRows);
-		if (res.status >= 400) {
-			toast.error("Import failed");
-			return;
+		step = "processing";
+		try {
+			const eventResult = await emitEvent({ lobb, ctx }, "studio.collections.import", {
+				collectionName,
+				rows: transformedRows.map((r) => ({ ...r })),
+			});
+			const finalRows = eventResult.rows ?? transformedRows;
+
+			const results: { row: any; error: string | null }[] = [];
+			for (const row of finalRows) {
+				const response = await lobb.createOne(collectionName, row);
+				if (response.ok) {
+					results.push({ row, error: null });
+				} else {
+					const body = await response.json().catch(() => null);
+					const message = body?.details
+						? Object.entries(body.details).map(([f, msgs]) => `${f}: ${(msgs as string[]).join(", ")}`).join(" | ")
+						: (body?.message ?? `HTTP ${response.status}`);
+					results.push({ row, error: message });
+				}
+			}
+
+			importResults = results;
+			const succeeded = results.filter((r) => r.error === null);
+
+			if (succeeded.length > 0 && onSuccessfullSave) await onSuccessfullSave();
+			step = "results";
+		} catch (e: any) {
+			step = "preview";
 		}
-		toast.success(`Imported ${transformedRows.length} records`);
-		if (onSuccessfullSave) await onSuccessfullSave();
-		hideDrawer();
 	}
 
 	function showDrawer() {
@@ -143,11 +158,14 @@
 
 	function hideDrawer() {
 		openDrawer = false;
-		step = "input";
-		activeTab = "upload";
-		pasteContent = "";
-		transformedRows = [];
-		parseError = "";
+		setTimeout(() => {
+			step = "input";
+			activeTab = "upload";
+			pasteContent = "";
+			transformedRows = [];
+			importResults = [];
+			parseError = "";
+		}, 200);
 	}
 </script>
 
@@ -162,7 +180,7 @@
 	onOpenChange={(open) => { if (!open) hideDrawer(); }}
 >
 	<Dialog.Content
-		class="flex flex-col gap-0 p-0 overflow-hidden {step === 'preview' ? 'max-w-5xl h-[80vh]' : 'max-w-lg'}"
+		class="flex flex-col gap-0 p-0 overflow-clip {step === 'preview' || (step === 'results' && importResults.some((r) => r.error !== null)) ? 'max-w-5xl h-[80vh]' : 'max-w-lg'}"
 	>
 		<!-- Header -->
 		<div class="flex h-12 shrink-0 items-center justify-between border-b px-4">
@@ -244,29 +262,19 @@
 				{/if}
 			</div>
 
-		{:else}
+		{:else if step === "preview"}
 			<!-- Preview -->
-			<div class="shrink-0 border-b px-4 py-2 text-sm text-muted-foreground">
+			<div class="shrink-0 px-4 py-2 text-sm text-muted-foreground">
 				{transformedRows.length} rows ready to import
 			</div>
-			<div class="flex-1 overflow-auto">
+			<div class="relative flex-1 overflow-auto w-full">
 				<Table
 					data={transformedRows}
-					columns={collectionColumns}
-					showLastRowBorder={true}
-					showLastColumnBorder={true}
+					columns={collectionColumns.filter((c) => c.id !== "id")}
 					showCheckboxes={false}
 					unifiedBgColor="bg-background"
-				>
-					{#snippet overrideCell(value, column, entry)}
-						<FieldCell
-							{collectionName}
-							fieldName={column.id}
-							{value}
-							{entry}
-						/>
-					{/snippet}
-				</Table>
+					headerBorderTop={true}
+				/>
 			</div>
 
 			<div class="flex h-12 shrink-0 items-center justify-end gap-2 border-t px-4">
@@ -277,6 +285,60 @@
 					Import {transformedRows.length} records
 				</Button>
 			</div>
+
+		{:else if step === "results"}
+			{@const failed = importResults.filter((r) => r.error !== null)}
+			{@const succeeded = importResults.filter((r) => r.error === null)}
+			{@const failedData = failed.map((r) => ({ __error: r.error, ...r.row }))}
+			{#if failed.length === 0}
+				<div class="flex flex-1 flex-col items-center justify-center gap-6 px-8 py-12">
+					<div class="flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+						<Check size="22" class="text-foreground" />
+					</div>
+					<div class="text-center">
+						<p class="text-sm font-medium text-foreground">Import complete</p>
+						<p class="mt-1 text-xs text-muted-foreground">{succeeded.length} {succeeded.length === 1 ? "record" : "records"} imported successfully</p>
+					</div>
+				</div>
+			{:else}
+				<!-- Summary strip -->
+				<div class="shrink-0 px-4 py-3 flex items-center gap-4">
+					<div class="flex items-center gap-1.5">
+						<span class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-muted">
+							<Check size="11" class="text-foreground" />
+						</span>
+						<span class="text-xs text-muted-foreground">{succeeded.length} imported</span>
+					</div>
+					<div class="flex items-center gap-1.5">
+						<span class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-destructive/10">
+							<X size="11" class="text-destructive" />
+						</span>
+						<span class="text-xs text-muted-foreground">{failed.length} failed</span>
+					</div>
+				</div>
+				<div class="relative flex-1 overflow-auto w-full">
+					<Table
+						data={failedData}
+						columns={[{ id: "__error", icon: AlertCircle }, ...collectionColumns.filter((c) => c.id !== "id")]}
+						showCheckboxes={false}
+						unifiedBgColor="bg-background"
+						headerBorderTop={true}
+					>
+						{#snippet overrideCell(value, column)}
+							{#if column.id === "__error"}
+								<span class="text-destructive">{value}</span>
+							{:else}
+								{value}
+							{/if}
+						{/snippet}
+					</Table>
+				</div>
+			{/if}
+			<div class="flex h-12 shrink-0 items-center justify-end gap-2 border-t px-4">
+				<Button onclick={hideDrawer} class="h-7 px-3 text-xs font-normal" Icon={Check}>
+					Done
+				</Button>
+			</div>
 		{/if}
 	</Dialog.Content>
 </Dialog.Root>

package/src/lib/components/routes/workflows/workflows.svelte

@@ -58,7 +58,7 @@
         } else {
             const workflowHandlerDefaultValue =
                 ctx.meta.collections.core_workflows.fields.handler
-                    .pre_processors.default;
+                    .default;
             workflowEntry = {
                 name: "",
                 event_name: "",