@sellwild/react-native-sdk 1.0.0

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@sellwild/react-native-sdk",
+  "version": "1.0.0",
+  "description": "Sellwild mobile advertising SDK for React Native",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "android",
+    "ios"
+  ],
+  "keywords": [
+    "react-native",
+    "advertising",
+    "ads",
+    "sellwild",
+    "marketplace",
+    "widget"
+  ],
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-native": ">=0.70.0",
+    "react-native-webview": ">=11.0.0"
+  },
+  "dependencies": {
+    "@sellwild/sdk-core": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-native": "^0.72.0",
+    "typescript": "^5.7.3"
+  }
+}

package/src/SellwildBanner.tsx

@@ -0,0 +1,74 @@
+import React, { useCallback, useState } from 'react'
+import { View, StyleSheet, ViewStyle } from 'react-native'
+import { WebView } from 'react-native-webview'
+import type { WebViewMessageEvent } from 'react-native-webview'
+import type { SellwildConfig, AdSize } from '@sellwild/sdk-core'
+import { WIDGET_BASE_URL } from '@sellwild/sdk-core'
+import { buildBannerHtml } from './htmlBuilder'
+
+// Standard IAB mobile ad sizes
+const AD_DIMENSIONS: Record<AdSize, { width: number; height: number }> = {
+  '300x250': { width: 300, height: 250 },
+  '320x50': { width: 320, height: 50 },
+  '728x90': { width: 728, height: 90 },
+  '160x600': { width: 160, height: 600 },
+  '300x600': { width: 300, height: 600 },
+  '1x1': { width: 1, height: 1 },
+}
+
+export interface SellwildBannerProps {
+  config: SellwildConfig
+  size: AdSize
+  zoneId: number | string
+  style?: ViewStyle
+  onImpression?: () => void
+  onClick?: () => void
+  onError?: (error: Error) => void
+}
+
+export function SellwildBanner({
+  config,
+  size,
+  zoneId,
+  style,
+  onImpression,
+  onClick,
+  onError,
+}: SellwildBannerProps) {
+  const dimensions = AD_DIMENSIONS[size]
+  const html = buildBannerHtml(config, zoneId, size)
+
+  const handleMessage = useCallback(
+    (event: WebViewMessageEvent) => {
+      try {
+        const msg = JSON.parse(event.nativeEvent.data)
+        if (msg.type === 'AD_IMPRESSION') onImpression?.()
+        if (msg.type === 'AD_CLICK') onClick?.()
+      } catch {
+        // ignore
+      }
+    },
+    [onImpression, onClick]
+  )
+
+  return (
+    <View style={[{ width: dimensions.width, height: dimensions.height }, style]}>
+      <WebView
+        source={{ html, baseUrl: WIDGET_BASE_URL }}
+        style={StyleSheet.absoluteFill}
+        onMessage={handleMessage}
+        javaScriptEnabled
+        domStorageEnabled
+        thirdPartyCookiesEnabled
+        scrollEnabled={false}
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+        mixedContentMode="compatibility"
+        originWhitelist={['*']}
+        onError={syntheticEvent => {
+          onError?.(new Error(syntheticEvent.nativeEvent.description))
+        }}
+      />
+    </View>
+  )
+}

package/src/SellwildListingCard.tsx

