@loupfeed/react-native 0.1.0

package/LICENSE.md

@@ -0,0 +1,114 @@
+# Functional Source License, Version 1.1, Apache 2.0 Future License
+
+## Abbreviation
+
+FSL-1.1-ALv2
+
+## Notice
+
+Copyright 2026 loupfeed
+
+## Terms and Conditions
+
+### Licensor ("We")
+
+The party offering the Software under these Terms and Conditions.
+
+### The Software
+
+The "Software" is each version of the software that we make available under
+these Terms and Conditions, as indicated by our inclusion of these Terms and
+Conditions with the Software.
+
+### License Grant
+
+Subject to your compliance with this License Grant and the Patents,
+Redistribution and Trademark clauses below, we hereby grant you the right to use,
+copy, modify, create derivative works, publicly perform, publicly display and
+redistribute the Software for any Permitted Purpose identified below.
+
+### Permitted Purpose
+
+A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
+means making the Software available to others in a commercial product or service
+that:
+
+1. substitutes for the Software;
+
+2. substitutes for any other product or service we offer using the Software that
+   exists as of the date we make the Software available; or
+
+3. offers the same or substantially similar functionality as the Software.
+
+Permitted Purposes specifically include using the Software:
+
+1. for your internal use and access;
+
+2. for non-commercial education;
+
+3. for non-commercial research; and
+
+4. in connection with professional services that you provide to a licensee using
+   the Software in accordance with these Terms and Conditions.
+
+### Patents
+
+To the extent your use for a Permitted Purpose would necessarily infringe our
+patents, the license grant above includes a license under our patents. If you
+make a claim against any party that the Software infringes or contributes to the
+infringement of any patent, then your patent license to the Software ends
+immediately.
+
+### Redistribution
+
+The Terms and Conditions apply to all copies, modifications and derivatives of
+the Software.
+
+If you redistribute any copies, modifications or derivatives of the Software, you
+must include a copy of or a link to these Terms and Conditions and not remove any
+copyright notices provided in or with the Software.
+
+### Disclaimer
+
+THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, INCLUDING
+BUT NOT LIMITED TO WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE, NON-INFRINGEMENT AND TITLE.
+
+IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
+SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES, EVEN
+IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.
+
+### Trademarks
+
+Except for displaying the License Details and identifying us as the origin of the
+Software, you have no right under these Terms and Conditions to use our
+trademarks, trade names, service marks or product names.
+
+## Grant of Future License
+
+We hereby irrevocably grant you an additional license to use the Software under
+the Apache License, Version 2.0 that is effective on the second anniversary of
+the date we make the Software available. On or after that date, you may use the
+Software under the Apache License, Version 2.0, in which case the following will
+apply:
+
+We hereby grant you a license to the Software under the Apache License, Version
+2.0, a copy of which is available at https://www.apache.org/licenses/LICENSE-2.0.
+
+---
+
+## In plain language (non-binding summary)
+
+This is a **Fair Source** license. You can:
+
+- **Self-host and run loupfeed** for your own purposes — including inside a
+  company, on your own servers or cloud account, for your own products.
+- Read, modify, fork, and redistribute the source.
+
+The one thing you may **not** do is offer loupfeed (or something substantially
+similar built from it) **as a competing commercial product or hosted service**.
+
+Two years after each release is published, that version automatically becomes
+available to you under the **Apache License 2.0** (fully open source).
+
+This summary is for convenience only; the Terms and Conditions above govern.

package/README.md

