change(*): update preview index.html and relevant docs files

CONTRIBUTING.md

@@ -11,7 +11,7 @@ Thanks for your interest in contributing! This project aims to provide a diverse
 1. Scaffold the new style: `cd tools && go run . create <your-style-name>` — this creates the directory structure with placeholder `.tmpl` files for all 11 email types
 2. Edit each `.tmpl` file in `themes/<your-style-name>/` with your unique visual design
 3. Regenerate the preview: `cd tools && go run . preview all` — the build script auto-discovers all theme directories under `themes/` and generates the theme selector dynamically
-4. Submit a PR with screenshots of rendered emails
+4. Submit a PR with screenshots of rendered emails (≤ 50 KiB each, 10–20 KiB recommended)
 
 ### Style Guidelines
 

docs/CONTRIBUTING.ja.md

@@ -7,7 +7,7 @@
 1. ツールでスキャフォールド: `cd tools && go run . create <style-name>` — 全11種類のメールタイプ用のプレースホルダ `.tmpl` ファイルを含む完全なディレクトリ構造を作成します
 2. `themes/<style-name>/` 内の各 `.tmpl` ファイルを独自デザインで編集
 3. プレビューを再生成: `cd tools && go run . preview all`（ビルドスクリプトが `themes/` 以下の全テーマを自動検出し、テーマセレクターも自動生成されます）
-4. スクリーンショット付きで PR を提出
+4. スクリーンショット付きで PR を提出（1枚あたり 50 KiB 以下、10–20 KiB 推奨）
 
 ### スタイルガイドライン
 

docs/CONTRIBUTING.ko.md

@@ -7,7 +7,7 @@
 1. 도구로 스캐폴드: `cd tools && go run . create <style-name>` — 11개 이메일 유형 모두에 대한 플레이스홀더 `.tmpl` 파일이 포함된 완전한 디렉토리 구조를 생성합니다
 2. `themes/<style-name>/`에서 각 `.tmpl` 파일을 고유한 디자인으로 편집
 3. 프리뷰 재생성: `cd tools && go run . preview all` (빌드 스크립트가 `themes/` 아래의 모든 테마 디렉토리를 자동으로 찾고 테마 선택기도 자동 생성합니다)
-4. 스크린샷과 함께 PR 제출
+4. 스크린샷과 함께 PR 제출 (이미지당 50 KiB 이하, 10–20 KiB 권장)
 
 ### 스타일 가이드라인
 

docs/CONTRIBUTING.ru.md

@@ -7,7 +7,7 @@
 1. Создайте каркас через инструмент: `cd tools && go run . create <имя-стиля>` — создаёт полную структуру директорий с файлами-заготовками `.tmpl` для всех 11 типов писем
 2. Отредактируйте каждый `.tmpl` файл в `themes/<имя-стиля>/` с вашим уникальным дизайном
 3. Перегенерируйте превью: `cd tools && go run . preview all` (скрипт автоматически находит все темы в `themes/` и динамически генерирует селектор тем)
-4. Отправьте PR со скриншотами
+4. Отправьте PR со скриншотами (≤ 50 КиБ каждый, рекомендуется 10–20 КиБ)
 
 ### Рекомендации по стилю
 

docs/CONTRIBUTING.zh-CN.md

@@ -7,7 +7,7 @@
 1. 使用工具脚手架：`cd tools && go run . create <风格名称>` — 这会创建完整的目录结构和全部 11 种邮件类型的占位 `.tmpl` 文件
 2. 在 `themes/<风格名称>/` 中编写每个 `.tmpl` 文件，应用独特的视觉设计
 3. 重新生成预览：`cd tools && go run . preview all`（构建脚本会自动发现 `themes/` 下的所有主题目录并动态生成主题选择器）
-4. 提交包含截图渲染效果的 PR
+4. 提交包含截图渲染效果的 PR（单张图片 ≤ 50 KiB，建议 10–20 KiB）
 
 ### 风格指南
 

docs/CONTRIBUTING.zh-TW.md

@@ -7,7 +7,7 @@
 1. 使用工具腳手架：`cd tools && go run . create <風格名稱>` — 這會建立完整的目錄結構和全部 11 種郵件類型的佔位 `.tmpl` 檔案
 2. 在 `themes/<風格名稱>/` 中編寫每個 `.tmpl` 檔案，套用獨特的視覺設計
 3. 重新產生預覽：`cd tools && go run . preview all`（建置腳本會自動發現 `themes/` 下的所有主題目錄並動態生成主題選擇器）
