Improve thick-arrow syntax and rendering layout

.github/workflows/deploy-editor.yml

@@ -6,39 +6,48 @@ on:
       - master
       - dev
 
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
 jobs:
-  deploy:
+  build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v6
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
-          node-version: "24"
+          node-version: 24
+          cache: npm
 
       - name: Install dependencies
         run: npm install
 
       - name: Build interactive editor
-        run: npm run build:docs
+        run: |
+          if [ "${{ github.ref_name }}" == "dev" ]; then
+            npm run build:docs -- --dist-dir dist/dev
+          else
+            npm run build:docs -- --dist-dir dist
+          fi
 
-      - name: Deploy to GitHub Pages (master)
-        if: github.ref == 'refs/heads/master'
-        uses: peaceiris/actions-gh-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v4
         with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: dist
-          publish_branch: gh-pages
-          keep_files: true
-
-      - name: Deploy to GitHub Pages (dev)
-        if: github.ref == 'refs/heads/dev'
-        uses: peaceiris/actions-gh-pages@v3
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: dist
-          destination_dir: dev
-          publish_branch: gh-pages
-          keep_files: true
+          path: ./dist
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    needs: build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

docs/editor.css

@@ -4,18 +4,31 @@
     box-sizing: border-box;
 }
 
+:root {
+    --bg-main: #1e1e1e;
+    --bg-sidebar: #252526;
+    --bg-header: #2d2d2d;
+    --border-color: #3e3e42;
+    --text-main: #d4d4d4;
+    --text-muted: #858585;
+    --text-header: #969696;
+    --accent-color: #0e639c;
+    --accent-hover: #1177bb;
+    --header-height: 42px;
+}
+
 body {
     font-family: system-ui, -apple-system, sans-serif;
-    background: #1e1e1e;
-    color: #d4d4d4;
+    background: var(--bg-main);
+    color: var(--text-main);
     height: 100vh;
     overflow: hidden;
 }
 
 header {
-    background: #252526;
+    background: var(--bg-sidebar);
     padding: 1rem 2rem;
-    border-bottom: 1px solid #3e3e42;
+    border-bottom: 1px solid var(--border-color);
 }
 
 .header-content {
@@ -26,27 +39,28 @@ header {
 
 .resizer {
     width: 6px;
-    background: #1e1e1e;
+    background: var(--bg-main);
     cursor: col-resize;
     position: relative;
     z-index: 100;
-    border-left: 1px solid #3e3e42;
-    border-right: 1px solid #3e3e42;
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
     transition: background 0.2s;
 }
 
-.resizer:hover, .resizer.dragging {
-    background: #0e639c;
+.resizer:hover,
+.resizer.dragging {
+    background: var(--accent-color);
 }
 
 .toggle-arrow {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background: #2d2d2d;
-    border: 1px solid #3e3e42;
-    color: #858585;
+    background: var(--bg-header);
+    border: 1px solid var(--border-color);
+    color: var(--text-muted);
     width: 20px;
     height: 40px;
     padding: 0;
@@ -56,7 +70,7 @@ header {
     cursor: pointer;
     font-size: 10px;
     border-radius: 4px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     transition: all 0.2s;
 }
 
@@ -74,7 +88,7 @@ header {
 
 #panel-reference {
     flex: 0 0 280px;
-    background: #252526;
+    background: var(--bg-sidebar);
     transition: flex-basis 0.3s ease-in-out;
 }
 
@@ -109,21 +123,21 @@ main {
 }
 
 .reference-content {
-    background: #252526;
+    background: var(--bg-sidebar);
     padding: 1.25rem;
     overflow-y: auto;
 }
 
 .search-container {
-    padding: 0.75rem 1.25rem;
-    background: #252526;
-    border-bottom: 1px solid #3e3e42;
+    padding: 0.6rem 1rem;
+    background: var(--bg-header);
+    border-bottom: 1px solid var(--border-color);
 }
 
 #refSearch {
     width: 100%;
     background: #3c3c3c;
-    border: 1px solid #3e3e42;
+    border: 1px solid var(--border-color);
     color: #cccccc;
     padding: 0.4rem 0.75rem;
     border-radius: 3px;
@@ -133,7 +147,7 @@ main {
 }
 
 #refSearch:focus {
-    border-color: #0e639c;
+    border-color: var(--accent-color);
 }
 
 .loading {
@@ -156,8 +170,8 @@ main {
 }
 
 .ref-item {
-    background: #2d2d2d;
-    border: 1px solid #3e3e42;
+    background: var(--bg-header);
+    border: 1px solid var(--border-color);
     border-radius: 6px;
     padding: 0.75rem;
     margin-bottom: 0.75rem;
@@ -185,13 +199,13 @@ main {
     color: #ce9178;
     border-radius: 4px;
     margin-bottom: 0.6rem;
-    border: 1px solid #3e3e42;
+    border: 1px solid var(--border-color);
 }
 
 .try-btn-small {
     background: transparent;
-    border: 1px solid #3e3e42;
-    color: #858585;
+    border: 1px solid var(--border-color);
+    color: var(--text-muted);
     padding: 0.25rem 0.6rem;
     border-radius: 3px;
     font-size: 0.7rem;
@@ -211,22 +225,25 @@ main {
 }
 
 .panel-header {
-    background: #2d2d2d;
-    padding: 0.75rem 1rem;
-    border-bottom: 1px solid #3e3e42;
+    background: var(--bg-header);
+    padding: 0.6rem 1rem;
+    border-bottom: 1px solid var(--border-color);
     display: flex;
     justify-content: space-between;
     align-items: center;
+    height: var(--header-height);
 }
 
 .panel-title {
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #cccccc;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-header);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
 }
 
 .copy-btn {
-    background: #0e639c;
+    background: var(--accent-color);
     color: white;
     border: none;
     padding: 0.4rem 0.75rem;
@@ -237,7 +254,7 @@ main {
 }
 
 .copy-btn:hover {
-    background: #1177bb;
+    background: var(--accent-hover);
 }
 
 .copy-btn:active {
@@ -306,8 +323,8 @@ svg {
 }
 
 .CodeMirror-gutters {
-    background: #252526;
-    border-right: 1px solid #3e3e42;
+    background: var(--bg-sidebar);
+    border-right: 1px solid var(--border-color);
 }
 
 .CodeMirror-linenumber {
@@ -342,6 +359,7 @@ svg {
 .cm-pml-alias {
     color: #4ec9b0;
 }
+
 .cm-pml-arrow-normal {
     color: #4fc1ff;
     font-weight: bold;
@@ -395,13 +413,13 @@ svg {
     list-style: none;
     margin: 0;
     padding: 2px;
-    background: #252526;
+    background: var(--bg-sidebar);
     border: 1px solid #454545;
     border-radius: 4px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
     font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
     font-size: 13px;
-    color: #d4d4d4;
+    color: var(--text-main);
     max-height: 200px;
     overflow-y: auto;
 }