hh-shipments 0.3.0 → 0.3.2

package/package.json

@@ -18,7 +18,7 @@
     "test": "node test/run-tests.js && node test/run-carriers-tests.js"
   },
   "type": "commonjs",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "bin": {
     "hh-shipments": "server.js"
   },

package/public/app.js

@@ -180,21 +180,65 @@ $('photo-input').addEventListener('change', async (e) => {
   await handlePhotoFile(f);
 });
 
-// Paste a screenshot straight from the clipboard (iOS: tap the paste zone, long-press → Paste)
-$('tab-photo').addEventListener('paste', async (e) => {
+// Shared: pull image files out of a paste event's clipboard data
+function pastedImageFiles(e) {
   const dt = e.clipboardData;
-  if (!dt) return;
   const files = [];
+  if (!dt) return files;
   if (dt.items) for (const it of dt.items) {
     if (it.type && it.type.startsWith('image/')) { const f = it.getAsFile(); if (f) files.push(f); }
   }
   if (!files.length && dt.files) for (const f of dt.files) {
     if (f.type && f.type.startsWith('image/')) files.push(f);
   }
-  if (!files.length) return; // let text pastes behave normally
+  return files;
+}
+
+// Paste-text tab: pasting a screenshot runs OCR and extracts tracking numbers;
+// pasting plain text behaves normally
+async function handlePastedImageFile(f) {
+  try {
+    const text = await ocrFile(f, $('ocr-status-paste'));
+    const fd = new FormData();
+    fd.append('image', f);
+    const up = await fetch('/api/intake/image', { method: 'POST', body: fd });
+    if (!up.ok) throw new Error('upload failed');
+    await runQuick(text, $('quick-result'));
+  } catch (err) { $('ocr-status-paste').textContent = ''; $('quick-result').innerHTML = `<p class="error">${esc(err.message)}</p>`; }
+}
+
+$('tab-paste').addEventListener('paste', async (e) => {
+  const files = pastedImageFiles(e);
+  if (!files.length) return; // text paste — let it land in the textarea
   e.preventDefault();
-  $('paste-zone').innerHTML = '📋 <span class="muted">or tap here, then paste your screenshot</span>';
-  for (const f of files) await handlePhotoFile(f);
+  $('paste-box').innerHTML = '📋 <span class="muted">or tap here, then paste a screenshot</span>';
+  for (const f of files) await handlePastedImageFile(f);
+});
+
+// Fallback: read the image straight off the clipboard on tap (iOS sometimes
+// won't offer image-paste inside a plain text box)
+$('btn-clipboard').addEventListener('click', async () => {
+  if (!navigator.clipboard || !navigator.clipboard.read) {
+    $('quick-result').innerHTML = '<p class="error">This browser can\'t read the clipboard — copy the screenshot, tap the dashed box above, long-press → Paste.</p>';
+    return;
+  }
+  try {
+    $('ocr-status-paste').textContent = 'Reading clipboard…';
+    const items = await navigator.clipboard.read();
+    const files = [];
+    for (const item of items) for (const type of item.types) {
+      if (type.startsWith('image/')) {
+        const blob = await item.getType(type);
+        files.push(new File([blob], 'clipboard.' + type.split('/')[1], { type }));
+      }
+    }
+    $('ocr-status-paste').textContent = '';
+    if (!files.length) { $('quick-result').innerHTML = '<p class="muted">No image on the clipboard — copy a screenshot first, then tap this again.</p>'; return; }
+    for (const f of files) await handlePastedImageFile(f);
+  } catch (err) {
+    $('ocr-status-paste').textContent = '';
+    $('quick-result').innerHTML = `<p class="error">Couldn't read the clipboard (${esc(err.message)}). Tap the dashed box above, long-press → Paste instead.</p>`;
+  }
 });
 
 async function loadPending() {
@@ -314,7 +358,6 @@ function urlB64(s) {
 function activateTab(name) {
   document.querySelectorAll('.tab').forEach((t) => t.classList.toggle('active', t.dataset.tab === name));
   ['paste', 'photo', 'manual'].forEach((n) => ($('tab-' + n).hidden = n !== name));
-  if (name === 'photo') { try { $('paste-zone').focus({ preventScroll: true }); } catch (_) {} }
 }
 document.querySelectorAll('.tab').forEach((t) => (t.onclick = () => activateTab(t.dataset.tab)));
 document.querySelectorAll('#tabbar button').forEach((b) => {

package/public/index.html

@@ -62,12 +62,14 @@
     </div>
     <div id="tab-paste" class="tabpanel">
       <textarea id="paste-text" rows="6" placeholder="Paste the seller's message here…"></textarea>
+      <div id="paste-box" class="pastebox" contenteditable="true" spellcheck="false">📋 <span class="muted">or tap here, then paste a screenshot</span></div>
+      <div class="row" style="margin-top:8px"><button id="btn-clipboard" class="secondary">📋 Grab screenshot from clipboard</button></div>
+      <div id="ocr-status-paste" class="muted"></div>
       <button id="btn-quick" class="primary">Extract &amp; add</button>
       <div id="quick-result"></div>
     </div>
     <div id="tab-photo" class="tabpanel" hidden>
       <label class="filebtn">📷 Choose screenshot<input id="photo-input" type="file" accept="image/*" hidden></label>
-      <div id="paste-zone" class="pastezone" contenteditable="true" spellcheck="false" aria-label="Paste a screenshot here">📋 <span class="muted">or tap here, then paste your screenshot</span></div>
       <div id="ocr-status" class="muted"></div>
       <div id="photo-result"></div>
       <h3>Pending screenshots</h3>

package/public/styles.css

@@ -42,8 +42,8 @@ h2 { font-size: 17px; margin: 18px 0 8px; }
 .tab.active { background: var(--blue); color: #fff; }
 .tabpanel { margin-bottom: 12px; }
 .filebtn { display: block; text-align: center; background: #e5e5ea; border-radius: 12px; padding: 16px; font-weight: 600; cursor: pointer; }
-.pastezone { margin-top: 10px; border: 2px dashed #c7c7cc; border-radius: 12px; padding: 18px; text-align: center; font-size: 15px; min-height: 24px; outline: none; caret-color: transparent; }
-.pastezone:focus { border-color: #007aff; background: #f2f8ff; }
+.pastebox { margin-top: 8px; border: 2px dashed #c7c7cc; border-radius: 12px; padding: 14px; text-align: center; outline: none; caret-color: transparent; min-height: 20px; }
+.pastebox:focus { border-color: #007aff; background: #f2f8ff; }
 .statusline { font-size: 17px; font-weight: 600; margin: 8px 0; }
 .timeline { border-left: 2px solid #d1d1d6; margin-left: 6px; padding-left: 14px; }
 .timeline .ev { margin-bottom: 12px; font-size: 14px; }