@lobb-js/studio 0.5.0 → 0.7.0

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

@@ -1,11 +1,13 @@
 <script lang="ts">
-    import DiffViewer from "../../diffViewer.svelte";
-    import { lobb, ctx } from "../../../store.svelte";
+    import DiffViewer from "../../../components/diffViewer.svelte";
+    import { getStudioContext } from "../../../context";
+
+    const { lobb, ctx } = getStudioContext();
     import { onMount } from "svelte";
     import stringify from "json-stable-stringify";
-    import CodeEditor from "../../codeEditor.svelte";
-    import Table from "../../dataTable/table.svelte";
-    import Button from "../../ui/button/button.svelte";
+    import CodeEditor from "../../../components/codeEditor.svelte";
+    import Table from "../../../components/dataTable/table.svelte";
+    import Button from "../../../components/ui/button/button.svelte";
     import { LoaderCircle, SendHorizontal } from "lucide-svelte";
 
     let configSchema: string = $state("");

package/dist/components/routes/extensions/extension.svelte

@@ -1,15 +1,18 @@
 <script>
-    import ExtensionsComponents from "../../extensionsComponents.svelte";
+    import ExtensionsComponents from "../../../components/extensionsComponents.svelte";
     import { getExtensionUtils } from "../../../extensions/extensionUtils";
+    import { getStudioContext } from "../../../context";
 
     let { extension, page } = $props();
+
+    const { lobb, ctx } = getStudioContext();
 </script>
 
 <div class="grid overflow-auto bg-background">
     {#key extension && page}
         <ExtensionsComponents
             name="pages.{page}"
-            utils={getExtensionUtils()}
+            utils={getExtensionUtils(lobb, ctx)}
             filterByExtensions={[extension]}
         />
     {/key}

package/dist/components/routes/home.svelte

@@ -1,7 +1,9 @@
 <script>
-    import Button from "../ui/button/button.svelte";
-    import { ctx } from "../../store.svelte";
+    import Button from "../../components/ui/button/button.svelte";
+    import { getStudioContext } from "../../context";
     import { location } from "@wjfe/n-savant";
+
+    const { ctx } = getStudioContext();
     import { ArrowRight } from "lucide-svelte";
 </script>
 

package/dist/components/routes/workflows/workflows.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
-    import type { SideBarData } from "../../sidebar/sidebarElements.svelte";
+    import type { SideBarData } from "../../../components/sidebar/sidebarElements.svelte";
     import WorkflowEditor, {
         type WorkflowEntry,
-    } from "../../workflowEditor.svelte";
-    import { lobb, ctx } from "../../../store.svelte";
-    import Sidebar from "../../sidebar/sidebar.svelte";
-    import Button from "../../ui/button/button.svelte";
+    } from "../../../components/workflowEditor.svelte";
+    import { getStudioContext } from "../../../context";
+
+    const { lobb, ctx } = getStudioContext();
+    import Sidebar from "../../../components/sidebar/sidebar.svelte";
+    import Button from "../../../components/ui/button/button.svelte";
     import { location } from "@wjfe/n-savant";
     import { CircleSlash2, Plus, Trash2 } from "lucide-svelte";
     import { onMount } from "svelte";
-    import { showDialog } from "../../confirmationDialog/store.svelte";
-    import SidebarTrigger from "../../sidebar/sidebarTrigger.svelte";
+    import { showDialog } from "../../../components/confirmationDialog/store.svelte";
+    import SidebarTrigger from "../../../components/sidebar/sidebarTrigger.svelte";
 
     let { workflowName } = $props();
 

package/dist/components/selectRecord.svelte

@@ -4,8 +4,11 @@
 	import DataTable from "./dataTable/dataTable.svelte";
 	import { getCollectionPrimaryField } from "./dataTable/utils";
 	import { emitEvent } from "../eventSystem";
+	import { getStudioContext } from "../context";
   import Drawer from "./drawer.svelte";
 
