@tapthrough/expo 0.0.0-stage → 0.1.1

package/dist/ui/theme.js

@@ -0,0 +1,61 @@
+import { DynamicColorIOS, Platform, PlatformColor, useColorScheme, } from 'react-native';
+/** Light and dark values; on iOS they back the system colors' names below. */
+const TABLE = {
+    surface: { light: '#FFFFFF', dark: '#1C1C1E' },
+    label: { light: '#000000', dark: '#FFFFFF' },
+    secondary: { light: 'rgba(60,60,67,0.6)', dark: 'rgba(235,235,245,0.6)' },
+    tertiary: { light: 'rgba(60,60,67,0.3)', dark: 'rgba(235,235,245,0.3)' },
+    separator: { light: 'rgba(60,60,67,0.29)', dark: 'rgba(84,84,88,0.65)' },
+    fill: { light: 'rgba(118,118,128,0.12)', dark: 'rgba(118,118,128,0.24)' },
+    tint: { light: '#007AFF', dark: '#0A84FF' },
+    pass: { light: '#34C759', dark: '#30D158' },
+    fail: { light: '#FF3B30', dark: '#FF453A' },
+    tintFill: { light: 'rgba(0,122,255,0.12)', dark: 'rgba(10,132,255,0.22)' },
+    /** The selected segment of a segmented control. */
+    segment: { light: '#FFFFFF', dark: '#636366' },
+};
+const IOS_NAMES = {
+    surface: 'secondarySystemGroupedBackground',
+    label: 'label',
+    secondary: 'secondaryLabel',
+    tertiary: 'tertiaryLabel',
+    separator: 'separator',
+    fill: 'tertiarySystemFill',
+    tint: 'systemBlue',
+    pass: 'systemGreen',
+    fail: 'systemRed',
+};
+function iosColors() {
+    const colors = {};
+    for (const name of Object.keys(TABLE)) {
+        const system = IOS_NAMES[name];
+        // System colors follow dark mode and Increase Contrast by themselves. They
+        // can't take an alpha, so the tinted fill is a dynamic pair instead.
+        colors[name] = system ? PlatformColor(system) : DynamicColorIOS(TABLE[name]);
+    }
+    return colors;
+}
+const ios = Platform.OS === 'ios' ? iosColors() : null;
+/** The SDK's colors: iOS system colors, or a light/dark table elsewhere. */
+export function useColors() {
+    const scheme = useColorScheme();
+    if (ios)
+        return ios;
+    const mode = scheme === 'dark' ? 'dark' : 'light';
+    const colors = {};
+    for (const name of Object.keys(TABLE))
+        colors[name] = TABLE[name][mode];
+    return colors;
+}
+/** Apple's text styles at the default Dynamic Type size. */
+export const text = {
+    title2: { fontSize: 22, lineHeight: 28, fontWeight: '700' },
+    headline: { fontSize: 17, lineHeight: 22, fontWeight: '600' },
+    body: { fontSize: 17, lineHeight: 22 },
+    subhead: { fontSize: 15, lineHeight: 20 },
+    footnote: { fontSize: 13, lineHeight: 18 },
+    caption: { fontSize: 12, lineHeight: 16 },
+};
+/** The iOS curve for things that enter or leave, as a spring. */
+export const SPRING = { stiffness: 260, damping: 28, mass: 1 };
+//# sourceMappingURL=theme.js.map

package/dist/ui/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/ui/theme.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,85 @@
 {
   "name": "@tapthrough/expo",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "Tapthrough SDK for Expo: opens a pull request preview on the right screen, logged in with seeded data",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tapthrough/tapthrough.git",
+    "directory": "packages/expo"
+  },
+  "homepage": "https://github.com/tapthrough/tapthrough/tree/main/packages/expo",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.ts",
+    "app.plugin.js",
+    "app.plugin.d.ts"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./supabase": {
+      "types": "./dist/supabase.d.ts",
+      "default": "./dist/supabase.js"
+    },
+    "./app.plugin": {
+      "types": "./app.plugin.d.ts",
+      "default": "./app.plugin.js"
+    },
+    "./app.plugin.js": {
+      "types": "./app.plugin.d.ts",
+      "default": "./app.plugin.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@tapthrough/protocol": "^0.3.0"
+  },
+  "peerDependencies": {
+    "expo-constants": ">=17",
+    "expo-glass-effect": ">=0.1",
+    "expo-haptics": ">=14",
+    "expo-linking": ">=7",
+    "expo-router": ">=4",
+    "expo-symbols": ">=0.4",
+    "react": ">=18",
+    "react-native": ">=0.76",
+    "react-native-screens": ">=4",
+    "react-native-view-shot": ">=4"
+  },
+  "devDependencies": {
+    "@supabase/supabase-js": "2.118.0",
+    "@types/react": "19.3.0",
+    "expo-constants": "58.0.12",
+    "expo-linking": "58.0.13",
+    "expo-router": "58.0.23",
+    "react": "19.3.1",
+    "react-native": "0.88.0"
+  },
+  "peerDependenciesMeta": {
+    "expo-glass-effect": {
+      "optional": true
+    },
+    "expo-haptics": {
+      "optional": true
+    },
+    "expo-symbols": {
+      "optional": true
+    },
+    "react-native-screens": {
+      "optional": true
+    },
+    "react-native-view-shot": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  }
 }

