@lobb-js/studio 0.28.5 → 0.29.0

package/dist/components/rangeCalendarButton.svelte

@@ -11,9 +11,9 @@
         today,
     } from "@internationalized/date";
     import { cn } from "../utils.js";
-    import { buttonVariants } from "../components/ui/button/index.js";
-    import { RangeCalendar } from "../components/ui/range-calendar/index.js";
-    import * as Popover from "../components/ui/popover/index.js";
+    import { buttonVariants } from "./ui/button/index.js";
+    import { RangeCalendar } from "./ui/range-calendar/index.js";
+    import * as Popover from "./ui/popover/index.js";
     import Input from "./ui/input/input.svelte";
 
     interface Props {

package/dist/components/routes/collections/collection.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
     import { CircleSlash2, Zap } from "lucide-svelte";
-    import DataTable from "../../../components/dataTable/dataTable.svelte";
-    import SidebarTrigger from "../../../components/sidebar/sidebarTrigger.svelte";
+    import DataTable from "../../dataTable/dataTable.svelte";
+    import SidebarTrigger from "../../sidebar/sidebarTrigger.svelte";
     import { getStudioContext } from "../../../context";
-    import Singletone from "../../../components/singletone.svelte";
+    import Singletone from "../../singletone.svelte";
 
     const { ctx } = getStudioContext();
 

package/dist/components/routes/collections/collections.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import type { SideBarData, SideBarNode } from "../../../components/sidebar/sidebarElements.svelte";
-    import Sidebar from "../../../components/sidebar/sidebar.svelte";
+    import type { SideBarData, SideBarNode } from "../../sidebar/sidebarElements.svelte";
+    import Sidebar from "../../sidebar/sidebar.svelte";
     import { getStudioContext } from "../../../context";
     import Collection from "./collection.svelte";
 

package/dist/components/routes/data_model/dataModel.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
     import { SvelteFlowProvider } from "@xyflow/svelte";
     import Flow from "./flow.svelte";
-    import Sidebar from "../../../components/sidebar/sidebar.svelte";
+    import Sidebar from "../../sidebar/sidebar.svelte";
     import { location } from "@wjfe/n-savant";
     import SyncManager from "./syncManager.svelte";
-    import SidebarTrigger from "../../../components/sidebar/sidebarTrigger.svelte";
+    import SidebarTrigger from "../../sidebar/sidebarTrigger.svelte";
 
     const currentPage = $derived(location.url.pathname.replace("/studio", "").split("/")[2]);
 </script>

package/dist/components/routes/data_model/syncManager.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-    import DiffViewer from "../../../components/diffViewer.svelte";
+    import DiffViewer from "../../diffViewer.svelte";
     import { getStudioContext } from "../../../context";
 
     const { lobb, ctx } = getStudioContext();
     import { onMount } from "svelte";
     import stringify from "json-stable-stringify";
-    import CodeEditor from "../../../components/codeEditor.svelte";
-    import Table from "../../../components/dataTable/table.svelte";
-    import Button from "../../../components/ui/button/button.svelte";
+    import CodeEditor from "../../codeEditor.svelte";
+    import Table from "../../dataTable/table.svelte";
+    import Button from "../../ui/button/button.svelte";
     import { LoaderCircle, SendHorizontal } from "lucide-svelte";
 
     let configSchema: string = $state("");

package/dist/components/routes/extensions/extension.svelte

@@ -1,5 +1,5 @@
 <script>
-    import ExtensionsComponents from "../../../components/extensionsComponents.svelte";
+    import ExtensionsComponents from "../../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../../extensions/extensionUtils";
     import { getStudioContext } from "../../../context";
 

package/dist/components/routes/home.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Button from "../../components/ui/button/button.svelte";
+    import Button from "../ui/button/button.svelte";
     import { location } from "@wjfe/n-savant";
     import { ArrowRight } from "lucide-svelte";
     import HomeFooter from "./homeFooter.svelte";

package/dist/components/routes/workflows/workflows.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-    import type { SideBarData, SideBarNode } from "../../../components/sidebar/sidebarElements.svelte";
+    import type { SideBarData, SideBarNode } from "../../sidebar/sidebarElements.svelte";
     import WorkflowEditor, {
         type WorkflowEntry,
-    } from "../../../components/workflowEditor.svelte";
+    } from "../../workflowEditor.svelte";
     import { getStudioContext } from "../../../context";
 
     const { lobb, ctx } = getStudioContext();
