@lobb-js/studio 0.28.5 → 0.29.0

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

@@ -8,93 +8,128 @@
         collectionName: 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, Plus, X } from "lucide-svelte";
-    import Button from "../../../components/ui/button/button.svelte";
+    import Button from "../../ui/button/button.svelte";
     import { getStudioContext } from "../../../context";
     import { toast } from "svelte-sonner";
+    import { untrack } from "svelte";
 
     const { lobb, ctx } = getStudioContext();
     import ExtensionsComponents from "../../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../../extensions/extensionUtils";
     import { getField, getFieldIcon } from "../../dataTable/utils";
     import Children from "./children.svelte";
-    import {
-        buildChildren,
-        getDefaultEntry,
-    } from "../utils";
+    import { buildChildren, getDefaultEntry } from "../utils";
+    import type { Changes } from "../utils";
     import { getChangedProperties } from "../../../utils";
     import type { Snippet } from "svelte";
     import FieldInput from "../fieldInput.svelte";
-    import { emitEvent } from "../../../eventSystem";
-    import Drawer from "../../../components/drawer.svelte";
+    import Drawer from "../../drawer.svelte";
 
     let {
         collectionName,
         values = {},
         showRelatedRecords = true,
-        rollback = false,
         onCancel,
         onSuccessfullSave,
         title,
         submitButton,
+        changes = $bindable<Changes | undefined>(undefined),
     }: CreateDetailViewProp = $props();
 
+    let _changes = $state<Changes>({ data: {}, children: {} });
+    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 fieldsErrors: Record<string, any> = $state({});
-    const subCollections = ctx.meta.relations.filter((relation) => relation.to.collection === collectionName).map((relation) => relation.from.collection);
+
+    const childCollections = ctx.meta.relations
+        .filter((r) => r.to.collection === collectionName)
+        .map((r) => (r as any).from.collection);
+
+    const subCollections = childCollections;
     const subCollectionsValues: Record<string, any> = {};
