@seasonkoh/webaz 0.1.27 → 0.1.29

package/dist/pwa/public/app-external-links.js

@@ -0,0 +1,32 @@
+// External source-platform links on the product detail page (renderBuyPage in app.js). UI ONLY.
+//   Shows a "前往源平台查看详情" jump button. Verified links only; unverified links are hidden until verified.
+//   SECURITY: only http/https URLs are ever made clickable (blocks javascript:/data:/relative); the target
+//   domain is shown so the buyer sees where they go; links open with target=_blank rel="noopener noreferrer".
+//   Data: GET /api/products/:id/external-links (buyer-facing; NOT owner-gated; returns { links } already
+//   filtered to verified + non-revoked). Read-only; no writes.
+
+// Return a URL object only for http/https, else null (blocks javascript:/data:/mailto:/relative).
+window.safeExternalUrl = (u) => {
+  try { const url = new URL(String(u)); return (url.protocol === 'http:' || url.protocol === 'https:') ? url : null } catch { return null }
+}
+
+// Placeholder + self-scheduled hydrate (mirrors productImageGallery's setTimeout pattern in app.js).
+window.extLinksBarHtml = (productId) => {
+  setTimeout(() => { if (window.hydrateExtLinks) window.hydrateExtLinks(productId) }, 0)
+  return `<div id="ext-links-${productId}"></div>`
+}
+
+window.hydrateExtLinks = async (productId) => {
+  const box = document.getElementById('ext-links-' + productId)
+  if (!box) return
+  // Buyer-facing endpoint returns { links } = VERIFIED + non-revoked only (server-enforced, public-safe subset).
+  const r = await GET(`/products/${productId}/external-links`).catch(() => null)
+  const links = (r && r.links) || []
+  const rows = links.map(l => {
+    const url = window.safeExternalUrl(l.url)
+    if (!url) return ''                                  // non-http(s) → never render as a link
+    const host = escHtml(url.hostname)
+    return `<a href="${escHtml(url.href)}" target="_blank" rel="noopener noreferrer" style="display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:6px 10px;text-decoration:none">🔗 ${t('前往源平台查看详情')} · ${host}</a>`
+  }).filter(Boolean)
+  if (rows.length) box.innerHTML = `<div style="display:flex;flex-wrap:wrap;gap:6px;margin:8px 0">${rows.join('')}</div>`
+}

package/dist/pwa/public/app-listings.js

