MPEGGroup · vectronic · Jul 20, 2026 · Jul 17, 2026 · Jul 20, 2026 · Jul 20, 2026
diff --git a/README.md b/README.md
@@ -32,16 +32,13 @@ Bundle:
 
 `bun run build`
 
-**NOTE**: The following tasks use Deno as it excels at these and Bun does not
-currently provide such functionality:
-
 Format:
 
-`deno fmt`
+`bunx oxfmt`
 
 Lint:
 
-`deno lint src/ tests/`
+`bunx oxlint index.ts src/ tests/`
 
 ## Functional Tests
 

diff --git a/bun.lock b/bun.lock
diff --git a/html/index.html b/html/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" data-theme="light">
   <head>
     <meta charset="UTF-8" />

diff --git a/package.json b/package.json
@@ -1,46 +1,33 @@
 {
   "name": "@mpeggroup/mpeg-sdl-editor",
+  "version": "1.4.2",
   "description": "ISO/IEC 14496-34 Syntactic Description Language (MPEG SDL) web based editor",
-  "homepage": "https://github.com/MPEGGroup/mpeg-sdl-editor#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/MPEGGroup/mpeg-sdl-editor.git"
-  },
-  "license": "MIT",
   "keywords": [
     "bun",
+    "editor",
     "mpeg",
-    "sdl",
     "parser",
-    "editor"
+    "sdl"
   ],
-  "type": "module",
-  "version": "1.4.2",
-  "scripts": {
-    "build": "bun build.ts"
+  "homepage": "https://github.com/MPEGGroup/mpeg-sdl-editor#readme",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MPEGGroup/mpeg-sdl-editor.git"
   },
+  "type": "module",
   "publishConfig": {
     "access": "public"
   },
