@bsky.app/peek-menu 0.2.0

package/ios/SVGPathParser.swift

@@ -0,0 +1,320 @@
+import UIKit
+
+/// Minimal SVG path `d` parser. Handles the subset used by Bluesky's icon set:
+/// M m L l H h V v C c S s Q q T t A a Z z.
+/// Assumes well-formed input from the app's own compiled-in icon paths.
+enum SVGPathParser {
+  static func parse(_ d: String) -> UIBezierPath {
+    let path = UIBezierPath()
+    var tokens = Tokenizer(d)
+    var currentPoint = CGPoint.zero
+    var subpathStart = CGPoint.zero
+    var lastControl: CGPoint?
+    var lastQuadControl: CGPoint?
+    var command: Character = "M"
+
+    while let next = tokens.peek() {
+      if next.isLetter {
+        command = next
+        tokens.consume()
+      }
+
+      switch command {
+      case "M", "m":
+        let p = tokens.readPoint()
+        let abs = command == "M" ? p : CGPoint(x: currentPoint.x + p.x, y: currentPoint.y + p.y)
+        path.move(to: abs)
+        currentPoint = abs
+        subpathStart = abs
+        lastControl = nil
+        lastQuadControl = nil
+        // Subsequent coordinate pairs after M/m are implicit L/l
+        command = command == "M" ? "L" : "l"
+
+      case "L", "l":
+        let p = tokens.readPoint()
+        let abs = command == "L" ? p : CGPoint(x: currentPoint.x + p.x, y: currentPoint.y + p.y)
+        path.addLine(to: abs)
+        currentPoint = abs
+        lastControl = nil
+        lastQuadControl = nil
+
+      case "H", "h":
+        let x = tokens.readNumber()
+        let abs = command == "H" ? CGPoint(x: x, y: currentPoint.y) : CGPoint(x: currentPoint.x + x, y: currentPoint.y)
+        path.addLine(to: abs)
+        currentPoint = abs
+        lastControl = nil
+        lastQuadControl = nil
+
+      case "V", "v":
+        let y = tokens.readNumber()
+        let abs = command == "V" ? CGPoint(x: currentPoint.x, y: y) : CGPoint(x: currentPoint.x, y: currentPoint.y + y)
+        path.addLine(to: abs)
+        currentPoint = abs
+        lastControl = nil
+        lastQuadControl = nil
+
+      case "C", "c":
+        let c1 = tokens.readPoint()
+        let c2 = tokens.readPoint()
+        let p = tokens.readPoint()
+        let (ac1, ac2, ap): (CGPoint, CGPoint, CGPoint)
+        if command == "C" {
+          ac1 = c1; ac2 = c2; ap = p
+        } else {
+          ac1 = CGPoint(x: currentPoint.x + c1.x, y: currentPoint.y + c1.y)
+          ac2 = CGPoint(x: currentPoint.x + c2.x, y: currentPoint.y + c2.y)
+          ap = CGPoint(x: currentPoint.x + p.x, y: currentPoint.y + p.y)
+        }
+        path.addCurve(to: ap, controlPoint1: ac1, controlPoint2: ac2)
+        currentPoint = ap
+        lastControl = ac2
+        lastQuadControl = nil
+
+      case "S", "s":
+        let c2 = tokens.readPoint()
+        let p = tokens.readPoint()
+        let reflected = lastControl.map {
+          CGPoint(x: 2 * currentPoint.x - $0.x, y: 2 * currentPoint.y - $0.y)
+        } ?? currentPoint
+        let (ac2, ap): (CGPoint, CGPoint)
+        if command == "S" {
+          ac2 = c2; ap = p
+        } else {
+          ac2 = CGPoint(x: currentPoint.x + c2.x, y: currentPoint.y + c2.y)
+          ap = CGPoint(x: currentPoint.x + p.x, y: currentPoint.y + p.y)
+        }
+        path.addCurve(to: ap, controlPoint1: reflected, controlPoint2: ac2)
+        currentPoint = ap
+        lastControl = ac2
+        lastQuadControl = nil
+
+      case "Q", "q":
+        let c = tokens.readPoint()
+        let p = tokens.readPoint()
+        let (ac, ap): (CGPoint, CGPoint)
+        if command == "Q" {
+          ac = c; ap = p
+        } else {
+          ac = CGPoint(x: currentPoint.x + c.x, y: currentPoint.y + c.y)
+          ap = CGPoint(x: currentPoint.x + p.x, y: currentPoint.y + p.y)
+        }
+        path.addQuadCurve(to: ap, controlPoint: ac)
+        currentPoint = ap
+        lastControl = nil
+        lastQuadControl = ac
+
+      case "T", "t":
+        let p = tokens.readPoint()
+        let reflected = lastQuadControl.map {
+          CGPoint(x: 2 * currentPoint.x - $0.x, y: 2 * currentPoint.y - $0.y)
+        } ?? currentPoint
+        let ap = command == "T" ? p : CGPoint(x: currentPoint.x + p.x, y: currentPoint.y + p.y)
+        path.addQuadCurve(to: ap, controlPoint: reflected)
+        currentPoint = ap
+        lastControl = nil
+        lastQuadControl = reflected
+
+      case "A", "a":
+        let rx = tokens.readNumber()
+        let ry = tokens.readNumber()
+        let xAxisRotation = tokens.readNumber() * .pi / 180
+        let largeArc = tokens.readNumber() != 0
+        let sweep = tokens.readNumber() != 0
+        let end = tokens.readPoint()
+        let absEnd = command == "A" ? end : CGPoint(x: currentPoint.x + end.x, y: currentPoint.y + end.y)
+        ArcBuilder.addArc(
+          to: path,
+          from: currentPoint,
+          to: absEnd,
+          rx: rx,
+          ry: ry,
+          xAxisRotation: xAxisRotation,
+          largeArc: largeArc,
+          sweep: sweep
+        )
+        currentPoint = absEnd
+        lastControl = nil
+        lastQuadControl = nil
+
+      case "Z", "z":
+        path.close()
+        currentPoint = subpathStart
+        lastControl = nil
+        lastQuadControl = nil
+
+      default:
+        tokens.consume()
+      }
+    }
+
+    return path
+  }
+}
+
+private struct Tokenizer {
+  private let chars: [Character]
+  private var index = 0
+
+  init(_ s: String) { self.chars = Array(s) }
+
+  mutating func peek() -> Character? {
+    skipSeparators()
+    return index < chars.count ? chars[index] : nil
+  }
+
+  mutating func consume() {
+    if index < chars.count { index += 1 }
+  }
+
+  mutating func readNumber() -> CGFloat {
+    skipSeparators()
+    let start = index
+    var sawDot = false
+    var sawE = false
+    while index < chars.count {
+      let c = chars[index]
+      if index == start && (c == "+" || c == "-") {
+        index += 1
+        continue
+      }
+      if c == "." {
+        if sawDot || sawE { break }
+        sawDot = true
+        index += 1
+        continue
+      }
+      if c == "e" || c == "E" {
+        if sawE { break }
+        sawE = true
+        index += 1
+        if index < chars.count && (chars[index] == "+" || chars[index] == "-") {
+          index += 1
+        }
+        continue
+      }
+      if c.isNumber {
+        index += 1
+        continue
+      }
+      break
+    }
+    let slice = String(chars[start..<index])
+    return CGFloat(Double(slice) ?? 0)
+  }
+
+  mutating func readPoint() -> CGPoint {
+    let x = readNumber()
+    let y = readNumber()
+    return CGPoint(x: x, y: y)
+  }
+
+  private mutating func skipSeparators() {
+    while index < chars.count {
+      let c = chars[index]
+      if c == " " || c == "," || c == "\t" || c == "\n" || c == "\r" {
+        index += 1
+      } else {
+        break
+      }
+    }
+  }
+}
+
+private enum ArcBuilder {
+  /// Converts an SVG elliptical arc to a series of cubic Bezier segments and
+  /// appends them to the given path. Based on the W3C "Elliptical Arc
+  /// Implementation Notes" conversion.
+  static func addArc(
+    to path: UIBezierPath,
+    from start: CGPoint,
+    to end: CGPoint,
+    rx rxIn: CGFloat,
+    ry ryIn: CGFloat,
+    xAxisRotation phi: CGFloat,
+    largeArc: Bool,
+    sweep: Bool
+  ) {
+    if start == end { return }
+    if rxIn == 0 || ryIn == 0 {
+      path.addLine(to: end)
+      return
+    }
+
+    var rx = abs(rxIn)
+    var ry = abs(ryIn)
+    let cosPhi = cos(phi)
+    let sinPhi = sin(phi)
+
+    let dx = (start.x - end.x) / 2
+    let dy = (start.y - end.y) / 2
+    let x1p = cosPhi * dx + sinPhi * dy
+    let y1p = -sinPhi * dx + cosPhi * dy
+
+    let lambda = (x1p * x1p) / (rx * rx) + (y1p * y1p) / (ry * ry)
+    if lambda > 1 {
+      let s = sqrt(lambda)
+      rx *= s
+      ry *= s
+    }
+
+    let sign: CGFloat = (largeArc == sweep) ? -1 : 1
+    let numerator = rx * rx * ry * ry - rx * rx * y1p * y1p - ry * ry * x1p * x1p
+    let denominator = rx * rx * y1p * y1p + ry * ry * x1p * x1p
+    let factor = sign * sqrt(max(0, numerator / denominator))
+    let cxp = factor * (rx * y1p / ry)
+    let cyp = factor * (-ry * x1p / rx)
+
+    let cx = cosPhi * cxp - sinPhi * cyp + (start.x + end.x) / 2
+    let cy = sinPhi * cxp + cosPhi * cyp + (start.y + end.y) / 2
+
+    let startVec = CGPoint(x: (x1p - cxp) / rx, y: (y1p - cyp) / ry)
+    let endVec = CGPoint(x: (-x1p - cxp) / rx, y: (-y1p - cyp) / ry)
+    let theta1 = angle(from: CGPoint(x: 1, y: 0), to: startVec)
+    var deltaTheta = angle(from: startVec, to: endVec)
+    if !sweep && deltaTheta > 0 {
+      deltaTheta -= 2 * .pi
+    } else if sweep && deltaTheta < 0 {
+      deltaTheta += 2 * .pi
+    }
+
+    // Split into up to 4 cubic beziers (each covering <= 90°).
+    let segments = max(1, Int(ceil(abs(deltaTheta) / (.pi / 2))))
+    let delta = deltaTheta / CGFloat(segments)
+    let t = (4.0 / 3.0) * tan(delta / 4)
+
+    var theta = theta1
+    for _ in 0..<segments {
+      let cosT = cos(theta)
+      let sinT = sin(theta)
+      let cosT2 = cos(theta + delta)
+      let sinT2 = sin(theta + delta)
+
+      let p1 = CGPoint(x: cosT - t * sinT, y: sinT + t * cosT)
+      let p2 = CGPoint(x: cosT2 + t * sinT2, y: sinT2 - t * cosT2)
+      let p3 = CGPoint(x: cosT2, y: sinT2)
+
+      let c1 = transformEllipsePoint(p1, rx: rx, ry: ry, phi: phi, cx: cx, cy: cy)
+      let c2 = transformEllipsePoint(p2, rx: rx, ry: ry, phi: phi, cx: cx, cy: cy)
+      let c3 = transformEllipsePoint(p3, rx: rx, ry: ry, phi: phi, cx: cx, cy: cy)
+
+      path.addCurve(to: c3, controlPoint1: c1, controlPoint2: c2)
+      theta += delta
+    }
+  }
+
+  private static func transformEllipsePoint(_ p: CGPoint, rx: CGFloat, ry: CGFloat, phi: CGFloat, cx: CGFloat, cy: CGFloat) -> CGPoint {
+    let x = rx * p.x
+    let y = ry * p.y
+    let rx_ = cos(phi) * x - sin(phi) * y + cx
+    let ry_ = sin(phi) * x + cos(phi) * y + cy
+    return CGPoint(x: rx_, y: ry_)
+  }
+
+  private static func angle(from u: CGPoint, to v: CGPoint) -> CGFloat {
+    let dot = u.x * v.x + u.y * v.y
+    let det = u.x * v.y - u.y * v.x
+    return atan2(det, dot)
+  }
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@bsky.app/peek-menu",
+  "version": "0.2.0",
+  "license": "MIT",
+  "description": "Native iOS context menu with peek preview for images.",
+  "repository": "https://github.com/bluesky-social/toolbox",
+  "author": "Bluesky Social PBC <hello@blueskyweb.xyz>",
+  "homepage": "https://github.com/bluesky-social/toolbox/tree/main/packages/peek-menu",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "keywords": [
+    "react-native",
+    "expo",
+    "context-menu",
+    "peek",
+    "ios"
+  ],
+  "devDependencies": {
+    "@types/react": "~19.1.1",
+    "expo": "^55.0.8",
+    "expo-module-scripts": "^55.0.2",
+    "expo-modules-core": "^55.0.22",
+    "react-native": "0.82.1",
+    "vitest": "^3.1.1"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*",
+    "react-native": "*"
+  },
+  "scripts": {
+    "build": "expo-module clean && EXPO_NONINTERACTIVE=1 expo-module build",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test": "vitest run",
+    "expo-module": "expo-module"
+  }
+}

