@lobb-js/studio 0.1.41 → 0.1.43

package/dist/components/LlmButton.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { lobb } from "..";
+	import { lobb, ctx } from "../store.svelte";
 	import { Brain, LoaderIcon, Send } from "lucide-svelte";
 	import Button, { type ButtonProps } from "./ui/button/button.svelte";
 	import * as Popover from "./ui/popover";
 	import Textarea from "./ui/textarea/textarea.svelte";
 	import { toast } from "svelte-sonner";
-	import { ctx } from "../store.svelte";
 
 	interface LocalProp {
 		value?: any;

package/dist/components/Studio.svelte

@@ -2,8 +2,7 @@
     import { Toaster } from "./ui/sonner";
     import { onMount, onDestroy } from "svelte";
     import { ModeWatcher } from "mode-watcher";
-    import { ctx } from "../store.svelte";
-    import { lobb } from "..";
+    import { lobb, ctx } from "../store.svelte";
     import Header from "./header.svelte";
     import { LoaderCircle, ServerOff } from "lucide-svelte";
     import Dialog from "./confirmationDialog/confirmationDialog.svelte";

package/dist/components/codeEditor.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { keymap } from '@codemirror/view';
+	import { EditorState } from '@codemirror/state';
+	import { basicSetup, EditorView } from 'codemirror';
+	import { javascript } from '@codemirror/lang-javascript';
+	import { sql } from '@codemirror/lang-sql';
+	import { oneDark } from '@codemirror/theme-one-dark';
+	import { cn } from '../utils.js';
+
+	interface Props {
+		type: 'javascript' | 'typescript' | 'json' | 'sql';
+		name: string;
+		value?: string;
+		default?: string;
+		types?: string;
+		class?: string;
+		handleCtrlSave?: () => void;
+		onChange?: (value: string) => void;
+	}
+
+	let {
+		type,
+		name,
+		value = $bindable(''),
+		class: className,
+		types,
+		handleCtrlSave,
+		onChange,
+		...props
+	}: Props = $props();
+
+	if (props.default) {
+		value = props.default;
+	}
+
+	let editorContainer: HTMLDivElement;
+	let editorView: EditorView | null = null;
+
+	const getLanguageExtension = () => {
+		switch (type) {
+			case 'javascript':
+			case 'typescript':
+			case 'json':
+				return javascript();
+			case 'sql':
+				return sql();
+			default:
+				return javascript();
+		}
+	};
+
+	const createEditor = () => {
+		if (!editorContainer) return;
+
+		const extensions = [
+			basicSetup,
+			getLanguageExtension(),
+			EditorView.updateListener.of((update) => {
+				if (update.docChanged) {
+					const newValue = update.state.doc.toString();
+					value = newValue;
+					onChange?.(newValue);
+				}
+			}),
+			EditorView.theme({
+				'&': {
+					backgroundColor: 'transparent',
+				},
+				'.cm-gutters': {
+					backgroundColor: 'transparent',
+					border: 'none',
+				},
+				'.cm-content': {
+					paddingTop: '10px',
+					paddingBottom: '1px',
+				}
+			})
+		];
+
+		// Add Ctrl+S / Cmd+S handler if provided
+		if (handleCtrlSave) {
+			extensions.push(
+				keymap.of([
+					{
+						key: 'Mod-s',
+						run: () => {
+							handleCtrlSave();
+							return true;
+						}
+					}
+				])
+			);
+		}
+
+		const state = EditorState.create({
+			doc: value,
+			extensions
+		});
+
+		editorView = new EditorView({
+			state,
+			parent: editorContainer
+		});
+	};
+
+	const updateEditor = () => {
+		if (!editorView) return;
+
+		const currentValue = editorView.state.doc.toString();
+		if (currentValue !== value) {
+			editorView.dispatch({
+				changes: {
+					from: 0,
+					to: currentValue.length,
+					insert: value
+				}
+			});
+		}
+	};
+
+	onMount(() => {
+		createEditor();
+	});
+
+	onDestroy(() => {
+		editorView?.destroy();
+	});
+
+	$effect(() => {
+		updateEditor();
+	});
+</script>
+
+<div class={cn('resize-y rounded-md border bg-soft shadow-sm h-60', className)}>
+	<div bind:this={editorContainer} class="h-full w-full pl-2" />
+</div>
+
+<style>
+	:global(.cm-editor) {
+		height: 100%;
+		font-size: 14px;
+	}
+
+	:global(.cm-scroller) {
+		overflow: auto;
+	}
+
+	:global(.cm-focused) {
+		outline: none !important;
+	}
+</style>

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

@@ -0,0 +1,13 @@
+interface Props {
+    type: 'javascript' | 'typescript' | 'json' | 'sql';
+    name: string;
+    value?: string;
+    default?: string;
+    types?: string;
+    class?: string;
+    handleCtrlSave?: () => void;
+    onChange?: (value: string) => void;
+}
+declare const CodeEditor: import("svelte").Component<Props, {}, "value">;
+type CodeEditor = ReturnType<typeof CodeEditor>;
+export default CodeEditor;

package/dist/components/createManyButton.svelte

@@ -3,8 +3,8 @@
 	import { ArrowLeft, Plus, X } from "lucide-svelte";
 	import Button, { type ButtonProps } from "./ui/button/button.svelte";
 	import { toast } from "svelte-sonner";
-	import MonacoEditor from "./monacoEditor.svelte";
-	import { lobb } from "..";
+	import CodeEditor from "./codeEditor.svelte";
+	import { lobb } from "../store.svelte";
 	import { calculateDrawerWidth } from "../utils";
   import Drawer from "./drawer.svelte";
 
@@ -76,7 +76,7 @@
 			</div>
 		</div>
 		<div class="flex-1 overflow-y-auto">
-			<MonacoEditor
+			<CodeEditor
 				name={collectionName}
 				type="json"
 				bind:value={createManyPayload}

package/dist/components/dataTable/dataTable.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import _ from "lodash";
-    import { lobb } from "../..";
+    import { lobb, ctx } from "../../store.svelte";
     import Footer from "./footer.svelte";
     import Header from "./header.svelte";
     import Table, { type TableProps } from "./table.svelte";
@@ -10,7 +10,6 @@
     import ChildRecords from "./childRecords.svelte";
     import FieldCell from "./fieldCell.svelte";
     import Skeleton from "../ui/skeleton/skeleton.svelte";
-    import { ctx } from "../../store.svelte";
     import Button from "../ui/button/button.svelte";
     import { showDialog } from "../confirmationDialog/store.svelte";
     import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";

package/dist/components/dataTable/header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ctx } from "../../store.svelte";
+    import { lobb, ctx } from "../../store.svelte";
     import { ListRestart, Plus, SquareStack, Trash } from "lucide-svelte";
     import LlmButton from "../LlmButton.svelte";
     import FilterButton from "./filterButton.svelte";
