@lobb-js/studio 0.44.1 → 0.46.0

package/dist/components/dataTable/dataTable.svelte

@@ -210,6 +210,7 @@
     });
 
     let selectedRecords = $state([]);
+    let searchTerm = $state('');
     let totalCount = $state(0);
     let serverData: TableProps["data"] = $state([]);
     let loading = $state(true);
@@ -228,14 +229,15 @@
     const showLeftTools = $derived(!isSelectMode);
     let childrenDrawerEntry = $state<Record<string, any> | null>(null);
 
-    // requests the data from the server when the params is changed
+    // requests the data from the server when params or searchTerm changes
     $effect(() => {
-        loadData(params);
+        loadData(params, searchTerm);
     });
 
-    async function loadData(params: any) {
+    async function loadData(params: any, search: string = '') {
         loading = true;
         const paramsCopy = $state.snapshot(params);
+        if (search.trim()) paramsCopy.search = search.trim();
         const sort: TableProps["sort"] = paramsCopy.sort;
         const sortStrings: string[] = [];
         if (sort) {
@@ -417,6 +419,7 @@
             onLink={isRecordingMode ? handleLink : undefined}
             onCreate={isRecordingMode ? handleCreate : undefined}
             {excludeIds}
+            bind:searchTerm
         >
             {#snippet left()}
                 {@render headerLeft?.()}

package/dist/components/dataTable/header.svelte

@@ -3,7 +3,7 @@
     import type { Changes } from "../detailView/utils";
     import type { ParentContext } from "./dataTable.svelte";
     import CanAccess from "../canAccess.svelte";
-    import { Download, ListRestart, LoaderCircle, Plus, Trash, Link } from "lucide-svelte";
+    import { Download, ListRestart, LoaderCircle, Plus, Trash, Link, Search } from "lucide-svelte";
     import FilterButton from "./filterButton.svelte";
     import SortButton from "./sortButton.svelte";
     import Button from "../ui/button/button.svelte";
@@ -30,6 +30,7 @@
         loading?: boolean;
         left?: Snippet<[]>;
         excludeIds?: (string | number)[];
+        searchTerm?: string;
     }
 
     let {
@@ -45,6 +46,7 @@
         loading = false,
         left,
         excludeIds = [],
+        searchTerm = $bindable(''),
     }: Props = $props();
 
     function handleLink(record: any) {
@@ -139,9 +141,18 @@
                 bind:sort={params.sort}
                 showText={!headerIsSmall}
             />
+            <div class="relative flex items-center">
+                <Search size="13" class="absolute left-2 text-muted-foreground pointer-events-none" />
+                <input
+                    type="text"
+                    placeholder="Search..."
+                    bind:value={searchTerm}
+                    class="h-8 rounded-md border bg-muted pl-7 pr-2 text-xs outline-none focus:ring-1 focus:ring-ring w-40"
+                />
+            </div>
         {/if}
     </div>
-    <div>
+    <div class="flex items-center gap-1">
         <Button
             variant="ghost"
             size="sm"

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

@@ -14,7 +14,8 @@ interface Props {
     loading?: boolean;
     left?: Snippet<[]>;
     excludeIds?: (string | number)[];
+    searchTerm?: string;
 }
-declare const Header: import("svelte").Component<Props, {}, "selectedRecords" | "params">;
+declare const Header: import("svelte").Component<Props, {}, "selectedRecords" | "params" | "searchTerm">;
 type Header = ReturnType<typeof Header>;
 export default Header;

package/dist/components/importButton.svelte

@@ -28,7 +28,12 @@
 	let isDragging = $state(false);
 	let parseError = $state("");
 	let transformedRows = $state<any[]>([]);
-	let importResults = $state<{ row: any; error: string | null }[]>([]);
+	// `action` is only set when a `studio.collections.import` workflow takes
+	// ownership of the writes (handled: true) and tells us per row whether
+	// the record was created or updated. The default code path leaves it
+	// undefined; the UI then just says "imported".
+	type ImportAction = "created" | "updated";
+	let importResults = $state<{ row: any; error: string | null; action?: ImportAction }[]>([]);
 	// Which results tab is visible. Defaults to "failed" when there are
 	// any failures (most users want to fix those first); falls back to
 	// "imported" when everything went through.
@@ -168,23 +173,45 @@
 				collectionName,
 				rows: transformedRows.map((r) => ({ ...r })),
 			});
-			const finalRows = eventResult.rows ?? transformedRows;
 
 			importResults = [];
 			let hasSuccess = false;
-			for (const row of finalRows) {
-				const response = await lobb.createOne(collectionName, { data: row });
-				if (response.ok) {
-					importResults.push({ row, error: null });
+
+			if (eventResult?.handled && eventResult.results) {
+				// The workflow took ownership — it did the writes itself
+				// (typical use case: upsert-style imports where the workflow
+				// needs to decide create-vs-update per row). Render its
+				// results verbatim, no extra writes from our side.
+				const r = eventResult.results as {
+					imported?: Array<{ row: any; action: ImportAction }>;
+					failed?: Array<{ row: any; error: string; action?: ImportAction }>;
+				};
+				for (const item of r.imported ?? []) {
+					importResults.push({ row: item.row, error: null, action: item.action });
 					hasSuccess = true;
-				} 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}`);
-					importResults.push({ row, error: message });
+				}
+				for (const item of r.failed ?? []) {
+					importResults.push({ row: item.row, error: item.error, action: item.action });
+				}
+			} else {
+				// Default path — workflow only transformed rows (or did
+				// nothing). Loop createOne ourselves and track results.
+				const finalRows = eventResult.rows ?? transformedRows;
+				for (const row of finalRows) {
+					const response = await lobb.createOne(collectionName, { data: row });
+					if (response.ok) {
+						importResults.push({ row, error: null });
+						hasSuccess = true;
+					} 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}`);
+						importResults.push({ row, error: message });
+					}
 				}
 			}