-    for (let index = 0; index < subCollections.length; index++) {
-        const subCollection = subCollections[index];
-        if (values[subCollection]) {
-            subCollectionsValues[subCollection] = values[subCollection];
-        }
+    for (const col of subCollections) {
+        if (values[col]) subCollectionsValues[col] = values[col];
     }
 
-    async function handleSave() {
-        let localEntry = getChangedProperties(initialEntry, $state.snapshot(entry));
+    $effect(() => {
+        const snap = $state.snapshot(entry);
 
-        await emitEvent({ lobb, ctx }, "studio.collections.preCreate", {
-            collectionName,
-            entry: localEntry,
-        });
+        untrack(() => {
+            const target = changes ?? _changes;
+            const data: Record<string, any> = {};
+            const children: Record<string, any> = {};
 
-        // remove empty children records data
-        for (const [key, value] of Object.entries(localEntry)) {
-            if (Array.isArray(value) && !value.length) {
-                delete localEntry[key];
+            for (const [key, value] of Object.entries(snap)) {
+                if (childCollections.includes(key) && Array.isArray(value)) {
+                    children[key] = {
+                        created: (value as any[]).filter((r) => !r.id).map((r) => ({ data: r })),
+                        updated: [],
+                        deleted: [],
+                        linked: (value as any[]).filter((r) => r.id).map((r) => r.id),
+                        unlinked: [],
+                    };
+                } else if (value !== null && value !== undefined && value !== '') {
+                    data[key] = value;
+                }
             }
-        }
 
-        if (rollback) {
-            if (onSuccessfullSave) await onSuccessfullSave(localEntry);
-            onCancel?.();
-            return;
+            target.data = data;
+            target.children = children;
+
+            if (!isRecordingMode) {
+                console.log(`[${collectionName}] changes:`, $state.snapshot(target));
+            }
+        });
+    });
+
+    function handleCancel() {
+        if (changes !== undefined) {
+            changes.data = {};
+            changes.children = {};
         }
+        onCancel?.();
+    }
+
+    async function handleSave() {
+        const target = changes ?? _changes;
+        const snap = $state.snapshot(target);
 
-        const children = buildChildren(ctx, collectionName, localEntry);
-        const response = await lobb.createOne(collectionName, localEntry, children);
+        const children = buildChildren(ctx, collectionName, { ...snap.data, ...Object.fromEntries(
+            Object.entries(snap.children).map(([col, ops]) => [
+                col,
+                [
+                    ...(ops.created.map((c) => c.data)),
+                    ...(ops.linked.map((id) => ({ id }))),
+                ]
+            ])
+        )});
 
-        await emitEvent({ lobb, ctx }, "studio.collections.create", {
-            collectionName,
-            entry: localEntry,
-            response: response,
-        });
+        const response = await lobb.createOne(collectionName, snap.data, children, undefined, isRecordingMode);
+
+        if (response.status === 204) {
+            if (onSuccessfullSave) await onSuccessfullSave(snap);
+            toast.success(`The record was successfully created`);
+            handleCancel();
+            return;
+        }
 
         if (!response.bodyUsed) {
-            let result = await response.json();
+            const result = await response.json();
             if (response.status >= 400) {
                 if (result.message && result.details) {
                     fieldsErrors = result.details;
@@ -105,17 +140,17 @@
             }
         }
 
-        if (onSuccessfullSave) await onSuccessfullSave(localEntry);
+        if (onSuccessfullSave) await onSuccessfullSave(snap);
         toast.success(`The record was successfully created`);
         onCancel?.();
     }
 </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>
@@ -175,7 +210,7 @@
         <div class="flex gap-3">
             <Button
                 variant="outline"
-                onclick={onCancel}
+                onclick={handleCancel}
                 class="h-7 px-3 text-xs font-normal"
                 Icon={X}
             >

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

@@ -6,13 +6,13 @@ export interface CreateDetailViewProp {
     collectionName: 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;
 }
 import type { Snippet } from "svelte";
-declare const CreateDetailView: import("svelte").Component<CreateDetailViewProp, {}, "">;
+declare const CreateDetailView: import("svelte").Component<CreateDetailViewProp, {}, "changes">;
 type CreateDetailView = ReturnType<typeof CreateDetailView>;
 export default CreateDetailView;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { CreateDetailViewProp } from "./createDetailView.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 CreateDetailView from "./createDetailView.svelte";
 
 	interface LocalProp extends CreateDetailViewProp {

package/dist/components/detailView/create/createDetailViewButton.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { CreateDetailViewProp } from "./createDetailView.svelte";
-import type { ButtonProps } from "../../../components/ui/button/button.svelte";
+import type { ButtonProps } from "../../ui/button/button.svelte";
 interface LocalProp extends CreateDetailViewProp {
     variant?: ButtonProps["variant"];
     class?: ButtonProps["class"];

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

@@ -11,11 +11,15 @@
     import Table, { type TableProps } from "../../dataTable/table.svelte";
     import Button from "../../ui/button/button.svelte";
     import CreateDetailViewButton from "./createDetailViewButton.svelte";
-    import { getCollectionColumns } from "../../../components/dataTable/utils";
-    import SelectRecord from "../../../components/selectRecord.svelte";
-    import FieldCell from "../../../components/dataTable/fieldCell.svelte";
+    import type { Changes } from "../utils";
+
+    let addChanges = $state<Changes>({ data: {}, children: {} });
+    let editChanges = $state<Changes>({ data: {}, children: {} });
+    import { getCollectionColumns } from "../../dataTable/utils";
+    import SelectRecord from "../../selectRecord.svelte";
+    import FieldCell from "../../dataTable/fieldCell.svelte";
     import SubRecords from "./subRecords.svelte";
-    import ListViewChildren from "../../../components/dataTable/listViewChildren.svelte";
+    import ListViewChildren from "../../dataTable/listViewChildren.svelte";
     import { getStudioContext } from "../../../context";
 
     const { ctx } = getStudioContext();
@@ -141,7 +145,7 @@
                 class="h-7 px-2 font-normal text-xs"
                 Icon={Plus}
                 {collectionName}
-                rollback={true}
+                changes={addChanges}
                 showRelatedRecords={true}
                 onSuccessfullSave={onRecordAdd}
                 values={createValues}
@@ -197,7 +201,7 @@
                             class="h-6 w-6 text-muted-foreground hover:bg-transparent p-0"
                             Icon={Pencil}
                             {collectionName}
-                            rollback={true}
+                            changes={editChanges}
                             showRelatedRecords={true}
                             onSuccessfullSave={(entry) =>
                                 onRecordOverride(entry, index)}

package/dist/components/detailView/fieldInput.svelte

@@ -6,7 +6,7 @@
 	import Button from "../ui/button/button.svelte";
 	import FieldCustomInput from "./fieldCustomInput.svelte";
 	import Input from "../ui/input/input.svelte";
-	import * as Select from "../../components/ui/select/index";
+	import * as Select from "../ui/select/index";
 	import EnumBadge from "../dataTable/enumBadge.svelte";
 	import type { EnumOption } from "@lobb-js/core";
 	import Textarea from "../ui/textarea/textarea.svelte";

package/dist/components/detailView/fieldInputReplacement.svelte

@@ -2,7 +2,7 @@
 	import { Ban, Check, CircleAlert, X } from "lucide-svelte";
 	import Button from "../ui/button/button.svelte";
 	import Input from "../ui/input/input.svelte";
-	import * as Select from "../../components/ui/select/index";
+	import * as Select from "../ui/select/index";
 	import Textarea from "../ui/textarea/textarea.svelte";
   	import type { EntryField } from "./detailViewForm.svelte";
   	import type { Snippet } from "svelte";

package/dist/components/detailView/update/detailViewChildren.svelte

@@ -1,43 +1,32 @@
 <script lang="ts">
-    import DataTable, { type RecordOperation } from "../../../components/dataTable/dataTable.svelte";
+    import DataTable from "../../dataTable/dataTable.svelte";
     import { getStudioContext } from "../../../context";
     import { Table, Link } from "lucide-svelte";
 
     const { ctx } = getStudioContext();
 
-    type PendingOps = {
-        link?: (string | number)[];
-        unlink?: (string | number)[];
-        delete?: (string | number)[];
-        create?: any[];
-    };
+    import type { Changes, ChildrenChanges } from "../utils";
 
     interface LocalProp {
         collectionName: string;
         entry: any;
-        pendingChildren?: Record<string, PendingOps>;
+        activeChanges?: Changes;
     }
 
-    let { collectionName, entry, pendingChildren = $bindable({}) }: LocalProp = $props();
-
-    function makeHandler(collection: string) {
-        return (op: RecordOperation) => {
-            if (!pendingChildren[collection]) pendingChildren[collection] = {};
-            const c = pendingChildren[collection];
-            if (op.type === "link") {
-                (c.link ??= []).push(op.record.id);
-            } else if (op.type === "unlink") {
-                (c.unlink ??= []).push(op.id);
-            } else if (op.type === "delete") {
-                (c.delete ??= []).push(op.id);
-            } else if (op.type === "create") {
-                (c.create ??= []).push(op.record);
-            }
-        };
-    }
+    let { collectionName, entry, activeChanges }: LocalProp = $props();
 
     const children = (ctx.meta.collections[collectionName]?.children ?? [])
         .filter((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic");
+
+    // Ensure all child collection slots exist before the template renders so bind:changes works
+    $effect.pre(() => {
+        if (!activeChanges) return;
+        for (const child of children) {
+            if (!activeChanges.children[child.collection]) {
+                activeChanges.children[child.collection] = { created: [], updated: [], deleted: [], linked: [], unlinked: [] };
+            }
+        }
+    });
 </script>
 
 {#if children.length}
@@ -52,7 +41,7 @@
                     collectionName={child.collection}
                     searchParams={{ children_of: collectionName, parent_id: entry.id }}
                     parentContext={{ collectionName, recordId: entry.id }}
-                    onOperation={makeHandler(child.collection)}
+                    bind:changes={activeChanges!.children[child.collection]}
                     showImport={false}
                     showHeader={true}
                     showFooter={true}

package/dist/components/detailView/update/detailViewChildren.svelte.d.ts

@@ -1,14 +1,9 @@
-type PendingOps = {
-    link?: (string | number)[];
-    unlink?: (string | number)[];
-    delete?: (string | number)[];
-    create?: any[];
-};
+import type { Changes } from "../utils";
 interface LocalProp {
     collectionName: string;
     entry: any;
-    pendingChildren?: Record<string, PendingOps>;
+    activeChanges?: Changes;
 }
-declare const DetailViewChildren: import("svelte").Component<LocalProp, {}, "pendingChildren">;
+declare const DetailViewChildren: import("svelte").Component<LocalProp, {}, "">;
 type DetailViewChildren = ReturnType<typeof DetailViewChildren>;
 export default DetailViewChildren;

package/dist/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/dist/components/detailView/update/updateDetailView.svelte.d.ts

@@ -7,13 +7,13 @@ export interface UpdateDetailViewProp {
     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;
 }
 import type { Snippet } from "svelte";
-declare const UpdateDetailView: import("svelte").Component<UpdateDetailViewProp, {}, "">;
+declare const UpdateDetailView: import("svelte").Component<UpdateDetailViewProp, {}, "changes">;
 type UpdateDetailView = ReturnType<typeof UpdateDetailView>;
 export default UpdateDetailView;

package/dist/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/dist/components/detailView/update/updateDetailViewButton.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { UpdateDetailViewProp } from "./updateDetailView.svelte";
-import type { ButtonProps } from "../../../components/ui/button/button.svelte";
+import type { ButtonProps } from "../../ui/button/button.svelte";
 interface LocalProp extends UpdateDetailViewProp {
     variant?: ButtonProps["variant"];
     class?: ButtonProps["class"];

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

@@ -1,5 +1,22 @@
 import type { CTX } from "../../store.types";
 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 declare function getDefaultEntry(ctx: CTX, fieldNames: string[], collectionName: string, values?: Record<string, any>): {
     [k: string]: any;
 };

package/dist/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";