@variantlab/react-native 0.1.0

package/dist/debug.js

@@ -0,0 +1,926 @@
+import { StyleSheet, View, Text, Pressable, Animated, Modal, TextInput, ScrollView } from 'react-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useVariantLabEngine } from '@variantlab/react';
+import { useMemo, useState, useEffect, useCallback, useRef, useSyncExternalStore } from 'react';
+
+// src/overlay/experiment-card.tsx
+function ExperimentCard({
+  theme,
+  experiment,
+  activeVariantId,
+  expanded,
+  onToggleExpand,
+  onSelect,
+  onReset
+}) {
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [styles.card, { backgroundColor: theme.surface, borderColor: theme.border }],
+      testID: `variantlab-experiment-card-${experiment.id}`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            onPress: onToggleExpand,
+            accessibilityRole: "button",
+            accessibilityLabel: `Experiment ${experiment.name}, current variant ${activeVariantId}`,
+            style: styles.header,
+            children: [
+              /* @__PURE__ */ jsxs(View, { style: styles.headerText, children: [
+                /* @__PURE__ */ jsx(Text, { style: [styles.name, { color: theme.text }], numberOfLines: 1, children: experiment.name }),
+                /* @__PURE__ */ jsx(Text, { style: [styles.id, { color: theme.textMuted }], numberOfLines: 1, children: experiment.id })
+              ] }),
+              /* @__PURE__ */ jsx(View, { style: [styles.activePill, { backgroundColor: theme.accent }], children: /* @__PURE__ */ jsx(Text, { style: [styles.activePillText, { color: theme.accentText }], children: activeVariantId }) })
+            ]
+          }
+        ),
+        expanded ? /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
+          experiment.variants.map((v) => {
+            const isActive = v.id === activeVariantId;
+            return /* @__PURE__ */ jsxs(
+              Pressable,
+              {
+                onPress: () => onSelect(v.id),
+                accessibilityRole: "button",
+                accessibilityState: { selected: isActive },
+                accessibilityLabel: `Set variant ${v.id}`,
+                style: [
+                  styles.variantRow,
+                  {
+                    borderColor: isActive ? theme.accent : theme.border,
+                    backgroundColor: isActive ? `${theme.accent}22` : "transparent"
+                  }
+                ],
+                testID: `variantlab-variant-row-${experiment.id}-${v.id}`,
+                children: [
+                  /* @__PURE__ */ jsx(Text, { style: [styles.variantId, { color: theme.text }], children: v.label ?? v.id }),
+                  v.description !== void 0 ? /* @__PURE__ */ jsx(Text, { style: [styles.variantDesc, { color: theme.textMuted }], numberOfLines: 2, children: v.description }) : null
+                ]
+              },
+              v.id
+            );
+          }),
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              onPress: onReset,
+              accessibilityRole: "button",
+              accessibilityLabel: "Reset to default",
+              style: styles.resetRow,
+              testID: `variantlab-reset-${experiment.id}`,
+              children: /* @__PURE__ */ jsx(Text, { style: [styles.resetText, { color: theme.textMuted }], children: "Reset to default" })
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+}
+function describeAssignmentSource(hasOverride, matchedTargeting) {
+  if (hasOverride) return "manual override";
+  if (matchedTargeting) return "by targeting";
+  return "by default";
+}
+var styles = StyleSheet.create({
+  card: {
+    borderRadius: 10,
+    borderWidth: 1,
+    marginBottom: 8,
+    overflow: "hidden"
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 12,
+    gap: 8
+  },
+  headerText: {
+    flex: 1,
+    flexDirection: "column"
+  },
+  name: {
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  id: {
+    fontSize: 11,
+    fontFamily: "Menlo, monospace",
+    marginTop: 2
+  },
+  activePill: {
+    borderRadius: 999,
+    paddingHorizontal: 10,
+    paddingVertical: 4
+  },
+  activePillText: {
+    fontSize: 11,
+    fontWeight: "700"
+  },
+  body: {
+    paddingHorizontal: 12,
+    paddingBottom: 12,
+    gap: 6
+  },
+  variantRow: {
+    borderRadius: 8,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 8
+  },
+  variantId: {
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  variantDesc: {
+    fontSize: 11,
+    marginTop: 2
+  },
+  resetRow: {
+    paddingVertical: 8,
+    alignItems: "flex-end"
+  },
+  resetText: {
+    fontSize: 11,
+    textDecorationLine: "underline"
+  }
+});
+
+// src/overlay/filter.ts
+function isVisibleExperiment(experiment) {
+  return experiment.status !== "archived";
+}
+function matchesSearch(experiment, query) {
+  if (query === "") return true;
+  const needle = query.toLowerCase();
+  if (experiment.id.toLowerCase().includes(needle)) return true;
+  if (experiment.name.toLowerCase().includes(needle)) return true;
+  for (const v of experiment.variants) {
+    if (v.id.toLowerCase().includes(needle)) return true;
+    if (v.label !== void 0 && v.label.toLowerCase().includes(needle)) return true;
+  }
+  return false;
+}
+function filterExperiments(list, query) {
+  const out = [];
+  for (const exp of list) {
+    if (!isVisibleExperiment(exp)) continue;
+    if (!matchesSearch(exp, query)) continue;
+    out.push(exp);
+  }
+  return out;
+}
+
+// src/overlay/imperative.ts
+var subscribers = /* @__PURE__ */ new Set();
+function registerOverlay(setVisible) {
+  subscribers.add(setVisible);
+  return () => {
+    subscribers.delete(setVisible);
+  };
+}
+function openDebugOverlay() {
+  for (const fn of subscribers) fn(true);
+}
+function closeDebugOverlay() {
+  for (const fn of subscribers) fn(false);
+}
+function BottomSheet({
+  visible,
+  onRequestClose,
+  theme,
+  insetBottom = 0,
+  children
+}) {
+  const progress = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(progress, {
+      toValue: visible ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true
+    }).start();
+  }, [visible, progress]);
+  const translateY = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [600, 0]
+  });
+  const opacity = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1]
+  });
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      visible,
+      transparent: true,
+      animationType: "none",
+      onRequestClose,
+      statusBarTranslucent: true,
+      children: /* @__PURE__ */ jsxs(View, { style: styles2.root, pointerEvents: "box-none", children: [
+        /* @__PURE__ */ jsx(Animated.View, { style: [styles2.scrim, { opacity }], children: /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: "Dismiss debug overlay",
+            onPress: onRequestClose,
+            style: StyleSheet.absoluteFill,
+            testID: "variantlab-scrim"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: [
+              styles2.sheet,
+              {
+                backgroundColor: theme.background,
+                borderColor: theme.border,
+                paddingBottom: insetBottom + 12,
+                transform: [{ translateY }]
+              }
+            ],
+            testID: "variantlab-bottom-sheet",
+            children
+          }
+        )
+      ] })
+    }
+  );
+}
+var styles2 = StyleSheet.create({
+  root: {
+    flex: 1,
+    justifyContent: "flex-end"
+  },
+  scrim: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0,0,0,0.5)"
+  },
+  sheet: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    borderTopWidth: 1,
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    maxHeight: "85%"
+  }
+});
+function FloatingButton({
+  theme,
+  corner,
+  offset,
+  count,
+  onPress
+}) {
+  const positionStyle = cornerStyle(corner, offset);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: "Open variantlab debug overlay",
+      onPress,
+      style: [styles3.button, positionStyle, { backgroundColor: theme.accent }],
+      hitSlop: 8,
+      testID: "variantlab-floating-button",
+      children: [
+        /* @__PURE__ */ jsx(BeakerIcon, { color: theme.accentText }),
+        count > 0 ? /* @__PURE__ */ jsx(View, { style: [styles3.badge, { backgroundColor: theme.surface, borderColor: theme.accent }], children: /* @__PURE__ */ jsx(Text, { style: [styles3.badgeText, { color: theme.text }], children: String(count) }) }) : null
+      ]
+    }
+  );
+}
+function BeakerIcon({ color }) {
+  return /* @__PURE__ */ jsxs(View, { style: styles3.iconWrap, children: [
+    /* @__PURE__ */ jsx(View, { style: [styles3.iconNeck, { backgroundColor: color }] }),
+    /* @__PURE__ */ jsx(View, { style: [styles3.iconBody, { borderColor: color }] })
+  ] });
+}
+function cornerStyle(corner, offset) {
+  switch (corner) {
+    case "top-left":
+      return { top: offset.y, left: offset.x };
+    case "top-right":
+      return { top: offset.y, right: offset.x };
+    case "bottom-left":
+      return { bottom: offset.y, left: offset.x };
+    case "bottom-right":
+      return { bottom: offset.y, right: offset.x };
+  }
+}
+var styles3 = StyleSheet.create({
+  button: {
+    position: "absolute",
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: "center",
+    justifyContent: "center",
+    elevation: 4,
+    shadowColor: "#000",
+    shadowOpacity: 0.3,
+    shadowRadius: 6,
+    shadowOffset: { width: 0, height: 2 }
+  },
+  badge: {
+    position: "absolute",
+    top: -4,
+    right: -4,
+    minWidth: 18,
+    height: 18,
+    borderRadius: 9,
+    paddingHorizontal: 4,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  badgeText: {
+    fontSize: 10,
+    fontWeight: "700"
+  },
+  iconWrap: {
+    width: 24,
+    height: 24,
+    alignItems: "center",
+    justifyContent: "flex-end"
+  },
+  iconNeck: {
+    width: 4,
+    height: 6,
+    marginBottom: 0
+  },
+  iconBody: {
+    width: 18,
+    height: 14,
+    borderWidth: 2,
+    borderRadius: 3,
+    borderTopWidth: 0
+  }
+});
+function SearchInput({
+  theme,
+  value,
+  onChange,
+  placeholder
+}) {
+  return /* @__PURE__ */ jsx(View, { style: [styles4.wrapper, { backgroundColor: theme.surface, borderColor: theme.border }], children: /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      accessibilityLabel: "Filter experiments",
+      value,
+      onChangeText: onChange,
+      placeholder: placeholder ?? "Search experiments\u2026",
+      placeholderTextColor: theme.textMuted,
+      autoCorrect: false,
+      autoCapitalize: "none",
+      style: [styles4.input, { color: theme.text }],
+      testID: "variantlab-search-input"
+    }
+  ) });
+}
+var styles4 = StyleSheet.create({
+  wrapper: {
+    borderRadius: 8,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 6
+  },
+  input: {
+    fontSize: 14,
+    paddingVertical: 4
+  }
+});
+function ConfigTab({ theme, config }) {
+  const enabled = config.enabled !== false;
+  return /* @__PURE__ */ jsxs(
+    ScrollView,
+    {
+      style: styles5.scroll,
+      contentContainerStyle: styles5.content,
+      testID: "variantlab-config-view",
+      children: [
+        /* @__PURE__ */ jsx(SummaryRow, { theme, label: "Version", value: String(config.version) }),
+        /* @__PURE__ */ jsx(SummaryRow, { theme, label: "Status", value: enabled ? "enabled" : "kill-switched" }),
+        /* @__PURE__ */ jsx(SummaryRow, { theme, label: "Experiments", value: String(config.experiments.length) }),
+        /* @__PURE__ */ jsx(View, { style: [styles5.section, { borderColor: theme.border, backgroundColor: theme.surface }], children: config.experiments.map((exp) => /* @__PURE__ */ jsxs(View, { style: [styles5.row, { borderBottomColor: theme.border }], children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles5.rowId, { color: theme.text }], numberOfLines: 1, children: exp.id }),
+          /* @__PURE__ */ jsxs(Text, { style: [styles5.rowMeta, { color: theme.textMuted }], numberOfLines: 1, children: [
+            exp.status ?? "active",
+            " \xB7 default = ",
+            exp.default
+          ] })
+        ] }, exp.id)) })
+      ]
+    }
+  );
+}
+function SummaryRow({
+  theme,
+  label,
+  value
+}) {
+  return /* @__PURE__ */ jsxs(View, { style: styles5.summaryRow, children: [
+    /* @__PURE__ */ jsx(Text, { style: [styles5.summaryLabel, { color: theme.textMuted }], children: label }),
+    /* @__PURE__ */ jsx(Text, { style: [styles5.summaryValue, { color: theme.text }], children: value })
+  ] });
+}
+var styles5 = StyleSheet.create({
+  scroll: { flexGrow: 0 },
+  content: { paddingVertical: 8, gap: 8 },
+  summaryRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingHorizontal: 4
+  },
+  summaryLabel: { fontSize: 12 },
+  summaryValue: { fontSize: 12, fontWeight: "600" },
+  section: {
+    borderRadius: 8,
+    borderWidth: 1,
+    paddingVertical: 4
+  },
+  row: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1
+  },
+  rowId: { fontSize: 12, fontWeight: "600" },
+  rowMeta: { fontSize: 11, marginTop: 2 }
+});
+function ContextTab({ theme, context }) {
+  const json = stringifyContext(context);
+  return /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      style: styles6.scroll,
+      contentContainerStyle: styles6.content,
+      testID: "variantlab-context-view",
+      children: /* @__PURE__ */ jsx(Text, { style: [styles6.json, { color: theme.text }], children: json })
+    }
+  );
+}
+function stringifyContext(context) {
+  const masked = { ...context };
+  if (typeof masked.userId === "string" && masked.userId.length > 0) {
+    masked.userId = maskId(masked.userId);
+  }
+  return JSON.stringify(masked, null, 2);
+}
+function maskId(id) {
+  if (id.length <= 4) return "***";
+  return `${id.slice(0, 2)}\u2026${id.slice(-2)}`;
+}
+var styles6 = StyleSheet.create({
+  scroll: { flexGrow: 0 },
+  content: { paddingVertical: 8 },
+  json: {
+    fontSize: 11,
+    fontFamily: "Menlo, monospace",
+    lineHeight: 16
+  }
+});
+function HistoryTab({ theme, events }) {
+  const ordered = useMemo(() => {
+    const list = [];
+    for (let i = events.length - 1; i >= 0; i--) {
+      const event = events[i];
+      if (event !== void 0) list.push({ seq: i, event });
+    }
+    return list;
+  }, [events]);
+  if (ordered.length === 0) {
+    return /* @__PURE__ */ jsx(View, { style: styles7.empty, testID: "variantlab-history-empty", children: /* @__PURE__ */ jsx(Text, { style: [styles7.emptyText, { color: theme.textMuted }], children: "No events yet." }) });
+  }
+  return /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      style: styles7.scroll,
+      contentContainerStyle: styles7.content,
+      testID: "variantlab-history-list",
+      children: ordered.map(({ seq, event }) => /* @__PURE__ */ jsxs(
+        View,
+        {
+          style: [styles7.row, { borderColor: theme.border, backgroundColor: theme.surface }],
+          children: [
+            /* @__PURE__ */ jsx(Text, { style: [styles7.type, { color: theme.accent }], children: event.type }),
+            /* @__PURE__ */ jsx(Text, { style: [styles7.detail, { color: theme.text }], numberOfLines: 2, children: summarize(event) })
+          ]
+        },
+        `${seq}:${event.type}`
+      ))
+    }
+  );
+}
+function summarize(event) {
+  switch (event.type) {
+    case "ready":
+      return `engine ready \xB7 ${event.config.experiments.length} experiments`;
+    case "assignment":
+      return `${event.experimentId} \u2192 ${event.variantId}`;
+    case "exposure":
+      return `${event.experimentId} \u2192 ${event.variantId} (exposure)`;
+    case "variantChanged":
+      return `${event.experimentId} \u2192 ${event.variantId} (${event.source})`;
+    case "rollback":
+      return `${event.experimentId} rolled back: ${event.reason}`;
+    case "configLoaded":
+      return `config reloaded \xB7 ${event.config.experiments.length} experiments`;
+    case "contextUpdated":
+      return "context updated";
+    case "error":
+      return `error: ${event.error.message}`;
+  }
+}
+var styles7 = StyleSheet.create({
+  scroll: { flexGrow: 0 },
+  content: { paddingVertical: 8, gap: 6 },
+  row: {
+    borderRadius: 8,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 6
+  },
+  type: {
+    fontSize: 10,
+    fontWeight: "700",
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  },
+  detail: {
+    fontSize: 12,
+    marginTop: 2
+  },
+  empty: { paddingVertical: 32, alignItems: "center" },
+  emptyText: { fontSize: 12 }
+});
+function OverviewTab({
+  theme,
+  engine,
+  experiments,
+  variantsById
+}) {
+  const [expanded, setExpanded] = useState(() => /* @__PURE__ */ new Set());
+  const toggle = useCallback((id) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+  if (experiments.length === 0) {
+    return /* @__PURE__ */ jsxs(View, { style: styles8.empty, testID: "variantlab-overview-empty", children: [
+      /* @__PURE__ */ jsx(Text, { style: [styles8.emptyTitle, { color: theme.text }], children: "No experiments match this view." }),
+      /* @__PURE__ */ jsx(Text, { style: [styles8.emptyHint, { color: theme.textMuted }], children: 'Clear the search or switch to "All experiments".' })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      style: styles8.scroll,
+      contentContainerStyle: styles8.content,
+      keyboardShouldPersistTaps: "handled",
+      testID: "variantlab-overview-list",
+      children: experiments.map((exp) => /* @__PURE__ */ jsx(
+        ExperimentCard,
+        {
+          theme,
+          experiment: exp,
+          activeVariantId: variantsById[exp.id] ?? exp.default,
+          expanded: expanded.has(exp.id),
+          onToggleExpand: () => toggle(exp.id),
+          onSelect: (variantId) => engine.setVariant(exp.id, variantId, "user"),
+          onReset: () => engine.clearVariant(exp.id)
+        },
+        exp.id
+      ))
+    }
+  );
+}
+var styles8 = StyleSheet.create({
+  scroll: {
+    flexGrow: 0
+  },
+  content: {
+    paddingVertical: 8
+  },
+  empty: {
+    paddingVertical: 32,
+    alignItems: "center",
+    gap: 4
+  },
+  emptyTitle: {
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  emptyHint: {
+    fontSize: 12
+  }
+});
+
+// src/overlay/theme.ts
+var DEFAULT_THEME = {
+  background: "#0b0b10",
+  surface: "#161620",
+  border: "#272735",
+  text: "#f4f4f5",
+  textMuted: "#9ca3af",
+  accent: "#8b5cf6",
+  accentText: "#ffffff",
+  danger: "#f43f5e"
+};
+function mergeTheme(base, patch) {
+  if (patch === void 0) return base;
+  return { ...base, ...patch };
+}
+function useEngineSnapshot(engine, select, isEqual = Object.is) {
+  const cache = useRef(null);
+  const subscribe = useCallback(
+    (notify) => {
+      const unsub = engine.subscribe((_event) => notify());
+      return unsub;
+    },
+    [engine]
+  );
+  const getSnapshot = useCallback(() => {
+    const next = select(engine);
+    const prev = cache.current;
+    if (prev !== null && isEqual(prev.value, next)) {
+      return prev.value;
+    }
+    cache.current = { value: next };
+    return next;
+  }, [engine, select, isEqual]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+function VariantDebugOverlay(props) {
+  if (!shouldRender(props.forceEnable)) {
+    if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") {
+      console.warn(
+        "[variantlab] VariantDebugOverlay rendered in production. Pass forceEnable={true} if this is intentional."
+      );
+    }
+    return null;
+  }
+  return /* @__PURE__ */ jsx(OverlayImpl, { ...props });
+}
+function shouldRender(forceEnable) {
+  if (forceEnable === true) return true;
+  if (typeof __DEV__ !== "undefined" && __DEV__ === true) return true;
+  if (typeof process !== "undefined" && process.env?.NODE_ENV === "development") return true;
+  return false;
+}
+function OverlayImpl(props) {
+  const engine = useVariantLabEngine();
+  const theme = useMemo(() => mergeTheme(DEFAULT_THEME, props.theme), [props.theme]);
+  const corner = props.position ?? "bottom-right";
+  const offset = props.offset ?? { x: 16, y: 80 };
+  const [visible, setVisible] = useState(false);
+  const [tab, setTab] = useState("overview");
+  const [query, setQuery] = useState("");
+  const [routeFilterActive, setRouteFilterActive] = useState(props.routeFilter !== false);
+  useEffect(() => registerOverlay(setVisible), []);
+  const snapshot = useEngineSnapshot(
+    engine,
+    useCallback((e) => {
+      const ctx = e.getContext();
+      const route = typeof ctx.route === "string" ? ctx.route : void 0;
+      const all = e.getExperiments();
+      const scoped = e.getExperiments(route);
+      const variantsById = {};
+      for (const exp of all) {
+        variantsById[exp.id] = e.getVariant(exp.id);
+      }
+      return {
+        all,
+        scoped,
+        variantsById,
+        context: ctx,
+        config: e.getConfig(),
+        history: e.getHistory()
+      };
+    }, []),
+    snapshotEqual
+  );
+  const visibleExperiments = useMemo(() => {
+    const source = routeFilterActive ? snapshot.scoped : snapshot.all;
+    return filterExperiments(source, query);
+  }, [routeFilterActive, snapshot.scoped, snapshot.all, query]);
+  const handleResetAll = useCallback(() => engine.resetAll(), [engine]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    props.hideButton === true ? null : /* @__PURE__ */ jsx(
+      FloatingButton,
+      {
+        theme,
+        corner,
+        offset,
+        count: snapshot.scoped.length,
+        onPress: () => setVisible(true)
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      BottomSheet,
+      {
+        visible,
+        onRequestClose: () => setVisible(false),
+        theme,
+        insetBottom: props.safeAreaBottom ?? 0,
+        children: [
+          /* @__PURE__ */ jsx(Header, { theme, onClose: () => setVisible(false), onResetAll: handleResetAll }),
+          /* @__PURE__ */ jsx(SearchInput, { theme, value: query, onChange: setQuery }),
+          /* @__PURE__ */ jsx(
+            RouteToggle,
+            {
+              theme,
+              active: routeFilterActive,
+              onToggle: () => setRouteFilterActive((v) => !v)
+            }
+          ),
+          /* @__PURE__ */ jsx(TabBar, { theme, value: tab, onChange: setTab }),
+          /* @__PURE__ */ jsxs(View, { style: styles9.body, children: [
+            tab === "overview" ? /* @__PURE__ */ jsx(
+              OverviewTab,
+              {
+                theme,
+                engine,
+                experiments: visibleExperiments,
+                variantsById: snapshot.variantsById
+              }
+            ) : null,
+            tab === "context" ? /* @__PURE__ */ jsx(ContextTab, { theme, context: snapshot.context }) : null,
+            tab === "config" ? /* @__PURE__ */ jsx(ConfigTab, { theme, config: snapshot.config }) : null,
+            tab === "history" ? /* @__PURE__ */ jsx(HistoryTab, { theme, events: snapshot.history }) : null
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function snapshotEqual(a, b) {
+  if (a.config !== b.config) return false;
+  if (!sameRefArray(a.all, b.all)) return false;
+  if (!sameRefArray(a.scoped, b.scoped)) return false;
+  if (!sameRefArray(a.history, b.history)) return false;
+  if (!sameRefRecord(a.variantsById, b.variantsById)) return false;
+  if (!sameRefRecord(a.context, b.context)) {
+    return false;
+  }
+  return true;
+}
+function sameRefArray(a, b) {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
+function sameRefRecord(a, b) {
+  if (a === b) return true;
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  for (const k of aKeys) {
+    if (a[k] !== b[k]) return false;
+  }
+  return true;
+}
+function Header({
+  theme,
+  onClose,
+  onResetAll
+}) {
+  return /* @__PURE__ */ jsxs(View, { style: styles9.header, children: [
+    /* @__PURE__ */ jsx(Text, { style: [styles9.title, { color: theme.text }], children: "variantlab" }),
+    /* @__PURE__ */ jsxs(View, { style: styles9.headerActions, children: [
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          onPress: onResetAll,
+          accessibilityRole: "button",
+          accessibilityLabel: "Reset all overrides",
+          style: [styles9.headerButton, { borderColor: theme.border }],
+          testID: "variantlab-reset-all",
+          children: /* @__PURE__ */ jsx(Text, { style: [styles9.headerButtonText, { color: theme.textMuted }], children: "Reset" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          onPress: onClose,
+          accessibilityRole: "button",
+          accessibilityLabel: "Close debug overlay",
+          style: [styles9.headerButton, { borderColor: theme.border }],
+          testID: "variantlab-close",
+          children: /* @__PURE__ */ jsx(Text, { style: [styles9.headerButtonText, { color: theme.textMuted }], children: "Close" })
+        }
+      )
+    ] })
+  ] });
+}
+function RouteToggle({
+  theme,
+  active,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      onPress: onToggle,
+      accessibilityRole: "button",
+      accessibilityLabel: active ? "Show all experiments" : "Show only current route",
+      style: styles9.routeToggle,
+      testID: "variantlab-route-toggle",
+      children: /* @__PURE__ */ jsx(Text, { style: [styles9.routeToggleText, { color: theme.textMuted }], children: active ? "Showing: current route" : "Showing: all experiments" })
+    }
+  );
+}
+function TabBar({
+  theme,
+  value,
+  onChange
+}) {
+  const tabs = ["overview", "context", "config", "history"];
+  return /* @__PURE__ */ jsx(View, { style: [styles9.tabBar, { borderColor: theme.border }], children: tabs.map((t) => {
+    const isActive = t === value;
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress: () => onChange(t),
+        accessibilityRole: "button",
+        accessibilityState: { selected: isActive },
+        accessibilityLabel: `${t} tab`,
+        style: [
+          styles9.tab,
+          isActive ? { borderBottomColor: theme.accent } : { borderBottomColor: "transparent" }
+        ],
+        testID: `variantlab-tab-${t}`,
+        children: /* @__PURE__ */ jsx(Text, { style: [styles9.tabText, { color: isActive ? theme.text : theme.textMuted }], children: t })
+      },
+      t
+    );
+  }) });
+}
+var styles9 = StyleSheet.create({
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingBottom: 12
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "700"
+  },
+  headerActions: {
+    flexDirection: "row",
+    gap: 8
+  },
+  headerButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 6,
+    borderWidth: 1
+  },
+  headerButtonText: {
+    fontSize: 11,
+    fontWeight: "600"
+  },
+  routeToggle: {
+    paddingVertical: 8
+  },
+  routeToggleText: {
+    fontSize: 11
+  },
+  tabBar: {
+    flexDirection: "row",
+    borderTopWidth: 1,
+    marginTop: 4
+  },
+  tab: {
+    flex: 1,
+    alignItems: "center",
+    paddingVertical: 10,
+    borderBottomWidth: 2
+  },
+  tabText: {
+    fontSize: 12,
+    fontWeight: "600",
+    textTransform: "capitalize"
+  },
+  body: {
+    flexShrink: 1
+  }
+});
+
+export { DEFAULT_THEME, VariantDebugOverlay, closeDebugOverlay, describeAssignmentSource, filterExperiments, isVisibleExperiment, matchesSearch, mergeTheme, openDebugOverlay, registerOverlay, shouldRender, stringifyContext, summarize as summarizeEvent };
+//# sourceMappingURL=debug.js.map
+//# sourceMappingURL=debug.js.map