@mpeggroup/mpeg-sdl-editor 1.3.1

package/src/components/ResizableLayout.tsx

@@ -0,0 +1,69 @@
+import React, { useCallback, useRef, useState } from "react";
+import { useDragResize } from "../hooks/useDragResize.ts";
+import { MobileDrawer } from "./MobileDrawer.tsx";
+import { DesktopPanels } from "./DesktopPanels.tsx";
+import type { Theme } from "../hooks/useTheme.ts";
+
+interface ResizableLayoutProps {
+  children: [React.ReactNode, React.ReactNode];
+  theme: Theme;
+  isSettingsShown: boolean;
+  isMobile: boolean;
+  onToggleSettings: () => void;
+}
+
+export function ResizableLayout({
+  children,
+  theme,
+  isSettingsShown,
+  isMobile,
+  onToggleSettings,
+}: ResizableLayoutProps) {
+  const minLeftWidth = 400;
+  const minRightWidth = 300;
+  const [splitPercentage, setSplitPercentage] = useState(70);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const onSplitPercentageChange = useCallback((percentage: number) => {
+    setSplitPercentage(percentage);
+  }, []);
+
+  const { isDragging, handleMouseDown } = useDragResize({
+    containerRef,
+    minLeftWidth,
+    minRightWidth,
+    isSettingsShown,
+    onSplitPercentageChange,
+  });
+
+  return (
+    <div ref={containerRef} className="flex h-full w-full relative">
+      {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}
+            isSettingsShown={isSettingsShown}
+            isDragging={isDragging}
+            onMouseDown={handleMouseDown}
+          />
+        )}
+    </div>
+  );
+}

package/src/components/Settings.tsx