+	const { ctx, lobb } = getStudioContext();
+
 	interface LocalProps extends ButtonProps {
 		collectionName: string;
 		parentCollectionName?: string;
@@ -36,6 +39,7 @@
 	async function handleButtonClick() {
 		try {
 			const eventResult = await emitEvent(
+				{ lobb, ctx },
 				"studio.collections.preForeignKeySelect",
 				{
 					parentCollectionName,
@@ -55,7 +59,7 @@
 	}
 
 	async function onSelectHandler(entry: any) {
-		const primaryFieldName = getCollectionPrimaryField(collectionName);
+		const primaryFieldName = getCollectionPrimaryField(ctx, collectionName);
 		const localValue: any = {
 			id: entry.id,
 		};

package/dist/components/setServerPage.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { toast } from "svelte-sonner";
 	import Button from "./ui/button/button.svelte";
-	import { ctx } from "../store.svelte";
-	import { Input } from "./ui/input";
+	import { getStudioContext } from "../context";
+	import { Input } from "../components/ui/input";
+
+	const { ctx } = getStudioContext();
 
 	let formData = {
 		server: "",

package/dist/components/singletone.svelte

@@ -5,7 +5,9 @@
     import SidebarTrigger from "./sidebar/sidebarTrigger.svelte";
     import Button from "./ui/button/button.svelte";
     import { onMount } from "svelte";
-    import { lobb } from "../store.svelte";
+    import { getStudioContext } from "../context";
+
+    const { lobb, ctx } = getStudioContext();
   import { toast } from "svelte-sonner";
   import Skeleton from "./ui/skeleton/skeleton.svelte";
 
@@ -20,7 +22,7 @@
     let entry = $state({});
     let loading = $state(true);
     let singletonExists = $state(true);
-    const formFields = getCollectionFields(collectionName);
+    const formFields = getCollectionFields(ctx, collectionName);
 
     onMount(async () => {
         const result = await lobb.readSingleton(collectionName);

package/dist/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { buttonVariants } from "../button/index.js";
+	import { buttonVariants } from "../../../components/ui/button/index.js";
 	import { cn } from "../../../utils.js";
 
 	let {

package/dist/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import { buttonVariants } from "../button/index.js";
+	import { buttonVariants } from "../../../components/ui/button/index.js";
 	import { cn } from "../../../utils.js";
 
 	let {

package/dist/components/ui/command/command-dialog.svelte

@@ -6,7 +6,7 @@
 	} from "bits-ui";
 	import type { Snippet } from "svelte";
 	import Command from "./command.svelte";
-	import * as Dialog from "../dialog/index.js";
+	import * as Dialog from "../../../components/ui/dialog/index.js";
 
 	let {
 		open = $bindable(false),

package/dist/components/ui/range-calendar/range-calendar-day.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import { buttonVariants } from "../button/index.js";
+	import { buttonVariants } from "../../../components/ui/button/index.js";
 	import { cn } from "../../../utils.js";
 
 	let {

package/dist/components/ui/range-calendar/range-calendar-day.svelte.d.ts

@@ -1,6 +1,6 @@
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 declare const RangeCalendarDay: import("svelte").Component<RangeCalendarPrimitive.DayProps, {
-    class: import("svelte/elements").ClassValue;
+    class: import("svelte/elements.js").ClassValue;
 }, "ref">;
 type RangeCalendarDay = ReturnType<typeof RangeCalendarDay>;
 export default RangeCalendarDay;

package/dist/components/ui/range-calendar/range-calendar-next-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 	import ChevronRight from "@lucide/svelte/icons/chevron-right";
-	import { buttonVariants } from "../button/index.js";
+	import { buttonVariants } from "../../../components/ui/button/index.js";
 	import { cn } from "../../../utils.js";
 	let {
 		ref = $bindable(null),

package/dist/components/ui/range-calendar/range-calendar-prev-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 	import ChevronLeft from "@lucide/svelte/icons/chevron-left";
-	import { buttonVariants } from "../button/index.js";
+	import { buttonVariants } from "../../../components/ui/button/index.js";
 	import { cn } from "../../../utils.js";
 	let {
 		ref = $bindable(null),

package/dist/components/ui/select/select-separator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Separator as SeparatorPrimitive } from "bits-ui";
-	import { Separator } from "../separator/index.js";
+	import { Separator } from "../../../components/ui/separator/index.js";
 	import { cn } from "../../../utils.js";
 
 	let {

package/dist/components/workflowEditor.svelte

@@ -11,10 +11,12 @@
 </script>
 
 <script lang="ts">
-    import { lobb, ctx } from "../store.svelte";
-    import CodeEditor from "./codeEditor.svelte";
-    import Button from "./ui/button/button.svelte";
-    import Input from "./ui/input/input.svelte";
+    import { getStudioContext } from "../context";
+    import CodeEditor from "../components/codeEditor.svelte";
+
+    const { lobb, ctx } = getStudioContext();
+    import Button from "../components/ui/button/button.svelte";
+    import Input from "../components/ui/input/input.svelte";
     import { location } from "@wjfe/n-savant";
     import { Edit, Plus } from "lucide-svelte";
     import { toast } from "svelte-sonner";

package/dist/context.d.ts

@@ -0,0 +1,10 @@
+import type { LobbClient } from '@lobb-js/sdk';
+import type { CTX } from './store.types';
+export interface StudioContext {
+    ctx: CTX;
+    lobb: LobbClient;
+}
+export declare const STUDIO_CONTEXT_KEY: unique symbol;
+export declare function setStudioContext(context: StudioContext): void;
+export declare function getStudioContext(): StudioContext;
+export declare function createStudioContextMap(context: StudioContext): Map<symbol, StudioContext>;

package/dist/context.js

@@ -0,0 +1,11 @@
+import { setContext, getContext } from 'svelte';
+export var STUDIO_CONTEXT_KEY = Symbol('studio');
+export function setStudioContext(context) {
+    setContext(STUDIO_CONTEXT_KEY, context);
+}
+export function getStudioContext() {
+    return getContext(STUDIO_CONTEXT_KEY);
+}
+export function createStudioContextMap(context) {
+    return new Map([[STUDIO_CONTEXT_KEY, context]]);
+}

package/dist/eventSystem.d.ts

@@ -1 +1,2 @@
-export declare function emitEvent(eventName: string, input: Record<string, any>): Promise<Record<string, any>>;
+import type { StudioContext } from "./context";
+export declare function emitEvent(studioContext: StudioContext, eventName: string, input: Record<string, any>): Promise<Record<string, any>>;

package/dist/eventSystem.js

@@ -35,14 +35,14 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { toast } from "svelte-sonner";
-import { ctx } from "./store.svelte";
 import { openCreateDetailView, openUpdateDetailView } from "./components/detailView/store.svelte";
-export function emitEvent(eventName, input) {
+export function emitEvent(studioContext, eventName, input) {
     return __awaiter(this, void 0, void 0, function () {
-        var workflows, index, workflow, localOutput, _a, _b, _c, error_1;
+        var ctx, workflows, index, workflow, localOutput, _a, _b, _c, error_1;
         return __generator(this, function (_d) {
             switch (_d.label) {
                 case 0:
+                    ctx = studioContext.ctx;
                     workflows = ctx.meta.studio_workflows.filter(function (workflow) {
                         return eventName.startsWith(workflow.eventName);
                     });
@@ -56,7 +56,7 @@ export function emitEvent(eventName, input) {
                     _d.trys.push([2, 5, , 6]);
                     _b = (_a = workflow).handler;
                     _c = [input];
-                    return [4 /*yield*/, getEventContext()];
+                    return [4 /*yield*/, getEventContext(studioContext)];
                 case 3: return [4 /*yield*/, _b.apply(_a, _c.concat([_d.sent()]))];
                 case 4:
                     localOutput = _d.sent();
@@ -76,13 +76,13 @@ export function emitEvent(eventName, input) {
         });
     });
 }
-function getEventContext() {
+function getEventContext(studioContext) {
     return __awaiter(this, void 0, void 0, function () {
         return __generator(this, function (_a) {
             return [2 /*return*/, {
                     toast: toast,
-                    openCreateDetailView: openCreateDetailView,
-                    openUpdateDetailView: openUpdateDetailView,
+                    openCreateDetailView: function (props) { return openCreateDetailView(studioContext, props); },
+                    openUpdateDetailView: function (props) { return openUpdateDetailView(studioContext, props); },
                 }];
         });
     });

package/dist/extensions/extensionUtils.d.ts

@@ -1,8 +1,9 @@
 import type { Components, DashboardNavs, Extension, ExtensionUtils } from "./extension.types";
+import type { LobbClient } from "@lobb-js/sdk";
+import type { CTX } from "../store.types";
 export declare function getComponents(): Components;
-export declare function getExtensionUtils(): ExtensionUtils;
-export declare function getExtensionsThatHasDash(): string[];
-export declare function loadExtensions(studioExtensions?: any[]): Promise<Record<string, Extension>>;
-export declare function loadExtensionComponents(name: string, filterByExtensions?: string[]): any[];
-export declare function executeExtensionsOnStartup(): Promise<void>;
-export declare function getDashboardNavs(): DashboardNavs;
+export declare function getExtensionUtils(lobb: LobbClient, ctx: CTX): ExtensionUtils;
+export declare function loadExtensions(lobb: LobbClient, ctx: CTX, extensionMap?: Record<string, any>): Promise<Record<string, Extension>>;
+export declare function loadExtensionComponents(ctx: CTX, name: string, filterByExtensions?: string[]): any[];
+export declare function executeExtensionsOnStartup(lobb: LobbClient, ctx: CTX): Promise<void>;
+export declare function getDashboardNavs(ctx: CTX): DashboardNavs;

package/dist/extensions/extensionUtils.js

@@ -43,7 +43,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { lobb, ctx } from "../store.svelte";
 import { toast } from "svelte-sonner";
 import { showDialog } from "../components/confirmationDialog/store.svelte";
 import { Button } from "../components/ui/button";
@@ -93,7 +92,7 @@ export function getComponents() {
         Switch: Switch,
     };
 }
-export function getExtensionUtils() {
+export function getExtensionUtils(lobb, ctx) {
     return {
         ctx: ctx,
         lobb: lobb,
@@ -105,65 +104,23 @@ export function getExtensionUtils() {
         intlDate: intlDate,
     };
 }
-export function getExtensionsThatHasDash() {
-    var extensionNames = Object.keys(ctx.meta.extensions);
-    var extensionsWithDashExt = [];
-    for (var index = 0; index < extensionNames.length; index++) {
-        var extensionName = extensionNames[index];
-        var extensionMeta = ctx.meta.extensions[extensionName];
-        if (extensionMeta.hasDashboardExtension) {
-            extensionsWithDashExt.push(extensionName);
-        }
-    }
-    return extensionsWithDashExt;
-}
-export function loadExtensions(studioExtensions) {
-    return __awaiter(this, void 0, Promise, function () {
-        var extensions, index, studioExtension, extensionsThatHasDash, index, extensionName, _a, _b, error_1;
-        var _c;
-        return __generator(this, function (_d) {
-            switch (_d.label) {
-                case 0:
-                    extensions = {};
-                    if (studioExtensions) {
-                        for (index = 0; index < studioExtensions.length; index++) {
-                            studioExtension = studioExtensions[index](getExtensionUtils());
-                            extensions[studioExtension.name] = studioExtension;
-                        }
-                    }
-                    extensionsThatHasDash = getExtensionsThatHasDash();
-                    index = 0;
-                    _d.label = 1;
-                case 1:
-                    if (!(index < extensionsThatHasDash.length)) return [3 /*break*/, 6];
-                    extensionName = extensionsThatHasDash[index];
-                    // Try to import locally-installed extension by name first
-                    if (extensionName && extensions[extensionName]) {
-                        return [3 /*break*/, 5];
-                    }
-                    _d.label = 2;
-                case 2:
-                    _d.trys.push([2, 4, , 5]);
-                    _a = extensions;
-                    _b = extensionName;
-                    return [4 /*yield*/, import(
-                        /* @vite-ignore */ "".concat(ctx.lobbUrl, "/api/extensions/").concat(extensionName, "/dashboard?v=").concat((_c = ctx.meta.extensions[extensionName]) === null || _c === void 0 ? void 0 : _c.version))];
-                case 3:
-                    _a[_b] = (_d.sent()).extension(getExtensionUtils());
-                    return [3 /*break*/, 5];
-                case 4:
-                    error_1 = _d.sent();
-                    console.warn("Failed to load remote extension ".concat(extensionName), error_1);
-                    return [3 /*break*/, 5];
-                case 5:
-                    index++;
-                    return [3 /*break*/, 1];
-                case 6: return [2 /*return*/, extensions];
+export function loadExtensions(lobb_1, ctx_1) {
+    return __awaiter(this, arguments, Promise, function (lobb, ctx, extensionMap) {
+        var extensions, extensionNames, index, extensionName, studioExtension;
+        if (extensionMap === void 0) { extensionMap = {}; }
+        return __generator(this, function (_a) {
+            extensions = {};
+            extensionNames = Object.keys(extensionMap).filter(function (name) { return ctx.meta.extensions[name] != null; });
+            for (index = 0; index < extensionNames.length; index++) {
+                extensionName = extensionNames[index];
+                studioExtension = extensionMap[extensionName](getExtensionUtils(lobb, ctx));
+                extensions[studioExtension.name] = studioExtension;
             }
+            return [2 /*return*/, extensions];
         });
     });
 }
-export function loadExtensionComponents(name, filterByExtensions) {
+export function loadExtensionComponents(ctx, name, filterByExtensions) {
     var components = [];
     for (var _i = 0, _a = Object.entries(ctx.extensions); _i < _a.length; _i++) {
         var _b = _a[_i], extensionName = _b[0], extensionValue = _b[1];
@@ -181,7 +138,7 @@ export function loadExtensionComponents(name, filterByExtensions) {
     }
     return components;
 }
-export function executeExtensionsOnStartup() {
+export function executeExtensionsOnStartup(lobb, ctx) {
     return __awaiter(this, void 0, void 0, function () {
         var extensionNames, index, extensionName, extension;
         return __generator(this, function (_a) {
@@ -196,7 +153,7 @@ export function executeExtensionsOnStartup() {
                     extension = ctx.extensions[extensionName];
                     if (!extension) return [3 /*break*/, 3];
                     if (!extension.onStartup) return [3 /*break*/, 3];
-                    return [4 /*yield*/, extension.onStartup(getExtensionUtils())];
+                    return [4 /*yield*/, extension.onStartup(getExtensionUtils(lobb, ctx))];
                 case 2:
                     _a.sent();
                     _a.label = 3;
@@ -208,7 +165,7 @@ export function executeExtensionsOnStartup() {
         });
     });
 }
-export function getDashboardNavs() {
+export function getDashboardNavs(ctx) {
     var navs = {
         top: [],
         middle: [],

package/dist/store.svelte.d.ts

@@ -1,3 +1 @@
-import type { CTX } from './store.types';
-export declare const ctx: CTX;
-export declare const lobb: any;
+export declare function createLobb(url: string): any;

package/dist/store.svelte.js

@@ -36,40 +36,23 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { LobbClient } from '@lobb-js/sdk';
 import { toast } from 'svelte-sonner';
-if (!window.APP_ENV) {
-    window.APP_ENV = {};
-}
-if (window.APP_ENV.LOBB_URL === '%LOBB_URL%') {
-    window.APP_ENV.LOBB_URL = null;
+export function createLobb(url) {
+    var _this = this;
+    var client = new LobbClient(url);
+    client.onResponse(function (response) { return __awaiter(_this, void 0, void 0, function () {
+        var body;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(response.status >= 400)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, response.json()];
+                case 1:
+                    body = _a.sent();
+                    toast.error(body.message);
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); });
+    return client;
 }
-// TODO: this state should be passed to the Studio component in the App.svelte it should be its paramters
-// TODO: using a global variable is not good to pass data to children components. using the context api is better for only components builder or wrappers
-// TODO: you should totally remove this file
-// TODO: when you finish doind that add the studioVersion back
-export var ctx = $state.raw({
-    // studioVersion: pkg.version,
-    lobbUrl: window.APP_ENV.LOBB_URL || localStorage.getItem("lobb_url"),
-    extensions: {},
-    meta: {
-        collections: null,
-        extensions: null,
-        filter: null
-    },
-});
-export var lobb = new LobbClient(ctx.lobbUrl);
-// logging the message if got any bad responses
-lobb.onResponse(function (response) { return __awaiter(void 0, void 0, void 0, function () {
-    var body;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                if (!(response.status >= 400)) return [3 /*break*/, 2];
-                return [4 /*yield*/, response.json()];
-            case 1:
-                body = _a.sent();
-                toast.error(body.message);
-                _a.label = 2;
-            case 2: return [2 /*return*/];
-        }
-    });
-}); });

package/dist/utils.d.ts

@@ -1,5 +1,6 @@
 import { type ClassValue } from "clsx";
 import { MediaQuery } from 'svelte/reactivity';
+import type { CTX } from "./store.types";
 export declare function cn(...inputs: ClassValue[]): string;
 export type WithoutChild<T> = T extends {
     child?: any;
@@ -18,8 +19,8 @@ export declare const mediaQueries: {
     xl: MediaQuery;
     '2xl': MediaQuery;
 };
-export declare function getFieldRelation(collectionName: string, fieldName: string): any;
-export declare function recordHasChildrean(collectionName: string): boolean;
+export declare function getFieldRelation(ctx: CTX, collectionName: string, fieldName: string): any;
+export declare function recordHasChildrean(ctx: CTX, collectionName: string): boolean;
 export declare function calculateDrawerWidth(): number;
 export declare function getChangedProperties(oldObj: Record<string, any>, newObj: Record<string, any>): Record<string, any>;
 export declare function parseFunction(functionString: string): any;

package/dist/utils.js

@@ -1,7 +1,6 @@
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { MediaQuery } from 'svelte/reactivity';
-import { ctx } from "./store.svelte";
 export function cn() {
     var inputs = [];
     for (var _i = 0; _i < arguments.length; _i++) {
@@ -16,7 +15,7 @@ export var mediaQueries = {
     xl: new MediaQuery('min-width: 1280px'),
     '2xl': new MediaQuery('min-width: 1536px'),
 };
-export function getFieldRelation(collectionName, fieldName) {
+export function getFieldRelation(ctx, collectionName, fieldName) {
     var relations = ctx.meta.relations;
     for (var index = 0; index < relations.length; index++) {
         var relation = relations[index];
@@ -27,7 +26,7 @@ export function getFieldRelation(collectionName, fieldName) {
     return null;
 }
 ;
-export function recordHasChildrean(collectionName) {
+export function recordHasChildrean(ctx, collectionName) {
     for (var index = 0; index < ctx.meta.relations.length; index++) {
         var relation = ctx.meta.relations[index];
         if (relation.to.collection === collectionName) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobb-js/studio",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -14,7 +14,11 @@
       "svelte": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./vite-plugins": "./vite-plugins/index.js"
+    "./app.css": "./src/app.css",
+    "./vite-plugins": {
+      "types": "./vite-plugins/index.d.ts",
+      "default": "./vite-plugins/index.js"
+    }
   },
   "scripts": {
     "dev": "vite",

package/vite-plugins/index.d.ts

@@ -0,0 +1,8 @@
+declare module "virtual:lobb-studio-extensions" {
+  const extensions: Record<string, (utils: any) => any>;
+  export default extensions;
+}
+
+// Returns an array of Vite plugins. Typed as any[] to avoid version conflicts
+// between the vite version used by packages/studio and the consumer's vite version.
+export function lobbStudioPlugins(): any[];

package/vite-plugins/index.js

@@ -1,16 +1,11 @@
 import { contextualLibAlias } from "./contextual-lib-alias.js";
+import { lobbWorkspaceOptimize } from "./monorepo-workspace.js";
+import { lobbExtensionsPlugin } from "./lobb-extensions.js";
 
-/**
- * Returns an array of Vite plugins needed for Lobb Studio integration.
- *
- * Includes:
- * - monorepoImportResolver: Resolves @lobb-js/studio to /internal (monorepo) or default (standalone)
- * - contextualLibAlias: Resolves $lib imports contextually
- *
- * @returns {import('vite').Plugin[]}
- */
 export function lobbStudioPlugins() {
   return [
     contextualLibAlias(),
+    lobbWorkspaceOptimize(),
+    lobbExtensionsPlugin(),
   ];
 }