move to toolbox

2026-04-21 16:12:38 +03:00
parent fcdd466a9c
commit fda38b1b98
26 changed files with 2 additions and 1266 deletions
@@ -1,119 +0,0 @@
 # expo-bluesky-context-menu
 Native iOS context menu with peek preview for images. Long-pressing a wrapped view shows a `UIContextMenuInteraction` with a full-size image preview and action menu. Android and web fall through to a passthrough `View`.
 The app re-exports this module through `#/components/PeekMenu`, which provides a noop on non-iOS platforms. Consumers should use `PeekMenu` rather than importing this module directly.
 ## JS API
 Declarative, compound-component API. `Root` collects children tagged as `Trigger` and `Menu`, serializes the menu items, and renders a single native view.
 ```tsx
 import * as PeekMenu from '#/components/PeekMenu'
 <PeekMenu.Root>
  <PeekMenu.Trigger
    preview={{type: 'image', uri: fullsizeUrl, thumbUri: thumbUrl, aspectRatio: 1.5}}
    borderRadius={12}>
    {children}
  </PeekMenu.Trigger>
  <PeekMenu.Menu>
    <PeekMenu.MenuItem id="save" onSelect={handleSave}>
      <PeekMenu.MenuItemIcon icon={SaveIcon} />
      <PeekMenu.MenuItemText>Save image</PeekMenu.MenuItemText>
    </PeekMenu.MenuItem>
  </PeekMenu.Menu>
 </PeekMenu.Root>
 ```
 `Trigger`, `Menu`, `MenuItem`, `MenuItemIcon`, and `MenuItemText` are sentinel components — they render nothing. `Root` walks the children tree at render time, extracts their props, and passes serialized data to the native view.
 ### Props
 **`Trigger`**
 - `preview?: PreviewContent` — what to show during peek. Only `image` is implemented; `video` and `externalCard` are typed but will fall back to no preview.
 - `borderRadius?: number` — corner radius of the thumbnail. Used in the native targeted-preview so the lift animation matches the clipping.
 - `onPreviewPress?: () => void` — fires when the user taps the expanded preview to commit into it (i.e. open the lightbox).
 **`MenuItem`**
 - `id: string` — stable identifier, sent back in the `onItemPress` event.
 - `onSelect: () => void` — called when this item is tapped.
 - `destructive?: boolean` — renders the item in red.
 - `disabled?: boolean` — greys the item out.
 **`MenuItemIcon`**
 - `icon: IconWithSvgMeta` — any component from `#/components/icons` that has `svgPaths`, `svgViewBox`, and `svgStrokeWidth` metadata. Rendered natively via `IconRenderer`.
 ### Preview types
 ```ts
 type PreviewContent =
  | {type: 'image'; uri: string; thumbUri?: string; aspectRatio: number}
  | {type: 'video'; uri: string; poster?: string; aspectRatio: number}      // not yet implemented
  | {type: 'externalCard'; thumbUri?: string; title: string; url: string}   // not yet implemented
 ```
 ## iOS native architecture
 ### View hierarchy
 ```
 ExpoBlueskyContextMenuView (ExpoView subclass)
  └── hosts the RN children directly
  └── attaches a UIContextMenuInteraction to itself
 ```
 The view is both the interaction's delegate and the target for the `UITargetedPreview`, so iOS animates the lift/dismiss between the actual thumbnail and the preview controller.
 ### Files
 | File | Purpose |
 |---|---|
 | `ExpoBlueskyContextMenuModule.swift` | Expo module definition. Registers the view, props (`preview`, `menuItems`, `previewCornerRadius`), and events (`onItemPress`, `onPreviewPress`). |
 | `ExpoBlueskyContextMenuView.swift` | The native view. Hosts `UIContextMenuInteraction`, builds targeted previews, and dispatches events back to JS. |
 | `PreviewFactory.swift` | Decodes the `preview` prop dict and constructs the right `UIViewController`. Currently only handles `image` → `ImagePreviewController`. |
 | `ImagePreviewController.swift` | Preview VC for images. Sizes via `preferredContentSize` based on aspect ratio. Loads images from SDWebImage's shared cache (see below). |
 | `MenuBuilder.swift` | Converts the JS menu item specs into a `UIMenu` with `UIAction`s. Supports icons, destructive styling, and disabled state. |
 | `IconRenderer.swift` | Rasterizes SVG path data from the app's icon components into `UIImage`s for menu items. Results are cached by `NSCache`. |
 | `SVGPathParser.swift` | Minimal SVG `d`-attribute parser. Handles M/L/H/V/C/S/Q/T/A/Z (the subset used by the Bluesky icon set). |
 ### Image loading
 `ImagePreviewController` shares SDWebImage's `SDImageCache.shared` and `SDWebImageManager.shared` with expo-image, so cache hits are free:
 1. **Memory cache hit on fullsize?** Paint it immediately — zero latency.
 2. **Memory cache hit on thumbnail?** Paint the thumb as a placeholder, then async-load the fullsize.
 3. **No cache hit?** Show nothing initially, async-load the fullsize.
 Disk cache lookups are intentionally skipped in the synchronous path to avoid blocking the main thread during the peek animation.
 ### Targeted preview & bounds snapping
 The view overrides `bounds` to snap widths/heights to exact pixel boundaries:
 ```swift
 override var bounds: CGRect {
  get {
    let b = super.bounds
    let s = self.window?.screen.scale ?? UIScreen.main.scale
    return CGRect(
      x: b.origin.x, y: b.origin.y,
      width: round(b.width * s) / s,
      height: round(b.height * s) / s
    )
  }
  set { super.bounds = newValue }
 }
 ```
 React Native's Yoga layout engine operates in float32 and can produce bounds like `150.00001525878906`. iOS's context menu dismiss animation interpolates between the preview and the target bounds — a sub-pixel mismatch causes a visible frame-size glitch on the first animation frame. Snapping to device pixels eliminates this.
 ### `onPreviewPress` timing
 `onPreviewPress` fires immediately in `willPerformPreviewActionForMenuWith`, not inside `animator.addCompletion`. This lets the JS side open the lightbox while iOS's commit animation is still running, so the two transitions overlap rather than running sequentially.
 ## Known limitations
 - **Carousel clipping**: When an image is inside a horizontal `FlatList` (gallery carousel), the `UIScrollView`'s `clipsToBounds` clips the peek lift animation and its shadow. This is a UIKit constraint — the scroll view clips its contents during the snapshot phase, before iOS renders the lift in its own window.
 - **Android/web**: No native implementation yet. The module falls through to a plain `View` wrapper. The `PeekMenu` re-export layer noops these platforms entirely.
 - **Video and external card previews**: Typed in `PreviewContent` but not implemented on the native side. `PreviewFactory` returns `nil` for unknown types, which makes iOS show its default preview (a snapshot of the source view).
