@bsky.app/peek-menu 0.2.3 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @bsky.app/peek-menu
 
+## 0.3.0
+
+### Minor Changes
+
+- [#49](https://github.com/bluesky-social/toolbox/pull/49) [`a824caa`](https://github.com/bluesky-social/toolbox/commit/a824caa72e03ef7c0bd5b1e40b848a5ac06e8b5e) Thanks [@mozzius](https://github.com/mozzius)! - Add `link` support
+
+## 0.2.4
+
+### Patch Changes
+
+- [`585597d`](https://github.com/bluesky-social/toolbox/commit/585597d1d9c14bee8b074e6fd7fed5ed1f277294) Thanks [@mozzius](https://github.com/mozzius)! - Enable provenance via env
+
 ## 0.2.3
 
 ### Patch Changes

package/README.md

@@ -1,6 +1,6 @@
 # @bsky.app/peek-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`.
+Native iOS context menu with peek preview. Long-pressing a wrapped view shows a `UIContextMenuInteraction` with a peek preview (a full-size image, or an external link card that can morph into an in-app browser) and an action menu. Android and web fall through to a passthrough `View`.
 
 ## Installation
 
@@ -42,9 +42,9 @@ import * as PeekMenu from '@bsky.app/peek-menu'
 
 **`Trigger`**
 
-- `preview?: PreviewContent` — what to show during peek. Only `image` is implemented; `video` and `externalCard` are typed but will fall back to no preview.
+- `preview?: PreviewContent` — what to show during peek. `image` and `link` are implemented; `video` is typed but will fall back to no preview. The `link` variant carries its own `useInAppBrowser` / `browserToolbarColor` / `browserControlsColor` options (see [Preview types](#preview-types) and [Link previews](#link-previews)).
 - `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).
+- `onPreviewPress?: () => void` — fires when the user taps the expanded preview to commit into it (i.e. open the lightbox). Not called for a `link` preview when its `useInAppBrowser` is `true` — the native browser morph handles that tap.
 
 **`MenuItem`**
 
@@ -77,9 +77,17 @@ Any icon component that carries these three properties (e.g. those created with
 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
+  | {
+      type: 'link'
+      url: string
+      useInAppBrowser?: boolean
+      browserToolbarColor?: string // hex, e.g. '#ffffff'
+      browserControlsColor?: string // hex, e.g. '#0085ff'
+    }
 ```
 
+A `link` peek always previews the **live page** in an `SFSafariViewController` — the `url` is loaded natively, along with the optional browser tints (matching expo-web-browser's `toolbarColor` / `controlsColor`). `useInAppBrowser` only changes what tapping the peek does (see below).
+
 ## Platform behavior
 
 | Platform | Behavior                                                            |
@@ -113,8 +121,19 @@ For best results, prefetch the fullsize image into memory on press-in so it's re
 
 This is the pattern used by social-app — `Image.prefetch(url, 'memory')` from expo-image writes into `SDImageCache.shared`, which the native preview controller reads from synchronously.
 
+### Link previews
+
+The peek is **always** a live `SFSafariViewController` already loading the page. The `useInAppBrowser` option only changes what tapping the peek does:
+
+- **`useInAppBrowser: true`** — the tap commits via `UIContextMenuInteractionCommitStyle.pop`, then presents that same Safari instance in the commit completion so it morphs seamlessly to full-screen — Apple's documented [peek-and-pop pattern](https://developer.apple.com/documentation/safariservices/sfsafariviewcontroller) for links. (`.pop` plays the animation but doesn't present the VC itself, so we present it, unanimated, once the morph has filled the screen.) Because the morph happens entirely natively, `onPreviewPress` is **not** fired in this mode.
+- **`useInAppBrowser: false` (or omitted)** — the tap just dismisses the peek and fires `onPreviewPress`, leaving navigation to the host app (e.g. `Linking.openURL`, or a consent dialog).
+
+This split lets the host honor a user "open links in app" preference: pass it straight through as `useInAppBrowser`, and let `onPreviewPress` cover the off/unset cases. Pre-proxy the `url` on the JS side if your app rewrites outbound links — the native side opens it verbatim.
+
+> **Note:** because the peek loads the page on long-press regardless of the tap behavior, it does fetch the URL even when `useInAppBrowser` is off. That's the same as a Safari/Messages link peek.
+
 ### Known limitations
 
 - **Carousel clipping**: When an image is inside a horizontal `FlatList`, the `UIScrollView`'s `clipsToBounds` clips the peek lift animation and its shadow.
 - **Android/web**: No native implementation yet. Falls through to a plain `View` wrapper.
-- **Video and external card previews**: Typed in `PreviewContent` but not implemented on the native side.
+- **Video previews**: Typed in `PreviewContent` but not implemented on the native side.

package/build/Trigger.d.ts

@@ -3,7 +3,9 @@ import { type StyleProp, type ViewStyle } from 'react-native';
 import { type PreviewContent } from './types';
 export type TriggerProps = {
     preview?: PreviewContent;
-    /** Fires when the user taps the expanded preview to "commit" into it. */
+    /** Fires when the user taps the expanded preview to "commit" into it.
+     *  Not called for a `link` preview when `useInAppBrowser` is true — the
+     *  native morph into the in-app browser handles that case. */
     onPreviewPress?: () => void;
     /** Border radius of the thumbnail being wrapped. Used natively to clip the
      *  targeted-preview lift animation. */

package/build/Trigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Trigger.d.ts","sourceRoot":"","sources":["../src/Trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AACpC,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAC,MAAM,cAAc,CAAA;AAG3D,OAAO,EAAC,KAAK,cAAc,EAAC,MAAM,SAAS,CAAA;AAE3C,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,yEAAyE;IACzE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B;2CACuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAUD,eAAO,MAAM,OAAO,oDAA8B,CAAA"}
+{"version":3,"file":"Trigger.d.ts","sourceRoot":"","sources":["../src/Trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AACpC,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAC,MAAM,cAAc,CAAA;AAG3D,OAAO,EAAC,KAAK,cAAc,EAAC,MAAM,SAAS,CAAA;AAE3C,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB;;kEAE8D;IAC9D,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B;2CACuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAUD,eAAO,MAAM,OAAO,oDAA8B,CAAA"}

package/build/Trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Trigger.js","sourceRoot":"","sources":["../src/Trigger.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,GAAG,EAAC,MAAM,YAAY,CAAA;AAc9B;;;GAGG;AACH,SAAS,WAAW,CAAC,CAAe;IAClC,OAAO,IAAI,CAAA;AACb,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA","sourcesContent":["import {type ReactNode} from 'react'\nimport {type StyleProp, type ViewStyle} from 'react-native'\n\nimport {tag} from './registry'\nimport {type PreviewContent} from './types'\n\nexport type TriggerProps = {\n  preview?: PreviewContent\n  /** Fires when the user taps the expanded preview to \"commit\" into it. */\n  onPreviewPress?: () => void\n  /** Border radius of the thumbnail being wrapped. Used natively to clip the\n   *  targeted-preview lift animation. */\n  borderRadius?: number\n  style?: StyleProp<ViewStyle>\n  children: ReactNode\n}\n\n/**\n * Sentinel: does not render. `Root` reads props + children off this element\n * and hosts `children` inside the native context-menu view.\n */\nfunction TriggerImpl(_: TriggerProps): null {\n  return null\n}\n\nexport const Trigger = tag(TriggerImpl, 'trigger')\n"]}
+{"version":3,"file":"Trigger.js","sourceRoot":"","sources":["../src/Trigger.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,GAAG,EAAC,MAAM,YAAY,CAAA;AAgB9B;;;GAGG;AACH,SAAS,WAAW,CAAC,CAAe;IAClC,OAAO,IAAI,CAAA;AACb,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA","sourcesContent":["import {type ReactNode} from 'react'\nimport {type StyleProp, type ViewStyle} from 'react-native'\n\nimport {tag} from './registry'\nimport {type PreviewContent} from './types'\n\nexport type TriggerProps = {\n  preview?: PreviewContent\n  /** Fires when the user taps the expanded preview to \"commit\" into it.\n   *  Not called for a `link` preview when `useInAppBrowser` is true — the\n   *  native morph into the in-app browser handles that case. */\n  onPreviewPress?: () => void\n  /** Border radius of the thumbnail being wrapped. Used natively to clip the\n   *  targeted-preview lift animation. */\n  borderRadius?: number\n  style?: StyleProp<ViewStyle>\n  children: ReactNode\n}\n\n/**\n * Sentinel: does not render. `Root` reads props + children off this element\n * and hosts `children` inside the native context-menu view.\n */\nfunction TriggerImpl(_: TriggerProps): null {\n  return null\n}\n\nexport const Trigger = tag(TriggerImpl, 'trigger')\n"]}

package/build/types.d.ts

@@ -15,8 +15,8 @@ export type SvgIconMeta = {
  * 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.
+ * `image` and `link` are implemented on iOS. `video` is the remaining
+ * follow-up; leaving it in the type keeps the JS call-sites honest.
  */
 export type PreviewContent = {
     type: 'image';
@@ -33,11 +33,19 @@ export type PreviewContent = {
     poster?: string;
     aspectRatio: number;
 } | {
-    type: 'externalCard';
-    thumbUri?: string;
-    title: string;
-    description?: string;
+    type: 'link';
     url: string;
+    /** Controls what tapping the peek does. When true, it morphs into the
+     *  live in-app browser at full-screen. When false/omitted, the peek
+     *  dismisses and `onPreviewPress` fires for the host to handle the tap.
+     *  Either way the peek preview shows the live page. */
+    useInAppBrowser?: boolean;
+    /** Toolbar tint for the in-app browser. Matches expo-web-browser's
+     *  `toolbarColor`. Hex string, e.g. `#ffffff`. */
+    browserToolbarColor?: string;
+    /** Controls tint for the in-app browser. Matches expo-web-browser's
+     *  `controlsColor`. Hex string, e.g. `#0085ff`. */
+    browserControlsColor?: string;
 };
 export type MenuItemSpec = {
     id: string;

package/build/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AACpC,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAC,MAAM,cAAc,CAAA;AAE3D;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,cAAc,EAAE,MAAM,CAAA;CACvB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,cAAc,GACtB;IACE,IAAI,EAAE,OAAO,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX;;iEAE6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,sCAAsC;IACtC,WAAW,EAAE,MAAM,CAAA;CACpB,GACD;IACE,IAAI,EAAE,OAAO,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;CACpB,GACD;IACE,IAAI,EAAE,cAAc,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAEL,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,EAAE,CAAA;QACf,OAAO,EAAE,MAAM,CAAA;QACf,WAAW,EAAE,MAAM,CAAA;KACpB,CAAA;CACF,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAA;AAE5C,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,SAAS,EAAE,YAAY,EAAE,CAAA;IACzB,2EAA2E;IAC3E,mBAAmB,EAAE,MAAM,CAAA;IAC3B,WAAW,EAAE,CAAC,CAAC,EAAE;QAAC,WAAW,EAAE;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC,CAAA;KAAC,KAAK,IAAI,CAAA;IACrD,cAAc,EAAE,CAAC,CAAC,EAAE;QAAC,WAAW,EAAE,EAAE,CAAA;KAAC,KAAK,IAAI,CAAA;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AACpC,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAC,MAAM,cAAc,CAAA;AAE3D;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,cAAc,EAAE,MAAM,CAAA;CACvB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,cAAc,GACtB;IACE,IAAI,EAAE,OAAO,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX;;iEAE6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,sCAAsC;IACtC,WAAW,EAAE,MAAM,CAAA;CACpB,GACD;IACE,IAAI,EAAE,OAAO,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;CACpB,GACD;IAIE,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;IACX;;;2DAGuD;IACvD,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;sDACkD;IAClD,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;uDACmD;IACnD,oBAAoB,CAAC,EAAE,MAAM,CAAA;CAC9B,CAAA;AAEL,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,EAAE,CAAA;QACf,OAAO,EAAE,MAAM,CAAA;QACf,WAAW,EAAE,MAAM,CAAA;KACpB,CAAA;CACF,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAA;AAE5C,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,SAAS,EAAE,YAAY,EAAE,CAAA;IACzB,2EAA2E;IAC3E,mBAAmB,EAAE,MAAM,CAAA;IAC3B,WAAW,EAAE,CAAC,CAAC,EAAE;QAAC,WAAW,EAAE;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC,CAAA;KAAC,KAAK,IAAI,CAAA;IACrD,cAAc,EAAE,CAAC,CAAC,EAAE;QAAC,WAAW,EAAE,EAAE,CAAA;KAAC,KAAK,IAAI,CAAA;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA"}

package/build/types.js.map

@@ -1 +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"]}
+{"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 * `image` and `link` are implemented on iOS. `video` is the remaining\n * follow-up; leaving it 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      // The peek is always a live in-app browser rendering `url`. No content is\n      // sent to native beyond the `url` and browser options — the page itself\n      // is what's previewed.\n      type: 'link'\n      url: string\n      /** Controls what tapping the peek does. When true, it morphs into the\n       *  live in-app browser at full-screen. When false/omitted, the peek\n       *  dismisses and `onPreviewPress` fires for the host to handle the tap.\n       *  Either way the peek preview shows the live page. */\n      useInAppBrowser?: boolean\n      /** Toolbar tint for the in-app browser. Matches expo-web-browser's\n       *  `toolbarColor`. Hex string, e.g. `#ffffff`. */\n      browserToolbarColor?: string\n      /** Controls tint for the in-app browser. Matches expo-web-browser's\n       *  `controlsColor`. Hex string, e.g. `#0085ff`. */\n      browserControlsColor?: 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/ios/ExpoBlueskyPeekMenuView.swift

@@ -1,4 +1,5 @@
 import ExpoModulesCore
+import SafariServices
 import UIKit
 
 /// Native view that hosts the children and attaches a
@@ -8,11 +9,26 @@ import UIKit
 /// - `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 {
+/// A `link` preview with `useInAppBrowser` peeks a live SFSafariViewController
+/// that morphs to full-screen on commit; `browserToolbarColor`/`browserControlsColor`
+/// (read from the preview spec) tint it (see `previewProvider`).
+class ExpoBlueskyPeekMenuView: ExpoView, UIContextMenuInteractionDelegate,
+  SFSafariViewControllerDelegate
+{
   private var preview: [String: Any]?
   private var menuItems: [[String: Any]] = []
   private var previewCornerRadius: CGFloat = 0
 
+  // The Safari VC returned from `previewProvider` for a `link` peek. UIKit owns
+  // its lifetime (preview container → presented on commit → released on
+  // cancel), so this is weak. Built for any valid `link` so the live page
+  // always peeks; whether we morph into it on commit is `shouldMorphToBrowser`.
+  private weak var liveSafariVC: SFSafariViewController?
+  // True when the `link` peek should morph into the in-app browser on commit.
+  // When false, the same Safari preview shows, but the tap just dismisses and
+  // forwards to JS via `onPreviewPress` (host's default open behavior).
+  private var shouldMorphToBrowser = false
+
   private let onItemPress = EventDispatcher()
   private let onPreviewPress = EventDispatcher()
 
@@ -58,7 +74,18 @@ class ExpoBlueskyPeekMenuView: ExpoView, UIContextMenuInteractionDelegate {
     return UIContextMenuConfiguration(
       identifier: nil,
       previewProvider: { [weak self] in
-        guard self != nil else { return nil }
+        guard let self = self else { return nil }
+        // A `link` always peeks the live page in an SFSafariViewController. On
+        // commit it either morphs into the browser or just dismisses + forwards
+        // to JS, per `shouldMorphToBrowser` (see `willPerformPreviewAction`).
+        if let safari = self.makeLiveSafariController(from: previewSpec) {
+          self.liveSafariVC = safari
+          self.shouldMorphToBrowser =
+            (previewSpec?["useInAppBrowser"] as? Bool) == true
+          return safari
+        }
+        // Otherwise: image controller, or nil → UIKit lifts the source view.
+        // The commit is forwarded to JS via `onPreviewPress`.
         return PreviewFactory.makeController(from: previewSpec)
       },
       actionProvider: { [weak self] _ in
@@ -70,6 +97,57 @@ class ExpoBlueskyPeekMenuView: ExpoView, UIContextMenuInteractionDelegate {
     )
   }
 
+  /// Builds the live Safari preview for a `link` with a web (http/https) URL.
+  /// Returns nil for every other case so the caller falls through to
+  /// `PreviewFactory`. Whether the commit morphs into this browser is decided
+  /// separately by `shouldMorphToBrowser`.
+  private func makeLiveSafariController(
+    from spec: [String: Any]?
+  ) -> SFSafariViewController? {
+    guard let spec = spec,
+          spec["type"] as? String == "link",
+          let urlString = spec["url"] as? String,
+          let url = URL(string: urlString),
+          let scheme = url.scheme?.lowercased(),
+          scheme == "http" || scheme == "https"
+    else { return nil }
+
+    let config = SFSafariViewController.Configuration()
+    let safari = SFSafariViewController(url: url, configuration: config)
+    safari.delegate = self
+    // SFSafariViewController's own view is transparent until the page paints,
+    // so the peek bubble flashes through to whatever is behind it. A dark-mode
+    // aware background fills that gap.
+    safari.view.backgroundColor = .systemBackground
+    // Tints must be set before presentation; ignored once presented.
+    if let toolbar = color(from: spec["browserToolbarColor"]) {
+      safari.preferredBarTintColor = toolbar
+    }
+    if let controls = color(from: spec["browserControlsColor"]) {
+      safari.preferredControlTintColor = controls
+    }
+    return safari
+  }
+
+  /// Parses a `#rgb`/`#rrggbb`/`#rrggbbaa` hex string into a UIColor. Colors
+  /// arrive as raw strings here (they're nested in the `preview` dict rather
+  /// than a top-level `Prop`, so ExpoModulesCore doesn't coerce them).
+  private func color(from value: Any?) -> UIColor? {
+    guard var hex = value as? String else { return nil }
+    if hex.hasPrefix("#") { hex.removeFirst() }
+    if hex.count == 3 {  // expand shorthand #rgb → #rrggbb
+      hex = hex.map { "\($0)\($0)" }.joined()
+    }
+    guard hex.count == 6 || hex.count == 8,
+          let int = UInt64(hex, radix: 16) else { return nil }
+    let hasAlpha = hex.count == 8
+    let r = CGFloat((int >> (hasAlpha ? 24 : 16)) & 0xff) / 255
+    let g = CGFloat((int >> (hasAlpha ? 16 : 8)) & 0xff) / 255
+    let b = CGFloat((int >> (hasAlpha ? 8 : 0)) & 0xff) / 255
+    let a = hasAlpha ? CGFloat(int & 0xff) / 255 : 1
+    return UIColor(red: r, green: g, blue: b, alpha: a)
+  }
+
   func contextMenuInteraction(
     _ interaction: UIContextMenuInteraction,
     previewForHighlightingMenuWithConfiguration configuration: UIContextMenuConfiguration
@@ -89,9 +167,59 @@ class ExpoBlueskyPeekMenuView: ExpoView, UIContextMenuInteractionDelegate {
     willPerformPreviewActionForMenuWith configuration: UIContextMenuConfiguration,
     animator: UIContextMenuInteractionCommitAnimating
   ) {
+    // A live Safari peek with the in-app browser enabled morphs into the
+    // browser: `.pop` plays the morph animation, but UIKit does NOT present the
+    // preview VC for us — it tears the preview container down at completion. So
+    // we present the same (now-detached) Safari instance in the completion. The
+    // morph has already filled the screen, so present without animation to snap
+    // it in seamlessly rather than slide twice.
+    if let safari = liveSafariVC, shouldMorphToBrowser {
+      animator.preferredCommitStyle = .pop
+      animator.addCompletion { [weak self] in
+        self?.topmostViewController()?.present(safari, animated: false)
+      }
+      return
+    }
+    // Otherwise (image preview, lifted source view, or a `link` peek with the
+    // in-app browser disabled): just dismiss and let JS handle the tap.
     self.onPreviewPress([:])
   }
 
+  /// Walks from the key window's root to the topmost presented controller —
+  /// the one we can safely present Safari from. Mirrors expo-web-browser.
+  private func topmostViewController() -> UIViewController? {
+    let scene = UIApplication.shared.connectedScenes
+      .compactMap { $0 as? UIWindowScene }
+      .first { $0.activationState == .foregroundActive }
+      ?? UIApplication.shared.connectedScenes
+        .compactMap { $0 as? UIWindowScene }.first
+    let keyWindow = scene?.windows.first { $0.isKeyWindow } ?? scene?.windows.first
+    var top = keyWindow?.rootViewController
+    while let presented = top?.presentedViewController {
+      top = presented
+    }
+    return top
+  }
+
+  func contextMenuInteraction(
+    _ interaction: UIContextMenuInteraction,
+    willEndFor configuration: UIContextMenuConfiguration,
+    animator: UIContextMenuInteractionAnimating?
+  ) {
+    // The menu is ending (dismissed or committed). Drop our weak reference; on
+    // commit the `addCompletion` closure retains the Safari instance until it's
+    // presented, after which UIKit owns it.
+    self.liveSafariVC = nil
+    self.shouldMorphToBrowser = false
+  }
+
+  // MARK: - SFSafariViewControllerDelegate
+
+  func safariViewControllerDidFinish(_ controller: SFSafariViewController) {
+    // Safari dismisses itself; nothing to forward to JS.
+    self.liveSafariVC = nil
+  }
+
   // MARK: - Targeted preview
 
   /// The targeted preview uses the view itself as target with a rounded-corner

package/ios/PreviewFactory.swift

@@ -1,8 +1,10 @@
 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.
+/// `UIViewController` for the peek. Only `image` builds a custom controller (it
+/// swaps the thumbnail for the cached fullsize). For `link`, returning nil lets
+/// UIKit lift the RN-rendered view as-is; the live-Safari `link` morph is built
+/// in the view itself, before this is reached. `video` is still a follow-up.
 enum PreviewFactory {
   static func makeController(from spec: [String: Any]?) -> UIViewController? {
     guard let spec = spec,
@@ -21,6 +23,7 @@ enum PreviewFactory {
         aspectRatio: aspect
       )
     default:
+      // nil → UIKit uses the source view itself as the peek preview.
       return nil
     }
   }

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@bsky.app/peek-menu",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "license": "MIT",
   "description": "Native iOS context menu with peek preview for images.",
-  "repository": "https://github.com/bluesky-social/toolbox",
+  "repository": {
+    "type": "git",
+    "url": "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",

package/src/Trigger.tsx

@@ -6,7 +6,9 @@ import {type PreviewContent} from './types'
 
 export type TriggerProps = {
   preview?: PreviewContent
-  /** Fires when the user taps the expanded preview to "commit" into it. */
+  /** Fires when the user taps the expanded preview to "commit" into it.
+   *  Not called for a `link` preview when `useInAppBrowser` is true — the
+   *  native morph into the in-app browser handles that case. */
   onPreviewPress?: () => void
   /** Border radius of the thumbnail being wrapped. Used natively to clip the
    *  targeted-preview lift animation. */

package/src/types.ts

@@ -17,8 +17,8 @@ export type SvgIconMeta = {
  * 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.
+ * `image` and `link` are implemented on iOS. `video` is the remaining
+ * follow-up; leaving it in the type keeps the JS call-sites honest.
  */
 export type PreviewContent =
   | {
@@ -38,11 +38,22 @@ export type PreviewContent =
       aspectRatio: number
     }
   | {
-      type: 'externalCard'
-      thumbUri?: string
-      title: string
-      description?: string
+      // The peek is always a live in-app browser rendering `url`. No content is
+      // sent to native beyond the `url` and browser options — the page itself
+      // is what's previewed.
+      type: 'link'
       url: string
+      /** Controls what tapping the peek does. When true, it morphs into the
+       *  live in-app browser at full-screen. When false/omitted, the peek
+       *  dismisses and `onPreviewPress` fires for the host to handle the tap.
+       *  Either way the peek preview shows the live page. */
+      useInAppBrowser?: boolean
+      /** Toolbar tint for the in-app browser. Matches expo-web-browser's
+       *  `toolbarColor`. Hex string, e.g. `#ffffff`. */
+      browserToolbarColor?: string
+      /** Controls tint for the in-app browser. Matches expo-web-browser's
+       *  `controlsColor`. Hex string, e.g. `#0085ff`. */
+      browserControlsColor?: string
     }
 
 export type MenuItemSpec = {