@@ -0,0 +1,226 @@
+// WebAZ — Listings (multi-seller follow-sell) read-only display (classic split, slice J / app-listings.js)
+//
+// Loaded as a CLASSIC script in this order (index.html):
+//   i18n → app-admin → app-contribution → app-ai → app-discover → app-profile → app-account → app-shop → app-listings → app-seller → app.js (source of truth: index.html)
+// Top-level functions / window.* handlers are global; pages run on route/click
+// (after app.js loads), so cross-file globals (GET/state/shell/escHtml/navigate/t/
+// productCardHtml/LISTING_CATEGORY_NAMES/LISTING_TAG_DEFS/FULFILLMENT_LABELS/...) resolve
+// at call time. No import/export.
+//
+// READ-ONLY display surfaces only — all GET /listings*: renderListingsHome,
+// renderListingsMine, renderListingDetail, + LISTING_SORT_CHIPS/URGENCY_CHIPS
+// (display-only chips) and setListingUrgency/setListingSort (re-render toggles).
+//
+// INTENTIONALLY LEFT in app.js (money/stake/order path — never moved here): listings
+// create/follow + offer handlers LOCK or RELEASE wallet stake (listings.ts requires
+// + locks stake on POST /listings; offers.ts releases stake) — renderListingCreate/
+// submitListingCreate, renderListingFollow/submitFollowListing, refreshOfferFreshness
+// (POST /offers/:id/refresh). They are reached cross-file via the onclick handlers
+// that these read-only pages render. No UI/behavior change.
+
+async function renderListingsHome(app) {
+  app.innerHTML = `
+    <div style="padding:14px;max-width:760px;margin:0 auto">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">
+        <h2 style="font-size:18px;font-weight:700;margin:0">${t('多商家跟卖')}</h2>
+        <button class="btn btn-primary btn-sm" onclick="location.hash='#listings/new'">+ ${t('创建商品身份')}</button>
+      </div>
+      <div style="margin-bottom:10px">
+        <input id="lst-q" placeholder="${t('搜索：型号 / 关键词')}" style="width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px">
+      </div>
+      <div id="lst-list">${loading$()}</div>
+    </div>
+  `
+  const load = async () => {
+    const q = document.getElementById('lst-q').value.trim()
+    const list = document.getElementById('lst-list')
+    list.innerHTML = loading$()
+    const r = await GET('/listings' + (q ? '?q=' + encodeURIComponent(q) : ''))
+    const items = r?.items || []
+    if (!items.length) {
+      list.innerHTML = `<div style="text-align:center;color:#9ca3af;padding:40px 0">${t('暂无商品身份，创建第一个')}</div>`
+      return
+    }
+    list.innerHTML = items.map(it => `
+      <div class="card" style="padding:12px;margin-bottom:10px;cursor:pointer" onclick="location.hash='#listings/${it.id}'">
+        <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:10px">
+          <div style="flex:1;min-width:0">
+            <div style="font-weight:600;font-size:14px;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${escHtml(it.title)}</div>
+            <div style="font-size:11px;color:#6b7280">
+              ${t(LISTING_CATEGORY_NAMES[it.category] || it.category)}
+              ${it.external_id ? ' · ' + escHtml(it.external_id) : ''}
+              · ${it.offer_count || 0} ${t('个卖家')}
+            </div>
+          </div>
+          <div style="text-align:right">
+            ${it.min_price != null ? `<div style="color:#dc2626;font-weight:700;font-size:15px">${window.fmtPrice(it.min_price)}</div><div style="font-size:10px;color:#9ca3af">${t('起')}</div>` : `<div style="font-size:11px;color:#9ca3af">${t('暂无报价')}</div>`}
+          </div>
+        </div>
+      </div>
+    `).join('')
+  }
+  document.getElementById('lst-q').addEventListener('input', () => { clearTimeout(window._lstTimer); window._lstTimer = setTimeout(load, 300) })
+  load()
+}
+
+// 我的跟卖 — 卖家查看自己在哪些 listings 已上架，含价格竞争位
+async function renderListingsMine(app) {
+  if (!state.user) { location.hash = '#login'; return }
+  if (state.user.role !== 'seller') {
+    app.innerHTML = shell(`<div style="padding:24px">${alert$('warn', t('仅卖家可查看我的跟卖'))}</div>`, 'me')
+    return
+  }
+  app.innerHTML = shell(`
+    <div style="padding:14px;max-width:760px;margin:0 auto">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">
+        <h2 style="font-size:18px;font-weight:700;margin:0">📋 ${t('我的跟卖')}</h2>
+        <button class="btn btn-outline btn-sm" onclick="location.hash='#listings'">${t('去找新款 →')}</button>
+      </div>
+      <div id="mine-list">${loading$()}</div>
+    </div>
+  `, 'me')
+  const r = await GET('/listings/mine').catch(() => ({ items: [] }))
+  const items = r?.items || []
+  const list = document.getElementById('mine-list')
+  if (!items.length) {
+    list.innerHTML = `<div style="text-align:center;color:#9ca3af;padding:40px 16px;line-height:1.7">
+      <div style="font-size:48px;margin-bottom:10px">🏬</div>
+      <div>${t('还没有跟卖任何商品')}</div>
+      <a href="#listings" style="display:inline-block;margin-top:14px;color:#4f46e5;font-size:13px">${t('去 listings 板块挑款 →')}</a>
+    </div>`
+    return
+  }
+  list.innerHTML = items.map(it => {
+    const myMin = Number(it.my_min_price || 0)
+    const globalMin = Number(it.global_min_price || 0)
+    const isCheapest = myMin > 0 && globalMin > 0 && Math.abs(myMin - globalMin) < 0.001
+    const diff = myMin > 0 && globalMin > 0 ? myMin - globalMin : 0
+    const positionBadge = isCheapest
+      ? `<span style="background:#dcfce7;color:#166534;font-size:10px;padding:2px 7px;border-radius:99px;font-weight:600">🏆 ${t('全网最低')}</span>`
+      : (diff > 0 ? `<span style="background:#fef3c7;color:#92400e;font-size:10px;padding:2px 7px;border-radius:99px;font-weight:600">+${diff.toFixed(2)} ${t('高于最低')}</span>` : '')
+    const creatorBadge = it.is_creator ? `<span style="background:#ede9fe;color:#5b21b6;font-size:10px;padding:2px 7px;border-radius:99px;font-weight:600;margin-left:4px">${t('我创建')}</span>` : ''
+    return `
+      <div class="card" style="padding:12px;margin-bottom:10px;cursor:pointer" onclick="location.hash='#listings/${it.id}'">
+        <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px">
+          <div style="flex:1;min-width:0">
+            <div style="font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${escHtml(it.title)}${creatorBadge}</div>
+            <div style="font-size:11px;color:#6b7280;margin-top:3px">
+              ${t(LISTING_CATEGORY_NAMES[it.category] || it.category)}
+              ${it.external_id ? ' · ' + escHtml(it.external_id) : ''}
+              · ${t('全网')} ${it.total_offer_count} ${t('个卖家')}
+            </div>
+          </div>
+          ${positionBadge}
+        </div>
+        <div style="display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:8px;border-top:1px solid #f3f4f6">
+          <div style="font-size:11px;color:#6b7280">
+            ${t('我的报价')} <strong style="color:#374151">${window.fmtPrice(myMin)}</strong>
+            <span style="color:#9ca3af">· ${it.my_offer_count} ${t('个规格')}</span>
+          </div>
+          <div style="font-size:11px;color:#6b7280">
+            ${t('全网最低')} <strong style="color:#dc2626">${window.fmtPrice(globalMin)}</strong>
+          </div>
+        </div>
+      </div>
+    `
+  }).join('')
+}
+
+// P2: 排序 chip + urgency selector state（per listing detail view）
+const LISTING_SORT_CHIPS = [
+  { key: 'smart',     emoji: '✨', label: '综合' },
+  { key: 'cheapest',  emoji: '💰', label: '最便宜' },
+  { key: 'fastest',   emoji: '⚡', label: '最快' },
+  { key: 'trusted',   emoji: '🛡', label: '最可靠' },
+  { key: 'nearest',   emoji: '📍', label: '最近' },
+  { key: 'clearance', emoji: '🔥', label: '清仓' },
+]
+const URGENCY_CHIPS = [
+  { key: 'now',   emoji: '⚡', label: '急要' },
+  { key: 'today', emoji: '📅', label: '今天' },
+  { key: 'flex',  emoji: '🌊', label: '宽松' },
+]
+
+async function renderListingDetail(app, id) {
+  // 读取状态（带默认）
+  const urgency = state._listingUrgency || 'flex'
+  const sort = state._listingSort || 'smart'
+
+  app.innerHTML = `<div style="padding:14px;max-width:760px;margin:0 auto" id="lst-detail">${loading$()}</div>`
+  const qs = new URLSearchParams({ urgency, sort })
+  if (state.user?.region) qs.set('buyer_region', state.user.region)
+  const r = await GET('/listings/' + encodeURIComponent(id) + '?' + qs.toString())
+  if (r?.error) { document.getElementById('lst-detail').innerHTML = alert$('error', r.error); return }
+  const l = r.listing
+  const offers = r.offers || []
+  const isSeller = state.user?.role === 'seller'
+  const myId = state.user?.id
+
+  const chipBtn = (chip, active, isUrgency) => `
+    <button onclick="${isUrgency ? `setListingUrgency('${chip.key}','${id}')` : `setListingSort('${chip.key}','${id}')`}"
+      style="display:inline-flex;align-items:center;gap:3px;padding:5px 10px;border-radius:99px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid ${active?'#4f46e5':'#e5e7eb'};background:${active?'#eef2ff':'#fff'};color:${active?'#4338ca':'#6b7280'};white-space:nowrap">
+      ${chip.emoji} ${t(chip.label)}
+    </button>`
+
+  document.getElementById('lst-detail').innerHTML = `
+    <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px">
+      <div style="flex:1">
+        <div style="font-size:11px;color:#9ca3af;margin-bottom:2px">${t(LISTING_CATEGORY_NAMES[l.category] || l.category)}${l.external_id ? ' · ' + escHtml(l.external_id) : ''}</div>
+        <h2 style="font-size:18px;font-weight:700;margin:0 0 4px">${escHtml(l.title)}</h2>
+        ${l.description ? `<div style="font-size:12px;color:#6b7280;margin-top:6px;white-space:pre-wrap">${escHtml(l.description)}</div>` : ''}
+      </div>
+      <button class="btn btn-sm" onclick="location.hash='#listings'" style="background:#f3f4f6">←</button>
+    </div>
+
+    <div style="margin:10px 0">
+      <div style="font-size:11px;color:#6b7280;margin-bottom:4px">${t('紧急程度')}</div>
+      <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px">
+        ${URGENCY_CHIPS.map(c => chipBtn(c, urgency === c.key, true)).join('')}
+      </div>
+      <div style="font-size:11px;color:#6b7280;margin-bottom:4px">${t('排序')}</div>
+      <div style="display:flex;gap:6px;flex-wrap:wrap;overflow-x:auto">
+        ${LISTING_SORT_CHIPS.map(c => chipBtn(c, sort === c.key, false)).join('')}
+      </div>
+    </div>
+
+    <div style="display:flex;justify-content:space-between;align-items:center;margin:14px 0 10px">
+      <div style="font-size:13px;font-weight:600">${offers.length} ${t('个卖家在卖')}</div>
+      <div style="display:flex;gap:6px">
+        ${state.user && state.user.id !== l.created_by ? `<button class="btn btn-sm" style="background:#eef2ff;color:#4338ca;font-size:11px;padding:5px 12px" onclick="openChatForContext('listing_qa','${l.id}','${l.created_by}')">💬 ${t('问商家')}</button>` : ''}
+        ${isSeller ? `<button class="btn btn-primary btn-sm" onclick="location.hash='#listings/${l.id}/follow'">+ ${t('我也卖（跟卖）')}</button>` : ''}
+      </div>
+    </div>
+
+    ${offers.length === 0 ? `<div style="text-align:center;color:#9ca3af;padding:30px 0">${t('暂无卖家')}</div>` : offers.map(o => {
+      const isMine = myId && o.seller_id === myId
+      const isStale = (o.tags || []).includes('stale')
+      const isColdStart = Number(o.cold_start_remaining || 0) > 0
+      return `
+      <div class="card" style="padding:12px;margin-bottom:8px${isStale ? ';border-left:3px solid #f59e0b' : ''}">
+        <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:10px">
+          <div style="flex:1;min-width:0">
+            <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px">
+              ${(o.tags || []).filter(tg => tg !== 'stale').map(tg => {
+                const def = LISTING_TAG_DEFS[tg]
+                return def ? `<span style="display:inline-flex;align-items:center;gap:3px;font-size:10px;background:${def.color}1a;color:${def.color};padding:2px 8px;border-radius:99px;font-weight:600">${def.emoji} ${t(def.label)}</span>` : ''
+              }).join('')}
+              ${isStale ? `<span style="display:inline-flex;align-items:center;gap:3px;font-size:10px;background:#fef3c7;color:#92400e;padding:2px 8px;border-radius:99px;font-weight:600">⚠ ${t('备货')}</span>` : ''}
+              ${isColdStart ? `<span style="display:inline-flex;align-items:center;gap:3px;font-size:10px;background:#e0e7ff;color:#3730a3;padding:2px 8px;border-radius:99px;font-weight:600">❄ ${t('新卖家')}</span>` : ''}
+            </div>
+            <div style="font-size:12px;color:#374151;margin-bottom:3px">@${escHtml(o.seller_handle || o.seller_id.slice(0,8))} · ${o.seller_region ? regionLabel(o.seller_region) : '-'} · ${o.seller_sales || 0} ${t('单成交')}</div>
+            <div style="font-size:11px;color:#6b7280">${t(FULFILLMENT_LABELS[o.fulfillment_type] || o.fulfillment_type)}${o.eta_hours != null ? ' · ETA ' + o.eta_hours + 'h' : ''}</div>
+            ${isMine ? `<div style="margin-top:6px"><button class="btn btn-outline btn-sm" style="padding:3px 8px;font-size:10px;color:#4f46e5;border-color:#c7d2fe" onclick="refreshOfferFreshness('${o.id}','${id}')">🔄 ${t('现货确认')}</button></div>` : ''}
+          </div>
+          <div style="text-align:right">
+            <div style="color:#dc2626;font-weight:700;font-size:16px">${window.fmtPrice(o.price)}</div>
+            <div style="font-size:10px;color:#9ca3af">${t('库存')} ${o.stock}</div>
+            ${state.user?.role === 'buyer' && o.stock > 0 ? `<button class="btn btn-primary btn-sm" style="margin-top:6px;padding:4px 12px;font-size:11px" onclick="location.hash='#order-product/${o.id}'">${t('购买')}</button>` : ''}
+          </div>
+        </div>
+      </div>`
+    }).join('')}
+  `
+}
+
+window.setListingUrgency = (key, id) => { state._listingUrgency = key; renderListingDetail(document.getElementById('app'), id) }
+window.setListingSort    = (key, id) => { state._listingSort = key;    renderListingDetail(document.getElementById('app'), id) }