-    import Sidebar from "../../../components/sidebar/sidebar.svelte";
-    import Button from "../../../components/ui/button/button.svelte";
+    import Sidebar from "../../sidebar/sidebar.svelte";
+    import Button from "../../ui/button/button.svelte";
     import { location } from "@wjfe/n-savant";
     import { CircleSlash2, Plus, Trash2 } from "lucide-svelte";
     import { onMount } from "svelte";
     import { showDialog } from "../../../actions";
-    import SidebarTrigger from "../../../components/sidebar/sidebarTrigger.svelte";
+    import SidebarTrigger from "../../sidebar/sidebarTrigger.svelte";
 
     let { workflowName } = $props();
 

package/dist/components/selectRecord.svelte

@@ -3,7 +3,6 @@
 	import Button, { type ButtonProps } from "./ui/button/button.svelte";
 	import DataTable from "./dataTable/dataTable.svelte";
 	import { getCollectionPrimaryField } from "./dataTable/utils";
-	import { emitEvent } from "../eventSystem";
 	import { getStudioContext } from "../context";
   import Drawer from "./drawer.svelte";
 
@@ -36,26 +35,8 @@
 
 	let openDrawer = $state(false);
 
-	async function handleButtonClick() {
-		try {
-			const eventResult = await emitEvent(
-				{ lobb, ctx },
-				"studio.collections.preForeignKeySelect",
-				{
-					parentCollectionName,
-					collectionName,
-					fieldName,
-					entry,
-				},
-			);
-			if (eventResult.filter) {
-				additionalFilter = eventResult.filter;
-			}
-
-			openDrawer = true;
-		} catch (error) {
-			console.error(error);
-		}
+	function handleButtonClick() {
+		openDrawer = true;
 	}
 
 	async function onSelectHandler(entry: any) {

package/dist/components/setServerPage.svelte

@@ -2,7 +2,7 @@
 	import { toast } from "svelte-sonner";
 	import Button from "./ui/button/button.svelte";
 	import { getStudioContext } from "../context";
-	import { Input } from "../components/ui/input";
+	import { Input } from "./ui/input";
 
 	const { ctx } = getStudioContext();
 

package/dist/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { buttonVariants } from "../../../components/ui/button/index.js";
+	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
 	let {

package/dist/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { buttonVariants } from "../../../components/ui/button/index.js";
+	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
 	let {

package/dist/components/ui/command/command-dialog.svelte

@@ -6,7 +6,7 @@
 	} from "bits-ui";
 	import type { Snippet } from "svelte";
 	import Command from "./command.svelte";
-	import * as Dialog from "../../../components/ui/dialog/index.js";
+	import * as Dialog from "../dialog/index.js";
 
 	let {
 		open = $bindable(false),

package/dist/components/ui/range-calendar/range-calendar-day.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import { buttonVariants } from "../../../components/ui/button/index.js";
+	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
 	let {

package/dist/components/ui/range-calendar/range-calendar-next-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 	import ChevronRight from "@lucide/svelte/icons/chevron-right";
-	import { buttonVariants } from "../../../components/ui/button/index.js";
+	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 	let {
 		ref = $bindable(null),

package/dist/components/ui/range-calendar/range-calendar-prev-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 	import ChevronLeft from "@lucide/svelte/icons/chevron-left";
-	import { buttonVariants } from "../../../components/ui/button/index.js";
+	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 	let {
 		ref = $bindable(null),

package/dist/components/ui/select/select-separator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Separator as SeparatorPrimitive } from "bits-ui";
-	import { Separator } from "../../../components/ui/separator/index.js";
+	import { Separator } from "../separator/index.js";
 	import { cn } from "../../../utils.js";
 
 	let {

package/dist/components/workflowEditor.svelte

@@ -12,11 +12,11 @@
 
 <script lang="ts">
     import { getStudioContext } from "../context";
-    import CodeEditor from "../components/codeEditor.svelte";
+    import CodeEditor from "./codeEditor.svelte";
 
     const { lobb, ctx } = getStudioContext();
-    import Button from "../components/ui/button/button.svelte";
-    import Input from "../components/ui/input/input.svelte";
+    import Button from "./ui/button/button.svelte";
+    import Input from "./ui/input/input.svelte";
     import { location } from "@wjfe/n-savant";
     import { Edit, Plus } from "lucide-svelte";
     import { toast } from "svelte-sonner";

package/dist/store.types.d.ts

@@ -1,4 +1,4 @@
-import type { Extension } from "../extensions/extension.types";
+import type { Extension } from "./extensions/extension.types";
 interface CollectionTab {
     id?: string;
     label: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.28.5",
+  "version": "0.29.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -87,7 +87,7 @@
     "@codemirror/view": "^6.39.12",
     "@dagrejs/dagre": "^1.1.5",
     "@internationalized/date": "^3.12.0",
-    "@lobb-js/sdk": "^0.1.6",
+    "@lobb-js/sdk": "^0.2.0",
     "@lucide/svelte": "^0.563.1",
     "@tailwindcss/vite": "^4.3.0",
     "@tiptap/core": "^3.0.0",

package/src/lib/components/Studio.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-    import { Toaster } from "../components/ui/sonner";
+    import { Toaster } from "./ui/sonner";
     import { onMount, onDestroy } from "svelte";
     import { ModeWatcher } from "mode-watcher";
     import { createLobb } from "../store.svelte";
     import { setStudioContext } from "../context";
-    import Header from "../components/header.svelte";
+    import Header from "./header.svelte";
     import { LoaderCircle, ServerOff } from "lucide-svelte";
-    import MiniSidebar from "../components/miniSidebar.svelte";
-    import * as Tooltip from "../components/ui/tooltip";
+    import MiniSidebar from "./miniSidebar.svelte";
+    import * as Tooltip from "./ui/tooltip";
     import { Router, Route, Fallback, init as initRouter } from "@wjfe/n-savant";
     import {
         executeExtensionsOnStartup,
@@ -45,6 +45,9 @@
     let cleanupRouter: (() => void) | undefined;
 
     onMount(async () => {
+        // Remove the static loading screen defined in app.html — it shows instantly
+        // before JS loads to avoid a blank page, and is replaced by the Studio UI.
+        document.getElementById("app-loading")?.remove();
         cleanupRouter = initRouter();
         try {
             ctx.meta = await lobb.getMeta();

package/src/lib/components/combobox.svelte

@@ -2,9 +2,9 @@
     import CheckIcon from "@lucide/svelte/icons/check";
     import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
     import { tick } from "svelte";
-    import * as Command from "../components/ui/command/index.js";
-    import * as Popover from "../components/ui/popover/index.js";
-    import { Button } from "../components/ui/button/index.js";
+    import * as Command from "./ui/command/index.js";
+    import * as Popover from "./ui/popover/index.js";
+    import { Button } from "./ui/button/index.js";
     import { cn } from "../utils.js";
     import type { HTMLButtonAttributes } from "svelte/elements";
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as AlertDialog from "../../components/ui/alert-dialog/index";
+	import * as AlertDialog from "../ui/alert-dialog/index";
 	import { Check, X } from "lucide-svelte";
 	import Button from "../ui/button/button.svelte";
 

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,15 +14,14 @@
     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 Tabs from "./dataTableTabs.svelte";
@@ -41,7 +34,7 @@
         filter?: any;
         searchParams?: Record<string, any>;
         parentContext?: ParentContext;
-        onOperation?: (op: RecordOperation) => void;
+        changes?: ChildrenChanges;
         showHeader?: boolean;
         showFooter?: boolean;
         showImport?: boolean;
@@ -56,7 +49,7 @@
         filter,
         searchParams,
         parentContext,
-        onOperation,
+        changes = $bindable<ChildrenChanges | undefined>(undefined),
         showHeader = true,
         showFooter = true,
         showImport = true,
@@ -66,6 +59,46 @@
         headerLeft,
     }: Props = $props();
 
+    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 +122,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 +141,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,77 +150,43 @@
             }
         }
         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
@@ -209,7 +207,14 @@
     {/snippet}
 
     {#if showHeader}
-        <Header bind:params {collectionName} bind:selectedRecords {parentContext} {showImport} onOperation={onOperation ? applyOperation : undefined}>
+        <Header
+            bind:params
+            {collectionName}
+            bind:selectedRecords
+            {showImport}
+            {parentContext}
+            {changes}
+        >
             {#snippet left()}
                 {@render headerLeft?.()}
             {/snippet}
@@ -246,6 +251,7 @@
                                 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 };
                                 }}
@@ -270,20 +276,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

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";