@lobb-js/studio 0.28.5 → 0.29.0

package/src/lib/components/detailView/update/updateDetailView.svelte

@@ -9,31 +9,32 @@
         recordId: string;
         values?: Record<string, any>;
         showRelatedRecords?: boolean;
-        rollback?: boolean;
         submitButton?: SubmitButton;
         title?: Snippet<[string]>;
         onSuccessfullSave?: (entry: any) => Promise<void>;
         onCancel?: () => Promise<void>;
+        changes?: import("../utils").Changes | undefined;
     }
 </script>
 
 <script lang="ts">
     import { ArrowLeft, Pencil, X } from "lucide-svelte";
-    import Button from "../../../components/ui/button/button.svelte";
-    import { fade, fly } from "svelte/transition";
+    import Button from "../../ui/button/button.svelte";
     import { getStudioContext } from "../../../context";
     import { toast } from "svelte-sonner";
     import ExtensionsComponents from "../../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../../extensions/extensionUtils";
+    import { untrack } from "svelte";
 
     const { lobb, ctx } = getStudioContext();
-    import { calculateDrawerWidth, getChangedProperties } from "../../../utils";
+    import { getChangedProperties } from "../../../utils";
     import { getField, getFieldIcon } from "../../dataTable/utils";
-    import DetailViewChildren from "../update/detailViewChildren.svelte";
+    import DetailViewChildren from "./detailViewChildren.svelte";
     import type { Snippet } from "svelte";
     import { getDefaultEntry } from "../utils";
+    import type { Changes, ChildrenChanges } from "../utils";
     import FieldInput from "../fieldInput.svelte";
-  import Drawer from "../../../components/drawer.svelte";
+    import Drawer from "../../drawer.svelte";
 
     let {
         collectionName,
@@ -44,29 +45,74 @@
         title,
         submitButton,
         recordId,
+        changes = $bindable<Changes | undefined>(undefined),
     }: UpdateDetailViewProp = $props();
 
+    // Internal changes — used when not in recording mode, passed down to children
+    let _changes = $state<Changes>({ data: {}, children: {} });
+
+    // Recording mode = changes was passed from a parent component
+    const isRecordingMode = $derived(changes !== undefined);
+
     const fieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
     let entry: Record<string, any> = $state(
         getDefaultEntry(ctx, fieldNames, collectionName, values),
     );
     const initialEntry = $state.snapshot(entry);
-    let localEntry = $derived(
-        getChangedProperties(initialEntry, $state.snapshot(entry)),
-    );
     let fieldsErrors: Record<string, any> = $state({});
-    let pendingChildren = $state<Record<string, any>>({});
+
+    // Tracks field edits into the active changes object.
+    // Child ops (create/link/unlink/delete) are written directly by DataTable into changes.children.
+    $effect(() => {
+        const currentEntrySnap = $state.snapshot(entry);
+
+        untrack(() => {
+            const target = changes ?? _changes;
+            target.data = getChangedProperties(initialEntry, currentEntrySnap);
+
+            if (!isRecordingMode) {
+                console.log(`[${collectionName}] changes:`, $state.snapshot(target));
+            }
+        });
+    });
+
+    function buildApiChildren(children: Record<string, ChildrenChanges>): Record<string, any> | undefined {
+        const result: Record<string, any> = {};
+        for (const [collection, ops] of Object.entries(children)) {
+            const hasOps = ops.created.length || ops.deleted.length || ops.linked.length || ops.unlinked.length;
+            if (!hasOps) continue;
+            result[collection] = {
+                ...(ops.created.length ? { create: ops.created.map((c) => c.data) } : {}),
+                ...(ops.deleted.length ? { delete: ops.deleted.map((r) => r.id) } : {}),
+                ...(ops.linked.length ? { link: ops.linked.map((r) => r.id) } : {}),
+                ...(ops.unlinked.length ? { unlink: ops.unlinked.map((r) => r.id) } : {}),
+            };
+        }
+        return Object.keys(result).length ? result : undefined;
+    }
+
+    function handleCancel() {
+        if (changes !== undefined) {
+            changes.data = {};
+            changes.children = {};
+        }
+        onCancel?.();
+    }
 
     async function handleSave() {
-        delete localEntry.id;
+        const target = changes ?? _changes;
+        const snap = $state.snapshot(target);
+        const { id: _id, ...data } = snap.data;
+        const children = buildApiChildren(snap.children);
 
-        const children = Object.keys(pendingChildren).length ? pendingChildren : undefined;
-        const response = await lobb.updateOne(
-            collectionName,
-            recordId,
-            localEntry,
-            children,
-        );
+        const response = await lobb.updateOne(collectionName, recordId, data, children, isRecordingMode);
+
+        if (response.status === 204) {
+            if (onSuccessfullSave) await onSuccessfullSave(snap);
+            toast.success(`The record was successfully updated`);
+            onCancel?.();
+            return;
+        }
 
         if (!response.bodyUsed) {
             const result = await response.json();
@@ -80,22 +126,34 @@
             }
         }
 