package/src/ExpoContextMenuNativeView.android.tsx

@@ -0,0 +1,10 @@
+import {View} from 'react-native'
+
+import {type NativeViewProps} from './types'
+
+/**
+ * Android fallback: passthrough wrapper with no context menu interaction.
+ */
+export default function NativeView({children, style}: NativeViewProps) {
+  return <View style={style}>{children}</View>
+}

package/src/ExpoContextMenuNativeView.tsx

@@ -0,0 +1,10 @@
+import {type ComponentType} from 'react'
+import {requireNativeViewManager} from 'expo-modules-core'
+
+import {type NativeViewProps} from './types'
+
+const NativeView: ComponentType<NativeViewProps> = requireNativeViewManager(
+  'ExpoBlueskyPeekMenu',
+)
+
+export default NativeView

package/src/ExpoContextMenuNativeView.web.tsx

@@ -0,0 +1,11 @@
+import {View} from 'react-native'
+
+import {type NativeViewProps} from './types'
+
+/**
+ * Web fallback: passthrough. Long-press is a no-op; tap handling is delegated
+ * to children.
+ */
+export default function NativeView({children, style}: NativeViewProps) {
+  return <View style={style}>{children}</View>
+}

package/src/Menu.tsx

@@ -0,0 +1,17 @@
+import {type ReactNode} from 'react'
+
+import {tag} from './registry'
+
+export type MenuProps = {
+  children: ReactNode
+}
+
+/**
+ * Sentinel: does not render. `Root` reads this element's children to collect
+ * menu items.
+ */
+function MenuImpl(_: MenuProps): null {
+  return null
+}
+
+export const Menu = tag(MenuImpl, 'menu')