+
 			if (hasSuccess && onSuccessfullSave) await onSuccessfullSave();
 
 			// Default to the failed tab when there are any failures; if
@@ -379,6 +406,8 @@
 		{:else if step === "results"}
 			{@const failed = importResults.filter((r) => r.error !== null)}
 			{@const succeeded = importResults.filter((r) => r.error === null)}
+			{@const createdCount = succeeded.filter((r) => r.action === "created").length}
+			{@const updatedCount = succeeded.filter((r) => r.action === "updated").length}
 			{@const failedData = failed.map((r) => ({ __error: r.error, ...r.row }))}
 			{#if failed.length === 0}
 				<!-- All rows imported successfully: nothing to audit here —
@@ -392,7 +421,11 @@
 					<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
+							{#if createdCount + updatedCount > 0}
+								{createdCount} created · {updatedCount} updated
+							{:else}
+								{succeeded.length} {succeeded.length === 1 ? "record" : "records"} imported successfully
+							{/if}
 						</p>
 					</div>
 				</div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.44.1",
+  "version": "0.46.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -45,7 +45,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.38.1",
+    "@lobb-js/core": "^0.40.0",
     "@chromatic-com/storybook": "^4.1.2",
     "@playwright/test": "^1.60.0",
     "@storybook/addon-a11y": "^10.0.1",
@@ -91,7 +91,7 @@
     "@codemirror/view": "^6.39.12",
     "@dagrejs/dagre": "^1.1.5",
     "@internationalized/date": "^3.12.0",
-    "@lobb-js/sdk": "^0.3.0",
+    "@lobb-js/sdk": "^0.4.0",
     "@lucide/svelte": "^0.563.1",
     "@tailwindcss/vite": "^4.3.0",
     "@tiptap/core": "^3.0.0",

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

@@ -210,6 +210,7 @@
     });
 
     let selectedRecords = $state([]);
+    let searchTerm = $state('');
     let totalCount = $state(0);
     let serverData: TableProps["data"] = $state([]);
     let loading = $state(true);
@@ -228,14 +229,15 @@
     const showLeftTools = $derived(!isSelectMode);
     let childrenDrawerEntry = $state<Record<string, any> | null>(null);
 
-    // requests the data from the server when the params is changed
+    // requests the data from the server when params or searchTerm changes
     $effect(() => {
-        loadData(params);
+        loadData(params, searchTerm);
     });
 