@@ -0,0 +1,133 @@
+import React from 'react'
+import {
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native'
+import type { SellwildListing, SellwildConfig } from '@sellwild/sdk-core'
+import { currencyToSymbol } from '@sellwild/sdk-core'
+
+export interface SellwildListingCardProps {
+  listing: SellwildListing
+  config: SellwildConfig
+  onPress?: (listing: SellwildListing) => void
+  style?: ViewStyle
+}
+
+export function SellwildListingCard({
+  listing,
+  config,
+  onPress,
+  style,
+}: SellwildListingCardProps) {
+  const photo = listing.photos?.[0]
+  const price = listing.price && !isNaN(Number(listing.price))
+    ? Number(listing.price).toLocaleString(undefined, { maximumFractionDigits: 0 })
+    : null
+  const strikePrice = listing.strikePrice && !isNaN(Number(listing.strikePrice))
+    ? Number(listing.strikePrice).toLocaleString(undefined, { maximumFractionDigits: 0 })
+    : null
+  const currencySymbol = currencyToSymbol(listing.currency)
+  const title = listing.title?.length > 60
+    ? listing.title.slice(0, 60) + '...'
+    : listing.title
+
+  return (
+    <TouchableOpacity
+      style={[styles.card, style]}
+      onPress={() => onPress?.(listing)}
+      activeOpacity={0.85}
+      accessible
+      accessibilityLabel={title}
+      accessibilityRole="button"
+    >
+      {photo?.url ? (
+        <Image
+          source={{ uri: photo.url }}
+          style={styles.image}
+          resizeMode="cover"
+          accessibilityLabel={title}
+        />
+      ) : (
+        <View style={[styles.image, styles.imagePlaceholder]} />
+      )}
+
+      <View style={styles.overlay}>
+        {price && price !== '0' && (
+          <View style={[styles.priceBadge, { backgroundColor: config.priceColor || config.colors?.[0] || '#333' }]}>
+            {strikePrice && strikePrice !== price && (
+              <Text style={[styles.strikePrice, { color: config.priceFontColor || config.fontColor }]}>
+                {currencySymbol}{strikePrice}
+              </Text>
+            )}
+            <Text style={[styles.price, { color: config.priceFontColor || config.fontColor }]}>
+              {currencySymbol}{price}
+            </Text>
+          </View>
+        )}
+      </View>
+
+      <View style={styles.footer}>
+        <Text style={[styles.title, { fontSize: config.fontSize, color: '#222' }]} numberOfLines={2}>
+          {title}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    width: 160,
+    borderRadius: 8,
+    overflow: 'hidden',
+    backgroundColor: '#fff',
+    elevation: 2,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    marginBottom: 10,
+  },
+  image: {
+    width: '100%',
+    height: 160,
+  },
+  imagePlaceholder: {
+    backgroundColor: '#e0e0e0',
+  },
+  overlay: {
+    position: 'absolute',
+    bottom: 36,
+    right: 0,
+  },
+  priceBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderTopLeftRadius: 4,
+    borderBottomLeftRadius: 4,
+  },
+  price: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  strikePrice: {
+    fontSize: 11,
+    textDecorationLine: 'line-through',
+    marginRight: 4,
+    opacity: 0.7,
+  },
+  footer: {
+    padding: 8,
+    minHeight: 36,
+  },
+  title: {
+    fontWeight: '400',
+    lineHeight: 18,
+  },
+})

package/src/SellwildWidget.tsx