package/src/MenuItem.tsx

@@ -0,0 +1,22 @@
+import {type ReactNode} from 'react'
+
+import {tag} from './registry'
+
+export type MenuItemProps = {
+  id: string
+  destructive?: boolean
+  disabled?: boolean
+  onSelect: () => void
+  /** Children must include a `MenuItemIcon` and a `MenuItemText`. */
+  children: ReactNode
+}
+
+/**
+ * Sentinel: does not render. `Root` walks the children tree to extract icon +
+ * label, then ships a plain menu item spec to native.
+ */
+function MenuItemImpl(_: MenuItemProps): null {
+  return null
+}
+
+export const MenuItem = tag(MenuItemImpl, 'item')

package/src/MenuItemIcon.tsx

@@ -0,0 +1,17 @@
+import {tag} from './registry'
+import {type MenuItemIconSource} from './types'
+
+export type MenuItemIconProps = {
+  icon: MenuItemIconSource
+}
+
+/**
+ * Sentinel: does not render any React output. `Root` introspects this element
+ * during its collection pass to pull the SVG path data off the icon component,
+ * then ships the data to native.
+ */
+function MenuItemIconImpl(_: MenuItemIconProps): null {
+  return null
+}
+
+export const MenuItemIcon = tag(MenuItemIconImpl, 'item-icon')