@@ -1,6 +0,0 @@
 {
  "platforms": ["ios"],
  "ios": {
    "modules": ["ExpoBlueskyContextMenuModule"]
  }
 }
@@ -1,7 +0,0 @@
 export {Menu} from './src/Menu'
 export {MenuItem} from './src/MenuItem'
 export {MenuItemIcon} from './src/MenuItemIcon'
 export {MenuItemText} from './src/MenuItemText'
 export {Root} from './src/Root'
 export {Trigger} from './src/Trigger'
 export type {MenuItemSpec, PreviewContent} from './src/types'
@@ -1,22 +0,0 @@
 Pod::Spec.new do |s|
  s.name           = 'ExpoBlueskyContextMenu'
  s.version        = '1.0.0'
  s.summary        = 'Native iOS context menu (peek + long-press) for embeds'
  s.description    = 'Wraps UIContextMenuInteraction with a compositional JS API.'
  s.author         = ''
  s.homepage       = 'https://github.com/bluesky-social/social-app'
  s.platforms      = { :ios => '13.4', :tvos => '13.4' }
  s.source         = { git: '' }
  s.static_framework = true
  s.dependency 'ExpoModulesCore'
  # Must match the version pinned by expo-image so we share SDImageCache.shared.
  s.dependency 'SDWebImage', '~> 5.21.0'
  s.pod_target_xcconfig = {
    'DEFINES_MODULE' => 'YES',
    'SWIFT_COMPILATION_MODE' => 'wholemodule'
  }
  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
 end
