@mpeggroup/mpeg-sdl-editor 1.4.2 → 1.4.4

package/src/components/Editor.tsx

@@ -1,10 +1,4 @@
-import {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from "react";
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from "react";
 import CodeMirror, { ViewUpdate } from "@uiw/react-codemirror";
 import {
   codeFolding,
@@ -23,11 +17,7 @@ import {
   vscodeLightStyle,
 } from "@uiw/codemirror-theme-vscode";
 import { EditorView } from "@codemirror/view";
-import {
-  SemanticError,
-  SemanticWarning,
-  SyntaxError,
-} from "@mpeggroup/mpeg-sdl-parser";
+import { SemanticError, SemanticWarning, SyntaxError } from "@mpeggroup/mpeg-sdl-parser";
 export { ViewUpdate } from "@codemirror/view";
 import { lintGutter } from "@codemirror/lint";
 import { autocompletion } from "@codemirror/autocomplete";
@@ -72,7 +62,7 @@ function extractThemeStyleAttributes(themeStyle: TagStyle[]) {
     let attributes = "";
 
     Object.keys(style).forEach((key) => {
-      if ((key !== "tag") && (key !== "class")) {
+      if (key !== "tag" && key !== "class") {
         const value = style[key as keyof typeof style];
 
         if (typeof value === "string") {
@@ -89,14 +79,14 @@ function extractThemeStyleAttributes(themeStyle: TagStyle[]) {
       style.tag.forEach((tag) => {
         const actualTag = tag as unknown as TagWithNameAndModified;
 
-        if (actualTag.name && (actualTag.modified.length === 0)) {
+        if (actualTag.name && actualTag.modified.length === 0) {
           styleAttributesByTagName.set(actualTag.name, attributes);
         }
       });
     } else {
       const actualTag = style.tag as unknown as TagWithNameAndModified;
 
-      if (actualTag.name && (actualTag.modified.length === 0)) {
+      if (actualTag.name && actualTag.modified.length === 0) {
         styleAttributesByTagName.set(actualTag.name, attributes);
       }
     }
@@ -105,21 +95,12 @@ function extractThemeStyleAttributes(themeStyle: TagStyle[]) {
   return styleAttributesByTagName;
 }
 
-const lightStyleAttributesByTagName = extractThemeStyleAttributes(
-  vscodeLightStyle,
-);
-const darkStyleAttributesByTagName = extractThemeStyleAttributes(
-  vscodeDarkStyle,
-);
+const lightStyleAttributesByTagName = extractThemeStyleAttributes(vscodeLightStyle);
+const darkStyleAttributesByTagName = extractThemeStyleAttributes(vscodeDarkStyle);
 
-function getStyledCode(
-  sdlLanguageSupport: LanguageSupport,
-  code: string,
-  theme: string,
-): string {
-  const styleAttributesByTagName = theme === "dark"
-    ? darkStyleAttributesByTagName
-    : lightStyleAttributesByTagName;
+function getStyledCode(sdlLanguageSupport: LanguageSupport, code: string, theme: string): string {
+  const styleAttributesByTagName =
+    theme === "dark" ? darkStyleAttributesByTagName : lightStyleAttributesByTagName;
 
   let richText = "";
 
@@ -148,7 +129,10 @@ function getStyledCode(
 
     let span;
     if (spanStyleAttributes) {
-      span = "<span style='" + spanStyleAttributes + "'>" +
+      span =
+        "<span style='" +
+        spanStyleAttributes +
+        "'>" +
         p.innerHTML.replaceAll(" ", "&nbsp;") +
         "</span>";
     } else {
@@ -204,10 +188,7 @@ export const Editor = forwardRef<EditorRef, EditorProps>(
     const sdlLanguageSupport = useMemo(() => sdl(), []);
 
     // Memoize static extensions that never change
-    const staticExtensions = useMemo(() => [
-      codeFolding(),
-      foldGutter(),
-    ], []);
+    const staticExtensions = useMemo(() => [codeFolding(), foldGutter()], []);
 
     const rulerExtension = useMemo(() => ruler(rulerWidth), [rulerWidth]);
 
@@ -216,44 +197,35 @@ export const Editor = forwardRef<EditorRef, EditorProps>(
       [autoDisplayCompletions],
     );
 
-    const stableOnSyntaxErrorChange = useCallback(
-      (errors: SyntaxError[]) => {
-        onSyntaxErrorChangeRef.current(errors);
-      },
-      [],
-    );
+    const stableOnSyntaxErrorChange = useCallback((errors: SyntaxError[]) => {
+      onSyntaxErrorChangeRef.current(errors);
+    }, []);
 
-    const stableOnSemanticErrorChange = useCallback(
-      (errors: SemanticError[]) => {
-        onSemanticErrorChangeRef.current(errors);
-      },
-      [],
-    );
+    const stableOnSemanticErrorChange = useCallback((errors: SemanticError[]) => {
+      onSemanticErrorChangeRef.current(errors);
+    }, []);
 
-    const stableOnSemanticWarningChange = useCallback(
-      (errors: SemanticWarning[]) => {
-        onSemanticWarningChangeRef.current(errors);
-      },
-      [],
-    );
+    const stableOnSemanticWarningChange = useCallback((errors: SemanticWarning[]) => {
+      onSemanticWarningChangeRef.current(errors);
+    }, []);
 
     // Memoize dynamic extensions that depend on props
     const dynamicExtensions = useMemo(
       () =>
         enableLinting
           ? [
-            // TODO: only include the lint gutter if showSyntaxErrors, showSemanticErrors, or showSemanticWarnings is true
-            lintGutter(),
-            // TODO: pass showSyntaxErrors, showSemanticErrors, showSemanticWarnings to sdlLinter
-            sdlLinter({
-              onSyntaxErrorChange: stableOnSyntaxErrorChange,
-              onSemanticErrorChange: stableOnSemanticErrorChange,
-              onSemanticWarningChange: stableOnSemanticWarningChange,
-              showSyntaxErrors,
-              showSemanticErrors,
-              showSemanticWarnings,
-            }),
-          ]
+              // TODO: only include the lint gutter if showSyntaxErrors, showSemanticErrors, or showSemanticWarnings is true
+              lintGutter(),
+              // TODO: pass showSyntaxErrors, showSemanticErrors, showSemanticWarnings to sdlLinter
+              sdlLinter({
+                onSyntaxErrorChange: stableOnSyntaxErrorChange,
+                onSemanticErrorChange: stableOnSemanticErrorChange,
+                onSemanticWarningChange: stableOnSemanticWarningChange,
+                showSyntaxErrors,
+                showSemanticErrors,
+                showSemanticWarnings,
+              }),
+            ]
           : [],
       [
         enableLinting,
@@ -266,19 +238,22 @@ export const Editor = forwardRef<EditorRef, EditorProps>(
       ],
     );
 
-    const extensions = useMemo(() => [
-      ...staticExtensions,
-      rulerExtension,
-      autocompletionExtension,
-      sdlLanguageSupport,
-      ...dynamicExtensions,
-    ], [
-      staticExtensions,
-      rulerExtension,
-      autocompletionExtension,
-      sdlLanguageSupport,
-      dynamicExtensions,
-    ]);
+    const extensions = useMemo(
+      () => [
+        ...staticExtensions,
+        rulerExtension,
+        autocompletionExtension,
+        sdlLanguageSupport,
+        ...dynamicExtensions,
+      ],
+      [
+        staticExtensions,
+        rulerExtension,
+        autocompletionExtension,
+        sdlLanguageSupport,
+        dynamicExtensions,
+      ],
+    );
 
     // Memoize imperative methods
     const expandAll = useCallback(() => {
@@ -308,41 +283,51 @@ export const Editor = forwardRef<EditorRef, EditorProps>(
     }, []);
 
     // Expose methods via ref
-    useImperativeHandle(ref, () => ({
-      expandAll,
-      collapseAll,
-      getStyledCode: () => {
-        return getStyledCode(sdlLanguageSupport, code, theme);
+    useImperativeHandle(
+      ref,
+      () => ({
+        expandAll,
+        collapseAll,
+        getStyledCode: () => {
+          return getStyledCode(sdlLanguageSupport, code, theme);
+        },
+      }),
+      [expandAll, collapseAll, sdlLanguageSupport, code, theme],
+    );
+
+    const onInternalCodeChange = useCallback(
+      (newCode: string) => {
+        onCodeChange(newCode);
       },
-    }), [expandAll, collapseAll, sdlLanguageSupport, code, theme]);
-
-    const onInternalCodeChange = useCallback((newCode: string) => {
-      onCodeChange(newCode);
-    }, [onCodeChange]);
-
-    const onViewUpdate = useCallback((viewUpdate: ViewUpdate) => {
-      if (viewUpdate.state) {
-        const state = viewUpdate.state;
-        const selection = state.selection.main;
-
-        if (selection) {
-          const head = selection.head;
-          const line = state.doc.lineAt(head);
-          const lineNumber = line.number;
-          const columnNumber = head - line.from + 1;
-
-          // Only update if position actually changed
-          if (
-            lastCursorPosition.current.line !== lineNumber ||
-            lastCursorPosition.current.col !== columnNumber
-          ) {
-            const newPosition = { line: lineNumber, col: columnNumber };
-            lastCursorPosition.current = newPosition;
-            onCursorChange(newPosition);
+      [onCodeChange],
+    );
+
+    const onViewUpdate = useCallback(
+      (viewUpdate: ViewUpdate) => {
+        if (viewUpdate.state) {
+          const state = viewUpdate.state;
+          const selection = state.selection.main;
+
+          if (selection) {
+            const head = selection.head;
+            const line = state.doc.lineAt(head);
+            const lineNumber = line.number;
+            const columnNumber = head - line.from + 1;
+
+            // Only update if position actually changed
+            if (
+              lastCursorPosition.current.line !== lineNumber ||
+              lastCursorPosition.current.col !== columnNumber
+            ) {
+              const newPosition = { line: lineNumber, col: columnNumber };
+              lastCursorPosition.current = newPosition;
+              onCursorChange(newPosition);
+            }
           }
         }
-      }
-    }, [onCursorChange]);
+      },
+      [onCursorChange],
+    );
 
     return (
       <div className="h-full w-full">

package/src/components/MobileDrawer.tsx

@@ -8,9 +8,12 @@ interface MobileDrawerProps {
   children: React.ReactNode;
 }
 
-export function MobileDrawer(
-  { theme, isSettingsShown, onToggleSettings, children }: MobileDrawerProps,
-) {
+export function MobileDrawer({
+  theme,
+  isSettingsShown,
+  onToggleSettings,
+  children,
+}: MobileDrawerProps) {
   return (
     <>
       {isSettingsShown && (
@@ -32,12 +35,7 @@ export function MobileDrawer(
           }`}
           title="Close settings"
         >
-          <svg
-            className="w-6 h-6"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
+          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
               strokeLinecap="round"
               strokeLinejoin="round"
@@ -47,9 +45,7 @@ export function MobileDrawer(
           </svg>
         </button>
         <div className="h-full p-4 pt-4 overflow-hidden">
-          <div className="overflow-y-auto h-full">
-            {children}
-          </div>
+          <div className="overflow-y-auto h-full">{children}</div>
         </div>
       </div>
     </>

package/src/components/Navbar.tsx

@@ -71,12 +71,7 @@ export function Navbar({
             </button>
           </li>
           <li>
-            <button
-              type="button"
-              onClick={onSave}
-              title="Save"
-              className="[&_svg]:w-6 [&_svg]:h-6"
-            >
+            <button type="button" onClick={onSave} title="Save" className="[&_svg]:w-6 [&_svg]:h-6">
               <svg
                 viewBox="0 0 24 24"
                 fill="none"
@@ -156,42 +151,40 @@ export function Navbar({
                 title={isSettingsShown ? "Close settings" : "Open settings"}
                 className="[&_svg]:w-6 [&_svg]:h-6"
               >
-                {isSettingsShown
-                  ? (
-                    <svg
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      viewBox="0 0 24 24"
-                      className="w-6 h-6"
-                    >
-                      <path
-                        fill="currentColor"
-                        opacity="0.3"
-                        fillRule="evenodd"
-                        clipRule="evenodd"
-                        d="M11 3C10.4477 3 10 3.44772 10 4V4.56876C10 4.99658 9.71288 5.36825 9.31776 5.53229C8.9225 5.6964 8.46228 5.63386 8.15966 5.33123L7.75734 4.92891C7.36681 4.53839 6.73365 4.53839 6.34312 4.92891L4.92891 6.34313C4.53838 6.73365 4.53838 7.36681 4.92891 7.75734L5.33123 8.15966C5.63386 8.46229 5.6964 8.9225 5.53229 9.31776C5.36825 9.71288 4.99658 10 4.56877 10L4 10C3.44772 10 3 10.4477 3 11V13C3 13.5523 3.44772 14 4 14H4.56879C4.99659 14 5.36825 14.2871 5.53228 14.6822C5.69638 15.0775 5.63384 15.5377 5.33123 15.8403L4.92889 16.2426C4.53837 16.6331 4.53837 17.2663 4.92889 17.6568L6.34311 19.071C6.73363 19.4616 7.36679 19.4616 7.75732 19.071L8.1596 18.6688C8.46223 18.3661 8.92247 18.3036 9.31774 18.4677C9.71287 18.6317 10 19.0034 10 19.4313V20C10 20.5523 10.4477 21 11 21H13C13.5523 21 14 20.5523 14 20V19.4312C14 19.0034 14.2871 18.6318 14.6822 18.4677C15.0775 18.3036 15.5377 18.3661 15.8403 18.6688L16.2426 19.071C16.6331 19.4616 17.2663 19.4616 17.6568 19.071L19.071 17.6568C19.4616 17.2663 19.4616 16.6331 19.071 16.2426L18.6688 15.8403C18.3661 15.5377 18.3036 15.0775 18.4677 14.6822C18.6318 14.2871 19.0034 14 19.4312 14H20C20.5523 14 21 13.5523 21 13V11C21 10.4477 20.5523 10 20 10L19.4313 10C19.0034 10 18.6317 9.71287 18.4677 9.31774C18.3036 8.92247 18.3661 8.46223 18.6688 8.1596L19.071 7.75734C19.4615 7.36681 19.4616 6.73365 19.071 6.34312L17.6568 4.92891C17.2663 4.53838 16.6331 4.53838 16.2426 4.92891L15.8403 5.33123C15.5377 5.63384 15.0775 5.69638 14.6822 5.53228C14.2871 5.36825 14 4.99659 14 4.56879V4C14 3.44772 13.5523 3 13 3H11ZM12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z"
-                      />
-                      <path d="M11 3H13C13.5523 3 14 3.44772 14 4V4.56879C14 4.99659 14.2871 5.36825 14.6822 5.53228C15.0775 5.69638 15.5377 5.63384 15.8403 5.33123L16.2426 4.92891C16.6331 4.53838 17.2663 4.53838 17.6568 4.92891L19.071 6.34312C19.4616 6.73365 19.4615 7.36681 19.071 7.75734L18.6688 8.1596C18.3661 8.46223 18.3036 8.92247 18.4677 9.31774C18.6317 9.71287 19.0034 10 19.4313 10L20 10C20.5523 10 21 10.4477 21 11V13C21 13.5523 20.5523 14 20 14H19.4312C19.0034 14 18.6318 14.2871 18.4677 14.6822C18.3036 15.0775 18.3661 15.5377 18.6688 15.8403L19.071 16.2426C19.4616 16.6331 19.4616 17.2663 19.071 17.6568L17.6568 19.071C17.2663 19.4616 16.6331 19.4616 16.2426 19.071L15.8403 18.6688C15.5377 18.3661 15.0775 18.3036 14.6822 18.4677C14.2871 18.6318 14 19.0034 14 19.4312V20C14 20.5523 13.5523 21 13 21H11C10.4477 21 10 20.5523 10 20V19.4313C10 19.0034 9.71287 18.6317 9.31774 18.4677C8.92247 18.3036 8.46223 18.3661 8.1596 18.6688L7.75732 19.071C7.36679 19.4616 6.73363 19.4616 6.34311 19.071L4.92889 17.6568C4.53837 17.2663 4.53837 16.6331 4.92889 16.2426L5.33123 15.8403C5.63384 15.5377 5.69638 15.0775 5.53228 14.6822C5.36825 14.2871 4.99659 14 4.56879 14H4C3.44772 14 3 13.5523 3 13V11C3 10.4477 3.44772 10 4 10L4.56877 10C4.99658 10 5.36825 9.71288 5.53229 9.31776C5.6964 8.9225 5.63386 8.46229 5.33123 8.15966L4.92891 7.75734C4.53838 7.36681 4.53838 6.73365 4.92891 6.34313L6.34312 4.92891C6.73365 4.53839 7.36681 4.53839 7.75734 4.92891L8.15966 5.33123C8.46228 5.63386 8.9225 5.6964 9.31776 5.53229C9.71288 5.36825 10 4.99658 10 4.56876V4C10 3.44772 10.4477 3 11 3Z" />
-                      <path d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" />
-                    </svg>
-                  )
-                  : (
-                    <svg
-                      fill="none"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                      className="w-6 h-6"
-                    >
-                      <path d="M11 3H13C13.5523 3 14 3.44772 14 4V4.56879C14 4.99659 14.2871 5.36825 14.6822 5.53228C15.0775 5.69638 15.5377 5.63384 15.8403 5.33123L16.2426 4.92891C16.6331 4.53838 17.2663 4.53838 17.6568 4.92891L19.071 6.34312C19.4616 6.73365 19.4615 7.36681 19.071 7.75734L18.6688 8.1596C18.3661 8.46223 18.3036 8.92247 18.4677 9.31774C18.6317 9.71287 19.0034 10 19.4313 10L20 10C20.5523 10 21 10.4477 21 11V13C21 13.5523 20.5523 14 20 14H19.4312C19.0034 14 18.6318 14.2871 18.4677 14.6822C18.3036 15.0775 18.3661 15.5377 18.6688 15.8403L19.071 16.2426C19.4616 16.6331 19.4616 17.2663 19.071 17.6568L17.6568 19.071C17.2663 19.4616 16.6331 19.4616 16.2426 19.071L15.8403 18.6688C15.5377 18.3661 15.0775 18.3036 14.6822 18.4677C14.2871 18.6318 14 19.0034 14 19.4312V20C14 20.5523 13.5523 21 13 21H11C10.4477 21 10 20.5523 10 20V19.4313C10 19.0034 9.71287 18.6317 9.31774 18.4677C8.92247 18.3036 8.46223 18.3661 8.1596 18.6688L7.75732 19.071C7.36679 19.4616 6.73363 19.4616 6.34311 19.071L4.92889 17.6568C4.53837 17.2663 4.53837 16.6331 4.92889 16.2426L5.33123 15.8403C5.63384 15.5377 5.69638 15.0775 5.53228 14.6822C5.36825 14.2871 4.99659 14 4.56879 14H4C3.44772 14 3 13.5523 3 13V11C3 10.4477 3.44772 10 4 10L4.56877 10C4.99658 10 5.36825 9.71288 5.53229 9.31776C5.6964 8.9225 5.63386 8.46229 5.33123 8.15966L4.92891 7.75734C4.53838 7.36681 4.53838 6.73365 4.92891 6.34313L6.34312 4.92891C6.73365 4.53839 7.36681 4.53839 7.75734 4.92891L8.15966 5.33123C8.46228 5.63386 8.9225 5.6964 9.31776 5.53229C9.71288 5.36825 10 4.99658 10 4.56876V4C10 3.44772 10.4477 3 11 3Z" />
-                      <path d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" />
-                    </svg>
-                  )}
+                {isSettingsShown ? (
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    viewBox="0 0 24 24"
+                    className="w-6 h-6"
+                  >
+                    <path
+                      fill="currentColor"
+                      opacity="0.3"
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M11 3C10.4477 3 10 3.44772 10 4V4.56876C10 4.99658 9.71288 5.36825 9.31776 5.53229C8.9225 5.6964 8.46228 5.63386 8.15966 5.33123L7.75734 4.92891C7.36681 4.53839 6.73365 4.53839 6.34312 4.92891L4.92891 6.34313C4.53838 6.73365 4.53838 7.36681 4.92891 7.75734L5.33123 8.15966C5.63386 8.46229 5.6964 8.9225 5.53229 9.31776C5.36825 9.71288 4.99658 10 4.56877 10L4 10C3.44772 10 3 10.4477 3 11V13C3 13.5523 3.44772 14 4 14H4.56879C4.99659 14 5.36825 14.2871 5.53228 14.6822C5.69638 15.0775 5.63384 15.5377 5.33123 15.8403L4.92889 16.2426C4.53837 16.6331 4.53837 17.2663 4.92889 17.6568L6.34311 19.071C6.73363 19.4616 7.36679 19.4616 7.75732 19.071L8.1596 18.6688C8.46223 18.3661 8.92247 18.3036 9.31774 18.4677C9.71287 18.6317 10 19.0034 10 19.4313V20C10 20.5523 10.4477 21 11 21H13C13.5523 21 14 20.5523 14 20V19.4312C14 19.0034 14.2871 18.6318 14.6822 18.4677C15.0775 18.3036 15.5377 18.3661 15.8403 18.6688L16.2426 19.071C16.6331 19.4616 17.2663 19.4616 17.6568 19.071L19.071 17.6568C19.4616 17.2663 19.4616 16.6331 19.071 16.2426L18.6688 15.8403C18.3661 15.5377 18.3036 15.0775 18.4677 14.6822C18.6318 14.2871 19.0034 14 19.4312 14H20C20.5523 14 21 13.5523 21 13V11C21 10.4477 20.5523 10 20 10L19.4313 10C19.0034 10 18.6317 9.71287 18.4677 9.31774C18.3036 8.92247 18.3661 8.46223 18.6688 8.1596L19.071 7.75734C19.4615 7.36681 19.4616 6.73365 19.071 6.34312L17.6568 4.92891C17.2663 4.53838 16.6331 4.53838 16.2426 4.92891L15.8403 5.33123C15.5377 5.63384 15.0775 5.69638 14.6822 5.53228C14.2871 5.36825 14 4.99659 14 4.56879V4C14 3.44772 13.5523 3 13 3H11ZM12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z"
+                    />
+                    <path d="M11 3H13C13.5523 3 14 3.44772 14 4V4.56879C14 4.99659 14.2871 5.36825 14.6822 5.53228C15.0775 5.69638 15.5377 5.63384 15.8403 5.33123L16.2426 4.92891C16.6331 4.53838 17.2663 4.53838 17.6568 4.92891L19.071 6.34312C19.4616 6.73365 19.4615 7.36681 19.071 7.75734L18.6688 8.1596C18.3661 8.46223 18.3036 8.92247 18.4677 9.31774C18.6317 9.71287 19.0034 10 19.4313 10L20 10C20.5523 10 21 10.4477 21 11V13C21 13.5523 20.5523 14 20 14H19.4312C19.0034 14 18.6318 14.2871 18.4677 14.6822C18.3036 15.0775 18.3661 15.5377 18.6688 15.8403L19.071 16.2426C19.4616 16.6331 19.4616 17.2663 19.071 17.6568L17.6568 19.071C17.2663 19.4616 16.6331 19.4616 16.2426 19.071L15.8403 18.6688C15.5377 18.3661 15.0775 18.3036 14.6822 18.4677C14.2871 18.6318 14 19.0034 14 19.4312V20C14 20.5523 13.5523 21 13 21H11C10.4477 21 10 20.5523 10 20V19.4313C10 19.0034 9.71287 18.6317 9.31774 18.4677C8.92247 18.3036 8.46223 18.3661 8.1596 18.6688L7.75732 19.071C7.36679 19.4616 6.73363 19.4616 6.34311 19.071L4.92889 17.6568C4.53837 17.2663 4.53837 16.6331 4.92889 16.2426L5.33123 15.8403C5.63384 15.5377 5.69638 15.0775 5.53228 14.6822C5.36825 14.2871 4.99659 14 4.56879 14H4C3.44772 14 3 13.5523 3 13V11C3 10.4477 3.44772 10 4 10L4.56877 10C4.99658 10 5.36825 9.71288 5.53229 9.31776C5.6964 8.9225 5.63386 8.46229 5.33123 8.15966L4.92891 7.75734C4.53838 7.36681 4.53838 6.73365 4.92891 6.34313L6.34312 4.92891C6.73365 4.53839 7.36681 4.53839 7.75734 4.92891L8.15966 5.33123C8.46228 5.63386 8.9225 5.6964 9.31776 5.53229C9.71288 5.36825 10 4.99658 10 4.56876V4C10 3.44772 10.4477 3 11 3Z" />
+                    <path d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" />
+                  </svg>
+                ) : (
+                  <svg
+                    fill="none"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    className="w-6 h-6"
+                  >
+                    <path d="M11 3H13C13.5523 3 14 3.44772 14 4V4.56879C14 4.99659 14.2871 5.36825 14.6822 5.53228C15.0775 5.69638 15.5377 5.63384 15.8403 5.33123L16.2426 4.92891C16.6331 4.53838 17.2663 4.53838 17.6568 4.92891L19.071 6.34312C19.4616 6.73365 19.4615 7.36681 19.071 7.75734L18.6688 8.1596C18.3661 8.46223 18.3036 8.92247 18.4677 9.31774C18.6317 9.71287 19.0034 10 19.4313 10L20 10C20.5523 10 21 10.4477 21 11V13C21 13.5523 20.5523 14 20 14H19.4312C19.0034 14 18.6318 14.2871 18.4677 14.6822C18.3036 15.0775 18.3661 15.5377 18.6688 15.8403L19.071 16.2426C19.4616 16.6331 19.4616 17.2663 19.071 17.6568L17.6568 19.071C17.2663 19.4616 16.6331 19.4616 16.2426 19.071L15.8403 18.6688C15.5377 18.3661 15.0775 18.3036 14.6822 18.4677C14.2871 18.6318 14 19.0034 14 19.4312V20C14 20.5523 13.5523 21 13 21H11C10.4477 21 10 20.5523 10 20V19.4313C10 19.0034 9.71287 18.6317 9.31774 18.4677C8.92247 18.3036 8.46223 18.3661 8.1596 18.6688L7.75732 19.071C7.36679 19.4616 6.73363 19.4616 6.34311 19.071L4.92889 17.6568C4.53837 17.2663 4.53837 16.6331 4.92889 16.2426L5.33123 15.8403C5.63384 15.5377 5.69638 15.0775 5.53228 14.6822C5.36825 14.2871 4.99659 14 4.56879 14H4C3.44772 14 3 13.5523 3 13V11C3 10.4477 3.44772 10 4 10L4.56877 10C4.99658 10 5.36825 9.71288 5.53229 9.31776C5.6964 8.9225 5.63386 8.46229 5.33123 8.15966L4.92891 7.75734C4.53838 7.36681 4.53838 6.73365 4.92891 6.34313L6.34312 4.92891C6.73365 4.53839 7.36681 4.53839 7.75734 4.92891L8.15966 5.33123C8.46228 5.63386 8.9225 5.6964 9.31776 5.53229C9.71288 5.36825 10 4.99658 10 4.56876V4C10 3.44772 10.4477 3 11 3Z" />
+                    <path d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" />
+                  </svg>
+                )}
               </button>
             </li>
           }

package/src/components/ResizableLayout.tsx

@@ -38,32 +38,28 @@ export function ResizableLayout({
 
   return (
     <div ref={containerRef} className="flex h-full w-full relative">
-      {isMobile
-        ? (
-          <>
-            <div className="flex flex-col w-full">
-              {children[0]}
-            </div>
+      {isMobile ? (
+        <>
+          <div className="flex flex-col w-full">{children[0]}</div>
 
-            <MobileDrawer
-              theme={theme}
-              isSettingsShown={isSettingsShown}
-              onToggleSettings={onToggleSettings}
-            >
-              {children[1]}
-            </MobileDrawer>
-          </>
-        )
-        : (
-          <DesktopPanels
-            leftChild={children[0]}
-            rightChild={children[1]}
-            splitPercentage={splitPercentage}
+          <MobileDrawer
+            theme={theme}
             isSettingsShown={isSettingsShown}
-            isDragging={isDragging}
-            onMouseDown={handleMouseDown}
-          />
-        )}
+            onToggleSettings={onToggleSettings}
+          >
+            {children[1]}
+          </MobileDrawer>
+        </>
+      ) : (
+        <DesktopPanels
+          leftChild={children[0]}
+          rightChild={children[1]}
+          splitPercentage={splitPercentage}
+          isSettingsShown={isSettingsShown}
+          isDragging={isDragging}
+          onMouseDown={handleMouseDown}
+        />
+      )}
     </div>
   );
 }

package/src/components/Settings.tsx

@@ -18,29 +18,25 @@ interface SettingsProps {
   onShowSemanticWarningsChange?: (value: boolean) => void;
 }
 
-export function Settings(
-  {
-    theme,
-    onToggleTheme,
-    rulerWidth,
-    onRulerWidthChange,
-    autoDisplayCompletions,
-    onAutoDisplayCompletionsChange,
-    enableLinting,
-    onEnableLintingChange,
-    showSyntaxErrors,
-    onShowSyntaxErrorsChange,
-    showSemanticErrors,
-    onShowSemanticErrorsChange,
-    showSemanticWarnings,
-    onShowSemanticWarningsChange,
-  }: SettingsProps,
-) {
+export function Settings({
+  theme,
+  onToggleTheme,
+  rulerWidth,
+  onRulerWidthChange,
+  autoDisplayCompletions,
+  onAutoDisplayCompletionsChange,
+  enableLinting,
+  onEnableLintingChange,
+  showSyntaxErrors,
+  onShowSyntaxErrorsChange,
+  showSemanticErrors,
+  onShowSemanticErrorsChange,
+  showSemanticWarnings,
+  onShowSemanticWarningsChange,
+}: SettingsProps) {
   return (
     <div className="h-full bg-base-100 md:p-4 overflow-auto">
-      <h2 className="font-bold pb-4">
-        Settings
-      </h2>
+      <h2 className="font-bold pb-4">Settings</h2>
       <div className="flex flex-col gap-3">
         <div className="flex items-center gap-3">
           <span className="text-sm whitespace-nowrap">Theme</span>
@@ -50,25 +46,23 @@ export function Settings(
             title={theme === "dark" ? "Light theme" : "Dark theme"}
             className="btn btn-sm border border-base-content/30 rounded-lg bg-transparent hover:bg-base-content/10 hover:border-base-content/30 [&_svg]:w-5 [&_svg]:h-5"
           >
-            {theme === "dark"
-              ? (
-                <svg
-                  className="w-5 h-5 fill-current"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
-                </svg>
-              )
-              : (
-                <svg
-                  className="w-5 h-5 fill-current"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
-                </svg>
-              )}
+            {theme === "dark" ? (
+              <svg
+                className="w-5 h-5 fill-current"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+              </svg>
+            ) : (
+              <svg
+                className="w-5 h-5 fill-current"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+              >
+                <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+              </svg>
+            )}
           </button>
         </div>
         <div className="flex items-center gap-3">
@@ -86,9 +80,7 @@ export function Settings(
           </select>
         </div>
         <div className="flex items-center gap-3">
-          <span className="text-sm whitespace-nowrap">
-            Auto-Display Completions
-          </span>
+          <span className="text-sm whitespace-nowrap">Auto-Display Completions</span>
           <input
             type="checkbox"
             className="checkbox checkbox-sm border-base-content/30"
@@ -115,8 +107,7 @@ export function Settings(
                     className="checkbox checkbox-xs disabled:opacity-50 disabled:cursor-not-allowed"
                     checked={showSyntaxErrors}
                     disabled={!enableLinting}
-                    onChange={(e) =>
-                      onShowSyntaxErrorsChange?.(e.target.checked)}
+                    onChange={(e) => onShowSyntaxErrorsChange?.(e.target.checked)}
                   />
                   <span
                     className={`text-xs text-left whitespace-nowrap ${
@@ -132,8 +123,7 @@ export function Settings(
                     className="checkbox checkbox-xs disabled:opacity-50 disabled:cursor-not-allowed"
                     checked={showSemanticErrors}
                     disabled={!enableLinting}
-                    onChange={(e) =>
-                      onShowSemanticErrorsChange?.(e.target.checked)}
+                    onChange={(e) => onShowSemanticErrorsChange?.(e.target.checked)}
                   />
                   <span
                     className={`text-xs text-left whitespace-nowrap ${
@@ -149,8 +139,7 @@ export function Settings(
                     className="checkbox checkbox-xs disabled:opacity-50 disabled:cursor-not-allowed"
                     checked={showSemanticWarnings}
                     disabled={!enableLinting}
-                    onChange={(e) =>
-                      onShowSemanticWarningsChange?.(e.target.checked)}
+                    onChange={(e) => onShowSemanticWarningsChange?.(e.target.checked)}
                   />
                   <span
                     className={`text-xs text-left whitespace-nowrap ${

package/src/components/StatusBar.tsx

@@ -28,12 +28,8 @@ export function StatusBar({
       <div className="flex items-center space-x-4">
         <span>Lines: {lineCount}</span>
         <span>Characters: {characterCount}</span>
-        {enableLinting && showSyntaxErrors && (
-          <span>Syntax Errors: {syntaxErrorCount}</span>
-        )}
-        {enableLinting && showSemanticErrors && (
-          <span>Semantic Errors: {semanticErrorCount}</span>
-        )}
+        {enableLinting && showSyntaxErrors && <span>Syntax Errors: {syntaxErrorCount}</span>}
+        {enableLinting && showSemanticErrors && <span>Semantic Errors: {semanticErrorCount}</span>}
         {enableLinting && showSemanticWarnings && (
           <span>Semantic Warnings: {semanticWarningCount}</span>
         )}

package/src/components/SubNav.tsx

@@ -7,12 +7,7 @@ interface SubNavProps {
   onPrettify: () => void;
 }
 
-export function SubNav({
-  theme,
-  onCollapseAll,
-  onExpandAll,
-  onPrettify,
-}: SubNavProps) {
+export function SubNav({ theme, onCollapseAll, onExpandAll, onPrettify }: SubNavProps) {
   return (
     <div
       className={`border-b border-base-300 px-2 py-1.5 flex items-center justify-between text-xs min-h-8 ${