hh-shipments 0.3.1 → 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.1",
+  "version": "0.3.2",
   "bin": {
     "hh-shipments": "server.js"
   },

package/public/app.js

@@ -196,19 +196,48 @@ function pastedImageFiles(e) {
 
 // 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();
-  for (const f of files) {
-    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) { $('quick-result').innerHTML = `<p class="error">${esc(err.message)}</p>`; }
+  $('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>`;
   }
 });
 

package/public/index.html

@@ -61,7 +61,9 @@
       <button class="tab" data-tab="manual">Manual</button>
     </div>
     <div id="tab-paste" class="tabpanel">
-      <textarea id="paste-text" rows="6" placeholder="Paste the seller's message or a tracking-number screenshot here…"></textarea>
+      <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>

package/public/styles.css

@@ -42,6 +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; }
+.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; }