@lobb-js/studio 0.40.0 → 0.42.0

package/dist/components/detailView/update/updateDetailView.svelte

@@ -27,6 +27,7 @@
     import { getStudioContext } from "../../../context";
     import { toast } from "svelte-sonner";
     import { untrack } from "svelte";
+    import { showDialog } from "../../../actions";
 
     const { lobb, ctx } = getStudioContext();
     import { getChangedProperties } from "../../../utils";
@@ -69,6 +70,34 @@
         ),
     );
 
+    const totalChangeCount = $derived.by(() => {
+        let count = Object.keys(localChanges.data).length;
+        for (const ch of Object.values(localChanges.children) as ChildrenChanges[]) {
+            count += ch.created.length + ch.updated.length + ch.deleted.length + ch.linked.length + ch.unlinked.length;
+        }
+        return count;
+    });
+
+    const hasChildChanges = $derived(
+        Object.values(localChanges.children).some((ch: ChildrenChanges) =>
+            ch.created.length || ch.updated.length || ch.deleted.length || ch.linked.length || ch.unlinked.length
+        )
+    );
+
+    const changeSummaryLines = $derived.by(() => {
+        const lines: string[] = [];
+        const fieldCount = Object.keys(localChanges.data).length;
+        if (fieldCount > 0) lines.push(`${fieldCount} field${fieldCount > 1 ? 's' : ''} changed`);
+        for (const [col, ch] of Object.entries(localChanges.children) as [string, ChildrenChanges][]) {
+            if (ch.created.length) lines.push(`${ch.created.length} created in ${col}`);
+            if (ch.linked.length) lines.push(`${ch.linked.length} linked in ${col}`);
+            if (ch.updated.length) lines.push(`${ch.updated.length} edited in ${col}`);
+            if (ch.deleted.length) lines.push(`${ch.deleted.length} deleted from ${col}`);
+            if (ch.unlinked.length) lines.push(`${ch.unlinked.length} unlinked from ${col}`);
+        }
+        return lines;
+    });
+
     $effect(() => {
         const currentEntrySnap = $state.snapshot(values);
 
@@ -77,17 +106,6 @@
         });
     });
 
-    $effect(() => {
-        const snap = $state.snapshot(localChanges);
-        if (isRecordingMode) {
-            const hasAny = Object.keys(snap.data).length > 0 ||
-                Object.values(snap.children).some((c: ChildrenChanges) =>
-                    c.created.length || c.updated.length || c.deleted.length || c.linked.length || c.unlinked.length
-                );
-            if (hasAny) untrack(() => onChanges?.(snap));
-        }
-    });
-
     function buildPayload(changes: Changes): { data: Record<string, any>; children?: Record<string, any> } {
         const { id: _id, ...data } = changes.data;
         const children = buildChildren(changes.children);
@@ -119,6 +137,14 @@
     }
 
     async function handleSave() {
+        if (!isRecordingMode && hasChildChanges && changeSummaryLines.length > 0) {
+            const confirmed = await showDialog(
+                "Confirm changes",
+                changeSummaryLines.map(l => `• ${l}`).join('\n')
+            );
+            if (!confirmed) return;
+        }
+
         const snap = $state.snapshot(localChanges);
         const response = await lobb.updateOne(collectionName, recordId, buildPayload(snap), isRecordingMode);
 
@@ -189,10 +215,11 @@
                 variant="default"
                 size="sm"
                 Icon={submitButton?.icon ? submitButton.icon : Pencil}
+                aria-label={submitButton?.text ?? "Update"}
                 onclick={handleSave}
                 disabled={!hasChanges}
             >
-                {submitButton?.text ? submitButton.text : "Update"}
+                {submitButton?.text ?? "Update"}{totalChangeCount > 0 ? ` (${totalChangeCount})` : ''}
             </Button>
         </div>
     </div>

package/dist/components/detailView/update/updateDetailViewButton.svelte

@@ -11,6 +11,7 @@
 		class?: ButtonProps["class"];
 		Icon?: ButtonProps["Icon"];
 		children?: ButtonProps["children"];
+		"aria-label"?: string;
 	}
 
 	let props: LocalProp = $props();