@@ -1,24 +0,0 @@
 import ExpoModulesCore
 public class ExpoBlueskyContextMenuModule: Module {
  public func definition() -> ModuleDefinition {
    Name("ExpoBlueskyContextMenu")
    View(ExpoBlueskyContextMenuView.self) {
      Events(["onItemPress", "onPreviewPress"])
      Prop("preview") { (view: ExpoBlueskyContextMenuView, value: [String: Any]?) in
        view.setPreview(value)
      }
      Prop("menuItems") { (view: ExpoBlueskyContextMenuView, value: [[String: Any]]) in
        view.setMenuItems(value)
      }
      Prop("previewCornerRadius") {
        (view: ExpoBlueskyContextMenuView, value: Double) in
        view.setPreviewCornerRadius(value)
      }
    }
  }
 }
@@ -1,111 +0,0 @@
 import ExpoModulesCore
 import UIKit
 /// Native view that hosts the children and attaches a
 /// `UIContextMenuInteraction`. JS-shipped props drive behaviour:
 /// - `preview`: discriminated union describing what to show during peek
 /// - `menuItems`: array of menu item specs (see `MenuBuilder`)
 /// - `previewCornerRadius`: used for the targeted preview's visible path so the
 ///   lift animation matches the thumbnail's clipping. (Named distinctly from
 ///   the RN-owned `borderRadius` style prop on UIView.)
 class ExpoBlueskyContextMenuView: ExpoView, UIContextMenuInteractionDelegate {
  private var preview: [String: Any]?
  private var menuItems: [[String: Any]] = []
  private var previewCornerRadius: CGFloat = 0
  private let onItemPress = EventDispatcher()
  private let onPreviewPress = EventDispatcher()
  required init(appContext: AppContext? = nil) {
    super.init(appContext: appContext)
    let interaction = UIContextMenuInteraction(delegate: self)
    self.addInteraction(interaction)
  }
  // RN layout can leave bounds at fractional-pixel values. The targeted preview
  // snapshots this view's bounds for its return animation, and subpixel mismatches
  // cause a visible glitch when the preview shrinks back into the thumbnail.
  // Snapping to whole-pixel values prevents that.
  override var bounds: CGRect {
    get {
      let b = super.bounds
      let s = self.window?.screen.scale ?? UIScreen.main.scale
      return CGRect(
        x: b.origin.x,
        y: b.origin.y,
        width: round(b.width * s) / s,
        height: round(b.height * s) / s
      )
    }
    set { super.bounds = newValue }
  }
  func setPreview(_ value: [String: Any]?) { self.preview = value }
  func setMenuItems(_ value: [[String: Any]]) { self.menuItems = value }
  func setPreviewCornerRadius(_ value: Double) {
    self.previewCornerRadius = CGFloat(value)
  }
  // MARK: - UIContextMenuInteractionDelegate
  func contextMenuInteraction(
    _ interaction: UIContextMenuInteraction,
    configurationForMenuAtLocation location: CGPoint
  ) -> UIContextMenuConfiguration? {
    let previewSpec = self.preview
    let items = self.menuItems
    return UIContextMenuConfiguration(
      identifier: nil,
      previewProvider: { [weak self] in
        guard self != nil else { return nil }
        return PreviewFactory.makeController(from: previewSpec)
      },
      actionProvider: { [weak self] _ in
        guard let self = self else { return nil }
        return MenuBuilder.build(items: items) { [weak self] id in
          self?.onItemPress(["id": id])
        }
      }
    )
  }
  func contextMenuInteraction(
    _ interaction: UIContextMenuInteraction,
    previewForHighlightingMenuWithConfiguration configuration: UIContextMenuConfiguration
  ) -> UITargetedPreview? {
    return makeTargetedPreview()
  }
  func contextMenuInteraction(
    _ interaction: UIContextMenuInteraction,
    previewForDismissingMenuWithConfiguration configuration: UIContextMenuConfiguration
  ) -> UITargetedPreview? {
    return makeTargetedPreview()
  }
  func contextMenuInteraction(
    _ interaction: UIContextMenuInteraction,
    willPerformPreviewActionForMenuWith configuration: UIContextMenuConfiguration,
    animator: UIContextMenuInteractionCommitAnimating
  ) {
    self.onPreviewPress([:])
  }
  // MARK: - Targeted preview
  /// The targeted preview uses the view itself as target with a rounded-corner
  /// visible path matching the thumbnail's clipping, so the lift animation
  /// respects the existing corner radius.
  private func makeTargetedPreview() -> UITargetedPreview {
    let parameters = UIPreviewParameters()
    parameters.backgroundColor = .clear
    if previewCornerRadius > 0 {
      parameters.visiblePath = UIBezierPath(
        roundedRect: self.bounds,
        cornerRadius: previewCornerRadius
      )
    }
    return UITargetedPreview(view: self, parameters: parameters)
  }
 }
