@lobb-js/studio 0.4.0 → 0.6.0

package/dist/components/LlmButton.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
-	import { lobb, ctx } from "../store.svelte";
+	import { getStudioContext } from "../context";
 	import { Brain, LoaderIcon, Send } from "lucide-svelte";
+
+	const { lobb, ctx } = getStudioContext();
 	import Button, { type ButtonProps } from "./ui/button/button.svelte";
 	import * as Popover from "./ui/popover";
 	import Textarea from "./ui/textarea/textarea.svelte";

package/dist/components/Studio.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
-    import { Toaster } from "./ui/sonner";
+    import { Toaster } from "../components/ui/sonner";
     import { onMount, onDestroy } from "svelte";
     import { ModeWatcher } from "mode-watcher";
-    import { lobb, ctx } from "../store.svelte";
-    import Header from "./header.svelte";
+    import { createLobb } from "../store.svelte";
+    import { setStudioContext } from "../context";
+    import Header from "../components/header.svelte";
     import { LoaderCircle, ServerOff } from "lucide-svelte";
-    import Dialog from "./confirmationDialog/confirmationDialog.svelte";
-    import MiniSidebar from "./miniSidebar.svelte";
-    import SetServerPage from "./setServerPage.svelte";
-    import * as Tooltip from "./ui/tooltip";
-    import { Router, Route, Fallback, init as initRouter,  } from "@wjfe/n-savant";
+    import MiniSidebar from "../components/miniSidebar.svelte";
+    import * as Tooltip from "../components/ui/tooltip";
+    import { Router, Route, Fallback, init as initRouter } from "@wjfe/n-savant";
     import {
         executeExtensionsOnStartup,
         loadExtensions,
@@ -22,123 +21,104 @@
     import Extension from "./routes/extensions/extension.svelte";
 
     interface StudioProps {
-      extensions?: any[];
+        extensions?: any[];
+        lobbUrl?: string;
     }
 
-    const props: StudioProps = $props()
+    const { lobbUrl, extensions }: StudioProps = $props();
 
-    let error: string | null = $state(null);
-    let loaded = $state(false);
+    const ctx = $state({
+        lobbUrl: lobbUrl ?? "",
+        extensions: {},
+        meta: null,
+        currentUrl: new URL(window.location.href),
+    });
+
+    const lobb = createLobb(lobbUrl ?? "");
+
+    setStudioContext({ ctx, lobb });
+
+    let status: "loading" | "error" | "ready" = $state("loading");
     let isSmallScreen = $derived(!mediaQueries.sm.current);
     let cleanupRouter: (() => void) | undefined;
 
     onMount(async () => {
         cleanupRouter = initRouter();
-
-        if (ctx.lobbUrl) {
-            try {
-                ctx.meta = await lobb.getMeta();
-                ctx.extensions = await loadExtensions(props.extensions);
-                await executeExtensionsOnStartup();
-            } catch (err) {
-                console.error(err);
-                error = "CANT_CONNECT";
-            }
+        try {
+            ctx.meta = await lobb.getMeta();
+            ctx.extensions = await loadExtensions(lobb, ctx, extensions);
+            await executeExtensionsOnStartup(lobb, ctx);
+            status = "ready";
+        } catch (err) {
+            console.error(err);
+            status = "error";
         }
-        loaded = true;
     });
 
     onDestroy(() => {
-        if (cleanupRouter) {
-            cleanupRouter();
-        }
+        if (cleanupRouter) cleanupRouter();
     });
 </script>
 
 <ModeWatcher defaultMode="light" />
 <Toaster position="top-right" class="z-50" />
-{#if loaded}
-    {#if ctx.lobbUrl}
-        <Tooltip.Provider delayDuration={0} disableHoverableContent={true}>
-            <main
-                class="bg-muted h-screen w-screen"
-                style="display: grid; grid-template-columns: {isSmallScreen
-                    ? '1fr'
-                    : '3.5rem 1fr'};"
-            >
-                <MiniSidebar />
-                <div class="second_grid">
-                    <Header />
-                    <Router id="root-router" basePath="/studio">
-                        <Route key="home" path="/">
-                            {#snippet children(params)}
-                                <Home />
-                            {/snippet}
-                        </Route>
-                        <Route
-                            key="collections"
-                            path="/collections/:collection?"
-                        >
-                            {#snippet children(params)}
-                                <Collections
-                                    collectionName={params?.collection}
-                                />
-                            {/snippet}
-                        </Route>
-                        <Route key="datamodel" path="/datamodel/*">
-                            {#snippet children(params)}
-                                <DataModel />
-                            {/snippet}
-                        </Route>
-                        <Route key="workflows" path="/workflows/:workflow?">
-                            {#snippet children(params)}
-                                <Workflows workflowName={params?.workflow} />
-                            {/snippet}
-                        </Route>
-                        <Route
-                            key="extensions"
-                            path="/extensions/:extension?/:page?/*"
-                        >
-                            {#snippet children(params)}
-                                <Extension
-                                    extension={params?.extension}
-                                    page={params?.page}
-                                />
-                            {/snippet}
-                        </Route>
-                        <Fallback>Not Found</Fallback>
-                    </Router>
-                </div>
-            </main>
-        </Tooltip.Provider>
-    {:else}
-        <SetServerPage />
-    {/if}
-{:else if !error}
-    <div
-        class="flex h-screen w-full flex-col items-center justify-center gap-4 text-muted-foreground"
-    >
+
+{#if status === "loading"}
+    <div class="flex h-screen w-full flex-col items-center justify-center gap-4 text-muted-foreground">
         <LoaderCircle class="animate-spin opacity-50" size="50" />
         <div class="flex flex-col items-center justify-center">
             <div>Loading the dashboard, please wait...</div>
-            <div class="text-xs">
-                Loading and importing all necessary data and components from the
-                lobb server.
-            </div>
+            <div class="text-xs">Loading and importing all necessary data and components from the lobb server.</div>
         </div>
     </div>
-{:else}
-    <div
-        class="flex h-full w-full flex-col items-center justify-center gap-4 text-muted-foreground"
-    >
+{:else if status === "error"}
+    <div class="flex h-screen w-full flex-col items-center justify-center gap-4 text-muted-foreground">
         <ServerOff class="opacity-50" size="50" />
         <div class="flex flex-col items-center justify-center">
             <div>Could not connect to the server</div>
-            <div class="text-xs">
-                Could not connect to the lobb server at this endpoint ({ctx.lobbUrl})
-            </div>
+            <div class="text-xs">Could not connect to the lobb server at this endpoint ({ctx.lobbUrl})</div>
         </div>
     </div>
+{:else}
+    <Tooltip.Provider delayDuration={0} disableHoverableContent={true}>
+        <main
+            class="bg-muted h-screen w-screen"
+            style="display: grid; grid-template-columns: {isSmallScreen ? '1fr' : '3.5rem 1fr'};"
+        >
+            <MiniSidebar />
+            <div class="second_grid">
+                <Header />
+                <Router id="root-router" basePath="/studio">
+                    <Route key="home" path="/">
+                        {#snippet children(params)}
+                            <Home />
+                        {/snippet}
+                    </Route>
+                    <Route key="collections" path="/collections/:collection?">
+                        {#snippet children(params)}
+                            <Collections collectionName={params?.collection} />
+                        {/snippet}
+                    </Route>
+                    <Route key="datamodel" path="/datamodel/*">
+                        {#snippet children(params)}
+                            <DataModel />
+                        {/snippet}
+                    </Route>
+                    <Route key="workflows" path="/workflows/:workflow?">
+                        {#snippet children(params)}
+                            <Workflows workflowName={params?.workflow} />
+                        {/snippet}
+                    </Route>
+                    <Route key="extensions" path="/extensions/:extension?/:page?/*">
+                        {#snippet children(params)}
+                            <Extension extension={params?.extension} page={params?.page} />
+                        {/snippet}
+                    </Route>
+                    <Fallback>Not Found</Fallback>
+                </Router>
+            </div>
+        </main>
+    </Tooltip.Provider>
 {/if}
 
 <style>

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

@@ -1,5 +1,6 @@
 interface StudioProps {
     extensions?: any[];
+    lobbUrl?: string;
 }
 declare const Studio: import("svelte").Component<StudioProps, {}, "">;
 type Studio = ReturnType<typeof Studio>;

package/dist/components/breadCrumbs.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import * as Breadcrumb from "./ui/breadcrumb";
-	import { ctx } from "../store.svelte";
 	import { mediaQueries } from "../utils";
 	import { location } from "@wjfe/n-savant";
 

package/dist/components/combobox.svelte

@@ -2,9 +2,9 @@
     import CheckIcon from "@lucide/svelte/icons/check";
     import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
     import { tick } from "svelte";
-    import * as Command from "./ui/command/index.js";
-    import * as Popover from "./ui/popover/index.js";
-    import { Button } from "./ui/button/index.js";
+    import * as Command from "../components/ui/command/index.js";
+    import * as Popover from "../components/ui/popover/index.js";
+    import { Button } from "../components/ui/button/index.js";
     import { cn } from "../utils.js";
     import type { HTMLButtonAttributes } from "svelte/elements";
 

package/dist/components/confirmationDialog/confirmationDialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as AlertDialog from "../ui/alert-dialog/index";
+	import * as AlertDialog from "../../components/ui/alert-dialog/index";
 	import { Check, X } from "lucide-svelte";
 	import Button from "../ui/button/button.svelte";
 

package/dist/components/createManyButton.svelte

@@ -4,8 +4,10 @@
 	import Button, { type ButtonProps } from "./ui/button/button.svelte";
 	import { toast } from "svelte-sonner";
 	import CodeEditor from "./codeEditor.svelte";
-	import { lobb } from "../store.svelte";
+	import { getStudioContext } from "../context";
 	import { calculateDrawerWidth } from "../utils";
+
+	const { lobb } = getStudioContext();
   import Drawer from "./drawer.svelte";
 
 	interface LocalProps extends ButtonProps {

package/dist/components/dataTable/childRecords.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-    import { ctx } from "../../store.svelte";
+    import { getStudioContext } from "../../context";
     import { ChevronRight, Plus, Smartphone, Table } from "lucide-svelte";
     import DataTable from "./dataTable.svelte";
     import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../extensions/extensionUtils";
 
+    const { ctx, lobb } = getStudioContext();
+
     interface Props {
         collectionName: string;
         recordId: string;
@@ -112,7 +114,7 @@
                                     filter={{
                                         [fromField]: recordId,
                                     }}
-                                    utils={getExtensionUtils()}
+                                    utils={getExtensionUtils(lobb, ctx)}
                                 >
                                     <DataTable
                                         collectionName={fromCollection}

package/dist/components/dataTable/dataTable.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import _ from "lodash";
-    import { lobb, ctx } from "../../store.svelte";
+    import { getStudioContext } from "../../context";
     import Footer from "./footer.svelte";
     import Header from "./header.svelte";
     import Table, { type TableProps } from "./table.svelte";
@@ -16,6 +16,8 @@
     import { emitEvent } from "../../eventSystem";
     import type { Snippet } from "svelte";
 
+    const { lobb, ctx } = getStudioContext();
+
     interface Props {
         collectionName: string;
         filter?: any;
@@ -38,7 +40,7 @@
         headerLeft,
     }: Props = $props();
 
-    const fields = getCollectionParamsFields(collectionName);
+    const fields = getCollectionParamsFields(ctx, collectionName);
     let params = $state({
         fields: fields,
         filter: filter ?? {},
@@ -52,7 +54,7 @@
     let data: TableProps["data"] = $state([]);
     let loading = $state(true);
     const columns: TableProps["columns"] = $state(
-        getCollectionColumns(collectionName),
+        getCollectionColumns(ctx, collectionName),
     );
     let dataTableContainerWidth: number = $state(0);
     let dataTableWidth: number = $state(0);
@@ -105,6 +107,7 @@
     ): Promise<any[]> {
         // TODO: instead of firing the events like this. get them all the fire them one by one to get their results
         const eventResult = await emitEvent(
+            { lobb, ctx },
             "studio.collections.listView.tools",
             {
                 collectionName,

package/dist/components/dataTable/fieldCell.svelte

@@ -4,6 +4,9 @@
     import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";
     import { getField } from "./utils";
     import _ from "lodash";
+    import { getStudioContext } from "../../context";
+
+    const { ctx } = getStudioContext();
 
     interface Props {
         collectionName: string;
@@ -21,10 +24,10 @@
         tableParams = $bindable(),
     }: Props = $props();
 
-    const field = getField(fieldName, collectionName);
-    const relation = getFieldRelation(collectionName, fieldName);
+    const field = getField(ctx, fieldName, collectionName);
+    const relation = getFieldRelation(ctx, collectionName, fieldName);
     const isRefrenceField = Boolean(
-        getFieldRelation(collectionName, fieldName),
+        getFieldRelation(ctx, collectionName, fieldName),
     );
 </script>
 

package/dist/components/dataTable/filter.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import * as Popover from "../ui/popover/index.js";
+    import * as Popover from "../../components/ui/popover/index.js";
     import Filter from "./filter.svelte";
     import {
         Plus,
@@ -11,9 +11,11 @@
     } from "lucide-svelte";
     import { buttonVariants } from "../ui/button";
     import _ from "lodash";
-    import { ctx } from "../../store.svelte";
+    import { getStudioContext } from "../../context";
     import Button from "../ui/button/button.svelte";
 
+    const { ctx } = getStudioContext();
+
     interface Props {
         filter: any;
         collectionName: string;

package/dist/components/dataTable/filterButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Popover from "../ui/popover/index.js";
+	import * as Popover from "../../components/ui/popover/index.js";
 	import { ListFilter } from "lucide-svelte";
 	import { buttonVariants } from "../ui/button";
 	import Filter from "./filter.svelte";

package/dist/components/dataTable/header.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-    import { lobb, ctx } from "../../store.svelte";
+    import { getStudioContext } from "../../context";
+
+    const { lobb, ctx } = getStudioContext();
     import { ListRestart, Plus, SquareStack, Trash } from "lucide-svelte";
     import LlmButton from "../LlmButton.svelte";
     import FilterButton from "./filterButton.svelte";

package/dist/components/dataTable/sort.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
     import _ from "lodash";
 
-    import * as Popover from "../ui/popover/index.js";
+    import * as Popover from "../../components/ui/popover/index.js";
     import { ArrowDown, ArrowUp, GripVertical, Plus, X } from "lucide-svelte";
     import Button, { buttonVariants } from "../ui/button/button.svelte";
     import Label from "../ui/label/label.svelte";
     import Switch from "../ui/switch/switch.svelte";
-    import { ctx } from "../../store.svelte";
+    import { getStudioContext } from "../../context";
     import { getFieldIcon } from "./utils";
 
+    const { ctx } = getStudioContext();
+
     interface Props {
         collectionName: string;
         sort: Record<string, "asc" | "desc">;
@@ -149,7 +151,7 @@
             </Popover.Trigger>
             <Popover.Content class="flex w-48 flex-col p-2">
                 {#each getFieldNames() as fieldName}
-                    {@const FieldIcon = getFieldIcon(fieldName, collectionName)}
+                    {@const FieldIcon = getFieldIcon(ctx, fieldName, collectionName)}
                     <button
                         onclick={() => {
                             sort[fieldName] = "asc";

package/dist/components/dataTable/sortButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import * as Popover from "../ui/popover/index.js";
+	import * as Popover from "../../components/ui/popover/index.js";
 	import { ArrowDownWideNarrow } from "lucide-svelte";
-	import { buttonVariants } from "../ui/button";
+	import { buttonVariants } from "../../components/ui/button";
 	import Sort from "./sort.svelte";
 
 	interface Props {

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

@@ -1,7 +1,8 @@
 import type { TableProps } from "./table.svelte";
-export declare function getCollectionColumns(collectionName: string): TableProps['columns'];
-export declare function getFieldIcon(fieldName: string, collectionName: string): any;
-export declare function getFields(collectionName: string): Record<string, any>;
-export declare function getField(fieldName: string, collectionName: string): any;
-export declare function getCollectionPrimaryField(collectionName: string): string | undefined;
-export declare function getCollectionParamsFields(collectionName: string, allFields?: boolean): string;
+import type { CTX } from "../../store.types";
+export declare function getCollectionColumns(ctx: CTX, collectionName: string): TableProps['columns'];
+export declare function getFieldIcon(ctx: CTX, fieldName: string, collectionName: string): any;
+export declare function getFields(ctx: CTX, collectionName: string): Record<string, any>;
+export declare function getField(ctx: CTX, fieldName: string, collectionName: string): any;
+export declare function getCollectionPrimaryField(ctx: CTX, collectionName: string): string | undefined;
+export declare function getCollectionParamsFields(ctx: CTX, collectionName: string, allFields?: boolean): string;

package/dist/components/dataTable/utils.js

@@ -1,20 +1,19 @@
-import { ctx } from "../../store.svelte";
 import { Binary, Braces, Brackets, Calendar, CalendarClock, Clock, Hash, Key, Text, Type, } from "lucide-svelte/icons";
-export function getCollectionColumns(collectionName) {
-    var collectionFields = getFields(collectionName);
+export function getCollectionColumns(ctx, collectionName) {
+    var collectionFields = getFields(ctx, collectionName);
     var headers = [];
     for (var fieldName in collectionFields) {
         var field = collectionFields[fieldName];
         headers.push({
             id: field.key,
             subtext: field.type,
-            icon: getFieldIcon(fieldName, collectionName),
+            icon: getFieldIcon(ctx, fieldName, collectionName),
         });
     }
     return headers;
 }
-export function getFieldIcon(fieldName, collectionName) {
-    var field = getField(fieldName, collectionName);
+export function getFieldIcon(ctx, fieldName, collectionName) {
+    var field = getField(ctx, fieldName, collectionName);
     if (fieldName === "id") {
         return Key;
     }
@@ -56,13 +55,13 @@ export function getFieldIcon(fieldName, collectionName) {
     }
     throw new Error("(".concat(field.type, ") doesnt have an icon"));
 }
-export function getFields(collectionName) {
+export function getFields(ctx, collectionName) {
     return ctx.meta.collections[collectionName].fields;
 }
-export function getField(fieldName, collectionName) {
-    return getFields(collectionName)[fieldName];
+export function getField(ctx, fieldName, collectionName) {
+    return getFields(ctx, collectionName)[fieldName];
 }
-export function getCollectionPrimaryField(collectionName) {
+export function getCollectionPrimaryField(ctx, collectionName) {
     var collectionFields = ctx.meta.collections[collectionName].fields;
     var primaryFieldObject = Object.values(collectionFields).find(function (field) { return field.type === "string"; });
     if (primaryFieldObject &&
@@ -72,7 +71,7 @@ export function getCollectionPrimaryField(collectionName) {
         return fieldName;
     }
 }
-export function getCollectionParamsFields(collectionName, allFields) {
+export function getCollectionParamsFields(ctx, collectionName, allFields) {
     if (allFields === void 0) { allFields = false; }
     var relations = ctx.meta.relations;
     var foreignFields = relations
@@ -93,7 +92,7 @@ export function getCollectionParamsFields(collectionName, allFields) {
         }
         columns.push("".concat(foreignField.field, ".id"));
         if (!allFields) {
-            var primaryField = getCollectionPrimaryField(foreignField.collection);
+            var primaryField = getCollectionPrimaryField(ctx, foreignField.collection);
             if (primaryField) {
                 columns.push("".concat(foreignField.field, ".").concat(primaryField));
             }

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

@@ -1,10 +1,12 @@
 <script lang="ts">
-    import { ctx } from "../../../store.svelte";
+    import { getStudioContext } from "../../../context";
     import { Link } from "lucide-svelte";
     import CreateManyView from "./createManyView.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;
@@ -42,7 +44,7 @@
                 {@const childCollection = relation.from.collection}
                 <ExtensionsComponents
                     name="detailView.create.subRecords.{childCollection}"
-                    utils={getExtensionUtils()}
+                    utils={getExtensionUtils(lobb, ctx)}
                     parentCollectionName={collectionName}
                     collectionName={childCollection}
                     parentRecord={{

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

@@ -18,9 +18,11 @@
 
 <script lang="ts">
     import { ArrowLeft, Plus, X } from "lucide-svelte";
-    import Button from "../../ui/button/button.svelte";
-    import { lobb, ctx } from "../../../store.svelte";
+    import Button from "../../../components/ui/button/button.svelte";
+    import { getStudioContext } from "../../../context";
     import { toast } from "svelte-sonner";
+
+    const { lobb, ctx } = getStudioContext();
     import ExtensionsComponents from "../../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../../extensions/extensionUtils";
     import { getField, getFieldIcon } from "../../dataTable/utils";
@@ -34,7 +36,7 @@
     import type { Snippet } from "svelte";
     import FieldInput from "../fieldInput.svelte";
     import { emitEvent } from "../../../eventSystem";
-    import Drawer from "../../drawer.svelte";
+    import Drawer from "../../../components/drawer.svelte";
 
     let {
         collectionName,
@@ -47,11 +49,11 @@
         submitButton,
     }: CreateDetailViewProp = $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),
     );
     let fieldsErrors: Record<string, any> = $state({});
     const subCollections = ctx.meta.relations.filter((relation) => relation.to.collection === collectionName).map((relation) => relation.from.collection);
@@ -66,7 +68,7 @@
     async function handleSave() {
         let localEntry = $state.snapshot(entry);
 
-        await emitEvent("studio.collections.preCreate", {
+        await emitEvent({ lobb, ctx }, "studio.collections.preCreate", {
             collectionName,
             entry: localEntry,
         });
@@ -79,6 +81,7 @@
         }
 
         const serializedEntry = serializeEntry(
+            ctx,
             collectionName,
             localEntry,
             rollback,
@@ -94,6 +97,7 @@
             ];
         } else {
             transactionBody = generateTransactionBody(
+                ctx,
                 collectionName,
                 serializedEntry,
             );
@@ -102,7 +106,7 @@
         // create the record
         let response = await lobb.transactions(transactionBody, rollback);
 
-        await emitEvent("studio.collections.create", {
+        await emitEvent({ lobb, ctx }, "studio.collections.create", {
             collectionName,
             entry: localEntry,
             response: response,
@@ -155,8 +159,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"
                 >
@@ -175,7 +179,7 @@
                         <div>
                             <ExtensionsComponents
                                 name="dvFields.topRight.{collectionName}.{fieldName}"
-                                utils={getExtensionUtils()}
+                                utils={getExtensionUtils(lobb, ctx)}
                                 bind:value={entry[fieldName]}
                             />
                         </div>