@lobb-js/studio 0.37.1 → 0.38.0

package/dist/components/importButton.svelte

@@ -4,6 +4,7 @@
 	import { toast } from "svelte-sonner";
 	import { getStudioContext } from "../context";
 	import * as Dialog from "./ui/dialog";
+	import * as Tooltip from "./ui/tooltip";
 	import { getCollectionColumns } from "./dataTable/utils";
 	import Table from "./dataTable/table.svelte";
 	import Fuse from "fuse.js";
@@ -28,11 +29,24 @@
 	let parseError = $state("");
 	let transformedRows = $state<any[]>([]);
 	let importResults = $state<{ row: any; error: string | null }[]>([]);
+	// 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.
+	let resultsTab = $state<"failed" | "imported">("failed");
+	// CSV columns that the fuzzy mapper couldn't match to any schema
+	// field. Shown as chips above the preview so the user can spot
+	// silently-dropped data before clicking Import.
+	let unmappedColumns = $state<Array<{ column: string; sample: string }>>([]);
 
 	const collectionColumns = $derived(getCollectionColumns(ctx, collectionName) ?? []);
 
-	function applyColumnMapping(rows: any[]): any[] {
-		if (!rows.length || !collectionColumns.length) return rows;
+	function applyColumnMapping(rows: any[]): {
+		rows: any[];
+		unmapped: Array<{ column: string; sample: string }>;
+	} {
+		if (!rows.length || !collectionColumns.length) {
+			return { rows, unmapped: [] };
+		}
 		const csvColumns = Object.keys(rows[0]);
 		const fieldNames = collectionColumns.map((c) => c.id);
 		const fuse = new Fuse(fieldNames, { includeScore: true, threshold: 0.4 });
@@ -41,7 +55,7 @@
 			const results = fuse.search(csvCol);
 			mapping[csvCol] = results[0]?.item ?? null;
 		}
-		return rows.map((row) =>
+		const mappedRows = rows.map((row) =>
 			Object.fromEntries(
 				collectionColumns.map((c) => {
 					const csvCol = Object.keys(mapping).find((k) => mapping[k] === c.id);
@@ -49,6 +63,15 @@
 				})
 			)
 		);
+		// Find the first row that has a non-empty value for each unmapped
+		// column so the chip tooltip can show a real example.
+		const unmapped = csvColumns
+			.filter((col) => mapping[col] === null)
+			.map((column) => {
+				const sample = rows.find((r) => r[column] != null && String(r[column]).trim() !== "")?.[column] ?? "";
+				return { column, sample: String(sample) };
+			});
+		return { rows: mappedRows, unmapped };
 	}
 	let fileInput: HTMLInputElement;
 
@@ -116,7 +139,9 @@
 		try {
 			const rows = await detectAndParse(content);
 			if (rows.length === 0) throw new Error("No data rows found");
-			transformedRows = applyColumnMapping(rows);
+			const mapped = applyColumnMapping(rows);
+			transformedRows = mapped.rows;
+			unmappedColumns = mapped.unmapped;
 			step = "preview";
 		} catch (e: any) {
 			step = "input";
@@ -162,6 +187,10 @@
 			}
 			if (hasSuccess && onSuccessfullSave) await onSuccessfullSave();
 
+			// Default to the failed tab when there are any failures; if
+			// everything went through, land on imported so the user can
+			// still verify what was written.
+			resultsTab = importResults.some((r) => r.error !== null) ? "failed" : "imported";
 			step = "results";
 		} catch (e: any) {
 			step = "preview";
@@ -181,6 +210,7 @@
 			pasteContent = "";
 			transformedRows = [];
 			importResults = [];
+			unmappedColumns = [];
 			parseError = "";
 		}, 200);
 	}
@@ -295,6 +325,39 @@
 			<div class="shrink-0 px-4 py-2 text-sm text-muted-foreground">
 				{transformedRows.length} rows ready to import
 			</div>
