@salism3/dsh-latex-editor 1.0.1 → 1.1.7

package/README.md

@@ -8,7 +8,8 @@ Plugin resmi untuk mengubah **DeepSeek Harness** menjadi lingkungan kerja **LaTe
 
 ## Fitur Utama
 
-- **Layar Terpisah (Split Screen)**: Sisi kiri percakapan AI, sisi kanan panel pratinjau dokumen PDF live dan responsif.
+- **Layar Terpisah (Split Screen)**: Sisi kiri percakapan AI, sisi kanan panel pratinjau dokumen PDF live dan responsif di layar desktop.
+- **Mode Mobile Responsif**: Tombol toggle cepat (`📄 PDF` ⟷ `💬 Chat`) dan tombol melayang (FAB) untuk beralih instan antara layar chat dan pratinjau PDF pada perangkat seluler/smartphone.
 - **Entry Point Baku (`main.tex`)**: Menetapkan `main.tex` di root direktori workspace sebagai titik masuk dokumen tunggal.
 - **Injeksi Soul (System Prompt)**: AI Harness secara otomatis menyusun dan memperbarui struktur dokumen lengkap dalam `main.tex`.
 - **Kompilasi Cepat**: Dilengkapi engine `xelatex` (default) dan `pdflatex` dengan panel error log interaktif.

package/client.js