@@ -1,69 +0,0 @@
 import UIKit
 /// Renders SVG path data (the `d` attribute) into a `UIImage`. Supports the
 /// subset of SVG path commands used by the Bluesky icon set: M/m, L/l, H/h,
 /// V/v, C/c, S/s, Q/q, T/t, A/a, Z/z. Results are cached by (path, size, tint).
 enum IconRenderer {
  private static let cache = NSCache<NSString, UIImage>()
  struct Spec: Hashable {
    let paths: [String]
    let viewBox: String
    let strokeWidth: CGFloat
    let pointSize: CGFloat
  }
  static func image(for spec: Spec) -> UIImage? {
    let key = cacheKey(spec) as NSString
    if let cached = cache.object(forKey: key) { return cached }
    guard let image = render(spec) else { return nil }
    cache.setObject(image, forKey: key)
    return image
  }
  private static func cacheKey(_ spec: Spec) -> String {
    return "\(spec.paths.joined(separator: "|"))|\(spec.viewBox)|\(spec.strokeWidth)|\(spec.pointSize)"
  }
  private static func render(_ spec: Spec) -> UIImage? {
    let viewBox = parseViewBox(spec.viewBox) ?? CGRect(x: 0, y: 0, width: 24, height: 24)
    let size = CGSize(width: spec.pointSize, height: spec.pointSize)
    let scaleX = size.width / viewBox.width
    let scaleY = size.height / viewBox.height
    let scale = min(scaleX, scaleY)
    let renderer = UIGraphicsImageRenderer(size: size)
    let image = renderer.image { ctx in
      let cg = ctx.cgContext
      cg.translateBy(x: -viewBox.origin.x * scale, y: -viewBox.origin.y * scale)
      cg.scaleBy(x: scale, y: scale)
      // Render in opaque black; callers use `.alwaysTemplate` so iOS tints
      // the icon with the menu's label color (and red for destructive items).
      UIColor.black.setFill()
      UIColor.black.setStroke()
      for pathString in spec.paths {
        let bezier = SVGPathParser.parse(pathString)
        if spec.strokeWidth > 0 {
          bezier.lineWidth = spec.strokeWidth
          bezier.lineCapStyle = .round
          bezier.lineJoinStyle = .round
          bezier.stroke()
        } else {
          bezier.usesEvenOddFillRule = false
          bezier.fill()
        }
      }
    }
    return image.withRenderingMode(.alwaysTemplate)
  }
  private static func parseViewBox(_ s: String) -> CGRect? {
    let parts = s.split(whereSeparator: { $0 == " " || $0 == "," })
      .compactMap { Double($0) }
    guard parts.count == 4 else { return nil }
    return CGRect(x: parts[0], y: parts[1], width: parts[2], height: parts[3])
  }
 }