@@ -0,0 +1,145 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  View,
+  StyleSheet,
+  ActivityIndicator,
+  ViewStyle,
+} from 'react-native'
+import { WebView } from 'react-native-webview'
+import type { WebViewMessageEvent } from 'react-native-webview'
+import type { SellwildConfig, SellwildListing } from '@sellwild/sdk-core'
+import { buildConfig, WIDGET_BASE_URL } from '@sellwild/sdk-core'
+import type { PartialSellwildConfig } from '@sellwild/sdk-core'
+import { buildWidgetHtml } from './htmlBuilder'
+
+export interface SellwildWidgetProps {
+  config: PartialSellwildConfig
+  style?: ViewStyle
+  onListingPress?: (listing: SellwildListing) => void
+  onAdImpression?: (zoneId: string | number) => void
+  onError?: (error: Error) => void
+  onLoad?: () => void
+}
+
+// The web widget intercepts window.open() and sends the listing URL.
+// A full SellwildListing object is not available from the WebView boundary —
+// the listing field will be absent; url contains the Sellwild product page URL.
+type WebViewMessage =
+  | { type: 'LISTING_CLICK'; listing?: SellwildListing; url?: string }
+  | { type: 'AD_IMPRESSION'; zoneId: string | number }
+  | { type: 'WIDGET_LOADED' }
+  | { type: 'ERROR'; message: string }
+
+export function SellwildWidget({
+  config: configProp,
+  style,
+  onListingPress,
+  onAdImpression,
+  onError,
+  onLoad,
+}: SellwildWidgetProps) {
+  // Memoize so that parent re-renders don't change `source.html`, which
+  // would force react-native-webview to reload and lose ad session state.
+  const config = useMemo(() => buildConfig(configProp), [
+    configProp.partnerCode,
+    configProp.listingsUrl,
+    configProp.gamTag,
+    configProp.gptProxyUrl,
+    configProp.bannerZid,
+    configProp.debug,
+  ])
+  const [loading, setLoading] = useState(true)
+  const webViewRef = useRef<WebView>(null)
+
+  const html = useMemo(() => buildWidgetHtml(config), [config])
+
+  const handleMessage = useCallback(
+    (event: WebViewMessageEvent) => {
+      try {
+        const msg: WebViewMessage = JSON.parse(event.nativeEvent.data)
+        switch (msg.type) {
+          case 'LISTING_CLICK':
+            // The web widget sends a URL via window.open() interception.
+            // A full listing object is not available at the WebView boundary.
+            // Pass the listing if somehow present (future compatibility),
+            // otherwise construct a minimal stub so callers can navigate.
+            if (msg.listing) {
+              onListingPress?.(msg.listing)
+            } else if (msg.url && onListingPress) {
+              const stub: SellwildListing = {
+                id: '', status: 'active', title: '',
+                text: '', url: msg.url, categoryId: '', categoryGroupId: '',
+                currency: 'USD', price: '', strikePrice: '',
+                has_photo: false, photo_count: 0, photos: [],
+                createdDate: '', videoUrl: '', shippable: '',
+                listingType: '', dataSourceId: '',
+                user: { id: '', firstName: '', lastName: '', username: '',
+                        membershipType: '', trustLevel: '', has_photo: '',
+                        photos: [], isPhoneVerified: false },
+              }
+              onListingPress(stub)
+            }
+            break
+          case 'AD_IMPRESSION':
+            onAdImpression?.(msg.zoneId)
+            break
+          case 'WIDGET_LOADED':
+            setLoading(false)
+            onLoad?.()
+            break
+          case 'ERROR':
+            onError?.(new Error(msg.message))
+            break
+        }
+      } catch {
+        // Non-SDK message, ignore
+      }
+    },
+    [onListingPress, onAdImpression, onError, onLoad]
+  )
+
+  return (
+    <View style={[styles.container, style]}>
+      {loading && (
+        <View style={styles.loader}>
+          <ActivityIndicator size="large" />
+        </View>
+      )}
+      <WebView
+        ref={webViewRef}
+        source={{ html, baseUrl: 'https://widget.sellwild.com/' }}
+        style={styles.webView}
+        onMessage={handleMessage}
+        javaScriptEnabled
+        domStorageEnabled
+        thirdPartyCookiesEnabled
+        allowsInlineMediaPlayback
+        mediaPlaybackRequiresUserAction={false}
+        mixedContentMode="compatibility"
+        originWhitelist={['*']}
+        onError={syntheticEvent => {
+          const { nativeEvent } = syntheticEvent
+          onError?.(new Error(nativeEvent.description))
+        }}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    minHeight: 300,
+  },
+  webView: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+  loader: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+    zIndex: 1,
+  },
+})

package/src/htmlBuilder.ts