@@ -20,6 +21,11 @@
 	const { lobb } = getStudioContext();
 
 	async function openView() {
+		if (props.values) {
+			values = props.values;
+			open = true;
+			return;
+		}
 		const params = {
 			fields: "*",
 			filter: { id: props.recordId },
@@ -37,6 +43,7 @@
 	size={props.size}
 	class={props.class}
 	Icon={props.Icon}
+	aria-label={props["aria-label"]}
 	onclick={openView}
 >
 	{#if props.children}

package/dist/components/detailView/update/updateDetailViewButton.svelte.d.ts

@@ -6,6 +6,7 @@ interface LocalProp extends UpdateDetailViewProp {
     class?: ButtonProps["class"];
     Icon?: ButtonProps["Icon"];
     children?: ButtonProps["children"];
+    "aria-label"?: string;
 }
 declare const UpdateDetailViewButton: import("svelte").Component<LocalProp, {}, "">;
 type UpdateDetailViewButton = ReturnType<typeof UpdateDetailViewButton>;

package/dist/components/drawer.svelte

@@ -36,6 +36,7 @@
     ></button>
 
     <div
+        role="dialog"
         transition:slide={{ axis: position === "bottom" ? "y" : "x" }}
         class={position === "bottom"
             ? "fixed bottom-0 left-0 z-40 flex h-[60vh] w-full flex-col border-t bg-card"

package/dist/components/foreingKeyInput.svelte

@@ -3,9 +3,11 @@
     import Input from "./ui/input/input.svelte";
     import SelectRecord from "./selectRecord.svelte";
     import UpdateDetailViewButton from "./detailView/update/updateDetailViewButton.svelte";
+    import CreateDetailView from "./detailView/create/createDetailView.svelte";
     import { getCollectionPrimaryField } from "./dataTable/utils";
     import { getStudioContext } from "../context";
-    import { ExternalLink } from "lucide-svelte";
+    import { ExternalLink, Plus } from "lucide-svelte";
+    import Button from "./ui/button/button.svelte";
 
     const { lobb, ctx } = getStudioContext();
 
@@ -28,6 +30,7 @@
     }: LocalProps = $props();
 
     let displayName = $state<string | null>(null);
+    let createDrawerOpen = $state(false);
 
     onMount(async () => {
         if (value == null) return;
@@ -51,6 +54,12 @@
         displayName = primaryFieldName ? String(selectedEntry[primaryFieldName]) : null;
     }
 
+    async function handleCreated(record: any) {
+        const primaryFieldName = getCollectionPrimaryField(ctx, collectionName);
+        value = record.id;
+        displayName = primaryFieldName ? String(record[primaryFieldName]) : null;
+    }
+
     const idIsZero = $derived(value === 0);
 </script>
 
@@ -71,6 +80,14 @@
                     {displayName}
                 </div>
             {/if}
+            <Button
+                class="h-6 px-2 font-normal text-xs"
+                variant="outline"
+                Icon={Plus}
+                onclick={() => (createDrawerOpen = true)}
+            >
+                Create
+            </Button>
             <SelectRecord
                 class="h-6 px-2 font-normal text-xs"
                 variant="outline"
@@ -78,6 +95,7 @@
                 {collectionName}
                 {fieldName}
                 onSelect={handleSelect}
+                text="Select"
                 {entry}
             />
         </div>
@@ -103,3 +121,11 @@
         />
     </div>
 {/if}
+
+{#if createDrawerOpen}
+    <CreateDetailView
+        collectionName={collectionName}
+        onCreated={handleCreated}
+        onCancel={async () => { createDrawerOpen = false; }}
+    />
+{/if}

package/dist/components/polymorphicInput.svelte

@@ -6,7 +6,8 @@
     import * as Popover from "./ui/popover/index";
     import { getCollectionPrimaryField } from "./dataTable/utils";
     import { getStudioContext } from "../context";
-    import { ArrowLeft, Link, ChevronDown } from "lucide-svelte";
+    import { ArrowLeft, Link, ChevronDown, Plus } from "lucide-svelte";
+    import CreateDetailView from "./detailView/create/createDetailView.svelte";
 
     const { ctx, lobb } = getStudioContext();
 
@@ -32,6 +33,7 @@
     let displayName = $state<string | null>(null);
     let collectionPopoverOpen = $state(false);
     let recordDrawerOpen = $state(false);
+    let createDrawerOpen = $state(false);
 
     onMount(async () => {
         if (selectedCollection == null || selectedId == null) return;
@@ -68,6 +70,12 @@
         displayName = primaryFieldName ? String(record[primaryFieldName]) : null;
         recordDrawerOpen = false;
     }
+
+    async function onPolyCreated(record: any) {
+        const primaryFieldName = getCollectionPrimaryField(ctx, selectedCollection!);
+        entry = { ...entry, [idField]: record.id };
+        displayName = primaryFieldName ? String(record[primaryFieldName]) : null;
+    }
 </script>
 
 <div class="flex h-9 w-full items-center gap-1.5 rounded-md border pl-1.5 pr-9 text-xs bg-muted {destructive ? 'border-destructive bg-destructive/10' : ''}">
@@ -115,15 +123,23 @@
         </div>
     {/if}
 
-    <!-- Select record button -->
+    <!-- Create / Select record buttons -->
     {#if selectedCollection}
+        <Button
+            class="h-6 shrink-0 px-2 font-normal text-xs"
+            variant="outline"
+            onclick={() => (createDrawerOpen = true)}
+        >
+            <Plus size="13" />
+            Create
+        </Button>
         <Button
             class="h-6 shrink-0 px-2 font-normal text-xs"
             variant="outline"
             onclick={() => (recordDrawerOpen = true)}
         >
             <Link size="13" />
-            Select Record
+            Select
         </Button>
     {/if}
 </div>
@@ -155,3 +171,11 @@
         </div>
     </Drawer>
 {/if}
+
+{#if createDrawerOpen && selectedCollection}
+    <CreateDetailView
+        collectionName={selectedCollection}
+        onCreated={onPolyCreated}
+        onCancel={async () => { createDrawerOpen = false; }}
+    />
+{/if}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.40.0",
+  "version": "0.42.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -45,7 +45,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.37.0",
+    "@lobb-js/core": "^0.37.1",
     "@chromatic-com/storybook": "^4.1.2",
     "@playwright/test": "^1.60.0",
     "@storybook/addon-a11y": "^10.0.1",

package/src/lib/components/confirmationDialog/confirmationDialog.svelte

@@ -17,7 +17,7 @@
 	<AlertDialog.Content>
 		<AlertDialog.Header>
 			<AlertDialog.Title>{title}</AlertDialog.Title>
-			<AlertDialog.Description>
+			<AlertDialog.Description class="whitespace-pre-line">
 				{description}
 			</AlertDialog.Description>
 		</AlertDialog.Header>

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

@@ -14,7 +14,7 @@
     import Table, { type TableProps } from "./table.svelte";
     import { getCollectionColumns, getCollectionParamsFields } from "./utils";
     import CanAccess from "../canAccess.svelte";
-    import { Pencil, Trash, Unlink } from "lucide-svelte";
+    import { Pencil, Trash, Unlink, RotateCcw } from "lucide-svelte";
     import ListViewChildren from "./listViewChildren.svelte";
     import FieldCell from "./fieldCell.svelte";
     import Skeleton from "../ui/skeleton/skeleton.svelte";
@@ -76,37 +76,80 @@
     let localChanges = $state<ChildrenChanges>(
         untrack(() => changes) ?? { created: [], updated: [], deleted: [], linked: [], unlinked: [] }
     );
+    // Counter for temporary IDs assigned to locally-created pending records so they
+    // can be individually targeted by handleDelete before being committed to the DB.
+    let nextTempId = -1;
 
 
     // Derives the displayed rows by applying localChanges on top of server data.
+    // Deleted/unlinked rows stay visible but carry _recordingState so the table
+    // can render them with visual staging indicators.
     const data = $derived.by(() => {
         if (!isRecordingMode) return serverData;
 
-        const removedIds = new Set([
-            ...localChanges.deleted.map((r: any) => String(r.id)),
-            ...localChanges.unlinked.map((r: any) => String(r.id)),
-        ]);
-
-        let result = serverData.filter((r: any) => !removedIds.has(String(r.id)));
-
-        result = result.map((r: any) => {
-            const update = localChanges.updated.find((u) => String(u.id) === String(r.id));
-            return update && Object.keys(update.changes.data).length ? { ...r, ...update.changes.data } : r;
+        const deletedIds = new Set(localChanges.deleted.map((r: any) => String(r.id)));
+        const unlinkedIds = new Set(localChanges.unlinked.map((r: any) => String(r.id)));
+
+        let result = serverData.map((r: any) => {
+            const id = String(r.id);
+            const update = localChanges.updated.find((u) => String(u.id) === id);
+            const hasUpdate = update && (
+                Object.keys(update.changes.data).length > 0 ||
+                Object.values(update.changes.children).some((ch: any) =>
+                    ch.created.length || ch.updated.length || ch.deleted.length || ch.linked.length || ch.unlinked.length
+                )
+            );
+
+            let state: string | undefined;
+            if (deletedIds.has(id)) state = 'deleted';
+            else if (unlinkedIds.has(id)) state = 'unlinked';
+            else if (hasUpdate) state = 'updated';
+
+            return {
+                ...(hasUpdate ? { ...r, ...update!.changes.data } : r),
+                ...(state ? { _recordingState: state } : {}),
+            };
         });
 
         for (const record of localChanges.linked) {
             if (!result.some((r: any) => String(r.id) === String(record.id))) {
-                result = [...result, record];
+                result = [...result, { ...record, _recordingState: 'linked' }];
             }
         }
 
         for (const item of localChanges.created) {
-            result = [...result, { ...item.data, _pending: true }];
+            result = [...result, { ...item.data, id: (item as any)._tempId, _recordingState: 'created' }];
         }
 
         return result;
     });
 
+    // IDs to exclude from the Link picker — records already present in this table
+    const excludeIds = $derived([
+        ...serverData.map((r: any) => r.id),
+        ...localChanges.linked.map((r: any) => r.id),
+    ]);
+
+    function onCellClass(entry: any, cellIndex: number): string {
+        if (!isRecordingMode) return '';
+        const state = entry._recordingState;
+        const border = cellIndex === 0 ? {
+            deleted:  'border-l-2 border-l-red-500',
+            unlinked: 'border-l-2 border-l-orange-500',
+            created:  'border-l-2 border-l-green-500',
+            linked:   'border-l-2 border-l-blue-500',
+            updated:  'border-l-2 border-l-amber-500',
+        }[state as string] ?? '' : '';
+        const bg: Record<string, string> = {
+            deleted:  '!bg-red-500/5 opacity-50',
+            unlinked: '!bg-orange-500/5 opacity-50',
+            created:  '!bg-green-500/5',
+            linked:   '!bg-blue-500/5',
+            updated:  '!bg-amber-500/5',
+        };
+        return `${bg[state as string] ?? ''} ${border}`.trim();
+    }
+
     const hasRowActions = $derived(
         loadExtensionComponents(ctx, "listView.entry.actions", undefined, { collectionName }).length > 0
     );
@@ -204,16 +247,24 @@
     }
 
     async function handleDelete(entryId: string) {
-        const result = await showDialog("Are you sure?", "This will permanently delete the record.");
-        if (!result) return;
+        if (!isRecordingMode) {
+            const result = await showDialog("Are you sure?", "This will permanently delete the record.");
+            if (!result) return;
+        }
         if (isRecordingMode) {
             // If the record was locally linked (not yet in DB), just cancel the link instead of marking for deletion.
             const linkedIdx = localChanges.linked.findIndex((r: any) => String(r.id) === String(entryId));
             if (linkedIdx !== -1) {
                 localChanges.linked.splice(linkedIdx, 1);
             } else {
-                const record = serverData.find((r: any) => String(r.id) === String(entryId));
-                if (record) localChanges.deleted.push($state.snapshot(record));
+                // If it's a locally-created pending record (has a negative tempId), remove it from created.
+                const createdIdx = localChanges.created.findIndex((item: any) => String(item._tempId) === String(entryId));
+                if (createdIdx !== -1) {
+                    localChanges.created.splice(createdIdx, 1);
+                } else {
+                    const record = serverData.find((r: any) => String(r.id) === String(entryId));
+                    if (record) localChanges.deleted.push($state.snapshot(record));
+                }
             }
             onChanges?.($state.snapshot(localChanges));
         } else if (parentContext) {
@@ -228,8 +279,10 @@
     }
 
     async function handleUnlink(entryId: string) {
-        const result = await showDialog("Are you sure?", "This will unlink the record without deleting it.");
-        if (!result) return;
+        if (!isRecordingMode) {
+            const result = await showDialog("Are you sure?", "This will unlink the record without deleting it.");
+            if (!result) return;
+        }
         if (isRecordingMode) {
             // If the record was locally linked this session, just cancel the link — net effect is no change.
             const linkedIdx = localChanges.linked.findIndex((r: any) => String(r.id) === String(entryId));
@@ -265,14 +318,63 @@
     });
 
     function handleCreate(changes: import("../detailView/utils").Changes) {
-        localChanges.created.push({ data: changes.data });
+        (localChanges.created as any[]).push({ data: changes.data, _tempId: nextTempId-- });
+        onChanges?.($state.snapshot(localChanges));
+    }
+
+    const hasAnyChanges = $derived(
+        localChanges.created.length > 0 ||
+        localChanges.updated.length > 0 ||
+        localChanges.deleted.length > 0 ||
+        localChanges.linked.length > 0 ||
+        localChanges.unlinked.length > 0
+    );
+
+    function handleRevertRow(entryId: string) {
+        const id = String(entryId);
+        const createdIdx = localChanges.created.findIndex((item: any) => String(item._tempId) === id);
+        if (createdIdx !== -1) localChanges.created.splice(createdIdx, 1);
+        const linkedIdx = localChanges.linked.findIndex((r: any) => String(r.id) === id);
+        if (linkedIdx !== -1) localChanges.linked.splice(linkedIdx, 1);
+        const deletedIdx = localChanges.deleted.findIndex((r: any) => String(r.id) === id);
+        if (deletedIdx !== -1) localChanges.deleted.splice(deletedIdx, 1);
+        const unlinkedIdx = localChanges.unlinked.findIndex((r: any) => String(r.id) === id);
+        if (unlinkedIdx !== -1) localChanges.unlinked.splice(unlinkedIdx, 1);
+        const updatedIdx = localChanges.updated.findIndex((u: any) => String(u.id) === id);
+        if (updatedIdx !== -1) localChanges.updated.splice(updatedIdx, 1);
+        onChanges?.($state.snapshot(localChanges));
+    }
+
+    function handleRevertAll() {
+        localChanges.created = [];
+        localChanges.updated = [];
+        localChanges.deleted = [];
+        localChanges.linked = [];
+        localChanges.unlinked = [];
+        onChanges?.($state.snapshot(localChanges));
+    }
+
+    function handleEditPending(tempId: string, editChanges: import("../detailView/utils").Changes) {
+        const createdIdx = localChanges.created.findIndex((item: any) => String(item._tempId) === tempId);
+        if (createdIdx !== -1) {
+            localChanges.created[createdIdx] = {
+                ...localChanges.created[createdIdx],
+                data: { ...localChanges.created[createdIdx].data, ...editChanges.data },
+            };
+        }
         onChanges?.($state.snapshot(localChanges));
     }
 
     function handleUpdate(id: string, editChanges: import("../detailView/utils").Changes) {
-        const existing = localChanges.updated.find((u) => String(u.id) === id);
-        if (existing) {
-            existing.changes = editChanges;
+        const isEmpty = Object.keys(editChanges.data).length === 0 &&
+            Object.values(editChanges.children).every((ch: any) =>
+                !ch.created.length && !ch.updated.length && !ch.deleted.length && !ch.linked.length && !ch.unlinked.length
+            );
+        const existingIdx = localChanges.updated.findIndex((u) => String(u.id) === id);
+        if (isEmpty) {
+            if (existingIdx !== -1) localChanges.updated.splice(existingIdx, 1);
+        } else if (existingIdx !== -1) {
+            localChanges.updated[existingIdx].changes = editChanges;
         } else {
             localChanges.updated.push({ id, changes: editChanges });
         }
@@ -306,9 +408,22 @@
             {parentContext}
             onLink={isRecordingMode ? handleLink : undefined}
             onCreate={isRecordingMode ? handleCreate : undefined}
+            {excludeIds}
         >
             {#snippet left()}
                 {@render headerLeft?.()}
+                {#if isRecordingMode && hasAnyChanges}
+                    <Button
+                        class="h-6 px-2 font-normal text-xs text-muted-foreground"
+                        variant="ghost"
+                        size="sm"
+                        Icon={RotateCcw}
+                        onclick={handleRevertAll}
+                        title="Revert all changes"
+                    >
+                        Revert all
+                    </Button>
+                {/if}
             {/snippet}
         </Header>
     {/if}
@@ -346,40 +461,57 @@
                         bind:selectedRecords
                         bind:tableWidth={dataTableWidth}
                         {...tableProps}
-                        rowActions={hasRowActions ? rowActionsSnippet : undefined}>
+                        rowActions={hasRowActions ? rowActionsSnippet : undefined}
+                        onCellClass={isRecordingMode ? onCellClass : undefined}>
                         {#snippet tools(entry)}
-                            {#if showEdit}
-                                <CanAccess collection={collectionName} action="update">
-                                    <UpdateDetailViewButton
-                                        {collectionName}
-                                        recordId={entry.id}
+                            {#if entry._recordingState !== 'deleted' && entry._recordingState !== 'unlinked'}
+                                {#if showEdit}
+                                    {@const isPending = entry._recordingState === 'created'}
+                                    <CanAccess collection={collectionName} action="update">
+                                        <UpdateDetailViewButton
+                                            {collectionName}
+                                            recordId={entry.id}
+                                            variant="ghost"
+                                            class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
+                                            Icon={Pencil}
+                                            aria-label={`Edit record ${entry.id}`}
+                                            values={isPending ? entry : undefined}
+                                            changes={isRecordingMode && !isPending ? localChanges.updated.find((u) => String(u.id) === String(entry.id))?.changes : undefined}
+                                            onChanges={isPending ? (c) => handleEditPending(String(entry.id), c) : isRecordingMode ? (c) => handleUpdate(String(entry.id), c) : undefined}
+                                            onSuccessfullSave={!isRecordingMode ? async () => { params = { ...params }; } : undefined}
+                                        ></UpdateDetailViewButton>
+                                    </CanAccess>
+                                {/if}
+                                {#if parentContext}
+                                    <Button
+                                        class="h-6 w-6 text-muted-foreground hover:bg-transparent"
                                         variant="ghost"
-                                        class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
-                                        Icon={Pencil}
-                                        changes={isRecordingMode ? localChanges.updated.find((u) => String(u.id) === String(entry.id))?.changes : undefined}
-                                        onChanges={isRecordingMode ? (c) => handleUpdate(String(entry.id), c) : undefined}
-                                        onSuccessfullSave={!isRecordingMode ? async () => { params = { ...params }; } : undefined}
-                                    ></UpdateDetailViewButton>
-                                </CanAccess>
-                            {/if}
-                            {#if parentContext}
-                                <Button
-                                    class="h-6 w-6 text-muted-foreground hover:bg-transparent"
-                                    variant="ghost"
-                                    size="icon"
-                                    onclick={() => handleUnlink(entry.id)}
-                                    Icon={Unlink}
-                                    title="Remove from this entry"
-                                ></Button>
+                                        size="icon"
+                                        onclick={() => handleUnlink(entry.id)}
+                                        Icon={Unlink}
+                                        title="Remove from this entry"
+                                    ></Button>
+                                {/if}
+                                {#if showDelete}
+                                    <Button
+                                        class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+                                        variant="ghost"
+                                        size="icon"
+                                        onclick={() => handleDelete(entry.id)}
+                                        Icon={Trash}
+                                        title="Delete permanently"
+                                    ></Button>
+                                {/if}
                             {/if}
-                            {#if showDelete}
+                            {#if isRecordingMode && entry._recordingState}
                                 <Button
                                     class="h-6 w-6 text-muted-foreground hover:bg-transparent"
                                     variant="ghost"
                                     size="icon"
-                                    onclick={() => handleDelete(entry.id)}
-                                    Icon={Trash}
-                                    title="Delete permanently"
+                                    onclick={() => handleRevertRow(entry.id)}
+                                    Icon={RotateCcw}
+                                    title="Revert changes"
+                                    aria-label={`Revert changes for record ${entry.id}`}
                                 ></Button>
                             {/if}
                         {/snippet}

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

@@ -28,6 +28,7 @@
         showFilter?: boolean;
         loading?: boolean;
         left?: Snippet<[]>;
+        excludeIds?: (string | number)[];
     }
 
     let {
@@ -40,7 +41,8 @@
         showImport = true,
         showFilter = true,
         loading = false,
-        left
+        left,
+        excludeIds = [],
     }: Props = $props();
 
     function handleLink(record: any) {
@@ -169,13 +171,14 @@
             {collectionName}
             refresh={() => { params = { ...params }; }}
         />
-        {#if parentContext}
+        {#if parentContext || onLink}
             <SelectRecord
                 {collectionName}
                 variant="outline"
                 size="sm"
                 Icon={Link}
                 onSelect={handleLink}
+                additionalFilter={excludeIds.length > 0 ? { $and: excludeIds.map(id => ({ id: { $ne: id } })) } : {}}
             >
                 {headerIsSmall ? "" : "Link"}
             </SelectRecord>