@bsky.app/peek-menu 0.2.0

package/build/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import {type ReactNode} from 'react'\nimport {type StyleProp, type ViewStyle} from 'react-native'\n\n/**\n * The subset of SVG metadata needed by the native menu icon renderer.\n * Any icon component that carries these three properties can be passed\n * to `MenuItemIcon`. In practice this is satisfied by every icon\n * created with `createSinglePathSVG` / `createMultiPathSVG`.\n */\nexport type SvgIconMeta = {\n  svgPaths: string[]\n  svgViewBox: string\n  svgStrokeWidth: number\n}\n\n/**\n * Content to show during the peek preview. Discriminated by `type`; the native\n * side dispatches on it to build the right `UIViewController`.\n *\n * Only `image` is implemented on iOS today. `video` and `externalCard` are the\n * planned follow-ups; leaving them in the type keeps the JS call-sites honest.\n */\nexport type PreviewContent =\n  | {\n      type: 'image'\n      uri: string\n      /** Thumb URL. When present, the native side paints it in as an instant\n       *  placeholder (reading from the shared SDWebImage cache) while the\n       *  fullsize loads — avoids the black flash on first peek. */\n      thumbUri?: string\n      /** Aspect ratio as width / height. */\n      aspectRatio: number\n    }\n  | {\n      type: 'video'\n      uri: string\n      poster?: string\n      aspectRatio: number\n    }\n  | {\n      type: 'externalCard'\n      thumbUri?: string\n      title: string\n      description?: string\n      url: string\n    }\n\nexport type MenuItemSpec = {\n  id: string\n  label: string\n  destructive?: boolean\n  disabled?: boolean\n  icon?: {\n    paths: string[]\n    viewBox: string\n    strokeWidth: number\n  }\n}\n\nexport type MenuItemIconSource = SvgIconMeta\n\nexport type NativeViewProps = {\n  preview?: PreviewContent\n  menuItems: MenuItemSpec[]\n  /** Named distinctly from `borderRadius`, which RN owns as a style prop. */\n  previewCornerRadius: number\n  onItemPress: (e: {nativeEvent: {id: string}}) => void\n  onPreviewPress: (e: {nativeEvent: {}}) => void\n  style?: StyleProp<ViewStyle>\n  children?: ReactNode\n}\n"]}

package/expo-module.config.json

@@ -0,0 +1,6 @@
+{
+  "platforms": ["ios"],
+  "ios": {
+    "modules": ["ExpoBlueskyPeekMenuModule"]
+  }
+}

package/ios/ExpoBlueskyPeekMenu.podspec

@@ -0,0 +1,22 @@
+Pod::Spec.new do |s|
+  s.name           = 'ExpoBlueskyPeekMenu'
+  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/toolbox'
+  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

package/ios/ExpoBlueskyPeekMenuModule.swift

@@ -0,0 +1,24 @@
+import ExpoModulesCore
+
+public class ExpoBlueskyPeekMenuModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("ExpoBlueskyPeekMenu")
+
+    View(ExpoBlueskyPeekMenuView.self) {
+      Events(["onItemPress", "onPreviewPress"])
+
+      Prop("preview") { (view: ExpoBlueskyPeekMenuView, value: [String: Any]?) in
+        view.setPreview(value)
+      }
+
+      Prop("menuItems") { (view: ExpoBlueskyPeekMenuView, value: [[String: Any]]) in
+        view.setMenuItems(value)
+      }
+
+      Prop("previewCornerRadius") {
+        (view: ExpoBlueskyPeekMenuView, value: Double) in
+        view.setPreviewCornerRadius(value)
+      }
+    }
+  }
+}

package/ios/ExpoBlueskyPeekMenuView.swift

@@ -0,0 +1,111 @@
+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 ExpoBlueskyPeekMenuView: 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)
+  }
+}

package/ios/IconRenderer.swift

@@ -0,0 +1,69 @@
+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 = true
+          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])
+  }
+}

package/ios/ImagePreviewController.swift

@@ -0,0 +1,133 @@
+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) {
+      log("fullsize memory hit")
+      imageView.image = cached
+      return
+    }
+    log("fullsize memory miss")
+    // 2. Thumb placeholder — check memory first, fall back to disk.
+    //    Thumbs are small so the sync disk read is acceptable here.
+    if let thumb = thumbURL {
+      let (image, source) = cachedImageWithDisk(for: thumb)
+      if let image = image {
+        log("thumb hit (\(source))")
+        imageView.image = image
+      } else {
+        log("thumb miss")
+      }
+    }
+    // 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, _, _, cacheType, _, _ in
+      self?.log("async fullsize loaded, cacheType=\(cacheType.rawValue)")
+      guard let self = self, let image = image else { return }
+      DispatchQueue.main.async {
+        self.imageView.image = image
+      }
+    }
+  }
+
+  #if DEBUG
+  private func log(_ msg: String) {
+    print("[PeekMenu] \(msg)")
+  }
+  #else
+  @inline(__always) private func log(_ msg: String) {}
+  #endif
+
+  /// Memory-only cache lookup.
+  private func cachedImage(for url: URL) -> UIImage? {
+    let key = SDWebImageManager.shared.cacheKey(for: url) ?? url.absoluteString
+    return SDImageCache.shared.imageFromMemoryCache(forKey: key)
+  }
+
+  /// Memory + disk cache lookup. Only used for thumbnails where the file is
+  /// small enough that a synchronous disk read won't block the peek animation.
+  /// Returns the image and which cache layer it came from.
+  private func cachedImageWithDisk(for url: URL) -> (UIImage?, String) {
+    let key = SDWebImageManager.shared.cacheKey(for: url) ?? url.absoluteString
+    if let image = SDImageCache.shared.imageFromMemoryCache(forKey: key) {
+      return (image, "memory")
+    }
+    if let image = SDImageCache.shared.imageFromCache(forKey: key) {
+      return (image, "disk")
+    }
+    return (nil, "")
+  }
+
+  /// 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)
+  }
+}

package/ios/MenuBuilder.swift

@@ -0,0 +1,51 @@
+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)
+  }
+}

package/ios/PreviewFactory.swift

@@ -0,0 +1,27 @@
+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
+    }
+  }
+}