package/dist/pwa/public/app-prelaunch-waz.js

@@ -0,0 +1,39 @@
+// [PRELAUNCH-WAZ-SIM] 预发布期 escrow 模拟币提醒。预发布期 escrow 用模拟 WAZ(非真钱),
+//   为防买家把测试币当真实价值,做三件事 —— 全部门控在 window._wazSimulated:
+//     1) 支付方式不再默认预选 escrow(app-direct-pay.js: dpRailSelectorHtml 的 checked + dpSelectedRail 兜底)
+//     2) 买家切到 escrow 时内联提醒(wazEscrowRailNote 注入 #dp-rail-block,app-direct-pay.js 无需扩容)
+//     3) 生成的 escrow 订单在买家端订单详情顶部强提醒(wazEscrowOrderBanner,app.js renderOrderDetail 调用)
+//   真实结算上线时:把下面 _wazSimulated 置 false(一处)→ 全部 no-op、escrow 预选行为恢复。
+//   彻底移除:grep '[PRELAUNCH-WAZ-SIM]' / '_wazSimulated'(本文件 + app.js + app-direct-pay.js + index.html
+//     + package.json check:pwa-syntax + .github/workflows/ci.yml + complexity-ratchet-guard.ts + i18n.js)。
+//   UI-only:不碰 wallet/escrow/settlement/订单钱路;纯展示 + 一个"必须显式选 rail"的前端门(后端不变)。
+window._wazSimulated = true
+
+// 内联提醒文案(单一真相,两处复用)。
+const WAZ_SIM_NOTE = () => '⚠️ ' + t('测试模式:WAZ 为模拟货币,不代表真实价值。此为预发布演示,你"托管"的并非真实资金,确认收货后释放的也是测试币。')
+
+// 买家在"支付方式"里选中 Escrow 时的内联提醒。selectedRail = 当前选中的 rail 值('escrow' / 'direct_p2p' / undefined)。
+//   注入到 #dp-rail-block 内,避免扩容 app-direct-pay.js(其已到 LOC 上限)。非模拟期直接 no-op。
+window.wazEscrowRailNote = (selectedRail) => {
+  if (!window._wazSimulated) return
+  const block = document.getElementById('dp-rail-block'); if (!block) return
+  const host = block.querySelector('div') || block
+  let el = document.getElementById('dp-rail-escrow-sim')
+  if (selectedRail !== 'escrow') { if (el) el.style.display = 'none'; return }
+  if (!el) {
+    el = document.createElement('div'); el.id = 'dp-rail-escrow-sim'
+    el.style.cssText = 'margin-top:8px;font-size:11px;line-height:1.6;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:8px 10px'
+    host.appendChild(el)
+  }
+  el.textContent = WAZ_SIM_NOTE()
+  el.style.display = ''
+}
+
+// 生成 escrow 订单后,买家端订单详情顶部的强提醒横幅。非 escrow / 非买家 / 非模拟 → 空串(不渲染)。
+window.wazEscrowOrderBanner = (order, isBuyer) => {
+  if (!window._wazSimulated || !isBuyer || !order || order.payment_rail === 'direct_p2p') return ''
+  return `<div style="border:1px solid #fde68a;background:linear-gradient(135deg,#fffbeb,#fef3c7);border-radius:12px;padding:12px 14px;margin-bottom:10px">
+    <div style="font-size:13px;font-weight:700;color:#92400e;margin-bottom:4px">🧪 ${t('测试托管订单')}</div>
+    <div style="font-size:12px;line-height:1.6;color:#374151">${t('本单为预发布演示:WAZ 是模拟货币,不代表真实价值,本协议尚未进行真实资金结算。请勿据此向任何人支付真实款项。')}</div>
+  </div>`
+}