@@ -0,0 +1,61 @@
+# @loupfeed/react-native
+
+React Native adapter with a **native inspector overlay** — built and verified on
+the iOS simulator (Expo SDK 52, New Architecture / bridgeless).
+
+RN has no DOM, so the opaque id rides as an **`fbId` prop** threaded to the native
+view's `testID`, and the inspector hit-tests touches via `measureInWindow` (the
+native analogue of the web overlay's `elementsFromPoint`). Same opaque-id +
+server-manifest model as web — different carrier.
+
+## How it works
+
+- **Build-time tagger (Metro/Babel):** `@loupfeed/babel-plugin` with
+  `{ attribute: 'fbId' }` injects an opaque `fbId` prop on every JSX element. No
+  source paths reach the app bundle — the `id → src:line` manifest is server-side.
+- **Runtime:** this adapter patches `React.createElement` to (a) thread `fbId` →
+  `testID`/`accessibilityLabel` and (b) register a measurable ref. `<FeedbackRoot>`
+  renders a launcher + an inspect capture layer; a tap is hit-tested
+  (`measureInWindow`) against the registered views, the nearest `fbId` is read, a
+  highlight is drawn, and a comment `Modal` submits via `captureFeedback`.
+- Uses **only core RN APIs** (no custom native module) → runs in Expo Go.
+
+## Usage
+
+```tsx
+import { init, FeedbackRoot, useFeedback } from '@loupfeed/react-native';
+
+init({ dsn });
+export default () => (
+  <FeedbackRoot>
+    <App />
+  </FeedbackRoot>
+);
+```
+
+```js
+// babel.config.js — the fbId Metro tagger. jsxRuntime:'classic' lets the adapter's
+// createElement patch intercept.
+module.exports = (api) => {
+  api.cache(true);
+  return {
+    presets: [['babel-preset-expo', { jsxRuntime: 'classic' }]],
+    plugins: [['@loupfeed/babel-plugin', { attribute: 'fbId' }]],
+  };
+};
+```
+
+A complete, runnable Expo example (Metro monorepo config + self-test) is in
+[`examples/react-native`](../../examples/react-native).
+
+## Verified
+
+On the iPhone 16 simulator (Expo Go, SDK 52, bridgeless): the fbId tagger
+registered 26+ native views; an inspect tap resolved via `measureInWindow` to the
+opaque id `fb93de5eb7f7`, and `captureFeedback` produced an enriched event
+(`tag: Text`, `user: jdoe`).
+
+## Still deferred (Phase 4)
+
+- **View-hierarchy session replay** — RN's replay engine (no DOM); deferred
+  alongside web session replay (the first post-MVP phase).

package/dist/chunk-NPNSWHPB.js

@@ -0,0 +1,68 @@
+// src/tagging.ts
+import React from "react";
+import { StyleSheet } from "react-native";
+var _g = globalThis;
+var registry = _g.__loupfeedRegistry__ ?? (_g.__loupfeedRegistry__ = /* @__PURE__ */ new Map());
+var FORWARD_REF = /* @__PURE__ */ Symbol.for("react.forward_ref");
+var MEMO = /* @__PURE__ */ Symbol.for("react.memo");
+function extractText(children) {
+  const arr = Array.isArray(children) ? children : children == null ? [] : [children];
+  const t = arr.filter((c) => typeof c === "string" || typeof c === "number").map(String).join("");
+  return t || void 0;
+}
+function tagProps(type, props, childrenOverride) {
+  if (!props || !props.fbId) return props;
+  const fbId = props.fbId;
+  const tagName = typeof type === "string" ? type : type?.displayName || type?.name;
+  const canRef = typeof type === "string" || type != null && (type.$$typeof === FORWARD_REF || type.$$typeof === MEMO);
+  const next = {
+    ...props,
+    testID: props.testID ?? fbId,
+    accessibilityLabel: props.accessibilityLabel ?? fbId
+  };
+  delete next.fbId;
+  if (canRef) {
+    const userRef = props.ref;
+    const flat = props.style ? StyleSheet.flatten(props.style) : void 0;
+    const text = extractText(childrenOverride !== void 0 ? childrenOverride : props.children);
+    next.ref = (instance) => {
+      if (instance && typeof instance.measureInWindow === "function") {
+        registry.set(fbId, {
+          instance,
+          tagName,
+          text,
+          bg: flat?.backgroundColor,
+          radius: typeof flat?.borderRadius === "number" ? flat.borderRadius : void 0,
+          color: flat?.color
+        });
+      } else {
+        registry.delete(fbId);
+      }
+      if (typeof userRef === "function") userRef(instance);
+      else if (userRef && typeof userRef === "object") userRef.current = instance;
+    };
+  }
+  return next;
+}
+function tagJsxProps(type, props) {
+  return tagProps(type, props);
+}
+function installTagging() {
+  const gp = globalThis;
+  if (gp.__loupfeedPatched__) return;
+  gp.__loupfeedPatched__ = true;
+  const orig = React.createElement;
+  React.createElement = function(type, props, ...children) {
+    if (props && props.fbId) {
+      return orig.call(this, type, tagProps(type, props, children), ...children);
+    }
+    return orig.call(this, type, props, ...children);
+  };
+}
+
+export {
+  registry,
+  tagJsxProps,
+  installTagging
+};
+//# sourceMappingURL=chunk-NPNSWHPB.js.map