package/src/Annotator.tsx

@@ -0,0 +1,279 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  Animated,
+  Image,
+  PanResponder,
+  Pressable,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+} from 'react-native'
+import {
+  type Annotation,
+  type AnnotationStroke,
+  addStrokePoint,
+  boxFromDrag,
+  finishStroke,
+  MAX_ANNOTATIONS,
+  strokeSegments,
+} from './core/annotations.js'
+import { useBackPress } from './Overlay.js'
+import type { Screenshot } from './screenshot.js'
+
+type Mode = 'draw' | 'highlight' | 'blur'
+
+const MODES: { mode: Mode; title: string; hint: string }[] = [
+  { mode: 'draw', title: 'Draw', hint: 'Draw on the screenshot to circle or point at something.' },
+  { mode: 'highlight', title: 'Box', hint: 'Drag on the screenshot to draw a box.' },
+  { mode: 'blur', title: 'Blur', hint: 'Drag over anything private to blur it.' },
+]
+
+/**
+ * Full-screen markup for a report's screenshot: Draw to circle or point at
+ * something freehand, Box to outline it, Blur to hide personal data. The
+ * server applies the marks before storing the image.
+ */
+export function Annotator({
+  screenshot,
+  initial,
+  onDone,
+  onCancel,
+}: {
+  screenshot: Screenshot
+  initial: Annotation[]
+  onDone: (marks: Annotation[]) => void
+  onCancel: () => void
+}) {
+  const window = useWindowDimensions()
+  const [boxes, setBoxes] = useState(initial)
+  const [kind, setKind] = useState<Mode>('draw')
+  const [draft, setDraft] = useState<Annotation | null>(null)
+  const [aspect, setAspect] = useState(window.width / window.height)
+  const uri = `data:${screenshot.contentType};base64,${screenshot.base64}`
+  const shown = useRef(new Animated.Value(0)).current
+  useBackPress(onCancel)
+  useEffect(() => {
+    Animated.timing(shown, { toValue: 1, duration: 180, useNativeDriver: true }).start()
+  }, [shown])
+
+  // The image is shown at the screenshot's aspect ratio, so fractions map 1:1.
+  const maxWidth = window.width - 32
+  const maxHeight = window.height - 200
+  const width = Math.min(maxWidth, maxHeight * aspect)
+  const height = width / aspect
+
+  const state = useRef({
+    start: { x: 0, y: 0 },
+    draft: null as Annotation | null,
+    points: [] as [number, number][],
+    kind,
+    boxes,
+  })
+  state.current.kind = kind
+  state.current.boxes = boxes
+
+  const responder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: (event) => {
+          const start = { x: event.nativeEvent.locationX, y: event.nativeEvent.locationY }
+          state.current.start = start
+          state.current.draft = null
+          state.current.points =
+            state.current.kind === 'draw' ? addStrokePoint([], start, { width, height }) : []
+        },
+        onPanResponderMove: (_event, gesture) => {
+          const { start, kind: mode } = state.current
+          const at = { x: start.x + gesture.dx, y: start.y + gesture.dy }
+          if (mode === 'draw') {
+            const points = addStrokePoint(state.current.points, at, { width, height })
+            if (points === state.current.points) return
+            state.current.points = points
+            const stroke: AnnotationStroke = { kind: 'draw', points }
+            state.current.draft = stroke
+            setDraft(stroke)
+            return
+          }
+          const next = boxFromDrag(mode, start, at, { width, height })
+          state.current.draft = next
+          setDraft(next)
+        },
+        onPanResponderRelease: () => {
+          const { draft: current } = state.current
+          const finished = current?.kind === 'draw' ? finishStroke(current.points) : current
+          if (finished && state.current.boxes.length < MAX_ANNOTATIONS) {
+            setBoxes([...state.current.boxes, finished])
+          }
+          state.current.draft = null
+          setDraft(null)
+        },
+      }),
+    [width, height],
+  )
+
+  return (
+    <Animated.View style={[StyleSheet.absoluteFill, { opacity: shown }]} accessibilityViewIsModal>
+      <View style={styles.screen}>
+        <View style={styles.toolbar}>
+          <Pressable onPress={onCancel} accessibilityRole="button" hitSlop={8}>
+            <Text style={styles.toolbarText}>Cancel</Text>
+          </Pressable>
+          <View style={styles.modes}>
+            {MODES.map(({ mode, title }) => (
+              <Pressable
+                key={mode}
+                onPress={() => setKind(mode)}
+                style={[styles.mode, kind === mode && styles.modeActive]}
+                accessibilityRole="radio"
+                accessibilityState={{ selected: kind === mode }}
+              >
+                <Text style={[styles.modeText, kind === mode && styles.modeTextActive]}>
+                  {title}
+                </Text>
+              </Pressable>
+            ))}
+          </View>
+          <Pressable onPress={() => onDone(boxes)} accessibilityRole="button" hitSlop={8}>
+            <Text style={[styles.toolbarText, styles.done]}>Done</Text>
+          </Pressable>
+        </View>
+
+        <View style={{ width, height }} {...responder.panHandlers}>
+          <Image
+            source={{ uri }}
+            style={{ width, height }}
+            onLoad={(event) => {
+              const { width: w, height: h } = event.nativeEvent.source
+              if (w && h) setAspect(w / h)
+            }}
+            accessibilityLabel="Screenshot to mark up"
+          />
+          {[...boxes, ...(draft ? [draft] : [])].map((box, index) =>
+            box.kind === 'draw' ? (
+              // biome-ignore lint/suspicious/noArrayIndexKey: marks have no identity beyond their order
+              <Stroke key={index} points={box.points} width={width} height={height} />
+            ) : (
+              <View
+                // biome-ignore lint/suspicious/noArrayIndexKey: boxes have no identity beyond their order
+                key={index}
+                pointerEvents="none"
+                style={[
+                  styles.box,
+                  box.kind === 'blur' ? styles.blurBox : styles.highlightBox,
+                  {
+                    left: box.x * width,
+                    top: box.y * height,
+                    width: box.w * width,
+                    height: box.h * height,
+                  },
+                ]}
+              >
+                {box.kind === 'blur' ? <Text style={styles.blurLabel}>Blurred</Text> : null}
+              </View>
+            ),
+          )}
+        </View>
+
+        <View style={styles.footer}>
+          <Text style={styles.hint}>
+            {boxes.length === 0
+              ? MODES.find((m) => m.mode === kind)?.hint
+              : boxes.length >= MAX_ANNOTATIONS
+                ? `${MAX_ANNOTATIONS} marks is the most. Undo one to add another.`
+                : `${boxes.length} mark${boxes.length === 1 ? '' : 's'}`}
+          </Text>
+          {boxes.length > 0 ? (
+            <Pressable
+              onPress={() => setBoxes(boxes.slice(0, -1))}
+              accessibilityRole="button"
+              hitSlop={8}
+            >
+              <Text style={styles.toolbarText}>Undo</Text>
+            </Pressable>
+          ) : null}
+        </View>
+      </View>
+    </Animated.View>
+  )
+}
+
+const STROKE_WIDTH = 4
+
+/** A freehand mark, drawn as short rotated bars so it needs no SVG library. */
+function Stroke({
+  points,
+  width,
+  height,
+}: {
+  points: [number, number][]
+  width: number
+  height: number
+}) {
+  return (
+    <>
+      {strokeSegments(points, { width, height }).map((segment, i) => (
+        <View
+          // biome-ignore lint/suspicious/noArrayIndexKey: segments are positional
+          key={i}
+          pointerEvents="none"
+          style={[
+            styles.segment,
+            {
+              left: segment.left,
+              top: segment.top - STROKE_WIDTH / 2,
+              // A little longer than the gap, so joints don't show.
+              width: segment.length + STROKE_WIDTH / 2,
+              transform: [{ rotate: `${segment.angle}rad` }],
+            },
+          ]}
+        />
+      ))}
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  segment: {
+    position: 'absolute',
+    height: STROKE_WIDTH,
+    borderRadius: STROKE_WIDTH / 2,
+    backgroundColor: '#e5484d',
+  },
+  screen: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 16,
+    backgroundColor: '#111114',
+    paddingVertical: 48,
+  },
+  toolbar: {
+    width: '100%',
+    paddingHorizontal: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  toolbarText: { color: '#ffffff', fontSize: 16 },
+  done: { fontWeight: '700', color: '#8ab4f8' },
+  modes: { flexDirection: 'row', borderRadius: 999, backgroundColor: '#2a2b31', padding: 3 },
+  mode: { paddingVertical: 6, paddingHorizontal: 14, borderRadius: 999 },
+  modeActive: { backgroundColor: '#ffffff' },
+  modeText: { color: '#d4d4d8', fontSize: 14, fontWeight: '600' },
+  modeTextActive: { color: '#111114' },
+  box: { position: 'absolute', borderRadius: 6, alignItems: 'center', justifyContent: 'center' },
+  highlightBox: { borderWidth: 3, borderColor: '#e5484d' },
+  blurBox: { backgroundColor: 'rgba(40, 40, 46, 0.85)' },
+  blurLabel: { color: '#ffffff', fontSize: 12, fontWeight: '600' },
+  footer: {
+    width: '100%',
+    paddingHorizontal: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  hint: { color: '#a1a1aa', fontSize: 14 },
+})