@lobb-js/studio 0.20.0 → 0.21.0

package/dist/actions.d.ts

@@ -7,6 +7,7 @@ export interface OpenDataTableDrawerProps {
     title?: string;
     showHeader?: boolean;
     showFooter?: boolean;
+    position?: "side" | "bottom";
 }
 export declare function showDialog(title: string, description: string): Promise<boolean>;
 export declare function openCreateDetailView(studioContext: StudioContext, props: CreateDetailViewProp): void;

package/dist/components/dataTable/utils.js

@@ -103,24 +103,18 @@ export function getCollectionParamsFields(ctx, collectionName, allFields) {
         };
     });
     var columns = [];
-    for (var index = 0; index < foreignFields.length; index++) {
-        var foreignField = foreignFields[index];
-        if (!foreignField.collection || !ctx.meta.collections[foreignField.collection]) {
+    for (var _i = 0, foreignFields_1 = foreignFields; _i < foreignFields_1.length; _i++) {
+        var foreignField = foreignFields_1[_i];
+        if (!foreignField.collection || !ctx.meta.collections[foreignField.collection])
             continue;
+        if (allFields) {
+            columns.push("".concat(foreignField.field, ".*"));
         }
-        columns.push("".concat(foreignField.field, ".id"));
-        if (!allFields) {
+        else {
+            columns.push("".concat(foreignField.field, ".id"));
             var primaryField = getCollectionPrimaryField(ctx, foreignField.collection);
-            if (primaryField) {
+            if (primaryField)
                 columns.push("".concat(foreignField.field, ".").concat(primaryField));
-            }
-        }
-        else {
-            var fieldNames = Object.keys(ctx.meta.collections[foreignField.collection].fields);
-            for (var index_1 = 0; index_1 < fieldNames.length; index_1++) {
-                var fieldName = fieldNames[index_1];
-                columns.push("".concat(foreignField.field, ".").concat(fieldName));
-            }
         }
     }
     var foreignColumns = columns.join(",");

package/dist/components/dataTableDrawer/dataTableDrawer.svelte

@@ -12,6 +12,7 @@
         showHeader?: boolean;
         showFooter?: boolean;
         tableProps?: Partial<TableProps>;
+        position?: "side" | "bottom";
         onClose?: () => void;
     }
 
@@ -22,20 +23,23 @@
         showHeader = true,
         showFooter = true,
         tableProps,
+        position = "side",
         onClose,
     }: Props = $props();
 </script>
 
-<Drawer onHide={async () => onClose?.()}>
-    <div class="flex h-12 shrink-0 items-center gap-4 border-b px-4">
-        <Button
-            variant="outline"
-            onclick={() => onClose?.()}
-            class="h-8 w-8 rounded-full text-xs font-normal"
-            Icon={ArrowLeft}
-        />
-        <div class="text-sm font-medium">{title ?? collectionName}</div>
-    </div>
+<Drawer onHide={async () => onClose?.()} {position}>
+    {#if position !== "bottom"} 
+        <div class="flex h-12 shrink-0 items-center gap-4 border-b px-4">
+            <Button
+                variant="outline"
+                onclick={() => onClose?.()}
+                class="h-8 w-8 rounded-full text-xs font-normal"
+                Icon={ArrowLeft}
+            />
+            <div class="text-sm font-medium">{title ?? collectionName}</div>
+        </div>
+    {/if}
     <div class="min-h-0 flex-1 overflow-auto">
         <DataTable
             {collectionName}

package/dist/components/dataTableDrawer/dataTableDrawer.svelte.d.ts

@@ -6,6 +6,7 @@ interface Props {
     showHeader?: boolean;
     showFooter?: boolean;
     tableProps?: Partial<TableProps>;
+    position?: "side" | "bottom";
     onClose?: () => void;
 }
 declare const DataTableDrawer: import("svelte").Component<Props, {}, "">;

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

@@ -28,7 +28,7 @@
     import { getField, getFieldIcon } from "../../dataTable/utils";
     import Children from "./children.svelte";
     import {
-        generateTransactionBody,
+        buildChildren,
         getDefaultEntry,
         parseDetailViewValues,
         serializeEntry,
@@ -82,31 +82,15 @@
             }
         }
 
-        const serializedEntry = serializeEntry(
-            ctx,
-            collectionName,
-            localEntry,
-            rollback,
-        );
-
-        let transactionBody;
         if (rollback) {
-            transactionBody = [
-                {
-                    method: "createOne",
-                    props: { collectionName: collectionName, data: serializedEntry },
-                },
-            ];
-        } else {
-            transactionBody = generateTransactionBody(
-                ctx,
-                collectionName,
-                serializedEntry,
-            );
+            if (onSuccessfullSave) await onSuccessfullSave(localEntry);
+            onCancel?.();
+            return;
         }
 
-        // create the record
-        let response = await lobb.transactions(transactionBody, rollback);
+        const serializedEntry = serializeEntry(ctx, collectionName, localEntry);
+        const children = buildChildren(ctx, collectionName, localEntry);
+        const response = await lobb.createOne(collectionName, serializedEntry, children);
 
         await emitEvent({ lobb, ctx }, "studio.collections.create", {
             collectionName,
@@ -126,15 +110,8 @@
             }
         }
 
-        // close detailView side bar
-        if (onSuccessfullSave) {
-            await onSuccessfullSave(localEntry);
-        }
-
-        if (!rollback) {
-            toast.success(`The record was successfully created`);
-        }
-
+        if (onSuccessfullSave) await onSuccessfullSave(localEntry);
+        toast.success(`The record was successfully created`);
         onCancel?.();
     }
 </script>

