@meetreeve/capacitor-bridge 0.1.0

package/dist/react/index.js

@@ -0,0 +1,483 @@
+// src/react/CapacitorProvider.tsx
+import * as React from "react";
+
+// src/core/platform.ts
+function getCapacitor() {
+  if (typeof window === "undefined") return null;
+  const cap = window.Capacitor;
+  if (!cap || typeof cap.isNativePlatform !== "function") return null;
+  return cap;
+}
+function getPlatform() {
+  const cap = getCapacitor();
+  if (!cap) return "web";
+  const p = cap.getPlatform();
+  return p === "ios" ? "ios" : p === "android" ? "android" : "web";
+}
+function isNativePlatform() {
+  return getPlatform() !== "web";
+}
+
+// src/core/safe-area.ts
+var ZERO = { top: 0, right: 0, bottom: 0, left: 0 };
+function getSafeAreaInsets() {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return ZERO;
+  }
+  const root = document.documentElement;
+  const styles = window.getComputedStyle(root);
+  const read = (side) => {
+    const v = styles.getPropertyValue(`--safe-area-inset-${side}`).trim();
+    const n = parseFloat(v);
+    return Number.isFinite(n) ? n : 0;
+  };
+  return {
+    top: read("top"),
+    right: read("right"),
+    bottom: read("bottom"),
+    left: read("left")
+  };
+}
+function installSafeAreaVars() {
+  if (typeof document === "undefined") return;
+  const TAG = "reeve-capacitor-bridge-safe-area";
+  if (document.querySelector(`style[data-${TAG}]`)) return;
+  const style = document.createElement("style");
+  style.setAttribute(`data-${TAG}`, "1");
+  style.textContent = `
+    :root {
+      --safe-area-inset-top: env(safe-area-inset-top, 0px);
+      --safe-area-inset-right: env(safe-area-inset-right, 0px);
+      --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
+      --safe-area-inset-left: env(safe-area-inset-left, 0px);
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+// src/core/splash.ts
+function getSplashPlugin() {
+  if (typeof window === "undefined") return null;
+  const cap = window.Capacitor;
+  return cap?.Plugins?.SplashScreen ?? null;
+}
+var GLOBAL_KEY = /* @__PURE__ */ Symbol.for("@meetreeve/capacitor-bridge/splash@1");
+function getGlobalState() {
+  const g = globalThis;
+  if (!g[GLOBAL_KEY]) g[GLOBAL_KEY] = { done: null, pending: null };
+  return g[GLOBAL_KEY];
+}
+async function dismissSplash(fadeOutDuration = 250) {
+  if (!isNativePlatform()) return;
+  const state = getGlobalState();
+  if (state.done) return state.done;
+  if (state.pending) return state.pending;
+  const plugin = getSplashPlugin();
+  if (!plugin) return;
+  const attempt = (async () => {
+    try {
+      await plugin.hide({ fadeOutDuration });
+      state.done = Promise.resolve();
+    } catch (err) {
+      state.pending = null;
+      throw err;
+    } finally {
+      if (state.done) state.pending = null;
+    }
+  })();
+  state.pending = attempt;
+  return attempt.catch(() => {
+  });
+}
+
+// src/react/CapacitorProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var FALLBACK_VALUE = {
+  platform: "web",
+  isNative: false,
+  isIOS: false,
+  isAndroid: false,
+  dismissSplash: async () => {
+  }
+};
+var CapacitorContext = React.createContext(FALLBACK_VALUE);
+function CapacitorProvider({
+  children,
+  autoDismissSplash = true
+}) {
+  const value = React.useMemo(() => {
+    const platform = getPlatform();
+    return {
+      platform,
+      isNative: platform !== "web",
+      isIOS: platform === "ios",
+      isAndroid: platform === "android",
+      dismissSplash
+    };
+  }, []);
+  React.useEffect(() => {
+    installSafeAreaVars();
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute("data-platform", value.platform);
+    }
+    if (autoDismissSplash) {
+      void dismissSplash();
+    }
+  }, [autoDismissSplash, value.platform]);
+  return /* @__PURE__ */ jsx(CapacitorContext.Provider, { value, children });
+}
+function useCapacitor() {
+  return React.useContext(CapacitorContext);
+}
+
+// src/react/useSafeArea.ts
+import * as React2 from "react";
+function useSafeArea() {
+  const [insets, setInsets] = React2.useState(() => getSafeAreaInsets());
+  React2.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const update = () => setInsets(getSafeAreaInsets());
+    window.addEventListener("orientationchange", update);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("orientationchange", update);
+      window.removeEventListener("resize", update);
+    };
+  }, []);
+  return insets;
+}
+
+// src/react/BugReportButton.tsx
+import * as React3 from "react";
+
+// src/bugreport/index.ts
+var GLOBAL_KEY2 = /* @__PURE__ */ Symbol.for("@meetreeve/capacitor-bridge/bugreport@1");
+function getGlobalState2() {
+  const g = globalThis;
+  if (!g[GLOBAL_KEY2]) g[GLOBAL_KEY2] = { config: null };
+  return g[GLOBAL_KEY2];
+}
+function getBugReportEnvironment() {
+  const config = getGlobalState2().config;
+  if (typeof window === "undefined") {
+    return {
+      platform: getPlatform(),
+      userAgent: "",
+      currentUrl: "",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+  }
+  return {
+    platform: getPlatform(),
+    userAgent: window.navigator?.userAgent ?? "",
+    appVersion: config?.appVersion,
+    buildNumber: config?.buildNumber,
+    currentUrl: window.location?.href ?? "",
+    timestamp: (/* @__PURE__ */ new Date()).toISOString()
+  };
+}
+async function submitBugReport(payload) {
+  const config = getGlobalState2().config;
+  if (!config) {
+    throw new Error(
+      "[@meetreeve/capacitor-bridge/bugreport] submitBugReport called without configureBugReport({endpoint})."
+    );
+  }
+  const submission = {
+    ...payload,
+    environment: getBugReportEnvironment()
+  };
+  const headers = {
+    "Content-Type": "application/json"
+  };
+  if (config.headers) {
+    const extraHeaders = await config.headers();
+    Object.assign(headers, extraHeaders);
+  }
+  const response = await fetch(config.endpoint, {
+    method: "POST",
+    headers,
+    body: JSON.stringify(submission),
+    credentials: config.credentials ?? "omit"
+  });
+  if (!response.ok) {
+    throw new Error(
+      `[@meetreeve/capacitor-bridge/bugreport] bug-report submission failed: ${response.status} ${response.statusText}`
+    );
+  }
+}
+async function captureScreenshot() {
+  if (typeof window === "undefined") return null;
+  const cap = window.Capacitor;
+  const plugin = cap?.Plugins?.Screenshot;
+  if (plugin) {
+    try {
+      const { base64 } = await plugin.take();
+      return `data:image/png;base64,${base64}`;
+    } catch {
+    }
+  }
+  return null;
+}
+
+// src/react/BugReportButton.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var initialState = {
+  open: false,
+  message: "",
+  screenshot: null,
+  capturing: false,
+  submitting: false,
+  error: null
+};
+function BugReportButton({
+  userIdentifier,
+  renderTrigger,
+  extra,
+  onSubmitted
+}) {
+  const [state, setState] = React3.useState(initialState);
+  const triggerRef = React3.useRef(null);
+  const textareaRef = React3.useRef(null);
+  const previouslyFocusedRef = React3.useRef(null);
+  const open = React3.useCallback(() => {
+    previouslyFocusedRef.current = document.activeElement;
+    setState({ ...initialState, open: true });
+  }, []);
+  const close = React3.useCallback(() => {
+    setState(initialState);
+    const prev = previouslyFocusedRef.current;
+    if (prev && typeof prev.focus === "function") {
+      prev.focus();
+    }
+  }, []);
+  const captureScreen = React3.useCallback(async () => {
+    setState((s) => ({ ...s, capturing: true, error: null }));
+    try {
+      const img = await captureScreenshot();
+      setState((s) => ({ ...s, screenshot: img, capturing: false }));
+    } catch (err) {
+      setState((s) => ({
+        ...s,
+        capturing: false,
+        error: err instanceof Error ? err.message : String(err)
+      }));
+    }
+  }, []);
+  React3.useEffect(() => {
+    if (!state.open) return;
+    textareaRef.current?.focus();
+    const onKey = (e) => {
+      if (e.key === "Escape" && !state.submitting) {
+        e.stopPropagation();
+        close();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [state.open, state.submitting, close]);
+  const submit = React3.useCallback(async () => {
+    if (!state.message.trim()) return;
+    setState((s) => ({ ...s, submitting: true, error: null }));
+    const payload = {
+      message: state.message,
+      userIdentifier,
+      extra
+    };
+    if (state.screenshot) payload.screenshot = state.screenshot;
+    try {
+      await submitBugReport(payload);
+      setState(initialState);
+      onSubmitted?.();
+    } catch (err) {
+      setState((s) => ({
+        ...s,
+        submitting: false,
+        error: err instanceof Error ? err.message : String(err)
+      }));
+    }
+  }, [state.message, state.screenshot, userIdentifier, extra, onSubmitted]);
+  const trigger = renderTrigger ? renderTrigger(open) : /* @__PURE__ */ jsx2(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      onClick: open,
+      style: {
+        position: "fixed",
+        bottom: "calc(env(safe-area-inset-bottom, 0px) + 16px)",
+        right: "calc(env(safe-area-inset-right, 0px) + 16px)",
+        zIndex: 9999,
+        padding: "10px 14px",
+        background: "rgba(0,0,0,0.78)",
+        color: "white",
+        border: "none",
+        borderRadius: "999px",
+        fontSize: 14,
+        fontWeight: 500,
+        boxShadow: "0 4px 12px rgba(0,0,0,0.25)",
+        cursor: "pointer"
+      },
+      "aria-label": "Report a bug",
+      children: "Report bug"
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger,
+    state.open && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Report a bug",
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 1e4,
+          background: "rgba(0,0,0,0.55)",
+          display: "flex",
+          alignItems: "flex-end",
+          justifyContent: "center"
+        },
+        onClick: (e) => {
+          if (e.target === e.currentTarget && !state.submitting) close();
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              width: "100%",
+              maxWidth: 460,
+              background: "white",
+              color: "#111",
+              borderTopLeftRadius: 16,
+              borderTopRightRadius: 16,
+              padding: "20px 20px calc(env(safe-area-inset-bottom, 0px) + 20px)",
+              boxSizing: "border-box"
+            },
+            children: [
+              /* @__PURE__ */ jsx2("h2", { style: { margin: "0 0 12px", fontSize: 18 }, children: "Report a bug" }),
+              /* @__PURE__ */ jsx2(
+                "textarea",
+                {
+                  ref: textareaRef,
+                  value: state.message,
+                  onChange: (e) => setState((s) => ({ ...s, message: e.target.value })),
+                  placeholder: "What broke? What were you doing when it broke?",
+                  rows: 4,
+                  style: {
+                    width: "100%",
+                    boxSizing: "border-box",
+                    padding: 10,
+                    fontSize: 15,
+                    border: "1px solid #ddd",
+                    borderRadius: 8,
+                    resize: "vertical"
+                  },
+                  disabled: state.submitting
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    marginTop: 10,
+                    display: "flex",
+                    gap: 8,
+                    alignItems: "center"
+                  },
+                  children: [
+                    state.screenshot ? /* @__PURE__ */ jsx2(
+                      "img",
+                      {
+                        src: state.screenshot,
+                        alt: "screenshot",
+                        style: {
+                          width: 56,
+                          height: 56,
+                          borderRadius: 6,
+                          objectFit: "cover",
+                          border: "1px solid #eee"
+                        }
+                      }
+                    ) : /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: captureScreen,
+                        disabled: state.capturing || state.submitting,
+                        style: {
+                          padding: "6px 10px",
+                          fontSize: 13,
+                          border: "1px solid #ccc",
+                          borderRadius: 6,
+                          background: "white",
+                          cursor: "pointer"
+                        },
+                        children: state.capturing ? "Capturing\u2026" : "Attach screenshot"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2("div", { style: { flex: 1 } }),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: close,
+                        disabled: state.submitting,
+                        style: {
+                          padding: "8px 14px",
+                          fontSize: 14,
+                          border: "1px solid #ccc",
+                          borderRadius: 6,
+                          background: "white",
+                          cursor: "pointer"
+                        },
+                        children: "Cancel"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: submit,
+                        disabled: !state.message.trim() || state.submitting,
+                        style: {
+                          padding: "8px 14px",
+                          fontSize: 14,
+                          border: "none",
+                          borderRadius: 6,
+                          background: state.message.trim() ? "#111" : "#bbb",
+                          color: "white",
+                          cursor: state.message.trim() ? "pointer" : "default"
+                        },
+                        children: state.submitting ? "Sending\u2026" : "Send"
+                      }
+                    )
+                  ]
+                }
+              ),
+              state.error && /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  role: "alert",
+                  style: {
+                    marginTop: 12,
+                    color: "#b00020",
+                    fontSize: 13
+                  },
+                  children: state.error
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  BugReportButton,
+  CapacitorProvider,
+  useCapacitor,
+  useSafeArea
+};

package/dist/safe-area-B67yGQOn.d.cts

@@ -0,0 +1,51 @@
+/**
+ * Platform detection — the single source of truth for "are we in Capacitor?"
+ * used by every other module in the bridge.
+ *
+ * Capacitor exposes `(window as any).Capacitor` once the runtime initializes.
+ * We probe it carefully so the same code can run server-side (SSR) or in a
+ * plain browser tab without throwing.
+ */
+type NativePlatform = "ios" | "android";
+type Platform = NativePlatform | "web";
+declare function getPlatform(): Platform;
+declare function isNativePlatform(): boolean;
+declare function isIOS(): boolean;
+declare function isAndroid(): boolean;
+
+/**
+ * Safe-area helpers. iOS notch / Dynamic Island / home indicator and Android
+ * cutout insets are exposed by Capacitor via env(safe-area-inset-*) CSS vars
+ * the WebView automatically populates. Consumer apps that already use those
+ * CSS env() values get this for free — but a lot of stock wp-frontend code
+ * uses tailwind padding constants that don't honor the insets. These helpers
+ * give Capacitor-aware components a JS-readable number.
+ */
+interface SafeAreaInsets {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+/**
+ * Read the current safe-area insets, in CSS pixels. Returns zeros on web
+ * (where the env() vars are 0) and in SSR.
+ */
+declare function getSafeAreaInsets(): SafeAreaInsets;
+/**
+ * Install a one-time stylesheet that copies env(safe-area-inset-*) onto
+ * `--safe-area-inset-*` CSS custom properties on :root, so getSafeAreaInsets()
+ * can read them via getComputedStyle. Call once at app boot — typically from
+ * a CapacitorProvider in React.
+ *
+ * Idempotent: calling twice is a no-op (we tag the inserted style node).
+ */
+declare function installSafeAreaVars(): void;
+/**
+ * True when we're on a platform that reports nonzero safe-area insets
+ * (every modern iPhone, most Android handsets). Useful for conditionally
+ * showing a "tap to dismiss" affordance above the home indicator.
+ */
+declare function hasSafeAreaInsets(): boolean;
+
+export { type NativePlatform as N, type Platform as P, type SafeAreaInsets as S, getSafeAreaInsets as a, isAndroid as b, isIOS as c, isNativePlatform as d, getPlatform as g, hasSafeAreaInsets as h, installSafeAreaVars as i };

package/dist/safe-area-B67yGQOn.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Platform detection — the single source of truth for "are we in Capacitor?"
+ * used by every other module in the bridge.
+ *
+ * Capacitor exposes `(window as any).Capacitor` once the runtime initializes.
+ * We probe it carefully so the same code can run server-side (SSR) or in a
+ * plain browser tab without throwing.
+ */
+type NativePlatform = "ios" | "android";
+type Platform = NativePlatform | "web";
+declare function getPlatform(): Platform;
+declare function isNativePlatform(): boolean;
+declare function isIOS(): boolean;
+declare function isAndroid(): boolean;
+
+/**
+ * Safe-area helpers. iOS notch / Dynamic Island / home indicator and Android
+ * cutout insets are exposed by Capacitor via env(safe-area-inset-*) CSS vars
+ * the WebView automatically populates. Consumer apps that already use those
+ * CSS env() values get this for free — but a lot of stock wp-frontend code
+ * uses tailwind padding constants that don't honor the insets. These helpers
+ * give Capacitor-aware components a JS-readable number.
+ */
+interface SafeAreaInsets {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+/**
+ * Read the current safe-area insets, in CSS pixels. Returns zeros on web
+ * (where the env() vars are 0) and in SSR.
+ */
+declare function getSafeAreaInsets(): SafeAreaInsets;
+/**
+ * Install a one-time stylesheet that copies env(safe-area-inset-*) onto
+ * `--safe-area-inset-*` CSS custom properties on :root, so getSafeAreaInsets()
+ * can read them via getComputedStyle. Call once at app boot — typically from
+ * a CapacitorProvider in React.
+ *
+ * Idempotent: calling twice is a no-op (we tag the inserted style node).
+ */
+declare function installSafeAreaVars(): void;
+/**
+ * True when we're on a platform that reports nonzero safe-area insets
+ * (every modern iPhone, most Android handsets). Useful for conditionally
+ * showing a "tap to dismiss" affordance above the home indicator.
+ */
+declare function hasSafeAreaInsets(): boolean;
+
+export { type NativePlatform as N, type Platform as P, type SafeAreaInsets as S, getSafeAreaInsets as a, isAndroid as b, isIOS as c, isNativePlatform as d, getPlatform as g, hasSafeAreaInsets as h, installSafeAreaVars as i };

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@meetreeve/capacitor-bridge",
+  "version": "0.1.0",
+  "description": "Reeve.Mobile substrate — Capacitor wrapper bridge for cross-product mobile apps. Provides useCapacitor() hook, safe-area helpers, native-aware paywall gate, splash bridge, deep-link router, bug-report widget, and Apple compliance pack.",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/core/index.js",
+  "module": "./dist/core/index.mjs",
+  "types": "./dist/core/index.d.ts",
+  "exports": {
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core/index.mjs",
+      "require": "./dist/core/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.mjs",
+      "require": "./dist/react/index.js"
+    },
+    "./paywall": {
+      "types": "./dist/paywall/index.d.ts",
+      "import": "./dist/paywall/index.mjs",
+      "require": "./dist/paywall/index.js"
+    },
+    "./deeplink": {
+      "types": "./dist/deeplink/index.d.ts",
+      "import": "./dist/deeplink/index.mjs",
+      "require": "./dist/deeplink/index.js"
+    },
+    "./bugreport": {
+      "types": "./dist/bugreport/index.d.ts",
+      "import": "./dist/bugreport/index.mjs",
+      "require": "./dist/bugreport/index.js"
+    },
+    "./compliance": "./compliance/index.cjs"
+  },
+  "files": [
+    "dist",
+    "compliance",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "tsup"
+  },
+  "devDependencies": {
+    "@capacitor/core": "^6.0.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^14.0.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "jsdom": "^28.1.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@capacitor/core": "^6.0.0",
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "@capacitor/core": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  }
+}