package/dist/chunk-NPNSWHPB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tagging.ts"],"sourcesContent":["/**\n * Element tagging — shared by the classic createElement patch and the automatic\n * JSX runtime shim (jsx-runtime.ts). Threads the babel-injected `fbId` prop onto\n * the native view's testID/accessibilityLabel and registers a measurable handle\n * for hit-testing + the wireframe recorder.\n *\n * Runtime-agnostic so loupfeed works on BOTH:\n *  - classic JSX (jsxRuntime: 'classic') → React.createElement patch, and\n *  - automatic JSX (React 17+/19 default) → custom @jsxImportSource shim,\n * the latter being required by modern apps where files omit `import React`.\n */\nimport React from 'react';\nimport { StyleSheet } from 'react-native';\n\nexport type Measurable = {\n  measureInWindow: (cb: (x: number, y: number, w: number, h: number) => void) => void;\n};\nexport type RegEntry = {\n  instance: Measurable;\n  tagName?: string;\n  text?: string;\n  bg?: string;\n  radius?: number;\n  color?: string;\n};\n\n/**\n * Shared registry of tagged, measurable views (keyed by fbId). Stored on\n * globalThis so the index entry (wireframe recorder / hit-test) and the\n * jsx-runtime shim share ONE instance even if the bundler duplicates this module\n * across the package's multiple entry points.\n */\nconst _g = globalThis as unknown as { __loupfeedRegistry__?: Map<string, RegEntry> };\nexport const registry: Map<string, RegEntry> = (_g.__loupfeedRegistry__ ??= new Map<string, RegEntry>());\n\nconst FORWARD_REF = Symbol.for('react.forward_ref');\nconst MEMO = Symbol.for('react.memo');\n\nfunction extractText(children: unknown): string | undefined {\n  const arr = Array.isArray(children) ? children : children == null ? [] : [children];\n  const t = arr\n    .filter((c) => typeof c === 'string' || typeof c === 'number')\n    .map(String)\n    .join('');\n  return t || undefined;\n}\n\n/**\n * Transform a tagged element's props: fbId → testID/accessibilityLabel + a ref\n * that (de)registers a measurable handle. Returns props unchanged when there's\n * no fbId. `childrenOverride` lets the classic patch pass its variadic children;\n * the automatic shim falls back to props.children.\n */\nexport function tagProps(type: any, props: any, childrenOverride?: unknown): any {\n  if (!props || !props.fbId) return props;\n  const fbId: string = props.fbId;\n  const tagName = typeof type === 'string' ? type : type?.displayName || type?.name;\n  const canRef =\n    typeof type === 'string' ||\n    (type != null && (type.$$typeof === FORWARD_REF || type.$$typeof === MEMO));\n\n  const next: any = {\n    ...props,\n    testID: props.testID ?? fbId,\n    accessibilityLabel: props.accessibilityLabel ?? fbId,\n  };\n  delete next.fbId;\n\n  if (canRef) {\n    const userRef = props.ref;\n    const flat: any = props.style ? StyleSheet.flatten(props.style) : undefined;\n    const text = extractText(childrenOverride !== undefined ? childrenOverride : props.children);\n    next.ref = (instance: any) => {\n      if (instance && typeof instance.measureInWindow === 'function') {\n        registry.set(fbId, {\n          instance,\n          tagName,\n          text,\n          bg: flat?.backgroundColor,\n          radius: typeof flat?.borderRadius === 'number' ? flat.borderRadius : undefined,\n          color: flat?.color,\n        });\n      } else {\n        registry.delete(fbId);\n      }\n      if (typeof userRef === 'function') userRef(instance);\n      else if (userRef && typeof userRef === 'object') userRef.current = instance;\n    };\n  }\n  return next;\n}\n\n/** Automatic JSX runtime entry point (used by jsx-runtime.ts / jsx-dev-runtime.ts). */\nexport function tagJsxProps(type: any, props: any): any {\n  return tagProps(type, props);\n}\n\n/**\n * Classic JSX runtime: patch React.createElement. Idempotent across duplicated\n * bundles (flag on globalThis). Harmless (a no-op for tagging) under the\n * automatic runtime, where JSX never calls createElement.\n */\nexport function installTagging(): void {\n  const gp = globalThis as unknown as { __loupfeedPatched__?: boolean };\n  if (gp.__loupfeedPatched__) return;\n  gp.__loupfeedPatched__ = true;\n  const orig = React.createElement;\n  (React as any).createElement = function (this: unknown, type: any, props: any, ...children: any[]) {\n    if (props && props.fbId) {\n      return orig.call(this, type, tagProps(type, props, children), ...children);\n    }\n    return orig.call(this, type, props, ...children);\n  };\n}\n"],"mappings":";AAWA,OAAO,WAAW;AAClB,SAAS,kBAAkB;AAoB3B,IAAM,KAAK;AACJ,IAAM,WAAmC,GAAG,yBAAH,GAAG,uBAAyB,oBAAI,IAAsB;AAEtG,IAAM,cAAc,uBAAO,IAAI,mBAAmB;AAClD,IAAM,OAAO,uBAAO,IAAI,YAAY;AAEpC,SAAS,YAAY,UAAuC;AAC1D,QAAM,MAAM,MAAM,QAAQ,QAAQ,IAAI,WAAW,YAAY,OAAO,CAAC,IAAI,CAAC,QAAQ;AAClF,QAAM,IAAI,IACP,OAAO,CAAC,MAAM,OAAO,MAAM,YAAY,OAAO,MAAM,QAAQ,EAC5D,IAAI,MAAM,EACV,KAAK,EAAE;AACV,SAAO,KAAK;AACd;AAQO,SAAS,SAAS,MAAW,OAAY,kBAAiC;AAC/E,MAAI,CAAC,SAAS,CAAC,MAAM,KAAM,QAAO;AAClC,QAAM,OAAe,MAAM;AAC3B,QAAM,UAAU,OAAO,SAAS,WAAW,OAAO,MAAM,eAAe,MAAM;AAC7E,QAAM,SACJ,OAAO,SAAS,YACf,QAAQ,SAAS,KAAK,aAAa,eAAe,KAAK,aAAa;AAEvE,QAAM,OAAY;AAAA,IAChB,GAAG;AAAA,IACH,QAAQ,MAAM,UAAU;AAAA,IACxB,oBAAoB,MAAM,sBAAsB;AAAA,EAClD;AACA,SAAO,KAAK;AAEZ,MAAI,QAAQ;AACV,UAAM,UAAU,MAAM;AACtB,UAAM,OAAY,MAAM,QAAQ,WAAW,QAAQ,MAAM,KAAK,IAAI;AAClE,UAAM,OAAO,YAAY,qBAAqB,SAAY,mBAAmB,MAAM,QAAQ;AAC3F,SAAK,MAAM,CAAC,aAAkB;AAC5B,UAAI,YAAY,OAAO,SAAS,oBAAoB,YAAY;AAC9D,iBAAS,IAAI,MAAM;AAAA,UACjB;AAAA,UACA;AAAA,UACA;AAAA,UACA,IAAI,MAAM;AAAA,UACV,QAAQ,OAAO,MAAM,iBAAiB,WAAW,KAAK,eAAe;AAAA,UACrE,OAAO,MAAM;AAAA,QACf,CAAC;AAAA,MACH,OAAO;AACL,iBAAS,OAAO,IAAI;AAAA,MACtB;AACA,UAAI,OAAO,YAAY,WAAY,SAAQ,QAAQ;AAAA,eAC1C,WAAW,OAAO,YAAY,SAAU,SAAQ,UAAU;AAAA,IACrE;AAAA,EACF;AACA,SAAO;AACT;AAGO,SAAS,YAAY,MAAW,OAAiB;AACtD,SAAO,SAAS,MAAM,KAAK;AAC7B;AAOO,SAAS,iBAAuB;AACrC,QAAM,KAAK;AACX,MAAI,GAAG,oBAAqB;AAC5B,KAAG,sBAAsB;AACzB,QAAM,OAAO,MAAM;AACnB,EAAC,MAAc,gBAAgB,SAAyB,MAAW,UAAe,UAAiB;AACjG,QAAI,SAAS,MAAM,MAAM;AACvB,aAAO,KAAK,KAAK,MAAM,MAAM,SAAS,MAAM,OAAO,QAAQ,GAAG,GAAG,QAAQ;AAAA,IAC3E;AACA,WAAO,KAAK,KAAK,MAAM,MAAM,OAAO,GAAG,QAAQ;AAAA,EACjD;AACF;","names":[]}