@@ -0,0 +1,170 @@
+import type { Theme } from "../hooks/useTheme.ts";
+import { RULER_WIDTH_OPTIONS } from "../hooks/useRulerWidth.ts";
+
+interface SettingsProps {
+  theme: Theme;
+  onToggleTheme: () => void;
+  rulerWidth: number;
+  onRulerWidthChange: (width: number) => void;
+  autoDisplayCompletions: boolean;
+  onAutoDisplayCompletionsChange: (value: boolean) => void;
+  enableLinting: boolean;
+  onEnableLintingChange: (value: boolean) => void;
+  showSyntaxErrors: boolean;
+  onShowSyntaxErrorsChange?: (value: boolean) => void;
+  showSemanticErrors: boolean;
+  onShowSemanticErrorsChange?: (value: boolean) => void;
+  showSemanticWarnings: boolean;
+  onShowSemanticWarningsChange?: (value: boolean) => void;
+}
+
+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>
+      <div className="flex flex-col gap-3">
+        <div className="flex items-center gap-3">
+          <span className="text-sm whitespace-nowrap">Theme</span>
+          <button
+            type="button"
+            onClick={onToggleTheme}
+            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>
+              )}
+          </button>
+        </div>
+        <div className="flex items-center gap-3">
+          <span className="text-sm whitespace-nowrap">Prettier Text Width</span>
+          <select
+            className="select select-sm border border-base-content/30 rounded-lg bg-transparent w-auto"
+            value={rulerWidth}
+            onChange={(e) => onRulerWidthChange(Number(e.target.value))}
+          >
+            {RULER_WIDTH_OPTIONS.map((width) => (
+              <option key={width} value={width}>
+                {width}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="flex items-center gap-3">
+          <span className="text-sm whitespace-nowrap">
+            Auto-Display Completions
+          </span>
+          <input
+            type="checkbox"
+            className="checkbox checkbox-sm border-base-content/30"
+            checked={autoDisplayCompletions}
+            onChange={(e) => onAutoDisplayCompletionsChange(e.target.checked)}
+          />
+        </div>
+        <div className="flex flex-wrap items-start gap-x-3 gap-y-2">
+          <div className="flex items-center gap-3">
+            <span className="text-sm whitespace-nowrap">Enable Linting</span>
+            <input
+              type="checkbox"
+              className="checkbox checkbox-sm border-base-content/30"
+              checked={enableLinting}
+              onChange={(e) => onEnableLintingChange(e.target.checked)}
+            />
+          </div>
+          {enableLinting && (
+            <div className="p-2 border border-base-content/30 rounded-sm">
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    className="checkbox checkbox-xs disabled:opacity-50 disabled:cursor-not-allowed"
+                    checked={showSyntaxErrors}
+                    disabled={!enableLinting}
+                    onChange={(e) =>
+                      onShowSyntaxErrorsChange?.(e.target.checked)}
+                  />
+                  <span
+                    className={`text-xs text-left whitespace-nowrap ${
+                      !enableLinting ? "text-base-content/50" : ""
+                    }`}
+                  >
+                    Syntax Errors
+                  </span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    className="checkbox checkbox-xs disabled:opacity-50 disabled:cursor-not-allowed"
+                    checked={showSemanticErrors}
+                    disabled={!enableLinting}
+                    onChange={(e) =>
+                      onShowSemanticErrorsChange?.(e.target.checked)}
+                  />
+                  <span
+                    className={`text-xs text-left whitespace-nowrap ${
+                      !enableLinting ? "text-base-content/50" : ""
+                    }`}
+                  >
+                    Semantic Errors
+                  </span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    className="checkbox checkbox-xs disabled:opacity-50 disabled:cursor-not-allowed"
+                    checked={showSemanticWarnings}
+                    disabled={!enableLinting}
+                    onChange={(e) =>
+                      onShowSemanticWarningsChange?.(e.target.checked)}
+                  />
+                  <span
+                    className={`text-xs text-left whitespace-nowrap ${
+                      !enableLinting ? "text-base-content/50" : ""
+                    }`}
+                  >
+                    Semantic Warnings
+                  </span>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/StatusBar.tsx

@@ -0,0 +1,47 @@
+interface StatusBarProps {
+  lineCount: number;
+  characterCount: number;
+  syntaxErrorCount: number;
+  semanticErrorCount: number;
+  semanticWarningCount: number;
+  cursorPosition: { line: number; col: number };
+  enableLinting: boolean;
+  showSyntaxErrors: boolean;
+  showSemanticErrors: boolean;
+  showSemanticWarnings: boolean;
+}
+
+export function StatusBar({
+  lineCount,
+  characterCount,
+  syntaxErrorCount,
+  semanticErrorCount,
+  semanticWarningCount,
+  cursorPosition,
+  enableLinting,
+  showSyntaxErrors,
+  showSemanticErrors,
+  showSemanticWarnings,
+}: StatusBarProps) {
+  return (
+    <div className="h-6 bg-base-200 border-t border-base-300 px-3 flex items-center justify-between text-xs text-base-content/70">
+      <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 && showSemanticWarnings && (
+          <span>Semantic Warnings: {semanticWarningCount}</span>
+        )}
+      </div>
+      <div className="flex items-center space-x-4">
+        <span>Row: {cursorPosition.line}</span>
+        <span>Column: {cursorPosition.col}</span>
+      </div>
+    </div>
+  );
+}

package/src/components/SubNav.tsx

@@ -0,0 +1,58 @@
+import type { Theme } from "../hooks/useTheme.ts";
+
+interface SubNavProps {
+  theme: Theme;
+  onCollapseAll: () => void;
+  onExpandAll: () => void;
+  onPrettify: () => void;
+}
+
+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 ${
+        theme === "dark" ? "bg-base-100/30 border-gray-600" : "bg-base-300/80"
+      }`}
+    >
+      <div className="flex items-center space-x-4">
+        <div className="flex items-center">
+          <button
+            type="button"
+            onClick={onCollapseAll}
+            title="Collapse All"
+            className="btn btn-ghost btn-xs px-1 py-0.5 text-xs hover:bg-base-300"
+          >
+            <svg className="w-4 h-4" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M8 6a.75.75 0 00.55-.24l3.25-3.5a.75.75 0 10-1.1-1.02L8 4.148 5.3 1.24a.75.75 0 00-1.1 1.02l3.25 3.5A.75.75 0 008 6zM8 10a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L8 11.852 5.3 14.76a.75.75 0 11-1.1-1.02l3.25-3.5A.75.75 0 018 10zM1.75 7.124a.626.626 0 100 1.253h.5a.627.627 0 000-1.253h-.5zM4.75 7.124a.626.626 0 100 1.253h.5a.627.627 0 000-1.253h-.5zM7.75 7.124a.626.626 0 100 1.253h.5a.627.627 0 000-1.253h-.5zM10.75 7.124a.627.627 0 000 1.253h.5a.627.627 0 000-1.253h-.5zM13.75 7.124a.627.627 0 000 1.253h.5a.627.627 0 000-1.253h-.5z" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            onClick={onExpandAll}
+            title="Expand All"
+            className="btn btn-ghost btn-xs px-1 py-0.5 text-xs hover:bg-base-300"
+          >
+            <svg className="w-4 h-4" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M8 1a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L8 2.852 5.3 5.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 018 1zM8 15a.75.75 0 00.55-.24l3.25-3.5a.75.75 0 10-1.1-1.02L8 13.148 5.3 10.24a.75.75 0 10-1.1 1.02l3.25 3.5A.75.75 0 008 15zM1.75 7.124a.626.626 0 100 1.253h.5a.627.627 0 000-1.253h-.5zM4.75 7.124a.626.626 0 100 1.253h.5a.627.627 0 000-1.253h-.5zM7.75 7.124a.626.626 0 100 1.253h.5a.627.627 0 000-1.253h-.5zM10.75 7.124a.627.627 0 000 1.253h.5a.627.627 0 000-1.253h-.5zM13.75 7.124a.627.627 0 000 1.253h.5a.627.627 0 000-1.253h-.5z" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            onClick={onPrettify}
+            title="Prettify"
+            className="btn btn-ghost btn-xs px-1 py-0.5 text-xs hover:bg-base-300"
+          >
+            <svg className="w-4 h-4" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M3.707 1.815 C 3.450 1.931,3.282 2.167,3.260 2.442 C 3.235 2.750,3.376 3.005,3.657 3.161 L 3.800 3.240 6.000 3.240 L 8.200 3.240 8.337 3.168 C 8.614 3.022,8.765 2.750,8.740 2.442 C 8.718 2.167,8.550 1.931,8.293 1.815 C 8.176 1.762,8.128 1.761,6.000 1.761 C 3.872 1.761,3.824 1.762,3.707 1.815 M10.740 1.798 C 10.429 1.909,10.208 2.274,10.257 2.595 C 10.300 2.873,10.520 3.136,10.775 3.211 C 10.965 3.268,11.538 3.269,11.726 3.213 C 11.907 3.159,12.108 2.978,12.186 2.796 C 12.259 2.625,12.254 2.340,12.173 2.173 C 12.099 2.021,11.915 1.852,11.769 1.803 C 11.607 1.747,10.891 1.744,10.740 1.798 M3.707 5.309 C 3.110 5.578,3.102 6.402,3.693 6.683 C 3.826 6.746,3.834 6.746,4.749 6.746 L 5.671 6.747 5.835 6.665 C 6.106 6.530,6.247 6.302,6.247 6.000 C 6.247 5.698,6.106 5.470,5.835 5.335 L 5.671 5.253 4.749 5.254 C 3.880 5.254,3.820 5.258,3.707 5.309 M8.293 5.278 C 7.978 5.374,7.761 5.668,7.761 6.000 C 7.761 6.395,8.050 6.709,8.442 6.740 C 8.751 6.765,9.006 6.624,9.160 6.343 C 9.227 6.221,9.238 6.171,9.238 6.000 C 9.238 5.829,9.227 5.779,9.160 5.657 C 9.065 5.483,8.915 5.350,8.752 5.295 C 8.625 5.251,8.407 5.244,8.293 5.278 M11.237 5.296 C 11.083 5.351,10.917 5.502,10.833 5.663 C 10.774 5.776,10.761 5.835,10.761 6.000 C 10.761 6.242,10.841 6.420,11.016 6.569 C 11.224 6.748,11.243 6.750,12.550 6.741 C 13.692 6.734,13.723 6.732,13.827 6.676 C 14.085 6.536,14.239 6.284,14.239 6.000 C 14.239 5.716,14.085 5.464,13.827 5.324 C 13.722 5.268,13.695 5.267,12.533 5.262 C 11.544 5.257,11.328 5.263,11.237 5.296 M3.779 8.785 C 3.426 8.911,3.228 9.211,3.260 9.569 C 3.278 9.763,3.349 9.905,3.499 10.044 C 3.706 10.235,3.761 10.245,4.548 10.235 L 5.240 10.227 5.364 10.154 C 5.700 9.956,5.841 9.532,5.681 9.195 C 5.597 9.017,5.399 8.840,5.225 8.789 C 5.036 8.732,3.934 8.730,3.779 8.785 M7.779 8.785 C 7.426 8.911,7.228 9.211,7.260 9.569 C 7.284 9.836,7.454 10.071,7.707 10.185 C 7.824 10.237,7.874 10.239,9.735 10.239 C 11.881 10.240,11.799 10.247,12.007 10.044 C 12.163 9.893,12.222 9.758,12.235 9.531 C 12.249 9.283,12.178 9.112,11.994 8.946 C 11.765 8.740,11.835 8.747,9.735 8.748 C 8.245 8.749,7.860 8.756,7.779 8.785 M3.808 12.277 C 3.120 12.466,3.065 13.402,3.724 13.700 C 3.817 13.742,3.956 13.747,5.253 13.747 L 6.680 13.747 6.805 13.684 C 7.062 13.557,7.253 13.265,7.253 13.000 C 7.253 12.735,7.062 12.443,6.805 12.316 L 6.680 12.253 5.307 12.248 C 4.252 12.244,3.904 12.250,3.808 12.277" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/hooks/useAutoDisplayCompletions.ts

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useState } from "react";
+
+export function useAutoDisplayCompletions(defaultValue: boolean = true) {
+  const [autoDisplayCompletions, setAutoDisplayCompletionsInternal] = useState<
+    boolean
+  >(() => {
+    const stored = localStorage.getItem("autoDisplayCompletions");
+    if (stored !== null) {
+      return stored === "true";
+    }
+    return defaultValue;
+  });
+
+  useEffect(() => {
+    localStorage.setItem(
+      "autoDisplayCompletions",
+      String(autoDisplayCompletions),
+    );
+  }, [autoDisplayCompletions]);
+
+  const setAutoDisplayCompletions = useCallback((value: boolean) => {
+    setAutoDisplayCompletionsInternal(value);
+  }, []);
+
+  return { autoDisplayCompletions, setAutoDisplayCompletions };
+}

package/src/hooks/useDragResize.ts

@@ -0,0 +1,104 @@
+import { useCallback, useEffect, useState } from "react";
+
+interface UseDragResizeProps {
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  minLeftWidth: number;
+  minRightWidth: number;
+  isSettingsShown: boolean;
+  onSplitPercentageChange: (percentage: number) => void;
+}
+
+export function useDragResize({
+  containerRef,
+  minLeftWidth,
+  minRightWidth,
+  isSettingsShown,
+  onSplitPercentageChange,
+}: UseDragResizeProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStartX, setDragStartX] = useState(0);
+  const [dragStartPercentage, setDragStartPercentage] = useState(0);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (!isSettingsShown) {
+      return;
+    }
+
+    e.preventDefault();
+
+    const container = containerRef.current;
+
+    if (!container) {
+      return;
+    }
+
+    const containerRect = container.getBoundingClientRect();
+    const mouseX = e.clientX - containerRect.left;
+    const currentPercentage = (mouseX / containerRect.width) * 100;
+
+    setDragStartX(e.clientX);
+    setDragStartPercentage(currentPercentage);
+    setIsDragging(true);
+  }, [isSettingsShown, containerRef]);
+
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (!isDragging || !containerRef.current || !isSettingsShown) {
+      return;
+    }
+
+    const container = containerRef.current;
+    const containerRect = container.getBoundingClientRect();
+    const containerWidth = containerRect.width;
+
+    // Calculate the delta from where the drag started
+    const deltaX = e.clientX - dragStartX;
+    const deltaPercentage = (deltaX / containerWidth) * 100;
+
+    // Calculate new percentage based on drag start position + delta
+    let newPercentage = dragStartPercentage + deltaPercentage;
+
+    // Apply minimum width constraints
+    const minLeftPercentage = (minLeftWidth / containerWidth) * 100;
+    const minRightPercentage = (minRightWidth / containerWidth) * 100;
+
+    // Clamp the percentage to valid bounds
+    newPercentage = Math.max(minLeftPercentage, newPercentage);
+    newPercentage = Math.min(100 - minRightPercentage, newPercentage);
+
+    onSplitPercentageChange(newPercentage);
+  }, [
+    isDragging,
+    dragStartX,
+    dragStartPercentage,
+    minLeftWidth,
+    minRightWidth,
+    isSettingsShown,
+    onSplitPercentageChange,
+    containerRef,
+  ]);
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  useEffect(() => {
+    if (isDragging && isSettingsShown) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp, isSettingsShown]);
+
+  return {
+    isDragging,
+    handleMouseDown,
+  };
+}

package/src/hooks/useEnableLinting.ts

@@ -0,0 +1,21 @@
+import { useCallback, useEffect, useState } from "react";
+
+export function useEnableLinting(defaultValue: boolean = true) {
+  const [enableLinting, setEnableLintingInternal] = useState<boolean>(() => {
+    const stored = localStorage.getItem("enableLinting");
+    if (stored !== null) {
+      return stored === "true";
+    }
+    return defaultValue;
+  });
+
+  useEffect(() => {
+    localStorage.setItem("enableLinting", String(enableLinting));
+  }, [enableLinting]);
+
+  const setEnableLinting = useCallback((value: boolean) => {
+    setEnableLintingInternal(value);
+  }, []);
+
+  return { enableLinting, setEnableLinting };
+}

package/src/hooks/useFileOperations.ts

@@ -0,0 +1,102 @@
+import { useCallback } from "react";
+import type { ShowToastFunction } from "./useToast.ts";
+import type { EditorRef } from "../components/Editor.tsx";
+
+interface UseFileOperationsProps {
+  code: string;
+  setCode: (code: string) => void;
+  showToast: ShowToastFunction;
+  editorRef: React.RefObject<EditorRef | null>;
+}
+
+export function useFileOperations(
+  { code, setCode, showToast, editorRef }: UseFileOperationsProps,
+) {
+  const handleSave = useCallback(async () => {
+    try {
+      if (globalThis.window.showSaveFilePicker) {
+        const fileHandle = await globalThis.window.showSaveFilePicker({
+          suggestedName: "specification.sdl",
+          types: [
+            {
+              description: "SDL Files",
+              accept: {
+                "text/plain": [".sdl"],
+              },
+            },
+          ],
+        });
+        const writableStream = await fileHandle.createWritable();
+        await writableStream.write(code);
+        await writableStream.close();
+      } else {
+        const blob = new Blob([code], { type: "text/plain" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = "specification.sdl";
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+      }
+    } catch (err) {
+      if (!(err instanceof DOMException && err.name === "AbortError")) {
+        console.error("Error saving file:", err);
+        showToast("Error saving file. See console.", "error");
+      }
+    }
+  }, [code, showToast]);
+
+  const handleLoad = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          const text = e.target?.result;
+          if (typeof text === "string") {
+            setCode(text);
+          }
+        };
+        reader.onerror = () => {
+          showToast("Error loading file.", "error");
+        };
+        reader.readAsText(file);
+      }
+    },
+    [showToast],
+  );
+
+  const handleCopy = useCallback(async () => {
+    try {
+      const clipboardItems: Record<string, Blob> = {
+        "text/plain": new Blob([code], { type: "text/plain" }),
+      };
+
+      if (editorRef.current?.getStyledCode) {
+        const styledCode = editorRef.current.getStyledCode();
+
+        clipboardItems["text/html"] = new Blob([styledCode], {
+          type: "text/html",
+        });
+      }
+
+      const clipboardItem = new ClipboardItem(clipboardItems);
+
+      await navigator.clipboard.write([clipboardItem]);
+      showToast("Copied!");
+    } catch (err) {
+      console.error("Failed to copy content: ", err);
+      showToast("Failed to copy content. See console.", "error");
+    }
+  }, [code, showToast]);
+
+  return {
+    code,
+    setCode,
+    handleSave,
+    handleLoad,
+    handleCopy,
+  };
+}

package/src/hooks/useMobileDetection.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+export function useMobileDetection(breakpoint: number = 768) {
+  const [isMobile, setIsMobile] = useState(() => {
+    // Only check on client-side, return false for SSR
+    if (
+      typeof globalThis !== "undefined" && globalThis.innerWidth !== undefined
+    ) {
+      return globalThis.innerWidth < breakpoint;
+    }
+    return false;
+  });
+
+  useEffect(() => {
+    // Only run on client-side
+    if (
+      typeof globalThis === "undefined" || globalThis.innerWidth === undefined
+    ) {
+      return;
+    }
+
+    const checkScreenSize = () => {
+      setIsMobile(globalThis.innerWidth < breakpoint);
+    };
+
+    checkScreenSize();
+    globalThis.addEventListener("resize", checkScreenSize);
+    return () => globalThis.removeEventListener("resize", checkScreenSize);
+  }, [breakpoint]);
+
+  return isMobile;
+}

package/src/hooks/usePrettier.ts

@@ -0,0 +1,40 @@
+import { useCallback, useRef } from "react";
+import prettier from "prettier";
+import { prettierPluginSdl } from "@mpeggroup/mpeg-sdl-parser";
+import type { ShowToastFunction } from "./useToast.ts";
+
+interface UsePrettierProps {
+  code: string;
+  setCode: (code: string) => void;
+  showToast: ShowToastFunction;
+  rulerWidth: number;
+}
+
+export function usePrettier(
+  { code, setCode, showToast, rulerWidth }: UsePrettierProps,
+) {
+  const prettifyInProgressRef = useRef(false);
+
+  const handlePrettify = useCallback(async () => {
+    const options: prettier.Options = {
+      parser: "sdl",
+      plugins: [prettierPluginSdl],
+      printWidth: rulerWidth,
+    };
+    try {
+      prettifyInProgressRef.current = true;
+
+      const formattedCode = await prettier.format(code, options);
+
+      setCode(formattedCode);
+
+      prettifyInProgressRef.current = false;
+    } catch (error) {
+      prettifyInProgressRef.current = false;
+      console.error("Error prettifying code:", error);
+      showToast("Error prettifying SDL. See console.", "error");
+    }
+  }, [code, setCode, showToast, rulerWidth]);
+
+  return { handlePrettify };
+}