@@ -1,102 +0,0 @@
 import SDWebImage
 import UIKit
 /// Preview view controller shown during a peek. Renders a single image sized
 /// to the provided aspect ratio, capped to the screen bounds.
 ///
 /// The aspect ratio drives `preferredContentSize` so iOS animates directly to
 /// the final size without the mid-flight stretch that happens when a mis-sized
 /// snapshot is scaled up.
 ///
 /// Image loading cooperates with expo-image by sharing
 /// `SDImageCache.shared` and `SDWebImageManager.shared`:
 ///   1. Query the cache synchronously for the fullsize — if it's there
 ///      (e.g. prefetched on press-in), paint it immediately.
 ///   2. Else, paint the thumbnail (almost always cached — it's what the feed
 ///      renders) as a placeholder.
 ///   3. Asynchronously load the fullsize and swap it in when it arrives.
 /// This eliminates the "black flash" on first peek of an unloaded image.
 final class ImagePreviewController: UIViewController {
  private let imageURL: URL?
  private let thumbURL: URL?
  private let aspectRatio: CGFloat
  private let imageView = UIImageView()
  init(imageURL: URL?, thumbURL: URL?, aspectRatio: CGFloat) {
    self.imageURL = imageURL
    self.thumbURL = thumbURL
    self.aspectRatio = aspectRatio.isFinite && aspectRatio > 0 ? aspectRatio : 1
    super.init(nibName: nil, bundle: nil)
    self.preferredContentSize = Self.sizeForAspect(self.aspectRatio)
  }
  required init?(coder: NSCoder) { fatalError("init(coder:) not supported") }
  override func loadView() {
    let root = UIView()
    root.backgroundColor = .black
    root.clipsToBounds = true
    // Use autoresizing mask rather than AutoLayout so the imageView's frame
    // interpolates cleanly during the dismiss animation — AutoLayout-driven
    // relayout during a CALayer animation can cause a visible snap.
    imageView.frame = root.bounds
    imageView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    imageView.contentMode = .scaleAspectFit
    imageView.backgroundColor = .black
    root.addSubview(imageView)
    self.view = root
    primeImage()
  }
  // MARK: - Image loading
  private func primeImage() {
    // 1. Fullsize cache hit? Paint it immediately.
    if let url = imageURL, let cached = cachedImage(for: url) {
      imageView.image = cached
      return
    }
    // 2. Thumb placeholder (almost always cached by the feed).
    if let thumb = thumbURL, let cached = cachedImage(for: thumb) {
      imageView.image = cached
    }
    // 3. Kick off the async fullsize load.
    guard let url = imageURL else { return }
    SDWebImageManager.shared.loadImage(
      with: url,
      options: [.retryFailed],
      progress: nil
    ) { [weak self] image, _, _, _, _, _ in
      guard let self = self, let image = image else { return }
      DispatchQueue.main.async {
        self.imageView.image = image
      }
    }
  }
  /// Memory-only cache lookup. Disk reads are left to the async SDWebImage
  /// load to avoid blocking the main thread during the peek animation.
  private func cachedImage(for url: URL) -> UIImage? {
    let key = SDWebImageManager.shared.cacheKey(for: url) ?? url.absoluteString
    return SDImageCache.shared.imageFromMemoryCache(forKey: key)
  }
  /// Caps the preview to a comfortable size within the current key window.
  private static func sizeForAspect(_ aspect: CGFloat) -> CGSize {
    let screenBounds = UIApplication.shared.connectedScenes
      .compactMap { $0 as? UIWindowScene }
      .first?.screen.bounds ?? UIScreen.main.bounds
    let maxW = screenBounds.width - 32
    let maxH = screenBounds.height * 0.7
    var w = maxW
    var h = w / aspect
    if h > maxH {
      h = maxH
      w = h * aspect
    }
    return CGSize(width: w, height: h)
  }
 }
