react-native-nitro-tracing 0.6.0

package/lib/module/react.mjs

@@ -0,0 +1,3851 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/react/TraceInspector.tsx
+import { useEffect as useEffect3 } from "react";
+import { Modal as Modal3, ScrollView as ScrollView4, StatusBar, StyleSheet as StyleSheet9 } from "react-native";
+import { SafeAreaProvider as SafeAreaProvider2, SafeAreaView as SafeAreaView3 } from "react-native-safe-area-context";
+
+// src/react/store.ts
+import { useSyncExternalStore } from "react";
+function createStore(initial) {
+  let value = initial;
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    get: () => value,
+    set(patch) {
+      value = { ...value, ...patch };
+      for (const listener of listeners) listener();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+}
+var useStore = (store, select) => useSyncExternalStore(
+  store.subscribe,
+  () => select(store.get()),
+  () => select(store.get())
+);
+
+// src/react/readSnapshot.ts
+async function readSnapshot(recording, previous) {
+  const page = {
+    spans: [],
+    marks: [],
+    metrics: [],
+    nextSequence: previous?.nextSequence ?? 0,
+    earliestSequence: 0,
+    droppedEvents: 0
+  };
+  const budget = Math.max(1, Math.ceil(recording.getStats().eventCount / 1e3));
+  for (let i = 0; i < budget; i++) {
+    const batch = await recording.readEvents({
+      afterSequence: page.nextSequence,
+      limit: 1e3
+    });
+    const cursor = page.nextSequence;
+    page.spans.push(...batch.spans);
+    page.marks.push(...batch.marks);
+    page.metrics.push(...batch.metrics);
+    page.nextSequence = batch.nextSequence;
+    page.earliestSequence = batch.earliestSequence;
+    page.droppedEvents = batch.droppedEvents;
+    if (batch.nextSequence === cursor || batch.spans.length + batch.marks.length + batch.metrics.length < 1e3)
+      break;
+  }
+  if (!previous) return page;
+  if (page.nextSequence === previous.nextSequence && page.earliestSequence === previous.earliestSequence && page.droppedEvents === previous.droppedEvents)
+    return previous;
+  const keep = (old, added) => {
+    const evicted = old.length > 0 && old[0].sequence < page.earliestSequence;
+    if (!evicted && added.length === 0) return old;
+    return [
+      ...evicted ? old.filter((event) => event.sequence >= page.earliestSequence) : old,
+      ...added
+    ];
+  };
+  return {
+    ...page,
+    spans: keep(previous.spans, page.spans),
+    marks: keep(previous.marks, page.marks),
+    metrics: keep(previous.metrics, page.metrics)
+  };
+}
+
+// src/react/useTraceViewer.ts
+import {
+  useCallback,
+  useEffect,
+  useDeferredValue,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore as useSyncExternalStore2
+} from "react";
+
+// src/react/explorerModel.ts
+var defaultQuery = () => ({
+  search: "",
+  outcomes: [],
+  sources: [],
+  minDuration: "",
+  from: "",
+  to: "",
+  correlation: "",
+  sort: "newest"
+});
+var isSpan = (event) => "spanId" in event;
+var sourceOf = (event) => event.attributes.find((a) => a.key === "source")?.value || "unknown";
+var compareText = (a, b) => a < b ? -1 : a > b ? 1 : 0;
+var identity = (event) => isSpan(event) ? event.spanId : `mark:${event.sequence}`;
+var tie = (a, b) => compareText(identity(a), identity(b)) || a.sequence - b.sequence;
+var chronological = (a, b) => a.timestampMs - b.timestampMs || tie(a, b);
+var durationOf = (event) => isSpan(event) ? event.durationMs : 0;
+var endOf = (event) => event.timestampMs + durationOf(event);
+var numeric = (value) => value.trim() && Number.isFinite(Number(value)) ? Number(value) : void 0;
+var overlaps = (start, duration, query) => {
+  const from = numeric(query.from);
+  const to = numeric(query.to);
+  return (from === void 0 || start + duration >= from) && (to === void 0 || start <= to);
+};
+var matchesSearch = (event, search) => !search || [
+  event.name,
+  event.correlationId,
+  isSpan(event) ? event.spanId : "",
+  ...event.attributes.flatMap((a) => [a.key, a.value])
+].some((value) => value.toLowerCase().includes(search.toLowerCase()));
+var forest = (spans) => {
+  const sorted = [...spans].sort(chronological);
+  const byId = new Map(sorted.map((span) => [span.spanId, span]));
+  const children = /* @__PURE__ */ new Map();
+  const roots = [];
+  for (const span of sorted) {
+    const parent = byId.get(span.parentSpanId);
+    if (!parent || parent === span) roots.push(span);
+    else {
+      const siblings = children.get(parent) ?? [];
+      siblings.push(span);
+      children.set(parent, siblings);
+    }
+  }
+  const visited = /* @__PURE__ */ new Set();
+  const rows = [];
+  const rowBySpan = /* @__PURE__ */ new Map();
+  for (const root of [...roots, ...sorted]) {
+    if (visited.has(root)) continue;
+    const stack = [{ span: root, depth: 0 }];
+    while (stack.length) {
+      const next = stack.pop();
+      if (visited.has(next.span)) continue;
+      visited.add(next.span);
+      const row = { ...next, root, children: 0 };
+      rows.push(row);
+      rowBySpan.set(next.span, row);
+      const descendants = children.get(next.span) ?? [];
+      for (let i = descendants.length - 1; i >= 0; i--)
+        stack.push({
+          span: descendants[i],
+          depth: next.depth + 1,
+          parent: next.span
+        });
+    }
+  }
+  for (let i = rows.length - 1; i >= 0; i--) {
+    const row = rows[i];
+    const parent = row.parent && rowBySpan.get(row.parent);
+    if (parent) parent.children += row.children + 1;
+  }
+  return rows;
+};
+var buildTraces = (page) => {
+  const groups = /* @__PURE__ */ new Map();
+  for (const event of [...page.spans, ...page.marks]) {
+    if (!event.correlationId) continue;
+    const key = `correlation:${event.correlationId}`;
+    const group = groups.get(key) ?? { id: key, events: [] };
+    group.events.push(event);
+    groups.set(key, group);
+  }
+  for (const row of forest(page.spans.filter((span) => !span.correlationId))) {
+    const key = `span:${row.root.spanId}`;
+    const group = groups.get(key) ?? { id: key, events: [] };
+    group.events.push(row.span);
+    groups.set(key, group);
+  }
+  return [...groups.values()].map(({ id, events }) => {
+    events.sort(chronological);
+    const spans = events.filter(isSpan);
+    const start = events[0].timestampMs;
+    const end = events.reduce(
+      (latest, event) => Math.max(latest, endOf(event)),
+      start
+    );
+    return {
+      id,
+      name: events[0].name,
+      start,
+      duration: end - start,
+      errors: spans.filter((s2) => s2.outcome === "error").length,
+      spans,
+      marks: events.filter((e) => !isSpan(e)),
+      sources: [...new Set(events.map(sourceOf))].sort(compareText)
+    };
+  }).sort((a, b) => b.start - a.start || compareText(a.id, b.id));
+};
+var queryEvents = (events, query) => {
+  const search = query.search.toLowerCase();
+  const minimum = numeric(query.minDuration);
+  return events.filter(
+    (event) => matchesSearch(event, search) && (!query.correlation || event.correlationId === query.correlation) && (!query.sources.length || query.sources.includes(sourceOf(event))) && (!isSpan(event) || !query.outcomes.length || query.outcomes.includes(event.outcome)) && (!isSpan(event) || minimum === void 0 || event.durationMs >= minimum) && overlaps(event.timestampMs, durationOf(event), query)
+  ).sort((a, b) => {
+    let order = 0;
+    switch (query.sort) {
+      case "oldest":
+        order = a.timestampMs - b.timestampMs;
+        break;
+      case "longest":
+        order = durationOf(b) - durationOf(a);
+        break;
+      case "shortest":
+        order = durationOf(a) - durationOf(b);
+        break;
+      case "name":
+        order = compareText(a.name, b.name);
+        break;
+      case "errors":
+        order = Number(isSpan(b) && b.outcome === "error") - Number(isSpan(a) && a.outcome === "error");
+        break;
+      default:
+        order = b.timestampMs - a.timestampMs;
+    }
+    return order || tie(a, b);
+  });
+};
+var queryTraces = (traces, query) => {
+  const search = query.search.toLowerCase();
+  const minimum = numeric(query.minDuration);
+  return traces.filter((trace) => {
+    const events = [...trace.spans, ...trace.marks];
+    return (!search || events.some((event) => matchesSearch(event, search))) && (!query.correlation || events.some((event) => event.correlationId === query.correlation)) && (!query.sources.length || trace.sources.some((source) => query.sources.includes(source))) && (!query.outcomes.length || query.outcomes.some(
+      (outcome) => outcome === "error" ? trace.errors > 0 : (outcome === "success" || outcome === "no-error") && trace.errors === 0
+    )) && (minimum === void 0 || trace.duration >= minimum) && overlaps(trace.start, trace.duration, query);
+  }).sort((a, b) => {
+    let order = 0;
+    switch (query.sort) {
+      case "oldest":
+        order = a.start - b.start;
+        break;
+      case "longest":
+        order = b.duration - a.duration;
+        break;
+      case "shortest":
+        order = a.duration - b.duration;
+        break;
+      case "errors":
+        order = b.errors - a.errors;
+        break;
+      case "count":
+        order = b.spans.length - a.spans.length;
+        break;
+      case "name":
+        order = compareText(a.name, b.name);
+        break;
+      default:
+        order = b.start - a.start;
+    }
+    return order || compareText(a.id, b.id);
+  });
+};
+var hierarchyRows = (spans, collapsed) => {
+  const rows = forest(spans);
+  const start = spans.reduce(
+    (min, span) => Math.min(min, span.timestampMs),
+    Infinity
+  );
+  const end = spans.reduce((max, span) => Math.max(max, endOf(span)), -Infinity);
+  const duration = Math.max(1, end - start);
+  let hiddenBelow = Infinity;
+  return rows.filter((row) => {
+    if (row.depth > hiddenBelow) return false;
+    hiddenBelow = collapsed.has(row.span.spanId) ? row.depth : Infinity;
+    return true;
+  }).map(({ span, depth, children }) => ({
+    span,
+    depth,
+    children,
+    offset: (span.timestampMs - start) / duration,
+    width: span.durationMs / duration
+  }));
+};
+var traceForSpan = (traces, span) => traces.find(
+  (trace) => trace.spans.some(
+    (member) => member.spanId === span.spanId && member.sequence === span.sequence
+  )
+);
+
+// src/react/viewerModel.ts
+var num = (value) => Math.abs(value) >= 100 ? value.toFixed(0) : value.toFixed(1);
+var formatMetric = (value, unit) => {
+  if (unit === "ms" && Math.abs(value) >= 1e3)
+    return `${(value / 1e3).toFixed(2)} s`;
+  if (unit === "MB" && Math.abs(value) >= 1024)
+    return `${(value / 1024).toFixed(2)} GB`;
+  if (unit === "count") return value.toFixed(0);
+  if (unit === "%") return `${num(value)}%`;
+  if (unit.endsWith("/s")) return `${num(value)}/s`;
+  return `${num(value)} ${unit}`;
+};
+var metricSeries = (metrics) => {
+  const groups = /* @__PURE__ */ new Map();
+  for (const metric of metrics) {
+    const key = `${metric.name} (${metric.unit})`;
+    const group = groups.get(key) ?? [];
+    group.push(metric);
+    groups.set(key, group);
+  }
+  return [...groups].map(([name, retained]) => {
+    const samples = retained.sort((a, b) => a.timestampMs - b.timestampMs).slice(-40);
+    const values = retained.map((sample) => sample.value).sort((a, b) => a - b);
+    return {
+      latest: retained[retained.length - 1]?.value ?? 0,
+      median: values.length ? (values[Math.floor((values.length - 1) / 2)] + values[Math.ceil((values.length - 1) / 2)]) / 2 : 0,
+      min: values[0] ?? 0,
+      peak: values[values.length - 1] ?? 0,
+      p95: values[Math.max(0, Math.ceil(values.length * 0.95) - 1)] ?? 0,
+      name,
+      /** Metric name without the unit suffix used for grouping. */
+      metric: retained[0].name,
+      unit: retained[0].unit,
+      samples,
+      retainedCount: retained.length,
+      startMs: samples[0]?.timestampMs ?? 0,
+      endMs: samples[samples.length - 1]?.timestampMs ?? 0,
+      max: Math.max(1, ...samples.map((sample) => Math.abs(sample.value)))
+    };
+  });
+};
+var recordingMetrics = (page) => metricSeries([
+  ...page.metrics,
+  ...page.spans.filter((span) => span.outcome === "success" || span.outcome === "error").map((span) => ({
+    ...span,
+    name: `duration: ${span.name}`,
+    value: span.durationMs,
+    unit: "ms"
+  }))
+]);
+var operationMetrics = (spans) => {
+  const groups = /* @__PURE__ */ new Map();
+  for (const span of spans) {
+    const group = groups.get(span.name) ?? [];
+    group.push(span);
+    groups.set(span.name, group);
+  }
+  return [...groups].map(([name, samples]) => {
+    const completed = samples.filter(
+      (s2) => s2.outcome === "success" || s2.outcome === "error"
+    );
+    return {
+      name,
+      count: samples.length,
+      errors: completed.filter((s2) => s2.outcome === "error").length,
+      errorRate: completed.length ? completed.filter((s2) => s2.outcome === "error").length / completed.length * 100 : void 0,
+      cancelled: samples.filter((s2) => s2.outcome === "cancelled").length,
+      interrupted: samples.filter((s2) => s2.outcome === "interrupted").length
+    };
+  }).sort((a, b) => b.count - a.count);
+};
+
+// src/react/topics.ts
+var topicIds = [
+  "startup",
+  "screens",
+  "network",
+  "responsiveness",
+  "resources",
+  "errors",
+  "custom"
+];
+var topicGlyph = {
+  startup: { icon: "\u25F4", color: "#ff9500" },
+  screens: { icon: "\u25A2", color: "#007aff" },
+  network: { icon: "\u21C5", color: "#34c759" },
+  responsiveness: { icon: "\u25F7", color: "#5856d6" },
+  errors: { icon: "\u25B3", color: "#ff3b30" },
+  resources: { icon: "\u25EB", color: "#30b0c7" },
+  custom: { icon: "\u2022", color: "#8e8e93" }
+};
+var defaultBudgets = {
+  appReadyMs: 2e3,
+  screenMs: 1e3,
+  requestMs: 1e3,
+  stallMs: 250
+};
+var collectorsFor = {
+  startup: [],
+  screens: ["navigation"],
+  network: ["network", "sentry"],
+  responsiveness: ["runtime-metrics", "native-metrics", "sentry"],
+  resources: ["native-metrics"],
+  errors: ["errors"],
+  custom: []
+};
+var attribute = (event, key) => event.attributes.find((a) => a.key === key)?.value;
+var isSpan2 = (event) => "spanId" in event;
+var isMetric = (event) => "unit" in event;
+var topicOf = (event) => {
+  const source = attribute(event, "source");
+  if (event.name.startsWith("app.ready.") || event.name.startsWith("app.start."))
+    return "startup";
+  if (event.name.startsWith("process.")) return "resources";
+  if (event.name.startsWith("ui.")) return "responsiveness";
+  if (source === "navigation") return "screens";
+  if (source === "network") return "network";
+  if (source === "error") return "errors";
+  if (source === "js-runtime" || event.name === "js.longtask")
+    return "responsiveness";
+  return "custom";
+};
+var p95 = (values) => {
+  if (!values.length) return void 0;
+  const sorted = [...values].sort((a, b) => a - b);
+  return sorted[Math.max(0, Math.ceil(sorted.length * 0.95) - 1)];
+};
+var over = (kind, topic, title, event, valueMs, budgetMs) => valueMs > budgetMs ? {
+  kind,
+  topic,
+  title,
+  event,
+  valueMs,
+  budgetMs,
+  severity: valueMs / budgetMs
+} : void 0;
+var summarizeTopics = (page, collectors, budgets = defaultBudgets) => {
+  const byTopic = new Map(topicIds.map((id) => [id, []]));
+  for (const event of [...page.spans, ...page.marks, ...page.metrics])
+    byTopic.get(topicOf(event)).push(event);
+  const issues = [];
+  const add = (issue) => issue && issues.push(issue);
+  for (const event of [...page.spans, ...page.marks, ...page.metrics]) {
+    const topic = topicOf(event);
+    if (isMetric(event)) {
+      if (topic === "startup")
+        add(
+          over(
+            "slowStartup",
+            topic,
+            event.name,
+            event,
+            event.value,
+            budgets.appReadyMs
+          )
+        );
+      else if (event.name === "navigation.transition")
+        add(
+          over(
+            "slowScreen",
+            topic,
+            attribute(event, "screen") ?? event.name,
+            event,
+            event.value,
+            budgets.screenMs
+          )
+        );
+      else if (event.name === "ui.frame_gap.max")
+        add(
+          over(
+            "uiStall",
+            topic,
+            event.name,
+            event,
+            event.value,
+            budgets.stallMs
+          )
+        );
+      else if (event.name === "ui.frames.frozen" && event.value > 0)
+        add({
+          kind: "frozenFrames",
+          topic,
+          title: `${event.value} frozen frames`,
+          event,
+          severity: 900
+        });
+      else if (event.name === "js.frame_gap.max" || event.name === "js.event_loop.delay")
+        add(
+          over("stall", topic, event.name, event, event.value, budgets.stallMs)
+        );
+    } else if (isSpan2(event)) {
+      if (topic === "network")
+        add(
+          event.outcome === "error" ? {
+            kind: "failedRequest",
+            topic,
+            title: event.name,
+            event,
+            severity: 1e3
+          } : over(
+            "slowRequest",
+            topic,
+            event.name,
+            event,
+            event.durationMs,
+            budgets.requestMs
+          )
+        );
+      else if (event.name === "js.longtask")
+        add(
+          over(
+            "stall",
+            topic,
+            event.name,
+            event,
+            event.durationMs,
+            budgets.stallMs
+          )
+        );
+      else if (event.outcome === "error")
+        add({
+          kind: "error",
+          topic: "errors",
+          title: event.name,
+          event,
+          severity: 1e3
+        });
+    } else if (topic === "errors")
+      add({
+        kind: "error",
+        topic,
+        title: attribute(event, "message") ?? event.name,
+        event,
+        severity: 1e3
+      });
+  }
+  issues.sort(
+    (a, b) => b.severity - a.severity || b.event.timestampMs - a.event.timestampMs
+  );
+  const topics = topicIds.map((id) => {
+    const events = byTopic.get(id);
+    const own = issues.filter((issue) => issue.topic === id);
+    const metricValues = (name) => events.filter((e) => isMetric(e) && e.name === name).map((e) => e.value);
+    const spans = events.filter(isSpan2);
+    const summary = {
+      id,
+      tracked: id === "custom" || events.length > 0 || collectorsFor[id].some((collector) => collectors.includes(collector)),
+      issues: own
+    };
+    switch (id) {
+      case "startup":
+        return {
+          ...summary,
+          count: events.length,
+          value: events.filter(isMetric).at(-1)?.value
+        };
+      case "screens":
+        return {
+          ...summary,
+          count: events.filter((e) => e.name === "navigation.enter").length,
+          value: p95(metricValues("navigation.transition"))
+        };
+      case "network":
+        return {
+          ...summary,
+          count: spans.length,
+          value: p95(spans.map((s2) => s2.durationMs))
+        };
+      case "resources": {
+        const latest = (name) => {
+          const values = metricValues(name);
+          return values.length ? values[values.length - 1].toFixed(0) : "\u2014";
+        };
+        return {
+          ...summary,
+          count: events.length,
+          values: {
+            cpu: latest("process.cpu"),
+            memory: latest("process.memory")
+          }
+        };
+      }
+      case "responsiveness":
+      case "errors":
+        return { ...summary, count: own.length };
+      default:
+        return { ...summary, count: spans.length };
+    }
+  });
+  return { topics, issues };
+};
+var buildTimeline = (page, issues, limit = 500) => {
+  const flagged = new Set(issues.map((issue) => issue.event));
+  const visits = page.marks.filter(
+    (m) => m.name === "navigation.enter" && attribute(m, "source") === "navigation"
+  ).sort((a, b) => a.timestampMs - b.timestampMs);
+  const visitSet = new Set(visits);
+  const events = [
+    ...page.spans.filter((s2) => attribute(s2, "source") !== "navigation"),
+    ...page.marks.filter((m) => !visitSet.has(m)),
+    ...page.metrics.filter((m) => flagged.has(m))
+  ].sort((a, b) => b.timestampMs - a.timestampMs || b.sequence - a.sequence).slice(0, limit);
+  const groups = /* @__PURE__ */ new Map();
+  for (const event of events) {
+    let index = -1;
+    for (let i = visits.length - 1; i >= 0; i--)
+      if (visits[i].timestampMs <= event.timestampMs) {
+        index = i;
+        break;
+      }
+    const group = groups.get(index) ?? [];
+    group.push(event);
+    groups.set(index, group);
+  }
+  const items = [];
+  for (let index = visits.length - 1; index >= -1; index--) {
+    const group = groups.get(index) ?? [];
+    const visit = visits[index];
+    if (!visit && !group.length) continue;
+    if (visits.length)
+      items.push({
+        kind: "screen",
+        key: visit ? `screen:${visit.sequence}` : "screen:before",
+        name: visit ? attribute(visit, "screen") ?? "" : "",
+        timestampMs: visit?.timestampMs ?? 0
+      });
+    for (const event of group)
+      items.push({
+        kind: "event",
+        key: `${"spanId" in event ? event.spanId : "unit" in event ? "metric" : "mark"}:${event.sequence}`,
+        event,
+        topic: topicOf(event),
+        issue: flagged.has(event)
+      });
+  }
+  return items;
+};
+var currentScreen = (page) => {
+  let latest;
+  for (const mark of page.marks)
+    if (mark.name === "navigation.enter" && (!latest || mark.timestampMs >= latest.timestampMs))
+      latest = mark;
+  return latest && attribute(latest, "screen");
+};
+var currentVisit = (items) => {
+  const start = items.findIndex((item) => item.kind === "screen");
+  const header = start >= 0 ? items[start] : void 0;
+  const next = items.findIndex((item, i) => i > start && item.kind === "screen");
+  const events = items.slice(start + 1, start >= 0 && next >= 0 ? next : void 0).filter((item) => item.kind === "event");
+  const count = (test) => events.filter(test).length;
+  return {
+    screen: header?.kind === "screen" ? header.name : void 0,
+    sinceMs: header?.kind === "screen" ? header.timestampMs : void 0,
+    events,
+    requests: count((item) => item.topic === "network"),
+    stalls: count((item) => item.topic === "responsiveness" && item.issue),
+    errors: count(
+      (item) => item.topic === "errors" || "outcome" in item.event && item.event.outcome === "error"
+    ),
+    issues: count((item) => item.issue)
+  };
+};
+var latestMetric = (page, name) => {
+  let latest;
+  for (const metric of page.metrics)
+    if (metric.name === name && (!latest || metric.timestampMs >= latest.timestampMs))
+      latest = metric;
+  return latest?.value;
+};
+
+// src/react/useTraceViewer.ts
+var empty = () => ({
+  spans: [],
+  marks: [],
+  metrics: [],
+  nextSequence: 0,
+  earliestSequence: 0,
+  droppedEvents: 0
+});
+var useTraceViewer = (client, budgets) => {
+  const snapshot = useSyncExternalStore2(
+    client.subscribe,
+    client.getSnapshot,
+    client.getSnapshot
+  );
+  const [tab, setTab] = useState("overview");
+  const [mode, setMode] = useState("traces");
+  const [page, setPage] = useState(empty);
+  const [telemetry] = useState(() => createStore({}));
+  const setStats = (stats) => telemetry.set({ stats });
+  const setError = (error) => telemetry.set({ error });
+  const pendingPage = useRef(void 0);
+  const setPending = (value) => {
+    pendingPage.current = value;
+    telemetry.set({
+      pending: value ? {
+        nextSequence: value.nextSequence,
+        earliestSequence: value.earliestSequence
+      } : void 0
+    });
+  };
+  const [queries, setQueries] = useState({
+    traces: defaultQuery(),
+    spans: defaultQuery(),
+    marks: defaultQuery()
+  });
+  const [details, setDetails] = useState([]);
+  const [paused, setPaused] = useState(false);
+  const [holding, setHolding] = useState(false);
+  const [metricQuery, setMetricQuery] = useState("");
+  const [metricCategory, setMetricCategory] = useState("all");
+  const [metricSort, setMetricSort] = useState("name");
+  const offsets = useRef({});
+  const detailState = useRef({});
+  const latestPage = useRef(page);
+  const session = useRef(void 0);
+  const controls = useRef({ paused, holding, detail: details.length > 0 });
+  controls.current = { paused, holding, detail: details.length > 0 };
+  latestPage.current = page;
+  useEffect(() => {
+    if (!snapshot.visible) return;
+    let cached;
+    let cachedRecording;
+    let cancelled = false;
+    let timer;
+    const refresh = async () => {
+      try {
+        const recording = client.getRecording();
+        if (recording) {
+          if (cachedRecording !== recording) {
+            cached = void 0;
+            cachedRecording = recording;
+          }
+          const next = await readSnapshot(recording, cached);
+          cached = next;
+          if (cancelled || recording !== client.getRecording()) return;
+          const current = recording.getStats();
+          setStats(current);
+          if (session.current !== current.sessionId) {
+            session.current = current.sessionId;
+            setDetails([]);
+            setPending(void 0);
+            setPage(next);
+            setHolding(false);
+            offsets.current = {};
+            detailState.current = {};
+            setQueries(
+              (previous) => Object.fromEntries(
+                Object.entries(previous).map(([key, q]) => [
+                  key,
+                  { ...q, from: "", to: "" }
+                ])
+              )
+            );
+          } else if (controls.current.paused || controls.current.holding || controls.current.detail) {
+            if (next.nextSequence !== latestPage.current.nextSequence || next.droppedEvents !== latestPage.current.droppedEvents)
+              setPending(next);
+          } else {
+            setPage(next);
+            setPending(void 0);
+          }
+        }
+        if (!cancelled) setError(client.getError());
+      } catch (failure) {
+        if (!cancelled) setError(String(failure));
+      } finally {
+        if (!cancelled) timer = setTimeout(refresh, 1e3);
+      }
+    };
+    void refresh();
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [client, snapshot.visible]);
+  const traces = useMemo(() => buildTraces(page), [page.spans, page.marks]);
+  const metrics = useMemo(
+    () => tab === "explore" ? [] : recordingMetrics(page),
+    [page, tab]
+  );
+  const collectors = snapshot.collectors;
+  const { appReadyMs, screenMs, requestMs, stallMs } = {
+    ...defaultBudgets,
+    ...budgets
+  };
+  const summary = useMemo(
+    () => summarizeTopics(page, collectors ?? [], {
+      appReadyMs,
+      screenMs,
+      requestMs,
+      stallMs
+    }),
+    [page, collectors, appReadyMs, screenMs, requestMs, stallMs]
+  );
+  const timeline = useMemo(
+    () => tab === "timeline" ? buildTimeline(page, summary.issues) : [],
+    [page, summary.issues, tab]
+  );
+  const screen = useMemo(() => currentScreen(page), [page.marks]);
+  const operations = useMemo(
+    () => tab === "metrics" ? operationMetrics(page.spans) : [],
+    [page.spans, tab]
+  );
+  const query = queries[mode];
+  const deferredQuery = useDeferredValue(query);
+  const results = useMemo(
+    () => mode === "traces" ? queryTraces(traces, deferredQuery) : queryEvents(
+      mode === "spans" ? page.spans : page.marks,
+      deferredQuery
+    ),
+    [mode, traces, page.spans, page.marks, deferredQuery]
+  );
+  const updateQuery = (patch) => {
+    setHolding(true);
+    setQueries((previous) => ({
+      ...previous,
+      [mode]: { ...previous[mode], ...patch }
+    }));
+    offsets.current[mode] = 0;
+  };
+  const apply = () => {
+    const pending = pendingPage.current;
+    if (pending) setPage(pending);
+    setPending(void 0);
+    setHolding(false);
+  };
+  const act = (work) => {
+    void Promise.resolve().then(work).catch((failure) => {
+      setError(String(failure));
+      client.reportError(failure);
+    });
+  };
+  const detail = details[details.length - 1];
+  const open = useCallback((next) => {
+    setHolding(true);
+    setDetails((previous) => [...previous.slice(-31), next]);
+  }, []);
+  const showEvents = (mode2, patch) => {
+    setTab("explore");
+    setMode(mode2);
+    setDetails([]);
+    setQueries((previous) => ({
+      ...previous,
+      [mode2]: { ...defaultQuery(), ...patch }
+    }));
+    offsets.current[mode2] = 0;
+    setHolding(true);
+  };
+  return {
+    ...snapshot,
+    client,
+    tab,
+    setTab: (next) => {
+      setDetails([]);
+      setTab(next);
+    },
+    mode,
+    setMode,
+    page,
+    telemetry,
+    traces,
+    topics: summary.topics,
+    issues: summary.issues,
+    timeline,
+    screen,
+    results,
+    query,
+    updateQuery,
+    resetQuery: () => {
+      setQueries((previous) => ({ ...previous, [mode]: defaultQuery() }));
+      offsets.current[mode] = 0;
+    },
+    loaded: mode === "traces" ? traces.length : mode === "spans" ? page.spans.length : page.marks.length,
+    uncorrelated: useMemo(
+      () => page.spans.filter((s2) => !s2.correlationId).length + page.marks.filter((s2) => !s2.correlationId).length,
+      [page.spans, page.marks]
+    ),
+    detail,
+    detailState,
+    details,
+    open,
+    back: () => setDetails((previous) => previous.slice(0, -1)),
+    traceFor: (span) => traceForSpan(traces, span),
+    showSpans: (patch) => showEvents("spans", patch),
+    showMarks: (patch) => showEvents("marks", patch),
+    paused,
+    holding,
+    setHolding,
+    apply,
+    togglePause: () => {
+      if (paused) apply();
+      setPaused(!paused);
+    },
+    offsets,
+    metrics,
+    operations,
+    metricQuery,
+    setMetricQuery,
+    metricCategory,
+    setMetricCategory,
+    metricSort,
+    setMetricSort,
+    start: () => act(client.start),
+    stop: () => act(client.stop),
+    export: () => act(client.export),
+    sharePerfetto: () => act(() => client.shareTrace("perfetto")),
+    toggleProfile: () => act(client.toggleProfile),
+    shareProfile: () => act(client.shareProfile),
+    playground: () => act(client.playground),
+    playgroundResult: snapshot.playground,
+    openPlayground: () => {
+      setTab("explore");
+      setMode("traces");
+      setQueries((previous) => ({
+        ...previous,
+        traces: {
+          ...defaultQuery(),
+          correlation: snapshot.playground?.correlationId ?? ""
+        }
+      }));
+    }
+  };
+};
+
+// src/react/InspectorHeader.tsx
+import { Alert, StyleSheet as StyleSheet2, Text as Text2, View as View3 } from "react-native";
+
+// src/react/native.tsx
+import { useCallback as useCallback2, useState as useState2 } from "react";
+import {
+  ActionSheetIOS,
+  Platform,
+  View as View2
+} from "react-native";
+
+// src/react/InspectorControls.tsx
+import React from "react";
+import {
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { jsx, jsxs } from "react/jsx-runtime";
+var palette = {
+  // Light system colors, in the spirit of Xcode Instruments.
+  bg: "#ffffff",
+  panel: "#f2f2f7",
+  line: "#d8d8dc",
+  text: "#1d1d1f",
+  muted: "#6e6e73",
+  accent: "#007aff",
+  selected: "#e5efff",
+  error: "#ff3b30",
+  scrim: "#0003"
+};
+var ui = StyleSheet.create({
+  bottomNav: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.line,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    alignItems: "center"
+  },
+  root: { flex: 1, backgroundColor: palette.bg },
+  header: {
+    padding: 14,
+    gap: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.line
+  },
+  row: { flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" },
+  spread: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 10
+  },
+  content: { padding: 16, gap: 12 },
+  title: {
+    fontSize: 21,
+    fontWeight: "700",
+    color: palette.text,
+    flexShrink: 1
+  },
+  heading: { fontSize: 16, fontWeight: "600", color: palette.text },
+  text: { fontSize: 14, color: palette.text },
+  muted: { fontSize: 12, lineHeight: 18, color: palette.muted },
+  error: { color: palette.error, fontSize: 13 },
+  card: {
+    padding: 14,
+    borderRadius: 10,
+    backgroundColor: palette.panel,
+    gap: 9
+  },
+  item: {
+    padding: 15,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.line,
+    gap: 6
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: palette.line,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    color: palette.text,
+    fontSize: 14
+  },
+  button: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 7,
+    backgroundColor: palette.panel,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.line
+  },
+  selected: { backgroundColor: palette.selected, borderColor: palette.accent },
+  buttonText: { color: palette.text, fontSize: 13, fontWeight: "500" },
+  selectedText: { color: palette.accent },
+  link: { color: palette.accent, fontSize: 13 },
+  chart: { height: 86, flexDirection: "row", gap: 2, alignItems: "flex-end" },
+  bar: { flex: 1, backgroundColor: palette.accent, minHeight: 2 },
+  track: {
+    height: 7,
+    backgroundColor: palette.panel,
+    borderRadius: 3,
+    overflow: "hidden"
+  }
+});
+var apple = {
+  grouped: "#f2f2f7",
+  card: "#ffffff",
+  separator: "#c6c6c8",
+  secondary: "#8e8e93",
+  fill: "#e3e3e8"
+};
+var hairline = StyleSheet.hairlineWidth;
+var s = StyleSheet.create({
+  navBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 8,
+    minHeight: 44,
+    backgroundColor: apple.grouped
+  },
+  navSide: { flex: 1, flexDirection: "row", alignItems: "center", gap: 4 },
+  navTitle: {
+    fontSize: 17,
+    fontWeight: "600",
+    color: palette.text,
+    textAlign: "center"
+  },
+  textButton: { paddingHorizontal: 8, paddingVertical: 10 },
+  textButtonLabel: { fontSize: 17, color: palette.accent },
+  iconLabel: { fontSize: 20, color: palette.accent },
+  section: { marginHorizontal: 16, marginTop: 20 },
+  sectionHeader: {
+    fontSize: 13,
+    color: apple.secondary,
+    textTransform: "uppercase",
+    marginLeft: 16,
+    marginBottom: 6
+  },
+  sectionFooter: {
+    fontSize: 13,
+    color: apple.secondary,
+    marginHorizontal: 16,
+    marginTop: 6,
+    lineHeight: 18
+  },
+  sectionBody: {
+    backgroundColor: apple.card,
+    borderRadius: 10,
+    overflow: "hidden"
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    minHeight: 44,
+    paddingVertical: 8,
+    paddingLeft: 16,
+    paddingRight: 12,
+    backgroundColor: apple.card,
+    gap: 12
+  },
+  rowSeparator: {
+    position: "absolute",
+    left: 16,
+    right: 0,
+    bottom: 0,
+    height: hairline,
+    backgroundColor: apple.separator
+  },
+  rowIcon: { width: 22, textAlign: "center", fontSize: 17 },
+  rowText: { flex: 1, gap: 2 },
+  rowTitle: { fontSize: 16, color: palette.text },
+  rowSubtitle: { fontSize: 12, color: apple.secondary },
+  rowValue: {
+    fontSize: 15,
+    fontWeight: "500",
+    color: apple.secondary,
+    fontVariant: ["tabular-nums"]
+  },
+  chevron: { fontSize: 20, color: "#c4c4c7", marginLeft: -4 },
+  check: { width: 20, fontSize: 17, fontWeight: "600", color: palette.accent },
+  pressed: { backgroundColor: "#e5e5ea" },
+  search: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginHorizontal: 16,
+    marginTop: 8,
+    paddingHorizontal: 8,
+    height: 36,
+    borderRadius: 10,
+    backgroundColor: apple.fill,
+    gap: 6
+  },
+  searchInput: { flex: 1, fontSize: 16, color: palette.text, padding: 0 },
+  segmented: {
+    flexDirection: "row",
+    marginHorizontal: 16,
+    marginTop: 10,
+    padding: 2,
+    borderRadius: 9,
+    backgroundColor: apple.fill
+  },
+  segment: {
+    flex: 1,
+    height: 28,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 4,
+    borderRadius: 7
+  },
+  segmentOn: {
+    backgroundColor: apple.card,
+    shadowColor: "#000",
+    shadowOpacity: 0.12,
+    shadowRadius: 3,
+    shadowOffset: { width: 0, height: 1 },
+    elevation: 1
+  },
+  segmentText: { fontSize: 13, fontWeight: "500", color: palette.text },
+  segmentTextOn: { fontWeight: "600" },
+  tabBar: {
+    flexDirection: "row",
+    borderTopWidth: hairline,
+    borderColor: apple.separator,
+    backgroundColor: "#f9f9f9",
+    paddingTop: 6,
+    paddingBottom: 4
+  },
+  tab: { flex: 1, alignItems: "center", gap: 2 },
+  tabIcon: {
+    height: 26,
+    fontSize: 20,
+    lineHeight: 26,
+    textAlign: "center",
+    color: apple.secondary
+  },
+  tabLabel: { fontSize: 10, fontWeight: "500", color: apple.secondary },
+  tabOn: { color: palette.accent },
+  banner: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignSelf: "center",
+    marginTop: 8,
+    paddingHorizontal: 14,
+    paddingVertical: 6,
+    borderRadius: 16,
+    backgroundColor: palette.accent
+  },
+  bannerText: { color: "#fff", fontSize: 13, fontWeight: "600" },
+  scrim: {
+    flex: 1,
+    backgroundColor: palette.scrim,
+    justifyContent: "flex-end"
+  },
+  sheet: { padding: 8, gap: 8 },
+  sheetGroup: {
+    backgroundColor: "rgba(249,249,249,0.97)",
+    borderRadius: 14,
+    overflow: "hidden"
+  },
+  sheetTitle: {
+    fontSize: 13,
+    color: apple.secondary,
+    textAlign: "center",
+    padding: 14,
+    borderBottomWidth: hairline,
+    borderColor: apple.separator
+  },
+  sheetOption: {
+    minHeight: 57,
+    alignItems: "center",
+    justifyContent: "center",
+    borderBottomWidth: hairline,
+    borderColor: apple.separator,
+    paddingHorizontal: 16
+  },
+  sheetOptionText: { fontSize: 20, color: palette.accent },
+  sheetCancel: { fontWeight: "600" }
+});
+function NavBar({
+  left,
+  title,
+  right
+}) {
+  return /* @__PURE__ */ jsxs(View, { style: s.navBar, children: [
+    /* @__PURE__ */ jsx(View, { style: s.navSide, children: left }),
+    /* @__PURE__ */ jsx(Text, { style: s.navTitle, numberOfLines: 1, accessibilityRole: "header", children: title }),
+    /* @__PURE__ */ jsx(View, { style: [s.navSide, { justifyContent: "flex-end" }], children: right })
+  ] });
+}
+function TextButton({
+  label,
+  icon,
+  onPress,
+  disabled,
+  bold,
+  accessibilityLabel
+}) {
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? label,
+      disabled,
+      onPress,
+      hitSlop: 6,
+      style: [s.textButton, disabled && { opacity: 0.35 }],
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [
+            icon ? s.iconLabel : s.textButtonLabel,
+            bold && { fontWeight: "600" }
+          ],
+          children: icon ?? label
+        }
+      )
+    }
+  );
+}
+function Section({
+  header,
+  footer,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(View, { style: s.section, children: [
+    header && /* @__PURE__ */ jsx(Text, { style: s.sectionHeader, children: header }),
+    /* @__PURE__ */ jsx(View, { style: s.sectionBody, children }),
+    footer && /* @__PURE__ */ jsx(Text, { style: s.sectionFooter, children: footer })
+  ] });
+}
+var Row = React.memo(function Row2({
+  title,
+  subtitle,
+  value,
+  icon,
+  iconColor,
+  tint,
+  onPress,
+  last,
+  checked
+}) {
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: checked !== void 0 ? "checkbox" : onPress ? "button" : void 0,
+      accessibilityState: checked !== void 0 ? { checked } : void 0,
+      disabled: !onPress,
+      onPress,
+      style: ({ pressed }) => [s.row, pressed && s.pressed],
+      children: [
+        icon !== void 0 && /* @__PURE__ */ jsx(Text, { style: [s.rowIcon, { color: iconColor ?? palette.accent }], children: icon }),
+        /* @__PURE__ */ jsxs(View, { style: s.rowText, children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [s.rowTitle, tint && { color: tint }],
+              numberOfLines: 1,
+              ellipsizeMode: "middle",
+              children: title
+            }
+          ),
+          !!subtitle && /* @__PURE__ */ jsx(Text, { style: s.rowSubtitle, numberOfLines: 2, children: subtitle })
+        ] }),
+        !!value && /* @__PURE__ */ jsx(Text, { style: [s.rowValue, tint && { color: tint }], children: value }),
+        checked !== void 0 ? /* @__PURE__ */ jsx(Text, { style: s.check, children: checked ? "\u2713" : "" }) : onPress && /* @__PURE__ */ jsx(Text, { style: s.chevron, children: "\u203A" }),
+        !last && /* @__PURE__ */ jsx(View, { style: s.rowSeparator })
+      ]
+    }
+  );
+});
+function SearchField({
+  value,
+  onChange,
+  placeholder
+}) {
+  return /* @__PURE__ */ jsxs(View, { style: s.search, children: [
+    /* @__PURE__ */ jsx(Text, { style: { color: apple.secondary, fontSize: 20 }, children: "\u2315" }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        accessibilityLabel: placeholder,
+        placeholder,
+        placeholderTextColor: apple.secondary,
+        value,
+        onChangeText: onChange,
+        autoCapitalize: "none",
+        autoCorrect: false,
+        clearButtonMode: "while-editing",
+        returnKeyType: "search",
+        style: s.searchInput
+      }
+    )
+  ] });
+}
+function Segmented({
+  options,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(View, { style: s.segmented, accessibilityRole: "tablist", children: options.map((option) => /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "tab",
+      accessibilityState: { selected: option.value === value },
+      onPress: () => onChange(option.value),
+      style: [s.segment, option.value === value && s.segmentOn],
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [s.segmentText, option.value === value && s.segmentTextOn],
+          numberOfLines: 1,
+          adjustsFontSizeToFit: true,
+          minimumFontScale: 0.8,
+          children: option.label
+        }
+      )
+    },
+    option.value
+  )) });
+}
+function TabBar({
+  items,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(View, { style: s.tabBar, accessibilityRole: "tablist", children: items.map((item) => {
+    const on = item.value === value;
+    return /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "tab",
+        accessibilityState: { selected: on },
+        onPress: () => onChange(item.value),
+        style: s.tab,
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [
+                s.tabIcon,
+                item.iconSize ? { fontSize: item.iconSize } : void 0,
+                on && s.tabOn
+              ],
+              children: item.icon
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { style: [s.tabLabel, on && s.tabOn], children: item.label })
+        ]
+      },
+      item.value
+    );
+  }) });
+}
+function Banner({
+  label,
+  onPress
+}) {
+  return /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress, style: s.banner, children: /* @__PURE__ */ jsxs(Text, { style: s.bannerText, children: [
+    "\u2191 ",
+    label
+  ] }) });
+}
+function ActionSheet({
+  title,
+  options,
+  cancelLabel,
+  close
+}) {
+  return /* @__PURE__ */ jsx(Modal, { visible: true, transparent: true, animationType: "fade", onRequestClose: close, children: /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      style: s.scrim,
+      onPress: close,
+      accessibilityLabel: cancelLabel,
+      children: /* @__PURE__ */ jsxs(SafeAreaView, { edges: ["bottom"], style: s.sheet, children: [
+        /* @__PURE__ */ jsxs(View, { style: s.sheetGroup, children: [
+          title && /* @__PURE__ */ jsx(Text, { style: s.sheetTitle, children: title }),
+          options.map((option) => /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityState: {
+                selected: option.selected,
+                disabled: option.disabled
+              },
+              disabled: option.disabled,
+              onPress: () => {
+                close();
+                option.onPress();
+              },
+              style: ({ pressed }) => [s.sheetOption, pressed && s.pressed],
+              children: /* @__PURE__ */ jsxs(
+                Text,
+                {
+                  style: [
+                    s.sheetOptionText,
+                    option.destructive && { color: palette.error },
+                    option.disabled && { color: apple.secondary }
+                  ],
+                  children: [
+                    option.selected ? "\u2713 " : "",
+                    option.label
+                  ]
+                }
+              )
+            },
+            option.label
+          ))
+        ] }),
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            onPress: close,
+            style: ({ pressed }) => [
+              s.sheetGroup,
+              s.sheetOption,
+              pressed && s.pressed
+            ],
+            children: /* @__PURE__ */ jsx(Text, { style: [s.sheetOptionText, s.sheetCancel], children: cancelLabel })
+          }
+        )
+      ] })
+    }
+  ) });
+}
+
+// src/react/native.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var NativeTabView;
+var glass;
+try {
+  NativeTabView = __require("react-native-bottom-tabs").default;
+} catch {
+  NativeTabView = void 0;
+}
+try {
+  glass = __require("expo-glass-effect");
+} catch {
+  glass = void 0;
+}
+var liquidGlass = (() => {
+  try {
+    return Platform.OS === "ios" && !!glass?.isLiquidGlassAvailable();
+  } catch {
+    return false;
+  }
+})();
+function useMenu() {
+  const [config, setConfig] = useState2();
+  const open = useCallback2((next) => {
+    if (Platform.OS !== "ios") return setConfig(next);
+    const enabled = next.options.filter((option) => !option.disabled);
+    const destructive = enabled.findIndex((option) => option.destructive);
+    ActionSheetIOS.showActionSheetWithOptions(
+      {
+        title: next.title,
+        options: [
+          ...enabled.map(
+            (option) => `${option.selected ? "\u2713 " : ""}${option.label}`
+          ),
+          next.cancelLabel
+        ],
+        cancelButtonIndex: enabled.length,
+        destructiveButtonIndex: destructive >= 0 ? destructive : void 0
+      },
+      (index) => enabled[index]?.onPress()
+    );
+  }, []);
+  const element = config ? /* @__PURE__ */ jsx2(ActionSheet, { ...config, close: () => setConfig(void 0) }) : null;
+  return { open, element };
+}
+function NativeTabs({
+  tabs: tabs2,
+  value,
+  onChange,
+  tint,
+  fallback
+}) {
+  const index = Math.max(
+    0,
+    tabs2.findIndex((tab) => tab.key === value)
+  );
+  if (!NativeTabView || Platform.OS !== "ios")
+    return /* @__PURE__ */ jsx2(Fragment, { children: fallback(tabs2[index]?.render()) });
+  return /* @__PURE__ */ jsx2(
+    NativeTabView,
+    {
+      navigationState: {
+        index,
+        routes: tabs2.map((tab) => ({
+          key: tab.key,
+          title: tab.title,
+          focusedIcon: { sfSymbol: tab.sfSymbol },
+          badge: tab.badge
+        }))
+      },
+      onIndexChange: (next) => onChange(tabs2[next].key),
+      renderScene: ({ route }) => tabs2.find((tab) => tab.key === route.key)?.render() ?? null,
+      getLazy: () => true,
+      getFreezeOnBlur: () => true,
+      getBadge: ({ route }) => tabs2.find((tab) => tab.key === route.key)?.badge,
+      minimizeBehavior: "onScrollDown",
+      tabBarActiveTintColor: tint,
+      hapticFeedbackEnabled: true
+    }
+  );
+}
+function Glass({
+  style,
+  fallbackColor,
+  children,
+  interactive
+}) {
+  if (liquidGlass && glass) {
+    const { GlassView } = glass;
+    return /* @__PURE__ */ jsx2(
+      GlassView,
+      {
+        style,
+        glassEffectStyle: "regular",
+        isInteractive: interactive,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(View2, { style: [style, { backgroundColor: fallbackColor }], children });
+}
+
+// src/react/InspectorHeader.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var titleKey = {
+  trace: "traces",
+  span: "spans",
+  metric: "metrics",
+  mark: "marks"
+};
+var tabKey = {
+  overview: "overview",
+  timeline: "timeline",
+  explore: "explore",
+  metrics: "metrics",
+  tools: "tools"
+};
+function InspectorHeader({
+  v: viewer,
+  t
+}) {
+  const live = useStore(viewer.telemetry, (s2) => s2);
+  const v = { ...viewer, ...live };
+  const client = v.client;
+  const menu = useMenu();
+  const canShare = client.canShare && !!v.stats && !v.busy;
+  const startNew = () => Alert.alert(t("replaceTitle"), t("replaceDescription"), [
+    { text: t("cancel"), style: "cancel" },
+    { text: t("start"), style: "destructive", onPress: v.start }
+  ]);
+  const seconds = Math.round((v.stats?.nowMs ?? 0) / 1e3);
+  const lost = [
+    ["lostSpans", v.stats?.droppedSpans],
+    ["lostMarks", v.stats?.droppedMarks],
+    ["lostMetrics", v.stats?.droppedMetrics]
+  ].filter(([, count]) => (count ?? 0) > 0).map(([key, count]) => t(key, { count }));
+  const newEvents = v.pending ? Math.max(0, v.pending.nextSequence - v.page.nextSequence) : 0;
+  return /* @__PURE__ */ jsxs2(View3, { style: styles.root, children: [
+    /* @__PURE__ */ jsx3(
+      NavBar,
+      {
+        left: v.detail ? /* @__PURE__ */ jsx3(TextButton, { label: `\u2039 ${t("back")}`, onPress: v.back }) : /* @__PURE__ */ jsx3(TextButton, { label: t("done"), onPress: client.close, bold: true }),
+        title: t(v.detail ? titleKey[v.detail.kind] : tabKey[v.tab]),
+        right: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx3(
+            TextButton,
+            {
+              icon: "\u21EA",
+              accessibilityLabel: t("share"),
+              onPress: () => menu.open({
+                title: t("shareTitle"),
+                cancelLabel: t("cancel"),
+                options: [
+                  {
+                    label: t("sharePerfetto"),
+                    onPress: v.sharePerfetto,
+                    disabled: !canShare
+                  },
+                  {
+                    label: t("exportAll"),
+                    onPress: v.export,
+                    disabled: !canShare
+                  },
+                  ...v.profilePath && client.canShareProfile ? [{ label: t("shareProfile"), onPress: v.shareProfile }] : []
+                ]
+              }),
+              disabled: !canShare && !v.profilePath
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            TextButton,
+            {
+              icon: "\u22EF",
+              accessibilityLabel: t("more"),
+              onPress: () => menu.open({
+                cancelLabel: t("cancel"),
+                options: [
+                  v.recording ? { label: t("stop"), onPress: v.stop, destructive: true } : { label: t("start"), onPress: v.start },
+                  ...v.recording ? [{ label: t("startNew"), onPress: startNew }] : [],
+                  {
+                    label: t(v.paused ? "resumeUpdates" : "pauseUpdates"),
+                    onPress: v.togglePause
+                  },
+                  { label: t("tools"), onPress: () => v.setTab("tools") }
+                ]
+              })
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs2(Text2, { style: styles.status, numberOfLines: 1, children: [
+      /* @__PURE__ */ jsx3(Text2, { style: { color: v.recording ? palette.error : apple.secondary }, children: v.recording ? "\u25CF" : "\u25CB" }),
+      " ",
+      t(v.recording ? "recording" : "stopped"),
+      " \xB7 ",
+      Math.floor(seconds / 60),
+      ":",
+      String(seconds % 60).padStart(2, "0"),
+      " \xB7 ",
+      v.stats?.eventCount ?? 0,
+      " ",
+      t("events"),
+      v.screen ? ` \xB7 ${v.screen}` : "",
+      v.paused ? ` \xB7 ${t("frozen")}` : ""
+    ] }),
+    lost.length > 0 && /* @__PURE__ */ jsx3(Text2, { style: styles.warning, children: t("lostHistory", { what: lost.join(", ") }) }),
+    v.error && /* @__PURE__ */ jsx3(Text2, { selectable: true, style: styles.warning, numberOfLines: 3, children: v.error }),
+    !v.detail && newEvents > 0 && !v.paused && /* @__PURE__ */ jsx3(
+      Banner,
+      {
+        label: t("newEvents", { count: newEvents }),
+        onPress: v.apply
+      }
+    ),
+    menu.element
+  ] });
+}
+var styles = StyleSheet2.create({
+  root: {
+    backgroundColor: apple.grouped,
+    borderBottomWidth: StyleSheet2.hairlineWidth,
+    borderColor: apple.separator,
+    paddingBottom: 8
+  },
+  status: {
+    fontSize: 13,
+    color: apple.secondary,
+    textAlign: "center",
+    paddingHorizontal: 16,
+    fontVariant: ["tabular-nums"]
+  },
+  warning: {
+    fontSize: 13,
+    color: palette.error,
+    textAlign: "center",
+    paddingHorizontal: 16,
+    marginTop: 4
+  }
+});
+
+// src/react/ExplorerView.tsx
+import { LegendList } from "@legendapp/list/react-native";
+import { useCallback as useCallback3, useState as useState4 } from "react";
+import { Pressable as Pressable3, StyleSheet as StyleSheet5, Text as Text4, View as View6 } from "react-native";
+
+// src/react/ExplorerFilters.tsx
+import { useState as useState3 } from "react";
+import { ScrollView, StyleSheet as StyleSheet4, Text as Text3, TextInput as TextInput2, View as View5 } from "react-native";
+
+// src/react/InspectorSheet.tsx
+import {
+  KeyboardAvoidingView,
+  Modal as Modal2,
+  Platform as Platform2,
+  Pressable as Pressable2,
+  StyleSheet as StyleSheet3,
+  View as View4
+} from "react-native";
+import { SafeAreaProvider, SafeAreaView as SafeAreaView2 } from "react-native-safe-area-context";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function InspectorSheet({
+  title,
+  close,
+  closeLabel,
+  primary,
+  children
+}) {
+  return /* @__PURE__ */ jsx4(Modal2, { visible: true, transparent: true, animationType: "slide", onRequestClose: close, children: /* @__PURE__ */ jsx4(SafeAreaProvider, { children: /* @__PURE__ */ jsxs3(
+    KeyboardAvoidingView,
+    {
+      style: styles2.scrim,
+      behavior: Platform2.OS === "ios" ? "padding" : void 0,
+      children: [
+        /* @__PURE__ */ jsx4(
+          Pressable2,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: closeLabel,
+            onPress: close,
+            style: StyleSheet3.absoluteFill
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          SafeAreaView2,
+          {
+            edges: ["bottom", "left", "right"],
+            style: styles2.sheet,
+            children: [
+              /* @__PURE__ */ jsx4(View4, { style: styles2.grabber }),
+              /* @__PURE__ */ jsx4(
+                NavBar,
+                {
+                  left: /* @__PURE__ */ jsx4(TextButton, { label: closeLabel, onPress: close }),
+                  title,
+                  right: primary && /* @__PURE__ */ jsx4(
+                    TextButton,
+                    {
+                      label: primary.label,
+                      onPress: primary.onPress,
+                      disabled: primary.disabled,
+                      bold: true
+                    }
+                  )
+                }
+              ),
+              children
+            ]
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+var styles2 = StyleSheet3.create({
+  scrim: {
+    flex: 1,
+    justifyContent: "flex-end",
+    backgroundColor: palette.scrim
+  },
+  sheet: {
+    height: "88%",
+    backgroundColor: apple.grouped,
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
+    overflow: "hidden"
+  },
+  grabber: {
+    alignSelf: "center",
+    width: 36,
+    height: 5,
+    borderRadius: 3,
+    backgroundColor: "#c7c7cc",
+    marginTop: 6
+  }
+});
+
+// src/react/ExplorerFilters.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var toggle = (values, value) => values.includes(value) ? values.filter((item) => item !== value) : [...values, value];
+function ExplorerFilters({
+  v,
+  t,
+  close
+}) {
+  const [draft, setDraft] = useState3(v.query);
+  const update = (patch) => setDraft((previous) => ({ ...previous, ...patch }));
+  const sources = [
+    ...new Set([...v.page.spans, ...v.page.marks].map(sourceOf))
+  ].sort();
+  const outcomes = v.mode === "traces" ? ["error", "success"] : ["success", "error", "cancelled", "interrupted"];
+  const invalid = [draft.from, draft.to, draft.minDuration].some(
+    (value) => value !== "" && (!Number.isFinite(Number(value)) || Number(value) < 0)
+  ) || Boolean(draft.from && draft.to && Number(draft.from) > Number(draft.to));
+  const field = (key, numeric2 = true) => /* @__PURE__ */ jsxs4(View5, { style: styles3.field, children: [
+    /* @__PURE__ */ jsx5(Text3, { style: styles3.fieldLabel, children: t(key) }),
+    /* @__PURE__ */ jsx5(
+      TextInput2,
+      {
+        accessibilityLabel: t(key),
+        value: draft[key],
+        onChangeText: (value) => update({ [key]: value }),
+        placeholder: "\u2014",
+        placeholderTextColor: apple.secondary,
+        keyboardType: numeric2 ? "decimal-pad" : "default",
+        autoCapitalize: "none",
+        autoCorrect: false,
+        style: styles3.fieldInput
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx5(
+    InspectorSheet,
+    {
+      title: t("filters"),
+      close,
+      closeLabel: t("cancel"),
+      primary: {
+        label: t("applyFilters"),
+        disabled: invalid,
+        onPress: () => {
+          v.updateQuery(draft);
+          close();
+        }
+      },
+      children: /* @__PURE__ */ jsxs4(
+        ScrollView,
+        {
+          keyboardShouldPersistTaps: "handled",
+          contentContainerStyle: { paddingBottom: 32 },
+          children: [
+            v.mode !== "marks" && /* @__PURE__ */ jsx5(Section, { header: t("outcome"), children: outcomes.map((outcome, index) => /* @__PURE__ */ jsx5(
+              Row,
+              {
+                title: t(
+                  outcome === "success" && v.mode === "traces" ? "noErrors" : outcome
+                ),
+                checked: draft.outcomes.includes(outcome),
+                onPress: () => update({ outcomes: toggle(draft.outcomes, outcome) }),
+                last: index === outcomes.length - 1
+              },
+              outcome
+            )) }),
+            sources.length > 0 && /* @__PURE__ */ jsx5(Section, { header: t("source"), children: sources.map((source, index) => /* @__PURE__ */ jsx5(
+              Row,
+              {
+                title: source,
+                checked: draft.sources.includes(source),
+                onPress: () => update({ sources: toggle(draft.sources, source) }),
+                last: index === sources.length - 1
+              },
+              source
+            )) }),
+            /* @__PURE__ */ jsxs4(
+              Section,
+              {
+                header: t("range"),
+                footer: invalid ? t("invalidRange") : void 0,
+                children: [
+                  v.mode !== "marks" && field("minDuration"),
+                  field("from"),
+                  field("to"),
+                  field("correlation", false)
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx5(Section, { children: /* @__PURE__ */ jsx5(
+              Row,
+              {
+                title: t("reset"),
+                tint: palette.error,
+                onPress: () => setDraft(defaultQuery()),
+                last: true
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
+var styles3 = StyleSheet4.create({
+  field: {
+    flexDirection: "row",
+    alignItems: "center",
+    minHeight: 44,
+    paddingHorizontal: 16,
+    backgroundColor: apple.card,
+    borderBottomWidth: StyleSheet4.hairlineWidth,
+    borderColor: apple.separator,
+    gap: 12
+  },
+  fieldLabel: { flex: 1, fontSize: 17, color: palette.text },
+  fieldInput: {
+    minWidth: 110,
+    fontSize: 17,
+    color: palette.text,
+    textAlign: "right",
+    paddingVertical: 8
+  }
+});
+
+// src/react/ExplorerView.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var toggle2 = (values, value) => values.includes(value) ? values.filter((item) => item !== value) : [...values, value];
+var isTrace = (item) => "spans" in item;
+var keyOf = (item) => isTrace(item) ? item.id : (
+  // Sequence is unique per event; span ids can repeat if a collector reuses one.
+  `${"spanId" in item ? "span" : "mark"}:${item.sequence}`
+);
+var sortsFor = (mode) => mode === "traces" ? ["newest", "oldest", "longest", "errors", "count", "name"] : mode === "spans" ? ["newest", "oldest", "longest", "shortest", "name"] : ["newest", "oldest", "name"];
+function ExplorerView({ v, t }) {
+  const [filters, setFilters] = useState4(false);
+  const menu = useMenu();
+  const chips = [
+    ...v.query.outcomes.map((value) => ({
+      key: `outcome:${value}`,
+      label: t(
+        value === "success" && v.mode === "traces" ? "noErrors" : value
+      ),
+      clear: () => v.updateQuery({ outcomes: toggle2(v.query.outcomes, value) })
+    })),
+    ...v.query.sources.map((value) => ({
+      key: `source:${value}`,
+      label: value,
+      clear: () => v.updateQuery({ sources: toggle2(v.query.sources, value) })
+    })),
+    ...["minDuration", "from", "to", "correlation"].filter((key) => v.query[key]).map((key) => ({
+      key,
+      label: `${t(key)}: ${v.query[key]}`,
+      clear: () => v.updateQuery({ [key]: "" })
+    }))
+  ];
+  const { open } = v;
+  const renderItem = useCallback3(
+    ({ item }) => {
+      if (isTrace(item))
+        return /* @__PURE__ */ jsx6(
+          Row,
+          {
+            title: item.name,
+            subtitle: t("traceRow", {
+              spans: item.spans.length,
+              errors: item.errors,
+              source: item.sources.join(", ")
+            }),
+            value: `${item.duration.toFixed(0)} ms`,
+            tint: item.errors ? palette.error : void 0,
+            onPress: () => open({ kind: "trace", value: item })
+          }
+        );
+      const span = "spanId" in item ? item : void 0;
+      return /* @__PURE__ */ jsx6(
+        Row,
+        {
+          title: item.name,
+          subtitle: `${span ? t(span.outcome) : t("marks")} \xB7 ${sourceOf(item)} \xB7 ${(item.timestampMs / 1e3).toFixed(2)} s`,
+          value: span ? `${span.durationMs.toFixed(0)} ms` : void 0,
+          tint: span?.outcome === "error" ? palette.error : void 0,
+          onPress: () => open(
+            span ? { kind: "span", value: span } : { kind: "mark", value: item }
+          )
+        }
+      );
+    },
+    [open, t]
+  );
+  return /* @__PURE__ */ jsxs5(View6, { style: styles4.root, children: [
+    /* @__PURE__ */ jsx6(
+      SearchField,
+      {
+        value: v.query.search,
+        onChange: (search) => v.updateQuery({ search }),
+        placeholder: t("exploreSearch")
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      Segmented,
+      {
+        options: ["traces", "spans", "marks"].map((mode) => ({
+          value: mode,
+          label: t(mode)
+        })),
+        value: v.mode,
+        onChange: v.setMode
+      }
+    ),
+    /* @__PURE__ */ jsxs5(View6, { style: styles4.toolbar, children: [
+      /* @__PURE__ */ jsx6(
+        Pressable3,
+        {
+          accessibilityRole: "button",
+          onPress: () => menu.open({
+            title: t("sort"),
+            cancelLabel: t("cancel"),
+            options: sortsFor(v.mode).map((sort) => ({
+              label: t(sort),
+              selected: sort === v.query.sort,
+              onPress: () => v.updateQuery({ sort })
+            }))
+          }),
+          hitSlop: 8,
+          children: /* @__PURE__ */ jsxs5(Text4, { style: styles4.toolbarButton, children: [
+            t("sortBy", { sort: t(v.query.sort) }),
+            " \u2304"
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx6(Text4, { style: styles4.count, children: t("resultCount", { matching: v.results.length, loaded: v.loaded }) }),
+      /* @__PURE__ */ jsx6(
+        Pressable3,
+        {
+          accessibilityRole: "button",
+          onPress: () => {
+            v.setHolding(true);
+            setFilters(true);
+          },
+          hitSlop: 8,
+          children: /* @__PURE__ */ jsxs5(Text4, { style: styles4.toolbarButton, children: [
+            t("filter"),
+            chips.length ? ` (${chips.length})` : "",
+            " \u2304"
+          ] })
+        }
+      )
+    ] }),
+    chips.length > 0 && /* @__PURE__ */ jsxs5(View6, { style: styles4.chips, children: [
+      chips.map((chip) => /* @__PURE__ */ jsx6(
+        Pressable3,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: `${chip.label}, ${t("reset")}`,
+          onPress: chip.clear,
+          style: styles4.chip,
+          children: /* @__PURE__ */ jsxs5(Text4, { style: styles4.chipText, children: [
+            chip.label,
+            " \u2715"
+          ] })
+        },
+        chip.key
+      )),
+      /* @__PURE__ */ jsx6(
+        Pressable3,
+        {
+          accessibilityRole: "button",
+          onPress: v.resetQuery,
+          style: styles4.chipClear,
+          children: /* @__PURE__ */ jsx6(Text4, { style: styles4.toolbarButton, children: t("reset") })
+        }
+      )
+    ] }),
+    v.mode === "traces" && v.uncorrelated > 0 && !chips.length && /* @__PURE__ */ jsx6(Text4, { style: styles4.hint, children: t("uncorrelatedHint", { count: v.uncorrelated }) }),
+    /* @__PURE__ */ jsx6(
+      LegendList,
+      {
+        recycleItems: true,
+        contentInsetAdjustmentBehavior: "automatic",
+        style: styles4.list,
+        data: v.results,
+        keyExtractor: keyOf,
+        estimatedItemSize: 64,
+        keyboardShouldPersistTaps: "handled",
+        keyboardDismissMode: "on-drag",
+        initialScrollOffset: v.offsets.current[v.mode] ?? 0,
+        onScroll: (event) => {
+          v.offsets.current[v.mode] = event.nativeEvent.contentOffset.y;
+        },
+        scrollEventThrottle: 100,
+        onScrollBeginDrag: () => v.setHolding(true),
+        ListEmptyComponent: /* @__PURE__ */ jsx6(Text4, { style: styles4.empty, children: t("noResults") }),
+        renderItem
+      },
+      v.mode
+    ),
+    menu.element,
+    filters && /* @__PURE__ */ jsx6(ExplorerFilters, { v, t, close: () => setFilters(false) })
+  ] });
+}
+var styles4 = StyleSheet5.create({
+  root: { flex: 1 },
+  toolbar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    paddingBottom: 8,
+    gap: 8
+  },
+  toolbarButton: { fontSize: 15, color: palette.accent, fontWeight: "500" },
+  count: { flex: 1, textAlign: "center", fontSize: 13, color: apple.secondary },
+  chips: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 6,
+    paddingHorizontal: 16,
+    paddingBottom: 8
+  },
+  chip: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 14,
+    backgroundColor: palette.selected
+  },
+  chipText: { fontSize: 13, color: palette.accent },
+  chipClear: { paddingHorizontal: 4, paddingVertical: 4 },
+  hint: {
+    fontSize: 13,
+    color: apple.secondary,
+    paddingHorizontal: 16,
+    paddingBottom: 8
+  },
+  list: { flex: 1, backgroundColor: apple.card },
+  empty: {
+    fontSize: 15,
+    color: apple.secondary,
+    textAlign: "center",
+    padding: 32
+  }
+});
+
+// src/react/DetailView.tsx
+import { LegendList as LegendList2 } from "@legendapp/list/react-native";
+import { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState5 } from "react";
+import { Pressable as Pressable4, ScrollView as ScrollView2, StyleSheet as StyleSheet6, Text as Text5, View as View7 } from "react-native";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var fixed = (value) => value.toFixed(1);
+function MetricDetail({
+  series,
+  t
+}) {
+  const stats = [
+    ["latest", series.latest],
+    ["median", series.median],
+    ["p95", series.p95],
+    ["min", series.min],
+    ["max", series.peak]
+  ];
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsxs6(Section, { header: series.name, footer: t("metricsScope"), children: [
+      /* @__PURE__ */ jsxs6(View7, { style: styles5.chartCard, children: [
+        /* @__PURE__ */ jsx7(View7, { style: styles5.chart, children: series.samples.map((sample) => /* @__PURE__ */ jsx7(
+          View7,
+          {
+            accessibilityLabel: `${sample.value.toFixed(2)} ${sample.unit}`,
+            style: [
+              styles5.bar,
+              {
+                height: `${Math.max(2, Math.abs(sample.value) / series.max * 100)}%`
+              }
+            ]
+          },
+          sample.sequence
+        )) }),
+        /* @__PURE__ */ jsx7(Text5, { style: styles5.caption, children: t("metricWindow", {
+          displayed: series.samples.length,
+          retained: series.retainedCount,
+          start: fixed(series.startMs),
+          end: fixed(series.endMs)
+        }) })
+      ] }),
+      stats.map(([key, value]) => /* @__PURE__ */ jsx7(
+        Row,
+        {
+          title: t(`stat_${key}`),
+          value: formatMetric(value, series.unit)
+        },
+        key
+      )),
+      /* @__PURE__ */ jsx7(Row, { title: t("samples"), value: String(series.retainedCount), last: true })
+    ] }),
+    !!series.samples.at(-1)?.attributes.length && /* @__PURE__ */ jsx7(Section, { header: t("attributes"), children: series.samples.at(-1).attributes.map((attribute2, index, all) => /* @__PURE__ */ jsx7(
+      Row,
+      {
+        title: attribute2.key,
+        value: attribute2.value,
+        last: index === all.length - 1
+      },
+      attribute2.key
+    )) })
+  ] });
+}
+function DetailView({ v, t }) {
+  const detail = v.detail;
+  const key = detail.kind + ":" + (detail.kind === "trace" ? detail.value.id : detail.kind === "span" ? detail.value.spanId : detail.kind === "mark" ? detail.value.sequence : detail.value.name);
+  const saved = v.detailState.current[key];
+  const [collapsed, setCollapsed] = useState5(
+    new Set(saved?.collapsed ?? [])
+  );
+  const [attributes, setAttributes] = useState5(saved?.attributes ?? "");
+  const [layout, setLayout] = useState5(
+    saved?.layout ?? "waterfall"
+  );
+  const offset = useRef2(saved?.offset ?? 0);
+  useEffect2(() => {
+    if (Object.keys(v.detailState.current).length > 128)
+      delete v.detailState.current[Object.keys(v.detailState.current)[0]];
+    v.detailState.current[key] = {
+      collapsed: [...collapsed],
+      attributes,
+      layout,
+      offset: offset.current
+    };
+  }, [collapsed, attributes, layout, key, v.detailState]);
+  const scrollProps = {
+    contentOffset: { x: 0, y: offset.current },
+    scrollEventThrottle: 100,
+    onScroll: (event2) => {
+      offset.current = event2.nativeEvent.contentOffset.y;
+      if (v.detailState.current[key])
+        v.detailState.current[key].offset = offset.current;
+    }
+  };
+  const items = useMemo2(
+    () => detail.kind === "trace" ? [
+      ...hierarchyRows(detail.value.spans, collapsed).map((row) => ({
+        kind: "span",
+        row
+      })),
+      ...detail.value.marks.map((mark) => ({
+        kind: "mark",
+        mark
+      }))
+    ] : [],
+    [detail, collapsed]
+  );
+  const traceIds = useMemo2(
+    () => new Set(
+      detail.kind === "trace" ? detail.value.spans.map((s2) => s2.spanId) : []
+    ),
+    [detail]
+  );
+  if (detail.kind === "trace") {
+    const trace2 = detail.value;
+    const toggle3 = (spanId) => setCollapsed((previous) => {
+      const next = new Set(previous);
+      if (next.has(spanId)) next.delete(spanId);
+      else next.add(spanId);
+      return next;
+    });
+    return /* @__PURE__ */ jsx7(
+      LegendList2,
+      {
+        recycleItems: true,
+        ...scrollProps,
+        style: styles5.list,
+        initialScrollOffset: offset.current,
+        data: items,
+        estimatedItemSize: 64,
+        keyExtractor: (item) => item.kind === "span" ? `span:${item.row.span.sequence}` : `mark:${item.mark.sequence}`,
+        ListHeaderComponent: /* @__PURE__ */ jsxs6(View7, { style: styles5.traceHeader, children: [
+          /* @__PURE__ */ jsx7(Text5, { style: styles5.title, children: trace2.name }),
+          /* @__PURE__ */ jsx7(Text5, { style: styles5.subtitle, children: t("traceSummary", {
+            duration: fixed(trace2.duration),
+            events: trace2.spans.length + trace2.marks.length,
+            errors: trace2.errors
+          }) }),
+          /* @__PURE__ */ jsxs6(Text5, { selectable: true, style: styles5.caption, children: [
+            trace2.id,
+            " \xB7 ",
+            fixed(trace2.start),
+            "\u2013",
+            fixed(trace2.start + trace2.duration),
+            " ms"
+          ] }),
+          /* @__PURE__ */ jsx7(EvictionNotice, { v, t }),
+          /* @__PURE__ */ jsx7(FrozenNotice, { v, t }),
+          /* @__PURE__ */ jsx7(
+            Segmented,
+            {
+              options: [
+                { value: "waterfall", label: t("waterfall") },
+                { value: "list", label: t("spans") }
+              ],
+              value: layout,
+              onChange: setLayout
+            }
+          ),
+          /* @__PURE__ */ jsxs6(View7, { style: styles5.headerActions, children: [
+            /* @__PURE__ */ jsx7(
+              TextButton,
+              {
+                label: t("expandAll"),
+                onPress: () => setCollapsed(/* @__PURE__ */ new Set())
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              TextButton,
+              {
+                label: t("collapseAll"),
+                onPress: () => setCollapsed(new Set(trace2.spans.map((span2) => span2.spanId)))
+              }
+            )
+          ] })
+        ] }),
+        ListEmptyComponent: /* @__PURE__ */ jsx7(Text5, { style: styles5.empty, children: t("noSpans") }),
+        renderItem: ({ item }) => {
+          if (item.kind === "mark")
+            return /* @__PURE__ */ jsx7(
+              Row,
+              {
+                icon: "\u25C6",
+                iconColor: apple.secondary,
+                title: item.mark.name,
+                value: `${fixed(item.mark.timestampMs)} ms`,
+                onPress: () => v.open({ kind: "mark", value: item.mark })
+              }
+            );
+          const { row } = item;
+          const error = row.span.outcome === "error";
+          return /* @__PURE__ */ jsxs6(
+            Pressable4,
+            {
+              accessibilityRole: "button",
+              onPress: () => v.open({ kind: "span", value: row.span }),
+              style: ({ pressed }) => [
+                styles5.spanRow,
+                pressed && styles5.pressed
+              ],
+              children: [
+                /* @__PURE__ */ jsxs6(
+                  View7,
+                  {
+                    style: [
+                      styles5.spanLine,
+                      { paddingLeft: Math.min(8, row.depth) * 12 }
+                    ],
+                    children: [
+                      row.children > 0 ? /* @__PURE__ */ jsx7(
+                        Pressable4,
+                        {
+                          accessibilityRole: "button",
+                          accessibilityLabel: `${collapsed.has(row.span.spanId) ? t("expandAll") : t("collapseAll")} ${row.span.name}`,
+                          onPress: () => toggle3(row.span.spanId),
+                          hitSlop: 10,
+                          children: /* @__PURE__ */ jsx7(Text5, { style: styles5.disclosure, children: collapsed.has(row.span.spanId) ? "\u25B8" : "\u25BE" })
+                        }
+                      ) : /* @__PURE__ */ jsx7(Text5, { style: styles5.disclosure, children: " " }),
+                      /* @__PURE__ */ jsxs6(
+                        Text5,
+                        {
+                          style: [styles5.spanName, error && styles5.error],
+                          numberOfLines: 1,
+                          children: [
+                            row.span.name,
+                            row.children > 0 && /* @__PURE__ */ jsxs6(Text5, { style: styles5.subtitle, children: [
+                              " (",
+                              row.children,
+                              ")"
+                            ] })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs6(Text5, { style: [styles5.spanValue, error && styles5.error], children: [
+                        row.span.durationMs.toFixed(
+                          row.span.durationMs < 10 ? 1 : 0
+                        ),
+                        " ",
+                        "ms"
+                      ] })
+                    ]
+                  }
+                ),
+                v.query.search && matchesSearch(row.span, v.query.search.toLowerCase()) || row.span.parentSpanId && !traceIds.has(row.span.parentSpanId) ? /* @__PURE__ */ jsx7(
+                  Text5,
+                  {
+                    style: [
+                      styles5.caption,
+                      { paddingLeft: Math.min(8, row.depth) * 12 + 20 }
+                    ],
+                    children: v.query.search && matchesSearch(row.span, v.query.search.toLowerCase()) ? t("searchMatch") : t("missingParent")
+                  }
+                ) : null,
+                layout === "waterfall" && /* @__PURE__ */ jsx7(View7, { style: styles5.track, children: /* @__PURE__ */ jsx7(
+                  View7,
+                  {
+                    style: [
+                      styles5.segment,
+                      {
+                        marginLeft: `${row.offset * 100}%`,
+                        width: `${Math.max(0.5, row.width * 100)}%`,
+                        backgroundColor: error ? palette.error : palette.accent
+                      }
+                    ]
+                  }
+                ) })
+              ]
+            }
+          );
+        }
+      }
+    );
+  }
+  if (detail.kind === "metric")
+    return /* @__PURE__ */ jsxs6(ScrollView2, { ...scrollProps, contentContainerStyle: styles5.content, children: [
+      /* @__PURE__ */ jsx7(EvictionNotice, { v, t }),
+      /* @__PURE__ */ jsx7(MetricDetail, { series: detail.value, t })
+    ] });
+  const event = detail.value;
+  const span = detail.kind === "span" ? detail.value : void 0;
+  const parent = span ? v.page.spans.find((s2) => s2.spanId === span.parentSpanId) : void 0;
+  const children = span ? v.page.spans.filter((s2) => s2.parentSpanId === span.spanId) : [];
+  const trace = span ? v.traceFor(span) : void 0;
+  const shownAttributes = event.attributes.filter(
+    (a) => `${a.key} ${a.value}`.toLowerCase().includes(attributes.toLowerCase())
+  );
+  return /* @__PURE__ */ jsxs6(
+    ScrollView2,
+    {
+      ...scrollProps,
+      contentContainerStyle: styles5.content,
+      keyboardShouldPersistTaps: "handled",
+      children: [
+        /* @__PURE__ */ jsxs6(View7, { style: styles5.traceHeader, children: [
+          /* @__PURE__ */ jsx7(Text5, { style: styles5.title, selectable: true, children: event.name }),
+          /* @__PURE__ */ jsx7(EvictionNotice, { v, t })
+        ] }),
+        /* @__PURE__ */ jsxs6(Section, { children: [
+          span && /* @__PURE__ */ jsx7(
+            Row,
+            {
+              title: t("outcome"),
+              value: t(span.outcome),
+              tint: span.outcome === "error" ? palette.error : void 0
+            }
+          ),
+          span && /* @__PURE__ */ jsx7(
+            Row,
+            {
+              title: t("duration"),
+              value: `${span.durationMs.toFixed(2)} ms`
+            }
+          ),
+          /* @__PURE__ */ jsx7(Row, { title: t("source"), value: sourceOf(event) }),
+          /* @__PURE__ */ jsx7(
+            Row,
+            {
+              title: t("time"),
+              value: `${fixed(event.timestampMs)}\u2013${fixed(event.timestampMs + (span?.durationMs ?? 0))} ms`
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            Row,
+            {
+              title: t("correlationId"),
+              subtitle: event.correlationId || t("uncorrelated"),
+              last: !span
+            }
+          ),
+          span && /* @__PURE__ */ jsx7(Row, { title: t("spanId"), subtitle: span.spanId, last: true })
+        ] }),
+        /* @__PURE__ */ jsxs6(
+          Section,
+          {
+            footer: span?.parentSpanId && !parent ? t("missingParent") : void 0,
+            children: [
+              trace && /* @__PURE__ */ jsx7(
+                Row,
+                {
+                  icon: "\u2630",
+                  title: t("wholeTrace"),
+                  onPress: () => v.open({ kind: "trace", value: trace })
+                }
+              ),
+              parent && /* @__PURE__ */ jsx7(
+                Row,
+                {
+                  icon: "\u2191",
+                  title: t("parent"),
+                  subtitle: parent.name,
+                  onPress: () => v.open({ kind: "span", value: parent })
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                Row,
+                {
+                  icon: "\u2315",
+                  title: t("similar"),
+                  onPress: () => (detail.kind === "mark" ? v.showMarks : v.showSpans)({
+                    search: event.name
+                  }),
+                  last: true
+                }
+              )
+            ]
+          }
+        ),
+        event.attributes.length > 0 && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+          /* @__PURE__ */ jsx7(Text5, { style: styles5.sectionTitle, children: t("attributes") }),
+          event.attributes.length > 6 && /* @__PURE__ */ jsx7(
+            SearchField,
+            {
+              value: attributes,
+              onChange: setAttributes,
+              placeholder: t("attributeSearch")
+            }
+          ),
+          /* @__PURE__ */ jsx7(Section, { children: shownAttributes.map((a, index) => /* @__PURE__ */ jsx7(
+            Row,
+            {
+              title: a.key,
+              subtitle: a.value,
+              last: index === shownAttributes.length - 1
+            },
+            a.key
+          )) })
+        ] }),
+        children.length > 0 && /* @__PURE__ */ jsx7(Section, { header: t("children"), children: children.map((child, index) => /* @__PURE__ */ jsx7(
+          Row,
+          {
+            title: child.name,
+            value: `${child.durationMs.toFixed(1)} ms`,
+            tint: child.outcome === "error" ? palette.error : void 0,
+            onPress: () => v.open({ kind: "span", value: child }),
+            last: index === children.length - 1
+          },
+          child.spanId
+        )) })
+      ]
+    }
+  );
+}
+function EvictionNotice({ v, t }) {
+  const earliest = useStore(v.telemetry, (s2) => s2.pending?.earliestSequence) ?? v.page.earliestSequence;
+  const detail = v.detail;
+  if (!detail) return null;
+  const events = detail.kind === "trace" ? [...detail.value.spans, ...detail.value.marks] : detail.kind === "metric" ? detail.value.samples : [detail.value];
+  return events.some((event) => event.sequence < earliest) ? /* @__PURE__ */ jsx7(Text5, { style: [styles5.caption, styles5.error], children: t("evicted") }) : null;
+}
+function FrozenNotice({ v, t }) {
+  const pending = useStore(v.telemetry, (s2) => s2.pending);
+  return pending ? /* @__PURE__ */ jsx7(Text5, { style: styles5.caption, children: t("detailFrozen") }) : null;
+}
+var styles5 = StyleSheet6.create({
+  list: { flex: 1 },
+  content: { paddingBottom: 32 },
+  traceHeader: { paddingHorizontal: 16, paddingTop: 16, gap: 4 },
+  title: { fontSize: 22, fontWeight: "700", color: palette.text },
+  subtitle: { fontSize: 15, color: apple.secondary },
+  caption: { fontSize: 12, color: apple.secondary },
+  error: { color: palette.error },
+  headerActions: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: 4,
+    marginBottom: 8
+  },
+  sectionTitle: {
+    fontSize: 13,
+    color: apple.secondary,
+    textTransform: "uppercase",
+    marginLeft: 32,
+    marginTop: 20
+  },
+  spanRow: {
+    backgroundColor: apple.card,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    gap: 6,
+    borderBottomWidth: StyleSheet6.hairlineWidth,
+    borderColor: apple.separator
+  },
+  pressed: { backgroundColor: "#e5e5ea" },
+  spanLine: { flexDirection: "row", alignItems: "center", gap: 6 },
+  disclosure: { width: 14, fontSize: 13, color: apple.secondary },
+  spanName: { flex: 1, fontSize: 15, color: palette.text },
+  spanValue: {
+    fontSize: 13,
+    color: apple.secondary,
+    fontVariant: ["tabular-nums"]
+  },
+  track: {
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: apple.fill,
+    overflow: "hidden"
+  },
+  segment: { height: 4, borderRadius: 2 },
+  chartCard: { padding: 16, gap: 8, backgroundColor: apple.card },
+  chart: { height: 96, flexDirection: "row", alignItems: "flex-end", gap: 2 },
+  bar: {
+    flex: 1,
+    minHeight: 2,
+    borderTopLeftRadius: 2,
+    borderTopRightRadius: 2,
+    backgroundColor: palette.accent
+  },
+  empty: {
+    fontSize: 15,
+    color: apple.secondary,
+    textAlign: "center",
+    padding: 32
+  }
+});
+
+// src/react/MetricsView.tsx
+import { LegendList as LegendList3 } from "@legendapp/list/react-native";
+import { useCallback as useCallback4, useMemo as useMemo3 } from "react";
+import { Pressable as Pressable5, StyleSheet as StyleSheet7, Text as Text6, View as View8 } from "react-native";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var categories = ["all", "runtime", "operations", "custom"];
+var sorts = ["name", "count", "p95"];
+var category = (name) => name.startsWith("duration: ") ? "operations" : /^(js|ui|process|app)\./.test(name) ? "runtime" : "custom";
+function MetricsView({ v, t }) {
+  const menu = useMenu();
+  const metrics = useMemo3(
+    () => v.metrics.filter(
+      (series) => (v.metricCategory === "all" || category(series.name) === v.metricCategory) && series.name.toLowerCase().includes(v.metricQuery.toLowerCase())
+    ).sort(
+      (a, b) => v.metricSort === "name" ? a.name.localeCompare(b.name) : v.metricSort === "count" ? b.retainedCount - a.retainedCount || a.name.localeCompare(b.name) : b.p95 - a.p95 || a.name.localeCompare(b.name)
+    ),
+    [v.metrics, v.metricCategory, v.metricQuery, v.metricSort]
+  );
+  const { open } = v;
+  const renderItem = useCallback4(
+    ({ item }) => /* @__PURE__ */ jsx8(
+      Row,
+      {
+        title: item.metric,
+        subtitle: t("metricBrief", {
+          latest: formatMetric(item.latest, item.unit),
+          p95: formatMetric(item.p95, item.unit),
+          count: item.retainedCount
+        }),
+        value: formatMetric(item.latest, item.unit),
+        onPress: () => open({ kind: "metric", value: item })
+      }
+    ),
+    [open, t]
+  );
+  return /* @__PURE__ */ jsxs7(View8, { style: styles6.root, children: [
+    /* @__PURE__ */ jsx8(
+      SearchField,
+      {
+        value: v.metricQuery,
+        onChange: v.setMetricQuery,
+        placeholder: t("metricSearch")
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      Segmented,
+      {
+        options: categories.map((value) => ({
+          value,
+          label: t(value === "operations" ? "operationsShort" : value)
+        })),
+        value: v.metricCategory,
+        onChange: v.setMetricCategory
+      }
+    ),
+    /* @__PURE__ */ jsxs7(View8, { style: styles6.toolbar, children: [
+      /* @__PURE__ */ jsx8(
+        Pressable5,
+        {
+          accessibilityRole: "button",
+          onPress: () => menu.open({
+            title: t("sort"),
+            cancelLabel: t("cancel"),
+            options: sorts.map((sort) => ({
+              label: t(sort),
+              selected: sort === v.metricSort,
+              onPress: () => v.setMetricSort(sort)
+            }))
+          }),
+          hitSlop: 8,
+          children: /* @__PURE__ */ jsxs7(Text6, { style: styles6.toolbarButton, children: [
+            t("sortBy", {
+              sort: t(v.metricSort)
+            }),
+            " ",
+            "\u2304"
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx8(Text6, { style: styles6.count, children: metrics.length })
+    ] }),
+    /* @__PURE__ */ jsx8(
+      LegendList3,
+      {
+        recycleItems: true,
+        contentInsetAdjustmentBehavior: "automatic",
+        style: styles6.list,
+        data: metrics,
+        keyExtractor: (series) => series.name,
+        estimatedItemSize: 56,
+        keyboardDismissMode: "on-drag",
+        initialScrollOffset: v.offsets.current.metrics ?? 0,
+        onScroll: (event) => {
+          v.offsets.current.metrics = event.nativeEvent.contentOffset.y;
+        },
+        scrollEventThrottle: 100,
+        onScrollBeginDrag: () => v.setHolding(true),
+        ListEmptyComponent: /* @__PURE__ */ jsx8(Text6, { style: styles6.empty, children: t("emptyMetrics") }),
+        renderItem,
+        ListFooterComponent: v.metricCategory === "operations" && v.operations.length ? /* @__PURE__ */ jsxs7(View8, { children: [
+          /* @__PURE__ */ jsx8(Text6, { style: styles6.header, children: t("operations") }),
+          v.operations.filter(
+            (op) => op.name.toLowerCase().includes(v.metricQuery.toLowerCase())
+          ).slice(0, 40).map((op) => /* @__PURE__ */ jsx8(
+            Row,
+            {
+              title: op.name,
+              subtitle: t("operationStats", {
+                ...op,
+                errorRate: op.errorRate === void 0 ? "\u2014" : `${op.errorRate.toFixed(1)}%`
+              }),
+              tint: op.errors ? palette.error : void 0,
+              onPress: () => v.showSpans({ search: op.name })
+            },
+            op.name
+          ))
+        ] }) : null
+      }
+    ),
+    menu.element
+  ] });
+}
+var styles6 = StyleSheet7.create({
+  root: { flex: 1 },
+  toolbar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingTop: 10,
+    paddingBottom: 6
+  },
+  toolbarButton: { fontSize: 15, color: palette.accent, fontWeight: "500" },
+  count: { fontSize: 13, color: apple.secondary },
+  list: { flex: 1, backgroundColor: apple.card },
+  header: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: apple.secondary,
+    textTransform: "uppercase",
+    paddingHorizontal: 16,
+    paddingTop: 18,
+    paddingBottom: 6,
+    backgroundColor: apple.grouped
+  },
+  empty: {
+    fontSize: 15,
+    color: apple.secondary,
+    textAlign: "center",
+    padding: 32
+  }
+});
+
+// src/react/SummaryView.tsx
+import { ScrollView as ScrollView3 } from "react-native";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var capital = (id) => id[0].toUpperCase() + id.slice(1);
+var issueLabel = (issue) => `issue${capital(issue.kind)}`;
+var ms = (value) => value === void 0 ? "\u2014" : formatMetric(value, "ms");
+var MAX_ISSUES = 20;
+var openEvent = (v, event) => {
+  if ("spanId" in event) v.open({ kind: "span", value: event });
+  else if ("unit" in event) {
+    const series = v.metrics.find(
+      (s2) => s2.name === `${event.name} (${event.unit})`
+    );
+    if (series) v.open({ kind: "metric", value: series });
+  } else v.open({ kind: "mark", value: event });
+};
+function SummaryView({
+  v,
+  t,
+  budgetMs = defaultBudgets.stallMs
+}) {
+  const explore = (id) => {
+    if (id === "startup" || id === "responsiveness" || id === "resources") {
+      v.setTab("metrics");
+      v.setMetricCategory("runtime");
+    } else if (id === "errors") v.showMarks({ sources: ["error"] });
+    else if (id === "network")
+      v.showSpans({ sources: ["network"], sort: "longest" });
+    else if (id === "screens") v.showSpans({ sources: ["navigation"] });
+    else v.showSpans({});
+  };
+  const shown = v.issues.slice(0, MAX_ISSUES);
+  return /* @__PURE__ */ jsxs8(
+    ScrollView3,
+    {
+      contentInsetAdjustmentBehavior: "automatic",
+      contentContainerStyle: { paddingBottom: 32 },
+      children: [
+        /* @__PURE__ */ jsx9(
+          Section,
+          {
+            header: v.issues.length ? t("issues", { count: v.issues.length }) : void 0,
+            footer: v.issues.length > shown.length ? t("moreIssues", { count: v.issues.length - shown.length }) : void 0,
+            children: shown.length ? shown.map((issue, index) => /* @__PURE__ */ jsx9(
+              Row,
+              {
+                icon: "\u26A0",
+                iconColor: palette.error,
+                title: issue.title,
+                subtitle: `${t(issueLabel(issue))} \xB7 +${(issue.event.timestampMs / 1e3).toFixed(1)} s`,
+                value: issue.valueMs === void 0 ? void 0 : formatMetric(issue.valueMs, "ms"),
+                tint: palette.error,
+                onPress: () => openEvent(v, issue.event),
+                last: index === shown.length - 1
+              },
+              index
+            )) : /* @__PURE__ */ jsx9(Row, { icon: "\u2713", iconColor: "#34c759", title: t("noIssues"), last: true })
+          }
+        ),
+        /* @__PURE__ */ jsx9(Section, { header: t("topics"), footer: t("summaryScope"), children: v.topics.map((topic, index) => {
+          const name = capital(topic.id);
+          const hasIssues = topic.issues.length > 0;
+          return /* @__PURE__ */ jsx9(
+            Row,
+            {
+              icon: topicGlyph[topic.id].icon,
+              iconColor: topic.tracked ? topicGlyph[topic.id].color : apple.secondary,
+              title: t(`topic${name}`),
+              subtitle: !topic.tracked ? `${t("notTracked")} \xB7 ${t(`hint${name}`)}` : !topic.count && topic.id !== "responsiveness" ? t("quiet") : t(`headline${name}`, {
+                count: topic.count,
+                value: ms(topic.value),
+                budget: budgetMs,
+                ...topic.values
+              }),
+              value: hasIssues ? String(topic.issues.length) : void 0,
+              tint: hasIssues ? palette.error : void 0,
+              onPress: () => explore(topic.id),
+              last: index === v.topics.length - 1
+            },
+            topic.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+// src/react/TimelineView.tsx
+import { LegendList as LegendList4 } from "@legendapp/list/react-native";
+import { useCallback as useCallback5 } from "react";
+import { StyleSheet as StyleSheet8, Text as Text7 } from "react-native";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var valueOf = (item) => "durationMs" in item.event ? formatMetric(item.event.durationMs, "ms") : "value" in item.event ? formatMetric(item.event.value, item.event.unit) : void 0;
+var messageOf = (item) => item.event.attributes.find((a) => a.key === "message")?.value;
+function TimelineView({ v, t }) {
+  const renderItem = useCallback5(
+    ({ item }) => {
+      if (item.kind === "screen")
+        return /* @__PURE__ */ jsxs9(Text7, { style: styles7.header, children: [
+          item.name || t("beforeNavigation"),
+          " \xB7",
+          " ",
+          (item.timestampMs / 1e3).toFixed(1),
+          " s"
+        ] });
+      const message = messageOf(item);
+      return /* @__PURE__ */ jsx10(
+        Row,
+        {
+          icon: topicGlyph[item.topic].icon,
+          iconColor: topicGlyph[item.topic].color,
+          title: item.event.name,
+          subtitle: `${(item.event.timestampMs / 1e3).toFixed(2)} s${message ? ` \xB7 ${message}` : ""}`,
+          value: valueOf(item),
+          tint: item.issue ? palette.error : void 0,
+          onPress: () => openEvent(v, item.event)
+        }
+      );
+    },
+    // openEvent reads v.metrics at press time; rows only need new props when data changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [t, v.metrics]
+  );
+  return /* @__PURE__ */ jsx10(
+    LegendList4,
+    {
+      recycleItems: true,
+      contentInsetAdjustmentBehavior: "automatic",
+      style: styles7.list,
+      data: v.timeline,
+      keyExtractor: (item) => item.key,
+      getItemType: (item) => item.kind,
+      estimatedItemSize: 60,
+      initialScrollOffset: v.offsets.current.timeline ?? 0,
+      onScroll: (event) => {
+        v.offsets.current.timeline = event.nativeEvent.contentOffset.y;
+      },
+      scrollEventThrottle: 100,
+      onScrollBeginDrag: () => v.setHolding(true),
+      ListEmptyComponent: /* @__PURE__ */ jsx10(Text7, { style: styles7.empty, children: t("empty") }),
+      renderItem
+    }
+  );
+}
+var styles7 = StyleSheet8.create({
+  list: { flex: 1 },
+  header: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: apple.secondary,
+    textTransform: "uppercase",
+    paddingHorizontal: 16,
+    paddingTop: 18,
+    paddingBottom: 6,
+    backgroundColor: apple.grouped
+  },
+  empty: {
+    fontSize: 15,
+    color: apple.secondary,
+    textAlign: "center",
+    padding: 32
+  }
+});
+
+// src/react/labels.ts
+var defaultLabels = {
+  applyFilters: "Apply",
+  title: "Performance",
+  searchMatch: "Search match",
+  explore: "Explore",
+  profiles: "Profiles",
+  spans: "Spans",
+  events: "events",
+  actions: "Actions",
+  tools: "Tools",
+  back: "Back",
+  done: "Done",
+  details: "Details",
+  cancel: "Cancel",
+  filters: "Filters",
+  sort: "Sort",
+  reset: "Reset",
+  exploreSearch: "Search",
+  metricSearch: "Search metrics",
+  newest: "Newest",
+  oldest: "Oldest",
+  longest: "Longest",
+  shortest: "Shortest",
+  errors: "Most errors",
+  count: "Most samples",
+  name: "Name",
+  p95: "Highest p95",
+  source: "Source",
+  outcome: "Outcome",
+  success: "Success",
+  error: "Error",
+  cancelled: "Cancelled",
+  interrupted: "Interrupted",
+  noErrors: "No recorded errors",
+  minDuration: "Minimum duration (ms)",
+  from: "From (ms since recording)",
+  to: "To (ms since recording)",
+  correlation: "Exact correlation ID",
+  invalidRange: "Enter nonnegative numbers, with From no later than To.",
+  resultCount: "{{matching}} / {{loaded}} matching",
+  traceRow: "{{spans}} spans \xB7 {{errors}} errors \xB7 {{source}}",
+  noResults: "No matching events. Change filters or reset to see the retained recording.",
+  uncorrelated: "Uncorrelated",
+  uncorrelatedHint: "{{count}} uncorrelated events are also available in Spans and Marks.",
+  pauseUpdates: "Freeze view",
+  resumeUpdates: "Resume live view",
+  newEvents: "{{count}} new events",
+  detailFrozen: "Detail is held steady while capture continues. Return to load newer events.",
+  expandAll: "Expand all",
+  collapseAll: "Collapse all",
+  missingParent: "Parent is outside retained history.",
+  wholeTrace: "Show entire trace",
+  similar: "Find similar spans",
+  parent: "Parent",
+  children: "Children",
+  attributes: "Search attributes",
+  evicted: "This event is outside retained history. Showing the last inspected snapshot.",
+  all: "All",
+  runtime: "Runtime",
+  custom: "Custom",
+  metricBrief: "p95 {{p95}} \xB7 n={{count}}",
+  metricSortNotice: "All retained traces. Numeric sorting compares raw values; check units when comparing series.",
+  exportAll: "Recording JSON (stops recording)",
+  sharePerfetto: "Perfetto trace",
+  replaceTitle: "Replace current recording?",
+  replaceDescription: "Start a new recording and discard the currently retained history. Export first to keep a copy.",
+  retainedScope: "Counts and statistics cover retained history. Pause updates freezes this view, not recording or profiling.",
+  lostHistory: "Lost {{what}}; this history is incomplete.",
+  lostSpans: "{{count}} spans",
+  lostMarks: "{{count}} marks",
+  lostMetrics: "{{count}} metric samples",
+  slowest: "Slowest spans",
+  errorsOnly: "Errors",
+  profileSeparate: "CPU profiles are separate from trace JSON. Stop sampling to save and share the latest artifact.",
+  noProfiler: "No CPU profiler is configured for this client.",
+  eyebrow: "DEVELOPER TOOLS",
+  close: "Close",
+  recording: "Recording live",
+  stopped: "Recording stopped",
+  counters: "{{events}} events \xB7 {{active}} active \xB7 {{dropped}} dropped \xB7 {{bytes}} bytes",
+  start: "Start recording",
+  stop: "Stop recording",
+  clear: "Clear",
+  export: "Stop & export",
+  retention: "Bounded native history \xB7 refreshes while open",
+  traces: "Traces",
+  search: "Search operation or correlation ID",
+  traceSummary: "{{duration}} ms \xB7 {{events}} events \xB7 {{errors}} errors",
+  empty: "No traces yet. Use the app to capture activity.",
+  waterfall: "Span waterfall",
+  noSpans: "No completed spans in this trace.",
+  spanDetails: "Span {{id}} \xB7 parent {{parent}} \xB7 {{outcome}}",
+  metrics: "Metrics",
+  operations: "Operation outcomes",
+  operationsShort: "Operations",
+  operationStats: "{{count}} spans \xB7 {{errors}} errors \xB7 {{errorRate}} error rate \xB7 {{cancelled}} cancelled \xB7 {{interrupted}} interrupted",
+  metricsScope: "All traces \xB7 app.ready.after_tracer_init measures tracer setup to app readiness, not TTI. duration: series are derived from completed spans. Statistics cover retained samples, not the whole session.",
+  emptyMetrics: "No samples yet. Use the app or run the playground. App-ready timing appears after a fresh launch; TTI requires an explicit readiness definition.",
+  metricStats: "Latest {{latest}} \xB7 median {{median}} \xB7 min {{min}} \xB7 max {{max}} \xB7 p95 {{p95}} \xB7 {{count}} samples",
+  marks: "Marks",
+  playground: "Instrumentation playground",
+  playgroundDescription: "Check nested spans, concurrent operations with the same name, cancellation, repeated completion, errors and metrics.",
+  run: "Run sample trace",
+  profiling: "CPU profile",
+  profilingDescription: "Capture a native profiler artifact alongside this recording.",
+  startProfile: "Start CPU profile",
+  stopProfile: "Stop CPU profile",
+  shareProfile: "CPU profile",
+  shareArtifact: "Share performance recording",
+  sharingUnavailable: "File sharing is unavailable on this device.",
+  cacheUnavailable: "The application cache is unavailable.",
+  truncated: "Showing up to 100 traces, spans and marks, and 40 metric series. Search to narrow traces; export includes all retained events.",
+  overview: "Summary",
+  tabs: "Inspector views",
+  recordingSummary: "Recording summary",
+  summary: "{{traces}} traces \xB7 {{spans}} spans \xB7 {{marks}} marks \xB7 {{metrics}} metric samples loaded",
+  session: "Session {{id}} \xB7 elapsed {{elapsed}} ms",
+  metricWindow: "Showing {{displayed}} / {{retained}} loaded samples \xB7 {{start}}\u2013{{end}} ms since recording start",
+  passed: "PASS",
+  failed: "FAIL",
+  scenarioResults: "Scenario results",
+  scenarioNotice: "Checks inspect retained native events; dropped or expired samples can fail a check.",
+  scenarioNested: "Explicit parent hierarchy",
+  scenarioConcurrency: "Overlapping spans with the same name",
+  scenarioCancelled: "Cancelled outcome",
+  scenarioIdempotent: "Repeated completion records once",
+  scenarioError: "Error outcome",
+  scenarioMetrics: "Native metric values",
+  openScenario: "Open scenario trace",
+  timeline: "Timeline",
+  issues: "Issues: {{count}}",
+  noIssues: "Nothing over budget in retained history.",
+  summaryScope: "Issues compare retained events with local budgets, not production percentiles. Tap a topic to explore it.",
+  moreIssues: "{{count}} more in Explore",
+  issueValue: "{{value}} ms \xB7 budget {{budget}} ms",
+  notTracked: "Not tracked",
+  quiet: "No events yet",
+  topicStartup: "Startup",
+  topicScreens: "Screens",
+  topicNetwork: "Network",
+  topicResponsiveness: "Responsiveness",
+  topicErrors: "Errors",
+  topicCustom: "Custom spans",
+  headlineStartup: "App ready {{value}} after tracer init",
+  headlineScreens: "{{count}} visits \xB7 p95 transition {{value}}",
+  headlineNetwork: "{{count}} requests \xB7 p95 {{value}}",
+  headlineResponsiveness: "{{count}} stalls over {{budget}} ms",
+  headlineErrors: "{{count}} errors",
+  headlineCustom: "{{count}} spans",
+  hintStartup: "Call useAppReadyMetric(client, ready) from /react.",
+  hintScreens: "Add createNavigationPlugin(navigationRef) from /plugins.",
+  hintNetwork: "Add createNetworkPlugin() from /plugins.",
+  hintResponsiveness: "Add createNativeMetricsPlugin(), Sentry frames, or runtimeMetrics: true.",
+  hintErrors: "Add createErrorsPlugin() from /plugins.",
+  hintCustom: "Use client.trace or native spans.",
+  issueSlowStartup: "Slow startup",
+  issueSlowScreen: "Slow screen",
+  issueSlowRequest: "Slow request",
+  issueFailedRequest: "Failed request",
+  issueStall: "JS stall",
+  issueError: "Error",
+  beforeNavigation: "Before first screen",
+  liveAllActivity: "All activity",
+  liveInspector: "Inspector",
+  liveRequests: "requests",
+  liveStalls: "stalls",
+  liveErrors: "errors",
+  liveEmpty: "No activity on this screen yet. Use the app; events stream in here.",
+  topicResources: "Resources",
+  headlineResources: "CPU {{cpu}}% \xB7 {{memory}} MB",
+  hintResources: "Add createNativeMetricsPlugin() from /plugins.",
+  issueUiStall: "UI stall",
+  issueFrozenFrames: "Frozen frames",
+  liveFlag: "Flag",
+  liveShare: "Share trace",
+  liveFlagged: "Flagged",
+  share: "Share",
+  more: "More",
+  shareTitle: "Share recording",
+  startNew: "Start new recording",
+  frozen: "Frozen",
+  topics: "Topics",
+  sortBy: "Sort: {{sort}}",
+  filter: "Filter",
+  range: "Range",
+  stat_latest: "Latest",
+  stat_median: "Median",
+  stat_p95: "p95",
+  stat_min: "Min",
+  stat_max: "Max",
+  samples: "Samples",
+  duration: "Duration",
+  time: "Time",
+  spanId: "Span ID",
+  correlationId: "Correlation ID",
+  attributeSearch: "Search attributes"
+};
+var createTranslator = (labels) => (key, values) => (labels?.[key] ?? defaultLabels[key]).replace(
+  /{{(\w+)}}/g,
+  (_, name) => String(values?.[name] ?? "")
+);
+
+// src/react/TraceInspector.tsx
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var tabs = [
+  { value: "overview", icon: "\u25C9", key: "overview", iconSize: 18 },
+  { value: "timeline", icon: "\u2630", key: "timeline", iconSize: 22 },
+  { value: "explore", icon: "\u2315", key: "explore", iconSize: 30 },
+  { value: "metrics", icon: "\u25A5", key: "metrics", iconSize: 22 }
+];
+var scenarioKey = {
+  nested: "scenarioNested",
+  concurrency: "scenarioConcurrency",
+  cancelled: "scenarioCancelled",
+  idempotent: "scenarioIdempotent",
+  error: "scenarioError",
+  metrics: "scenarioMetrics"
+};
+function TraceInspector({
+  client,
+  labels,
+  translate,
+  budgets
+}) {
+  const v = useTraceViewer(client, budgets);
+  const stallMs = budgets?.stallMs ?? defaultBudgets.stallMs;
+  const t = translate ?? createTranslator(labels);
+  useEffect3(() => {
+    if (!v.visible) return;
+    const entry = StatusBar.pushStackEntry({ barStyle: "dark-content" });
+    return () => StatusBar.popStackEntry(entry);
+  }, [v.visible]);
+  const identity2 = v.detail?.kind === "span" ? v.detail.value.spanId : v.detail?.kind === "trace" ? v.detail.value.id : v.detail?.kind === "metric" ? v.detail.value.name : v.detail?.kind === "mark" ? String(v.detail.value.sequence) : "";
+  return /* @__PURE__ */ jsx11(
+    Modal3,
+    {
+      visible: v.visible,
+      animationType: "slide",
+      presentationStyle: "fullScreen",
+      statusBarTranslucent: true,
+      onRequestClose: v.detail ? v.back : client.close,
+      children: /* @__PURE__ */ jsx11(SafeAreaProvider2, { children: /* @__PURE__ */ jsxs10(
+        SafeAreaView3,
+        {
+          style: styles8.root,
+          edges: ["top", "bottom", "left", "right"],
+          children: [
+            /* @__PURE__ */ jsx11(InspectorHeader, { v, t }),
+            v.detail ? /* @__PURE__ */ jsx11(DetailView, { v, t }, `${v.details.length}:${identity2}`) : v.tab === "tools" ? /* @__PURE__ */ jsx11(ToolsView, { v, t, client }) : /* @__PURE__ */ jsx11(
+              NativeTabs,
+              {
+                value: v.tab,
+                onChange: v.setTab,
+                tint: palette.accent,
+                tabs: [
+                  {
+                    key: "overview",
+                    title: t("overview"),
+                    sfSymbol: "gauge.with.dots.needle.67percent",
+                    badge: v.issues.length ? String(v.issues.length) : void 0,
+                    render: () => /* @__PURE__ */ jsx11(SummaryView, { v, t, budgetMs: stallMs })
+                  },
+                  {
+                    key: "timeline",
+                    title: t("timeline"),
+                    sfSymbol: "list.bullet.below.rectangle",
+                    render: () => /* @__PURE__ */ jsx11(TimelineView, { v, t })
+                  },
+                  {
+                    key: "explore",
+                    title: t("explore"),
+                    sfSymbol: "magnifyingglass",
+                    render: () => /* @__PURE__ */ jsx11(ExplorerView, { v, t })
+                  },
+                  {
+                    key: "metrics",
+                    title: t("metrics"),
+                    sfSymbol: "chart.xyaxis.line",
+                    render: () => /* @__PURE__ */ jsx11(MetricsView, { v, t })
+                  }
+                ],
+                fallback: (content) => /* @__PURE__ */ jsxs10(Fragment4, { children: [
+                  content,
+                  /* @__PURE__ */ jsx11(
+                    TabBar,
+                    {
+                      items: tabs.map((tab) => ({ ...tab, label: t(tab.key) })),
+                      value: v.tab === "tools" ? "overview" : v.tab,
+                      onChange: v.setTab
+                    }
+                  )
+                ] })
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+}
+function ToolsView({
+  v,
+  t,
+  client
+}) {
+  const result = v.playgroundResult;
+  return /* @__PURE__ */ jsxs10(ScrollView4, { contentContainerStyle: styles8.content, children: [
+    /* @__PURE__ */ jsxs10(Section, { header: t("profiling"), footer: t("profileSeparate"), children: [
+      client.canProfile ? /* @__PURE__ */ jsx11(
+        Row,
+        {
+          icon: "\u25F7",
+          title: t(v.profiling ? "stopProfile" : "startProfile"),
+          subtitle: t("profilingDescription"),
+          onPress: v.busy || !v.recording ? void 0 : v.toggleProfile,
+          last: !v.profilePath
+        }
+      ) : /* @__PURE__ */ jsx11(Row, { title: t("noProfiler"), last: true }),
+      v.profilePath && /* @__PURE__ */ jsx11(
+        Row,
+        {
+          icon: "\u21EA",
+          title: t("shareProfile"),
+          subtitle: v.profilePath,
+          onPress: client.canShareProfile ? v.shareProfile : void 0,
+          last: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs10(Section, { header: t("playground"), footer: t("playgroundDescription"), children: [
+      /* @__PURE__ */ jsx11(
+        Row,
+        {
+          icon: "\u25B7",
+          title: t("run"),
+          onPress: v.busy || !v.recording ? void 0 : v.playground,
+          last: !result
+        }
+      ),
+      result?.checks.map((check) => /* @__PURE__ */ jsx11(
+        Row,
+        {
+          icon: check.passed ? "\u2713" : "\u2715",
+          iconColor: check.passed ? "#34c759" : palette.error,
+          title: t(scenarioKey[check.id])
+        },
+        check.id
+      )),
+      result && /* @__PURE__ */ jsx11(Row, { title: t("openScenario"), onPress: v.openPlayground, last: true })
+    ] })
+  ] });
+}
+var styles8 = StyleSheet9.create({
+  root: { flex: 1, backgroundColor: apple.grouped },
+  content: { paddingBottom: 32 }
+});
+
+// src/react/TraceOverlay.tsx
+import React9, {
+  useContext,
+  useMemo as useMemo4,
+  useRef as useRef3,
+  useState as useState7,
+  useSyncExternalStore as useSyncExternalStore3
+} from "react";
+import {
+  Animated,
+  PanResponder,
+  Pressable as Pressable6,
+  ScrollView as ScrollView5,
+  StyleSheet as StyleSheet10,
+  Text as Text8,
+  View as View9,
+  useWindowDimensions
+} from "react-native";
+import {
+  initialWindowMetrics,
+  SafeAreaInsetsContext
+} from "react-native-safe-area-context";
+
+// src/react/useLiveRecording.ts
+import { useEffect as useEffect4, useState as useState6 } from "react";
+function useLiveRecording(client, active, intervalMs = 1e3) {
+  const [page, setPage] = useState6();
+  useEffect4(() => {
+    if (!active) return;
+    let cancelled = false;
+    let timer;
+    let cached;
+    let cachedRecording;
+    const tick = async () => {
+      try {
+        const recording = client.getRecording();
+        if (recording) {
+          if (recording !== cachedRecording) {
+            cached = void 0;
+            cachedRecording = recording;
+          }
+          cached = await readSnapshot(recording, cached);
+          if (!cancelled) setPage(cached);
+        }
+      } catch (error) {
+        client.reportError(error);
+      } finally {
+        if (!cancelled) timer = setTimeout(tick, intervalMs);
+      }
+    };
+    void tick();
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [client, active, intervalMs]);
+  return page;
+}
+
+// src/react/TraceOverlay.tsx
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var BUBBLE = 56;
+var PEEK = 150;
+var noInsets = { top: 0, right: 0, bottom: 0, left: 0 };
+var useInsets = () => useContext(SafeAreaInsetsContext) ?? initialWindowMetrics?.insets ?? noInsets;
+var round = (value) => value === void 0 ? "\u2014" : Math.round(value);
+function TraceOverlay({
+  client,
+  labels,
+  translate,
+  budgets,
+  bottomOffset = 0
+}) {
+  return (
+    // Plain Views only: a native provider here would swallow touches on Android.
+    /* @__PURE__ */ jsx12(View9, { style: StyleSheet10.absoluteFill, pointerEvents: "box-none", children: /* @__PURE__ */ jsx12(
+      Overlay,
+      {
+        client,
+        t: translate ?? createTranslator(labels),
+        budgets: { ...defaultBudgets, ...budgets },
+        bottomOffset
+      }
+    ) })
+  );
+}
+function Overlay({
+  client,
+  t,
+  budgets,
+  bottomOffset
+}) {
+  const snapshot = useSyncExternalStore3(
+    client.subscribe,
+    client.getSnapshot,
+    client.getSnapshot
+  );
+  const [detent, setDetent] = useState7("closed");
+  const page = useLiveRecording(
+    client,
+    !snapshot.visible && snapshot.recording,
+    detent === "closed" ? 2e3 : 1e3
+  );
+  const { appReadyMs, screenMs, requestMs, stallMs } = budgets;
+  const visit = useMemo4(() => {
+    if (!page) return void 0;
+    const { issues } = summarizeTopics(page, snapshot.collectors ?? [], {
+      appReadyMs,
+      screenMs,
+      requestMs,
+      stallMs
+    });
+    return currentVisit(buildTimeline(page, issues, 300));
+  }, [page, snapshot.collectors, appReadyMs, screenMs, requestMs, stallMs]);
+  const vitals = useMemo4(
+    () => ({
+      uiFps: page && latestMetric(page, "ui.fps"),
+      jsFps: page && latestMetric(page, "js.frame_callback.rate"),
+      cpu: page && latestMetric(page, "process.cpu"),
+      memory: page && latestMetric(page, "process.memory")
+    }),
+    [page]
+  );
+  if (snapshot.visible || snapshot.disposed) return null;
+  return detent === "closed" ? /* @__PURE__ */ jsx12(
+    Bubble,
+    {
+      fps: vitals.uiFps ?? vitals.jsFps,
+      native: vitals.uiFps !== void 0,
+      issues: visit?.issues ?? 0,
+      onPress: () => setDetent("half"),
+      onLongPress: client.open
+    }
+  ) : /* @__PURE__ */ jsx12(
+    Sheet,
+    {
+      bottomOffset,
+      detent,
+      setDetent,
+      openInspector: () => {
+        setDetent("closed");
+        client.open();
+      },
+      nowMs: client.getRecording()?.getStats().nowMs,
+      visit,
+      vitals,
+      recording: snapshot.recording,
+      flag: () => client.flag(),
+      share: client.canShare ? () => client.shareTrace("perfetto") : void 0,
+      t
+    }
+  );
+}
+function Bubble({
+  fps,
+  native,
+  issues,
+  onPress,
+  onLongPress
+}) {
+  const { width, height } = useWindowDimensions();
+  const insets = useInsets();
+  const base = useRef3({ x: width - BUBBLE - 12, y: height * 0.55 });
+  const position = useRef3(new Animated.ValueXY(base.current)).current;
+  const handlers = useRef3({ onPress, onLongPress });
+  handlers.current = { onPress, onLongPress };
+  const responder = useMemo4(() => {
+    let moved = false;
+    let longPressed = false;
+    let timer;
+    return PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        moved = false;
+        longPressed = false;
+        timer = setTimeout(() => {
+          longPressed = true;
+          handlers.current.onLongPress();
+        }, 500);
+      },
+      onPanResponderMove: (_, g) => {
+        if (Math.abs(g.dx) + Math.abs(g.dy) > 6) {
+          moved = true;
+          clearTimeout(timer);
+        }
+        position.setValue({
+          x: base.current.x + g.dx,
+          y: base.current.y + g.dy
+        });
+      },
+      onPanResponderRelease: (_, g) => {
+        clearTimeout(timer);
+        if (!moved) {
+          if (!longPressed) handlers.current.onPress();
+          return;
+        }
+        const x = base.current.x + g.dx;
+        const y = base.current.y + g.dy;
+        base.current = {
+          x: x + BUBBLE / 2 < width / 2 ? 12 : width - BUBBLE - 12,
+          y: Math.min(
+            Math.max(y, insets.top + 8),
+            height - BUBBLE - insets.bottom - 8
+          )
+        };
+        Animated.spring(position, {
+          toValue: base.current,
+          useNativeDriver: false
+        }).start();
+      },
+      onPanResponderTerminate: () => {
+        clearTimeout(timer);
+        position.setValue(base.current);
+      }
+    });
+  }, [position, width, height, insets.top, insets.bottom]);
+  const alert = issues > 0;
+  return /* @__PURE__ */ jsxs11(
+    Animated.View,
+    {
+      ...responder.panHandlers,
+      accessibilityRole: "button",
+      accessibilityLabel: "Performance overlay",
+      accessibilityHint: "Tap for live activity, long press for the full inspector",
+      style: [
+        styles9.bubble,
+        alert && styles9.bubbleAlert,
+        { transform: position.getTranslateTransform() }
+      ],
+      children: [
+        /* @__PURE__ */ jsx12(
+          Glass,
+          {
+            style: [StyleSheet10.absoluteFill, styles9.bubbleGlass],
+            fallbackColor: palette.bg,
+            interactive: true
+          }
+        ),
+        /* @__PURE__ */ jsx12(Text8, { style: [styles9.bubbleValue, alert && { color: palette.error }], children: fps === void 0 ? "\u2014" : Math.round(fps) }),
+        /* @__PURE__ */ jsx12(Text8, { style: styles9.bubbleUnit, children: alert ? `${issues} \u26A0` : native ? "UI fps" : "JS fps" })
+      ]
+    }
+  );
+}
+function Sheet({
+  detent,
+  setDetent,
+  openInspector,
+  nowMs,
+  visit,
+  vitals,
+  recording,
+  flag,
+  share,
+  t,
+  bottomOffset
+}) {
+  const { height } = useWindowDimensions();
+  const insets = useInsets();
+  const [flagged, setFlagged] = useState7(false);
+  const inset = bottomOffset > 0 ? 0 : insets.bottom;
+  const half = Math.round(height * 0.45) + inset;
+  const peek = PEEK + inset;
+  const offsetFor = (value) => value === "half" ? 0 : value === "peek" ? half - peek : half + bottomOffset;
+  const translate = useRef3(new Animated.Value(half + bottomOffset)).current;
+  const settle = (value) => Animated.spring(translate, {
+    toValue: offsetFor(value),
+    useNativeDriver: true,
+    bounciness: 0
+  }).start(() => value === "closed" && setDetent("closed"));
+  const current = useRef3(detent);
+  current.current = detent;
+  React9.useEffect(() => {
+    settle(detent);
+  }, [detent, half]);
+  const responder = useMemo4(
+    () => PanResponder.create({
+      onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dy) > 4,
+      onPanResponderMove: (_, g) => translate.setValue(Math.max(-80, offsetFor(current.current) + g.dy)),
+      onPanResponderRelease: (_, g) => {
+        const at = offsetFor(current.current) + g.dy;
+        if (at < -60) {
+          settle(current.current);
+          openInspector();
+        } else if (at > half - peek / 2 || g.vy > 1.5) settle("closed");
+        else {
+          const next = at < (half - peek) / 2 ? "half" : "peek";
+          if (next === current.current) settle(next);
+          else setDetent(next);
+        }
+      }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [half, peek]
+  );
+  const elapsed = nowMs !== void 0 && visit?.sinceMs !== void 0 ? (nowMs - visit.sinceMs) / 1e3 : void 0;
+  const latest = visit?.events[0];
+  return /* @__PURE__ */ jsxs11(
+    Animated.View,
+    {
+      style: [
+        styles9.sheet,
+        { height: half, paddingBottom: inset, bottom: bottomOffset },
+        { transform: [{ translateY: translate }] }
+      ],
+      children: [
+        /* @__PURE__ */ jsx12(
+          Glass,
+          {
+            style: [StyleSheet10.absoluteFill, styles9.sheetGlass],
+            fallbackColor: palette.bg
+          }
+        ),
+        /* @__PURE__ */ jsxs11(View9, { ...responder.panHandlers, style: styles9.grabArea, children: [
+          /* @__PURE__ */ jsx12(View9, { style: styles9.grabber }),
+          /* @__PURE__ */ jsxs11(View9, { style: styles9.row, children: [
+            /* @__PURE__ */ jsxs11(Text8, { style: styles9.screen, numberOfLines: 1, children: [
+              recording ? "\u25CF" : "\u25CB",
+              " ",
+              visit?.screen ?? t("liveAllActivity"),
+              elapsed !== void 0 && /* @__PURE__ */ jsxs11(Text8, { style: styles9.muted, children: [
+                " \xB7 ",
+                elapsed.toFixed(0),
+                " s"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx12(
+              Pressable6,
+              {
+                accessibilityRole: "button",
+                onPress: () => setDetent(detent === "half" ? "peek" : "half"),
+                style: styles9.chip,
+                children: /* @__PURE__ */ jsx12(Text8, { style: styles9.chipText, children: detent === "half" ? "\u25BE" : "\u25B4" })
+              }
+            ),
+            /* @__PURE__ */ jsx12(
+              Pressable6,
+              {
+                accessibilityRole: "button",
+                onPress: openInspector,
+                style: styles9.chip,
+                children: /* @__PURE__ */ jsx12(Text8, { style: styles9.chipText, children: t("liveInspector") })
+              }
+            ),
+            /* @__PURE__ */ jsx12(
+              Pressable6,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: t("close"),
+                onPress: () => settle("closed"),
+                style: styles9.chip,
+                children: /* @__PURE__ */ jsx12(Text8, { style: styles9.chipText, children: "\u2715" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs11(View9, { style: styles9.stats, children: [
+            /* @__PURE__ */ jsx12(Stat, { label: "UI fps", value: round(vitals.uiFps) }),
+            /* @__PURE__ */ jsx12(Stat, { label: "JS fps", value: round(vitals.jsFps) }),
+            /* @__PURE__ */ jsx12(Stat, { label: "CPU %", value: round(vitals.cpu) }),
+            /* @__PURE__ */ jsx12(Stat, { label: "MB", value: round(vitals.memory) })
+          ] }),
+          /* @__PURE__ */ jsxs11(View9, { style: styles9.stats, children: [
+            /* @__PURE__ */ jsx12(Stat, { label: t("liveRequests"), value: visit?.requests ?? 0 }),
+            /* @__PURE__ */ jsx12(Stat, { label: t("liveStalls"), value: visit?.stalls ?? 0, alert: true }),
+            /* @__PURE__ */ jsx12(Stat, { label: t("liveErrors"), value: visit?.errors ?? 0, alert: true }),
+            /* @__PURE__ */ jsx12(
+              Pressable6,
+              {
+                accessibilityRole: "button",
+                onPress: () => {
+                  flag();
+                  setFlagged(true);
+                  setTimeout(() => setFlagged(false), 1200);
+                },
+                style: styles9.action,
+                children: /* @__PURE__ */ jsxs11(Text8, { style: styles9.actionText, children: [
+                  "\u2691 ",
+                  t(flagged ? "liveFlagged" : "liveFlag")
+                ] })
+              }
+            ),
+            share && /* @__PURE__ */ jsx12(
+              Pressable6,
+              {
+                accessibilityRole: "button",
+                onPress: () => void share(),
+                style: styles9.action,
+                children: /* @__PURE__ */ jsxs11(Text8, { style: styles9.actionText, children: [
+                  "\u21EA ",
+                  t("liveShare")
+                ] })
+              }
+            )
+          ] })
+        ] }),
+        detent === "peek" ? latest && /* @__PURE__ */ jsxs11(Text8, { style: styles9.muted, numberOfLines: 1, children: [
+          topicGlyph[latest.topic].icon,
+          " ",
+          latest.event.name
+        ] }) : /* @__PURE__ */ jsxs11(ScrollView5, { style: styles9.list, children: [
+          !visit?.events.length && /* @__PURE__ */ jsx12(Text8, { style: [styles9.muted, styles9.empty], children: t("liveEmpty") }),
+          visit?.events.slice(0, 100).map((item) => /* @__PURE__ */ jsxs11(View9, { style: styles9.event, children: [
+            /* @__PURE__ */ jsx12(
+              Text8,
+              {
+                style: [styles9.glyph, { color: topicGlyph[item.topic].color }],
+                children: topicGlyph[item.topic].icon
+              }
+            ),
+            /* @__PURE__ */ jsx12(
+              Text8,
+              {
+                style: [styles9.eventName, item.issue && styles9.alertText],
+                numberOfLines: 1,
+                children: item.event.name
+              }
+            ),
+            /* @__PURE__ */ jsx12(Text8, { style: [styles9.value, item.issue && styles9.alertText], children: "durationMs" in item.event ? `${item.event.durationMs.toFixed(0)} ms` : "value" in item.event ? `${item.event.value.toFixed(0)} ${item.event.unit}` : "" }),
+            /* @__PURE__ */ jsxs11(Text8, { style: styles9.time, children: [
+              "+",
+              ((item.event.timestampMs - (visit.sinceMs ?? 0)) / 1e3).toFixed(1),
+              "s"
+            ] })
+          ] }, item.key))
+        ] })
+      ]
+    }
+  );
+}
+function Stat({
+  label,
+  value,
+  alert
+}) {
+  const hot = alert && Number(value) > 0;
+  return /* @__PURE__ */ jsxs11(View9, { style: styles9.stat, children: [
+    /* @__PURE__ */ jsx12(Text8, { style: [styles9.statValue, hot && styles9.alertText], children: value }),
+    /* @__PURE__ */ jsx12(Text8, { style: styles9.statLabel, children: label })
+  ] });
+}
+var styles9 = StyleSheet10.create({
+  bubble: {
+    position: "absolute",
+    width: BUBBLE,
+    height: BUBBLE,
+    borderRadius: BUBBLE / 2,
+    overflow: "hidden",
+    borderWidth: StyleSheet10.hairlineWidth * 2,
+    borderColor: palette.line,
+    alignItems: "center",
+    justifyContent: "center",
+    shadowColor: "#000",
+    shadowOpacity: 0.15,
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 4 },
+    elevation: 6
+  },
+  bubbleGlass: { borderRadius: BUBBLE / 2 },
+  sheetGlass: { borderTopLeftRadius: 22, borderTopRightRadius: 22 },
+  bubbleAlert: { borderColor: palette.error, borderWidth: 2 },
+  bubbleValue: {
+    color: palette.text,
+    fontSize: 17,
+    fontWeight: "600",
+    fontVariant: ["tabular-nums"]
+  },
+  bubbleUnit: { color: palette.muted, fontSize: 10, marginTop: -2 },
+  sheet: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderTopLeftRadius: 22,
+    borderTopRightRadius: 22,
+    overflow: "hidden",
+    borderTopWidth: StyleSheet10.hairlineWidth,
+    borderColor: palette.line,
+    paddingHorizontal: 14,
+    shadowColor: "#000",
+    shadowOpacity: 0.12,
+    shadowRadius: 16,
+    shadowOffset: { width: 0, height: -4 },
+    elevation: 12
+  },
+  grabArea: { paddingBottom: 8 },
+  grabber: {
+    alignSelf: "center",
+    width: 36,
+    height: 5,
+    borderRadius: 3,
+    backgroundColor: palette.line,
+    marginTop: 6,
+    marginBottom: 8
+  },
+  row: { flexDirection: "row", alignItems: "center", gap: 6 },
+  screen: { flex: 1, color: palette.text, fontSize: 15, fontWeight: "600" },
+  muted: { color: palette.muted, fontSize: 13, fontWeight: "400" },
+  chip: {
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 6,
+    backgroundColor: palette.panel
+  },
+  chipText: { color: palette.accent, fontSize: 13, fontWeight: "500" },
+  stats: {
+    flexDirection: "row",
+    marginTop: 10,
+    borderTopWidth: StyleSheet10.hairlineWidth,
+    borderColor: palette.line,
+    paddingTop: 8
+  },
+  stat: { flex: 1, alignItems: "center" },
+  action: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 7,
+    backgroundColor: palette.panel,
+    marginLeft: 6,
+    alignSelf: "center"
+  },
+  actionText: { color: palette.accent, fontSize: 13, fontWeight: "500" },
+  statValue: {
+    color: palette.text,
+    fontSize: 17,
+    fontWeight: "600",
+    fontVariant: ["tabular-nums"]
+  },
+  statLabel: { color: palette.muted, fontSize: 11 },
+  list: { flex: 1 },
+  empty: { paddingVertical: 12 },
+  event: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingVertical: 7,
+    borderBottomWidth: StyleSheet10.hairlineWidth,
+    borderColor: palette.line
+  },
+  glyph: { width: 18, textAlign: "center", color: palette.muted },
+  eventName: { flex: 1, color: palette.text, fontSize: 13 },
+  value: {
+    color: palette.text,
+    fontSize: 13,
+    fontVariant: ["tabular-nums"]
+  },
+  time: {
+    width: 52,
+    textAlign: "right",
+    color: palette.muted,
+    fontSize: 12,
+    fontVariant: ["tabular-nums"]
+  },
+  alertText: { color: palette.error }
+});
+
+// src/react/useAppReadyMetric.ts
+import { useEffect as useEffect5 } from "react";
+function useAppReadyMetric(client, ready) {
+  useEffect5(() => {
+    if (!ready) return;
+    const frame = requestAnimationFrame(() => client.reportAppReady());
+    return () => cancelAnimationFrame(frame);
+  }, [client, ready]);
+}
+export {
+  TraceInspector,
+  TraceOverlay,
+  defaultLabels,
+  useAppReadyMetric
+};
+//# sourceMappingURL=react.mjs.map