package/dist/components/detailView/utils.d.ts

@@ -3,7 +3,10 @@ import type { DetailFormField } from "./detailViewForm.svelte";
 export declare function getDefaultEntry(ctx: CTX, fieldNames: string[], collectionName: string, values?: Record<string, any>): {
     [k: string]: any;
 };
-export declare function serializeEntry(ctx: CTX, collectionName: string, entry: Record<string, any>, rollback?: boolean): Record<string, any>;
-export declare function generateTransactionBody(ctx: CTX, collectionName: string, entry: Record<string, any>): any[];
+export declare function serializeEntry(ctx: CTX, collectionName: string, entry: Record<string, any>): Record<string, any>;
+export declare function buildChildren(ctx: CTX, collectionName: string, entry: Record<string, any>): Record<string, {
+    create?: any[];
+    link?: any[];
+}> | undefined;
 export declare function parseDetailViewValues(ctx: CTX, collectionName: string, values: Record<string, any>): void;
 export declare function getCollectionFields(ctx: CTX, collectionName: string): DetailFormField[];

package/dist/components/detailView/utils.js

@@ -33,11 +33,9 @@ export function getDefaultEntry(ctx, fieldNames, collectionName, values) {
         return [fieldName, value];
     }));
 }
-export function serializeEntry(ctx, collectionName, entry, rollback) {
-    if (rollback === void 0) { rollback = false; }
-    // deep clone the object
+export function serializeEntry(ctx, collectionName, entry) {
     entry = __assign({}, entry);
-    // serialize the foreign key field's value
+    // extract FK object fields → ID
     for (var _i = 0, _a = Object.entries(entry); _i < _a.length; _i++) {
         var _b = _a[_i], fieldName = _b[0], fieldValue = _b[1];
         var isRefrenceField = isRelationField(ctx, collectionName, fieldName);
@@ -45,7 +43,7 @@ export function serializeEntry(ctx, collectionName, entry, rollback) {
             entry[fieldName] = fieldValue.id;
         }
     }
-    // serialize polymorphic id_field values ({ id: 5, title: "..." } → 5)
+    // extract polymorphic id_field objects → ID
     for (var _c = 0, _d = ctx.meta.relations; _c < _d.length; _c++) {
         var relation = _d[_c];
         if (relation.type !== "polymorphic")
@@ -58,76 +56,35 @@ export function serializeEntry(ctx, collectionName, entry, rollback) {
             entry[idField] = fieldValue.id;
         }
     }
-    // check for related collections properties and serialize them too
-    if (!rollback) {
-        var childrenRelations = ctx.meta.relations.filter(function (relation) { return relation.to.collection === collectionName; });
-        var childrenCollectionNames = childrenRelations.map(function (relation) { return relation.from.collection; });
-        for (var index = 0; index < childrenCollectionNames.length; index++) {
-            var childrenCollectionName = childrenCollectionNames[index];
-            var childrenEntries = entry[childrenCollectionName];
-            if (childrenEntries) {
-                for (var index_1 = 0; index_1 < childrenEntries.length; index_1++) {
-                    childrenEntries[index_1] = serializeEntry(ctx, childrenCollectionName, childrenEntries[index_1]);
-                }
-            }
-        }
-    }
     return entry;
 }
-export function generateTransactionBody(ctx, collectionName, entry) {
-    entry = __assign({}, entry);
-    function handleEntryRecursive(transactionBody, collectionName, entry, parentTransactionIndex) {
-        var _a;
-        var _b;
-        var parentCollectionName = parentTransactionIndex !== undefined ? transactionBody[parentTransactionIndex].props.collectionName : null;
-        var foreignKeyFieldName = (_b = ctx.meta.relations.find(function (relation) { return relation.from.collection === collectionName && relation.to.collection === parentCollectionName; })) === null || _b === void 0 ? void 0 : _b.from.field;
-        var collectionFieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
-        var payload = {};
-        for (var index = 0; index < collectionFieldNames.length; index++) {
-            var fieldName = collectionFieldNames[index];
-            var isForeignKeyField = fieldName === foreignKeyFieldName;
-            if (isForeignKeyField) {
-                payload[fieldName] = "{{ responses[".concat(parentTransactionIndex, "].data.id }}");
-                continue;
-            }
-            payload[fieldName] = entry[fieldName];
-        }
-        var localTransactionIndex = transactionBody.length;
-        if (payload.id) {
-            var localPayload = (_a = {},
-                _a[foreignKeyFieldName] = payload[foreignKeyFieldName],
-                _a);
-            transactionBody.push({
-                method: "updateMany",
-                props: {
-                    collectionName: collectionName,
-                    data: localPayload,
-                    filter: { id: payload.id },
-                },
-            });
-        }
-        else {
-            transactionBody.push({
-                method: "createOne",
-                props: { collectionName: collectionName, data: payload },
-            });
-        }
-        var childrenRelations = ctx.meta.relations.filter(function (relation) { return relation.to.collection === collectionName; });
-        var childrenCollectionNames = childrenRelations.map(function (relation) { return relation.from.collection; });
-        for (var index = 0; index < childrenCollectionNames.length; index++) {
-            var childrenCollectionName = childrenCollectionNames[index];
-            var childrenEntries = entry[childrenCollectionName];
-            if (childrenEntries) {
-                for (var index_2 = 0; index_2 < childrenEntries.length; index_2++) {
-                    var childrenEntry = childrenEntries[index_2];
-                    handleEntryRecursive(transactionBody, childrenCollectionName, childrenEntry, localTransactionIndex);
-                }
-            }
+export function buildChildren(ctx, collectionName, entry) {
+    var childrenRelations = ctx.meta.relations.filter(function (relation) { return relation.type !== "polymorphic" && relation.to.collection === collectionName; });
+    var children = {};
+    var _loop_1 = function (relation) {
+        var childCollection = relation.from.collection;
+        var childEntries = entry[childCollection];
+        if (!(childEntries === null || childEntries === void 0 ? void 0 : childEntries.length))
+            return "continue";
+        var toCreate = childEntries
+            .filter(function (e) { return !e.id; })
+            .map(function (e) { return serializeEntry(ctx, childCollection, e); });
+        var toLink = childEntries
+            .filter(function (e) { return e.id; })
+            .map(function (e) { return e.id; });
+        if (toCreate.length || toLink.length) {
+            children[childCollection] = {};
+            if (toCreate.length)
+                children[childCollection].create = toCreate;
+            if (toLink.length)
+                children[childCollection].link = toLink;
         }
+    };
+    for (var _i = 0, childrenRelations_1 = childrenRelations; _i < childrenRelations_1.length; _i++) {
+        var relation = childrenRelations_1[_i];
+        _loop_1(relation);
     }
-    var transactionBody = [];
-    handleEntryRecursive(transactionBody, collectionName, entry);
-    return transactionBody;
+    return Object.keys(children).length ? children : undefined;
 }
 export function parseDetailViewValues(ctx, collectionName, values) {
     var forignFieldNames = ctx.meta.relations

package/dist/components/drawer.svelte

@@ -1,30 +1,46 @@
 <script lang="ts">
     import { calculateDrawerWidth } from "../utils";
     import type { Snippet } from "svelte";
-    import { fade, fly } from "svelte/transition";
+    import { fade } from "svelte/transition";
+    import { cubicOut } from "svelte/easing";
     import Portal from "svelte-portal";
 
     interface Props {
         children?: Snippet<[]>;
         onHide?: () => Promise<void>;
+        position?: "side" | "bottom";
     }
 
-    let { onHide, children }: Props = $props();
+    let { onHide, children, position = "side" }: Props = $props();
+
+    function slide(_node: Element, { duration = 250, axis }: { duration?: number; axis: "x" | "y" }) {
+        return {
+            duration,
+            easing: cubicOut,
+            css: (t: number) => {
+                const offset = (1 - t) * 100;
+                return axis === "y"
+                    ? `transform: translateY(${offset}%)`
+                    : `transform: translateX(${offset}%)`;
+            },
+        };
+    }
 </script>
 
 <Portal target="body">
     <button
-        transition:fade={{ duration: 250 }}
+        transition:fade={{ duration: 200 }}
         onclick={() => onHide?.()}
-        class="backgroundDrawerButton fixed left-0 top-0 z-40 h-screen w-screen bg-background opacity-50 cursor-default"
+        class="backgroundDrawerButton fixed left-0 top-0 z-40 h-screen w-screen bg-black/50 cursor-default"
         aria-label="background used to hide the background"
     ></button>
 
-    <!-- the drawer -->
     <div
-        transition:fly={{ x: "100%", duration: 250 }}
-        class="fixed right-0 top-0 z-40 flex h-full w-full flex-col border-l bg-background"
-        style="max-width: {calculateDrawerWidth()}px;"
+        transition:slide={{ axis: position === "bottom" ? "y" : "x" }}
+        class={position === "bottom"
+            ? "fixed bottom-0 left-0 z-40 flex h-[60vh] w-full flex-col border-t bg-background"
+            : "fixed right-0 top-0 z-40 flex h-full w-full flex-col border-l bg-background"}
+        style={position === "side" ? `max-width: ${calculateDrawerWidth()}px;` : ""}
     >
         {@render children?.()}
     </div>

package/dist/components/drawer.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Snippet } from "svelte";
 interface Props {
     children?: Snippet<[]>;
     onHide?: () => Promise<void>;
+    position?: "side" | "bottom";
 }
 declare const Drawer: import("svelte").Component<Props, {}, "">;
 type Drawer = ReturnType<typeof Drawer>;

package/dist/extensions/extension.types.d.ts

@@ -59,7 +59,9 @@ export interface ExtensionUtils {
         title?: string;
         showHeader?: boolean;
         showFooter?: boolean;
+        position?: "side" | "bottom";
     }) => void;
+    emitEvent: (eventName: string, input: Record<string, any>) => Promise<Record<string, any>>;
     components: Components;
     mediaQueries: typeof mediaQueries;
     intlDate: typeof intlDate;

package/dist/extensions/extensionUtils.js

@@ -45,6 +45,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { toast } from "svelte-sonner";
 import { showDialog, openDataTableDrawer } from "../actions";
+import { emitEvent } from "../eventSystem";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Separator } from "../components/ui/separator";
@@ -100,6 +101,7 @@ export function getExtensionUtils(lobb, ctx) {
         toast: toast,
         showDialog: showDialog,
         openDataTableDrawer: function (props) { return openDataTableDrawer({ lobb: lobb, ctx: ctx }, props); },
+        emitEvent: function (eventName, input) { return emitEvent({ lobb: lobb, ctx: ctx }, eventName, input); },
         components: getComponents(),
         mediaQueries: mediaQueries,
         intlDate: intlDate,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.24.0",
+    "@lobb-js/core": "^0.25.0",
     "@chromatic-com/storybook": "^4.1.2",
     "@storybook/addon-a11y": "^10.0.1",
     "@storybook/addon-docs": "^10.0.1",

package/src/lib/actions.ts

@@ -15,6 +15,7 @@ export interface OpenDataTableDrawerProps {
     title?: string;
     showHeader?: boolean;
     showFooter?: boolean;
+    position?: "side" | "bottom";
 }
 
 export function showDialog(title: string, description: string): Promise<boolean> {

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

@@ -113,24 +113,15 @@ export function getCollectionParamsFields(ctx: CTX, collectionName: string, allF
 		});
 
 	const columns = [];
-	for (let index = 0; index < foreignFields.length; index++) {
-		const foreignField = foreignFields[index];
-		if (!foreignField.collection || !ctx.meta.collections[foreignField.collection]) {
-			continue;
-		}
-		columns.push(`${foreignField.field}.id`);
+	for (const foreignField of foreignFields) {
+		if (!foreignField.collection || !ctx.meta.collections[foreignField.collection]) continue;
 
-		if (!allFields) {
-			const primaryField = getCollectionPrimaryField(ctx, foreignField.collection)
-			if (primaryField) {
-				columns.push(`${foreignField.field}.${primaryField}`);
-			}
+		if (allFields) {
+			columns.push(`${foreignField.field}.*`);
 		} else {
-			const fieldNames = Object.keys(ctx.meta.collections[foreignField.collection].fields);
-			for (let index = 0; index < fieldNames.length; index++) {
-				const fieldName = fieldNames[index];
-				columns.push(`${foreignField.field}.${fieldName}`);
-			}
+			columns.push(`${foreignField.field}.id`);
+			const primaryField = getCollectionPrimaryField(ctx, foreignField.collection);
+			if (primaryField) columns.push(`${foreignField.field}.${primaryField}`);
 		}
 	}
 

package/src/lib/components/dataTableDrawer/dataTableDrawer.svelte

@@ -12,6 +12,7 @@
         showHeader?: boolean;
         showFooter?: boolean;
         tableProps?: Partial<TableProps>;
+        position?: "side" | "bottom";
         onClose?: () => void;
     }
 
@@ -22,20 +23,23 @@
         showHeader = true,
         showFooter = true,
         tableProps,
+        position = "side",
         onClose,
     }: Props = $props();
 </script>
 
-<Drawer onHide={async () => onClose?.()}>
-    <div class="flex h-12 shrink-0 items-center gap-4 border-b px-4">
-        <Button
-            variant="outline"
-            onclick={() => onClose?.()}
-            class="h-8 w-8 rounded-full text-xs font-normal"
-            Icon={ArrowLeft}
-        />
-        <div class="text-sm font-medium">{title ?? collectionName}</div>
-    </div>
+<Drawer onHide={async () => onClose?.()} {position}>
+    {#if position !== "bottom"} 
+        <div class="flex h-12 shrink-0 items-center gap-4 border-b px-4">
+            <Button
+                variant="outline"
+                onclick={() => onClose?.()}
+                class="h-8 w-8 rounded-full text-xs font-normal"
+                Icon={ArrowLeft}
+            />
+            <div class="text-sm font-medium">{title ?? collectionName}</div>
+        </div>
+    {/if}
     <div class="min-h-0 flex-1 overflow-auto">
         <DataTable
             {collectionName}

package/src/lib/components/detailView/create/createDetailView.svelte

@@ -28,7 +28,7 @@
     import { getField, getFieldIcon } from "../../dataTable/utils";
     import Children from "./children.svelte";
     import {
-        generateTransactionBody,
+        buildChildren,
         getDefaultEntry,
         parseDetailViewValues,
         serializeEntry,
@@ -82,31 +82,15 @@
             }
         }
 
-        const serializedEntry = serializeEntry(
-            ctx,
-            collectionName,
-            localEntry,
-            rollback,
-        );
-
-        let transactionBody;
         if (rollback) {
-            transactionBody = [
-                {
-                    method: "createOne",
-                    props: { collectionName: collectionName, data: serializedEntry },
-                },
-            ];
-        } else {
-            transactionBody = generateTransactionBody(
-                ctx,
-                collectionName,
-                serializedEntry,
-            );
+            if (onSuccessfullSave) await onSuccessfullSave(localEntry);
+            onCancel?.();
+            return;
         }
 
-        // create the record
-        let response = await lobb.transactions(transactionBody, rollback);
+        const serializedEntry = serializeEntry(ctx, collectionName, localEntry);
+        const children = buildChildren(ctx, collectionName, localEntry);
+        const response = await lobb.createOne(collectionName, serializedEntry, children);
 
         await emitEvent({ lobb, ctx }, "studio.collections.create", {
             collectionName,
@@ -126,15 +110,8 @@
             }
         }
 
-        // close detailView side bar
-        if (onSuccessfullSave) {
-            await onSuccessfullSave(localEntry);
-        }
-
-        if (!rollback) {
-            toast.success(`The record was successfully created`);
-        }
-
+        if (onSuccessfullSave) await onSuccessfullSave(localEntry);
+        toast.success(`The record was successfully created`);
         onCancel?.();
     }
 </script>

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

@@ -30,12 +30,10 @@ export function serializeEntry(
         ctx: CTX,
         collectionName: string,
         entry: Record<string, any>,
-        rollback: boolean = false,
 ) {
-    // deep clone the object
     entry = { ...entry }
 
-    // serialize the foreign key field's value
+    // extract FK object fields → ID
     for (const [fieldName, fieldValue] of Object.entries(entry)) {
         const isRefrenceField = isRelationField(ctx, collectionName, fieldName);
         if (isRefrenceField && fieldValue !== null && fieldValue.id !== undefined) {
@@ -43,7 +41,7 @@ export function serializeEntry(
         }
     }
 
-    // serialize polymorphic id_field values ({ id: 5, title: "..." } → 5)
+    // extract polymorphic id_field objects → ID
     for (const relation of ctx.meta.relations) {
         if (relation.type !== "polymorphic") continue;
         if ((relation as any).from.collection !== collectionName) continue;
@@ -54,90 +52,40 @@ export function serializeEntry(
         }
     }
 
-    // check for related collections properties and serialize them too
-    if (!rollback) {
-        const childrenRelations = ctx.meta.relations.filter((relation) => relation.to.collection === collectionName);
-        const childrenCollectionNames = childrenRelations.map((relation) => relation.from.collection);
-        for (let index = 0; index < childrenCollectionNames.length; index++) {
-            const childrenCollectionName = childrenCollectionNames[index];
-            const childrenEntries = entry[childrenCollectionName];
-            if (childrenEntries) {
-                for (let index = 0; index < childrenEntries.length; index++) {
-                    childrenEntries[index] = serializeEntry(ctx, childrenCollectionName, childrenEntries[index]);
-                }
-            }
-        }
-    }
-
     return entry;
 }
 
-export function generateTransactionBody(
+export function buildChildren(
         ctx: CTX,
         collectionName: string,
         entry: Record<string, any>,
-) {
-    entry = { ...entry }
-    function handleEntryRecursive(
-        transactionBody: any[],
-        collectionName: string,
-        entry: Record<string, any>,
-        parentTransactionIndex?: number,
-    ) {
-        const parentCollectionName = parentTransactionIndex !== undefined ? transactionBody[parentTransactionIndex].props.collectionName : null;
-        const foreignKeyFieldName = ctx.meta.relations.find(relation => relation.from.collection === collectionName && relation.to.collection === parentCollectionName)?.from.field;
-        const collectionFieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
-        const payload: any = {};
-        for (let index = 0; index < collectionFieldNames.length; index++) {
-            const fieldName = collectionFieldNames[index];
-            const isForeignKeyField = fieldName === foreignKeyFieldName;
-            if (isForeignKeyField) {
-                payload[fieldName] = `{{ responses[${parentTransactionIndex}].data.id }}`
-                continue;
-            }
+): Record<string, { create?: any[]; link?: any[] }> | undefined {
+    const childrenRelations = ctx.meta.relations.filter(
+        (relation) => relation.type !== "polymorphic" && relation.to.collection === collectionName,
+    );
 
-            payload[fieldName] = entry[fieldName];
-        }
+    const children: Record<string, { create?: any[]; link?: any[] }> = {};
 
-        const localTransactionIndex = transactionBody.length;
-        if (payload.id) {
-            const localPayload = {
-                [foreignKeyFieldName]: payload[foreignKeyFieldName],
-            };
-            transactionBody.push({
-                method: "updateMany",
-                props: {
-                    collectionName: collectionName,
-                    data: localPayload,
-                    filter: { id: payload.id },
-                },
-            });
-        } else {
-            transactionBody.push({
-                method: "createOne",
-                props: { collectionName: collectionName, data: payload },
-            });
-        }
+    for (const relation of childrenRelations) {
+        const childCollection = (relation as any).from.collection;
+        const childEntries: any[] = entry[childCollection];
+        if (!childEntries?.length) continue;
 
-        const childrenRelations = ctx.meta.relations.filter((relation) => relation.to.collection === collectionName);
-        const childrenCollectionNames = childrenRelations.map((relation) => relation.from.collection);
-        for (let index = 0; index < childrenCollectionNames.length; index++) {
-            const childrenCollectionName = childrenCollectionNames[index];
-            const childrenEntries = entry[childrenCollectionName];
-            if (childrenEntries) {
-                for (let index = 0; index < childrenEntries.length; index++) {
-                    const childrenEntry = childrenEntries[index];
-                    handleEntryRecursive(transactionBody, childrenCollectionName, childrenEntry, localTransactionIndex);
-                }
-            }
+        const toCreate = childEntries
+            .filter((e) => !e.id)
+            .map((e) => serializeEntry(ctx, childCollection, e));
+        const toLink = childEntries
+            .filter((e) => e.id)
+            .map((e) => e.id);
+
+        if (toCreate.length || toLink.length) {
+            children[childCollection] = {};
+            if (toCreate.length) children[childCollection].create = toCreate;
+            if (toLink.length) children[childCollection].link = toLink;
         }
     }
 
-    const transactionBody: any[] = [];
-
-    handleEntryRecursive(transactionBody, collectionName, entry);
-
-    return transactionBody
+    return Object.keys(children).length ? children : undefined;
 }
 
 export function parseDetailViewValues(ctx: CTX, collectionName: string, values: Record<string, any>) {

package/src/lib/components/drawer.svelte

@@ -1,30 +1,46 @@
 <script lang="ts">
     import { calculateDrawerWidth } from "../utils";
     import type { Snippet } from "svelte";
-    import { fade, fly } from "svelte/transition";
+    import { fade } from "svelte/transition";
+    import { cubicOut } from "svelte/easing";
     import Portal from "svelte-portal";
 
     interface Props {
         children?: Snippet<[]>;
         onHide?: () => Promise<void>;
+        position?: "side" | "bottom";
     }
 
-    let { onHide, children }: Props = $props();
+    let { onHide, children, position = "side" }: Props = $props();
+
+    function slide(_node: Element, { duration = 250, axis }: { duration?: number; axis: "x" | "y" }) {
+        return {
+            duration,
+            easing: cubicOut,
+            css: (t: number) => {
+                const offset = (1 - t) * 100;
+                return axis === "y"
+                    ? `transform: translateY(${offset}%)`
+                    : `transform: translateX(${offset}%)`;
+            },
+        };
+    }
 </script>
 
 <Portal target="body">
     <button
-        transition:fade={{ duration: 250 }}
+        transition:fade={{ duration: 200 }}
         onclick={() => onHide?.()}
-        class="backgroundDrawerButton fixed left-0 top-0 z-40 h-screen w-screen bg-background opacity-50 cursor-default"
+        class="backgroundDrawerButton fixed left-0 top-0 z-40 h-screen w-screen bg-black/50 cursor-default"
         aria-label="background used to hide the background"
     ></button>
 
-    <!-- the drawer -->
     <div
-        transition:fly={{ x: "100%", duration: 250 }}
-        class="fixed right-0 top-0 z-40 flex h-full w-full flex-col border-l bg-background"
-        style="max-width: {calculateDrawerWidth()}px;"
+        transition:slide={{ axis: position === "bottom" ? "y" : "x" }}
+        class={position === "bottom"
+            ? "fixed bottom-0 left-0 z-40 flex h-[60vh] w-full flex-col border-t bg-background"
+            : "fixed right-0 top-0 z-40 flex h-full w-full flex-col border-l bg-background"}
+        style={position === "side" ? `max-width: ${calculateDrawerWidth()}px;` : ""}
     >
         {@render children?.()}
     </div>

package/src/lib/extensions/extension.types.ts

@@ -57,7 +57,8 @@ export interface ExtensionUtils {
     location: Location;
     toast: typeof toast;
     showDialog: typeof showDialog;
-    openDataTableDrawer: (props: { collectionName: string; filter?: Record<string, any>; title?: string; showHeader?: boolean; showFooter?: boolean }) => void;
+    openDataTableDrawer: (props: { collectionName: string; filter?: Record<string, any>; title?: string; showHeader?: boolean; showFooter?: boolean; position?: "side" | "bottom" }) => void;
+    emitEvent: (eventName: string, input: Record<string, any>) => Promise<Record<string, any>>;
     components: Components;
     mediaQueries: typeof mediaQueries;
     intlDate: typeof intlDate;

package/src/lib/extensions/extensionUtils.ts

@@ -8,6 +8,7 @@ import type { LobbClient } from "@lobb-js/sdk";
 import type { CTX } from "../store.types";
 import { toast } from "svelte-sonner";
 import { showDialog, openDataTableDrawer } from "../actions";
+import { emitEvent } from "../eventSystem";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Separator } from "../components/ui/separator";
@@ -65,6 +66,7 @@ export function getExtensionUtils(lobb: LobbClient, ctx: CTX): ExtensionUtils {
     toast: toast,
     showDialog: showDialog,
     openDataTableDrawer: (props) => openDataTableDrawer({ lobb, ctx }, props),
+    emitEvent: (eventName, input) => emitEvent({ lobb, ctx }, eventName, input),
     components: getComponents(),
     mediaQueries: mediaQueries,
     intlDate: intlDate,