-4. 提交包含螢幕截圖的 PR
+4. 提交包含螢幕截圖的 PR（單張圖片 ≤ 50 KiB，建議 10–20 KiB）
 
 ### 風格指南
 

docs/images/README.md

@@ -9,6 +9,12 @@ horizon.png    terminal.png    ember.png    bloom.png    heritage.png
 neon.png       mono.png        terra.png    ink.png      aurora.png
 ```
 
+## Image Size Requirements
+
+- **Maximum:** 50 KiB per image
+- **Recommended:** 10–20 KiB
+- **Format:** PNG, optimised — run through `pngquant` or `optipng` before committing
+
 ## How to Capture
 
 1. Start the dev server: `cd tools && go run . dev` (opens http://localhost:3456)

preview/index.html

@@ -74,25 +74,42 @@ body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:v
 .message-error{background:rgba(248,113,113,0.08);color:rgba(248,113,113,0.75);border-color:rgba(248,113,113,0.15)}
 .message code{background:rgba(0,0,0,0.12);padding:1px 6px;border-radius:3px}
 
-/* ── Scrollbar — neutral gray, consistent across browsers ── */
+/* ── Scrollbar — neutral gray, consistent across all browsers ── */
-/* Chrome 121+ / Edge 121+ (standards-track) */
+/* Standards-track: Firefox 64+ / Chrome 121+ / Edge 121+ */
-:root{scrollbar-color:rgba(107,125,153,.25) transparent;scrollbar-width:thin}
+html,body,#preview-area,#panel{
-/* WebKit (Chrome, Safari, Edge) */
+  scrollbar-width:thin;
-::-webkit-scrollbar{width:6px;height:6px}
+  scrollbar-color:rgba(107,125,153,.25) transparent;
-::-webkit-scrollbar-track{background:transparent!important}
+}
-::-webkit-scrollbar-thumb{
+/* IE / Legacy Edge */
-  background-color:rgba(107,125,153,.25)!important;
+#preview-area,#panel{
+  -ms-overflow-style:-ms-autohiding-scrollbar;
+}
+/* WebKit scrollbars — scoped to actual scrollable regions only */
+#preview-area::-webkit-scrollbar,
+#panel::-webkit-scrollbar          { width:6px; height:6px }
+#preview-area::-webkit-scrollbar-track,
+#panel::-webkit-scrollbar-track    { background:transparent }
+#preview-area::-webkit-scrollbar-thumb,
+#panel::-webkit-scrollbar-thumb    {
+  background-color:rgba(107,125,153,.25);
   border-radius:3px;
   border:1px solid rgba(255,255,255,.06);
 }
-::-webkit-scrollbar-thumb:hover{background-color:rgba(107,125,153,.45)!important}
+#preview-area::-webkit-scrollbar-thumb:hover,
-::-webkit-scrollbar-corner{background:transparent!important}
+#panel::-webkit-scrollbar-thumb:hover { background-color:rgba(107,125,153,.45) }
-/* Firefox */
+#preview-area::-webkit-scrollbar-corner,
-#preview-area,#panel{scrollbar-width:thin;scrollbar-color:rgba(107,125,153,.25) transparent}
+#panel::-webkit-scrollbar-corner   { background:transparent }
-/* Legacy Edge / IE */
+/* The panel's inner parameter section (flex:1;overflow-y:auto) */
-#preview-area,#panel{-ms-overflow-style:-ms-autohiding-scrollbar}
+#panel section::-webkit-scrollbar          { width:6px; height:6px }
-/* Chrome 108+ overlay */
+#panel section::-webkit-scrollbar-track    { background:transparent }
-@supports(overflow:overlay){#preview-area,#panel{overflow:overlay}}
+#panel section::-webkit-scrollbar-thumb    {
+  background-color:rgba(107,125,153,.25);
+  border-radius:3px;
+  border:1px solid rgba(255,255,255,.06);
+}
+#panel section::-webkit-scrollbar-thumb:hover { background-color:rgba(107,125,153,.45) }
+#panel section::-webkit-scrollbar-corner   { background:transparent }
+#panel section{scrollbar-width:thin;scrollbar-color:rgba(107,125,153,.25) transparent}
 
 @media(max-width:850px){#panel{display:none}#topbar .hint{display:none}}
 </style>
@@ -118,7 +135,7 @@ body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:v
     <button id="btn-desk" class="on" onclick="setViewport('desktop')">Desktop</button>
     <button id="btn-mob" onclick="setViewport('mobile')">Mobile</button>
   </div>
-  <span class="hint">keys: d/m &nbsp; &larr;&rarr;</span>
+  <span class="hint">keys: d/m &nbsp; &larr;&rarr; tab &nbsp; &uarr;&darr; select</span>
 </nav>
 
 <div id="messages"></div>
@@ -202,7 +219,7 @@ function render() {
   const raw = rendered[state.theme]?.[state.template];
   let content = raw ? transform(raw, state.client) : '<p style=\"color:red;padding:20px\">Not found: '+state.theme+'/'+state.template+'</p>';
   // Inject invisible scrollbar into iframe content for immersive preview
-  content = content.replace('</head>', '<style>html{scrollbar-color:rgba(107,125,153,.25) transparent;scrollbar-width:thin;-ms-overflow-style:-ms-autohiding-scrollbar}html::-webkit-scrollbar{width:6px;height:6px}html::-webkit-scrollbar-track{background:transparent!important}html::-webkit-scrollbar-thumb{background-color:rgba(107,125,153,.25)!important;border-radius:3px;border:1px solid rgba(128,128,128,.08)}html::-webkit-scrollbar-thumb:hover{background-color:rgba(107,125,153,.45)!important}@supports(overflow:overlay){html{overflow:overlay}}</style></head>');
+  content = content.replace('</head>', '<style>html{scrollbar-color:rgba(107,125,153,.25) transparent;scrollbar-width:thin;-ms-overflow-style:-ms-autohiding-scrollbar}html::-webkit-scrollbar{width:6px;height:6px}html::-webkit-scrollbar-track{background:transparent}html::-webkit-scrollbar-thumb{background-color:rgba(107,125,153,.25);border-radius:3px;border:1px solid rgba(255,255,255,.06)}html::-webkit-scrollbar-thumb:hover{background-color:rgba(107,125,153,.45)}html::-webkit-scrollbar-corner{background:transparent}</style></head>');
 
   frame.onload = function() {
     loading.style.display = 'none';
@@ -274,11 +291,30 @@ function setViewport(v) {
 // Keyboard
 //
 document.addEventListener('keydown',e=>{
-  if(e.key==='d') setViewport('desktop');
+  // Viewport shortcuts (no modifiers)
-  if(e.key==='m') setViewport('mobile');
+  if(e.key==='d'&&!e.ctrlKey&&!e.metaKey&&!e.altKey){ setViewport('desktop'); return; }
-  const keys=Object.keys(REGISTRY), idx=keys.indexOf(state.template);
+  if(e.key==='m'&&!e.ctrlKey&&!e.metaKey&&!e.altKey){ setViewport('mobile'); return; }
-  if(e.key==='ArrowRight'&&idx<keys.length-1){switchTemplate(keys[idx+1]);document.getElementById('sel-template').value=keys[idx+1];}
+
-  if(e.key==='ArrowLeft'&&idx>0){switchTemplate(keys[idx-1]);document.getElementById('sel-template').value=keys[idx-1];}
+  // ← →  cycle focus between Theme / Template / Client selects
+  // When a select dropdown is open the browser captures keys, so this only runs when closed
+  const selects=['sel-theme','sel-template','sel-client'];
+  const activeId=document.activeElement?.id;
+  const cur=selects.indexOf(activeId);
+
+  if(e.key==='ArrowRight'||e.key==='ArrowLeft'){
+    e.preventDefault();
+    if(cur>=0){
+      // Cycle to next/previous select
+      const dir=e.key==='ArrowRight'?1:-1;
+      const next=(cur+dir+selects.length)%selects.length;
+      document.getElementById(selects[next])?.focus();
+    } else {
+      // First press — jump to template (middle)
+      document.getElementById('sel-template')?.focus();
+    }
+  }
+
+  // ↑ ↓ are handled natively by the focused <select> — onchange fires → render()
 });
 
 //