@lobb-js/studio 0.28.6 → 0.29.1

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

@@ -4,12 +4,6 @@
         recordId: string | number;
     }
 
-    export type RecordOperation =
-        | { type: "link";   record: any }
-        | { type: "unlink"; id: string | number }
-        | { type: "delete"; id: string | number }
-        | { type: "create"; record: any }
-        | { type: "update"; id: string | number; data: any };
 </script>
 
 <script lang="ts">
@@ -20,19 +14,21 @@
     import Table, { type TableProps } from "./table.svelte";
     import { getCollectionColumns, getCollectionParamsFields } from "./utils";
     import { Pencil, Trash, Unlink } from "lucide-svelte";
-    import * as icons from "lucide-svelte";
     import ListViewChildren from "./listViewChildren.svelte";
     import FieldCell from "./fieldCell.svelte";
     import Skeleton from "../ui/skeleton/skeleton.svelte";
     import Button from "../ui/button/button.svelte";
     import { showDialog } from "../../actions";
     import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";
-    import { emitEvent } from "../../eventSystem";
     import type { Snippet } from "svelte";
+    import type { Changes, ChildrenChanges } from "../detailView/utils";
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils, loadExtensionComponents } from "../../extensions/extensionUtils";
+    import { emitEvent } from "../../eventSystem";
+    import { onMount } from "svelte";
     import Tabs from "./dataTableTabs.svelte";
     import { fade } from "svelte/transition";
+    import type { CollectionTab } from "../../store.types";
 
     const { lobb, ctx } = getStudioContext();
 
@@ -41,13 +37,13 @@
         filter?: any;
         searchParams?: Record<string, any>;
         parentContext?: ParentContext;
-        onOperation?: (op: RecordOperation) => void;
+        changes?: ChildrenChanges;
         showHeader?: boolean;
         showFooter?: boolean;
         showImport?: boolean;
-        unifiedBgColor?: "bg-muted/30" | "bg-background";
         showDelete?: boolean;
         tableProps?: Partial<TableProps>;
+        tabs?: CollectionTab[];
         headerLeft?: Snippet<[]>;
     }
 
@@ -56,16 +52,70 @@
         filter,
         searchParams,
         parentContext,
-        onOperation,
+        changes = $bindable<ChildrenChanges | undefined>(undefined),
         showHeader = true,
         showFooter = true,
         showImport = true,
-        unifiedBgColor,
         showDelete = false,
         tableProps,
+        tabs,
         headerLeft,
     }: Props = $props();
 
+    // Gate row/header buttons by the current user's permissions:
+    // - showUpdate → per-row edit button
+    // - showCreate → header's Create + Import buttons (passed to Header)
+    let showUpdate = $state(false);
+    let showCreate = $state(false);
+    onMount(async () => {
+        const [update, create] = await Promise.all([
+            emitEvent({ lobb, ctx }, "auth.canAccess", { collection: collectionName, action: "update" }),
+            emitEvent({ lobb, ctx }, "auth.canAccess", { collection: collectionName, action: "create" }),
+        ]);
+        showUpdate = update === true;
+        showCreate = create === true;
+    });
+
+    function getOrCreateUpdatedSlot(recordId: string): Changes | undefined {
+        if (!changes) return undefined;
+        let slot = changes.updated.find((u) => String(u.id) === String(recordId));
+        if (!slot) {
+            slot = { id: recordId, data: {}, children: {} };
+            changes.updated.push(slot);
+        }
+        return slot;
+    }
+
+    // Derives the displayed rows by applying changes on top of server data.
+    // This is the single place responsible for optimistic UI — no handler touches data directly.
+    const data = $derived.by(() => {
+        if (!changes) return serverData;
+
+        const removedIds = new Set([
+            ...changes.deleted.map((r) => String(r.id)),
+            ...changes.unlinked.map((r) => String(r.id)),
+        ]);
+
+        let result = serverData.filter((r: any) => !removedIds.has(String(r.id)));
+
+        result = result.map((r: any) => {
+            const update = changes.updated.find((u) => String(u.id) === String(r.id));
+            return update && Object.keys(update.data).length ? { ...r, ...update.data } : r;
+        });
+
+        for (const record of changes.linked) {
+            if (!result.some((r: any) => String(r.id) === String(record.id))) {
+                result = [...result, record];
+            }
+        }
+
+        for (const item of changes.created) {
+            result = [...result, { ...item.data, _pending: true }];
+        }
+
+        return result;
+    });
+
     const hasRowActions = $derived(
         loadExtensionComponents(ctx, "listView.entry.actions", undefined, { collectionName }).length > 0
     );
