@meetreeve/capacitor-bridge 0.1.0

package/dist/react/index.cjs

@@ -0,0 +1,523 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/index.ts
+var react_exports = {};
+__export(react_exports, {
+  BugReportButton: () => BugReportButton,
+  CapacitorProvider: () => CapacitorProvider,
+  useCapacitor: () => useCapacitor,
+  useSafeArea: () => useSafeArea
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/react/CapacitorProvider.tsx
+var React = __toESM(require("react"), 1);
+
+// 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
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)(CapacitorContext.Provider, { value, children });
+}
+function useCapacitor() {
+  return React.useContext(CapacitorContext);
+}
+
+// src/react/useSafeArea.ts
+var React2 = __toESM(require("react"), 1);
+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
+var React3 = __toESM(require("react"), 1);
+
+// 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
+var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsx)(
+    "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__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    trigger,
+    state.open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "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__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("h2", { style: { margin: "0 0 12px", fontSize: 18 }, children: "Report a bug" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "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__ */ (0, import_jsx_runtime2.jsxs)(
+                "div",
+                {
+                  style: {
+                    marginTop: 10,
+                    display: "flex",
+                    gap: 8,
+                    alignItems: "center"
+                  },
+                  children: [
+                    state.screenshot ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "img",
+                      {
+                        src: state.screenshot,
+                        alt: "screenshot",
+                        style: {
+                          width: 56,
+                          height: 56,
+                          borderRadius: 6,
+                          objectFit: "cover",
+                          border: "1px solid #eee"
+                        }
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "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__ */ (0, import_jsx_runtime2.jsx)("div", { style: { flex: 1 } }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "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__ */ (0, import_jsx_runtime2.jsx)(
+                      "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__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  role: "alert",
+                  style: {
+                    marginTop: 12,
+                    color: "#b00020",
+                    fontSize: 13
+                  },
+                  children: state.error
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BugReportButton,
+  CapacitorProvider,
+  useCapacitor,
+  useSafeArea
+});

package/dist/react/index.d.cts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { P as Platform, S as SafeAreaInsets } from '../safe-area-B67yGQOn.cjs';
+
+/**
+ * <CapacitorProvider> is the one-line install for consumer apps. Mount it at
+ * the top of the tree and every child gets useCapacitor() with platform info,
+ * safe-area insets, and a stable dismissSplash() callback.
+ *
+ * On mount the provider also installs the --safe-area-inset-* CSS vars and
+ * marks the document body with a data-platform="ios|android|web" attribute
+ * so CSS can target native chrome without JS.
+ */
+
+interface CapacitorContextValue {
+    platform: Platform;
+    isNative: boolean;
+    isIOS: boolean;
+    isAndroid: boolean;
+    dismissSplash: (fadeOutDuration?: number) => Promise<void>;
+}
+interface CapacitorProviderProps {
+    children: React.ReactNode;
+    /**
+     * Dismiss the native splash screen automatically on first child render.
+     * Defaults to true — consumer apps almost always want this; set false if
+     * the splash should stay visible until some later signal (e.g. after auth
+     * bootstrap).
+     */
+    autoDismissSplash?: boolean;
+}
+declare function CapacitorProvider({ children, autoDismissSplash, }: CapacitorProviderProps): React.ReactElement;
+declare function useCapacitor(): CapacitorContextValue;
+
+/**
+ * useSafeArea returns the current safe-area inset values and re-reads them
+ * on orientation change. Consumer components inset their layout with these
+ * numbers when they can't (or don't want to) use the env() CSS vars directly
+ * — e.g. computing a virtual list's first-row offset.
+ */
+
+declare function useSafeArea(): SafeAreaInsets;
+
+/**
+ * <BugReportButton> — TestFlight bug-report widget React component.
+ *
+ * Drop it once in a Capacitor consumer app (typically a floating button in
+ * a beta-only nav surface) and beta testers get a one-tap path to send a
+ * message + optional screenshot + environment context to the consumer's
+ * backend (which fans out to Slack, Sentry, etc.).
+ *
+ * Visual chrome is intentionally tiny — consumers wrap this in their own
+ * styled trigger if they want. The default appearance is a small floating
+ * pill in the bottom-right with a "Bug" label.
+ */
+
+interface BugReportButtonProps {
+    /** Subscriber / user id, attached to every submission. */
+    userIdentifier?: string;
+    /** Override the default floating-pill chrome with your own. */
+    renderTrigger?: (open: () => void) => React.ReactNode;
+    /** Extra metadata merged into every submission. */
+    extra?: Record<string, unknown>;
+    /** Called after a successful submission — close UI, show toast, etc. */
+    onSubmitted?: () => void;
+}
+declare function BugReportButton({ userIdentifier, renderTrigger, extra, onSubmitted, }: BugReportButtonProps): React.ReactElement;
+
+export { BugReportButton, type BugReportButtonProps, type CapacitorContextValue, CapacitorProvider, useCapacitor, useSafeArea };

package/dist/react/index.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { P as Platform, S as SafeAreaInsets } from '../safe-area-B67yGQOn.js';
+
+/**
+ * <CapacitorProvider> is the one-line install for consumer apps. Mount it at
+ * the top of the tree and every child gets useCapacitor() with platform info,
+ * safe-area insets, and a stable dismissSplash() callback.
+ *
+ * On mount the provider also installs the --safe-area-inset-* CSS vars and
+ * marks the document body with a data-platform="ios|android|web" attribute
+ * so CSS can target native chrome without JS.
+ */
+
+interface CapacitorContextValue {
+    platform: Platform;
+    isNative: boolean;
+    isIOS: boolean;
+    isAndroid: boolean;
+    dismissSplash: (fadeOutDuration?: number) => Promise<void>;
+}
+interface CapacitorProviderProps {
+    children: React.ReactNode;
+    /**
+     * Dismiss the native splash screen automatically on first child render.
+     * Defaults to true — consumer apps almost always want this; set false if
+     * the splash should stay visible until some later signal (e.g. after auth
+     * bootstrap).
+     */
+    autoDismissSplash?: boolean;
+}
+declare function CapacitorProvider({ children, autoDismissSplash, }: CapacitorProviderProps): React.ReactElement;
+declare function useCapacitor(): CapacitorContextValue;
+
+/**
+ * useSafeArea returns the current safe-area inset values and re-reads them
+ * on orientation change. Consumer components inset their layout with these
+ * numbers when they can't (or don't want to) use the env() CSS vars directly
+ * — e.g. computing a virtual list's first-row offset.
+ */
+
+declare function useSafeArea(): SafeAreaInsets;
+
+/**
+ * <BugReportButton> — TestFlight bug-report widget React component.
+ *
+ * Drop it once in a Capacitor consumer app (typically a floating button in
+ * a beta-only nav surface) and beta testers get a one-tap path to send a
+ * message + optional screenshot + environment context to the consumer's
+ * backend (which fans out to Slack, Sentry, etc.).
+ *
+ * Visual chrome is intentionally tiny — consumers wrap this in their own
+ * styled trigger if they want. The default appearance is a small floating
+ * pill in the bottom-right with a "Bug" label.
+ */
+
+interface BugReportButtonProps {
+    /** Subscriber / user id, attached to every submission. */
+    userIdentifier?: string;
+    /** Override the default floating-pill chrome with your own. */
+    renderTrigger?: (open: () => void) => React.ReactNode;
+    /** Extra metadata merged into every submission. */
+    extra?: Record<string, unknown>;
+    /** Called after a successful submission — close UI, show toast, etc. */
+    onSubmitted?: () => void;
+}
+declare function BugReportButton({ userIdentifier, renderTrigger, extra, onSubmitted, }: BugReportButtonProps): React.ReactElement;
+
+export { BugReportButton, type BugReportButtonProps, type CapacitorContextValue, CapacitorProvider, useCapacitor, useSafeArea };