@lobb-js/studio 0.1.40 → 0.1.42

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,7 +3,7 @@
 	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 CodeEditor from "./codeEditor.svelte";
 	import { lobb } from "..";
 	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/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/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

@@ -3,7 +3,7 @@
     import { 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";
@@ -41,7 +41,7 @@
     }
 </script>
 
-<div class="h-[50%] border-b">
+<div class="h-[50%] border-b overflow-auto">
     {#if configSchema && dbSchema}
         <DiffViewer
             type="json"
@@ -70,7 +70,7 @@
                 Execute
             </Button>
         </div>
-        <MonacoEditor
+        <CodeEditor
             type="sql"
             name="prompt"
             bind:value={sqlPrompt}

package/dist/components/routes/home.svelte

@@ -29,7 +29,9 @@
     </div>
     <div class="flex justify-end p-2 text-xs text-muted-foreground/50">
         <div class="flex flex-col text-end">
-            <div>studio: v{ctx.studioVersion}</div>
+            {#if ctx.studioVersion}
+                <div>studio: v{ctx.studioVersion}</div>
+            {/if}
             <div>core: v{ctx.meta.version}</div>
         </div>
     </div>

package/dist/components/workflowEditor.svelte

@@ -12,7 +12,7 @@
 
 <script lang="ts">
     import { lobb } from "..";
-    import MonacoEditor from "./monacoEditor.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";
@@ -175,7 +175,7 @@
         </div>
     </div>
     {#key types}
-        <MonacoEditor
+        <CodeEditor
             type="typescript"
             name="workflow"
             class="h-full rounded-none border-none"

package/dist/store.svelte.js

@@ -36,15 +36,18 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { Lobb } from './Lobb';
 import { toast } from 'svelte-sonner';
-import pkg from '../../package.json';
 if (!window.APP_ENV) {
     window.APP_ENV = {};
 }
 if (window.APP_ENV.LOBB_URL === '%LOBB_URL%') {
     window.APP_ENV.LOBB_URL = null;
 }
+// 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,
+    // studioVersion: pkg.version,
     lobbUrl: window.APP_ENV.LOBB_URL || localStorage.getItem("lobb_url"),
     extensions: {},
     meta: {

package/dist/store.types.d.ts

@@ -17,7 +17,7 @@ interface Meta {
     studio_workflows: any[];
 }
 export interface CTX {
-    studioVersion: string;
+    studioVersion?: string;
     lobbUrl: string | null;
     extensions: Record<string, Extension>;
     meta: Meta;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobb-js/studio",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -46,31 +46,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 +85,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/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;

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

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