-  "devDependencies": {
-    "@happy-dom/global-registrator": "20.9.0",
-    "@testing-library/dom": "10.4.1",
-    "@testing-library/react": "16.3.2",
-    "@types/bun": "1.3.14",
-    "bun-plugin-tailwind": "0.1.2",
-    "happy-dom": "20.9.0"
-  },
-  "peerDependencies": {
-    "typescript": "6.0.3",
-    "@types/react": "19.2.15",
-    "@types/react-dom": "19.2.3"
+  "scripts": {
+    "build": "bun build.ts"
   },
   "dependencies": {
     "@codemirror/language": "6.12.1",
     "@codemirror/lint": "6.9.2",
     "@lezer/common": "1.5.0",
     "@lezer/highlight": "1.2.3",
-    "@mpeggroup/mpeg-sdl-parser": "4.1.2",
+    "@mpeggroup/mpeg-sdl-parser": "4.1.4",
     "@types/wicg-file-system-access": "2023.10.7",
     "@uiw/codemirror-theme-vscode": "4.25.10",
     "@uiw/react-codemirror": "4.25.10",
@@ -49,6 +36,19 @@
     "react-dom": "19.2.6",
     "tailwindcss": "4.3.0"
   },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "20.9.0",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/react": "16.3.2",
+    "@types/bun": "1.3.14",
+    "bun-plugin-tailwind": "0.1.2",
+    "happy-dom": "20.9.0"
+  },
+  "peerDependencies": {
+    "@types/react": "19.2.15",
+    "@types/react-dom": "19.2.3",
+    "typescript": "6.0.3"
+  },
   "overrides": {
     "@codemirror/language": "6.12.1",
     "@codemirror/lint": "6.9.2",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,4 @@
-import {
-  SemanticError,
-  SemanticWarning,
-  SyntaxError,
-} from "@mpeggroup/mpeg-sdl-parser";
+import { SemanticError, SemanticWarning, SyntaxError } from "@mpeggroup/mpeg-sdl-parser";
 import { Editor } from "./components/Editor.tsx";
 import type { EditorRef } from "./components/Editor.tsx";
 import { Navbar } from "./components/Navbar.tsx";
@@ -36,12 +32,9 @@ function getInitialCodeFromHash(): string | null {
 }
 
 export function App() {
-  const defaultCode =
-    "// Start typing your SDL here... <Ctrl+Space> for completions\n";
+  const defaultCode = "// Start typing your SDL here... <Ctrl+Space> for completions\n";
 
-  const [code, setCodeInternal] = useState<string>(
-    () => getInitialCodeFromHash() ?? defaultCode,
-  );
+  const [code, setCodeInternal] = useState<string>(() => getInitialCodeFromHash() ?? defaultCode);
 
   const setCode = useCallback((newCode: string) => {
     setCodeInternal(newCode);
@@ -62,34 +55,29 @@ export function App() {
   const isMobile = useMobileDetection();
   const [isSettingsShown, setSettingsShown] = useState(false);
   const { rulerWidth, setRulerWidth } = useRulerWidth();
-  const { autoDisplayCompletions, setAutoDisplayCompletions } =
-    useAutoDisplayCompletions();
+  const { autoDisplayCompletions, setAutoDisplayCompletions } = useAutoDisplayCompletions();
   const { enableLinting, setEnableLinting } = useEnableLinting();
   const { showSyntaxErrors, setShowSyntaxErrors } = useShowSyntaxErrors();
   const { showSemanticErrors, setShowSemanticErrors } = useShowSemanticErrors();
-  const { showSemanticWarnings, setShowSemanticWarnings } =
-    useShowSemanticWarnings();
-  const [cursorPosition, setCursorPosition] = useState<
-    { line: number; col: number }
-  >({ line: 1, col: 1 });
+  const { showSemanticWarnings, setShowSemanticWarnings } = useShowSemanticWarnings();
+  const [cursorPosition, setCursorPosition] = useState<{ line: number; col: number }>({
+    line: 1,
+    col: 1,
+  });
   const editorRef = useRef<EditorRef>(null);
 
-  const onCursorChange = useCallback(
-    (position: { line: number; col: number }) => {
-      setCursorPosition((prev) => {
-        // Only update if position actually changed
-        if (prev.line !== position.line || prev.col !== position.col) {
-          return position;
-        }
-        return prev;
-      });
-    },
-    [],
-  );
+  const onCursorChange = useCallback((position: { line: number; col: number }) => {
+    setCursorPosition((prev) => {
+      // Only update if position actually changed
+      if (prev.line !== position.line || prev.col !== position.col) {
+        return position;
+      }
+      return prev;
+    });
+  }, []);
   const handleShare = useCallback(async () => {
     const encoded = btoa(code);
-    const url =
-      `${globalThis.location.origin}${globalThis.location.pathname}#c=${encoded}`;
+    const url = `${globalThis.location.origin}${globalThis.location.pathname}#c=${encoded}`;
     try {
       await navigator.clipboard.writeText(url);
       showToast("URL copied!");
@@ -98,11 +86,7 @@ export function App() {
     }
   }, [code, showToast]);
 
-  const {
-    handleSave,
-    handleLoad,
-    handleCopy,
-  } = useFileOperations({
+  const { handleSave, handleLoad, handleCopy } = useFileOperations({
     code,
     setCode,
     showToast,
@@ -113,9 +97,7 @@ export function App() {
   const characterCount = useMemo(() => code.length, [code]);
   const [syntaxErrors, setSyntaxErrors] = useState<SyntaxError[]>([]);
   const [semanticErrors, setSemanticErrors] = useState<SemanticError[]>([]);
-  const [semanticWarnings, setSemanticWarnings] = useState<SemanticWarning[]>(
-    [],
-  );
+  const [semanticWarnings, setSemanticWarnings] = useState<SemanticWarning[]>([]);
 
   const onSyntaxErrorChange = useCallback((newErrors: SyntaxError[]) => {
     setSyntaxErrors(newErrors);
@@ -125,24 +107,15 @@ export function App() {
     setSemanticErrors(newErrors);
   }, []);
 
-  const onSemanticWarningChange = useCallback(
-    (newErrors: SemanticWarning[]) => {
-      setSemanticWarnings(newErrors);
-    },
-    [],
-  );
+  const onSemanticWarningChange = useCallback((newErrors: SemanticWarning[]) => {
+    setSemanticWarnings(newErrors);
+  }, []);
 
-  const syntaxErrorCount = useMemo(() => syntaxErrors.length, [
-    syntaxErrors,
-  ]);
+  const syntaxErrorCount = useMemo(() => syntaxErrors.length, [syntaxErrors]);
 
-  const semanticErrorCount = useMemo(() => semanticErrors.length, [
-    semanticErrors,
-  ]);
+  const semanticErrorCount = useMemo(() => semanticErrors.length, [semanticErrors]);
 
-  const semanticWarningCount = useMemo(() => semanticWarnings.length, [
-    semanticWarnings,
-  ]);
+  const semanticWarningCount = useMemo(() => semanticWarnings.length, [semanticWarnings]);
 
   const { handlePrettify } = usePrettier({
     code,
@@ -251,8 +224,8 @@ export function App() {
               toastState.type === "success"
                 ? "alert-success"
                 : toastState.type === "warning"
-                ? "alert-warning"
-                : "alert-error"
+                  ? "alert-warning"
+                  : "alert-error"
             }`}
           >
             <span>{toastState.message}</span>

diff --git a/src/codemirror/ruler.ts b/src/codemirror/ruler.ts
@@ -7,7 +7,7 @@ const baseTheme = EditorView.baseTheme({
 });
 
 const rulerWidth = Facet.define<number, number>({
-  combine: (values) => values.length ? Math.min(...values) : 10,
+  combine: (values) => (values.length ? Math.min(...values) : 10),
 });
 
 const showRuler = ViewPlugin.fromClass(
@@ -38,9 +38,7 @@ const showRuler = ViewPlugin.fromClass(
       const defaultCharacterWidth = view.defaultCharacterWidth;
       const gutterWidth = view.contentDOM.getBoundingClientRect().x;
 
-      this.rulerDiv.style.left = `${
-        gutterWidth + (column * defaultCharacterWidth) + 6
-      }px`;
+      this.rulerDiv.style.left = `${gutterWidth + column * defaultCharacterWidth + 6}px`;
     }
 
     destroy() {
@@ -50,9 +48,5 @@ const showRuler = ViewPlugin.fromClass(
 );
 
 export function ruler(column: number): Extension {
-  return [
-    baseTheme,
-    rulerWidth.of(column),
-    showRuler,
-  ];
+  return [baseTheme, rulerWidth.of(column), showRuler];
 }
diff --git a/src/components/DesktopPanels.tsx b/src/components/DesktopPanels.tsx
@@ -44,19 +44,15 @@ export function DesktopPanels({
                   ? "bg-primary-content h-16"
                   : "group-hover:bg-base-content/50 group-hover:h-16"
               }`}
-            >
-            </div>
+            ></div>
           </div>
         </div>
       )}
 
       {/* Right panel - only show when not collapsed */}
 
       {isSettingsShown && (
-        <div
-          className="flex flex-col"
-          style={{ width: `${Math.max(100 - splitPercentage, 5)}%` }}
-        >
+        <div className="flex flex-col" style={{ width: `${Math.max(100 - splitPercentage, 5)}%` }}>
           {rightChild}
         </div>
       )}