@@ -1,51 +0,0 @@
 import UIKit
 /// Builds a `UIMenu` from the JS-shipped item specs. Each item may carry an
 /// icon spec (SVG path data) which is rasterized via `IconRenderer`.
 enum MenuBuilder {
  /// Expected item shape from JS:
  /// {
  ///   id: String,
  ///   label: String,
  ///   destructive?: Bool,
  ///   disabled?: Bool,
  ///   icon?: {
  ///     paths: [String],
  ///     viewBox: String,
  ///     strokeWidth: Double
  ///   }
  /// }
  static func build(items: [[String: Any]], onSelect: @escaping (String) -> Void) -> UIMenu {
    let actions: [UIMenuElement] = items.compactMap { spec in
      guard let id = spec["id"] as? String,
            let label = spec["label"] as? String else { return nil }
      let destructive = (spec["destructive"] as? Bool) ?? false
      let disabled = (spec["disabled"] as? Bool) ?? false
      let image = icon(from: spec["icon"] as? [String: Any])
      var attributes: UIMenuElement.Attributes = []
      if destructive { attributes.insert(.destructive) }
      if disabled { attributes.insert(.disabled) }
      return UIAction(title: label, image: image, attributes: attributes) { _ in
        onSelect(id)
      }
    }
    return UIMenu(title: "", children: actions)
  }
  private static func icon(from spec: [String: Any]?) -> UIImage? {
    guard let spec = spec,
          let paths = spec["paths"] as? [String], !paths.isEmpty else { return nil }
    let viewBox = (spec["viewBox"] as? String) ?? "0 0 24 24"
    let strokeWidth = CGFloat((spec["strokeWidth"] as? Double) ?? 0)
    let renderSpec = IconRenderer.Spec(
      paths: paths,
      viewBox: viewBox,
      strokeWidth: strokeWidth,
      pointSize: 24
    )
    return IconRenderer.image(for: renderSpec)
  }
 }
@@ -1,27 +0,0 @@
 import UIKit
 /// Decodes the `preview` prop shipped from JS and constructs the right
 /// `UIViewController` for the peek. Day-one only handles `image`. Add cases
 /// here for `video` and `externalCard` follow-ups.
 enum PreviewFactory {
  static func makeController(from spec: [String: Any]?) -> UIViewController? {
    guard let spec = spec,
          let type = spec["type"] as? String else { return nil }
    switch type {
    case "image":
      let uri = spec["uri"] as? String
      let thumbUri = spec["thumbUri"] as? String
      let url = uri.flatMap(URL.init(string:))
      let thumbURL = thumbUri.flatMap(URL.init(string:))
      let aspect = CGFloat((spec["aspectRatio"] as? Double) ?? 1)
      return ImagePreviewController(
        imageURL: url,
        thumbURL: thumbURL,
        aspectRatio: aspect
      )
    default:
      return nil
    }
  }
 }
@@ -1,320 +0,0 @@
 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)
  }
 }
@@ -1,11 +0,0 @@
 import {View} from 'react-native'
 import {type NativeViewProps} from './types'
 /**
 * Android fallback: passthrough for now. Follow-up: wire the existing
 * `#/components/Menu` on long-press.
 */
 export default function NativeView({children, style}: NativeViewProps) {
  return <View style={style}>{children}</View>
 }
@@ -1,10 +0,0 @@
 import {type ComponentType} from 'react'
 import {requireNativeViewManager} from 'expo-modules-core'
 import {type NativeViewProps} from './types'
 const NativeView: ComponentType<NativeViewProps> = requireNativeViewManager(
  'ExpoBlueskyContextMenu',
 )
 export default NativeView
@@ -1,11 +0,0 @@
 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>
 }
@@ -1,17 +0,0 @@
 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')
@@ -1,22 +0,0 @@
 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')
@@ -1,17 +0,0 @@
 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')
@@ -1,16 +0,0 @@
 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')
@@ -1,119 +0,0 @@
 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,
  }
 }
@@ -1,26 +0,0 @@
 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')
