@mpeggroup/mpeg-sdl-editor 1.3.1

package/src/components/Editor.tsx

@@ -0,0 +1,384 @@
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
+import CodeMirror, { ViewUpdate } from "@uiw/react-codemirror";
+import {
+  codeFolding,
+  ensureSyntaxTree,
+  foldAll,
+  foldGutter,
+  LanguageSupport,
+  type TagStyle,
+  unfoldAll,
+} from "@codemirror/language";
+import { classHighlighter, highlightCode } from "@lezer/highlight";
+import {
+  vscodeDarkInit,
+  vscodeDarkStyle,
+  vscodeLightInit,
+  vscodeLightStyle,
+} from "@uiw/codemirror-theme-vscode";
+import { EditorView } from "@codemirror/view";
+import {
+  SemanticError,
+  SemanticWarning,
+  SyntaxError,
+} from "@mpeggroup/mpeg-sdl-parser";
+export { ViewUpdate } from "@codemirror/view";
+import { lintGutter } from "@codemirror/lint";
+import { autocompletion } from "@codemirror/autocomplete";
+import { sdl } from "../sdl/sdlLanguage.ts";
+import { sdlLinter } from "../sdl/sdlLinter.ts";
+import { ruler } from "../codemirror/ruler.ts";
+
+type TagWithNameAndModified = {
+  name: string | undefined;
+  modified: Array<unknown>;
+};
+
+const darkTheme = vscodeDarkInit({ settings: { fontSize: "11px" } });
+const lightTheme = vscodeLightInit({ settings: { fontSize: "11px" } });
+
+interface EditorProps {
+  code: string;
+  onCodeChange: (code: string) => void;
+  onCursorChange: (position: { line: number; col: number }) => void;
+  onSyntaxErrorChange: (syntaxErrors: SyntaxError[]) => void;
+  onSemanticErrorChange: (syntaxErrors: SemanticError[]) => void;
+  onSemanticWarningChange: (syntaxErrors: SemanticWarning[]) => void;
+  theme: "light" | "dark";
+  rulerWidth: number;
+  autoDisplayCompletions: boolean;
+  enableLinting: boolean;
+  showSyntaxErrors: boolean;
+  showSemanticErrors: boolean;
+  showSemanticWarnings: boolean;
+}
+
+export interface EditorRef {
+  expandAll: () => void;
+  collapseAll: () => void;
+  getStyledCode: () => string;
+}
+
+function extractThemeStyleAttributes(themeStyle: TagStyle[]) {
+  const styleAttributesByTagName = new Map<string, string>();
+
+  themeStyle.forEach((style: TagStyle) => {
+    let attributes = "";
+
+    Object.keys(style).forEach((key) => {
+      if ((key !== "tag") && (key !== "class")) {
+        const value = style[key as keyof typeof style];
+
+        if (typeof value === "string") {
+          attributes += `${key}: ${value};`;
+        }
+      }
+    });
+
+    if (attributes.length === 0) {
+      return;
+    }
+
+    if (style.tag instanceof Array) {
+      style.tag.forEach((tag) => {
+        const actualTag = tag as unknown as TagWithNameAndModified;
+
+        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)) {
+        styleAttributesByTagName.set(actualTag.name, attributes);
+      }
+    }
+  });
+
+  return styleAttributesByTagName;
+}
+
+const lightStyleAttributesByTagName = extractThemeStyleAttributes(
+  vscodeLightStyle,
+);
+const darkStyleAttributesByTagName = extractThemeStyleAttributes(
+  vscodeDarkStyle,
+);
+
+function getStyledCode(
+  sdlLanguageSupport: LanguageSupport,
+  code: string,
+  theme: string,
+): string {
+  const styleAttributesByTagName = theme === "dark"
+    ? darkStyleAttributesByTagName
+    : lightStyleAttributesByTagName;
+
+  let richText = "";
+
+  function emitSpan(text: string, classes: string | undefined) {
+    let spanStyleAttributes;
+
+    if (classes) {
+      let tagName = classes;
+
+      if (classes?.startsWith("tok-")) {
+        // If classes starts with "tok-" it is a class added by classHighlighter
+        tagName = classes.substring(4);
+      }
+
+      const styleAttributes = styleAttributesByTagName.get(tagName);
+
+      if (styleAttributes) {
+        spanStyleAttributes = styleAttributes;
+      }
+    }
+
+    const textNode = document.createTextNode(text);
+    const p = document.createElement("p");
+
+    p.appendChild(textNode);
+
+    let span;
+    if (spanStyleAttributes) {
+      span = "<span style='" + spanStyleAttributes + "'>" +
+        p.innerHTML.replaceAll(" ", "&nbsp;") +
+        "</span>";
+    } else {
+      span = "<span>" + p.innerHTML.replaceAll(" ", "&nbsp;") + "</span>";
+    }
+    richText += span;
+  }
+
+  function emitBreak() {
+    richText += "<br>";
+  }
+
+  highlightCode(
+    code,
+    sdlLanguageSupport.language.parser.parse(code),
+    classHighlighter,
+    emitSpan,
+    emitBreak,
+  );
+
+  return `<span style="font-family: monospace">${richText}</span>`;
+}
+
+export const Editor = forwardRef<EditorRef, EditorProps>(
+  (
+    {
+      code,
+      onCodeChange,
+      onCursorChange,
+      onSyntaxErrorChange,
+      onSemanticErrorChange,
+      onSemanticWarningChange,
+      theme,
+      rulerWidth,
+      autoDisplayCompletions,
+      enableLinting,
+      showSyntaxErrors,
+      showSemanticErrors,
+      showSemanticWarnings,
+    },
+    ref,
+  ) => {
+    const lastCursorPosition = useRef({ line: 1, col: 1 });
+    const editorViewRef = useRef<EditorView | null>(null);
+    const onSyntaxErrorChangeRef = useRef(onSyntaxErrorChange);
+    const onSemanticErrorChangeRef = useRef(onSemanticErrorChange);
+    const onSemanticWarningChangeRef = useRef(onSemanticWarningChange);
+
+    onSyntaxErrorChangeRef.current = onSyntaxErrorChange;
+    onSemanticErrorChangeRef.current = onSemanticErrorChange;
+    onSemanticWarningChangeRef.current = onSemanticWarningChange;
+
+    const sdlLanguageSupport = useMemo(() => sdl(), []);
+
+    // Memoize static extensions that never change
+    const staticExtensions = useMemo(() => [
+      codeFolding(),
+      foldGutter(),
+    ], []);
+
+    const rulerExtension = useMemo(() => ruler(rulerWidth), [rulerWidth]);
+
+    const autocompletionExtension = useMemo(
+      () => autocompletion({ activateOnTyping: autoDisplayCompletions }),
+      [autoDisplayCompletions],
+    );
+
+    const stableOnSyntaxErrorChange = useCallback(
+      (errors: SyntaxError[]) => {
+        onSyntaxErrorChangeRef.current(errors);
+      },
+      [],
+    );
+
+    const stableOnSemanticErrorChange = useCallback(
+      (errors: SemanticError[]) => {
+        onSemanticErrorChangeRef.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,
+            }),
+          ]
+          : [],
+      [
+        enableLinting,
+        stableOnSyntaxErrorChange,
+        stableOnSemanticErrorChange,
+        stableOnSemanticWarningChange,
+        showSyntaxErrors,
+        showSemanticErrors,
+        showSemanticWarnings,
+      ],
+    );
+
+    const extensions = useMemo(() => [
+      ...staticExtensions,
+      rulerExtension,
+      autocompletionExtension,
+      sdlLanguageSupport,
+      ...dynamicExtensions,
+    ], [
+      staticExtensions,
+      rulerExtension,
+      autocompletionExtension,
+      sdlLanguageSupport,
+      dynamicExtensions,
+    ]);
+
+    // Memoize imperative methods
+    const expandAll = useCallback(() => {
+      if (editorViewRef.current) {
+        const view = editorViewRef.current;
+        const state = view.state;
+
+        view.dispatch({});
+
+        ensureSyntaxTree(view.state, state.doc.length, 5000);
+
+        unfoldAll(view);
+      }
+    }, []);
+
+    const collapseAll = useCallback(() => {
+      if (editorViewRef.current) {
+        const view = editorViewRef.current;
+        const state = view.state;
+
+        view.dispatch({});
+
+        ensureSyntaxTree(view.state, state.doc.length, 5000);
+
+        foldAll(view);
+      }
+    }, []);
+
+    // Expose methods via ref
+    useImperativeHandle(ref, () => ({
+      expandAll,
+      collapseAll,
+      getStyledCode: () => {
+        return getStyledCode(sdlLanguageSupport, code, theme);
+      },
+    }), [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);
+          }
+        }
+      }
+    }, [onCursorChange]);
+
+    return (
+      <div className="h-full w-full">
+        <CodeMirror
+          value={code}
+          theme={theme === "dark" ? darkTheme : lightTheme}
+          width="100%"
+          height="100%"
+          className="h-full w-full border border-base-300 rounded-md"
+          onChange={onInternalCodeChange}
+          onUpdate={onViewUpdate}
+          onCreateEditor={(view) => {
+            editorViewRef.current = view;
+          }}
+          indentWithTab
+          extensions={extensions}
+          basicSetup={{
+            lineNumbers: true,
+            syntaxHighlighting: true,
+            history: true,
+            bracketMatching: true,
+            closeBrackets: true,
+            highlightActiveLineGutter: true,
+            highlightActiveLine: true,
+            highlightSelectionMatches: true,
+            autocompletion: false,
+            defaultKeymap: true,
+            searchKeymap: false,
+            historyKeymap: true,
+            foldGutter: false,
+            closeBracketsKeymap: false,
+            foldKeymap: false,
+            completionKeymap: true,
+          }}
+        />
+      </div>
+    );
+  },
+);