-        // close detailView side bar
-        if (onSuccessfullSave) {
-            await onSuccessfullSave(localEntry);
+        // Real mode: also fire separate update requests for edited children
+        if (!isRecordingMode) {
+            for (const [collection, ops] of Object.entries(snap.children)) {
+                for (const updated of ops.updated) {
+                    await lobb.updateOne(collection, String(updated.id), updated.data);
+                }
+            }
         }
 
+        if (onSuccessfullSave) await onSuccessfullSave(snap);
         toast.success(`The record was successfully updated`);
-
         onCancel?.();
     }
+
+    const activeChanges = $derived(changes ?? _changes);
+    const hasChanges = $derived(
+        Object.keys(activeChanges.data).length > 0 ||
+        Object.values(activeChanges.children).some(
+            (c) => c.created.length || c.updated.length || c.deleted.length || c.linked.length || c.unlinked.length,
+        ),
+    );
 </script>
 
-<Drawer onHide={onCancel}>
+<Drawer onHide={handleCancel}>
     <div class="flex h-12 items-center gap-4 border-b px-4">
         <Button
             variant="outline"
-            onclick={onCancel}
+            onclick={handleCancel}
             class=" h-8 w-8 rounded-full text-xs font-normal"
             Icon={ArrowLeft}
         ></Button>