@@ -1,32 +0,0 @@
 /**
 * 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 = '__ExpoBlueskyContextMenuKind__'
 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
 }
@@ -1,61 +0,0 @@
 import {type ReactNode} from 'react'
 import {type StyleProp, type ViewStyle} from 'react-native'
 import {type IconWithSvgMeta} from '#/components/icons/TEMPLATE'
 /**
 * Content to show during the peek preview. Discriminated by `type`; the native
 * side dispatches on it to build the right `UIViewController`.
 *
 * Only `image` is implemented on iOS today. `video` and `externalCard` are the
 * planned follow-ups; leaving them in the type keeps the JS call-sites honest.
 */
 export type PreviewContent =
  | {
      type: 'image'
      uri: string
      /** Thumb URL. When present, the native side paints it in as an instant
       *  placeholder (reading from the shared SDWebImage cache) while the
       *  fullsize loads — avoids the black flash on first peek. */
      thumbUri?: string
      /** Aspect ratio as width / height. */
      aspectRatio: number
    }
  | {
      type: 'video'
      uri: string
      poster?: string
      aspectRatio: number
    }
  | {
      type: 'externalCard'
      thumbUri?: string
      title: string
      description?: string
      url: string
    }
 export type MenuItemSpec = {
  id: string
  label: string
  destructive?: boolean
  disabled?: boolean
  icon?: {
    paths: string[]
    viewBox: string
    strokeWidth: number
  }
 }
 export type MenuItemIconSource = IconWithSvgMeta
 export type NativeViewProps = {
  preview?: PreviewContent
  menuItems: MenuItemSpec[]
  /** Named distinctly from `borderRadius`, which RN owns as a style prop. */
  previewCornerRadius: number
  onItemPress: (e: {nativeEvent: {id: string}}) => void
  onPreviewPress: (e: {nativeEvent: {}}) => void
  style?: StyleProp<ViewStyle>
  children?: ReactNode
 }
@@ -101,6 +101,7 @@
    "@bsky.app/expo-image-crop-tool": "^0.5.1",
    "@bsky.app/expo-scroll-edge-effect": "^0.1.4",
    "@bsky.app/expo-translate-text": "^0.2.9",
    "@bsky.app/peek-menu": "^0.2.0",
    "@bsky.app/react-native-mmkv": "2.12.5",
    "@bsky.app/sift": "^0.3.4",
    "@bsky.app/tapper": "^0.5.3",
@@ -0,0 +1 @@
 export * from '@bsky.app/peek-menu'
@@ -1,12 +0,0 @@
 export type {
  MenuItemSpec,
  PreviewContent,
 } from '../../../modules/expo-bluesky-context-menu'
 export {
  Menu,
  MenuItem,
  MenuItemIcon,
  MenuItemText,
  Root,
  Trigger,
 } from '../../../modules/expo-bluesky-context-menu'
@@ -1,54 +0,0 @@
 import {type ReactNode} from 'react'
 import {type StyleProp, View, type ViewStyle} from 'react-native'
 import {type IconWithSvgMeta} from '#/components/icons/TEMPLATE'
 import {type PreviewContent} from '../../../modules/expo-bluesky-context-menu'
 export type {
  MenuItemSpec,
  PreviewContent,
 } from '../../../modules/expo-bluesky-context-menu'
 export function Root({
  children,
  style,
 }: {
  children: ReactNode
  style?: StyleProp<ViewStyle>
 }) {
  return <View style={style}>{children}</View>
 }
 export function Trigger({
  children,
 }: {
  preview?: PreviewContent
  onPreviewPress?: () => void
  borderRadius?: number
  style?: StyleProp<ViewStyle>
  children: ReactNode
 }) {
  return <>{children}</>
 }
 export function Menu(_: {children: ReactNode}): null {
  return null
 }
 export function MenuItem(_: {
  id: string
  destructive?: boolean
  disabled?: boolean
  onSelect: () => void
  children: ReactNode
 }): null {
  return null
 }
 export function MenuItemIcon(_: {icon: IconWithSvgMeta}): null {
  return null
 }
 export function MenuItemText(_: {children: string}): null {
  return null
 }