@lobb-js/studio 0.5.0 → 0.6.0

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

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { CreateDetailViewProp } from "./createDetailView.svelte";
-	import type { ButtonProps } from "../../ui/button/button.svelte";
-	import Button from "../../ui/button/button.svelte";
-    import { openCreateDetailView } from "../store.svelte";
+	import type { ButtonProps } from "../../../components/ui/button/button.svelte";
+	import Button from "../../../components/ui/button/button.svelte";
+	import CreateDetailView from "./createDetailView.svelte";
 
 	interface LocalProp extends CreateDetailViewProp {
 		variant?: ButtonProps["variant"];
@@ -12,21 +12,26 @@
 	}
 
 	let props: LocalProp = $props();
-	let entry: Record<string, any> | undefined = $state();
+	let open = $state(false);
 </script>
 
 <Button
 	variant={props.variant}
 	class={props.class}
 	Icon={props.Icon}
-	onclick={() => {
-		openCreateDetailView({
-			values: entry,
-			...props
-		});
-	}}
+	onclick={() => { open = true; }}
 >
 	{#if props.children}
 		{@render props.children()}
 	{/if}
 </Button>
+
+{#if open}
+	<CreateDetailView
+		{...props}
+		onCancel={async () => {
+			open = false;
+			await props.onCancel?.();
+		}}
+	/>
+{/if}

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

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

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

@@ -11,12 +11,14 @@
     import Table, { type TableProps } from "../../dataTable/table.svelte";
     import Button from "../../ui/button/button.svelte";
     import CreateDetailViewButton from "./createDetailViewButton.svelte";
-    import { getCollectionColumns } from "../../dataTable/utils";
-    import SelectRecord from "../../selectRecord.svelte";
-    import FieldCell from "../../dataTable/fieldCell.svelte";
+    import { getCollectionColumns } from "../../../components/dataTable/utils";
+    import SelectRecord from "../../../components/selectRecord.svelte";
+    import FieldCell from "../../../components/dataTable/fieldCell.svelte";
     import SubRecords from "./subRecords.svelte";
-    import ChildRecords from "../../dataTable/childRecords.svelte";
-    import { ctx } from "../../../store.svelte";
+    import ChildRecords from "../../../components/dataTable/childRecords.svelte";
+    import { getStudioContext } from "../../../context";
+
+    const { ctx } = getStudioContext();
 
     interface ParentRecord {
         id: string;
@@ -47,7 +49,7 @@
             (relation) => relation.to.collection === collectionName,
         ),
     );
-    const columns: TableProps["columns"] = getCollectionColumns(collectionName);
+    const columns: TableProps["columns"] = getCollectionColumns(ctx, collectionName);
     const refrenceFieldName = ctx.meta.relations.find(
         (relation) =>
             relation.from.collection === collectionName &&

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

@@ -1,7 +1,9 @@
 <script lang="ts">
-    import { ctx } from "../../../store.svelte";
+    import { getStudioContext } from "../../../context";
     import CreateManyView from "./createManyView.svelte";
 
+    const { ctx } = getStudioContext();
+
     interface Props {
         collectionName: string;
         parentEntry: any;

package/dist/components/detailView/fieldInput.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
-	import { ctx } from "../../store.svelte";
+	import { getStudioContext } from "../../context";
 	import { getFieldRelation } from "../../utils";
 	import { Ban, Check, CircleAlert, X } from "lucide-svelte";
 	import { getField } from "../dataTable/utils";
 	import Button from "../ui/button/button.svelte";
 	import FieldCustomInput from "./fieldCustomInput.svelte";
 	import Input from "../ui/input/input.svelte";
-	import * as Select from "../ui/select/index";
+	import * as Select from "../../components/ui/select/index";
 	import Textarea from "../ui/textarea/textarea.svelte";
 	import ForeingKeyInput from "../foreingKeyInput.svelte";
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../extensions/extensionUtils";
 
+	const { ctx, lobb } = getStudioContext();
+
 	interface Props {
 		collectionName: string;
 		fieldName: string;
@@ -32,8 +34,8 @@
 		ctx.meta.collections[collectionName].fields[fieldName].ui?.input;
 	const ui =
 		ctx.meta.collections[collectionName].fields[fieldName].ui;
-	const field = getField(fieldName, collectionName);
-	const fieldRelation = getFieldRelation(collectionName, fieldName);
+	const field = getField(ctx, fieldName, collectionName);
+	const fieldRelation = getFieldRelation(ctx, collectionName, fieldName);
 	const isDisabled = field.key === 'id' || Boolean(ui?.disabled)
 	const disabledClasses = "pointer-events-none opacity-50";
 	const destructive: boolean = $derived(Boolean(errorMessages.length));
@@ -72,7 +74,7 @@
 		{:else if fieldRelation && entry}
 			<ExtensionsComponents
 				name="detailView.fields.foreignKey.{fieldRelation.to.collection}"
-				utils={getExtensionUtils()}
+				utils={getExtensionUtils(lobb, ctx)}
 				parentCollectionName={collectionName}
 				collectionName={fieldRelation.to.collection}
 				bind:value

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 "../ui/select/index";
+	import * as Select from "../../components/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/store.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { CreateDetailViewProp } from "./create/createDetailView.svelte";
 import type { UpdateDetailViewProp } from "./update/updateDetailView.svelte";
-export declare function openCreateDetailView(props: CreateDetailViewProp): void;
-export declare function openUpdateDetailView(props: UpdateDetailViewProp): Promise<void>;
+import type { StudioContext } from "../../context";
+export declare function openCreateDetailView(studioContext: StudioContext, props: CreateDetailViewProp): void;
+export declare function openUpdateDetailView(studioContext: StudioContext, props: UpdateDetailViewProp): Promise<void>;

package/dist/components/detailView/store.svelte.js

@@ -47,10 +47,10 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import CreateDetailView from "./create/createDetailView.svelte";
 import UpdateDetailView from "./update/updateDetailView.svelte";
-import { lobb } from "../../store.svelte";
 import { getCollectionParamsFields } from "../dataTable/utils";
+import { createStudioContextMap } from "../../context";
 import { mount, unmount } from "svelte";
-export function openCreateDetailView(props) {
+export function openCreateDetailView(studioContext, props) {
     var _this = this;
     var targetElement = document.querySelector('main');
     if (!targetElement) {
@@ -58,15 +58,14 @@ export function openCreateDetailView(props) {
     }
     var mountedCreateDetailView = mount(CreateDetailView, {
         target: targetElement,
+        context: createStudioContextMap(studioContext),
         props: __assign(__assign({}, props), { onCancel: function () { return __awaiter(_this, void 0, void 0, function () {
                 var _a;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
                             (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
-                            return [4 /*yield*/, unmount(mountedCreateDetailView, {
-                                    outro: true
-                                })];
+                            return [4 /*yield*/, unmount(mountedCreateDetailView, { outro: true })];
                         case 1:
                             _b.sent();
                             return [2 /*return*/];
@@ -75,18 +74,17 @@ export function openCreateDetailView(props) {
             }); } }),
     });
 }
-export function openUpdateDetailView(props) {
+export function openUpdateDetailView(studioContext, props) {
     return __awaiter(this, void 0, void 0, function () {
-        var params, response, result, entry, targetElement, mountedUpdateDetailView;
+        var lobb, ctx, params, response, result, entry, targetElement, mountedUpdateDetailView;
         var _this = this;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
+                    lobb = studioContext.lobb, ctx = studioContext.ctx;
                     params = {
-                        fields: getCollectionParamsFields(props.collectionName, true),
-                        filter: {
-                            id: props.recordId,
-                        },
+                        fields: getCollectionParamsFields(ctx, props.collectionName, true),
+                        filter: { id: props.recordId },
                         limit: 1,
                     };
                     return [4 /*yield*/, lobb.findAll(props.collectionName, params)];
@@ -102,15 +100,14 @@ export function openUpdateDetailView(props) {
                     }
                     mountedUpdateDetailView = mount(UpdateDetailView, {
                         target: targetElement,
+                        context: createStudioContextMap(studioContext),
                         props: __assign(__assign({}, props), { onCancel: function () { return __awaiter(_this, void 0, void 0, function () {
                                 var _a;
                                 return __generator(this, function (_b) {
                                     switch (_b.label) {
                                         case 0:
                                             (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
-                                            return [4 /*yield*/, unmount(mountedUpdateDetailView, {
-                                                    outro: true
-                                                })];
+                                            return [4 /*yield*/, unmount(mountedUpdateDetailView, { outro: true })];
                                         case 1:
                                             _b.sent();
                                             return [2 /*return*/];

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

@@ -1,11 +1,13 @@
 <script lang="ts">
-    import DataTable from "../../dataTable/dataTable.svelte";
-    import { ctx } from "../../../store.svelte";
+    import DataTable from "../../../components/dataTable/dataTable.svelte";
+    import { getStudioContext } from "../../../context";
     import { Link, Plus, TableIcon } from "lucide-svelte";
     import CreateDetailViewButton from "../create/createDetailViewButton.svelte";
-    import ExtensionsComponents from "../../extensionsComponents.svelte";
+    import ExtensionsComponents from "../../../components/extensionsComponents.svelte";
     import { getExtensionUtils } from "../../../extensions/extensionUtils";
 
+    const { ctx, lobb } = getStudioContext();
+
     interface LocalProp {
         collectionName: string;
         entry: any;
@@ -33,7 +35,7 @@
                 {@const childField = relation.from.field}
                 <ExtensionsComponents
                     name="detailView.update.subRecords.{childCollection}"
-                    utils={getExtensionUtils()}
+                    utils={getExtensionUtils(lobb, ctx)}
                     collectionName={childCollection}
                     filter={{
                         [childField]: entry.id,

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

@@ -19,19 +19,21 @@
 
 <script lang="ts">
     import { ArrowLeft, Pencil, X } from "lucide-svelte";
-    import Button from "../../ui/button/button.svelte";
+    import Button from "../../../components/ui/button/button.svelte";
     import { fade, fly } from "svelte/transition";
-    import { lobb, ctx } from "../../../store.svelte";
+    import { getStudioContext } from "../../../context";
     import { toast } from "svelte-sonner";
     import ExtensionsComponents from "../../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../../extensions/extensionUtils";
+
+    const { lobb, ctx } = getStudioContext();
     import { calculateDrawerWidth, getChangedProperties } from "../../../utils";
     import { getField, getFieldIcon } from "../../dataTable/utils";
     import Children from "../update/children.svelte";
     import type { Snippet } from "svelte";
     import { getDefaultEntry, parseDetailViewValues, serializeEntry } from "../utils";
     import FieldInput from "../fieldInput.svelte";
-  import Drawer from "../../drawer.svelte";
+  import Drawer from "../../../components/drawer.svelte";
 
     let {
         collectionName,
@@ -44,11 +46,11 @@
         recordId,
     }: UpdateDetailViewProp = $props();
 
-    parseDetailViewValues(collectionName, values)
+    parseDetailViewValues(ctx, collectionName, values)
 
     const fieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
     let entry: Record<string, any> = $state(
-        getDefaultEntry(fieldNames, collectionName, values),
+        getDefaultEntry(ctx, fieldNames, collectionName, values),
     );
     const initialEntry = $state.snapshot(entry);
     let localEntry = $derived(
@@ -58,7 +60,7 @@
 
     async function handleSave() {
         delete localEntry.id;
-        localEntry = serializeEntry(collectionName, localEntry);
+        localEntry = serializeEntry(ctx, collectionName, localEntry);
 
         const response = await lobb.updateOne(
             collectionName,
@@ -111,8 +113,8 @@
     <div class="flex-1 overflow-y-auto">
         <div class="flex flex-col gap-4 p-4">
             {#each fieldNames as fieldName}
-                {@const field = getField(fieldName, collectionName)}
-                {@const FieldIcon = getFieldIcon(fieldName, collectionName)}
+                {@const field = getField(ctx, fieldName, collectionName)}
+                {@const FieldIcon = getFieldIcon(ctx, fieldName, collectionName)}
                 <div
                     class="flex flex-col gap-2"
                 >
@@ -131,7 +133,7 @@
                         <div>
                             <ExtensionsComponents
                                 name="dvFields.topRight.{collectionName}.{fieldName}"
-                                utils={getExtensionUtils()}
+                                utils={getExtensionUtils(lobb, ctx)}
                                 bind:value={entry[fieldName]}
                             />
                         </div>

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

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import type { UpdateDetailViewProp } from "./updateDetailView.svelte";
-	import type { ButtonProps } from "../../ui/button/button.svelte";
-	import Button from "../../ui/button/button.svelte";
-    import { openUpdateDetailView } from "../store.svelte";
+	import type { ButtonProps } from "../../../components/ui/button/button.svelte";
+	import Button from "../../../components/ui/button/button.svelte";
+	import UpdateDetailView from "./updateDetailView.svelte";
+	import { getStudioContext } from "../../../context";
+	import { getCollectionParamsFields } from "../../dataTable/utils";
 
 	interface LocalProp extends UpdateDetailViewProp {
 		variant?: ButtonProps["variant"];
@@ -12,21 +14,43 @@
 	}
 
 	let props: LocalProp = $props();
-	let entry: Record<string, any> | undefined = $state();
+	let open = $state(false);
+	let values: Record<string, any> | undefined = $state(undefined);
+
+	const { lobb, ctx } = getStudioContext();
+
+	async function openView() {
+		const params = {
+			fields: getCollectionParamsFields(ctx, props.collectionName, true),
+			filter: { id: props.recordId },
+			limit: 1,
+		};
+		const response = await lobb.findAll(props.collectionName, params);
+		const result = await response.json();
+		values = result.data[0];
+		open = true;
+	}
 </script>
 
 <Button
 	variant={props.variant}
 	class={props.class}
 	Icon={props.Icon}
-	onclick={() => {
-		openUpdateDetailView({
-			values: entry,
-			...props
-		});
-	}}
+	onclick={openView}
 >
 	{#if props.children}
 		{@render props.children()}
 	{/if}
-</Button>
+</Button>
+
+{#if open && values}
+	<UpdateDetailView
+		{...props}
+		{values}
+		onCancel={async () => {
+			open = false;
+			values = undefined;
+			await props.onCancel?.();
+		}}
+	/>
+{/if}

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

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

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

@@ -1,8 +1,9 @@
+import type { CTX } from "../../store.types";
 import type { DetailFormField } from "./detailViewForm.svelte";
-export declare function getDefaultEntry(fieldNames: string[], collectionName: string, values?: Record<string, any>): {
+export declare function getDefaultEntry(ctx: CTX, fieldNames: string[], collectionName: string, values?: Record<string, any>): {
     [k: string]: any;
 };
-export declare function serializeEntry(collectionName: string, entry: Record<string, any>, rollback?: boolean): Record<string, any>;
-export declare function generateTransactionBody(collectionName: string, entry: Record<string, any>): any[];
-export declare function parseDetailViewValues(collectionName: string, values: Record<string, any>): void;
-export declare function getCollectionFields(collectionName: string): DetailFormField[];
+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 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

@@ -10,14 +10,13 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import Mustache from "mustache";
-import { ctx } from "../../store.svelte";
 import { getFieldRelation } from "../../utils";
 import { getField } from "../dataTable/utils";
-export function getDefaultEntry(fieldNames, collectionName, values) {
+export function getDefaultEntry(ctx, fieldNames, collectionName, values) {
     return Object.fromEntries(fieldNames.map(function (fieldName) {
         var _a;
         var value = null;
-        var field = getField(fieldName, collectionName);
+        var field = getField(ctx, fieldName, collectionName);
         if (values && values[fieldName] !== undefined) {
             value = values[fieldName];
         }
@@ -35,14 +34,14 @@ export function getDefaultEntry(fieldNames, collectionName, values) {
         return [fieldName, value];
     }));
 }
-export function serializeEntry(collectionName, entry, rollback) {
+export function serializeEntry(ctx, collectionName, entry, rollback) {
     if (rollback === void 0) { rollback = false; }
     // deep clone the object
     entry = __assign({}, entry);
     // serialize the foreign key field's value
     for (var _i = 0, _a = Object.entries(entry); _i < _a.length; _i++) {
         var _b = _a[_i], fieldName = _b[0], fieldValue = _b[1];
-        var isRefrenceField = Boolean(getFieldRelation(collectionName, fieldName));
+        var isRefrenceField = Boolean(getFieldRelation(ctx, collectionName, fieldName));
         if (isRefrenceField && fieldValue !== null && fieldValue.id !== undefined) {
             entry[fieldName] = fieldValue.id;
         }
@@ -56,14 +55,14 @@ export function serializeEntry(collectionName, entry, rollback) {
             var childrenEntries = entry[childrenCollectionName];
             if (childrenEntries) {
                 for (var index_1 = 0; index_1 < childrenEntries.length; index_1++) {
-                    childrenEntries[index_1] = serializeEntry(childrenCollectionName, childrenEntries[index_1]);
+                    childrenEntries[index_1] = serializeEntry(ctx, childrenCollectionName, childrenEntries[index_1]);
                 }
             }
         }
     }
     return entry;
 }
-export function generateTransactionBody(collectionName, entry) {
+export function generateTransactionBody(ctx, collectionName, entry) {
     entry = __assign({}, entry);
     function handleEntryRecursive(transactionBody, collectionName, entry, parentTransactionIndex) {
         var _a;
@@ -118,7 +117,7 @@ export function generateTransactionBody(collectionName, entry) {
     handleEntryRecursive(transactionBody, collectionName, entry);
     return transactionBody;
 }
-export function parseDetailViewValues(collectionName, values) {
+export function parseDetailViewValues(ctx, collectionName, values) {
     var forignFieldNames = ctx.meta.relations
         .filter(function (relation) { return relation.from.collection === collectionName; })
         .map(function (relation) { return relation.from.field; });
@@ -136,12 +135,12 @@ export function parseDetailViewValues(collectionName, values) {
         }
         else if (childCollectionNames.includes(key)) {
             for (var index = 0; index < values[key].length; index++) {
-                parseDetailViewValues(key, values[key][index]);
+                parseDetailViewValues(ctx, key, values[key][index]);
             }
         }
     }
 }
-export function getCollectionFields(collectionName) {
+export function getCollectionFields(ctx, collectionName) {
     var returnedData = [];
     var collectionFields = ctx.meta.collections[collectionName].fields;
     var isSingleton = ctx.meta.collections[collectionName].singleton;

package/dist/components/extensionsComponents.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
 	import { loadExtensionComponents } from "../extensions/extensionUtils";
+	import { getStudioContext } from "../context";
+
+	const { ctx } = getStudioContext();
 
 	interface Props {
 		name: string;
@@ -18,7 +21,7 @@
 		...props
 	}: Props = $props();
 
-	const Components = loadExtensionComponents(name, filterByExtensions);
+	const Components = loadExtensionComponents(ctx, name, filterByExtensions);
 </script>
 
 {#if Components.length}

package/dist/components/miniSidebar.svelte

@@ -11,14 +11,16 @@
 </script>
 
 <script lang="ts">
-	import { House, Layers, Library, LogOut, Workflow, X } from "lucide-svelte";
-	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 { 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 { ctx } from "../store.svelte";
+	import { getStudioContext } from "../context";
 	import { getDashboardNavs } from "../extensions/extensionUtils";
+
+	const { ctx } = getStudioContext();
 	import { mediaQueries } from "../utils";
 	import * as Popover from "./ui/popover";
 	import { location } from "@wjfe/n-savant";
@@ -50,7 +52,7 @@
 		[],
 	];
 
-	const navs = getDashboardNavs();
+	const navs = getDashboardNavs(ctx);
 
 	if (navs.top) {
 		sections[0] = [...sections[0], ...navs.top];
@@ -62,20 +64,6 @@
 		sections[2] = [...sections[2], ...navs.bottom];
 	}
 
-	// adding the logout server button
-	if (!window.APP_ENV.LOBB_URL) {
-		sections[2] = [
-			...sections[2],
-			{
-				label: "Log out of the server",
-				onclick: () => {
-					localStorage.removeItem("lobb_url");
-					ctx.lobbUrl = null;
-				},
-				icon: LogOut,
-			},
-		];
-	}
 </script>
 
 {#snippet section(section: any)}

package/dist/components/rangeCalendarButton.svelte

@@ -11,9 +11,9 @@
         today,
     } from "@internationalized/date";
     import { cn } from "../utils.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 { 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 Input from "./ui/input/input.svelte";
 
     interface Props {

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

@@ -1,11 +1,13 @@
 <script>
     import { CircleSlash2 } from "lucide-svelte";
-    import DataTable from "../../dataTable/dataTable.svelte";
-    import SidebarTrigger from "../../sidebar/sidebarTrigger.svelte";
-    import { ctx } from "../../../store.svelte";
-    import Singletone from "../../singletone.svelte";
+    import DataTable from "../../../components/dataTable/dataTable.svelte";
+    import SidebarTrigger from "../../../components/sidebar/sidebarTrigger.svelte";
+    import { getStudioContext } from "../../../context";
+    import Singletone from "../../../components/singletone.svelte";
     import { getExtensionUtils } from "../../../extensions/extensionUtils";
-    import ExtensionsComponents from "../../extensionsComponents.svelte";
+    import ExtensionsComponents from "../../../components/extensionsComponents.svelte";
+
+    const { ctx, lobb } = getStudioContext();
 
     let { collectionName } = $props();
     let isSingletonCollection = $derived(ctx.meta.collections[collectionName].singleton);
@@ -19,7 +21,7 @@
         <!-- {#if true}
             <ExtensionsComponents
                 name="studio.listView"
-                utils={getExtensionUtils()}
+                utils={getExtensionUtils(lobb, ctx)}
             ></ExtensionsComponents>
         {:else if isSingletonCollection} -->
         {#if isSingletonCollection}

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

@@ -1,8 +1,10 @@
 <script lang="ts">
-    import type { SideBarData } from "../../sidebar/sidebarElements.svelte";
-    import Sidebar from "../../sidebar/sidebar.svelte";
-    import { ctx } from "../../../store.svelte";
+    import type { SideBarData } from "../../../components/sidebar/sidebarElements.svelte";
+    import Sidebar from "../../../components/sidebar/sidebar.svelte";
+    import { getStudioContext } from "../../../context";
     import Collection from "./collection.svelte";
+
+    const { ctx } = getStudioContext();
     import { Table } from "lucide-svelte";
 
     let { collectionName } = $props();

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

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

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

@@ -13,7 +13,9 @@
     } from "@xyflow/svelte";
     import { getLayoutedElements } from "./utils";
     import { onMount } from "svelte";
-    import { ctx } from "../../../store.svelte";
+    import { getStudioContext } from "../../../context";
+
+    const { ctx } = getStudioContext();
 
     const { fitView } = useSvelteFlow();