@marktiderman/genesis-support 0.0.0-stage → 0.2.0

package/dist/native.js

@@ -0,0 +1,722 @@
+import { supportPaths, createSupportClient, defineSupportBlock, SupportError } from './chunk-4VFYVQUF.js';
+import { resolveSupportCopy, createContextCollector, composeCollectors, fill, FEEDBACK_TYPES } from './chunk-ZV4KJBUF.js';
+import { createContext, useContext, useSyncExternalStore, useRef, useState, useEffect, useMemo } from 'react';
+import { Platform, Dimensions, PanResponder, View, Image, Modal, Alert } from 'react-native';
+import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
+import { NativeText, NativeSegmentedControl, NativeButton, NativeLabel, NativeTextarea, NativeSwitch, NativeInput } from '@marktiderman/genesis-ui-native/components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useThemeRoles } from '@marktiderman/genesis-ui-native/hooks';
+
+// src/native/modules.ts
+function listenForShake(accelerometer, onShake, options = {}) {
+  const { threshold = 2.3, jolts = 2, windowMs = 1e3, cooldownMs = 3e3, intervalMs = 100, now = Date.now } = options;
+  const recent = [];
+  let quietUntil = 0;
+  accelerometer.setUpdateInterval?.(intervalMs);
+  const subscription = accelerometer.addListener(({ x, y, z }) => {
+    const t = now();
+    if (t < quietUntil) return;
+    if (Math.sqrt(x * x + y * y + z * z) < threshold) return;
+    recent.push(t);
+    while (recent.length && t - recent[0] > windowMs) recent.shift();
+    if (recent.length >= jolts) {
+      recent.length = 0;
+      quietUntil = t + cooldownMs;
+      onShake();
+    }
+  });
+  return () => subscription.remove();
+}
+var SupportContext = createContext(null);
+var LEGACY_CLOSE_MS = 400;
+function useSupport() {
+  const block = useContext(SupportContext);
+  if (!block) throw new Error("useSupport: no support block. Pass `blocks={[createSupport(\u2026)]}` to GenesisNativeApp, or wrap in <SupportProvider>.");
+  return block;
+}
+function useOptionalSupport() {
+  return useContext(SupportContext);
+}
+function SupportProvider({ block, children }) {
+  return /* @__PURE__ */ jsx(SupportContext.Provider, { value: block, children });
+}
+var SUPPORT_QUERY_ROOT = "genesis-support";
+function useUnreadReplies() {
+  const block = useSupport();
+  const { data } = useQuery({ queryKey: [SUPPORT_QUERY_ROOT, "reports"], queryFn: () => block.client.myReports(), staleTime: 6e4 });
+  return (data ?? []).filter((r) => r.unread).length;
+}
+function createSupport(options) {
+  const copy = resolveSupportCopy(options.copy);
+  const paths = supportPaths(options.basePath);
+  const client = createSupportClient(options.supabase);
+  const platform = options.platform ?? Platform.OS;
+  let route = null;
+  let pending = null;
+  const listeners = /* @__PURE__ */ new Set();
+  const setPending = (next) => {
+    pending = next;
+    for (const l of listeners) l();
+  };
+  const defaults = createContextCollector({
+    platform,
+    appVersion: typeof options.appVersion === "function" ? options.appVersion : () => options.appVersion,
+    route: () => route ?? void 0,
+    device: () => {
+      const screen = Dimensions.get("screen");
+      return { os: platform, osVersion: String(Platform.Version), screen: { width: Math.round(screen.width), height: Math.round(screen.height), scale: screen.scale } };
+    }
+  });
+  const collector = options.collector ? composeCollectors(defaults, options.collector) : defaults;
+  const declaration = defineSupportBlock({
+    basePath: options.basePath,
+    copy: options.copy,
+    settings: options.settings,
+    ideas: options.ideas,
+    useHelpSubtitle: () => {
+      const unread = useUnreadReplies();
+      return unread ? fill(copy.settings.unreadReplies, { count: unread }) : null;
+    }
+  });
+  const report = (error, where) => {
+    try {
+      options.onError?.(error instanceof Error ? error : new Error(String(error)), where);
+    } catch {
+    }
+  };
+  let opening = false;
+  function DevtoolsFeedback({ debugInfo, close }) {
+    return /* @__PURE__ */ jsx(
+      NativeButton,
+      {
+        variant: "outline",
+        testID: "genesis-support-devtools-feedback",
+        onPress: async () => {
+          const closed = close();
+          await (closed instanceof Promise ? closed : new Promise((resolve) => setTimeout(resolve, LEGACY_CLOSE_MS)));
+          void block.openFeedback({ extra: { debugInfo: debugInfo.slice(0, 8e3) } });
+        },
+        children: copy.settings.sendFeedback
+      }
+    );
+  }
+  const block = {
+    ...declaration,
+    contributes: { ...declaration.contributes, slots: { devtoolsFeedback: DevtoolsFeedback } },
+    platforms: ["native"],
+    options,
+    client,
+    copy,
+    paths,
+    collector,
+    async openFeedback({ screenshot = true, extra, delayMs = 0 } = {}) {
+      if (opening) return;
+      opening = true;
+      try {
+        if (delayMs > 0) await new Promise((resolve) => setTimeout(resolve, delayMs));
+        let shot = null;
+        if (screenshot && options.viewShot) {
+          try {
+            const uri = await options.viewShot.captureScreen({ format: "jpg", quality: 0.8, result: "data-uri" });
+            const window = Dimensions.get("window");
+            const scale = Dimensions.get("screen").scale || 1;
+            shot = { uri, contentType: "image/jpeg", width: Math.round(window.width * scale), height: Math.round(window.height * scale) };
+          } catch (error) {
+            report(error, "capture");
+          }
+        }
+        setPending({ route, screenshot: shot, extra });
+        options.navigate(paths.feedback);
+      } finally {
+        opening = false;
+      }
+    },
+    takePending() {
+      const p = pending;
+      if (p) setPending(null);
+      return p;
+    },
+    peekPending: () => pending,
+    subscribePending(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    currentRoute: () => route,
+    Root: function SupportRoot({ children }) {
+      const current = (options.useCurrentRoute ?? noRoute)();
+      useEffect(() => {
+        if (current) route = current;
+      }, [current]);
+      useEffect(() => {
+        if (!options.accelerometer || options.shake === false) return;
+        try {
+          return listenForShake(
+            options.accelerometer,
+            () => {
+              if (route && route.startsWith(paths.inbox)) return;
+              void block.openFeedback();
+            },
+            options.shake || {}
+          );
+        } catch (error) {
+          report(error, "shake");
+          return void 0;
+        }
+      }, []);
+      return /* @__PURE__ */ jsx(SupportProvider, { block, children });
+    }
+  };
+  return block;
+}
+function noRoute() {
+  return "";
+}
+function usePendingFeedback() {
+  const block = useSupport();
+  return useSyncExternalStore(block.subscribePending, block.peekPending, block.peekPending);
+}
+var DOT = 6;
+var MAX_DOTS = 3e3;
+function strokeDots(points, spacing = DOT / 2) {
+  const dots = [];
+  for (let i = 0; i < points.length; i++) {
+    const p = points[i];
+    const prev = points[i - 1];
+    if (prev) {
+      const dist = Math.hypot(p.x - prev.x, p.y - prev.y);
+      for (let d = spacing; d < dist; d += spacing) dots.push({ x: prev.x + (p.x - prev.x) * d / dist, y: prev.y + (p.y - prev.y) * d / dist });
+    }
+    dots.push(p);
+  }
+  return dots;
+}
+function clamp(p, size) {
+  const fix = (v, max) => Number.isFinite(v) ? Math.min(Math.max(v, 0), max || v) : 0;
+  return { x: fix(p.x, size.width), y: fix(p.y, size.height) };
+}
+function boxOf(from, to) {
+  return { left: Math.min(from.x, to.x), top: Math.min(from.y, to.y), width: Math.abs(to.x - from.x), height: Math.abs(to.y - from.y) };
+}
+function ScreenshotAnnotator({ screenshot, viewShot, copy, onDone, onCancel, testID = "genesis-support-annotator" }) {
+  const colors = useThemeRoles();
+  const surface = useRef(null);
+  const setSurface = useRef((node) => {
+    surface.current = node;
+  }).current;
+  const [tool, setTool] = useState("pen");
+  const [marks, setMarks] = useState([]);
+  const [draft, setDraft] = useState(null);
+  const [width, setWidth] = useState(0);
+  const [saving, setSaving] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const toolRef = useRef(tool);
+  toolRef.current = tool;
+  const draftRef = useRef(null);
+  const ratio = screenshot.width / Math.max(1, screenshot.height);
+  const maxHeight = Math.round(Dimensions.get("window").height * 0.55);
+  const fitWidth = width ? Math.min(width, Math.round(maxHeight * ratio)) : 0;
+  const height = fitWidth ? Math.round(fitWidth / ratio) : 0;
+  const size = useRef({ width: 0, height: 0 });
+  size.current = { width: fitWidth, height };
+  const start = useRef({ x: 0, y: 0 });
+  const responder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      // Drawing inside a scroll view: keep the touch, don't hand it to the scroll.
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderGrant: (event) => {
+        const p = clamp({ x: event.nativeEvent.locationX, y: event.nativeEvent.locationY }, size.current);
+        start.current = p;
+        draftRef.current = toolRef.current === "pen" ? { kind: "pen", points: [p] } : { kind: "hide", from: p, to: p };
+        setDraft(draftRef.current);
+      },
+      onPanResponderMove: (_event, gesture) => {
+        const p = clamp({ x: start.current.x + gesture.dx, y: start.current.y + gesture.dy }, size.current);
+        const d = draftRef.current;
+        if (!d) return;
+        draftRef.current = d.kind === "pen" ? { kind: "pen", points: [...d.points, p] } : { ...d, to: p };
+        setDraft(draftRef.current);
+      },
+      onPanResponderRelease: () => {
+        const d = draftRef.current;
+        draftRef.current = null;
+        setDraft(null);
+        if (d) setMarks((all2) => [...all2, d]);
+      },
+      // A scroll view above can still take the touch (iOS's own pan): keep what was drawn so far.
+      onPanResponderTerminate: () => {
+        const d = draftRef.current;
+        draftRef.current = null;
+        setDraft(null);
+        if (d) setMarks((all2) => [...all2, d]);
+      }
+    })
+  ).current;
+  const done = async () => {
+    if (!marks.length) {
+      onDone(screenshot, false);
+      return;
+    }
+    setSaving(true);
+    setFailed(false);
+    try {
+      const uri = await viewShot.captureRef(surface.current, { format: "jpg", quality: 0.85, result: "data-uri" });
+      setSaving(false);
+      onDone({ ...screenshot, uri, contentType: "image/jpeg" }, true);
+    } catch {
+      setSaving(false);
+      setFailed(true);
+    }
+  };
+  let dots = 0;
+  const all = draft ? [...marks, draft] : marks;
+  return /* @__PURE__ */ jsxs(View, { testID, style: { gap: 12 }, children: [
+    /* @__PURE__ */ jsx(NativeText, { style: { color: colors.secondaryLabel, fontSize: 13, lineHeight: 18 }, children: copy.hint }),
+    /* @__PURE__ */ jsx(
+      NativeSegmentedControl,
+      {
+        testID: `${testID}-tool`,
+        options: [
+          { value: "pen", label: copy.pen },
+          { value: "hide", label: copy.hide }
+        ],
+        value: tool,
+        onChange: (v) => setTool(v)
+      }
+    ),
+    /* @__PURE__ */ jsx(View, { onLayout: (e) => setWidth(e.nativeEvent.layout.width), style: { width: "100%" }, children: /* @__PURE__ */ jsxs(View, { ref: setSurface, collapsable: false, testID: `${testID}-surface`, style: { alignSelf: "center", width: fitWidth || "100%", height: height || 320, overflow: "hidden", borderRadius: 12 }, ...responder.panHandlers, children: [
+      /* @__PURE__ */ jsx(Image, { source: { uri: screenshot.uri }, style: { width: "100%", height: "100%" }, resizeMode: "stretch", accessibilityIgnoresInvertColors: true }),
+      all.map((mark, i) => {
+        if (mark.kind === "hide") {
+          const box = boxOf(mark.from, mark.to);
+          return /* @__PURE__ */ jsx(View, { testID: `${testID}-hide-${i}`, pointerEvents: "none", style: { position: "absolute", ...box, backgroundColor: colors.label } }, i);
+        }
+        return strokeDots(mark.points).map((p, j) => {
+          if (dots++ > MAX_DOTS) return null;
+          return /* @__PURE__ */ jsx(
+            View,
+            {
+              pointerEvents: "none",
+              style: { position: "absolute", left: p.x - DOT / 2, top: p.y - DOT / 2, width: DOT, height: DOT, borderRadius: DOT / 2, backgroundColor: colors.destructive }
+            },
+            `${i}-${j}`
+          );
+        });
+      })
+    ] }) }),
+    failed ? /* @__PURE__ */ jsx(NativeText, { testID: `${testID}-failed`, accessibilityLiveRegion: "polite", style: { color: colors.destructive, fontSize: 13, lineHeight: 18 }, children: copy.failed }) : null,
+    /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 8 }, children: [
+      /* @__PURE__ */ jsx(NativeButton, { variant: "ghost", onPress: () => onCancel(marks.length > 0 || draft !== null), testID: `${testID}-cancel`, children: copy.cancel }),
+      /* @__PURE__ */ jsx(NativeButton, { variant: "outline", onPress: () => setMarks((m) => m.slice(0, -1)), disabled: !marks.length, testID: `${testID}-undo`, children: copy.undo }),
+      /* @__PURE__ */ jsx(View, { style: { flex: 1 } }),
+      /* @__PURE__ */ jsx(NativeButton, { onPress: () => void done(), loading: saving, testID: `${testID}-done`, children: copy.done })
+    ] })
+  ] });
+}
+function FeedbackForm({ defaultType = "bug", onSent, sentAlert = true, testID = "genesis-support-feedback" }) {
+  const block = useSupport();
+  const { copy } = block;
+  const colors = useThemeRoles();
+  const queryClient = useQueryClient();
+  const [origin] = useState(() => block.peekPending());
+  useEffect(() => {
+    block.takePending();
+  }, [block]);
+  const [type, setType] = useState(defaultType);
+  const [message, setMessage] = useState("");
+  const [screenshot, setScreenshot] = useState(origin?.screenshot ?? null);
+  const [include, setInclude] = useState(false);
+  const [annotating, setAnnotating] = useState(false);
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => setError(null), [message]);
+  const send = async () => {
+    if (!message.trim()) {
+      setError(copy.feedback.messageRequired);
+      return;
+    }
+    setSending(true);
+    try {
+      const context = await block.collector.collect();
+      const route = origin?.route && !origin.route.startsWith(block.paths.inbox) ? origin.route : void 0;
+      if (route) context.route = route;
+      else delete context.route;
+      if (origin?.extra) context.extra = { ...context.extra, ...origin.extra };
+      const delivery = await block.client.submit({
+        type,
+        message: message.trim(),
+        context,
+        attachments: screenshot && include ? [{ kind: "screenshot", contentType: screenshot.contentType, base64: screenshot.uri, width: screenshot.width, height: screenshot.height }] : []
+      });
+      void queryClient.invalidateQueries({ queryKey: [SUPPORT_QUERY_ROOT, "reports"] });
+      setMessage("");
+      setScreenshot(null);
+      if (sentAlert) Alert.alert(copy.feedback.sentTitle, delivery.attachmentsDropped ? copy.feedback.sentWithoutScreenshot : copy.feedback.sentBody);
+      onSent?.(delivery);
+    } catch (e) {
+      const err = e instanceof SupportError ? e : null;
+      setError(err?.rateLimited ? copy.feedback.rateLimited : err?.code === "42501" ? copy.feedback.signInFirst : copy.feedback.failedBody);
+    } finally {
+      setSending(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(View, { testID, style: { gap: 16 }, children: [
+    /* @__PURE__ */ jsxs(View, { style: { gap: 8 }, children: [
+      /* @__PURE__ */ jsx(NativeLabel, { children: copy.feedback.typeLabel }),
+      /* @__PURE__ */ jsx(
+        NativeSegmentedControl,
+        {
+          testID: `${testID}-type`,
+          options: FEEDBACK_TYPES.map((t) => ({ value: t, label: copy.feedback.types[t] })),
+          value: type,
+          onChange: (v) => setType(v)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      NativeTextarea,
+      {
+        testID: `${testID}-message`,
+        label: copy.feedback.messageLabel,
+        placeholder: copy.feedback.messagePlaceholder,
+        value: message,
+        onChangeText: setMessage,
+        maxLength: 2e4,
+        rows: 6,
+        error: error ?? void 0
+      }
+    ),
+    screenshot ? /* @__PURE__ */ jsxs(View, { testID: `${testID}-screenshot`, style: { gap: 8 }, children: [
+      /* @__PURE__ */ jsx(NativeLabel, { children: copy.feedback.screenshotLabel }),
+      /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 12, alignItems: "flex-start" }, children: [
+        /* @__PURE__ */ jsx(
+          Image,
+          {
+            source: { uri: screenshot.uri },
+            accessibilityLabel: copy.feedback.screenshotLabel,
+            style: { width: 96, height: Math.round(96 * screenshot.height / Math.max(1, screenshot.width)), borderRadius: 8, backgroundColor: colors.fill }
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: { flex: 1, gap: 8 }, children: [
+          /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8 }, children: [
+            /* @__PURE__ */ jsx(NativeText, { style: { flex: 1, color: colors.label, fontSize: 15, lineHeight: 20 }, children: copy.feedback.includeScreenshot }),
+            /* @__PURE__ */ jsx(
+              NativeSwitch,
+              {
+                testID: `${testID}-include-screenshot`,
+                accessibilityLabel: copy.feedback.includeScreenshot,
+                checked: include,
+                onCheckedChange: setInclude
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(NativeText, { style: { color: colors.secondaryLabel, fontSize: 13, lineHeight: 18 }, children: copy.feedback.screenshotHint }),
+          block.options.viewShot ? /* @__PURE__ */ jsx(NativeButton, { variant: "outline", size: "sm", onPress: () => setAnnotating(true), testID: `${testID}-annotate`, children: copy.feedback.annotate }) : null,
+          /* @__PURE__ */ jsx(
+            NativeButton,
+            {
+              variant: "ghost",
+              size: "sm",
+              onPress: () => {
+                setScreenshot(null);
+                setInclude(false);
+              },
+              testID: `${testID}-remove-screenshot`,
+              children: copy.feedback.removeScreenshot
+            }
+          )
+        ] })
+      ] })
+    ] }) : null,
+    annotating && screenshot && block.options.viewShot ? /* @__PURE__ */ jsx(Modal, { visible: true, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: () => {
+      setInclude(false);
+      setAnnotating(false);
+    }, children: /* @__PURE__ */ jsx(SafeAreaView, { style: { flex: 1, backgroundColor: colors.background }, children: /* @__PURE__ */ jsx(View, { style: { flex: 1, padding: 16, justifyContent: "center" }, children: /* @__PURE__ */ jsx(
+      ScreenshotAnnotator,
+      {
+        screenshot,
+        viewShot: block.options.viewShot,
+        copy: copy.annotate,
+        onCancel: (hadMarks) => {
+          if (hadMarks) setInclude(false);
+          setAnnotating(false);
+        },
+        onDone: (next, marked) => {
+          setScreenshot(next);
+          if (marked) setInclude(true);
+          setAnnotating(false);
+        },
+        testID: `${testID}-annotator`
+      }
+    ) }) }) }) : null,
+    /* @__PURE__ */ jsx(NativeButton, { onPress: () => void send(), loading: sending, disabled: sending, testID: `${testID}-send`, children: sending ? copy.feedback.sending : copy.feedback.send })
+  ] });
+}
+var key = (...parts) => [SUPPORT_QUERY_ROOT, ...parts];
+function useSupportInbox() {
+  const block = useSupport();
+  const { copy, paths, client } = block;
+  const queryClient = useQueryClient();
+  const query = useQuery({ queryKey: key("reports"), queryFn: () => client.myReports() });
+  const navigate = block.options.navigate;
+  const confirmDelete = (report) => Alert.alert(copy.inbox.deleteConfirmTitle, copy.inbox.deleteConfirmBody, [
+    { text: copy.inbox.cancel, style: "cancel" },
+    {
+      text: copy.inbox.delete,
+      style: "destructive",
+      onPress: () => {
+        void client.deleteReport(report.id).then(() => queryClient.invalidateQueries({ queryKey: key("reports") })).catch(() => Alert.alert(copy.feedback.failedTitle, copy.feedback.failedBody));
+      }
+    }
+  ]);
+  const items = (query.data ?? []).map((report) => ({
+    id: report.id,
+    title: report.title || firstLine(report.message),
+    preview: report.title ? firstLine(report.message) : void 0,
+    timestamp: report.lastStaffReplyAt ?? report.createdAt,
+    unread: report.unread,
+    meta: `${copy.feedback.types[report.type]} \xB7 ${copy.status[report.status]}`,
+    onPress: () => navigate(paths.thread(report.id)),
+    swipeActions: [{ id: "delete", label: copy.inbox.delete, destructive: true, onPress: () => confirmDelete(report) }],
+    testID: `genesis-support-report-${report.id}`
+  }));
+  const header = /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: 8, paddingHorizontal: 16, paddingBottom: 8 }, children: [
+    /* @__PURE__ */ jsx(NativeButton, { size: "sm", onPress: () => void block.openFeedback({ screenshot: false }), testID: "genesis-support-inbox-new", children: copy.inbox.sendFeedback }),
+    block.options.ideas === false ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(NativeButton, { size: "sm", variant: "outline", onPress: () => navigate(paths.ideas), testID: "genesis-support-inbox-ideas", children: copy.inbox.ideaBoard }),
+      /* @__PURE__ */ jsx(NativeButton, { size: "sm", variant: "outline", onPress: () => navigate(paths.shipped), testID: "genesis-support-inbox-shipped", children: copy.inbox.shipped })
+    ] })
+  ] });
+  return {
+    testID: "genesis-support-inbox",
+    headerTitle: copy.inbox.title,
+    items,
+    loading: query.isPending,
+    error: query.isError,
+    refreshing: query.isRefetching,
+    onRefresh: async () => {
+      await query.refetch();
+    },
+    sectionTitle: items.length ? copy.inbox.sectionTitle : void 0,
+    header,
+    emptyTitle: copy.inbox.emptyTitle,
+    emptyBody: copy.inbox.emptyBody,
+    errorTitle: copy.inbox.errorTitle,
+    errorBody: copy.inbox.errorBody
+  };
+}
+function firstLine(text) {
+  const line = text.split("\n").find((l) => l.trim()) ?? "";
+  return line.length > 120 ? `${line.slice(0, 119)}\u2026` : line;
+}
+var CLOSED = /* @__PURE__ */ new Set(["addressed", "wont_fix"]);
+function useSupportThread(reportId, options = {}) {
+  const block = useSupport();
+  const { copy, client } = block;
+  const queryClient = useQueryClient();
+  const poll = options.pollMs ?? 3e4;
+  const report = useQuery({ queryKey: key("report", reportId), queryFn: () => client.report(reportId), refetchInterval: poll });
+  const replies = useQuery({ queryKey: key("replies", reportId), queryFn: () => client.replies(reportId), refetchInterval: poll });
+  const attachments = useQuery({ queryKey: key("attachments", reportId), queryFn: () => client.attachments(reportId), staleTime: 50 * 6e4 });
+  const [draft, setDraft] = useState("");
+  const [failed, setFailed] = useState([]);
+  const lastStaff = report.data?.lastStaffReplyAt ?? null;
+  useEffect(() => {
+    if (!report.data) return;
+    void client.markRead(reportId).then(() => queryClient.invalidateQueries({ queryKey: key("reports") })).catch(() => void 0);
+  }, [client, reportId, lastStaff, Boolean(report.data), queryClient]);
+  const send = useMutation({
+    mutationFn: (body) => client.reply(reportId, body),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: key("replies", reportId) });
+      void queryClient.invalidateQueries({ queryKey: key("report", reportId) });
+    },
+    onError: (_error, body) => setFailed((f) => [...f, { id: `failed-${Date.now()}`, body, at: (/* @__PURE__ */ new Date()).toISOString() }])
+  });
+  const r = report.data ?? null;
+  const messages = useMemo(() => {
+    if (!r) return [];
+    const first = {
+      id: r.id,
+      body: r.message,
+      mine: true,
+      timestamp: r.createdAt,
+      attachments: (attachments.data ?? []).filter((a) => a.url).map((a) => ({ id: a.id, uri: a.url, width: a.width ?? void 0, height: a.height ?? void 0, accessibilityLabel: copy.thread.screenshot }))
+    };
+    const rest = (replies.data ?? []).map((reply) => ({
+      id: reply.id,
+      body: reply.body,
+      mine: reply.mine,
+      authorName: reply.fromStaff ? copy.thread.support : void 0,
+      timestamp: reply.createdAt
+    }));
+    const pending = send.isPending && send.variables ? [{ id: "sending", body: send.variables, mine: true, timestamp: (/* @__PURE__ */ new Date()).toISOString(), status: "sending" }] : [];
+    const failedMessages = failed.map((f) => ({
+      id: f.id,
+      body: f.body,
+      mine: true,
+      timestamp: f.at,
+      status: "failed",
+      onRetry: () => {
+        setFailed((all) => all.filter((x) => x.id !== f.id));
+        send.mutate(f.body);
+      }
+    }));
+    return [first, ...rest, ...pending, ...failedMessages];
+  }, [r, replies.data, attachments.data, send.isPending, send.variables, failed, copy, send]);
+  const closed = r ? CLOSED.has(r.status) : false;
+  return {
+    testID: "genesis-support-thread",
+    headerTitle: r ? r.title || copy.feedback.types[r.type] : copy.thread.title,
+    report: r,
+    loading: report.isPending,
+    notFound: report.isSuccess && r === null,
+    labels: { you: copy.thread.you, sending: copy.thread.sending, notSent: copy.thread.notSent, retryHint: copy.thread.retryHint },
+    messages,
+    readAt: r?.staffReadAt ?? null,
+    readLabel: copy.thread.read,
+    emptyTitle: copy.thread.emptyTitle,
+    emptyBody: copy.thread.emptyBody,
+    closedNotice: copy.thread.closed,
+    composer: closed ? null : {
+      value: draft,
+      onChangeText: setDraft,
+      placeholder: copy.thread.placeholder,
+      sendLabel: copy.thread.send,
+      sending: send.isPending,
+      maxLength: 1e4,
+      onSend: () => {
+        const body = draft.trim();
+        if (!body || send.isPending) return;
+        setDraft("");
+        send.mutate(body);
+      }
+    }
+  };
+}
+function VoteButton({ idea, onToggle, testID }) {
+  const { copy } = useSupport();
+  const count = idea.voteCount === 1 ? copy.ideas.oneVote : fill(copy.ideas.votes, { count: idea.voteCount });
+  const open = idea.status === "open" || idea.status === "planned" || idea.status === "in_progress";
+  return /* @__PURE__ */ jsx(View, { accessibilityLabel: `${idea.voted ? copy.ideas.voted : copy.ideas.vote}, ${count}`, children: /* @__PURE__ */ jsx(NativeButton, { size: "sm", variant: idea.voted ? "default" : "outline", onPress: onToggle, disabled: !open && !idea.voted, testID, children: `\u25B2 ${idea.voteCount}` }) });
+}
+function useIdeaBoard() {
+  const block = useSupport();
+  const { copy, client } = block;
+  const queryClient = useQueryClient();
+  const query = useQuery({ queryKey: key("ideas"), queryFn: () => client.ideas() });
+  const [title, setTitle] = useState("");
+  const toggle = useMutation({
+    mutationFn: (idea) => idea.voted ? client.unvote(idea.id) : client.vote(idea.id),
+    onMutate: async (idea) => {
+      await queryClient.cancelQueries({ queryKey: key("ideas") });
+      const before = queryClient.getQueryData(key("ideas"));
+      queryClient.setQueryData(
+        key("ideas"),
+        (list) => list?.map((i) => i.id === idea.id ? { ...i, voted: !i.voted, voteCount: Math.max(0, i.voteCount + (i.voted ? -1 : 1)) } : i)
+      );
+      return { before };
+    },
+    onError: (_e, _idea, context) => {
+      if (context?.before) queryClient.setQueryData(key("ideas"), context.before);
+    },
+    onSettled: () => void queryClient.invalidateQueries({ queryKey: key("ideas") })
+  });
+  const suggest = useMutation({
+    mutationFn: (t) => client.suggestIdea({ title: t }),
+    onSuccess: () => {
+      setTitle("");
+      void queryClient.invalidateQueries({ queryKey: key("ideas") });
+    },
+    onError: (e) => Alert.alert(copy.feedback.failedTitle, e.code === "GS429" ? copy.feedback.rateLimited : copy.feedback.failedBody)
+  });
+  const items = (query.data ?? []).map((idea) => ({
+    id: idea.id,
+    title: idea.title,
+    preview: idea.body ?? void 0,
+    meta: copy.ideas.statuses[idea.status],
+    // Swipe or long press: the same vote, for people who don't see the button.
+    swipeActions: [{ id: "vote", label: idea.voted ? copy.ideas.voted : copy.ideas.vote, onPress: () => toggle.mutate(idea) }],
+    leading: /* @__PURE__ */ jsx(View, {}),
+    trailing: /* @__PURE__ */ jsx(VoteButton, { idea, onToggle: () => toggle.mutate(idea), testID: `genesis-support-vote-${idea.id}` }),
+    testID: `genesis-support-idea-${idea.id}`
+  }));
+  const header = /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 8, alignItems: "flex-end", paddingHorizontal: 16, paddingBottom: 12 }, children: [
+    /* @__PURE__ */ jsx(View, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+      NativeInput,
+      {
+        testID: "genesis-support-idea-title",
+        label: copy.ideas.titleLabel,
+        placeholder: copy.ideas.titlePlaceholder,
+        value: title,
+        onChangeText: setTitle,
+        maxLength: 140
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      NativeButton,
+      {
+        onPress: () => title.trim().length >= 3 && suggest.mutate(title.trim()),
+        disabled: title.trim().length < 3,
+        loading: suggest.isPending,
+        testID: "genesis-support-idea-submit",
+        children: copy.ideas.submit
+      }
+    )
+  ] });
+  return {
+    testID: "genesis-support-ideas",
+    headerTitle: copy.ideas.title,
+    items,
+    refreshing: query.isRefetching,
+    onRefresh: async () => {
+      await query.refetch();
+    },
+    header,
+    loading: query.isPending,
+    error: query.isError,
+    errorTitle: copy.inbox.errorTitle,
+    errorBody: copy.inbox.errorBody,
+    emptyTitle: copy.ideas.emptyTitle,
+    emptyBody: copy.ideas.emptyBody
+  };
+}
+function useShippedIdeas() {
+  const { copy, client } = useSupport();
+  const query = useQuery({ queryKey: key("shipped"), queryFn: () => client.shippedForMe() });
+  const items = (query.data ?? []).map((idea) => ({
+    id: idea.id,
+    title: idea.title,
+    preview: idea.body ?? void 0,
+    timestamp: idea.shippedAt ?? void 0,
+    meta: idea.featureId ? fill(copy.shipped.shippedAs, { feature: idea.featureId }) : copy.ideas.statuses.shipped,
+    leading: /* @__PURE__ */ jsx(View, {}),
+    testID: `genesis-support-shipped-${idea.id}`
+  }));
+  return {
+    testID: "genesis-support-shipped",
+    headerTitle: copy.shipped.title,
+    items,
+    refreshing: query.isRefetching,
+    onRefresh: async () => {
+      await query.refetch();
+    },
+    loading: query.isPending,
+    error: query.isError,
+    errorTitle: copy.inbox.errorTitle,
+    errorBody: copy.inbox.errorBody,
+    emptyTitle: copy.shipped.emptyTitle,
+    emptyBody: copy.shipped.emptyBody
+  };
+}
+function SendFeedbackButton({ testID = "genesis-support-send-feedback-button", screenshot = true }) {
+  const block = useOptionalSupport();
+  if (!block) return null;
+  return /* @__PURE__ */ jsx(NativeButton, { variant: "outline", onPress: () => void block.openFeedback({ screenshot }), testID, children: block.copy.settings.sendFeedback });
+}
+
+export { FeedbackForm, SUPPORT_QUERY_ROOT, ScreenshotAnnotator, SendFeedbackButton, SupportProvider, VoteButton, boxOf, createSupport, listenForShake, strokeDots, useIdeaBoard, useOptionalSupport, usePendingFeedback, useShippedIdeas, useSupport, useSupportInbox, useSupportThread, useUnreadReplies };
+//# sourceMappingURL=native.js.map
+//# sourceMappingURL=native.js.map