@@ -1,8 +1,6 @@
-window.__ModuleLoader__.load({
-  id: '@salism3/dsh-latex-editor',
-  factory(require) {
-    const React = require('react');
-    const h = React.createElement;
+function defineLatexEditorPlugin(require) {
+  const React = require('react');
+  const h = React.createElement;
 
     const STYLE_ID = 'dsh-latex-editor-styles';
 
@@ -30,16 +28,77 @@ window.__ModuleLoader__.load({
           border-left: 1px solid var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.12));
         }
 
+        .latex-btn-header-corner {
+          display: inline-flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+          width: 30px !important;
+          height: 30px !important;
+          padding: 0 !important;
+          background: transparent !important;
+          color: var(--dsw-alias-text-secondary, #a6adc8) !important;
+          border: 1px solid transparent !important;
+          border-radius: 6px !important;
+          cursor: pointer !important;
+          transition: all 0.15s ease !important;
+        }
+
+        .latex-btn-header-corner:hover {
+          background: var(--dsw-alias-bg-hover, rgba(255, 255, 255, 0.08)) !important;
+          color: var(--dsw-alias-text-primary, #ffffff) !important;
+        }
+
+        .latex-btn-header-corner:active {
+          transform: scale(0.94) !important;
+        }
+
+        .latex-btn-close {
+          margin-left: auto !important;
+          color: #94a3b8 !important;
+          padding: 4px 8px !important;
+          font-size: 13px !important;
+          font-weight: 700 !important;
+        }
+
+        .latex-btn-close:hover {
+          color: #f87171 !important;
+          background: rgba(239, 68, 68, 0.15) !important;
+        }
+
+        /* Sembunyikan sisa tab Mulai / DockKit guide jika ada */
+        [data-sidebar-right-tab*="guide"],
+        [data-dockkit-tab*="guide"],
+        [data-dockkit-float-title*="Mulai"],
+        [class*="guideCard"] {
+          display: none !important;
+        }
+
         .latex-editor-header {
+          position: sticky !important;
+          top: 0 !important;
+          left: 0 !important;
+          right: 0 !important;
+          z-index: 1000 !important;
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 8px 12px;
           gap: 8px;
-          background: var(--dsw-alias-bg-elevated, #1e1e2e);
-          border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.1));
+          background: var(--dsw-alias-bg-elevated, #1e1e2e) !important;
+          border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.15)) !important;
           flex-shrink: 0;
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+        }
+
+        /* Saat di conversation.view (misal di mobile): cegah scrollBody menggeser header */
+        [class*="viewArea"]:has(.latex-editor-container) {
+          height: 100% !important;
+          max-height: 100% !important;
+          overflow: hidden !important;
+        }
+
+        [class*="scrollBody"]:has(.latex-editor-container) {
+          overflow-y: hidden !important;
         }
 
         .latex-header-left {
@@ -452,15 +511,126 @@ window.__ModuleLoader__.load({
           display: none !important;
         }
 
-        /* Pastikan track rightbar memiliki lebar yang pas untuk editor 50/50 */
-        [data-rightbar-col] {
-          min-width: 320px;
+        /* ==========================================================
+           3. DESKTOP (>= 768px): 2 KOLOM SECTION TANPA TOMBOL PDF
+           ========================================================== */
+        @media (min-width: 768px) {
+          [data-rightbar-col] {
+            min-width: 300px;
+          }
+
+          /* Mode Desktop 2 Kolom: Sembunyikan tab / tombol PDF di header */
+          [role="tab"][data-tab-id="latex-pdf"],
+          button[role="tab"].latex-tab-pdf-button,
+          [role="tab"]:has([data-latex-tab="pdf"]),
+          [role="tab"]:has(.latex-tab-pdf) {
+            display: none !important;
+          }
+
+          /* Jika hanya tersisa Chat saat PDF disembunyikan, sembunyikan baris tabs */
+          [data-conversation-tabs]:has(> [role="tab"]:nth-of-type(2):is(.latex-tab-pdf-button, [data-tab-id="latex-pdf"], :has([data-latex-tab="pdf"]), :has(.latex-tab-pdf))):not(:has(> [role="tab"]:nth-of-type(3))) {
+            display: none !important;
+          }
+        }
+
+        /* ==========================================================
+           4. MOBILE (< 768px): TAB PDF DI ATAS KANAN
+           ========================================================== */
+        @media (max-width: 767px) {
+          /* Di layar HP, sembunyikan handle resize dan rightbar bawaan */
+          [class*="handle"] {
+            display: none !important;
+          }
+          [data-rightbar-col] {
+            display: none !important;
+          }
+          [class*="centerCol"] {
+            display: flex !important;
+            width: 100vw !important;
+            max-width: 100vw !important;
+            min-width: 0 !important;
+            flex: 1 1 auto !important;
+          }
+
+          /* Header panel PDF di mobile agar tombol toolbar tetap rapi & sticky */
+          .latex-editor-header {
+            position: sticky !important;
+            top: 0 !important;
+            z-index: 1000 !important;
+            padding: 6px 10px !important;
+            gap: 5px !important;
+            flex-wrap: nowrap !important;
+            overflow-x: auto !important;
+          }
+
+          .latex-header-left {
+            gap: 5px !important;
+          }
+
+          .latex-btn-compile {
+            padding: 5px 9px !important;
+            font-size: 11px !important;
+            flex-shrink: 0 !important;
+          }
+
+          .latex-btn-icon {
+            padding: 5px 8px !important;
+            font-size: 11px !important;
+            flex-shrink: 0 !important;
+          }
+
+          .latex-scroll {
+            padding: 8px 6px 18px !important;
+            gap: 8px !important;
+            -webkit-overflow-scrolling: touch !important;
+            touch-action: pan-x pan-y pinch-zoom !important;
+          }
         }
       `;
       document.head.appendChild(style);
     }
 
     const SCROLL_STORE_KEY = 'dsh-latex-preview-scroll';
+    const MOBILE_VIEW_KEY = 'dsh-latex-mobile-view';
+
+    function getMobileView() {
+      if (typeof window === 'undefined') return 'chat';
+      try {
+        return window.sessionStorage.getItem(MOBILE_VIEW_KEY) === 'pdf' ? 'pdf' : 'chat';
+      } catch (e) {
+        return 'chat';
+      }
+    }
+
+    function setMobileView(view) {
+      if (typeof window === 'undefined') return;
+      const target = view === 'pdf' ? 'pdf' : 'chat';
+      try {
+        window.sessionStorage.setItem(MOBILE_VIEW_KEY, target);
+      } catch (e) {}
+      if (document && document.body) {
+        document.body.dataset.latexMobileView = target;
+      }
+      try {
+        window.dispatchEvent(new CustomEvent('latex-mobile-view-change', { detail: { view: target } }));
+      } catch (e) {}
+    }
+
+    function useMobileView() {
+      const [view, setViewState] = React.useState(getMobileView);
+      React.useEffect(() => {
+        const handler = (e) => {
+          if (e && e.detail && e.detail.view) {
+            setViewState(e.detail.view);
+          } else {
+            setViewState(getMobileView());
+          }
+        };
+        window.addEventListener('latex-mobile-view-change', handler);
+        return () => window.removeEventListener('latex-mobile-view-change', handler);
+      }, []);
+      return [view, setMobileView];
+    }
 
     function readStoredRatio() {
       try {
@@ -633,7 +803,7 @@ window.__ModuleLoader__.load({
       }, [hasPdf, pageCount, pdfMtime, activeWorkspace]);
 
       return h('div', { className: 'latex-editor-container' }, [
-        // 1. Header Toolbar (Hanya compile, log, dan refresh)
+        // 1. Header Toolbar (Kompilasi, log, dan refresh)
         h('div', { className: 'latex-editor-header', key: 'header' }, [
           // Compile Button
           h(
@@ -673,6 +843,22 @@ window.__ModuleLoader__.load({
             },
             '🔄 Refresh'
           ),
+
+          // Tombol Tutup Panel Pratinjau
+          h(
+            'button',
+            {
+              className: 'latex-btn-icon latex-btn-close',
+              onClick: () => {
+                if (typeof window !== 'undefined' && window.__dshLayout && typeof window.__dshLayout.closeRightbar === 'function') {
+                  window.__dshLayout.closeRightbar();
+                }
+              },
+              title: 'Tutup Panel Pratinjau PDF',
+              key: 'btn-close-pdf',
+            },
+            '✕'
+          ),
         ]),
 
         // 2. Log Drawer (jika terbuka atau kompilasi gagal)
@@ -732,8 +918,16 @@ window.__ModuleLoader__.load({
                   `Hal ${Math.min(currentPage, pageCount)} / ${pageCount}`
                 ),
               ]
-            : h('div', { className: 'latex-empty-state' }, [
-                h(
+            : (status?.mainPdfExists
+                ? h('iframe', {
+                    className: 'latex-pdf-iframe',
+                    src: withWorkspace(`/api/latex/pdf?t=${pdfMtime}`),
+                    style: { width: '100%', height: '100%', border: 'none', background: '#525659' },
+                    title: 'Pratinjau PDF',
+                    key: 'pdf-iframe-fallback',
+                  })
+                : h('div', { className: 'latex-empty-state', key: 'empty' }, [
+                    h(
                   'svg',
                   {
                     className: 'latex-empty-icon',
@@ -770,7 +964,7 @@ window.__ModuleLoader__.load({
                   },
                   compiling ? 'Membuat & Mengompilasi...' : '📄 Buat Template main.tex & Compile'
                 ),
-              ])
+              ]))
         ),
 
         // 4. Footer Bar
@@ -787,30 +981,139 @@ window.__ModuleLoader__.load({
       ]);
     }
 
-    return {
+    function LatexHeaderCornerToggle() {
+      const handleToggle = () => {
+        try {
+          const col = document.querySelector('[data-rightbar-col]');
+          const isOpen = col && col.offsetWidth > 40 && window.getComputedStyle(col).display !== 'none';
+          if (isOpen) {
+            if (ctx.layout && typeof ctx.layout.closeRightbar === 'function') {
+              ctx.layout.closeRightbar();
+            }
+          } else {
+            if (ctx.sidebarRight && typeof ctx.sidebarRight.openTab === 'function') {
+              ctx.sidebarRight.openTab('latex-preview');
+            } else if (ctx.layout && typeof ctx.layout.openRightbar === 'function') {
+              ctx.layout.openRightbar(true, false);
+            }
+          }
+        } catch (e) {
+          if (ctx.layout && typeof ctx.layout.openRightbar === 'function') {
+            ctx.layout.openRightbar(true, false);
+          }
+        }
+      };
+
+      return h(
+        'button',
+        {
+          type: 'button',
+          className: 'latex-btn-header-corner',
+          onClick: handleToggle,
+          title: 'Buka / Tutup Pratinjau PDF',
+          'aria-label': 'Toggle Preview PDF',
+          key: 'latex-corner-toggle',
+        },
+        h(
+          'svg',
+          {
+            width: 16,
+            height: 16,
+            viewBox: '0 0 24 24',
+            fill: 'none',
+            stroke: 'currentColor',
+            strokeWidth: 2,
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+          },
+          [
+            h('rect', { x: 3, y: 3, width: 18, height: 18, rx: 2, ry: 2, key: 'r' }),
+            h('line', { x1: 15, y1: 3, x2: 15, y2: 21, key: 'l' }),
+          ]
+        )
+      );
+    }
+
+    const pluginInstance = {
       inject: ['slots', 'layout'],
       apply(ctx) {
-        // 1. Suntikkan stylesheet kustom untuk layout split & pembersihan fitur non-essential
+        // 1. Simpan layout helper ke window untuk interaksi UI
+        if (typeof window !== 'undefined') {
+          window.__dshLayout = ctx.layout;
+        }
+
+        // 2. Suntikkan stylesheet kustom untuk layout split, responsive mobile, & pembersihan fitur non-essential
         injectStyles();
 
-        // 2. Pastikan Rightbar selalu terbuka dengan track terpasang (Split Screen)
+        // 3. Inisialisasi status tampilan mobile pada dokumen
+        if (typeof document !== 'undefined' && document.body) {
+          document.body.dataset.latexMobileView = getMobileView();
+        }
+
+        // 4. Buka split screen di desktop saat pertama kali memuat
         if (ctx.layout && typeof ctx.layout.openRightbar === 'function') {
-          const ensureSplit = () => {
+          try {
+            ctx.layout.openRightbar(true, false);
+          } catch (e) {}
+        }
+
+        // 5. Daftarkan tab jenis 'latex-preview' ke dalam sistem sidebarRight bawaan DSH
+        ctx.inject(['sidebarRightTabs', 'sidebarRight'], () => {
+          try {
+            ctx.sidebarRightTabs.register({
+              id: '@salism3/dsh-latex-editor/tab',
+              kind: 'latex-preview',
+              title: () => 'Pratinjau PDF',
+              guide: [
+                {
+                  id: 'latex-pdf-entry',
+                  order: 1,
+                  title: () => 'Pratinjau PDF LaTeX',
+                  description: () => 'Buka pratinjau dokumen PDF secara langsung',
+                  icon: () => h('span', { style: { fontSize: '18px' } }, '📄'),
+                },
+              ],
+            });
+          } catch (e) {
+            console.warn('[latex-editor] sidebarRightTabs.register error:', e);
+          }
+
+          // Buka tab latex-preview sebagai tab aktif di panel kanan
+          const activatePdfTab = () => {
             try {
-              ctx.layout.openRightbar(true, false);
+              if (ctx.sidebarRight && typeof ctx.sidebarRight.openTab === 'function') {
+                ctx.sidebarRight.openTab('latex-preview');
+              }
             } catch (e) {}
           };
 
-          ensureSplit();
-
-          // Pertahankan split screen aktif saat terjadi perpindahan view atau session
-          const interval = setInterval(ensureSplit, 1500);
-          ctx.effect(() => () => clearInterval(interval));
-        }
+          activatePdfTab();
+          setTimeout(activatePdfTab, 400);
+        });
 
-        // 3. Daftarkan panel pratinjau PDF ke dalam slot 'rightbar' dengan prioritas tertinggi (prioritas angka terendah menang)
+        // 6. Daftarkan konten panel pratinjau PDF ke dalam slot 'sidebar.right.pane.tab'
         if (ctx.slots && typeof ctx.slots.inject === 'function') {
-          ctx.slots.inject('root', () =>
+          ctx.slots.inject('sidebar.right.pane.tab', () =>
+            ctx.slots.register(
+              {
+                name: 'sidebar.right.pane.tab',
+                key: '@salism3/dsh-latex-editor/tab',
+              },
+              LatexPdfPreviewPane
+            )
+          );
+
+          ctx.slots.inject('sidebar.right.pane.tab.title', () =>
+            ctx.slots.register(
+              {
+                name: 'sidebar.right.pane.tab.title',
+                key: '@salism3/dsh-latex-editor/tab',
+              },
+              () => '📄 Pratinjau PDF'
+            )
+          );
+
+          ctx.slots.inject('rightbar', () =>
             ctx.slots.register(
               {
                 name: 'rightbar',
@@ -819,9 +1122,71 @@ window.__ModuleLoader__.load({
               LatexPdfPreviewPane
             )
           );
+
+          // Override tombol toggle corner [|] di kanan atas sesi untuk buka/tutup PDF Preview
+          ctx.slots.inject('conversation.session.header.corner', () =>
+            ctx.slots.register(
+              {
+                name: 'conversation.session.header.corner',
+                priority: -100,
+              },
+              LatexHeaderCornerToggle
+            )
+          );
+
+          // Daftarkan tab PDF ke dalam slot 'conversation.view' (untuk mode mobile)
+          ctx.slots.inject('conversation.view', () =>
+            ctx.slots.register(
+              {
+                name: 'conversation.view',
+                id: 'latex-pdf',
+                order: 20,
+                label: () => 'PDF',
+              },
+              LatexPdfPreviewPane
+            )
+          );
         }
 
-        // 4. Tambah workspace: sekali klik langsung membuat workspace + folder,
+        // 6. Kontrol tombol PDF: sembunyikan saat mode desktop (>= 768px), tampilkan saat mobile (< 768px)
+        if (typeof document !== 'undefined') {
+          const updateDesktopPdfTab = () => {
+            const isDesktop = typeof window !== 'undefined' && window.innerWidth >= 768;
+            const tabs = document.querySelectorAll('[role="tab"]');
+            for (const tab of tabs) {
+              const text = (tab.textContent || '').trim();
+              if (text === 'PDF' || text.includes('PDF') || tab.getAttribute('data-tab-id') === 'latex-pdf') {
+                tab.classList.add('latex-tab-pdf-button');
+                tab.setAttribute('data-tab-id', 'latex-pdf');
+                if (isDesktop) {
+                  tab.style.setProperty('display', 'none', 'important');
+                } else {
+                  tab.style.removeProperty('display');
+                }
+              }
+            }
+          };
+
+          updateDesktopPdfTab();
+          const tabInterval = setInterval(updateDesktopPdfTab, 300);
+          window.addEventListener('resize', updateDesktopPdfTab);
+
+          const removeOldButtons = () => {
+            const old1 = document.getElementById('dsh-latex-top-toggle');
+            if (old1 && old1.parentNode) old1.parentNode.removeChild(old1);
+            const old2 = document.getElementById('dsh-latex-mobile-fab');
+            if (old2 && old2.parentNode) old2.parentNode.removeChild(old2);
+          };
+          removeOldButtons();
+
+          ctx.effect(() => () => {
+            clearInterval(tabInterval);
+            window.removeEventListener('resize', updateDesktopPdfTab);
+            removeOldButtons();
+          });
+        }
+
+        // 7. Tambah workspace: sekali klik langsung membuat workspace + folder,
         //    tanpa membuka dialog pemilih folder.
         if (typeof document !== 'undefined') {
           ctx.effect(() => {
@@ -867,5 +1232,23 @@ window.__ModuleLoader__.load({
         }
       },
     };
-  },
-});
+
+    return {
+      __esModule: true,
+      default: pluginInstance,
+      inject: pluginInstance.inject,
+      apply: pluginInstance.apply,
+    };
+}
+
+if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__ModuleLoader__.load === 'function') {
+  window.__ModuleLoader__.load({
+    id: '@local/dsh-latex-editor',
+    factory: defineLatexEditorPlugin,
+  });
+
+  window.__ModuleLoader__.load({
+    id: '@salism3/dsh-latex-editor',
+    factory: defineLatexEditorPlugin,
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salism3/dsh-latex-editor",
-  "version": "1.0.1",
+  "version": "1.1.7",
   "description": "DeepSeek Harness LaTeX Editor with AI - Split screen chat & live PDF preview, main.tex compiler, and soul injection",
   "author": "salism3",
   "license": "MIT",