@@ -145,14 +203,14 @@
             {/each}
         </div>
         {#if showRelatedRecords}
-            <DetailViewChildren {collectionName} {entry} bind:pendingChildren />
+            <DetailViewChildren {collectionName} {entry} {activeChanges} />
         {/if}
     </div>
     <div class="flex h-12 items-center justify-end gap-2 border-t px-4">
         <div class="flex gap-3">
             <Button
                 variant="outline"
-                onclick={onCancel}
+                onclick={handleCancel}
                 class="h-7 px-3 text-xs font-normal"
                 Icon={X}
             >
@@ -163,7 +221,7 @@
                 class="h-7 px-3 text-xs font-normal"
                 Icon={submitButton?.icon ? submitButton.icon : Pencil}
                 onclick={handleSave}
-                disabled={!Object.keys(localEntry).length && !Object.keys(pendingChildren).length}
+                disabled={!hasChanges}
             >
                 {submitButton?.text ? submitButton.text : "Update"}
             </Button>

package/src/lib/components/detailView/update/updateDetailViewButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { UpdateDetailViewProp } from "./updateDetailView.svelte";
-	import type { ButtonProps } from "../../../components/ui/button/button.svelte";
-	import Button from "../../../components/ui/button/button.svelte";
+	import type { ButtonProps } from "../../ui/button/button.svelte";
+	import Button from "../../ui/button/button.svelte";
 	import UpdateDetailView from "./updateDetailView.svelte";
 	import { getStudioContext } from "../../../context";
 
@@ -46,6 +46,7 @@
 	<UpdateDetailView
 		{...props}
 		{values}
+		changes={props.changes}
 		onCancel={async () => {
 			open = false;
 			values = undefined;

package/src/lib/components/detailView/utils.ts

@@ -3,6 +3,19 @@ import type { CTX } from "../../store.types";
 import { getField } from "../dataTable/utils";
 import type { DetailFormField } from "./detailViewForm.svelte";
 
+export type ChildrenChanges = {
+    created: Array<{ data: Record<string, any> }>;
+    updated: Array<{ id: string | number; data: Record<string, any>; children: Record<string, ChildrenChanges> }>;
+    deleted: Array<Record<string, any>>;
+    linked: Array<Record<string, any>>;
+    unlinked: Array<Record<string, any>>;
+};
+
+export type Changes = {
+    data: Record<string, any>;
+    children: Record<string, ChildrenChanges>;
+};
+
 export function getDefaultEntry(ctx: CTX, fieldNames: string[], collectionName: string, values?: Record<string, any>) {
     return Object.fromEntries(
         fieldNames.map((fieldName) => {

package/src/lib/components/miniSidebar.svelte

@@ -12,10 +12,10 @@
 
 <script lang="ts">
 	import { House, Layers, Library, Workflow, X } from "lucide-svelte";
-	import Button from "../components/ui/button/button.svelte";
-	import Separator from "../components/ui/separator/separator.svelte";
-	import * as Tooltip from "../components/ui/tooltip";
-	import * as Accordion from "../components/ui/accordion/index.js";
+	import Button from "./ui/button/button.svelte";
+	import Separator from "./ui/separator/separator.svelte";
+	import * as Tooltip from "./ui/tooltip";
+	import * as Accordion from "./ui/accordion/index.js";
 
 	import { getStudioContext } from "../context";
 	import { getDashboardNavs } from "../extensions/extensionUtils";

package/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/store.types.ts

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

package/vite-plugins/index.js

@@ -1,12 +1,10 @@
-import { contextualLibAlias } from "./contextual-lib-alias.js";
-import { lobbWorkspaceOptimize } from "./workspace-optimize.js";
+import { lobbWorkspaceFsAllow } from "./workspace-fs-allow.js";
 import { lobbExtensionsPlugin } from "./lobb-extensions.js";
 import { lobbProxyPlugin } from "./lobb-proxy.js";
 
 export function lobbStudioPlugins() {
   return [
-    contextualLibAlias(),
-    lobbWorkspaceOptimize(),
+    lobbWorkspaceFsAllow(),
     lobbExtensionsPlugin(),
     lobbProxyPlugin(),
   ];

package/vite-plugins/lobb-extensions.js

@@ -13,6 +13,18 @@ export function lobbExtensionsPlugin() {
 
   return {
     name: "lobb-studio-extensions",
+    // The dep optimizer's bundler doesn't run our resolveId/load hooks, so any
+    // package whose prebundled output references this virtual module would
+    // crash with "Failed to resolve". Excluding the bare virtual ID tells the
+    // optimizer to leave the import statement untouched, so the browser asks
+    // the dev server for it at runtime — where the hooks below actually fire.
+    config() {
+      return {
+        optimizeDeps: {
+          exclude: [virtualModuleId],
+        },
+      };
+    },
     resolveId(id) {
       if (id === virtualModuleId) return resolvedVirtualModuleId;
     },

package/vite-plugins/utils.js

@@ -0,0 +1,15 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+
+export function getMonorepoRoot() {
+  let dir = process.cwd();
+  while (true) {
+    try {
+      const pkg = JSON.parse(readFileSync(join(dir, "package.json"), "utf-8"));
+      if (pkg?.workspaces) return dir;
+    } catch { /* no package.json here, keep walking */ }
+    const parent = dirname(dir);
+    if (parent === dir) return null;
+    dir = parent;
+  }
+}

package/vite-plugins/workspace-fs-allow.js

@@ -0,0 +1,33 @@
+import { getMonorepoRoot } from "./utils.js";
+
+/**
+ * In monorepo dev, workspace packages are symlinked into node_modules.
+ * Vite's default `server.fs.allow` only covers the project root, so requests
+ * for files inside those symlinked packages (source maps, HMR updates, etc.)
+ * are denied. This plugin walks up from cwd to find the monorepo root and
+ * allows Vite to serve from there.
+ *
+ * For standalone npm-installed users there's no workspaces field above them,
+ * the plugin does nothing, and the config has no effect.
+ *
+ * @returns {import('vite').Plugin}
+ */
+export function lobbWorkspaceFsAllow() {
+  return {
+    name: "lobb-workspace-fs-allow",
+    config(_, { command }) {
+      if (command !== "serve") return;
+
+      const monorepoRoot = getMonorepoRoot();
+      if (!monorepoRoot) return;
+
+      return {
+        server: {
+          fs: {
+            allow: [monorepoRoot],
+          },
+        },
+      };
+    },
+  };
+}