package/src/MenuItemText.tsx

@@ -0,0 +1,16 @@
+import {tag} from './registry'
+
+export type MenuItemTextProps = {
+  children: string
+}
+
+/**
+ * Sentinel: does not render. `Root` reads `children` as the menu item label.
+ * Keeping this a sentinel (vs. a real Text) mirrors how `Menu.ItemText` is
+ * used elsewhere while letting iOS draw the menu chrome natively.
+ */
+function MenuItemTextImpl(_: MenuItemTextProps): null {
+  return null
+}
+
+export const MenuItemText = tag(MenuItemTextImpl, 'item-text')

package/src/Root.tsx

@@ -0,0 +1,119 @@
+import {
+  Children,
+  isValidElement,
+  type ReactElement,
+  type ReactNode,
+  useCallback,
+  useMemo,
+} from 'react'
+import {type StyleProp, type ViewStyle} from 'react-native'
+
+import NativeView from './ExpoContextMenuNativeView'
+import {type MenuProps} from './Menu'
+import {type MenuItemProps} from './MenuItem'
+import {type MenuItemIconProps} from './MenuItemIcon'
+import {type MenuItemTextProps} from './MenuItemText'
+import {kindOf} from './registry'
+import {type TriggerProps} from './Trigger'
+import {type MenuItemSpec} from './types'
+
+export type RootProps = {
+  children: ReactNode
+  style?: StyleProp<ViewStyle>
+}
+
+export function Root({children, style}: RootProps) {
+  const {trigger, menu} = collectTriggerAndMenu(children)
+
+  const {menuItems, selectById} = useMemo(() => {
+    const items: MenuItemSpec[] = []
+    const map: Record<string, () => void> = {}
+    if (menu) {
+      Children.forEach(menu.props.children, child => {
+        if (!isValidElement(child)) return
+        if (kindOf(child.type) !== 'item') return
+        const spec = specFromItem(child as ReactElement<MenuItemProps>)
+        if (!spec) return
+        items.push(spec.item)
+        map[spec.item.id] = spec.onSelect
+      })
+    }
+    return {menuItems: items, selectById: map}
+  }, [menu])
+
+  const handleItemPress = useCallback(
+    (e: {nativeEvent: {id: string}}) => {
+      selectById[e.nativeEvent.id]?.()
+    },
+    [selectById],
+  )
+
+  const onPreviewPress = trigger?.props.onPreviewPress
+  const handlePreviewPress = useCallback(() => {
+    onPreviewPress?.()
+  }, [onPreviewPress])
+
+  if (!trigger) {
+    return <>{children}</>
+  }
+
+  return (
+    <NativeView
+      preview={trigger.props.preview}
+      menuItems={menuItems}
+      previewCornerRadius={trigger.props.borderRadius ?? 0}
+      onItemPress={handleItemPress}
+      onPreviewPress={handlePreviewPress}
+      style={[style, trigger.props.style]}>
+      {trigger.props.children}
+    </NativeView>
+  )
+}
+
+// -----------------------------------------------------------------------------
+
+type Collected = {
+  trigger?: ReactElement<TriggerProps>
+  menu?: ReactElement<MenuProps>
+}
+
+function collectTriggerAndMenu(children: ReactNode): Collected {
+  const result: Collected = {}
+  Children.forEach(children, child => {
+    if (!isValidElement(child)) return
+    const kind = kindOf(child.type)
+    if (kind === 'trigger') result.trigger = child as ReactElement<TriggerProps>
+    else if (kind === 'menu') result.menu = child as ReactElement<MenuProps>
+  })
+  return result
+}
+
+function specFromItem(
+  element: ReactElement<MenuItemProps>,
+): {item: MenuItemSpec; onSelect: () => void} | null {
+  const {id, destructive, disabled, onSelect, children} = element.props
+  let label = ''
+  let icon: MenuItemSpec['icon']
+  Children.forEach(children, child => {
+    if (!isValidElement(child)) return
+    const kind = kindOf(child.type)
+    if (kind === 'item-text') {
+      const text = (child as ReactElement<MenuItemTextProps>).props.children
+      if (typeof text === 'string') label = text
+    } else if (kind === 'item-icon') {
+      const iconSource = (child as ReactElement<MenuItemIconProps>).props.icon
+      if (iconSource?.svgPaths?.length) {
+        icon = {
+          paths: iconSource.svgPaths,
+          viewBox: iconSource.svgViewBox,
+          strokeWidth: iconSource.svgStrokeWidth,
+        }
+      }
+    }
+  })
+  if (!label) return null
+  return {
+    item: {id, label, destructive, disabled, icon},
+    onSelect,
+  }
+}

