@cloudparse/up-miniapps-sdk 0.6.4 → 0.6.7

package/dist/index.cjs

@@ -44,6 +44,7 @@ __export(src_exports, {
   MapMenuTitle: () => MapMenuTitle,
   MiniAppSDK: () => MiniAppSDK,
   MockLocationContext: () => MockLocationContext,
+  PullToRefresh: () => PullToRefresh,
   QRScanner: () => QRScanner,
   RouteLayer: () => RouteLayer,
   SDKMapProvider: () => SDKMapProvider,
@@ -266,11 +267,61 @@ var Bridge = class {
     }
   }
   /**
-   * Internal handler for mock message processing, overrideable in test environments
+   * Internal handler for mock message processing, overrideable in test environments.
+   *
+   * Every mini-app that calls a bridge method also has to run standalone in a plain
+   * browser (dev, and this vault's own Chrome-based verification) with no native shell
+   * attached — `isNative()` is false, so `send()` never round-trips through the real
+   * host at all. Before this switch existed, EVERY unhandled type here resolved with
+   * plain `undefined` (see the `default` branch below), which silently broke any caller
+   * checking a result shape like `{success: boolean}` — `undefined?.success` reads as
+   * `false`, not "no answer", so e.g. `sdk.media.saveImage()` looked like a real
+   * permission-denied rejection in the browser instead of "there's no native shell
+   * here to ask." Add a `case` here — instead of leaving every mini-app to
+   * individually special-case "what happens when I call this with no shell attached" —
+   * whenever a bridge method's mock behavior should be more than a no-op.
    */
   handleMockMessage(type, payload) {
-    console.warn(`[Bridge] Mock mode active: Unhandled message type ${type}`);
-    return Promise.resolve();
+    switch (type) {
+      case "SAVE_IMAGE":
+        return this.mockSaveImage(
+          payload
+        );
+      default:
+        console.warn(
+          `[Bridge] Mock mode active: Unhandled message type ${type}`
+        );
+        return Promise.resolve();
+    }
+  }
+  /**
+   * Standalone-browser stand-in for the native `SAVE_IMAGE` handler: triggers a real
+   * browser download (an `<a download>` click) instead of writing to a device photo
+   * library, which doesn't exist here. Resolves `{success: true}` on a real trigger so
+   * every mini-app's own `result?.success` check gets the same shape/semantics as the
+   * real native response — no per-app "am I in mock mode" branching needed. Consumers
+   * can still keep their own `catch` fallback for the genuinely different case of a
+   * native shell that's missing its WebView bridge (see `sendOnce`'s own rejection
+   * path) — that's a real native edge case, not mocking, and this method never runs
+   * for it (`send()` only reaches `handleMockMessage` when `!isNative()`).
+   */
+  mockSaveImage(payload) {
+    if (typeof document === "undefined") {
+      return Promise.resolve({ success: false });
+    }
+    try {
+      const href = payload.base64.startsWith("data:") ? payload.base64 : `data:image/png;base64,${payload.base64}`;
+      const link = document.createElement("a");
+      link.href = href;
+      link.download = payload.filename ? `${payload.filename}.png` : "image.png";
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      return Promise.resolve({ success: true });
+    } catch (err) {
+      console.warn("[Bridge] Mock SAVE_IMAGE download failed:", err);
+      return Promise.resolve({ success: false });
+    }
   }
   sendOnce(type, payload, timeoutMs) {
     return new Promise((resolve, reject) => {
@@ -3375,7 +3426,7 @@ async function generateQrCode(data, options = {}) {
   const size = options.size ?? DEFAULT_SIZE;
   const color = options.color ?? DEFAULT_COLOR;
   const backgroundColor = options.backgroundColor ?? DEFAULT_BACKGROUND;
-  const label = options.label || (options.appName ? `UP - ${options.appName}` : "");
+  const label = options.label || (options.appName ? `${options.appName} by UP` : "");
   const qr = new import_qr_code_styling.default({
     backgroundOptions: {
       color: backgroundColor,
@@ -3714,7 +3765,7 @@ var RoutingService = {
 };
 
 // package.json
-var version = "0.6.4";
+var version = "0.6.7";
 
 // src/sdk.ts
 function deepFreeze(obj) {
@@ -4860,18 +4911,271 @@ var DebugConsole = ({
   ] });
 };
 
-// src/components/QRScanner.tsx
-var import_jsqr2 = __toESM(require("jsqr"), 1);
+// src/components/PullToRefresh.tsx
 var import_react16 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-function QRScanner({ onScan, onError, className = "" }) {
-  const videoRef = (0, import_react16.useRef)(null);
-  const canvasRef = (0, import_react16.useRef)(null);
-  const streamRef = (0, import_react16.useRef)(null);
-  const tickRequestRef = (0, import_react16.useRef)(null);
-  const hasScannedRef = (0, import_react16.useRef)(false);
-  const [isReady, setIsReady] = (0, import_react16.useState)(false);
+var DEFAULT_PULL_THRESHOLD = 64;
+var DEFAULT_MAX_PULL = 96;
+var RESISTANCE = 0.5;
+var DRAG_DEADZONE = 8;
+var FLING_FRICTION = 0.95;
+var FLING_MIN_VELOCITY = 0.02;
+function DefaultIndicator({
+  progress,
+  isRefreshing
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "div",
+    {
+      style: {
+        alignItems: "center",
+        background: "rgba(24, 24, 27, 0.9)",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        borderRadius: 9999,
+        boxShadow: "0 4px 16px -4px rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        height: 28,
+        justifyContent: "center",
+        width: 28
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          "svg",
+          {
+            height: 14,
+            style: {
+              animation: isRefreshing ? "up-sdk-ptr-spin 0.8s linear infinite" : void 0,
+              color: isRefreshing ? "#a78bfa" : "#a1a1aa",
+              transform: isRefreshing ? void 0 : `rotate(${progress * 360}deg)`
+            },
+            viewBox: "0 0 24 24",
+            width: 14,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("title", { children: "Refreshing" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                "path",
+                {
+                  d: "M21 12a9 9 0 1 1-2.64-6.36",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeLinecap: "round",
+                  strokeWidth: 2.5
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("style", { children: "@keyframes up-sdk-ptr-spin { to { transform: rotate(360deg); } }" })
+      ]
+    }
+  );
+}
+var PullToRefresh = ({
+  onRefresh,
+  children,
+  className = "",
+  disabled = false,
+  pullThreshold = DEFAULT_PULL_THRESHOLD,
+  maxPull = DEFAULT_MAX_PULL,
+  renderIndicator
+}) => {
+  const containerRef = (0, import_react16.useRef)(null);
+  const startYRef = (0, import_react16.useRef)(null);
+  const lastYRef = (0, import_react16.useRef)(0);
+  const lastMoveTimeRef = (0, import_react16.useRef)(0);
+  const velocityRef = (0, import_react16.useRef)(0);
+  const pointerIdRef = (0, import_react16.useRef)(null);
+  const isPullingRef = (0, import_react16.useRef)(false);
+  const pullDistanceRef = (0, import_react16.useRef)(0);
+  const flingRafRef = (0, import_react16.useRef)(null);
+  const [pullDistance, setPullDistance] = (0, import_react16.useState)(0);
+  const [isRefreshing, setIsRefreshing] = (0, import_react16.useState)(false);
+  const [isTracking, setIsTracking] = (0, import_react16.useState)(false);
+  const disabledRef = (0, import_react16.useRef)(disabled);
+  disabledRef.current = disabled;
+  const onRefreshRef = (0, import_react16.useRef)(onRefresh);
+  onRefreshRef.current = onRefresh;
+  const pullThresholdRef = (0, import_react16.useRef)(pullThreshold);
+  pullThresholdRef.current = pullThreshold;
+  const maxPullRef = (0, import_react16.useRef)(maxPull);
+  maxPullRef.current = maxPull;
   (0, import_react16.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const updatePullDistance = (value) => {
+      pullDistanceRef.current = value;
+      setPullDistance(value);
+    };
+    const stopFling = () => {
+      if (flingRafRef.current !== null) {
+        cancelAnimationFrame(flingRafRef.current);
+        flingRafRef.current = null;
+      }
+    };
+    const resetTracking = () => {
+      pointerIdRef.current = null;
+      startYRef.current = null;
+      isPullingRef.current = false;
+      setIsTracking(false);
+      updatePullDistance(0);
+    };
+    const runFling = () => {
+      velocityRef.current *= FLING_FRICTION;
+      if (Math.abs(velocityRef.current) < FLING_MIN_VELOCITY) {
+        flingRafRef.current = null;
+        return;
+      }
+      el.scrollTop -= velocityRef.current * 16;
+      if (el.scrollTop <= 0 || el.scrollTop >= el.scrollHeight - el.clientHeight) {
+        flingRafRef.current = null;
+        return;
+      }
+      flingRafRef.current = requestAnimationFrame(runFling);
+    };
+    const handlePointerDown = (e) => {
+      if (disabledRef.current) return;
+      if (pointerIdRef.current !== null) return;
+      stopFling();
+      pointerIdRef.current = e.pointerId;
+      startYRef.current = e.clientY;
+      lastYRef.current = e.clientY;
+      lastMoveTimeRef.current = performance.now();
+      velocityRef.current = 0;
+      isPullingRef.current = false;
+      setIsTracking(true);
+      try {
+        el.setPointerCapture(e.pointerId);
+      } catch {
+      }
+    };
+    const handlePointerMove = (e) => {
+      if (startYRef.current === null || e.pointerId !== pointerIdRef.current) {
+        return;
+      }
+      const totalDelta = e.clientY - startYRef.current;
+      if (!isPullingRef.current && Math.abs(totalDelta) < DRAG_DEADZONE) {
+        return;
+      }
+      const now = performance.now();
+      const stepDelta = e.clientY - lastYRef.current;
+      const dt = Math.max(now - lastMoveTimeRef.current, 1);
+      velocityRef.current = stepDelta / dt;
+      lastYRef.current = e.clientY;
+      lastMoveTimeRef.current = now;
+      if (e.cancelable) e.preventDefault();
+      const atTop = el.scrollTop <= 0;
+      if (atTop && totalDelta > 0) {
+        isPullingRef.current = true;
+        updatePullDistance(
+          Math.min(
+            Math.max(totalDelta - DRAG_DEADZONE, 0) * RESISTANCE,
+            maxPullRef.current
+          )
+        );
+        return;
+      }
+      if (isPullingRef.current) {
+        isPullingRef.current = false;
+        updatePullDistance(0);
+      }
+      el.scrollTop -= stepDelta;
+    };
+    const handlePointerEnd = (e) => {
+      if (startYRef.current === null || e.pointerId !== pointerIdRef.current) {
+        return;
+      }
+      const wasPulling = isPullingRef.current;
+      pointerIdRef.current = null;
+      startYRef.current = null;
+      isPullingRef.current = false;
+      setIsTracking(false);
+      if (!wasPulling) {
+        if (Math.abs(velocityRef.current) > FLING_MIN_VELOCITY) {
+          stopFling();
+          flingRafRef.current = requestAnimationFrame(runFling);
+        }
+        return;
+      }
+      const shouldRefresh = pullDistanceRef.current >= pullThresholdRef.current;
+      if (!shouldRefresh) {
+        updatePullDistance(0);
+        return;
+      }
+      setIsRefreshing(true);
+      updatePullDistance(pullThresholdRef.current);
+      Promise.resolve(onRefreshRef.current()).catch((err) => {
+        console.error("Pull-to-refresh failed:", err);
+      }).finally(() => {
+        setIsRefreshing(false);
+        updatePullDistance(0);
+      });
+    };
+    const handlePointerCancel = (e) => {
+      if (e.pointerId !== pointerIdRef.current) return;
+      stopFling();
+      resetTracking();
+    };
+    el.addEventListener("pointerdown", handlePointerDown);
+    el.addEventListener("pointermove", handlePointerMove, { passive: false });
+    el.addEventListener("pointerup", handlePointerEnd);
+    el.addEventListener("pointercancel", handlePointerCancel);
+    return () => {
+      stopFling();
+      el.removeEventListener("pointerdown", handlePointerDown);
+      el.removeEventListener("pointermove", handlePointerMove);
+      el.removeEventListener("pointerup", handlePointerEnd);
+      el.removeEventListener("pointercancel", handlePointerCancel);
+    };
+  }, []);
+  const indicatorHeight = isRefreshing ? pullThreshold : pullDistance;
+  const progress = Math.min(indicatorHeight / pullThreshold, 1);
+  const isSettling = pullDistance === 0 && !isRefreshing && !isTracking;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "div",
+    {
+      className: `up-sdk-pull-to-refresh ${className}`,
+      ref: containerRef,
+      style: {
+        overflowY: "auto",
+        overscrollBehavior: "none",
+        touchAction: "none"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("style", { children: ".up-sdk-pull-to-refresh::-webkit-scrollbar { display: none; } .up-sdk-pull-to-refresh { scrollbar-width: none; -ms-overflow-style: none; }" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "div",
+          {
+            style: {
+              alignItems: "center",
+              display: "flex",
+              height: indicatorHeight,
+              justifyContent: "center",
+              overflow: "hidden",
+              transition: isSettling ? "height 0.2s ease-out" : "none",
+              userSelect: "none",
+              width: "100%"
+            },
+            children: renderIndicator ? renderIndicator({ isRefreshing, progress }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DefaultIndicator, { isRefreshing, progress })
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+
+// src/components/QRScanner.tsx
+var import_jsqr2 = __toESM(require("jsqr"), 1);
+var import_react17 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function QRScanner({ onScan, onError, className = "" }) {
+  const videoRef = (0, import_react17.useRef)(null);
+  const canvasRef = (0, import_react17.useRef)(null);
+  const streamRef = (0, import_react17.useRef)(null);
+  const tickRequestRef = (0, import_react17.useRef)(null);
+  const hasScannedRef = (0, import_react17.useRef)(false);
+  const [isReady, setIsReady] = (0, import_react17.useState)(false);
+  (0, import_react17.useEffect)(() => {
     let cancelled = false;
     hasScannedRef.current = false;
     const cleanup = () => {
@@ -4954,7 +5258,7 @@ function QRScanner({ onScan, onError, className = "" }) {
       cleanup();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       className,
@@ -4966,7 +5270,7 @@ function QRScanner({ onScan, onError, className = "" }) {
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "video",
           {
             playsInline: true,
@@ -4974,8 +5278,8 @@ function QRScanner({ onScan, onError, className = "" }) {
             style: { height: "100%", objectFit: "cover", width: "100%" }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("canvas", { ref: canvasRef, style: { display: "none" } }),
-        isReady && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("canvas", { ref: canvasRef, style: { display: "none" } }),
+        isReady && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "div",
           {
             style: {
@@ -4996,30 +5300,30 @@ function QRScanner({ onScan, onError, className = "" }) {
 }
 
 // src/components/SDKProvider.tsx
-var import_react17 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var SDKContext = (0, import_react17.createContext)({ isMocked: false });
-var useIsMocked = () => (0, import_react17.useContext)(SDKContext).isMocked;
+var import_react18 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var SDKContext = (0, import_react18.createContext)({ isMocked: false });
+var useIsMocked = () => (0, import_react18.useContext)(SDKContext).isMocked;
 var SDKProvider = ({
   children,
   debug = false,
   ...mockerProps
 }) => {
   const isMocked = typeof window !== "undefined" && !(window.__UP_REACT_NATIVE_APP__ === true || !!window.ReactNativeWebView);
-  const value = (0, import_react17.useMemo)(() => ({ isMocked }), [isMocked]);
-  const content = /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+  const value = (0, import_react18.useMemo)(() => ({ isMocked }), [isMocked]);
+  const content = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     children,
-    (debug || isMocked) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DebugConsole, {})
+    (debug || isMocked) && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DebugConsole, {})
   ] });
   if (isMocked) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SDKContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BridgeMocker, { ...mockerProps, children: content }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SDKContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BridgeMocker, { ...mockerProps, children: content }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SDKContext.Provider, { value, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SDKContext.Provider, { value, children: content });
 };
 
 // src/components/SwipeCarousel.tsx
-var import_react18 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var DIRECTION_LOCK_THRESHOLD_PX = 8;
 var SWIPE_DISTANCE_THRESHOLD_PX = 40;
 var SWIPE_VELOCITY_THRESHOLD = 0.4;
@@ -5046,28 +5350,28 @@ var SwipeCarousel = ({
   overscan = DEFAULT_OVERSCAN,
   visibleOverscan = DEFAULT_VISIBLE_OVERSCAN
 }) => {
-  const containerRef = (0, import_react18.useRef)(null);
-  const [containerWidth, setContainerWidth] = (0, import_react18.useState)(0);
-  const [dragX, setDragX] = (0, import_react18.useState)(0);
-  const [dragY, setDragY] = (0, import_react18.useState)(0);
-  const [isDraggingX, setIsDraggingX] = (0, import_react18.useState)(false);
-  const [isDraggingY, setIsDraggingY] = (0, import_react18.useState)(false);
-  const touchStateRef = (0, import_react18.useRef)(null);
-  const [internalIndex, setInternalIndex] = (0, import_react18.useState)(
+  const containerRef = (0, import_react19.useRef)(null);
+  const [containerWidth, setContainerWidth] = (0, import_react19.useState)(0);
+  const [dragX, setDragX] = (0, import_react19.useState)(0);
+  const [dragY, setDragY] = (0, import_react19.useState)(0);
+  const [isDraggingX, setIsDraggingX] = (0, import_react19.useState)(false);
+  const [isDraggingY, setIsDraggingY] = (0, import_react19.useState)(false);
+  const touchStateRef = (0, import_react19.useRef)(null);
+  const [internalIndex, setInternalIndex] = (0, import_react19.useState)(
     () => Math.max(
       0,
       items.findIndex((item) => item.id === activeId)
     )
   );
-  const prevActiveIdRef = (0, import_react18.useRef)(activeId);
-  const [timingWaiting, setTimingWaiting] = (0, import_react18.useState)(true);
-  (0, import_react18.useEffect)(() => {
+  const prevActiveIdRef = (0, import_react19.useRef)(activeId);
+  const [timingWaiting, setTimingWaiting] = (0, import_react19.useState)(true);
+  (0, import_react19.useEffect)(() => {
     const timer = setTimeout(() => {
       setTimingWaiting(false);
     }, 1e3);
     return () => clearTimeout(timer);
   }, []);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (activeId !== prevActiveIdRef.current) {
       const idx = items.findIndex((item) => item.id === activeId);
       if (idx !== -1) setInternalIndex(idx);
@@ -5078,7 +5382,7 @@ var SwipeCarousel = ({
     Math.max(internalIndex, 0),
     Math.max(items.length - 1, 0)
   );
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react19.useLayoutEffect)(() => {
     const el = containerRef.current;
     if (!el) return;
     const update = () => setContainerWidth(el.clientWidth);
@@ -5196,7 +5500,7 @@ var SwipeCarousel = ({
   };
   const windowStart = Math.max(0, activeIndex - overscan);
   const windowEnd = Math.min(items.length - 1, activeIndex + overscan);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
       className: `relative overflow-hidden touch-pan-y ${className ?? ""}`,
@@ -5205,7 +5509,7 @@ var SwipeCarousel = ({
       onTouchMove: handleTouchMove,
       onTouchStart: handleTouchStart,
       ref: containerRef,
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "div",
         {
           className: "relative h-full",
@@ -5220,7 +5524,7 @@ var SwipeCarousel = ({
             const verticalOffset = isActive ? dragY : 0;
             const distance = Math.abs(index - activeIndex);
             const isVisible = distance <= visibleOverscan;
-            return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "div",
               {
                 className: `absolute top-0 left-0 h-full shrink-0 ${itemClassName ?? ""} ${item.className ?? ""}`,
@@ -5561,6 +5865,7 @@ var src_default = sdk;
   MapMenuTitle,
   MiniAppSDK,
   MockLocationContext,
+  PullToRefresh,
   QRScanner,
   RouteLayer,
   SDKMapProvider,