+			{#if unmappedColumns.length}
+				<!-- Unmapped CSV columns: the fuzzy matcher couldn't pair
+				     these with any schema field, so their values won't be
+				     imported. Surfaced here so the user can spot silently
+				     dropped data; each chip's tooltip shows a sample
+				     value from the first row that had one. -->
+				<div class="shrink-0 flex flex-wrap items-center gap-1.5 border-t px-4 py-2">
+					<AlertCircle size="13" class="text-muted-foreground" />
+					<span class="text-xs text-muted-foreground">
+						{unmappedColumns.length}
+						{unmappedColumns.length === 1 ? "column" : "columns"} not mapped:
+					</span>
+					<Tooltip.Provider delayDuration={150}>
+						{#each unmappedColumns as { column, sample }}
+							<Tooltip.Root>
+								<Tooltip.Trigger
+									class="rounded-md border border-dashed border-muted-foreground/40 bg-muted/40 px-2 py-0.5 text-[0.7rem] text-muted-foreground hover:border-muted-foreground/70"
+								>
+									{column}
+								</Tooltip.Trigger>
+								<Tooltip.Content side="bottom" align="start" class="max-w-md">
+									{#if sample}
+										<span class="text-muted-foreground">Sample:</span>
+										<span class="ml-1 font-mono">{sample}</span>
+									{:else}
+										<span class="text-muted-foreground">No sample values</span>
+									{/if}
+								</Tooltip.Content>
+							</Tooltip.Root>
+						{/each}
+					</Tooltip.Provider>
+				</div>
+			{/if}
 			<div class="relative flex-1 overflow-auto w-full">
 				<Table
 					data={transformedRows}
@@ -318,47 +381,107 @@
 			{@const succeeded = importResults.filter((r) => r.error === null)}
 			{@const failedData = failed.map((r) => ({ __error: r.error, ...r.row }))}
 			{#if failed.length === 0}
+				<!-- All rows imported successfully: nothing to audit here —
+				     the user can see the imported rows directly in the
+				     collection's list view after clicking Done. Show a
+				     compact success message instead of the tabs/table. -->
 				<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>
+						<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">
+				<!-- Tab strip: surfaces failed rows (so the user can fix
+				     them) and lets them peek at what *did* land. Only
+				     rendered when there were failures — otherwise the plain
+				     success message above is enough. -->
+				<div class="shrink-0 flex items-center gap-1 border-b px-4 py-2">
+					<button
+						type="button"
+						onclick={() => (resultsTab = "failed")}
+						class="
+							flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs
+							{resultsTab === 'failed' ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground'}
+						"
+					>
 						<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}
-						headerBorderTop={true}
+						{failed.length} failed
+					</button>
+					<button
+						type="button"
+						onclick={() => (resultsTab = "imported")}
+						class="
+							flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs
+							{resultsTab === 'imported' ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground'}
+						"
 					>
-						{#snippet overrideCell(value, column)}
-							{#if column.id === "__error"}
-								<span class="text-destructive">{value}</span>
-							{:else}
-								{value}
-							{/if}
-						{/snippet}
-					</Table>
+						<span class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-muted">
+							<Check size="11" class="text-foreground" />
+						</span>
+						{succeeded.length} imported
+					</button>
 				</div>
+				{#if resultsTab === "failed"}
+					<div class="relative flex-1 overflow-auto w-full">
+						<Table
+							data={failedData}
+							columns={[{ id: "__error", label: "Error", icon: AlertCircle }, ...collectionColumns.filter((c) => c.id !== "id")]}
+							showCheckboxes={false}
+							headerBorderTop={true}
+						>
+							{#snippet overrideCell(value, column)}
+								{#if column.id === "__error"}
+									<!-- Error cell: truncated single-line preview in
+									     the table. Hovering reveals the full message
+									     in a tooltip with monospace + wrap so
+									     multi-line errors / JSON dumps render
+									     legibly. -->
+									<Tooltip.Provider delayDuration={150}>
+										<Tooltip.Root>
+											<Tooltip.Trigger
+												class="block w-full truncate text-left text-destructive"
+											>
+												{value}
+											</Tooltip.Trigger>
+											<Tooltip.Content
+												class="max-w-md p-0"
+												side="bottom"
+												align="start"
+											>
+												<div class="max-h-64 overflow-auto p-3">
+													<pre class="whitespace-pre-wrap break-words font-mono text-xs text-destructive">{value}</pre>
+												</div>
+											</Tooltip.Content>
+										</Tooltip.Root>
+									</Tooltip.Provider>
+								{:else}
+									{value}
+								{/if}
+							{/snippet}
+						</Table>
+					</div>
+				{:else if succeeded.length === 0}
+					<div class="flex flex-1 flex-col items-center justify-center gap-3 px-8 py-12">
+						<p class="text-xs text-muted-foreground">No rows were imported</p>
+					</div>
+				{:else}
+					<div class="relative flex-1 overflow-auto w-full">
+						<Table
+							data={succeeded.map((r) => r.row)}
+							columns={collectionColumns.filter((c) => c.id !== "id")}
+							showCheckboxes={false}
+							headerBorderTop={true}
+						/>
+					</div>
+				{/if}
 			{/if}
 			<div class="flex h-12 shrink-0 items-center justify-end gap-2 border-t px-4">
 				<Button onclick={hideDrawer} size="sm" Icon={Check}>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.37.1",
+  "version": "0.38.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -108,14 +108,15 @@
     "imask": "^7.6.1",
     "javascript-time-ago": "^2.6.4",
     "json-stable-stringify": "^1.3.0",
+    "lodash-es": "^4.17.21",
     "lucide-svelte": "^0.488.0",
     "mode-watcher": "^0.5.1",
     "mustache": "^4.2.0",
     "qs": "^6.14.1",
+    "svelte-dnd-action": "^0.9.69",
     "svelte-portal": "^2.2.1",
     "svelte-sonner": "^0.3.28",
     "tailwind-merge": "^3.4.0",
-    "tailwind-variants": "^3.2.2",
-    "lodash-es": "^4.17.21"
+    "tailwind-variants": "^3.2.2"
   }
 }

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+    // Typeahead field picker. Renders inside a parent-owned <Popover.Content>
+    // so the parent controls open/close. Used by SortButton's fast-path
+    // picker and by Sort's "add a rule" popover.
+    import { getStudioContext } from "../../context";
+    import { getFieldIcon } from "./utils";
+
+    interface Props {
+        collectionName: string;
+        excludeFields?: string[];
+        placeholder?: string;
+        onPick: (fieldName: string) => void;
+    }
+
+    let {
+        collectionName,
+        excludeFields = [],
+        placeholder = "Pick a field…",
+        onPick,
+    }: Props = $props();
+
+    const { ctx } = getStudioContext();
+
+    let search = $state("");
+
+    const allFields = $derived(
+        Object.keys(ctx.meta.collections[collectionName].fields).filter(
+            (f) => !excludeFields.includes(f),
+        ),
+    );
+    const filteredFields = $derived(
+        search
+            ? allFields.filter((f) =>
+                  f.toLowerCase().includes(search.toLowerCase()),
+              )
+            : allFields,
+    );
+</script>
+
+<input
+    {placeholder}
+    bind:value={search}
+    class="w-full rounded-md border bg-muted px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+/>
+<div class="mt-2 max-h-60 overflow-auto">
+    {#each filteredFields as fieldName}
+        {@const FieldIcon = getFieldIcon(ctx, fieldName, collectionName)}
+        <button
+            type="button"
+            onclick={() => onPick(fieldName)}
+            class="flex w-full items-center gap-2 rounded-md p-2 text-left text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
+        >
+            <FieldIcon size="14" />
+            <span>{fieldName}</span>
+        </button>
+    {:else}
+        <div class="p-2 text-center text-xs text-muted-foreground">
+            No matching fields
+        </div>
+    {/each}
+</div>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import * as Popover from "../ui/popover/index.js";
-	import { ListFilter } from "lucide-svelte";
+	import { Settings2 } from "lucide-svelte";
 	import { buttonVariants } from "../ui/button";
 	import Filter from "./filter.svelte";
 
@@ -22,9 +22,10 @@
 		class={buttonVariants({
 			variant: "ghost",
 			size: "sm",
+			class: "text-muted-foreground",
 		})}
 	>
-		<ListFilter />
+		<Settings2 />
 		{#if showText}
 			{#if Object.keys(filter).length}
 				Filtered by {Object.keys(filter).length} rules