@@ -0,0 +1,352 @@
+import type { SellwildConfig, AdSize } from '@sellwild/sdk-core'
+
+const WIDGET_CDN = 'https://widget.sellwild.com'
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Prebid.js WebView pre-configuration
+//
+// This script runs BEFORE prebid.js loads by enqueuing via pbjs.que.
+// It addresses two critical WebView issues:
+//
+// 1. ortb2.app — Prebid.js running in a native WebView must declare itself as
+//    in-app inventory (OpenRTB app object) rather than web (site object).
+//    Without this, bid requests look like browser traffic; DSPs that buy app
+//    inventory separately will not bid, and app-ads.txt enforcement is bypassed.
+//
+// 2. userSync iframe filtering — Third-party cookies are blocked in all native
+//    WebViews (WKWebView, Android WebView). Iframe-based cookie syncs will
+//    always fail silently, wasting network requests and adding latency. Image
+//    pixel syncs may still work for some bidders. A longer syncDelay gives the
+//    auction time to complete before sync requests compete for bandwidth.
+// ─────────────────────────────────────────────────────────────────────────────
+function buildPrebidPreConfigScript(config: SellwildConfig): string {
+  const ortb2App: Record<string, unknown> = {
+    publisher: { id: config.partnerCode },
+  }
+  if (config.appBundleId) ortb2App['bundle'] = config.appBundleId
+  if (config.appStoreUrl) ortb2App['storeurl'] = config.appStoreUrl
+
+  // GDPR / privacy signals — PBS defaults to gdpr=1 (GDPR applies) and
+  // blocks all bidder calls if no consent string is present. The SDK must
+  // explicitly declare the user's jurisdiction so the server knows whether
+  // to enforce consent. The host app provides gdprApplies and tcString
+  // via SellwildConfig; default is gdpr=0 (US traffic, not subject).
+  const ortb2Regs: Record<string, unknown> = {
+    ext: { gdpr: (config as any).gdprApplies ? 1 : 0 },
+  }
+  const ortb2User: Record<string, unknown> = {}
+  if ((config as any).gdprApplies && (config as any).tcString) {
+    ortb2User['ext'] = { consent: (config as any).tcString }
+  }
+
+  let s2sConfigBlock = ''
+  if (config.prebidServer) {
+    const ps = config.prebidServer
+    const s2s = {
+      accountId: ps.accountId,
+      bidders: ps.bidders,
+      timeout: ps.timeout ?? 1500,
+      adapter: 'prebidServer',
+      endpoint: { p1Consent: ps.endpoint, noP1Consent: ps.endpoint },
+      ...(ps.syncEndpoint
+        ? { syncEndpoint: { p1Consent: ps.syncEndpoint, noP1Consent: ps.syncEndpoint } }
+        : {}),
+    }
+    s2sConfigBlock = `,
+        // Route all Prebid bidder calls through Prebid Server (S2S mode).
+        // Solves cookie/IDFA limitations — the auction runs server-to-server.
+        s2sConfig: ${JSON.stringify(s2s)}`
+  }
+
+  return `
+  <script>
+    // Prebid.js WebView pre-configuration — runs before prebid.js initialises.
+    window.pbjs = window.pbjs || {};
+    window.pbjs.que = window.pbjs.que || [];
+    window.pbjs.que.push(function() {
+      window.pbjs.setConfig({
+        // Declare in-app inventory so DSPs bid on app traffic, not web traffic.
+        // Include regs.ext.gdpr so PBS knows whether to enforce consent.
+        ortb2: {
+          app: ${JSON.stringify(ortb2App)},
+          regs: ${JSON.stringify(ortb2Regs)}${Object.keys(ortb2User).length ? `,
+          user: ${JSON.stringify(ortb2User)}` : ''}
+        },
+        // Iframe cookie syncs always fail in WebViews — disable them.
+        // Image pixel syncs may still work for some bidders.
+        userSync: {
+          filterSettings: {
+            iframe: { bidders: '*', filter: 'exclude' }
+          },
+          syncDelay: 5000
+        }${s2sConfigBlock}${config.debug ? `,
+        // debug mode
+        debug: true` : ''}
+      });
+    });
+  </script>`
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Config → element attributes
+//
+// The sellwild-widget reads configuration from HTML element attributes via
+// withCustomizationsFromElement() in src/providers/Customizations/index.ts.
+// Attribute names can be in any case (kebab-case, camelCase, CONSTANT_CASE).
+// Complex objects are JSON-stringified; arrays are comma-separated.
+// ─────────────────────────────────────────────────────────────────────────────
+function configToAttributes(config: SellwildConfig): string {
+  const parts: string[] = []
+
+  const add = (name: string, value: unknown) => {
+    if (value === undefined || value === null || value === '' || value === false || value === 0) return
+    if (typeof value === 'object') {
+      parts.push(`${name}='${JSON.stringify(value).replace(/'/g, '&#39;')}'`)
+    } else {
+      parts.push(`${name}="${String(value)}"`)
+    }
+  }
+
+  // Identity / listings
+  add('partner-code', config.partnerCode)
+  add('listings', config.listingsUrl)
+
+  // Disable remote customization fetch — the widget defaults to fetching
+  // https://widget.sellwild.com/{partnerCode}/{slug}.json which (a) doesn't
+  // exist for SDK consumers and (b) is unnecessary because the SDK supplies
+  // every customization via element attributes already.
+  parts.push('customize="false"')
+
+  // Ad system selection — REQUIRED. AdStack.initializeAdStack() switches on
+  // theme.adType and silently does nothing if it's unset, meaning Prebid never
+  // loads and no auctions ever run. PrebidOnly is the dominant value across
+  // production publisher widgets. Override via config.adType if needed.
+  add('ad-type', (config as any).adType || 'PrebidOnly')
+
+  // Display
+  add('title', config.title)
+  add('link-text', config.linkText)
+  add('buy-now-text', config.buyNowText)
+  add('title-color', config.titleColor)
+  add('title-size', config.titleSize)
+  add('link-color', config.linkColor)
+  add('link-size', config.linkSize)
+  add('font-size', config.fontSize)
+  add('font-family', config.fontFamily)
+  add('font-color', config.fontColor)
+  add('price-color', config.priceColor)
+  add('price-font-color', config.priceFontColor)
+  add('margin-bottom', config.marginBottom)
+  add('card-width', config.cardWidth)
+  add('card-height', config.cardHeight)
+  add('colors', config.colors?.join(','))
+  add('watermark', config.watermark || undefined)
+  add('watermark-title', config.watermarkTitle)
+  add('overlay-title', config.overlayTitle || undefined)
+  add('css', config.css)
+
+  // Ads – display
+  add('gam-tag', config.gamTag)
+  add('gam-tag-desc', config.gamTagDesc)
+  add('banner-zid', config.bannerZid)
+  add('bottom-banner-zid', config.bottomBannerZid)
+  add('mobile-banner-zid', config.mobileBannerZid)
+  // Filter empties before joining — the widget's parser splits on ',' and
+  // does not strip empty strings, so a stray comma yields [""] not [].
+  add('mobile-zid', config.mobileZids?.filter(Boolean).join(','))
+  add('display-zid', config.displayZids?.filter(Boolean).join(','))
+  add('skyscraper-zid', config.skyscraperZid)
+  add('hide-banner-top', config.hideBannerTop || undefined)
+  add('hide-banner-bottom', config.hideBannerBottom || undefined)
+  add('gpt-proxy-url', config.gptProxyUrl)
+  add('disable-gpt', config.disableGpt || undefined)
+  add('ad-disable-display', config.adDisableDisplay || undefined)
+  add('safe-frame', config.safeFrame || undefined)
+
+  // Ads – refresh
+  add('ad-refresh-max', config.adRefreshMax)
+  add('ad-refresh-max-mobile', config.adRefreshMaxMobile)
+  add('ad-refresh-interval', config.adRefreshInterval)
+  add('max-failed-auctions', config.maxFailedAuctions)
+  add('prebid-src', config.prebidSrc)
+  add('prebid-defer', config.prebidDefer)
+  add('floor-multiplier', config.floorMultiplier !== 1 ? config.floorMultiplier : undefined)
+
+  // Ads – geo
+  add('ad-geo-block', config.adGeoBlock)
+  add('ad-geo-block-refresh', config.adGeoBlockRefresh)
+
+  // Ads – compliance
+  add('gpp-enabled', config.gppEnabled || undefined)
+  add('tcf-version', config.tcfVersion)
+  add('consent-management', config.consentManagement)
+  add('schain-sid', config.schainSid)
+  add('s2s-config', config.s2sConfig)
+  add('iab-cats', config.iabCats?.join(','))
+
+  // Bidders (serialized as JSON — parseValue() in the widget will JSON.parse these)
+  add('ix', config.ix)
+  add('openx', config.openx)
+  add('pubmatic', config.pubmatic)
+  add('appnexus', config.appnexus)
+  add('rubicon', config.rubicon)
+  add('apstag', config.apstag)
+
+  // Waterfall
+  add('pub-ventures', config.pubVentures)
+  add('saambaa', config.saambaa)
+  add('opsco', config.opsco)
+  add('bidstream', config.bidstream)
+
+  // Third-party
+  add('boltive', config.boltive || undefined)
+  add('boltive-client-id', config.boltiveClientId)
+  add('lotame', config.lotame || undefined)
+  add('growthcode', config.growthcode)
+  add('bh-tag', config.bhTag)
+
+  // Debug
+  add('debug', config.debug || undefined)
+  add('membership-type', config.membershipType)
+
+  return parts.join('\n    ')
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Widget HTML builder
+//
+// The widget JS URL can be:
+//   - A publisher-specific bundle: https://widget.sellwild.com/{CODE}/{SLUG}.js
+//     (config already baked in at build time; element attributes are optional)
+//   - The generic bundle: https://widget.sellwild.com/partner.js
+//     (reads all config from element attributes — SDK default)
+//
+// Pass widgetJsUrl in config to override the default generic bundle.
+// ─────────────────────────────────────────────────────────────────────────────
+export function buildWidgetHtml(config: SellwildConfig & { widgetJsUrl?: string }): string {
+  // partner.js is the canonical generic widget bundle. It loads its own Prebid
+  // build internally (from cache.sellwild.com), so the SDK MUST NOT inject a
+  // separate prebid <script> tag — doing so causes a double-load and breaks
+  // header bidding initialization order.
+  const widgetSrc = config.widgetJsUrl ?? `${WIDGET_CDN}/partner.js`
+  const attrs = configToAttributes(config)
+
+  const prebidPreConfig = buildPrebidPreConfigScript(config)
+
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { width: 100%; background: transparent; overflow-x: hidden; }
+  </style>
+  ${prebidPreConfig}
+</head>
+<body>
+  <sellwild-widget
+    ${attrs}
+  ></sellwild-widget>
+
+  <script>
+    (function() {
+      function send(type, payload) {
+        try {
+          window.ReactNativeWebView.postMessage(JSON.stringify(Object.assign({ type: type }, payload || {})));
+        } catch(e) {}
+      }
+
+      // partner/index.tsx calls window.open() on listing tap — intercept it
+      var _open = window.open;
+      window.open = function(url) {
+        if (url && (url.indexOf('itemDetail') !== -1 || url.indexOf('sellwild.com') !== -1)) {
+          send('LISTING_CLICK', { url: url });
+          return null;
+        }
+        return _open.apply(window, arguments);
+      };
+
+      document.addEventListener('DOMContentLoaded', function() {
+        setTimeout(function() { send('WIDGET_LOADED'); }, 600);
+      });
+
+      window.addEventListener('error', function(e) {
+        send('ERROR', { message: e.message || 'Widget load error' });
+      });
+    })();
+  </script>
+
+  <script async src="${widgetSrc}"></script>
+</body>
+</html>`
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Banner HTML builder
+// ─────────────────────────────────────────────────────────────────────────────
+export function buildBannerHtml(
+  config: SellwildConfig,
+  zoneId: number | string,
+  size: AdSize
+): string {
+  const [width, height] = size.split('x').map(Number)
+  const gptSrc = config.gptProxyUrl
+    ? `${config.gptProxyUrl}/tag/js/gpt.js`
+    : 'https://securepubads.g.doubleclick.net/tag/js/gpt.js'
+
+  const adScript = config.gamTag && !config.disableGpt
+    ? buildGptScript(config.gamTag, gptSrc, width, height)
+    : buildZoneScript(String(zoneId), width, height)
+
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { width: ${width}px; height: ${height}px; overflow: hidden; background: transparent; }
+    #ad { width: ${width}px; height: ${height}px; }
+  </style>
+</head>
+<body>
+  <div id="ad"></div>
+  <script>
+    function notify(type) {
+      try { window.ReactNativeWebView.postMessage(JSON.stringify({ type: type })); } catch(e) {}
+    }
+    ${adScript}
+  </script>
+</body>
+</html>`
+}
+
+function buildGptScript(gamTag: string, gptSrc: string, w: number, h: number): string {
+  return `
+    window.googletag = window.googletag || { cmd: [] };
+    var s = document.createElement('script');
+    s.src = '${gptSrc}'; s.async = true;
+    document.head.appendChild(s);
+    googletag.cmd.push(function() {
+      var slot = googletag.defineSlot('${gamTag}', [${w}, ${h}], 'ad');
+      if (slot) {
+        slot.addService(googletag.pubads());
+        googletag.pubads().enableSingleRequest();
+        googletag.pubads().addEventListener('slotRenderEnded', function(e) {
+          if (!e.isEmpty) notify('AD_IMPRESSION');
+        });
+        googletag.enableServices();
+        googletag.display('ad');
+      }
+    });`
+}
+
+function buildZoneScript(zoneId: string, w: number, h: number): string {
+  return `
+    var s = document.createElement('script');
+    s.src = 'https://bidstream.sellwild.com/ads?zone=${zoneId}&w=${w}&h=${h}';
+    s.async = true;
+    s.onload = function() { notify('AD_IMPRESSION'); };
+    document.getElementById('ad').appendChild(s);`
+}

package/src/index.ts

@@ -0,0 +1,24 @@
+export { SellwildWidget } from './SellwildWidget'
+export type { SellwildWidgetProps } from './SellwildWidget'
+
+export { SellwildBanner } from './SellwildBanner'
+export type { SellwildBannerProps } from './SellwildBanner'
+
+export { SellwildListingCard } from './SellwildListingCard'
+export type { SellwildListingCardProps } from './SellwildListingCard'
+
+export { useSellwildListings } from './useSellwildListings'
+export type { UseSellwildListingsResult } from './useSellwildListings'
+
+// Re-export core types for convenience
+export type {
+  SellwildConfig,
+  PartialSellwildConfig,
+  SellwildListing,
+  SellwildPhoto,
+  AdSize,
+  AdPlacement,
+  AdPlacementType,
+} from '@sellwild/sdk-core'
+
+export { buildConfig, currencyToSymbol } from '@sellwild/sdk-core'

package/src/useSellwildListings.ts

@@ -0,0 +1,54 @@
+import { useState, useEffect, useCallback } from 'react'
+import type { SellwildConfig, SellwildListing, SellwildListingsResponse } from '@sellwild/sdk-core'
+import { fetchListings, clearListingCache } from '@sellwild/sdk-core'
+
+export interface UseSellwildListingsResult {
+  listings: SellwildListing[]
+  config: Record<string, unknown>
+  loading: boolean
+  error: Error | null
+  refresh: () => void
+}
+
+export function useSellwildListings(sdkConfig: SellwildConfig): UseSellwildListingsResult {
+  const [listings, setListings] = useState<SellwildListing[]>([])
+  const [config, setConfig] = useState<Record<string, unknown>>({})
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+  const [refreshKey, setRefreshKey] = useState(0)
+
+  const refresh = useCallback(() => setRefreshKey(k => k + 1), [])
+
+  useEffect(() => {
+    let cancelled = false
+    const controller = new AbortController()
+
+    setLoading(true)
+    setError(null)
+
+    // Clear cache so refresh actually re-fetches from the network
+    if (refreshKey > 0) clearListingCache()
+
+    fetchListings(sdkConfig, { signal: controller.signal })
+      .then((result: SellwildListingsResponse) => {
+        if (cancelled) return
+        setListings(result.listings)
+        setConfig(result.config)
+      })
+      .catch((err: Error) => {
+        if (cancelled) return
+        if (err.name === 'AbortError') return
+        setError(err)
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+
+    return () => {
+      cancelled = true
+      controller.abort()
+    }
+  }, [sdkConfig.listingsUrl, refreshKey])
+
+  return { listings, config, loading, error, refresh }
+}