@lobb-js/studio 0.20.0 → 0.22.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/children.svelte

@@ -15,53 +15,36 @@
 
     let { collectionName, entry = $bindable(), values = {} }: LocalProp = $props();
 
-    const childrenRelations = ctx.meta.relations.filter(
-        (relation) => relation.to.collection === collectionName,
-    );
+    const fkChildren = (ctx.meta.collections[collectionName]?.children ?? [])
+        .filter((c) => c.type === "fk") as { type: "fk"; collection: string; field: string }[];
 
-    // filling the children properties
-    for (let index = 0; index < childrenRelations.length; index++) {
-        const relation = childrenRelations[index];
-        const childCollection = relation.from.collection;
-        entry[childCollection] = [];
-        if (values[childCollection]) {
-            entry[childCollection] = [
-                ...entry[childCollection],
-                ...values[childCollection],
-            ];
-        }
+    for (const child of fkChildren) {
+        entry[child.collection] = values[child.collection] ? [...values[child.collection]] : [];
     }
 </script>
 
-{#if childrenRelations.length}
+{#if fkChildren.length}
     <div class="flex flex-col gap-4 border-t p-4">
         <div class="flex items-center gap-2">
             <Link size="17.5" />
             <div>Sub Records</div>
         </div>
         <div class="flex flex-col gap-4">
-            {#each childrenRelations as relation}
-                {@const childCollection = relation.from.collection}
+            {#each fkChildren as child}
                 <ExtensionsComponents
-                    name="detailView.create.subRecords.{childCollection}"
+                    name="detailView.create.subRecords.{child.collection}"
                     utils={getExtensionUtils(lobb, ctx)}
                     parentCollectionName={collectionName}
-                    collectionName={childCollection}
-                    parentRecord={{
-                        id: entry.id,
-                        collectionName: collectionName,
-                    }}
+                    collectionName={child.collection}
+                    parentRecord={{ id: entry.id, collectionName }}
                     class="bg-muted/30 border rounded-md overflow-hidden"
-                    bind:value={entry[childCollection]}
+                    bind:value={entry[child.collection]}
                 >
                     <CreateManyView
                         parentCollectionName={collectionName}
-                        collectionName={childCollection}
-                        parentRecord={{
-                            id: entry.id,
-                            collectionName: collectionName,
-                        }}
-                        bind:entries={entry[childCollection]}
+                        collectionName={child.collection}
+                        parentRecord={{ id: entry.id, collectionName }}
+                        bind:entries={entry[child.collection]}
                     />
                 </ExtensionsComponents>
             {/each}

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/update/children.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
     import DataTable from "../../../components/dataTable/dataTable.svelte";
     import { getStudioContext } from "../../../context";
-    import { Link, Plus, TableIcon } from "lucide-svelte";
+    import { Link, Plus, TableIcon, Unlink } from "lucide-svelte";
     import CreateDetailViewButton from "../create/createDetailViewButton.svelte";
     import ExtensionsComponents from "../../../components/extensionsComponents.svelte";
     import { getExtensionUtils } from "../../../extensions/extensionUtils";
+    import SelectRecord from "../../../components/selectRecord.svelte";
+    import { getCollectionColumns } from "../../dataTable/utils";
+    import Table from "../../../components/dataTable/table.svelte";
+    import Button from "../../../components/ui/button/button.svelte";
 
     const { ctx, lobb } = getStudioContext();
 
@@ -15,67 +19,92 @@
 
     let { collectionName, entry }: LocalProp = $props();
 
-    const childrenRelations = ctx.meta.relations.filter(
-        (relation) => relation.to.collection === collectionName,
-    );
-    const refresh: boolean[] = $state(
-        new Array(childrenRelations.length).fill(true),
-    );
+    const allChildren = ctx.meta.collections[collectionName]?.children ?? [];
+    const fkChildren = allChildren.filter((c) => c.type === "fk") as { type: "fk"; collection: string; field: string }[];
+    const relationalChildren = allChildren.filter((c) => c.type === "m2m" || c.type === "polymorphic") as { type: string; collection: string }[];
+
+    const fkRefresh: boolean[] = $state(new Array(fkChildren.length).fill(true));
+
+    let relationalRecords: Record<string, any[]> = $state({});
+    let relationalLoading = $state(false);
+
+    async function fetchRelational() {
+        if (!relationalChildren.length || !entry?.id) return;
+        relationalLoading = true;
+        const childrenParam: Record<string, any> = {};
+        for (const child of relationalChildren) {
+            childrenParam[child.collection] = { fields: ["*"] };
+        }
+        const response = await lobb.findAll(collectionName, {
+            filter: { id: entry.id },
+            limit: 1,
+            children: childrenParam,
+        });
+        const result = await response.json();
+        const record = result.data?.[0];
+        if (record) {
+            for (const child of relationalChildren) {
+                relationalRecords[child.collection] = record[child.collection] ?? [];
+            }
+        }
+        relationalLoading = false;
+    }
+
+    async function linkRecord(childCollection: string, selected: any) {
+        await lobb.updateOne(collectionName, entry.id, {}, { [childCollection]: { link: [selected.id] } });
+        await fetchRelational();
+    }
+
+    async function unlinkRecord(childCollection: string, id: any) {
+        await lobb.updateOne(collectionName, entry.id, {}, { [childCollection]: { unlink: [id] } });
+        await fetchRelational();
+    }
+
+    $effect(() => {
+        fetchRelational();
+    });
 </script>
 
-{#if childrenRelations.length}
+{#if allChildren.length}
     <div class="flex flex-col gap-4 border-t p-4">
         <div class="flex items-center gap-2">
             <Link size="17.5" />
             <div>Sub Records</div>
         </div>
         <div class="flex flex-col gap-4">
-            {#each childrenRelations as relation, index}
-                {@const childCollection = relation.from.collection}
-                {@const childField = relation.from.field}
+
+            <!-- FK children -->
+            {#each fkChildren as child, index}
                 <ExtensionsComponents
-                    name="detailView.update.subRecords.{childCollection}"
+                    name="detailView.update.subRecords.{child.collection}"
                     utils={getExtensionUtils(lobb, ctx)}
-                    collectionName={childCollection}
-                    filter={{
-                        [childField]: entry.id,
-                    }}
+                    collectionName={child.collection}
+                    filter={{ [child.field]: entry.id }}
                     class="bg-muted/30 border rounded-md overflow-hidden"
                 >
                     <div class="border rounded-md overflow-clip">
-                        <div
-                            class="flex items-center justify-between px-2 h-10 bg-muted/30 border-b"
-                        >
+                        <div class="flex items-center justify-between px-2 h-10 bg-muted/30 border-b">
                             <div class="flex-1 flex h-full items-center gap-2">
-                                <TableIcon
-                                    class="text-muted-foreground"
-                                    size="17.5"
-                                />
-                                <div class="text-sm text-muted-foreground">
-                                    {childCollection}
-                                </div>
+                                <TableIcon class="text-muted-foreground" size="17.5" />
+                                <div class="text-sm text-muted-foreground">{child.collection}</div>
                             </div>
                             <div class="flex gap-2">
                                 <CreateDetailViewButton
                                     variant="ghost"
                                     class="h-7 px-2 font-normal text-xs"
                                     Icon={Plus}
-                                    collectionName={childCollection}
-                                    onSuccessfullSave={async () => {
-                                        refresh[index] = !refresh[index];
-                                    }}
+                                    collectionName={child.collection}
+                                    onSuccessfullSave={async () => { fkRefresh[index] = !fkRefresh[index]; }}
                                 >
                                     Create
                                 </CreateDetailViewButton>
                             </div>
                         </div>
                         <div class="max-h-72 overflow-auto rounded-md">
-                            {#key refresh[index]}
+                            {#key fkRefresh[index]}
                                 <DataTable
-                                    collectionName={childCollection}
-                                    filter={{
-                                        [childField]: entry.id,
-                                    }}
+                                    collectionName={child.collection}
+                                    filter={{ [child.field]: entry.id }}
                                     unifiedBgColor="bg-muted/30"
                                     showHeader={false}
                                     showFooter={false}
@@ -91,6 +120,64 @@
                     </div>
                 </ExtensionsComponents>
             {/each}
+
+            <!-- M2M and polymorphic children -->
+            {#each relationalChildren as child}
+                {@const columns = getCollectionColumns(ctx, child.collection)}
+                {@const linkedIds = new Set((relationalRecords[child.collection] ?? []).map((r: any) => String(r.id)))}
+                <div class="border rounded-md overflow-clip">
+                    <div class="flex items-center justify-between px-2 h-10 bg-muted/30 border-b">
+                        <div class="flex-1 flex h-full items-center gap-2">
+                            <TableIcon class="text-muted-foreground" size="17.5" />
+                            <div class="text-sm text-muted-foreground">{child.collection}</div>
+                        </div>
+                        <div class="flex gap-2">
+                            <CreateDetailViewButton
+                                variant="ghost"
+                                class="h-7 px-2 font-normal text-xs"
+                                Icon={Plus}
+                                collectionName={child.collection}
+                                onSuccessfullSave={async (newEntry) => { await linkRecord(child.collection, newEntry); }}
+                            >
+                                Create & link
+                            </CreateDetailViewButton>
+                            <SelectRecord
+                                collectionName={child.collection}
+                                text="Link existing"
+                                onSelect={(selected) => linkRecord(child.collection, selected)}
+                                filter={{ id: { $nin: [...linkedIds] } }}
+                                variant="ghost"
+                                class="h-7 px-2 font-normal text-xs"
+                            />
+                        </div>
+                    </div>
+                    <div class="max-h-72 overflow-auto bg-muted/30">
+                        {#if relationalLoading}
+                            <div class="p-4 text-sm text-muted-foreground">Loading...</div>
+                        {:else}
+                            <Table
+                                data={relationalRecords[child.collection] ?? []}
+                                {columns}
+                                unifiedBgColor="bg-muted/30"
+                                showLastRowBorder={false}
+                                showLastColumnBorder={false}
+                                showCheckboxes={false}
+                            >
+                                {#snippet tools(record, _index)}
+                                    <Button
+                                        class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+                                        variant="ghost"
+                                        size="icon"
+                                        onclick={() => unlinkRecord(child.collection, record.id)}
+                                        Icon={Unlink}
+                                    />
+                                {/snippet}
+                            </Table>
+                        {/if}
+                    </div>
+                </div>
+            {/each}
+
         </div>
     </div>
 {/if}

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;