@lobb-js/studio 0.41.0 → 0.42.0

package/dist/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/dist/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/dist/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>

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

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

package/dist/components/dataTable/table.svelte

@@ -41,6 +41,9 @@
 		parentWidth?: number;
 		select?: Select;
 		tableWidth?: number;
+
+		// recording mode row visuals — cellIndex 0 = tools cell, 1+ = data/action cells
+		onCellClass?: (entry: Entry, cellIndex: number) => string;
 	}
 </script>
 
@@ -79,6 +82,7 @@
 		collapsible,
 		select,
 		tableWidth = $bindable(),
+		onCellClass,
 	}: TableProps = $props();
 
 	let expandedRows: boolean[] = $state(new Array(data.length).fill(false));
@@ -183,7 +187,7 @@
 				flex items-center p-2.5 text-xs h-10
 				border-r border-b gap-2
 				{headerBorderTop ? 'border-t' : ''}
-				bg-muted
+				bg-muted/50
 			"
 		>
 			<!-- collapsable toggle -->
@@ -208,7 +212,7 @@
 			class="
 				sticky top-0 z-10
 				flex items-center p-2.5 text-xs h-10
-				bg-muted
+				bg-muted/50
 				{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
 				border-b gap-2
 				{headerBorderTop ? 'border-t' : ''}
@@ -235,7 +239,7 @@
 			class="
 				sticky top-0 right-0 z-20
 				flex items-center p-2.5 h-10
-				bg-muted
+				bg-muted/50
 				border-l border-b
 				{headerBorderTop ? 'border-t' : ''}
 			"
@@ -247,12 +251,7 @@
 			{@const lastRow = data.length - 1 === index}
 			{#if selectedRecords || tools}
 				<div
-					class="
-						sticky left-0
-						flex items-center p-2.5 text-xs h-10
-						bg-card
-						border-r gap-2
-					"
+					class="sticky left-0 flex items-center p-2.5 text-xs h-10 bg-card border-r gap-2 {onCellClass?.(entry, 0) ?? ''}"
 				>
 					<!-- collapsable toggle -->
 					{#if showCollapsible}
@@ -294,12 +293,7 @@
 					onclick={() => {
 						select?.onSelect(entry);
 					}}
-					class="
-						flex items-center p-2.5 text-xs h-10 text-nowrap overflow-clip
-						{select ? 'cursor-pointer hover:bg-accent' : ''}
-						bg-card
-						{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
-					"
+					class="flex items-center p-2.5 text-xs h-10 text-nowrap overflow-clip bg-card {select ? 'cursor-pointer hover:bg-accent' : ''} {lastColumn && !showLastColumnBorder ? '' : 'border-r'} {onCellClass?.(entry, index + 1) ?? ''}"
 				>
 					{#if overrideCell}
 						{@render overrideCell(fieldValue, column, entry)}
@@ -310,12 +304,7 @@
 			{/each}
 			{#if rowActions}
 				<div
-					class="
-						sticky right-0 z-10
-						flex items-center p-2.5 text-xs h-10
-						border-l gap-2
-						bg-card
-					"
+					class="sticky right-0 z-10 flex items-center p-2.5 text-xs h-10 border-l gap-2 bg-card {onCellClass?.(entry, columns.length + 1) ?? ''}"
 				>
 					{@render rowActions?.(entry, index)}
 				</div>

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

@@ -27,6 +27,7 @@ export interface TableProps {
     parentWidth?: number;
     select?: Select;
     tableWidth?: number;
+    onCellClass?: (entry: Entry, cellIndex: number) => string;
 }
 import type { Snippet } from "svelte";
 declare const Table: import("svelte").Component<TableProps, {}, "sort" | "selectedRecords" | "tableWidth">;

package/dist/components/detailView/create/createDetailView.svelte

@@ -14,6 +14,7 @@
         submitButton?: SubmitButton;
         title?: Snippet<[string]>;
         onSuccessfullSave?: (entry: any) => Promise<void>;
+        onCreated?: (record: any) => Promise<void>;
         onCancel?: () => Promise<void>;
         onChanges?: (changes: Changes) => void;
     }
@@ -25,6 +26,8 @@
     import { getStudioContext } from "../../../context";
     import { toast } from "svelte-sonner";
     import { untrack } from "svelte";
+    import type { ChildrenChanges } from "../utils";
+    import { showDialog } from "../../../actions";
 
     const { lobb, ctx } = getStudioContext();
     import CreateDetailViewChildren from "./createDetailViewChildren.svelte";
@@ -38,6 +41,7 @@
         showRelatedRecords = true,
         onCancel,
         onSuccessfullSave,
+        onCreated,
         title,
         submitButton,
         onChanges,
@@ -46,6 +50,31 @@
     const isRecordingMode = onChanges !== undefined;
     let changes = $state<Changes>({ data: {}, children: {} });
 
+    const totalChangeCount = $derived.by(() => {
+        let count = Object.keys(changes.data).length;
+        for (const ch of Object.values(changes.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(changes.children).some((ch: ChildrenChanges) =>
+            ch.created.length || ch.linked.length
+        )
+    );
+
+    const changeSummaryLines = $derived.by(() => {
+        const lines: string[] = [];
+        const fieldCount = Object.keys(changes.data).length;
+        if (fieldCount > 0) lines.push(`${fieldCount} field${fieldCount > 1 ? 's' : ''} filled`);
+        for (const [col, ch] of Object.entries(changes.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}`);
+        }
+        return lines;
+    });
+
     const fieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
     let values = $state(getDefaultEntry(ctx, fieldNames, collectionName, passedValues));
     let fieldsErrors: Record<string, any> = $state({});
@@ -82,17 +111,27 @@
     }
 
     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(changes);
         const response = await lobb.createOne(collectionName, buildPayload(snap), undefined, isRecordingMode);
 
         if (response.status === 204) {
             onChanges?.(snap);
             if (onSuccessfullSave) await onSuccessfullSave(snap);
+            await onCreated?.(snap.data);
             toast.success(`The record was successfully created`);
             handleCancel();
             return;
         }
 
+        let createdRecord: any = null;
         if (!response.bodyUsed) {
             const result = await response.json();
             if (response.status >= 400) {
@@ -104,10 +143,12 @@
                     return;
                 }
             }
+            createdRecord = result.data ?? result;
         }
 
         onChanges?.(snap);
         if (onSuccessfullSave) await onSuccessfullSave(snap);
+        await onCreated?.(createdRecord ?? snap.data);
         toast.success(`The record was successfully created`);
         onCancel?.();
     }
@@ -152,9 +193,10 @@
                 variant="default"
                 size="sm"
                 Icon={submitButton?.icon ? submitButton.icon : Plus}
+                aria-label={submitButton?.text ?? "Create record"}
                 onclick={handleSave}
             >
-                {submitButton?.text ? submitButton.text : "Create"}
+                {submitButton?.text ?? "Create"}{totalChangeCount > 0 ? ` (${totalChangeCount})` : ''}
             </Button>
         </div>
     </div>

package/dist/components/detailView/create/createDetailView.svelte.d.ts

@@ -11,6 +11,7 @@ export interface CreateDetailViewProp {
     submitButton?: SubmitButton;
     title?: Snippet<[string]>;
     onSuccessfullSave?: (entry: any) => Promise<void>;
+    onCreated?: (record: any) => Promise<void>;
     onCancel?: () => Promise<void>;
     onChanges?: (changes: Changes) => void;
 }