feat(editor): add resizable editor/preview panes

src/AgreementHtml.tsx

@@ -4,7 +4,7 @@ import { Spin } from "antd";
 import useAppStore from "./store/store";
 import FullScreenModal from "./components/FullScreenModal";
 
-function AgreementHtml({ loading, isModal }: { loading: any; isModal?: boolean }) {
+function AgreementHtml({ loading, isModal }: { loading: boolean; isModal?: boolean }) {
   const agreementHtml = useAppStore((state) => state.agreementHtml);
   const backgroundColor = useAppStore((state) => state.backgroundColor);
   const textColor = useAppStore((state) => state.textColor);

src/App.tsx

@@ -16,6 +16,7 @@ import SampleDropdown from "./components/SampleDropdown";
 import UseShare from "./components/UseShare";
 import LearnContent from "./components/Content";
 import FloatingFAB from "./components/FabButton";
+import ResizableContainer from "./components/ResizableContainer";
 
 const { Content } = Layout;
 
@@ -171,18 +172,20 @@ const App = () => {
                         background: backgroundColor,
                       }}
                     >
-                      <Row gutter={24}>
-                        <Col xs={24} sm={16} style={{ paddingBottom: "20px" }}>
-                          <Collapse
-                            defaultActiveKey={activePanel}
-                            onChange={onChange}
-                            items={panels}
-                          />
-                        </Col>
-                        <Col xs={24} sm={8}>
-                          <AgreementHtml loading={loading} isModal={false} />
-                        </Col>
-                      </Row>
+                      <ResizableContainer
+  leftPane={
+    <Collapse
+      defaultActiveKey={activePanel}
+      onChange={onChange}
+      items={panels}
+     style={{ marginBottom: "24px" }}
+    />
+  }
+  rightPane={<AgreementHtml loading={loading} isModal={false} />}
+  initialLeftWidth={66}
+  minLeftWidth={30}
+  minRightWidth={30}
+/>
                     </div>
                     <FloatingFAB />
                   </div>

src/components/ResizableContainer.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useRef, useState } from 'react';
+import useAppStore from '../store/store';
+
+interface ResizableContainerProps {
+  leftPane: React.ReactNode;
+  rightPane: React.ReactNode;
+  initialLeftWidth?: number;
+  minLeftWidth?: number;
+  minRightWidth?: number;
+}
+
+const ResizableContainer: React.FC<ResizableContainerProps> = ({
+  leftPane,
+  rightPane,
+  initialLeftWidth = 66,
+  minLeftWidth = 30,
+  minRightWidth = 30,
+}) => {
+  const [leftWidth, setLeftWidth] = useState(
+    Number(localStorage.getItem('editorPaneWidth')) || initialLeftWidth
+  );
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isDragging = useRef(false);
+  const backgroundColor = useAppStore((state) => state.backgroundColor);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging.current || !containerRef.current) return;
+
+      const container = containerRef.current;
+      const containerRect = container.getBoundingClientRect();
+      const containerWidth = containerRect.width;
+      const mouseX = e.clientX - containerRect.left;
+      const newLeftWidth = (mouseX / containerWidth) * 100;
+
+      if (newLeftWidth >= minLeftWidth && (100 - newLeftWidth) >= minRightWidth) {
+        setLeftWidth(newLeftWidth);
+        localStorage.setItem('editorPaneWidth', newLeftWidth.toString());
+      }
+    };
+
+    const handleMouseUp = () => {
+      isDragging.current = false;
+      document.body.style.cursor = 'default';
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [minLeftWidth, minRightWidth]);
+
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 575);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 575);
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        display: 'flex',
+        width: '100%',
+        position: 'relative',
+        backgroundColor,
+        flexDirection: isMobile ? 'column' : 'row',
+        height: '100%',
+        overflow: isMobile ? 'auto' : 'hidden'
+      }}
+    >
+      <div style={{ 
+        width: isMobile ? '100%' : `${leftWidth}%`,
+        height: isMobile ? 'auto' : '100%',
+        overflow: 'hidden' 
+      }}>
+        {leftPane}
+      </div>
+      {!isMobile && (
+        <div
+          style={{
+            width: '8px',
+            cursor: 'col-resize',
+            background: isHovered || isDragging.current ? '#999' : '#ccc',
+            position: 'relative',
+            zIndex: 10,
+            userSelect: 'none',
+            transition: 'background-color 0.2s'
+          }}
+          onMouseDown={() => {
+            isDragging.current = true;
+            document.body.style.cursor = 'col-resize';
+          }}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+        />
+      )}
+      <div style={{ 
+        width: isMobile ? '100%' : `${100 - leftWidth}%`,
+        height: isMobile ? 'auto' : '100%',
+        overflow: 'hidden',
+        marginTop: isMobile ? '4px' : '0'
+      }}>
+        {rightPane}
+      </div>
+    </div>
+  );
+};
+
+export default ResizableContainer;

src/editors/ConcertoEditor.tsx

@@ -48,6 +48,26 @@ const handleEditorWillMount = (monacoInstance: typeof monaco) => {
     mimetypes: ["application/vnd.accordproject.concerto"],
   });
 
+  monacoInstance.languages.setLanguageConfiguration("concerto", {
+    brackets: [
+      ["{", "}"],
+      ["[", "]"],
+      ["(", ")"],
+    ],
+    autoClosingPairs: [
+      { open: "{", close: "}" },
+      { open: "[", close: "]" },
+      { open: "(", close: ")" },
+      { open: "\"", close: "\"" },
+    ],
+    surroundingPairs: [
+      { open: "{", close: "}" },
+      { open: "[", close: "]" },
+      { open: "(", close: ")" },
+      { open: "\"", close: "\"" },
+    ],
+  });
+
   monacoInstance.languages.setMonarchTokensProvider("concerto", {
     keywords: concertoKeywords,
     typeKeywords: concertoTypes,
@@ -125,6 +145,9 @@ export default function ConcertoEditor({
     wordWrap: "on",
     automaticLayout: true,
     scrollBeyondLastLine: false,
+    autoClosingBrackets: "languageDefined",
+    autoSurround: "languageDefined",
+    bracketPairColorization: { enabled: true },
   };
 
   const handleChange = useCallback(