@@ -7,7 +7,6 @@
     import Button from "../ui/button/button.svelte";
     import CreateManyButton from "../createManyButton.svelte";
     import { showDialog } from "../confirmationDialog/store.svelte";
-    import { lobb } from "../..";
     import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
     import type { Snippet } from "svelte";
 

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

@@ -19,9 +19,8 @@
 <script lang="ts">
     import { ArrowLeft, Plus, X } from "lucide-svelte";
     import Button from "../../ui/button/button.svelte";
-    import { lobb } from "../../..";
+    import { lobb, ctx } from "../../../store.svelte";
     import { toast } from "svelte-sonner";
-    import { ctx } from "../../../store.svelte";
     import ExtensionsComponents from "../../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../../extensions/extensionUtils";
     import { getField, getFieldIcon } from "../../dataTable/utils";

package/dist/components/detailView/fieldCustomInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import MonacoEditor from "../monacoEditor.svelte";
+	import CodeEditor from "../codeEditor.svelte";
 
 	interface Props {
 		value: any;
@@ -19,5 +19,5 @@
 </script>
 
 {#if type === "code"}
-	<MonacoEditor name={field.key} {...args} bind:value />
+	<CodeEditor name={field.key} {...args} bind:value />
 {/if}

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

@@ -47,7 +47,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import CreateDetailView from "./create/createDetailView.svelte";
 import UpdateDetailView from "./update/updateDetailView.svelte";
-import { lobb } from "../..";
+import { lobb } from "../../store.svelte";
 import { getCollectionParamsFields } from "../dataTable/utils";
 import { mount, unmount } from "svelte";
 export function openCreateDetailView(props) {

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

@@ -21,9 +21,8 @@
     import { ArrowLeft, Pencil, X } from "lucide-svelte";
     import Button from "../../ui/button/button.svelte";
     import { fade, fly } from "svelte/transition";
-    import { lobb } from "../../..";
+    import { lobb, ctx } from "../../../store.svelte";
     import { toast } from "svelte-sonner";
-    import { ctx } from "../../../store.svelte";
     import ExtensionsComponents from "../../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../../extensions/extensionUtils";
     import { calculateDrawerWidth, getChangedProperties } from "../../../utils";

package/dist/components/diffViewer.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
 	import { onMount, onDestroy } from "svelte";
-	import * as monaco from "monaco-editor";
-	import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
-	import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
-	import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
-	import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
-	import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
+	import { MergeView } from "@codemirror/merge";
+	import { EditorView } from "@codemirror/view";
+	import { EditorState } from "@codemirror/state";
+	import { basicSetup } from "codemirror";
+	import { javascript } from "@codemirror/lang-javascript";
+	import { sql } from "@codemirror/lang-sql";
 	import { cn } from "../utils";
 
 	interface Props {
-		type: "javascript" | "typescript" | "json";
+		type: "javascript" | "typescript" | "json" | "sql";
 		original: string;
 		modified: string;
 		class?: string;
@@ -24,76 +24,79 @@
 	}: Props = $props();
 
 	let editorContainer: HTMLDivElement;
-	let editor: monaco.editor.IStandaloneDiffEditor;
-	let originalModel: monaco.editor.ITextModel;
-	let modifiedModel: monaco.editor.ITextModel;
+	let mergeView: MergeView | null = null;
 
-	self.MonacoEnvironment = {
-		getWorker(_, label) {
-			if (label === "json") {
-				return new jsonWorker();
-			}
-			if (label === "css" || label === "scss" || label === "less") {
-				return new cssWorker();
-			}
-			if (
-				label === "html" ||
-				label === "handlebars" ||
-				label === "razor"
-			) {
-				return new htmlWorker();
-			}
-			if (label === "typescript" || label === "javascript") {
-				return new tsWorker();
-			}
-			return new editorWorker();
-		},
+	const getLanguageExtension = () => {
+		switch (type) {
+			case 'javascript':
+			case 'typescript':
+			case 'json':
+				return javascript();
+			case 'sql':
+				return sql();
+			default:
+				return javascript();
+		}
 	};
 
-	onMount(async () => {
-		monaco.editor.defineTheme("transparentTheme", {
-			base: "vs",
-			inherit: true,
-			rules: [],
-			colors: {
-				"editor.background": "#EFEFEF00",
-				focusBorder: "#00000000",
-			},
-		});
-
-		originalModel = monaco.editor.createModel(original, type);
-
-		modifiedModel = monaco.editor.createModel(modified, type);
+	onMount(() => {
+		const langExtension = getLanguageExtension();
 
-		editor = monaco.editor.createDiffEditor(editorContainer, {
-			renderSideBySide: true,
-			readOnly: true,
-			automaticLayout: true,
-			theme: "transparentTheme",
-			minimap: { enabled: false },
-			glyphMargin: false,
-			overviewRulerLanes: 0,
-			hideCursorInOverviewRuler: true,
-			stickyScroll: { enabled: false },
-			lineNumbersMinChars: 2,
-			scrollBeyondLastLine: false,
-			padding: { top: 10, bottom: 1 },
-		});
-
-		editor.setModel({
-			original: originalModel,
-			modified: modifiedModel,
+		mergeView = new MergeView({
+			a: {
+				doc: original,
+				extensions: [
+					basicSetup,
+					langExtension,
+					EditorView.editable.of(false),
+					EditorState.readOnly.of(true),
+					EditorView.theme({
+						'&': {
+							backgroundColor: 'transparent',
+						},
+						'.cm-gutters': {
+							backgroundColor: 'transparent',
+							border: 'none',
+						},
+						'.cm-content': {
+							paddingTop: '10px',
+							paddingBottom: '1px',
+						}
+					})
+				]
+			},
+			b: {
+				doc: modified,
+				extensions: [
+					basicSetup,
+					langExtension,
+					EditorView.editable.of(false),
+					EditorState.readOnly.of(true),
+					EditorView.theme({
+						'&': {
+							backgroundColor: 'transparent',
+						},
+						'.cm-gutters': {
+							backgroundColor: 'transparent',
+							border: 'none',
+						},
+						'.cm-content': {
+							paddingTop: '10px',
+							paddingBottom: '1px',
+						}
+					})
+				]
+			},
+			parent: editorContainer
 		});
 	});
 
 	onDestroy(() => {
-		editor?.dispose();
-		originalModel.dispose();
-		modifiedModel.dispose();
+		mergeView?.destroy();
 	});
 </script>
 
-<div class={cn("resize-y rounded-md border bg-soft shadow-sm h-60", className)}>
+<div class={cn("w-full resize-y rounded-md border bg-soft shadow-sm", className)}>
 	<div
 		bind:this={editorContainer}
 		class="editor pl-2"

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

@@ -1,5 +1,5 @@
 interface Props {
-    type: "javascript" | "typescript" | "json";
+    type: "javascript" | "typescript" | "json" | "sql";
     original: string;
     modified: string;
     class?: string;

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

@@ -1,13 +1,12 @@
 <script lang="ts">
     import DiffViewer from "../../diffViewer.svelte";
-    import { ctx } from "../../../store.svelte";
+    import { lobb, ctx } from "../../../store.svelte";
     import { onMount } from "svelte";
     import stringify from "json-stable-stringify";
-    import MonacoEditor from "../../monacoEditor.svelte";
+    import CodeEditor from "../../codeEditor.svelte";
     import Table from "../../dataTable/table.svelte";
     import Button from "../../ui/button/button.svelte";
     import { LoaderCircle, SendHorizontal } from "lucide-svelte";
-    import { lobb } from "../../..";
 
     let configSchema: string = $state("");
     let dbSchema: string = $state("");
@@ -41,7 +40,7 @@
     }
 </script>
 
-<div class="h-[50%] border-b">
+<div class="h-[50%] border-b overflow-auto">
     {#if configSchema && dbSchema}
         <DiffViewer
             type="json"
@@ -70,7 +69,7 @@
                 Execute
             </Button>
         </div>
-        <MonacoEditor
+        <CodeEditor
             type="sql"
             name="prompt"
             bind:value={sqlPrompt}

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

@@ -3,10 +3,9 @@
     import WorkflowEditor, {
         type WorkflowEntry,
     } from "../../workflowEditor.svelte";
-    import { lobb } from "../../..";
+    import { lobb, ctx } from "../../../store.svelte";
     import Sidebar from "../../sidebar/sidebar.svelte";
     import Button from "../../ui/button/button.svelte";
-    import { ctx } from "../../../store.svelte";
     import { location } from "@wjfe/n-savant";
     import { CircleSlash2, Plus, Trash2 } from "lucide-svelte";
     import { onMount } from "svelte";

package/dist/components/singletone.svelte

@@ -5,7 +5,7 @@
     import SidebarTrigger from "./sidebar/sidebarTrigger.svelte";
     import Button from "./ui/button/button.svelte";
     import { onMount } from "svelte";
-    import { lobb } from "..";
+    import { lobb } from "../store.svelte";
   import { toast } from "svelte-sonner";
   import Skeleton from "./ui/skeleton/skeleton.svelte";
 

package/dist/components/workflowEditor.svelte

@@ -11,11 +11,10 @@
 </script>
 
 <script lang="ts">
-    import { lobb } from "..";
-    import MonacoEditor from "./monacoEditor.svelte";
+    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 { ctx } from "../store.svelte";
     import { location } from "@wjfe/n-savant";
     import { Edit, Plus } from "lucide-svelte";
     import { toast } from "svelte-sonner";
@@ -175,7 +174,7 @@
         </div>
     </div>
     {#key types}
-        <MonacoEditor
+        <CodeEditor
             type="typescript"
             name="workflow"
             class="h-full rounded-none border-none"

package/dist/extensions/extensionUtils.js

@@ -43,8 +43,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { lobb } from "..";
-import { ctx } from "../store.svelte";
+import { lobb, ctx } from "../store.svelte";
 import { toast } from "svelte-sonner";
 import { showDialog } from "../components/confirmationDialog/store.svelte";
 import { Button } from "../components/ui/button";

package/dist/index.d.ts

@@ -1,9 +1,24 @@
+export type { ExtensionProps, Extension, ExtensionUtils } from "./extensions/extension.types";
+export type { Lobb } from "./Lobb";
 export { default as Studio } from "./components/Studio.svelte";
-export { Lobb } from "./Lobb";
-export * from "./utils";
-export * from "./eventSystem";
-export { ctx, lobb } from "./store.svelte";
-export type * from "./store.types";
-export declare function createSet(lastNumber: number): Set<number>;
-export declare function moveElement<T>(array: T[], fromIndex: number, toIndex: number): T[];
-export declare function pxToRem(px: number): number;
+export { Button } from "./components/ui/button";
+export { Input } from "./components/ui/input";
+export { Separator } from "./components/ui/separator";
+export { Skeleton } from "./components/ui/skeleton";
+export { default as LlmButton } from "./components/LlmButton.svelte";
+export { default as Sidebar } from "./components/sidebar/sidebar.svelte";
+export { default as SidebarTrigger } from "./components/sidebar/sidebarTrigger.svelte";
+export { default as CreateDetailViewButton } from "./components/detailView/create/createDetailViewButton.svelte";
+export { default as UpdateDetailViewButton } from "./components/detailView/update/updateDetailViewButton.svelte";
+export * as Tooltip from "./components/ui/tooltip";
+export * as Breadcrumb from "./components/ui/breadcrumb";
+export { ContextMenu } from "bits-ui";
+export * as Popover from "./components/ui/popover";
+export * as Icons from "lucide-svelte";
+export * as Dialog from "./components/ui/dialog/index";
+export { default as Table } from "./components/dataTable/table.svelte";
+export { default as RangeCalendarButton } from "./components/rangeCalendarButton.svelte";
+export { default as DataTable } from "./components/dataTable/dataTable.svelte";
+export { default as Drawer } from "./components/drawer.svelte";
+export { default as SelectRecord } from "./components/selectRecord.svelte";
+export { Switch } from "./components/ui/switch";

package/dist/index.js

@@ -1,27 +1,22 @@
-// Main Studio component
 export { default as Studio } from "./components/Studio.svelte";
-// Lobb client and utilities
-export { Lobb } from "./Lobb";
-export * from "./utils";
-export * from "./eventSystem";
-export { ctx, lobb } from "./store.svelte";
-export function createSet(lastNumber) {
-    var set = new Set();
-    for (var i = 0; i <= lastNumber; i++) {
-        set.add(i);
-    }
-    return set;
-}
-export function moveElement(array, fromIndex, toIndex) {
-    if (fromIndex < 0 || fromIndex >= array.length || toIndex < 0 ||
-        toIndex >= array.length) {
-        throw new Error("Index out of bounds");
-    }
-    var element = array.splice(fromIndex, 1)[0];
-    array.splice(toIndex, 0, element);
-    return array;
-}
-export function pxToRem(px) {
-    var rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-    return px / rootFontSize;
-}
+export { Button } from "./components/ui/button";
+export { Input } from "./components/ui/input";
+export { Separator } from "./components/ui/separator";
+export { Skeleton } from "./components/ui/skeleton";
+export { default as LlmButton } from "./components/LlmButton.svelte";
+export { default as Sidebar } from "./components/sidebar/sidebar.svelte";
+export { default as SidebarTrigger } from "./components/sidebar/sidebarTrigger.svelte";
+export { default as CreateDetailViewButton } from "./components/detailView/create/createDetailViewButton.svelte";
+export { default as UpdateDetailViewButton } from "./components/detailView/update/updateDetailViewButton.svelte";
+export * as Tooltip from "./components/ui/tooltip";
+export * as Breadcrumb from "./components/ui/breadcrumb";
+export { ContextMenu } from "bits-ui";
+export * as Popover from "./components/ui/popover";
+export * as Icons from "lucide-svelte";
+export * as Dialog from "./components/ui/dialog/index";
+export { default as Table } from "./components/dataTable/table.svelte";
+export { default as RangeCalendarButton } from "./components/rangeCalendarButton.svelte";
+export { default as DataTable } from "./components/dataTable/dataTable.svelte";
+export { default as Drawer } from "./components/drawer.svelte";
+export { default as SelectRecord } from "./components/selectRecord.svelte";
+export { Switch } from "./components/ui/switch";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobb-js/studio",
-  "version": "0.1.41",
+  "version": "0.1.43",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -11,19 +11,11 @@
   ],
   "exports": {
     ".": {
-      "svelte": "./dist/components/Studio.svelte"
+      "svelte": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./src/lib/index.ts"
     },
-    "./internal": {
-      "svelte": "./src/lib/components/Studio.svelte"
-    },
-    "./*": {
-      "svelte": "./dist/components/*"
-    },
-    "./internal/*": {
-      "svelte": "./src/lib/components/*"
-    },
-    "./vite-plugins": "./vite-plugins/index.js",
-    "./components": "./src/components-export.ts"
+    "./vite-plugins": "./vite-plugins/index.js"
   },
   "scripts": {
     "dev": "vite",
@@ -46,31 +38,38 @@
     "@storybook/svelte-vite": "^10.0.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "6.2.1",
+    "@tsconfig/svelte": "^5.0.6",
     "@types/lodash": "^4.17.17",
     "@types/mustache": "^4.2.6",
     "@types/node": "^24.10.1",
     "@types/qs": "^6.9.18",
-    "@tsconfig/svelte": "^5.0.6",
     "@vitest/browser-playwright": "^4.0.5",
     "@vitest/coverage-v8": "^4.0.5",
     "autoprefixer": "^10.4.23",
     "dts-bundle-generator": "^9.5.1",
     "playwright": "^1.56.1",
     "storybook": "^10.0.1",
+    "svelte": "^5.49.1",
     "svelte-check": "^4.3.4",
+    "tailwindcss": "4.1.18",
     "tailwindcss-animate": "^1.0.7",
     "tw-animate-css": "^1.4.0",
     "typescript": "~5.9.3",
+    "vite": "6.3.3",
     "vite-plugin-css-injected-by-js": "^3.5.2",
-    "vitest": "^4.0.5",
-    "tailwindcss": "4.1.18",
-    "vite": "6.3.3"
+    "vitest": "^4.0.5"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
   "dependencies": {
     "@andrewbranch/untar.js": "^1.0.3",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/merge": "^6.11.2",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.39.12",
     "@dagrejs/dagre": "^1.1.5",
     "@lucide/svelte": "^0.563.1",
     "@tailwindcss/vite": "^4.1.18",
@@ -78,12 +77,12 @@
     "@xyflow/svelte": "^1.2.0",
     "bits-ui": "^1.8.0",
     "clsx": "^2.1.1",
+    "codemirror": "^6.0.2",
     "fflate": "^0.8.2",
     "json-stable-stringify": "^1.3.0",
     "lodash": "^4.17.21",
     "lucide-svelte": "^0.488.0",
     "mode-watcher": "^0.5.1",
-    "monaco-editor": "^0.52.2",
     "mustache": "^4.2.0",
     "qs": "^6.14.1",
     "svelte-sonner": "^0.3.28",

package/vite-plugins/index.js

@@ -12,7 +12,7 @@ import { monorepoImportResolver } from "./monorepo-import-resolver.js";
  */
 export function lobbStudioPlugins() {
   return [
-    monorepoImportResolver(),
+    // monorepoImportResolver(),
     contextualLibAlias(),
   ];
 }

package/dist/Studio.svelte

@@ -1,150 +0,0 @@
-<script lang="ts">
-    import { Toaster } from "./components/ui/sonner";
-    import { onMount, onDestroy } from "svelte";
-    import { ModeWatcher } from "mode-watcher";
-    import { ctx } from "./store.svelte";
-    import { lobb } from "./";
-    import Header from "./components/header.svelte";
-    import { LoaderCircle, ServerOff } from "lucide-svelte";
-    import Dialog from "./components/confirmationDialog/confirmationDialog.svelte";
-    import MiniSidebar from "./components/miniSidebar.svelte";
-    import SetServerPage from "./components/setServerPage.svelte";
-    import * as Tooltip from "./components/ui/tooltip";
-    import { Router, Route, Fallback, init as initRouter,  } from "@wjfe/n-savant";
-    import {
-        executeExtensionsOnStartup,
-        loadExtensions,
-    } from "./extensions/extensionUtils";
-    import { mediaQueries } from "./utils";
-    import Home from "../../routes/home.svelte";
-    import DataModel from "../../routes/data_model/dataModel.svelte";
-    import Collections from "../../routes/collections/collections.svelte";
-    import Workflows from "../../routes/workflows/workflows.svelte";
-    import Extension from "../../routes/extensions/extension.svelte";
-
-    interface StudioProps {
-      extensions?: any[];
-    }
-
-    const props: StudioProps = $props()
-
-    let error: string | null = $state(null);
-    let loaded = $state(false);
-    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";
-            }
-        }
-        loaded = true;
-    });
-
-    onDestroy(() => {
-        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">
-                        <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"
-    >
-        <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>
-    </div>
-{:else}
-    <div
-        class="flex h-full 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>
-    </div>
-{/if}
-
-<style>
-    .second_grid {
-        display: grid;
-        grid-template-rows: 2.5rem 1fr;
-    }
-</style>

package/dist/Studio.svelte.d.ts

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

package/dist/components/monacoEditor.svelte

@@ -1,181 +0,0 @@
-<script lang="ts">
-	import { onMount, onDestroy } from "svelte";
-	import * as monaco from "monaco-editor";
-	import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
-	import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
-	import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
-	import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
-	import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
-	import { cn } from "../utils";
-
-	interface Props {
-		type: "javascript" | "typescript" | "json" | "sql";
-		name: string;
-		value?: string;
-		default?: string;
-		types?: string;
-		class?: string;
-		handleCtrlSave?: () => void;
-		onChange?: (value: string) => void;
-	}
-
-	let {
-		type,
-		name,
-		value = $bindable(""),
-		class: className,
-		types,
-		handleCtrlSave,
-		onChange,
-		...props
-	}: Props = $props();
-
-	let editorContainer: HTMLDivElement;
-	let editor: monaco.editor.IStandaloneCodeEditor;
-	let model: monaco.editor.ITextModel;
-
-	if (props.default) {
-		value = props.default;
-	}
-
-	$effect(() => {
-		if (value !== undefined && editor && value !== editor.getValue()) {
-			editor.setValue(value);
-		}
-	});
-
-	self.MonacoEnvironment = {
-		getWorker(_, label) {
-			if (label === "json") {
-				return new jsonWorker();
-			}
-			if (label === "css" || label === "scss" || label === "less") {
-				return new cssWorker();
-			}
-			if (
-				label === "html" ||
-				label === "handlebars" ||
-				label === "razor"
-			) {
-				return new htmlWorker();
-			}
-			if (label === "typescript" || label === "javascript") {
-				return new tsWorker();
-			}
-			return new editorWorker();
-		},
-	};
-
-	onMount(async () => {
-		monaco.editor.defineTheme("transparentTheme", {
-			base: "vs",
-			inherit: true,
-			rules: [],
-			colors: {
-				"editor.background": "#EFEFEF00",
-				focusBorder: "#00000000",
-			},
-		});
-
-		if (type === "typescript") {
-			monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-				target: monaco.languages.typescript.ScriptTarget.ESNext,
-				moduleResolution:
-					monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-				esModuleInterop: true,
-			});
-			monaco.languages.typescript.typescriptDefaults.addExtraLib(
-				types ?? "",
-				"file:///global.d.ts",
-			);
-
-			// this is an example of importing the picocolors library types
-			// with this you can easily use the picolo types in the web editor like this
-			// import type Pico from "picocolors"
-			// function work(pc: typeof Pico) {
-			// 	pc.bold(`How are ${pc.italic(`you`)} doing?`)
-			// }
-
-			monaco.languages.typescript.typescriptDefaults.addExtraLib(
-				`export type Formatter = (input: string | number | null | undefined) => string
-				export interface Colors {
-					isColorSupported: boolean
-
-					reset: Formatter
-					bold: Formatter
-					dim: Formatter
-					italic: Formatter
-					underline: Formatter
-					inverse: Formatter
-					hidden: Formatter
-					strikethrough: Formatter
-				}`,
-				"file:///node_modules/picocolors/types.d.ts",
-			);
-			monaco.languages.typescript.typescriptDefaults.addExtraLib(
-				`import { Colors } from "./types.d.ts"
-				declare const picocolors: Colors & { createColors: (enabled?: boolean) => Colors }
-				export = picocolors`,
-				"file:///node_modules/picocolors/index.d.ts",
-			);
-		}
-
-		model = monaco.editor.createModel(
-			value,
-			type,
-			monaco.Uri.parse(`file:///${name}.ts`),
-		);
-
-		editor = monaco.editor.create(editorContainer, {
-			model: model,
-			value: value,
-			language: type,
-			automaticLayout: true,
-			theme: "transparentTheme",
-			minimap: { enabled: false },
-			glyphMargin: false,
-			overviewRulerLanes: 0,
-			hideCursorInOverviewRuler: true,
-			stickyScroll: { enabled: false },
-			lineNumbersMinChars: 2,
-			scrollBeyondLastLine: false,
-			padding: { top: 10, bottom: 1 },
-		});
-
-		editor.onDidChangeModelContent(() => {
-			value = editor.getValue();
-			if (onChange) {
-				onChange(value);
-			}
-		});
-
-		// adding duplicate line shortcut
-		editor.addCommand(
-			monaco.KeyMod.Shift | monaco.KeyMod.Alt | monaco.KeyCode.DownArrow,
-			() => editor.trigger("", "editor.action.copyLinesDownAction", null),
-		);
-		editor.addCommand(
-			monaco.KeyMod.Shift | monaco.KeyMod.Alt | monaco.KeyCode.UpArrow,
-			() => editor.trigger("", "editor.action.copyLinesUpAction", null),
-		);
-
-		editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
-			if (handleCtrlSave) {
-				handleCtrlSave();
-			}
-		});
-	});
-
-	onDestroy(() => {
-		editor?.dispose();
-		model.dispose();
-	});
-</script>
-
-<div class={cn("resize-y rounded-md border bg-soft shadow-sm h-60", className)}>
-	<div
-		bind:this={editorContainer}
-		class="editor pl-2"
-		style="height: 100%; width: 100%;"
-	></div>
-</div>

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

@@ -1,13 +0,0 @@
-interface Props {
-    type: "javascript" | "typescript" | "json" | "sql";
-    name: string;
-    value?: string;
-    default?: string;
-    types?: string;
-    class?: string;
-    handleCtrlSave?: () => void;
-    onChange?: (value: string) => void;
-}
-declare const MonacoEditor: import("svelte").Component<Props, {}, "value">;
-type MonacoEditor = ReturnType<typeof MonacoEditor>;
-export default MonacoEditor;