package/dist/index.cjs

@@ -0,0 +1,385 @@
+"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/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  FeedbackRoot: () => FeedbackRoot,
+  addBreadcrumb: () => import_core2.addBreadcrumb,
+  captureFeedback: () => import_core2.captureFeedback,
+  close: () => import_core2.close,
+  getActiveRecorder: () => import_core2.getActiveRecorder,
+  getClient: () => import_core2.getClient,
+  getCurrentScope: () => import_core2.getCurrentScope,
+  getRegistered: () => getRegistered,
+  init: () => import_core2.init,
+  installTagging: () => installTagging,
+  measureFbId: () => measureFbId,
+  setContext: () => import_core2.setContext,
+  setReplayRecorder: () => import_core2.setReplayRecorder,
+  setTag: () => import_core2.setTag,
+  setTags: () => import_core2.setTags,
+  setUser: () => import_core2.setUser,
+  useFeedback: () => useFeedback,
+  wireframeRecorder: () => wireframeRecorder,
+  withScope: () => import_core2.withScope
+});
+module.exports = __toCommonJS(index_exports);
+var import_react2 = require("react");
+var import_react_native2 = require("react-native");
+var import_core = require("@loupfeed/core");
+
+// src/tagging.ts
+var import_react = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var _g = globalThis;
+var registry = _g.__loupfeedRegistry__ ?? (_g.__loupfeedRegistry__ = /* @__PURE__ */ new Map());
+var FORWARD_REF = /* @__PURE__ */ Symbol.for("react.forward_ref");
+var MEMO = /* @__PURE__ */ Symbol.for("react.memo");
+function extractText(children) {
+  const arr = Array.isArray(children) ? children : children == null ? [] : [children];
+  const t = arr.filter((c) => typeof c === "string" || typeof c === "number").map(String).join("");
+  return t || void 0;
+}
+function tagProps(type, props, childrenOverride) {
+  if (!props || !props.fbId) return props;
+  const fbId = props.fbId;
+  const tagName = typeof type === "string" ? type : type?.displayName || type?.name;
+  const canRef = typeof type === "string" || type != null && (type.$$typeof === FORWARD_REF || type.$$typeof === MEMO);
+  const next = {
+    ...props,
+    testID: props.testID ?? fbId,
+    accessibilityLabel: props.accessibilityLabel ?? fbId
+  };
+  delete next.fbId;
+  if (canRef) {
+    const userRef = props.ref;
+    const flat = props.style ? import_react_native.StyleSheet.flatten(props.style) : void 0;
+    const text = extractText(childrenOverride !== void 0 ? childrenOverride : props.children);
+    next.ref = (instance) => {
+      if (instance && typeof instance.measureInWindow === "function") {
+        registry.set(fbId, {
+          instance,
+          tagName,
+          text,
+          bg: flat?.backgroundColor,
+          radius: typeof flat?.borderRadius === "number" ? flat.borderRadius : void 0,
+          color: flat?.color
+        });
+      } else {
+        registry.delete(fbId);
+      }
+      if (typeof userRef === "function") userRef(instance);
+      else if (userRef && typeof userRef === "object") userRef.current = instance;
+    };
+  }
+  return next;
+}
+function installTagging() {
+  const gp = globalThis;
+  if (gp.__loupfeedPatched__) return;
+  gp.__loupfeedPatched__ = true;
+  const orig = import_react.default.createElement;
+  import_react.default.createElement = function(type, props, ...children) {
+    if (props && props.fbId) {
+      return orig.call(this, type, tagProps(type, props, children), ...children);
+    }
+    return orig.call(this, type, props, ...children);
+  };
+}
+
+// src/index.tsx
+var import_core2 = require("@loupfeed/core");
+var import_jsx_runtime = require("react/jsx-runtime");
+function measure(m) {
+  return new Promise((resolve) => m.measureInWindow((x, y, w, h) => resolve({ x, y, w, h })));
+}
+async function hitTest(px, py) {
+  const measured = await Promise.all(
+    [...registry.entries()].map(async ([fbId, v]) => ({ fbId, tagName: v.tagName, rect: await measure(v.instance) }))
+  );
+  const hits = measured.filter(
+    (m) => m.rect.w > 0 && m.rect.h > 0 && px >= m.rect.x && px <= m.rect.x + m.rect.w && py >= m.rect.y && py <= m.rect.y + m.rect.h
+  );
+  if (hits.length === 0) return null;
+  hits.sort((a, b) => a.rect.w * a.rect.h - b.rect.w * b.rect.h);
+  return hits[0];
+}
+function maskText(t) {
+  if (!t) return t;
+  return t.replace(/\S/g, "\u25CF");
+}
+var wfFrames = [];
+var wfTimer = null;
+var wfRecording = false;
+var wfStartedAt = 0;
+var wfBufferMs = 6e4;
+async function captureWireframeFrame() {
+  const views = await Promise.all(
+    [...registry.entries()].map(async ([fb, v]) => {
+      const r = await measure(v.instance);
+      return {
+        fb,
+        x: Math.round(r.x),
+        y: Math.round(r.y),
+        w: Math.round(r.w),
+        h: Math.round(r.h),
+        tag: v.tagName,
+        text: maskText(v.text),
+        bg: v.bg,
+        r: v.radius,
+        color: v.color
+      };
+    })
+  );
+  wfFrames.push({ t: Date.now() - wfStartedAt, views: views.filter((vw) => vw.w > 0 && vw.h > 0) });
+  const cutoff = Date.now() - wfStartedAt - wfBufferMs;
+  while (wfFrames.length > 1 && (wfFrames[0]?.t ?? 0) < cutoff) wfFrames.shift();
+}
+var wireframeRecorder = {
+  start() {
+    if (wfRecording) return;
+    wfRecording = true;
+    wfStartedAt = Date.now();
+    wfFrames = [];
+    void captureWireframeFrame();
+    wfTimer = setInterval(() => void captureWireframeFrame(), 500);
+  },
+  stop() {
+    wfRecording = false;
+    if (wfTimer) clearInterval(wfTimer);
+    wfTimer = null;
+  },
+  isRecording() {
+    return wfRecording;
+  },
+  async snapshot() {
+    if (!wfRecording) return { replayId: "", durationMs: 0, kind: "wireframe", frames: [] };
+    await captureWireframeFrame();
+    const { width, height } = import_react_native2.Dimensions.get("window");
+    const populated = wfFrames.filter((f) => f.views.length > 0);
+    const base = populated.length ? populated[0].t : 0;
+    const frames = populated.map((f) => ({ t: f.t - base, views: f.views }));
+    const durationMs = frames.length ? frames[frames.length - 1].t : 0;
+    return {
+      replayId: `wf_${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`,
+      durationMs,
+      kind: "wireframe",
+      frames,
+      viewport: { width, height }
+    };
+  }
+};
+installTagging();
+function getRegistered() {
+  return [...registry.entries()].map(([fbId, v]) => ({ fbId, tagName: v.tagName }));
+}
+async function measureFbId(fbId) {
+  const v = registry.get(fbId);
+  return v ? measure(v.instance) : null;
+}
+var Ctx = (0, import_react2.createContext)(null);
+function FeedbackRoot({ children, accentColor = "#6d28d9" }) {
+  const [mode, setMode] = (0, import_react2.useState)("idle");
+  const [target, setTarget] = (0, import_react2.useState)(null);
+  const [text, setText] = (0, import_react2.useState)("");
+  const reset = (0, import_react2.useCallback)(() => {
+    setMode("idle");
+    setTarget(null);
+    setText("");
+  }, []);
+  const inspectAt = (0, import_react2.useCallback)(async (px, py) => {
+    const hit = await hitTest(px, py);
+    if (hit) {
+      setTarget(hit);
+      setMode("compose");
+    }
+  }, []);
+  const onInspectTap = (0, import_react2.useCallback)(
+    (e) => {
+      const ne = e.nativeEvent ?? {};
+      void inspectAt(ne.pageX ?? ne.locationX ?? 0, ne.pageY ?? ne.locationY ?? 0);
+    },
+    [inspectAt]
+  );
+  const submitCurrent = (0, import_react2.useCallback)(
+    async (override) => {
+      const t = (override ?? text).trim();
+      if (!target || !t) return "";
+      const id = await (0, import_core.captureFeedback)({
+        text: t,
+        elementId: target.fbId,
+        elementInfo: { tagName: target.tagName, rect: target.rect }
+      });
+      reset();
+      return id;
+    },
+    [target, text, reset]
+  );
+  const api = (0, import_react2.useMemo)(
+    () => ({
+      openInspector: () => setMode("inspect"),
+      closeInspector: () => reset(),
+      inspectAt,
+      submitCurrent,
+      submit: (input) => (0, import_core.captureFeedback)(input),
+      isInspecting: mode !== "idle"
+    }),
+    [mode, reset, inspectAt, submitCurrent]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ctx.Provider, { value: api, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: styles.flex, children: [
+    children,
+    target && mode === "compose" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native2.View,
+      {
+        pointerEvents: "none",
+        style: [
+          styles.highlight,
+          { left: target.rect.x, top: target.rect.y, width: target.rect.w, height: target.rect.h, borderColor: accentColor }
+        ]
+      }
+    ),
+    mode === "inspect" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: import_react_native2.StyleSheet.absoluteFill, onStartShouldSetResponder: () => true, onResponderRelease: onInspectTap, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: [styles.hint, { backgroundColor: accentColor }], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: styles.hintText, children: "Tap an element to report" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native2.Pressable,
+      {
+        onPress: () => setMode((m) => m === "idle" ? "inspect" : "idle"),
+        style: [styles.launcher, { backgroundColor: mode !== "idle" ? "#111827" : accentColor }],
+        testID: "loupfeed-launcher",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: styles.launcherText, children: mode === "idle" ? "Feedback" : "Cancel" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Modal, { visible: mode === "compose", transparent: true, animationType: "slide", onRequestClose: reset, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: styles.modalWrap, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: styles.sheet, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: [styles.targetLabel, { color: accentColor }], children: (target?.tagName ?? "element") + " \xB7 " + (target?.fbId ?? "") }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_native2.TextInput,
+        {
+          value: text,
+          onChangeText: setText,
+          placeholder: "What's wrong with this element?",
+          placeholderTextColor: "#9ca3af",
+          multiline: true,
+          autoFocus: true,
+          style: styles.input,
+          testID: "loupfeed-input"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: styles.row, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Pressable, { onPress: reset, style: styles.btnGhost, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: styles.btnGhostText, children: "Cancel" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_native2.Pressable,
+          {
+            onPress: () => void submitCurrent(),
+            style: [styles.btnPrimary, { backgroundColor: accentColor }],
+            testID: "loupfeed-send",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.Text, { style: styles.btnPrimaryText, children: "Send" })
+          }
+        )
+      ] })
+    ] }) }) })
+  ] }) });
+}
+function useFeedback() {
+  const ctx = (0, import_react2.useContext)(Ctx);
+  if (!ctx) throw new Error("useFeedback() must be used within <FeedbackRoot>");
+  return ctx;
+}
+var styles = import_react_native2.StyleSheet.create({
+  flex: { flex: 1 },
+  highlight: {
+    position: "absolute",
+    borderWidth: 2,
+    borderRadius: 4,
+    backgroundColor: "rgba(109,40,217,0.12)"
+  },
+  hint: {
+    position: "absolute",
+    top: 56,
+    alignSelf: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 999
+  },
+  hintText: { color: "#fff", fontWeight: "600", fontSize: 13 },
+  launcher: {
+    position: "absolute",
+    right: 16,
+    bottom: 36,
+    paddingHorizontal: 18,
+    paddingVertical: 11,
+    borderRadius: 999,
+    shadowColor: "#000",
+    shadowOpacity: 0.25,
+    shadowRadius: 8,
+    shadowOffset: { width: 0, height: 3 },
+    elevation: 4
+  },
+  launcherText: { color: "#fff", fontWeight: "700", fontSize: 14 },
+  modalWrap: { flex: 1, justifyContent: "flex-end", backgroundColor: "rgba(0,0,0,0.35)" },
+  sheet: { backgroundColor: "#fff", borderTopLeftRadius: 18, borderTopRightRadius: 18, padding: 18, paddingBottom: 34 },
+  targetLabel: { fontFamily: "Menlo", fontSize: 12, fontWeight: "700", marginBottom: 8 },
+  input: {
+    minHeight: 80,
+    borderWidth: 1,
+    borderColor: "#e4e4e7",
+    borderRadius: 10,
+    padding: 12,
+    fontSize: 15,
+    textAlignVertical: "top",
+    color: "#111827"
+  },
+  row: { flexDirection: "row", justifyContent: "flex-end", gap: 10, marginTop: 12 },
+  btnGhost: { paddingHorizontal: 16, paddingVertical: 10, borderRadius: 10 },
+  btnGhostText: { color: "#6b7280", fontWeight: "600", fontSize: 14 },
+  btnPrimary: { paddingHorizontal: 18, paddingVertical: 10, borderRadius: 10 },
+  btnPrimaryText: { color: "#fff", fontWeight: "700", fontSize: 14 }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FeedbackRoot,
+  addBreadcrumb,
+  captureFeedback,
+  close,
+  getActiveRecorder,
+  getClient,
+  getCurrentScope,
+  getRegistered,
+  init,
+  installTagging,
+  measureFbId,
+  setContext,
+  setReplayRecorder,
+  setTag,
+  setTags,
+  setUser,
+  useFeedback,
+  wireframeRecorder,
+  withScope
+});
+//# sourceMappingURL=index.cjs.map