package/dist/pwa/public/app-price.js

@@ -0,0 +1,55 @@
+// Buyer price display (DISPLAY-ONLY) — render a product price in USDC with a real-time local-currency hint.
+//   fmtPrice(usdc) → a <span data-usdc-price> wrapper whose content is "<amount> USDC" + (when live rates + a
+//     non-USD buyer currency are available) a muted "≈ <local>". USDC is the display/pricing unit (money.ts:
+//     1 WAZ = 1 USDC = 1e6 base-units, USDC-aligned); this NEVER implies WebAZ holds/settles real USDC —
+//     escrow is still simulated WAZ, direct-pay is off-platform.
+//   Local currency is derived from the buyer's account region (no manual picker). Rates come from /api/fx/rates
+//     (cached + fallback server-side). If rates are unavailable the price simply shows USDC — display never breaks.
+//   First-paint race: rates load async; when they arrive, refreshFxPrices() re-renders already-painted price
+//     nodes ([data-usdc-price] / [data-usdc-local]) so the "≈ local" hint appears without a full re-render.
+window._fxRates = null
+window.loadFxRates = async () => {
+  try {
+    const res = await fetch('/api/fx/rates', { signal: AbortSignal.timeout(6000) })
+    if (res.ok) { window._fxRates = await res.json(); window.refreshFxPrices() }
+  } catch { /* leave null → prices show USDC-only */ }
+}
+window.buyerCurrency = () => {
+  const map = { china: 'CNY', us: 'USD', eu: 'EUR', india: 'INR', singapore: 'SGD', global_north: 'USD', global: 'USD' }
+  const region = (window.state && window.state.user && window.state.user.region) || ''
+  return map[String(region).toLowerCase()] || 'USD'
+}
+// usdc amount → localized "≈ ¥X" string, or '' (USD buyer / no rates / unusable rate → show USDC only).
+window._fxLocal = (usdc) => {
+  const r = window._fxRates
+  const cur = window.buyerCurrency()
+  if (!r || !r.rates || cur === 'USD') return ''
+  const rate = Number(r.rates[cur])
+  const n = Number(usdc)
+  if (!(rate > 0) || !Number.isFinite(n)) return ''
+  const local = n * rate
+  const sym = { CNY: '¥', EUR: '€', INR: '₹', SGD: 'S$', USD: '$', IDR: 'Rp', MYR: 'RM', PHP: '₱', VND: '₫', THB: '฿' }[cur] || (cur + ' ')
+  return sym + (local >= 100 ? String(Math.round(local)) : local.toFixed(2))
+}
+// visible price content (no wrapper): "<amount> USDC" + optional muted "≈ local".
+window._fxPriceInner = (usdc) => {
+  const n = Number(usdc)
+  const disp = Number.isFinite(n) ? (Number.isInteger(n) ? String(n) : n.toFixed(2)) : ''
+  const base = disp + ' USDC'
+  const loc = window._fxLocal(usdc)
+  return loc ? base + ` <span style="opacity:.6;font-weight:400;font-size:.85em;white-space:nowrap">≈ ${loc}</span>` : base
+}
+// price (USDC decimal) → display HTML. data-usdc-price lets refreshFxPrices() update it once live rates arrive.
+window.fmtPrice = (usdc) => `<span data-usdc-price="${Number(usdc)}">${window._fxPriceInner(usdc)}</span>`
+// re-render already-painted price nodes after rates load (fixes the first-paint race). Safe no-op if no nodes.
+window.refreshFxPrices = () => {
+  const doc = window.document
+  if (!doc || !doc.querySelectorAll) return
+  doc.querySelectorAll('[data-usdc-price]').forEach((el) => { el.innerHTML = window._fxPriceInner(el.getAttribute('data-usdc-price')) })
+  doc.querySelectorAll('[data-usdc-local]').forEach((el) => {
+    const p = el.getAttribute('data-usdc-local'); const loc = window._fxLocal(p)
+    el.innerHTML = 'USDC' + (loc ? ' ≈ ' + loc : '')
+  })
+}
+// fire-and-forget at load; rates are global (no auth), so they can load before the user object is known.
+window.loadFxRates()

package/dist/pwa/public/app-product-media.js

@@ -0,0 +1,15 @@
+// Shared product-image resolver for cards / lists (paired with the public thumb endpoint).
+//   productThumbSrc(images): a stored image ref → a loadable <img src>. A 64-hex content hash → the public
+//     thumbnail endpoint /api/manifests/<hash>/thumb; an already-usable data:/http(s)/root-relative URL →
+//     passthrough; anything else / empty → '' (no image). `images` may be a JSON-array string, a real array,
+//     or a legacy CSV string. Card <img>s pair this with onerror="this.outerHTML='📦'" for the 404 (missing
+//     thumbnail manifest) fallback, so a bad ref degrades to the icon instead of a broken image.
+window.productThumbSrc = (images) => {
+  let arr = images
+  if (typeof images === 'string') { try { arr = JSON.parse(images) } catch { arr = images.split(',') } }
+  const first = (Array.isArray(arr) ? arr : []).map(s => String(s).trim()).filter(Boolean)[0] || ''
+  if (!first) return ''
+  if (/^[0-9a-f]{64}$/i.test(first)) return '/api/manifests/' + first + '/thumb'
+  if (/^(https?:|data:|\/)/i.test(first)) return first
+  return ''
+}