package/src/components/MobileDrawer.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import type { Theme } from "../hooks/useTheme.ts";
+
+interface MobileDrawerProps {
+  theme: Theme;
+  isSettingsShown: boolean;
+  onToggleSettings: () => void;
+  children: React.ReactNode;
+}
+
+export function MobileDrawer(
+  { theme, isSettingsShown, onToggleSettings, children }: MobileDrawerProps,
+) {
+  return (
+    <>
+      {isSettingsShown && (
+        <div
+          className="fixed inset-0 bg-black/50 z-40 transition-opacity duration-300"
+          onClick={onToggleSettings}
+        />
+      )}
+      <div
+        className={`fixed top-0 right-0 h-full w-80 bg-base-100 shadow-xl z-40 transform transition-transform duration-300 ease-in-out ${
+          isSettingsShown ? "translate-x-0" : "translate-x-full"
+        }`}
+      >
+        <button
+          type="button"
+          onClick={onToggleSettings}
+          className={`absolute top-2 right-2 btn btn-ghost px-2 py-2 z-10 ${
+            theme === "dark" ? "hover:bg-gray-500 hover:bg-opacity-20" : ""
+          }`}
+          title="Close settings"
+        >
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+        <div className="h-full p-4 pt-4 overflow-hidden">
+          <div className="overflow-y-auto h-full">
+            {children}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/Navbar.tsx

@@ -0,0 +1,226 @@
+import React, { useRef } from "react";
+import type { Theme } from "../hooks/useTheme.ts";
+import { getLogoSvg } from "../logo/getLogoSvg.ts";
+
+const logoSvg = getLogoSvg();
+
+interface NavbarProps {
+  theme: Theme;
+  onCopy: () => void;
+  onSave: () => void;
+  onLoad: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onShare: () => void;
+  onToggleSettings: () => void;
+  isSettingsShown: boolean;
+}
+
+export function Navbar({
+  theme,
+  onCopy,
+  onSave,
+  onLoad,
+  onShare,
+  onToggleSettings,
+  isSettingsShown,
+}: NavbarProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const handleLoadClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <div className="navbar bg-base-200 py-2 pl-0 pr-2 min-h-14">
+      <div className="flex-1 flex items-center">
+        <div
+          className="h-6 sm:h-8 md:h-10 w-auto mr-2 -ml-2 [&_svg]:h-6 [&_svg]:sm:h-8 [&_svg]:md:h-10 [&_svg]:w-auto"
+          dangerouslySetInnerHTML={{ __html: logoSvg }}
+        />
+        <h1 className="text-sm sm:text-base md:text-lg font-semibold truncate -ml-3 -mt-1">
+          SDL Editor
+        </h1>
+      </div>
+      <div className="flex-none">
+        <ul
+          className={`menu-horizontal px-0 items-center [&_button]:btn [&_button]:btn-ghost [&_button]:px-2 [&_button]:py-2 [&_label]:px-2 [&_label]:py-2 ${
+            theme === "dark"
+              ? "[&>li>button]:hover:bg-gray-500 [&>li>button]:hover:bg-opacity-20"
+              : ""
+          }`}
+        >
+          <li>
+            <button
+              type="button"
+              onClick={onCopy}
+              title="Copy All"
+              className="[&_svg]:w-6 [&_svg]:h-6"
+            >
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+                className="w-6 h-6"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                />
+              </svg>
+            </button>
+          </li>
+          <li>
+            <button
+              type="button"
+              onClick={onSave}
+              title="Save"
+              className="[&_svg]:w-6 [&_svg]:h-6"
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                className="w-6 h-6"
+              >
+                <path
+                  d="M19 15V17C19 18.1046 18.1046 19 17 19H7C5.89543 19 5 18.1046 5 17V15M12 5V15M12 15L10 13M12 15L14 13"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </button>
+          </li>
+          <li>
+            <button
+              type="button"
+              onClick={handleLoadClick}
+              title="Load"
+              className="[&_svg]:w-6 [&_svg]:h-6"
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                className="w-6 h-6"
+              >
+                <path
+                  d="M19 15V17C19 18.1046 18.1046 19 17 19H7C5.89543 19 5 18.1046 5 17V15M12 15L12 5M12 5L14 7M12 5L10 7"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </button>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".sdl,text/plain"
+              style={{ display: "none" }}
+              onChange={onLoad}
+            />
+          </li>
+          <li>
+            <button
+              type="button"
+              onClick={onShare}
+              title="Share"
+              className="[&_svg]:w-6 [&_svg]:h-6"
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                xmlns="http://www.w3.org/2000/svg"
+                className="w-6 h-6"
+              >
+                <path d="M9 12C9 13.3807 7.88071 14.5 6.5 14.5C5.11929 14.5 4 13.3807 4 12C4 10.6193 5.11929 9.5 6.5 9.5C7.88071 9.5 9 10.6193 9 12Z" />
+                <path d="M14 6.5L9 10" />
+                <path d="M14 17.5L9 14" />
+                <path d="M19 18.5C19 19.8807 17.8807 21 16.5 21C15.1193 21 14 19.8807 14 18.5C14 17.1193 15.1193 16 16.5 16C17.8807 16 19 17.1193 19 18.5Z" />
+                <path d="M19 5.5C19 6.88071 17.8807 8 16.5 8C15.1193 8 14 6.88071 14 5.5C14 4.11929 15.1193 3 16.5 3C17.8807 3 19 4.11929 19 5.5Z" />
+              </svg>
+            </button>
+          </li>
+          {
+            <li>
+              <button
+                type="button"
+                onClick={onToggleSettings}
+                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>
+                  )}
+              </button>
+            </li>
+          }
+          <li>
+            <a
+              href="https://github.com/MPEGGroup/mpeg-sdl-editor"
+              target="_blank"
+              rel="noopener noreferrer"
+              title="GitHub Repository"
+              className="btn btn-ghost px-2 py-2 [&_svg]:w-6 [&_svg]:h-6"
+            >
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+                className="w-6 h-6"
+              >
+                <g transform="translate(-82.000000, -7398.000000)">
+                  <path
+                    fill="currentColor"
+                    d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399"
+                  />
+                </g>
+              </svg>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}