@@ -89,7 +139,7 @@
 
     let selectedRecords = $state([]);
     let totalCount = $state(0);
-    let data: TableProps["data"] = $state([]);
+    let serverData: TableProps["data"] = $state([]);
     let loading = $state(true);
     const columns: TableProps["columns"] = $state(
         getCollectionColumns(ctx, collectionName),
@@ -108,7 +158,6 @@
 
     async function loadData(params: any) {
         loading = true;
-        // parsing sort before sending the request
         const paramsCopy = $state.snapshot(params);
         const sort: TableProps["sort"] = paramsCopy.sort;
         const sortStrings: string[] = [];
@@ -118,85 +167,48 @@
             }
         }
         paramsCopy.sort = sortStrings.join(",");
-
-        // sending the request
         const response = await lobb.findAll(collectionName, paramsCopy);
         const res = await response.json();
-
-        data = res.data;
+        serverData = res.data;
         totalCount = res.meta.totalCount;
-
         loading = false;
     }
 
-    // Internal handler: updates data optimistically then calls onOperation
-    function applyOperation(op: RecordOperation) {
-        if (op.type === "link") {
-            data = [...data, op.record];
-        } else if (op.type === "unlink" || op.type === "delete") {
-            data = data.filter((r: any) => String(r.id) !== String(op.id));
-        } else if (op.type === "create") {
-            data = [...data, { ...op.record, _pending: true }];
-        } else if (op.type === "update") {
-            data = data.map((r: any) => String(r.id) === String(op.id) ? { ...r, ...op.data } : r);
-        }
-        onOperation?.(op);
-    }
-
     async function handleDelete(entryId: string) {
         const result = await showDialog("Are you sure?", "This will permanently delete the record.");
-        if (result) {
-            if (onOperation) {
-                applyOperation({ type: "delete", id: entryId });
-            } else if (parentContext) {
-                await lobb.updateOne(parentContext.collectionName, String(parentContext.recordId), {}, { [collectionName]: { delete: [entryId] } });
-                params = { ...params };
-            } else {
-                await lobb.deleteOne(collectionName, entryId);
-                params = { ...params };
-            }
+        if (!result) return;
+        if (changes) {
+            const record = data.find((r: any) => String(r.id) === String(entryId));
+            if (record) changes.deleted.push($state.snapshot(record));
+        } else if (parentContext) {
+            serverData = serverData.filter((r: any) => String(r.id) !== String(entryId));
+            await lobb.updateOne(parentContext.collectionName, String(parentContext.recordId), {}, { [collectionName]: { delete: [entryId] } });
+            params = { ...params };
+        } else {
+            serverData = serverData.filter((r: any) => String(r.id) !== String(entryId));
+            await lobb.deleteOne(collectionName, entryId);
+            params = { ...params };
         }
     }
 
     async function handleUnlink(entryId: string) {
         const result = await showDialog("Are you sure?", "This will unlink the record without deleting it.");
-        if (result) {
-            if (onOperation) {
-                applyOperation({ type: "unlink", id: entryId });
-            } else {
-                await lobb.updateOne(parentContext!.collectionName, String(parentContext!.recordId), {}, { [collectionName]: { unlink: [entryId] } });
-                params = { ...params };
-            }
+        if (!result) return;
+        if (changes) {
+            const record = data.find((r: any) => String(r.id) === String(entryId));
+            if (record) changes.unlinked.push($state.snapshot(record));
+        } else {
+            serverData = serverData.filter((r: any) => String(r.id) !== String(entryId));
+            await lobb.updateOne(parentContext!.collectionName, String(parentContext!.recordId), {}, { [collectionName]: { unlink: [entryId] } });
+            params = { ...params };
         }
     }
 
-    async function getWorkflowTools(
-        entry: Record<string, any>,
-    ): Promise<any[]> {
-        // TODO: instead of firing the events like this. get them all the fire them one by one to get their results
-        const eventResult = await emitEvent(
-            { lobb, ctx },
-            "studio.collections.listView.tools",
-            {
-                collectionName,
-                entry,
-            },
-        );
-
-        if (eventResult) {
-            return eventResult.tools;
-        }
-
-        return [];
-    }
 </script>
 
 <div
     bind:clientWidth={dataTableContainerWidth}
-    class="
-        flex flex-col overflow-auto h-full w-full
-        {unifiedBgColor ? unifiedBgColor : ''}
-    "
+    class="flex flex-col overflow-auto h-full w-full"
 >
     {#snippet rowActionsSnippet(entry: Record<string, any>)}
         <ExtensionsComponents
@@ -209,13 +221,21 @@
     {/snippet}
 
     {#if showHeader}
-        <Header bind:params {collectionName} bind:selectedRecords {parentContext} {showImport} onOperation={onOperation ? applyOperation : undefined}>
+        <Header
+            bind:params
+            {collectionName}
+            bind:selectedRecords
+            {showImport}
+            {showCreate}
+            {parentContext}
+            {changes}
+        >
             {#snippet left()}
                 {@render headerLeft?.()}
             {/snippet}
         </Header>
     {/if}
-    <Tabs {collectionName} {filter} bind:activeTabFilter />
+    <Tabs {collectionName} {filter} {tabs} bind:activeTabFilter />
     <div class="relative flex-1 overflow-auto w-full">
         {#key activeTabFilter}
             <div class="h-full w-full" in:fade={{ duration: 120 }}>
@@ -235,21 +255,23 @@
                         showLastColumnBorder={true}
                         bind:sort={params.sort}
                         bind:selectedRecords
-                        {unifiedBgColor}
                         bind:tableWidth={dataTableWidth}
                         {...tableProps}
                         rowActions={hasRowActions ? rowActionsSnippet : undefined}>
                         {#snippet tools(entry)}
-                            <UpdateDetailViewButton
-                                {collectionName}
-                                recordId={entry.id}
-                                variant="ghost"
-                                class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
-                                Icon={Pencil}
-                                onSuccessfullSave={async () => {
-                                    params = { ...params };
-                                }}
-                            ></UpdateDetailViewButton>
+                            {#if showUpdate}
+                                <UpdateDetailViewButton
+                                    {collectionName}
+                                    recordId={entry.id}
+                                    variant="ghost"
+                                    class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
+                                    Icon={Pencil}
+                                    changes={getOrCreateUpdatedSlot(String(entry.id))}
+                                    onSuccessfullSave={async () => {
+                                        params = { ...params };
+                                    }}
+                                ></UpdateDetailViewButton>
+                            {/if}
                             {#if parentContext}
                                 <Button
                                     class="h-6 w-6 text-muted-foreground hover:bg-transparent"
@@ -270,20 +292,6 @@
                                     title="Delete permanently"
                                 ></Button>
                             {/if}
-                            {#await getWorkflowTools($state.snapshot(entry))}
-                                <div></div>
-                            {:then workflowTools}
-                                {#each workflowTools as workflowTool}
-                                    <Button
-                                        variant="ghost"
-                                        class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
-                                        Icon={icons[
-                                            workflowTool.icon as keyof typeof icons
-                                        ]}
-                                        onclick={workflowTool.onclick}
-                                    ></Button>
-                                {/each}
-                            {/await}
                         {/snippet}
                         {#snippet overrideCell(value, column, entry)}
                             <FieldCell
@@ -301,7 +309,6 @@
                                 width={dataTableWidth > dataTableContainerWidth
                                     ? dataTableContainerWidth
                                     : dataTableWidth}
-                                unifiedBgColor={unifiedBgColor ?? "bg-background"}
                             />
                         {/snippet}
                     </Table>

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

@@ -1,17 +1,19 @@
 <script lang="ts">
     import { getStudioContext } from "../../context";
+    import type { CollectionTab } from "../../store.types";
 
     const { lobb, ctx } = getStudioContext();
 
     interface Props {
         collectionName: string;
         filter?: any;
+        tabs?: CollectionTab[];
         activeTabFilter?: any;
     }
 
-    let { collectionName, filter, activeTabFilter = $bindable() }: Props = $props();
+    let { collectionName, filter, tabs: tabsProp, activeTabFilter = $bindable() }: Props = $props();
 
-    const tabs = ctx.meta.collections[collectionName].ui?.tabs;
+    const tabs: CollectionTab[] | undefined = $derived(tabsProp ?? ctx.meta.collections[collectionName].ui?.tabs);
     let activeTab = $state<string | null>(null);
     let tabCounts = $state<Record<string, number>>({});
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import * as Popover from "../../components/ui/popover/index.js";
+    import * as Popover from "../ui/popover/index.js";
     import Filter from "./filter.svelte";
     import {
         Plus,

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Popover from "../../components/ui/popover/index.js";
+	import * as Popover from "../ui/popover/index.js";
 	import { ListFilter } from "lucide-svelte";
 	import { buttonVariants } from "../ui/button";
 	import Filter from "./filter.svelte";

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

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { getStudioContext } from "../../context";
-
-    const { lobb, ctx } = getStudioContext();
+    import type { Changes, ChildrenChanges } from "../detailView/utils";
+    import type { ParentContext } from "./dataTable.svelte";
     import { Download, ListRestart, Plus, Trash, Link } from "lucide-svelte";
     import * as Tooltip from "../ui/tooltip";
     import LlmButton from "../LlmButton.svelte";
@@ -15,15 +15,17 @@
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../extensions/extensionUtils";
     import type { Snippet } from "svelte";
-    import type { ParentContext, RecordOperation } from "./dataTable.svelte";
+
+    const { lobb, ctx } = getStudioContext();
 
     interface Props {
         collectionName: string;
         params: any;
         selectedRecords: string[];
         parentContext?: ParentContext;
-        onOperation?: (op: RecordOperation) => void;
+        changes?: ChildrenChanges;
         showImport?: boolean;
+        showCreate?: boolean;
         left?: Snippet<[]>;
     }
 
@@ -32,37 +34,28 @@
         params = $bindable(),
         selectedRecords = $bindable(),
         parentContext,
-        onOperation,
+        changes,
         showImport = true,
+        showCreate = false,
         left
     }: Props = $props();
 
-    async function handleLink(selected: any) {
-        if (!parentContext) return;
-        if (onOperation) {
-            onOperation({ type: "link", record: selected });
-        } else {
-            await lobb.updateOne(
-                parentContext.collectionName,
-                String(parentContext.recordId),
-                {},
-                { [collectionName]: { link: [selected.id] } },
-            );
+    // Local changes object for the create form (recording mode only)
+    let createChanges = $state<Changes>({ data: {}, children: {} });
+
+    function handleLink(record: any) {
+        if (changes) {
+            changes.linked.push(record);
+        } else if (parentContext) {
+            lobb.updateOne(parentContext.collectionName, String(parentContext.recordId), {}, { [collectionName]: { link: [record.id] } });
             resetTable();
         }
     }
 
-    async function handleChildCreate(formData: any) {
-        if (!parentContext) return;
-        if (onOperation) {
-            onOperation({ type: "create", record: formData });
+    async function handleCreateSuccess(snap: any) {
+        if (changes) {
+            changes.created.push({ data: snap.data });
         } else {
-            await lobb.updateOne(
-                parentContext.collectionName,
-                String(parentContext.recordId),
-                {},
-                { [collectionName]: { create: [formData] } },
-            );
             resetTable();
         }
     }
@@ -176,7 +169,7 @@
         >
             {headerIsSmall ? "" : "Refresh"}
         </Button>
-        {#if showImport}
+        {#if showImport && showCreate}
             <Tooltip.Provider delayDuration={0}>
                 <Tooltip.Root>
                     <Tooltip.Trigger>
@@ -199,34 +192,24 @@
             refresh={() => { params = { ...params }; }}
         />
         {#if parentContext}
-            {#if parentContext}
-                <SelectRecord
-                    {collectionName}
-                    variant="outline"
-                    class="h-7 px-3 text-xs font-normal"
-                    Icon={Link}
-                    onSelect={handleLink}
-                >
-                    {headerIsSmall ? "" : "Link"}
-                </SelectRecord>
-            {/if}
-            <CreateDetailViewButton
+            <SelectRecord
                 {collectionName}
-                variant="default"
+                variant="outline"
                 class="h-7 px-3 text-xs font-normal"
-                Icon={Plus}
-                rollback={true}
-                onSuccessfullSave={handleChildCreate}
+                Icon={Link}
+                onSelect={handleLink}
             >
-                {headerIsSmall ? "" : "Create"}
-            </CreateDetailViewButton>
-        {:else}
+                {headerIsSmall ? "" : "Link"}
+            </SelectRecord>
+        {/if}
+        {#if showCreate}
             <CreateDetailViewButton
                 {collectionName}
                 variant="default"
                 class="h-7 px-3 text-xs font-normal"
                 Icon={Plus}
-                onSuccessfullSave={() => (params = { ...params })}
+                changes={changes ? createChanges : undefined}
+                onSuccessfullSave={handleCreateSuccess}
             >
                 {headerIsSmall ? "" : "Create"}
             </CreateDetailViewButton>

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

@@ -12,10 +12,9 @@
         collectionName: string;
         recordId: string;
         width: number;
-        unifiedBgColor?: "bg-muted/30" | "bg-background";
     }
 
-    let { collectionName, recordId, width, unifiedBgColor }: Props = $props();
+    let { collectionName, recordId, width }: Props = $props();
 
     const children = (ctx.meta.collections[collectionName]?.children ?? [])
         .filter((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic");
@@ -27,13 +26,13 @@
 
 <div class="flex" style="width: {width}px;">
     <div
-        class="flex justify-center border-r {unifiedBgColor ? unifiedBgColor : 'bg-background'}"
+        class="flex justify-center border-r bg-background"
         style="width: 40px"
     ></div>
     <div class="flex-1 flex flex-col">
         {#each children as child, index}
             {@const lastRow = children.length - 1 === index}
-            <div class="overflow-hidden {unifiedBgColor ? unifiedBgColor : 'bg-background'}">
+            <div class="overflow-hidden bg-background">
                 <div
                     bind:clientWidth={tableHeaderWidth}
                     class="flex justify-between items-center gap-2 text-sm h-10 {expandedRows[index] || !lastRow ? 'border-b' : ''}"
@@ -75,7 +74,7 @@
                 {#if expandedRows[index]}
                     <div class="flex max-h-96 overflow-auto {lastRow ? '' : 'border-b'}">
                         <div
-                            class="border-r {unifiedBgColor ? unifiedBgColor : ''}"
+                            class="border-r"
                             style="width: 100vw; max-width: 40px"
                         ></div>
                         <div class="flex-1" style="width: {tableHeaderWidth - 40}px;">
@@ -92,7 +91,6 @@
                                         showHeader={false}
                                         showFooter={false}
                                         showDelete={child.type === "fk"}
-                                        {unifiedBgColor}
                                         tableProps={{ showLastRowBorder: false, showLastColumnBorder: false, showCheckboxes: false }}
                                     />
                                 </ExtensionsComponents>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
     import * as _ from "lodash-es";
 
-    import * as Popover from "../../components/ui/popover/index.js";
+    import * as Popover from "../ui/popover/index.js";
     import { ArrowDown, ArrowUp, GripVertical, Plus, X } from "lucide-svelte";
     import Button, { buttonVariants } from "../ui/button/button.svelte";
     import Label from "../ui/label/label.svelte";

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import * as Popover from "../../components/ui/popover/index.js";
+	import * as Popover from "../ui/popover/index.js";
 	import { ArrowDownWideNarrow } from "lucide-svelte";
-	import { buttonVariants } from "../../components/ui/button";
+	import { buttonVariants } from "../ui/button";
 	import Sort from "./sort.svelte";
 
 	interface Props {

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

@@ -38,7 +38,6 @@
 
 		// other
 		parentWidth?: number;
-		unifiedBgColor?: "bg-muted/30" | "bg-background";
 		select?: Select;
 		tableWidth?: number;
 	}
@@ -77,7 +76,6 @@
 		tools,
 		rowActions,
 		collapsible,
-		unifiedBgColor,
 		select,
 		tableWidth = $bindable(),
 	}: TableProps = $props();
@@ -184,7 +182,7 @@
 				flex items-center p-2.5 text-xs h-10
 				border-r border-b gap-2
 				{headerBorderTop ? 'border-t' : ''}
-				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
+				bg-muted-soft
 			"
 		>
 			<!-- collapsable toggle -->
@@ -209,7 +207,7 @@
 			class="
 				sticky top-0 z-10
 				flex items-center p-2.5 text-xs h-10
-				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
+				bg-muted-soft
 				{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
 				border-b gap-2
 				{headerBorderTop ? 'border-t' : ''}
@@ -236,7 +234,7 @@
 			class="
 				sticky top-0 right-0 z-20
 				flex items-center p-2.5 h-10
-				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
+				bg-muted-soft
 				border-l border-b
 				{headerBorderTop ? 'border-t' : ''}
 			"
@@ -251,7 +249,7 @@
 					class="
 						sticky left-0
 						flex items-center p-2.5 text-xs h-10
-						{unifiedBgColor ? unifiedBgColor : 'bg-background'}
+						bg-background
 						border-r gap-2
 					"
 				>
@@ -298,7 +296,7 @@
 					class="
 						flex items-center p-2.5 text-xs h-10 text-nowrap overflow-clip
 						{select ? 'cursor-pointer' : ''}
-						{unifiedBgColor ? unifiedBgColor : 'bg-background'}
+						bg-background
 						{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
 					"
 				>
@@ -315,7 +313,7 @@
 						sticky right-0 z-10
 						flex items-center p-2.5 text-xs h-10
 						border-l gap-2
-						{unifiedBgColor ? unifiedBgColor : 'bg-background'}
+						bg-background
 					"
 				>
 					{@render rowActions?.(entry, index)}
@@ -336,8 +334,8 @@
 						{expandedRows[index] ? '' : 'height: 0px;'}
 					"
 					class="
-						sticky left-0 top-0 overflow-auto bg-muted/30
-						{unifiedBgColor ? unifiedBgColor : ''}
+						sticky left-0 top-0 overflow-auto bg-muted-soft
+						
 						{expandedRows[index] ? 'border-t' : ''}
 					"
 				>