@shhhum/xftp-web 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shhhum/xftp-web",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "XFTP file transfer protocol client for web/browser environments",
   "license": "AGPL-3.0-only",
   "repository": {

package/src/client.ts

@@ -97,7 +97,7 @@ interface Transport {
 
 // -- Transport implementations
 
-const isNode = typeof globalThis.process !== "undefined" && globalThis.process.versions?.node
+const isNode = typeof (globalThis as any).process !== "undefined" && (globalThis as any).process.versions?.node
 
 // In development mode, use HTTP proxy to avoid self-signed cert issues in browser
 // __XFTP_PROXY_PORT__ is injected by vite build (null in production)
@@ -112,7 +112,8 @@ async function createTransport(baseUrl: string, config: TransportConfig): Promis
 }
 
 async function createNodeTransport(baseUrl: string, config: TransportConfig): Promise<Transport> {
-  const http2 = await import("node:http2")
+  // @ts-ignore node:http2 unavailable in browser tsconfig
+  const http2: any = await import("node:http2")
   const session = http2.connect(baseUrl, {rejectUnauthorized: false})
   return {
     async post(body: Uint8Array, headers?: Record<string, string>): Promise<Uint8Array> {
@@ -122,11 +123,14 @@ async function createNodeTransport(baseUrl: string, config: TransportConfig): Pr
           req.close()
           reject(Object.assign(new Error("Request timeout"), {name: "AbortError"}))
         })
-        const chunks: Buffer[] = []
-        req.on("data", (chunk: Buffer) => chunks.push(chunk))
-        req.on("end", () => resolve(new Uint8Array(Buffer.concat(chunks))))
+        const chunks: any[] = []
+        req.on("data", (chunk: any) => chunks.push(chunk))
+        req.on("end", () => {
+          const B = (globalThis as any).Buffer
+          resolve(new Uint8Array(B.concat(chunks)))
+        })
         req.on("error", reject)
-        req.end(Buffer.from(body))
+        req.end(body)
       })
     },
     close() {
@@ -149,7 +153,7 @@ function createBrowserTransport(baseUrl: string, config: TransportConfig): Trans
         const resp = await fetch(effectiveUrl, {
           method: "POST",
           headers,
-          body,
+          body: body as any,
           signal: controller.signal
         })
         if (!resp.ok) {

package/web/crypto-backend.ts

@@ -1,4 +1,5 @@
 import type {FileHeader} from '../src/crypto/file.js'
+import {t} from './i18n.js'
 
 export interface CryptoBackend {
   encrypt(data: Uint8Array, fileName: string,
@@ -134,7 +135,7 @@ class WorkerBackend implements CryptoBackend {
 
 export function createCryptoBackend(): CryptoBackend {
   if (typeof Worker === 'undefined') {
-    throw new Error('Web Workers required — update your browser')
+    throw new Error(t('workersRequired', 'Web Workers required \u2014 update your browser'))
   }
   return new WorkerBackend()
 }

package/web/crypto.worker.ts

@@ -190,7 +190,7 @@ async function handleVerifyAndDecrypt(
   }
 
   // Compute per-chunk SHA-512 incrementally to find divergence point
-  const state = sodium.crypto_hash_sha512_init()
+  const state = sodium.crypto_hash_sha512_init() as unknown as import('libsodium-wrappers').StateAddress
   for (let i = 0; i < chunks.length; i++) {
     const chunk = chunks[i]
     const SEG = 4 * 1024 * 1024
@@ -202,7 +202,7 @@ async function handleVerifyAndDecrypt(
   if (!digestEqual(actualDigest, digest)) {
     console.error(`[WORKER-DBG] DIGEST MISMATCH: expected=${_whex(digest, 64)} actual=${_whex(actualDigest, 64)} chunks=${chunks.length} totalSize=${totalSize}`)
     // Log per-chunk incremental hash to find divergence
-    const state2 = sodium.crypto_hash_sha512_init()
+    const state2 = sodium.crypto_hash_sha512_init() as unknown as import('libsodium-wrappers').StateAddress
     for (let i = 0; i < chunks.length; i++) {
       const chunk = chunks[i]
       const SEG = 4 * 1024 * 1024

package/web/download.ts

@@ -1,5 +1,6 @@
 import {createCryptoBackend} from './crypto-backend.js'
 import {createProgressRing} from './progress.js'
+import {t} from './i18n.js'
 import {
   newXFTPAgent, closeXFTPAgent,
   decodeDescriptionURI, downloadFileRaw
@@ -11,30 +12,30 @@ export function initDownload(app: HTMLElement, hash: string) {
   try {
     fd = decodeDescriptionURI(hash)
   } catch (err: any) {
-    app.innerHTML = `<div class="card"><p class="error">Invalid or corrupted link.</p></div>`
+    app.innerHTML = `<div class="card"><p class="error">${t('invalidLink', 'Invalid or corrupted link.')}</p></div>`
     return
   }
 
   const size = fd.redirect ? fd.redirect.size : fd.size
   app.innerHTML = `
     <div class="card">
-      <h1>SimpleX File Transfer</h1>
+      <h1>${t('title', 'SimpleX File Transfer')}</h1>
       <div id="dl-ready" class="stage">
-        <p>File available (~${formatSize(size)})</p>
-        <button id="dl-btn" class="btn">Download</button>
+        <p>${t('fileAvailable', 'File available (~%size%)').replace('%size%', formatSize(size))}</p>
+        <button id="dl-btn" class="btn">${t('download', 'Download')}</button>
         <div class="security-note">
-          <p>This file is encrypted — the server never sees file contents.</p>
-          <p>The decryption key is in the link's hash fragment, which your browser never sends to any server.</p>
-          <p>For maximum security, use the <a href="https://simplex.chat" target="_blank" rel="noopener">SimpleX app</a>.</p>
+          <p>${t('dlSecurityNote1', 'This file is encrypted \u2014 the server never sees file contents.')}</p>
+          <p>${t('dlSecurityNote2', 'The decryption key is in the link\u2019s hash fragment, which your browser never sends to any server.')}</p>
+          <p>${t('dlSecurityNote3', 'For maximum security, use the <a href="https://simplex.chat" target="_blank" rel="noopener">SimpleX app</a>.')}</p>
         </div>
       </div>
       <div id="dl-progress" class="stage" hidden>
         <div id="dl-progress-container"></div>
-        <p id="dl-status">Downloading…</p>
+        <p id="dl-status">${t('downloading', 'Downloading\u2026')}</p>
       </div>
       <div id="dl-error" class="stage" hidden>
         <p class="error" id="dl-error-msg"></p>
-        <button id="dl-retry-btn" class="btn">Retry</button>
+        <button id="dl-retry-btn" class="btn">${t('retry', 'Retry')}</button>
       </div>
     </div>`
 
@@ -65,7 +66,7 @@ export function initDownload(app: HTMLElement, hash: string) {
     const ring = createProgressRing()
     progressContainer.innerHTML = ''
     progressContainer.appendChild(ring.canvas)
-    statusText.textContent = 'Downloading…'
+    statusText.textContent = t('downloading', 'Downloading\u2026')
 
     const backend = createCryptoBackend()
     const agent = newXFTPAgent()
@@ -81,7 +82,7 @@ export function initDownload(app: HTMLElement, hash: string) {
         }
       })
 
-      statusText.textContent = 'Decrypting…'
+      statusText.textContent = t('decrypting', 'Decrypting\u2026')
       ring.update(0.85)
 
       const {header, content} = await backend.verifyAndDecrypt({
@@ -107,7 +108,8 @@ export function initDownload(app: HTMLElement, hash: string) {
       setTimeout(() => URL.revokeObjectURL(url), 1000)
 
       ring.update(1)
-      statusText.textContent = 'Download complete'
+      statusText.textContent = t('downloadComplete', 'Download complete')
+      app.dispatchEvent(new CustomEvent('xftp:download-complete', {detail: {fileName}, bubbles: true}))
     } catch (err: any) {
       const msg = err?.message ?? String(err)
       showError(msg)

package/web/i18n.ts

@@ -0,0 +1,9 @@
+declare global {
+  interface Window {
+    __XFTP_I18N__?: Record<string, string>
+  }
+}
+
+export function t(key: string, fallback: string): string {
+  return window.__XFTP_I18N__?.[key] ?? fallback
+}

package/web/main.ts

@@ -1,17 +1,26 @@
 import sodium from 'libsodium-wrappers-sumo'
 import {initUpload} from './upload.js'
 import {initDownload} from './download.js'
+import {t} from './i18n.js'
+
+function getAppElement(): HTMLElement | null {
+  return (document.querySelector('[data-xftp-app]') as HTMLElement | null) ?? document.getElementById('app')
+}
 
 async function main() {
   await sodium.ready
-  initApp()
 
-  // Handle hash changes (SPA navigation)
-  window.addEventListener('hashchange', initApp)
+  const app = getAppElement()
+  if (!app?.hasAttribute('data-defer-init')) {
+    initApp()
+  }
+  if (!app?.hasAttribute('data-no-hashchange')) {
+    window.addEventListener('hashchange', initApp)
+  }
 }
 
 function initApp() {
-  const app = document.getElementById('app')!
+  const app = getAppElement()!
   const hash = window.location.hash.slice(1)
 
   if (hash) {
@@ -21,10 +30,12 @@ function initApp() {
   }
 }
 
+;(window as any).__xftp_initApp = initApp
+
 main().catch(err => {
-  const app = document.getElementById('app')
+  const app = getAppElement()
   if (app) {
-    app.innerHTML = `<div class="error"><p>Failed to initialize: ${err.message}</p></div>`
+    app.innerHTML = `<div class="error"><p>${t('initError', 'Failed to initialize: %error%').replace('%error%', err.message)}</p></div>`
   }
   console.error(err)
 })

package/web/progress.ts

@@ -2,8 +2,6 @@ const SIZE = 120
 const LINE_WIDTH = 8
 const RADIUS = (SIZE - LINE_WIDTH) / 2
 const CENTER = SIZE / 2
-const BG_COLOR = '#e0e0e0'
-const FG_COLOR = '#3b82f6'
 
 export interface ProgressRing {
   canvas: HTMLCanvasElement
@@ -21,11 +19,17 @@ export function createProgressRing(): ProgressRing {
   ctx.scale(devicePixelRatio, devicePixelRatio)
 
   function draw(fraction: number) {
+    const appEl = document.querySelector('[data-xftp-app]') ?? document.getElementById('app')
+    const s = appEl ? getComputedStyle(appEl) : null
+    const bgColor = s?.getPropertyValue('--xftp-ring-bg').trim() || '#e0e0e0'
+    const fgColor = s?.getPropertyValue('--xftp-ring-fg').trim() || '#3b82f6'
+    const textColor = s?.getPropertyValue('--xftp-ring-text').trim() || '#333'
+
     ctx.clearRect(0, 0, SIZE, SIZE)
     // Background arc
     ctx.beginPath()
     ctx.arc(CENTER, CENTER, RADIUS, 0, 2 * Math.PI)
-    ctx.strokeStyle = BG_COLOR
+    ctx.strokeStyle = bgColor
     ctx.lineWidth = LINE_WIDTH
     ctx.lineCap = 'round'
     ctx.stroke()
@@ -33,14 +37,14 @@ export function createProgressRing(): ProgressRing {
     if (fraction > 0) {
       ctx.beginPath()
       ctx.arc(CENTER, CENTER, RADIUS, -Math.PI / 2, -Math.PI / 2 + 2 * Math.PI * fraction)
-      ctx.strokeStyle = FG_COLOR
+      ctx.strokeStyle = fgColor
       ctx.lineWidth = LINE_WIDTH
       ctx.lineCap = 'round'
       ctx.stroke()
     }
     // Percentage text
     const pct = Math.round(fraction * 100)
-    ctx.fillStyle = '#333'
+    ctx.fillStyle = textColor
     ctx.font = '600 20px system-ui, sans-serif'
     ctx.textAlign = 'center'
     ctx.textBaseline = 'middle'

package/web/servers.ts

@@ -8,5 +8,6 @@ declare const __XFTP_SERVERS__: string[]
 const serverAddresses: string[] = __XFTP_SERVERS__
 
 export function getServers(): XFTPServer[] {
-  return serverAddresses.map(parseXFTPServer)
+  const addrs = (window as any).__XFTP_SERVERS__ ?? serverAddresses
+  return addrs.map(parseXFTPServer)
 }

package/web/style.css

@@ -1,22 +1,13 @@
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-body {
+#app {
   font-family: system-ui, -apple-system, sans-serif;
-  background: #f5f5f5;
   color: #333;
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-#app {
   width: 100%;
   max-width: 480px;
   padding: 16px;
+  box-sizing: border-box;
 }
 
-.card {
+#app .card {
   background: #fff;
   border-radius: 12px;
   padding: 32px 24px;
@@ -24,28 +15,28 @@ body {
   text-align: center;
 }
 
-h1 {
+#app h1 {
   font-size: 1.25rem;
   font-weight: 600;
   margin-bottom: 24px;
 }
 
-.stage { margin-top: 16px; }
+#app .stage { margin-top: 16px; }
 
 /* Drop zone */
-.drop-zone {
+#app .drop-zone {
   border: 2px dashed #ccc;
   border-radius: 8px;
   padding: 32px 16px;
   transition: border-color .15s, background .15s;
 }
-.drop-zone.drag-over {
+#app .drop-zone.drag-over {
   border-color: #3b82f6;
   background: #eff6ff;
 }
 
 /* Buttons */
-.btn {
+#app .btn {
   display: inline-block;
   padding: 10px 24px;
   border: none;
@@ -57,25 +48,25 @@ h1 {
   cursor: pointer;
   transition: background .15s;
 }
-.btn:hover { background: #2563eb; }
-.btn-secondary { background: #6b7280; }
-.btn-secondary:hover { background: #4b5563; }
+#app .btn:hover { background: #2563eb; }
+#app .btn-secondary { background: #6b7280; }
+#app .btn-secondary:hover { background: #4b5563; }
 
 /* Hints */
-.hint { color: #999; font-size: .85rem; margin-top: 8px; }
-.expiry { margin-top: 12px; }
+#app .hint { color: #999; font-size: .85rem; margin-top: 8px; }
+#app .expiry { margin-top: 12px; }
 
 /* Progress */
-.progress-ring { display: block; margin: 0 auto 12px; }
-#upload-status, #dl-status { font-size: .9rem; color: #666; margin-bottom: 12px; }
+#app .progress-ring { display: block; margin: 0 auto 12px; }
+#app #upload-status, #app #dl-status { font-size: .9rem; color: #666; margin-bottom: 12px; }
 
 /* Share link row */
-.link-row {
+#app .link-row {
   display: flex;
   gap: 8px;
   margin-top: 12px;
 }
-.link-row input {
+#app .link-row input {
   flex: 1;
   padding: 8px 10px;
   border: 1px solid #ccc;
@@ -85,11 +76,11 @@ h1 {
 }
 
 /* Messages */
-.success { color: #16a34a; font-weight: 600; }
-.error { color: #dc2626; font-weight: 500; margin-bottom: 12px; }
+#app .success { color: #16a34a; font-weight: 600; }
+#app .error { color: #dc2626; font-weight: 500; margin-bottom: 12px; }
 
 /* Security note */
-.security-note {
+#app .security-note {
   margin-top: 20px;
   padding: 12px;
   background: #f0fdf4;
@@ -98,6 +89,40 @@ h1 {
   color: #555;
   text-align: left;
 }
-.security-note p + p { margin-top: 6px; }
-.security-note a { color: #3b82f6; text-decoration: none; }
-.security-note a:hover { text-decoration: underline; }
+#app .security-note p + p { margin-top: 6px; }
+#app .security-note a { color: #3b82f6; text-decoration: none; }
+#app .security-note a:hover { text-decoration: underline; }
+
+/* ── Dark mode ─────────────────────────────────── */
+.dark #app {
+  color: #e5e7eb;
+  --xftp-ring-bg: #374151;
+  --xftp-ring-fg: #60a5fa;
+  --xftp-ring-text: #e5e7eb;
+}
+.dark #app .card {
+  background: #1f2937;
+  box-shadow: 0 1px 3px rgba(0,0,0,.4);
+}
+.dark #app .drop-zone { border-color: #4b5563; }
+.dark #app .drop-zone.drag-over {
+  border-color: #60a5fa;
+  background: rgba(59,130,246,.15);
+}
+.dark #app .btn-secondary { background: #4b5563; }
+.dark #app .btn-secondary:hover { background: #374151; }
+.dark #app .hint { color: #9ca3af; }
+.dark #app #upload-status,
+.dark #app #dl-status { color: #9ca3af; }
+.dark #app .link-row input {
+  background: #374151;
+  border-color: #4b5563;
+  color: #e5e7eb;
+}
+.dark #app .success { color: #4ade80; }
+.dark #app .error { color: #f87171; }
+.dark #app .security-note {
+  background: rgba(34,197,94,.1);
+  color: #d1d5db;
+}
+.dark #app .security-note a { color: #60a5fa; }

package/web/upload.ts

@@ -1,6 +1,7 @@
 import {createCryptoBackend} from './crypto-backend.js'
 import {getServers} from './servers.js'
 import {createProgressRing} from './progress.js'
+import {t} from './i18n.js'
 import {
   newXFTPAgent, closeXFTPAgent, uploadFile, encodeDescriptionURI,
   type EncryptedFileMetadata
@@ -12,35 +13,35 @@ const MAX_SIZE = 100 * 1024 * 1024
 export function initUpload(app: HTMLElement) {
   app.innerHTML = `
     <div class="card">
-      <h1>SimpleX File Transfer</h1>
+      <h1>${t('title', 'SimpleX File Transfer')}</h1>
       <div id="drop-zone" class="drop-zone">
-        <p>Drag & drop a file here</p>
-        <p class="hint">or</p>
-        <label class="btn" for="file-input">Choose file</label>
+        <p>${t('dropZone', 'Drag & drop a file here')}</p>
+        <p class="hint">${t('dropZoneHint', 'or')}</p>
+        <label class="btn" for="file-input">${t('chooseFile', 'Choose file')}</label>
         <input id="file-input" type="file" hidden>
-        <p class="hint">Max 100 MB</p>
+        <p class="hint">${t('maxSizeHint', 'Max 100 MB')}</p>
       </div>
       <div id="upload-progress" class="stage" hidden>
         <div id="progress-container"></div>
-        <p id="upload-status">Encrypting…</p>
-        <button id="cancel-btn" class="btn btn-secondary">Cancel</button>
+        <p id="upload-status">${t('encrypting', 'Encrypting\u2026')}</p>
+        <button id="cancel-btn" class="btn btn-secondary">${t('cancel', 'Cancel')}</button>
       </div>
       <div id="upload-complete" class="stage" hidden>
-        <p class="success">File uploaded</p>
+        <p class="success">${t('fileUploaded', 'File uploaded')}</p>
         <div class="link-row">
           <input id="share-link" data-testid="share-link" readonly>
-          <button id="copy-btn" class="btn">Copy</button>
+          <button id="copy-btn" class="btn">${t('copy', 'Copy')}</button>
         </div>
-        <p class="hint expiry">Files are typically available for 48 hours.</p>
+        <p class="hint expiry">${t('expiryHint', 'Files are typically available for 48 hours.')}</p>
         <div class="security-note">
-          <p>Your file was encrypted in the browser before upload — the server never sees file contents.</p>
-          <p>The link contains the decryption key in the hash fragment, which the browser never sends to any server.</p>
-          <p>For maximum security, use the <a href="https://simplex.chat" target="_blank" rel="noopener">SimpleX app</a>.</p>
+          <p>${t('securityNote1', 'Your file was encrypted in the browser before upload \u2014 the server never sees file contents.')}</p>
+          <p>${t('securityNote2', 'The link contains the decryption key in the hash fragment, which the browser never sends to any server.')}</p>
+          <p>${t('securityNote3', 'For maximum security, use the <a href="https://simplex.chat" target="_blank" rel="noopener">SimpleX app</a>.')}</p>
         </div>
       </div>
       <div id="upload-error" class="stage" hidden>
         <p class="error" id="error-msg"></p>
-        <button id="retry-btn" class="btn">Retry</button>
+        <button id="retry-btn" class="btn">${t('retry', 'Retry')}</button>
       </div>
     </div>`
 
@@ -57,6 +58,16 @@ export function initUpload(app: HTMLElement) {
   const errorMsg = document.getElementById('error-msg')!
   const retryBtn = document.getElementById('retry-btn')!
 
+  const shareBtn = typeof navigator.share === 'function'
+    ? (() => {
+        const btn = document.createElement('button')
+        btn.className = 'btn btn-secondary'
+        btn.textContent = t('share', 'Share')
+        shareLink.parentElement!.appendChild(btn)
+        return btn
+      })()
+    : null
+
   let aborted = false
   let pendingFile: File | null = null
 
@@ -90,11 +101,11 @@ export function initUpload(app: HTMLElement) {
     aborted = false
 
     if (file.size > MAX_SIZE) {
-      showError(`File too large (${formatSize(file.size)}). Maximum is 100 MB.`)
+      showError(t('fileTooLarge', 'File too large (%size%). Maximum is 100 MB. The SimpleX app supports files up to 1 GB.').replace('%size%', formatSize(file.size)))
       return
     }
     if (file.size === 0) {
-      showError('File is empty.')
+      showError(t('fileEmpty', 'File is empty.'))
       return
     }
 
@@ -102,7 +113,7 @@ export function initUpload(app: HTMLElement) {
     const ring = createProgressRing()
     progressContainer.innerHTML = ''
     progressContainer.appendChild(ring.canvas)
-    statusText.textContent = 'Encrypting…'
+    statusText.textContent = t('encrypting', 'Encrypting\u2026')
 
     const backend = createCryptoBackend()
     const agent = newXFTPAgent()
@@ -123,7 +134,7 @@ export function initUpload(app: HTMLElement) {
       })
       if (aborted) return
 
-      statusText.textContent = 'Uploading…'
+      statusText.textContent = t('uploading', 'Uploading\u2026')
       const metadata: EncryptedFileMetadata = {
         digest: encrypted.digest,
         key: encrypted.key,
@@ -142,12 +153,16 @@ export function initUpload(app: HTMLElement) {
       const url = window.location.origin + window.location.pathname + '#' + result.uri
       shareLink.value = url
       showStage(completeStage)
+      app.dispatchEvent(new CustomEvent('xftp:upload-complete', {detail: {url}, bubbles: true}))
       copyBtn.onclick = () => {
         navigator.clipboard.writeText(url).then(() => {
-          copyBtn.textContent = 'Copied!'
-          setTimeout(() => { copyBtn.textContent = 'Copy' }, 2000)
+          copyBtn.textContent = t('copied', 'Copied!')
+          setTimeout(() => { copyBtn.textContent = t('copy', 'Copy') }, 2000)
         })
       }
+      if (shareBtn) {
+        shareBtn.onclick = () => navigator.share({url}).catch(() => {})
+      }
     } catch (err: any) {
       if (!aborted) {
         const msg = err?.message ?? String(err)