package/src/Trigger.tsx

@@ -0,0 +1,26 @@
+import {type ReactNode} from 'react'
+import {type StyleProp, type ViewStyle} from 'react-native'
+
+import {tag} from './registry'
+import {type PreviewContent} from './types'
+
+export type TriggerProps = {
+  preview?: PreviewContent
+  /** Fires when the user taps the expanded preview to "commit" into it. */
+  onPreviewPress?: () => void
+  /** Border radius of the thumbnail being wrapped. Used natively to clip the
+   *  targeted-preview lift animation. */
+  borderRadius?: number
+  style?: StyleProp<ViewStyle>
+  children: ReactNode
+}
+
+/**
+ * Sentinel: does not render. `Root` reads props + children off this element
+ * and hosts `children` inside the native context-menu view.
+ */
+function TriggerImpl(_: TriggerProps): null {
+  return null
+}
+
+export const Trigger = tag(TriggerImpl, 'trigger')

package/src/index.ts

@@ -0,0 +1,12 @@
+export {Menu} from './Menu'
+export {MenuItem} from './MenuItem'
+export {MenuItemIcon} from './MenuItemIcon'
+export {MenuItemText} from './MenuItemText'
+export {Root} from './Root'
+export {Trigger} from './Trigger'
+export type {
+  MenuItemIconSource,
+  MenuItemSpec,
+  PreviewContent,
+  SvgIconMeta,
+} from './types'

package/src/registry.ts

@@ -0,0 +1,32 @@
+/**
+ * Marker keys and type tags shared between `Root`, `Trigger`, `Menu`, and
+ * `MenuItem*`. `Root` walks its children looking for these tags so the
+ * composition API doesn't rely on string component names or display names.
+ */
+export const CONTEXT_MENU_KIND = '__ExpoBlueskyPeekMenuKind__'
+
+export type ContextMenuKind =
+  | 'trigger'
+  | 'menu'
+  | 'item'
+  | 'item-icon'
+  | 'item-text'
+
+export type TaggedComponent<P> = React.FunctionComponent<P> & {
+  [CONTEXT_MENU_KIND]: ContextMenuKind
+}
+
+export function tag<P>(
+  component: React.FunctionComponent<P>,
+  kind: ContextMenuKind,
+): TaggedComponent<P> {
+  ;(component as TaggedComponent<P>)[CONTEXT_MENU_KIND] = kind
+  return component as TaggedComponent<P>
+}
+
+export function kindOf(type: unknown): ContextMenuKind | undefined {
+  if (type && typeof type === 'function') {
+    return (type as TaggedComponent<unknown>)[CONTEXT_MENU_KIND]
+  }
+  return undefined
+}