-    async function loadData(params: any) {
+    async function loadData(params: any, search: string = '') {
         loading = true;
         const paramsCopy = $state.snapshot(params);
+        if (search.trim()) paramsCopy.search = search.trim();
         const sort: TableProps["sort"] = paramsCopy.sort;
         const sortStrings: string[] = [];
         if (sort) {
@@ -417,6 +419,7 @@
             onLink={isRecordingMode ? handleLink : undefined}
             onCreate={isRecordingMode ? handleCreate : undefined}
             {excludeIds}
+            bind:searchTerm
         >
             {#snippet left()}
                 {@render headerLeft?.()}

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

@@ -3,7 +3,7 @@
     import type { Changes } from "../detailView/utils";
     import type { ParentContext } from "./dataTable.svelte";
     import CanAccess from "../canAccess.svelte";
-    import { Download, ListRestart, LoaderCircle, Plus, Trash, Link } from "lucide-svelte";
+    import { Download, ListRestart, LoaderCircle, Plus, Trash, Link, Search } from "lucide-svelte";
     import FilterButton from "./filterButton.svelte";
     import SortButton from "./sortButton.svelte";
     import Button from "../ui/button/button.svelte";
@@ -30,6 +30,7 @@
         loading?: boolean;
         left?: Snippet<[]>;
         excludeIds?: (string | number)[];
+        searchTerm?: string;
     }
 
     let {
@@ -45,6 +46,7 @@
         loading = false,
         left,
         excludeIds = [],
+        searchTerm = $bindable(''),
     }: Props = $props();
 
     function handleLink(record: any) {
@@ -139,9 +141,18 @@
                 bind:sort={params.sort}
                 showText={!headerIsSmall}
             />
+            <div class="relative flex items-center">
+                <Search size="13" class="absolute left-2 text-muted-foreground pointer-events-none" />
+                <input
+                    type="text"
+                    placeholder="Search..."
+                    bind:value={searchTerm}
+                    class="h-8 rounded-md border bg-muted pl-7 pr-2 text-xs outline-none focus:ring-1 focus:ring-ring w-40"
+                />
+            </div>
         {/if}
     </div>
-    <div>
+    <div class="flex items-center gap-1">
         <Button
             variant="ghost"
             size="sm"

package/src/lib/components/importButton.svelte

@@ -28,7 +28,12 @@
 	let isDragging = $state(false);
 	let parseError = $state("");
 	let transformedRows = $state<any[]>([]);
-	let importResults = $state<{ row: any; error: string | null }[]>([]);
+	// `action` is only set when a `studio.collections.import` workflow takes
+	// ownership of the writes (handled: true) and tells us per row whether
+	// the record was created or updated. The default code path leaves it
+	// undefined; the UI then just says "imported".
+	type ImportAction = "created" | "updated";
+	let importResults = $state<{ row: any; error: string | null; action?: ImportAction }[]>([]);
 	// Which results tab is visible. Defaults to "failed" when there are
 	// any failures (most users want to fix those first); falls back to
 	// "imported" when everything went through.
@@ -168,23 +173,45 @@
 				collectionName,
 				rows: transformedRows.map((r) => ({ ...r })),
 			});
-			const finalRows = eventResult.rows ?? transformedRows;
 
 			importResults = [];
 			let hasSuccess = false;
-			for (const row of finalRows) {
-				const response = await lobb.createOne(collectionName, { data: row });
-				if (response.ok) {
-					importResults.push({ row, error: null });
+
+			if (eventResult?.handled && eventResult.results) {
+				// The workflow took ownership — it did the writes itself
+				// (typical use case: upsert-style imports where the workflow
+				// needs to decide create-vs-update per row). Render its
+				// results verbatim, no extra writes from our side.
+				const r = eventResult.results as {
+					imported?: Array<{ row: any; action: ImportAction }>;
+					failed?: Array<{ row: any; error: string; action?: ImportAction }>;
+				};
+				for (const item of r.imported ?? []) {
+					importResults.push({ row: item.row, error: null, action: item.action });
 					hasSuccess = true;
-				} 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}`);
-					importResults.push({ row, error: message });
+				}
+				for (const item of r.failed ?? []) {
+					importResults.push({ row: item.row, error: item.error, action: item.action });
+				}
+			} else {
+				// Default path — workflow only transformed rows (or did
+				// nothing). Loop createOne ourselves and track results.
+				const finalRows = eventResult.rows ?? transformedRows;
+				for (const row of finalRows) {
+					const response = await lobb.createOne(collectionName, { data: row });
+					if (response.ok) {
+						importResults.push({ row, error: null });
+						hasSuccess = true;
+					} 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}`);
+						importResults.push({ row, error: message });
+					}
 				}
 			}
+
 			if (hasSuccess && onSuccessfullSave) await onSuccessfullSave();
 
 			// Default to the failed tab when there are any failures; if
@@ -379,6 +406,8 @@
 		{:else if step === "results"}
 			{@const failed = importResults.filter((r) => r.error !== null)}
 			{@const succeeded = importResults.filter((r) => r.error === null)}
+			{@const createdCount = succeeded.filter((r) => r.action === "created").length}
+			{@const updatedCount = succeeded.filter((r) => r.action === "updated").length}
 			{@const failedData = failed.map((r) => ({ __error: r.error, ...r.row }))}
 			{#if failed.length === 0}
 				<!-- All rows imported successfully: nothing to audit here —
@@ -392,7 +421,11 @@
 					<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
+							{#if createdCount + updatedCount > 0}
+								{createdCount} created · {updatedCount} updated
+							{:else}
+								{succeeded.length} {succeeded.length === 1 ? "record" : "records"} imported successfully
+							{/if}
 						</p>
 					</div>
 				</div>