diff --git a/src/utils/addImage.ts b/src/utils/addImage.ts
index 84224035..2352b70f 100644
--- a/src/utils/addImage.ts
+++ b/src/utils/addImage.ts
@@ -16,13 +16,31 @@ export async function addImage(
 ) {
   let client = supabaseBrowserClient();
   let cache = await caches.open("minilink-user-assets");
-  let fileID = v7();
+  let isAnimated = isAnimatedFormat(file.type);
+  let fileID = v7() + (isAnimated ? "." + file.name.split(".").pop() : "");
   let url = client.storage.from("minilink-user-assets").getPublicUrl(fileID)
     .data.publicUrl;
-  // Re-encode through canvas to bake EXIF orientation into pixel data.
-  // iPhone photos have EXIF rotation metadata that browsers respect, but
-  // Supabase's image transformation pipeline strips without applying.
-  let { blob: uploadBlob, width, height } = await normalizeOrientation(file);
+
+  let uploadBlob: Blob;
+  let width: number;
+  let height: number;
+  if (isAnimated) {
+    // Skip re-encoding for animated formats (GIF, APNG, animated WebP)
+    // to preserve animation frames
+    uploadBlob = file;
+    let bitmap = await createImageBitmap(file);
+    width = bitmap.width;
+    height = bitmap.height;
+    bitmap.close();
+  } else {
+    // Re-encode through canvas to bake EXIF orientation into pixel data.
+    // iPhone photos have EXIF rotation metadata that browsers respect, but
+    // Supabase's image transformation pipeline strips without applying.
+    let normalized = await normalizeOrientation(file);
+    uploadBlob = normalized.blob;
+    width = normalized.width;
+    height = normalized.height;
+  }
 
   await cache.put(
     new URL(url + "?local"),
@@ -99,6 +117,10 @@ async function getThumbHash(file: File) {
   return thumbHash;
 }
 
+function isAnimatedFormat(mimeType: string): boolean {
+  return mimeType === "image/gif" || mimeType === "image/apng";
+}
+
 async function normalizeOrientation(
   file: File,
 ): Promise<{ blob: Blob; width: number; height: number }> {
-- 
2.51.2


From aebe479d27fc6649242f392de9266ae80d4c54d9 Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Wed, 8 Apr 2026 14:18:36 -0400
Subject: [PATCH 02/13] some tweaks to sidenotes

---
 app/globals.css                               |  5 +-
 .../Footnotes/FootnoteSideColumnLayout.tsx    | 64 +++++++++++++------
 2 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index de5e0ecd..80de871f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -620,6 +620,9 @@ pre.shiki {
 .footnote-side-item:hover,
 .footnote-side-item:focus-within,
 .footnote-side-item.footnote-side-focused {
-  max-height: 40em;
+  max-height: none;
+  overflow: visible;
   opacity: var(--bg-page-alpha);
+  z-index: 1;
+  background: rgba(var(--bg-page), 1);
 }
diff --git a/components/Footnotes/FootnoteSideColumnLayout.tsx b/components/Footnotes/FootnoteSideColumnLayout.tsx
index ae9007ba..71411589 100644
--- a/components/Footnotes/FootnoteSideColumnLayout.tsx
+++ b/components/Footnotes/FootnoteSideColumnLayout.tsx
@@ -20,7 +20,6 @@ export function FootnoteSideColumnLayout<T extends FootnoteSideItem>(props: {
   let containerRef = useRef<HTMLDivElement>(null);
   let innerRef = useRef<HTMLDivElement>(null);
   let [positions, setPositions] = useState<(T & { top: number })[]>([]);
-  let [scrollOffset, setScrollOffset] = useState(0);
 
   let calculatePositions = useCallback(() => {
     let container = containerRef.current;
@@ -36,7 +35,9 @@ export function FootnoteSideColumnLayout<T extends FootnoteSideItem>(props: {
 
     let scrollTop = scrollWrapper.scrollTop;
     let scrollWrapperRect = scrollWrapper.getBoundingClientRect();
-    setScrollOffset(scrollTop);
+
+    // Sync scroll transform directly on the DOM (no React re-render)
+    inner.style.transform = `translateY(-${scrollTop}px)`;
 
     let measurements: (T & { anchorTop: number; height: number })[] = [];
 
@@ -79,24 +80,60 @@ export function FootnoteSideColumnLayout<T extends FootnoteSideItem>(props: {
       ?.querySelector(".pageScrollWrapper") as HTMLElement | null;
     if (!scrollWrapper) return;
 
+    // On scroll, update the transform directly without React re-render
     let onScroll = () => {
-      setScrollOffset(scrollWrapper!.scrollTop);
+      let inner = innerRef.current;
+      if (inner) {
+        inner.style.transform = `translateY(-${scrollWrapper!.scrollTop}px)`;
+      }
     };
 
-    scrollWrapper.addEventListener("scroll", onScroll);
+    scrollWrapper.addEventListener("scroll", onScroll, { passive: true });
+
+    // Forward wheel events from the side column to the scroll wrapper
+    let container = containerRef.current!;
+    let onWheel = (e: WheelEvent) => {
+      scrollWrapper!.scrollTop += e.deltaY;
+    };
+    container.addEventListener("wheel", onWheel, { passive: true });
 
     let resizeObserver = new ResizeObserver(calculatePositions);
     resizeObserver.observe(scrollWrapper);
 
-    let mutationObserver = new MutationObserver(calculatePositions);
+    // Observe all side items so positions recalculate when their heights change
+    let observeSideItems = () => {
+      let inner = innerRef.current;
+      if (!inner) return;
+      for (let el of inner.querySelectorAll("[data-footnote-side-id]")) {
+        resizeObserver.observe(el);
+      }
+    };
+    observeSideItems();
+
+    let mutationObserver = new MutationObserver(() => {
+      calculatePositions();
+      // Re-observe in case new items were added
+      observeSideItems();
+    });
     mutationObserver.observe(scrollWrapper, {
       childList: true,
       subtree: true,
       characterData: true,
     });
 
+    // Also observe the inner container so we recalculate when side items
+    // are added/removed (they're siblings of scrollWrapper, not children)
+    let innerEl = innerRef.current;
+    if (innerEl) {
+      mutationObserver.observe(innerEl, {
+        childList: true,
+        subtree: true,
+      });
+    }
+
     return () => {
       scrollWrapper!.removeEventListener("scroll", onScroll);
+      container.removeEventListener("wheel", onWheel);
       resizeObserver.disconnect();
       mutationObserver.disconnect();
     };
@@ -107,7 +144,7 @@ export function FootnoteSideColumnLayout<T extends FootnoteSideItem>(props: {
   return (
     <div
       ref={containerRef}
-      className={`footnote-side-column hidden lg:block absolute top-0 w-[200px] pointer-events-none ${
+      className={`footnote-side-column hidden lg:block absolute top-0 w-[200px] ${
         props.fullPageScroll
           ? "left-[calc(50%+var(--page-width-units)/2+12px)]"
           : "left-full ml-3"
@@ -116,11 +153,10 @@ export function FootnoteSideColumnLayout<T extends FootnoteSideItem>(props: {
     >
       <div
         ref={innerRef}
-        className="relative pointer-events-auto"
-        style={{ transform: `translateY(-${scrollOffset}px)` }}
+        className="relative"
       >
         {positions.map((item) => (
-          <SideItem key={item.id} id={item.id} top={item.top} onResize={calculatePositions}>
+          <SideItem key={item.id} id={item.id} top={item.top}>
             {props.renderItem(item)}
           </SideItem>
         ))}
@@ -133,7 +169,6 @@ function SideItem(props: {
   children: ReactNode;
   id: string;
   top: number;
-  onResize: () => void;
 }) {
   let ref = useRef<HTMLDivElement>(null);
   let [overflows, setOverflows] = useState(false);
@@ -150,20 +185,13 @@ function SideItem(props: {
     let check = () => setOverflows(el!.scrollHeight > el!.clientHeight + 1);
     check();
 
-    let ro = new ResizeObserver(() => {
-      check();
-      props.onResize();
-    });
-    ro.observe(el);
-
     let mo = new MutationObserver(check);
     mo.observe(el, { childList: true, subtree: true, characterData: true });
 
     return () => {
-      ro.disconnect();
       mo.disconnect();
     };
-  }, [props.onResize]);
+  }, []);
 
   return (
     <div
-- 
2.51.2


From 0d9d621cae7ecb798d7f368ffd6a9415233a40aa Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Wed, 8 Apr 2026 14:26:32 -0400
Subject: [PATCH 03/13] fix positions of sidenotes + bump width

---
 components/Footnotes/FootnoteSection.tsx          | 2 +-
 components/Footnotes/FootnoteSideColumnLayout.tsx | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/Footnotes/FootnoteSection.tsx b/components/Footnotes/FootnoteSection.tsx
index b230d150..ee11f088 100644
--- a/components/Footnotes/FootnoteSection.tsx
+++ b/components/Footnotes/FootnoteSection.tsx
@@ -13,7 +13,7 @@ export function FootnoteSection(props: { hiddenOnDesktop?: boolean }) {
   if (footnotes.length === 0) return null;
 
   return (
-    <FootnoteSectionLayout className={props.hiddenOnDesktop ? "lg:hidden" : ""}>
+    <FootnoteSectionLayout className={props.hiddenOnDesktop ? "xl:hidden" : ""}>
       {footnotes.map((fn) => (
         <FootnoteEditor
           key={fn.footnoteEntityID}
diff --git a/components/Footnotes/FootnoteSideColumnLayout.tsx b/components/Footnotes/FootnoteSideColumnLayout.tsx
index 71411589..2d729651 100644
--- a/components/Footnotes/FootnoteSideColumnLayout.tsx
+++ b/components/Footnotes/FootnoteSideColumnLayout.tsx
@@ -34,7 +34,7 @@ export function FootnoteSideColumnLayout<T extends FootnoteSideItem>(props: {
     if (!scrollWrapper) return;
 
     let scrollTop = scrollWrapper.scrollTop;
-    let scrollWrapperRect = scrollWrapper.getBoundingClientRect();
+    let containerRect = container.getBoundingClientRect();
 
     // Sync scroll transform directly on the DOM (no React re-render)
     inner.style.transform = `translateY(-${scrollTop}px)`;
@@ -48,7 +48,9 @@ export function FootnoteSideColumnLayout<T extends FootnoteSideItem>(props: {
       if (!supEl) continue;
 
       let supRect = supEl.getBoundingClientRect();
-      let anchorTop = supRect.top - scrollWrapperRect.top + scrollTop;
+      // Position relative to the side column container (which is absolute top-0 in pageWrapper),
+      // offset by the item's padding so the text visually aligns with the anchor
+      let anchorTop = supRect.top - containerRect.top + scrollTop - 4;
 
       let itemEl = inner.querySelector(
         `[data-footnote-side-id="${item.id}"]`,
@@ -144,7 +146,7 @@ export function FootnoteSideColumnLayout<T extends FootnoteSideItem>(props: {
   return (
     <div
       ref={containerRef}
-      className={`footnote-side-column hidden lg:block absolute top-0 w-[200px] ${
+      className={`footnote-side-column hidden lg:block absolute top-0 w-[250px] ${
         props.fullPageScroll
           ? "left-[calc(50%+var(--page-width-units)/2+12px)]"
           : "left-full ml-3"
-- 
2.51.2


From 54b2963683f884982e17b80cfd2afde20f0e7165 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Tue, 7 Apr 2026 16:40:33 -0400
Subject: [PATCH 04/13] minor adjustments to postHeaders for consistency in
 draft and published view

---
 .../[publication]/[rkey]/PostHeader/PostHeader.tsx   |  2 +-
 .../[publication]/dashboard/PublishedPostsLists.tsx  | 12 +++++-------
 components/Pages/PublicationMetadata.tsx             |  2 +-
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx b/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
index 8b057e2b..9f6b1d41 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
@@ -129,7 +129,7 @@ export const PostHeaderLayout = (props: {
         </h2>
       )}
       {props.postDescription ? (
-        <div className="postDescription italic text-secondary outline-hidden bg-transparent pt-1">
+        <div className="postDescription italic text-secondary outline-hidden bg-transparent pt-2">
           {props.postDescription}
         </div>
       ) : null}
diff --git a/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx b/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
index 1de03e91..95583a32 100644
--- a/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx
@@ -9,7 +9,10 @@ import {
 } from "./PublicationSWRProvider";
 import { Fragment } from "react";
 import { useParams } from "next/navigation";
-import { getPublicationURL, getDocumentURL } from "app/lish/createPub/getPublicationURL";
+import {
+  getPublicationURL,
+  getDocumentURL,
+} from "app/lish/createPub/getPublicationURL";
 import { SpeedyLink } from "components/SpeedyLink";
 import { InteractionPreview } from "components/InteractionsPreview";
 import { useLocalizedDate } from "src/hooks/useLocalizedDate";
@@ -23,7 +26,6 @@ export function PublishedPostsList(props: {
   let { data } = usePublicationData();
   let { publication, documents } = data || {};
   const pubRecord = useNormalizedPublicationRecord();
-
   if (!publication) return null;
   if (!documents || documents.length === 0)
     return (
@@ -85,11 +87,7 @@ function PublishedPostItem(props: {
           }}
         >
           <div className="flex justify-between gap-2">
-            <a
-              className="hover:no-underline!"
-              target="_blank"
-              href={docUrl}
-            >
+            <a className="hover:no-underline!" target="_blank" href={docUrl}>
               <h3 className="text-primary grow leading-snug">
                 {doc.record.title}
               </h3>
diff --git a/components/Pages/PublicationMetadata.tsx b/components/Pages/PublicationMetadata.tsx
index 27d2e4cc..9f7e188d 100644
--- a/components/Pages/PublicationMetadata.tsx
+++ b/components/Pages/PublicationMetadata.tsx
@@ -95,7 +95,7 @@ export const PublicationMetadata = (props: { noInteractions?: boolean }) => {
       postDescription={
         <TextField
           placeholder="add an optional description..."
-          className="pt-1 italic text-secondary outline-hidden bg-transparent"
+          className=""
           value={description}
           onChange={async (newDescription) => {
             await rep?.mutate.updatePublicationDraft({
-- 
2.51.2


From d42c684a39f9a479a807d8b107ca1e1f911cecf1 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Wed, 8 Apr 2026 16:25:02 -0400
Subject: [PATCH 05/13] add toggle group component

---
 components/ToggleGroup.tsx | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 components/ToggleGroup.tsx

diff --git a/components/ToggleGroup.tsx b/components/ToggleGroup.tsx
new file mode 100644
index 00000000..ebf786ae
--- /dev/null
+++ b/components/ToggleGroup.tsx
@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+
+export function ToggleGroup<T extends string>(props: {
+  value: T;
+  onChange: (value: T) => void;
+  options: { value: T; label: ReactNode }[];
+  className?: string;
+  optionClassName?: string;
+}) {
+  return (
+    <div
+      className={`flex gap-1 p-1 bg-accent-1 rounded-lg text-sm ${props.className || ""}`}
+    >
+      {props.options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          className={`px-1 rounded-md ${
+            props.value === option.value
+              ? "bg-accent-2 font-bold text-accent-1"
+              : "bg-transparent text-accent-2"
+          }
+          ${props.optionClassName}
+            `}
+          onClick={() => props.onChange(option.value)}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}
-- 
2.51.2


From daa0c057627165942e87b10ef76126d5592d73eb Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Thu, 9 Apr 2026 22:55:01 -0400
Subject: [PATCH 06/13] add bluesky video embed playback

---
 .../Blocks/BlueskyPostBlock/BlueskyEmbed.tsx  |  24 ++--
 .../BlueskyPostBlock/BlueskyVideoPlayer.tsx   | 122 ++++++++++++++++++
 package-lock.json                             |   7 +
 package.json                                  |   1 +
 4 files changed, 138 insertions(+), 16 deletions(-)
 create mode 100644 components/Blocks/BlueskyPostBlock/BlueskyVideoPlayer.tsx

diff --git a/components/Blocks/BlueskyPostBlock/BlueskyEmbed.tsx b/components/Blocks/BlueskyPostBlock/BlueskyEmbed.tsx
index a55c8092..e9bc72f8 100644
--- a/components/Blocks/BlueskyPostBlock/BlueskyEmbed.tsx
+++ b/components/Blocks/BlueskyPostBlock/BlueskyEmbed.tsx
@@ -15,6 +15,7 @@ import {
   OpenPage,
   openPage,
 } from "app/lish/[did]/[publication]/[rkey]/PostPages";
+import { BlueskyVideoPlayer } from "./BlueskyVideoPlayer";
 
 export const BlueskyEmbed = (props: {
   embed: Exclude<AppBskyFeedDefs.PostView["embed"], undefined>;
@@ -131,22 +132,13 @@ export const BlueskyEmbed = (props: {
         ? videoEmbed.aspectRatio.width / videoEmbed.aspectRatio.height
         : 16 / 9;
       return (
-        <div
-          className={`videoEmbed rounded-md overflow-hidden relative w-full ${props.className}`}
-          style={{ aspectRatio: String(videoAspectRatio) }}
-        >
-          <img
-            src={videoEmbed.thumbnail}
-            alt={
-              "Thumbnail from embedded video. Go to Bluesky to see the full post."
-            }
-            className="absolute inset-0 w-full h-full object-cover"
-          />
-          <div className="overlay absolute inset-0 bg-primary opacity-65" />
-          <div className="absolute w-max top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-border-light rounded-md">
-            <SeePostOnBluesky postUrl={props.postUrl} />
-          </div>
-        </div>
+        <BlueskyVideoPlayer
+          playlist={videoEmbed.playlist}
+          thumbnail={videoEmbed.thumbnail}
+          alt={videoEmbed.alt}
+          aspectRatio={videoAspectRatio}
+          className={props.className}
+        />
       );
     case AppBskyEmbedRecord.isView(props.embed):
       let recordEmbed = props.embed;
diff --git a/components/Blocks/BlueskyPostBlock/BlueskyVideoPlayer.tsx b/components/Blocks/BlueskyPostBlock/BlueskyVideoPlayer.tsx
new file mode 100644
index 00000000..fd22bb4d
--- /dev/null
+++ b/components/Blocks/BlueskyPostBlock/BlueskyVideoPlayer.tsx
@@ -0,0 +1,122 @@
+import { useEffect, useRef, useState } from "react";
+
+type Props = {
+  playlist: string;
+  thumbnail?: string;
+  alt?: string;
+  aspectRatio: number;
+  className?: string;
+};
+
+export const BlueskyVideoPlayer = (props: Props) => {
+  const [playing, setPlaying] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const hlsRef = useRef<{ destroy: () => void } | null>(null);
+
+  useEffect(() => {
+    if (!playing) return;
+    const video = videoRef.current;
+    if (!video) return;
+
+    let cancelled = false;
+
+    // Safari (and some iOS browsers) support HLS natively.
+    if (video.canPlayType("application/vnd.apple.mpegurl")) {
+      video.src = props.playlist;
+      video.play().catch(() => {});
+      return () => {
+        cancelled = true;
+        video.removeAttribute("src");
+        video.load();
+      };
+    }
+
+    setLoading(true);
+    import("hls.js")
+      .then(({ default: Hls }) => {
+        if (cancelled) return;
+        if (!Hls.isSupported()) {
+          // Last-resort fallback: try the native element anyway.
+          video.src = props.playlist;
+          video.play().catch(() => {});
+          setLoading(false);
+          return;
+        }
+        const hls = new Hls();
+        hlsRef.current = hls;
+        hls.loadSource(props.playlist);
+        hls.attachMedia(video);
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          if (cancelled) return;
+          setLoading(false);
+          video.play().catch(() => {});
+        });
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+        hlsRef.current = null;
+      }
+    };
+  }, [playing, props.playlist]);
+
+  return (
+    <div
+      className={`videoEmbed rounded-md overflow-hidden relative w-full ${props.className || ""}`}
+      style={{ aspectRatio: String(props.aspectRatio) }}
+    >
+      {!playing && props.thumbnail && (
+        <img
+          src={props.thumbnail}
+          alt={props.alt || "Video thumbnail"}
+          className="absolute inset-0 w-full h-full object-cover"
+        />
+      )}
+      {playing && (
+        <video
+          ref={videoRef}
+          className="absolute inset-0 w-full h-full object-cover bg-black"
+          controls
+          playsInline
+          poster={props.thumbnail}
+        />
+      )}
+      {!playing && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setPlaying(true);
+          }}
+          aria-label="Play video"
+          className="absolute inset-0 flex items-center justify-center group"
+        >
+          <div className="absolute inset-0 bg-primary opacity-40 group-hover:opacity-30 transition-opacity" />
+          <div className="relative flex items-center justify-center w-14 h-14 rounded-full bg-bg-page/90 group-hover:bg-bg-page transition-colors">
+            <svg
+              viewBox="0 0 24 24"
+              className="w-6 h-6 ml-1"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path d="M8 5v14l11-7z" />
+            </svg>
+          </div>
+        </button>
+      )}
+      {loading && (
+        <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+          <div className="text-white text-xs italic">Loading…</div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/package-lock.json b/package-lock.json
index 04c59703..398787ca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,6 +46,7 @@
         "drizzle-orm": "^0.30.10",
         "feed": "^5.1.0",
         "fractional-indexing": "^3.2.0",
+        "hls.js": "^1.6.15",
         "hono": "^4.7.11",
         "immer": "^10.2.0",
         "inngest": "^3.52.6",
@@ -13359,6 +13360,12 @@
         "hermes-estree": "0.25.1"
       }
     },
+    "node_modules/hls.js": {
+      "version": "1.6.15",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.15.tgz",
+      "integrity": "sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/hono": {
       "version": "4.7.11",
       "resolved": "https://registry.npmjs.org/hono/-/hono-4.7.11.tgz",
diff --git a/package.json b/package.json
index 45aa58f0..80f5c350 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "drizzle-orm": "^0.30.10",
     "feed": "^5.1.0",
     "fractional-indexing": "^3.2.0",
+    "hls.js": "^1.6.15",
     "hono": "^4.7.11",
     "immer": "^10.2.0",
     "inngest": "^3.52.6",
-- 
2.51.2


From 6c7d5c1e3e38e05698d84c7c61eb59f26ddb290c Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Thu, 9 Apr 2026 22:57:23 -0400
Subject: [PATCH 07/13] Feature/mention services (#283)

* wip

* some fixes

* get basic mentions working

* proxy mention service requests through pds

* add embed to mention services and fix some behavior

* wip change lexicon name and some other stuff i forget

* update parts.page lexicons

* fix opening at mentions

* more scoping stuff

* render labels and descriptions

* support aspect ratio for embeds

* handle aspect ratios for mention embeds

* support iframe pages and basic iframe channel

* WIP capn web

* wip

* remove some logging

* add colors and lexicon for embed ctx
---
 actions/publishToPublication.ts               |  10 +
 app/(home-pages)/reader/idResolver.ts         |   2 +-
 app/[leaflet_id]/page.tsx                     |   1 +
 .../publish/BskyPostEditorProsemirror.tsx     |  16 +-
 app/api/oauth/[route]/oauth-metadata.ts       |   2 +-
 app/api/oauth/[route]/route.ts                |   2 +-
 .../[command]/get_user_mention_services.ts    |  92 +++
 app/api/rpc/[command]/proxy_mention_search.ts |  99 +++
 app/api/rpc/[command]/route.ts                |   4 +
 app/api/rpc/[command]/search_loose_leafs.ts   |  43 ++
 .../[rkey]/Blocks/TextBlockCore.tsx           |   1 +
 .../[publication]/[rkey]/PostContent.tsx      |  57 +-
 .../[did]/[publication]/[rkey]/PostPages.tsx  |  35 +-
 .../[publication]/[rkey]/postPageState.ts     |   4 +-
 appview/index.ts                              |   7 +-
 components/AtMentionLink.tsx                  |  47 +-
 components/Blocks/EmbedBlock.tsx              | 150 +++-
 .../Blocks/TextBlock/RenderYJSFragment.tsx    |   4 +-
 components/Blocks/TextBlock/index.tsx         |  99 ++-
 .../Blocks/TextBlock/mountProsemirror.ts      |   8 +-
 components/Blocks/TextBlock/schema.ts         |  56 +-
 components/Mention.tsx                        | 713 +++++++++++++++---
 components/Pages/IframePageView.tsx           |  58 ++
 components/Pages/Page.tsx                     |   6 +-
 components/Pages/index.tsx                    |  69 +-
 components/RouteUIStateManger.tsx             |   4 +-
 drizzle/schema.ts                             |   2 +
 feeds/index.ts                                |  50 +-
 lexicons/api/index.ts                         | 225 ++++++
 lexicons/api/lexicons.ts                      | 275 +++++++
 lexicons/api/types/parts/page/embed/ctx.ts    |  19 +
 .../api/types/parts/page/mention/config.ts    |  32 +
 .../api/types/parts/page/mention/search.ts    | 145 ++++
 .../api/types/parts/page/mention/service.ts   |  35 +
 .../api/types/pub/leaflet/blocks/iframe.ts    |  17 +
 .../api/types/pub/leaflet/richtext/facet.ts   |   1 +
 lexicons/build.ts                             |  19 +-
 lexicons/parts/page/embed/ctx.json            |  19 +
 lexicons/parts/page/mention/config.json       |  28 +
 lexicons/parts/page/mention/search.json       | 178 +++++
 lexicons/parts/page/mention/service.json      |  36 +
 lexicons/pub/leaflet/blocks/iframe.json       |  19 +
 lexicons/pub/leaflet/richtext/facet.json      |   4 +
 lexicons/src/blocks.ts                        |  12 +
 lexicons/src/facet.ts                         |   5 +-
 lexicons/src/mentionService.ts                | 231 ++++++
 mentions/services/pokemon.ts                  |  39 +
 mentions/services/types.ts                    |  11 +
 mentions/services/wikipedia.ts                |  34 +
 package-lock.json                             |   7 +
 package.json                                  |   3 +-
 src/hooks/useIframeChannel.ts                 |  68 ++
 src/partsPageChannel.ts                       |  37 +
 src/replicache/attributes.ts                  |   4 +
 src/useUIState.ts                             |  29 +-
 src/utils/addLinkBlock.ts                     |  22 +-
 src/utils/aspectRatio.ts                      |  42 ++
 src/utils/focusPage.ts                        |  26 +-
 src/utils/mentionUtils.ts                     |  45 +-
 src/utils/scrollIntoView.ts                   |   2 +-
 src/utils/scrollIntoViewIfNeeded.ts           |  34 +-
 61 files changed, 3068 insertions(+), 276 deletions(-)
 create mode 100644 app/api/rpc/[command]/get_user_mention_services.ts
 create mode 100644 app/api/rpc/[command]/proxy_mention_search.ts
 create mode 100644 app/api/rpc/[command]/search_loose_leafs.ts
 create mode 100644 components/Pages/IframePageView.tsx
 create mode 100644 lexicons/api/types/parts/page/embed/ctx.ts
 create mode 100644 lexicons/api/types/parts/page/mention/config.ts
 create mode 100644 lexicons/api/types/parts/page/mention/search.ts
 create mode 100644 lexicons/api/types/parts/page/mention/service.ts
 create mode 100644 lexicons/parts/page/embed/ctx.json
 create mode 100644 lexicons/parts/page/mention/config.json
 create mode 100644 lexicons/parts/page/mention/search.json
 create mode 100644 lexicons/parts/page/mention/service.json
 create mode 100644 lexicons/src/mentionService.ts
 create mode 100644 mentions/services/pokemon.ts
 create mode 100644 mentions/services/types.ts
 create mode 100644 mentions/services/wikipedia.ts
 create mode 100644 src/hooks/useIframeChannel.ts
 create mode 100644 src/partsPageChannel.ts
 create mode 100644 src/utils/aspectRatio.ts

diff --git a/actions/publishToPublication.ts b/actions/publishToPublication.ts
index b83878cc..1c21cdb3 100644
--- a/actions/publishToPublication.ts
+++ b/actions/publishToPublication.ts
@@ -712,12 +712,19 @@ async function processBlocksToPages(
     if (b.type === "embed") {
       let [url] = scan.eav(b.value, "embed/url");
       let [height] = scan.eav(b.value, "embed/height");
+      let [aspectRatio] = scan.eav(b.value, "embed/aspect-ratio");
       if (!url) return;
       let block: $Typed<PubLeafletBlocksIframe.Main> = {
         $type: "pub.leaflet.blocks.iframe",
         url: url.data.value,
         height: Math.floor(height?.data.value || 600),
       };
+      if (aspectRatio) {
+        let [w, h] = aspectRatio.data.value.split("/").map(Number);
+        if (w && h) {
+          block.aspectRatio = { width: w, height: h };
+        }
+      }
       return block;
     }
     if (b.type == "image") {
@@ -950,6 +957,9 @@ function YJSFragmentToFacets(
           {
             $type: "pub.leaflet.richtext.facet#atMention",
             atURI: node.getAttribute("atURI"),
+            ...(node.getAttribute("href")
+              ? { href: node.getAttribute("href") }
+              : {}),
           },
         ],
       };
diff --git a/app/(home-pages)/reader/idResolver.ts b/app/(home-pages)/reader/idResolver.ts
index f4c1af72..37d57480 100644
--- a/app/(home-pages)/reader/idResolver.ts
+++ b/app/(home-pages)/reader/idResolver.ts
@@ -3,7 +3,7 @@ import type { DidCache, CacheResult, DidDocument } from "@atproto/identity";
 import Client from "ioredis";
 // Create Redis client for DID caching
 let redisClient: Client | null = null;
-if (process.env.REDIS_URL) {
+if (process.env.REDIS_URL && process.env.NODE_ENV === "production") {
   redisClient = new Client(process.env.REDIS_URL);
 }
 
diff --git a/app/[leaflet_id]/page.tsx b/app/[leaflet_id]/page.tsx
index 5a90a3b5..a7bd0022 100644
--- a/app/[leaflet_id]/page.tsx
+++ b/app/[leaflet_id]/page.tsx
@@ -55,6 +55,7 @@ export default async function LeafletPage(props: Props) {
     rootEntity,
   );
 
+  console.log(res);
   return (
     <>
       {/* Server-side font loading with preload and @font-face */}
diff --git a/app/[leaflet_id]/publish/BskyPostEditorProsemirror.tsx b/app/[leaflet_id]/publish/BskyPostEditorProsemirror.tsx
index 8e029198..26a74252 100644
--- a/app/[leaflet_id]/publish/BskyPostEditorProsemirror.tsx
+++ b/app/[leaflet_id]/publish/BskyPostEditorProsemirror.tsx
@@ -425,14 +425,20 @@ export const addMentionToEditor = (
     });
     tr.insert(from, didMentionNode);
   }
-  if (mention.type === "publication" || mention.type === "post") {
-    // Delete the @ and any query text
+  if (
+    mention.type === "publication" ||
+    mention.type === "post" ||
+    mention.type === "service_result"
+  ) {
     tr.delete(from, to);
-    let name = mention.type == "post" ? mention.title : mention.name;
-    // Insert atMention inline node
+    const text = mention.type === "post" ? mention.title : mention.name;
     const atMentionNode = schema.nodes.atMention.create({
       atURI: mention.uri,
-      text: name,
+      text,
+      ...(mention.type === "service_result" && {
+        href: mention.href,
+        icon: mention.icon,
+      }),
     });
     tr.insert(from, atMentionNode);
   }
diff --git a/app/api/oauth/[route]/oauth-metadata.ts b/app/api/oauth/[route]/oauth-metadata.ts
index 6af54950..567cbbb3 100644
--- a/app/api/oauth/[route]/oauth-metadata.ts
+++ b/app/api/oauth/[route]/oauth-metadata.ts
@@ -8,7 +8,7 @@ const hostname =
     : "https://leaflet.pub";
 
 const scope =
-  "atproto transition:generic transition:email include:pub.leaflet.authFullPermissions include:site.standard.authFull include:app.bsky.authCreatePosts include:app.bsky.authViewAll?aud=did:web:api.bsky.app%23bsky_appview blob:*/*";
+  "atproto transition:generic transition:email include:pub.leaflet.authFullPermissions include:site.standard.authFull include:app.bsky.authCreatePosts include:app.bsky.authViewAll?aud=did:web:api.bsky.app%23bsky_appview rpc:parts.page.mention.search?aud=* blob:*/*";
 const localconfig: OAuthClientMetadataInput = {
   client_id: `http://localhost/?redirect_uri=${encodeURI(`http://127.0.0.1:3000/api/oauth/callback`)}&scope=${encodeURIComponent(scope)}`,
   client_name: `Leaflet`,
diff --git a/app/api/oauth/[route]/route.ts b/app/api/oauth/[route]/route.ts
index 9c7eb139..94c113eb 100644
--- a/app/api/oauth/[route]/route.ts
+++ b/app/api/oauth/[route]/route.ts
@@ -43,7 +43,7 @@ export async function GET(
 
       const url = await client.authorize(handle || "https://bsky.social", {
         scope:
-          "atproto transition:email include:pub.leaflet.authFullPermissions include:site.standard.authFull include:app.bsky.authCreatePosts include:app.bsky.authViewAll?aud=did:web:api.bsky.app%23bsky_appview blob:*/*",
+          "atproto transition:email include:pub.leaflet.authFullPermissions include:site.standard.authFull include:app.bsky.authCreatePosts include:app.bsky.authViewAll?aud=did:web:api.bsky.app%23bsky_appview rpc:parts.page.mention.search?aud=* blob:*/*",
         signal: ac.signal,
         state: JSON.stringify(state),
       });
diff --git a/app/api/rpc/[command]/get_user_mention_services.ts b/app/api/rpc/[command]/get_user_mention_services.ts
new file mode 100644
index 00000000..b78b8161
--- /dev/null
+++ b/app/api/rpc/[command]/get_user_mention_services.ts
@@ -0,0 +1,92 @@
+import { z } from "zod";
+import { makeRoute } from "../lib";
+import type { Env } from "./route";
+import { getIdentityData } from "actions/getIdentityData";
+import type * as MentionConfig from "lexicons/api/types/parts/page/mention/config";
+import type * as MentionService from "lexicons/api/types/parts/page/mention/service";
+
+// Naive in-memory cache for user configs (keyed by identity DID)
+const configCache = new Map<
+  string,
+  { services: string[]; expiresAt: number }
+>();
+// Naive in-memory cache for service records (keyed by URI)
+const serviceCache = new Map<
+  string,
+  { record: MentionService.Record; expiresAt: number }
+>();
+const CACHE_TTL = 60_000; // 1 minute
+
+export type GetUserMentionServicesReturnType = Awaited<
+  ReturnType<(typeof get_user_mention_services)["handler"]>
+>;
+
+export const get_user_mention_services = makeRoute({
+  route: "get_user_mention_services",
+  input: z.object({}),
+  handler: async (_input, { supabase }: Pick<Env, "supabase">) => {
+    let user = await getIdentityData();
+    if (!user?.atp_did) return { result: { services: [] } };
+    let services: string[];
+    const cachedConfig = configCache.get(user.atp_did);
+    if (cachedConfig && Date.now() < cachedConfig.expiresAt) {
+      services = cachedConfig.services;
+    } else {
+      const { data: config } = await supabase
+        .from("mention_service_configs")
+        .select("record")
+        .eq("identity_did", user?.atp_did)
+        .single();
+      services = (config?.record as MentionConfig.Record)?.services ?? [];
+      configCache.set(user.atp_did, {
+        services,
+        expiresAt: Date.now() + CACHE_TTL,
+      });
+    }
+
+    if (!services.length) return { result: { services: [] } };
+
+    // Check which URIs we already have cached
+    const uncachedUris: string[] = [];
+    const cachedRecords: { uri: string; record: MentionService.Record }[] = [];
+    for (const uri of services) {
+      const cached = serviceCache.get(uri);
+      if (cached && Date.now() < cached.expiresAt) {
+        cachedRecords.push({ uri, record: cached.record });
+      } else {
+        uncachedUris.push(uri);
+      }
+    }
+
+    // Fetch any uncached services from DB
+    if (uncachedUris.length > 0) {
+      const { data: serviceRows, error } = await supabase
+        .from("mention_services")
+        .select("uri, record")
+        .in("uri", uncachedUris);
+      if (error) {
+        throw new Error(`Failed to fetch mention services: ${error.message}`);
+      }
+      for (const s of serviceRows || []) {
+        const record = s.record as MentionService.Record;
+        serviceCache.set(s.uri, {
+          record,
+          expiresAt: Date.now() + CACHE_TTL,
+        });
+        cachedRecords.push({ uri: s.uri, record });
+      }
+    }
+
+    return {
+      result: {
+        services: cachedRecords.map((s) => ({
+          uri: s.uri,
+          name: s.record.name,
+          description: s.record.description,
+          did: s.record.did,
+          canBeScopedToDid: s.record.canBeScopedToDid ?? false,
+        })),
+      },
+    };
+  },
+});
diff --git a/app/api/rpc/[command]/proxy_mention_search.ts b/app/api/rpc/[command]/proxy_mention_search.ts
new file mode 100644
index 00000000..8d3b313c
--- /dev/null
+++ b/app/api/rpc/[command]/proxy_mention_search.ts
@@ -0,0 +1,99 @@
+import { z } from "zod";
+import { makeRoute } from "../lib";
+import type { Env } from "./route";
+import { getIdentityData } from "actions/getIdentityData";
+import { restoreOAuthSession } from "src/atproto-oauth";
+import { AtpBaseClient } from "lexicons/api";
+import type * as SearchService from "lexicons/api/types/parts/page/mention/search";
+import type * as MentionService from "lexicons/api/types/parts/page/mention/service";
+
+// Naive in-memory cache for mention service records (keyed by URI)
+const serviceCache = new Map<
+  string,
+  { record: MentionService.Record; expiresAt: number }
+>();
+const SERVICE_CACHE_TTL = 60_000; // 1 minute
+
+export type ProxyMentionSearchReturnType = Awaited<
+  ReturnType<(typeof proxy_mention_search)["handler"]>
+>;
+
+export const proxy_mention_search = makeRoute({
+  route: "proxy_mention_search",
+  input: z.object({
+    service_uri: z.string(),
+    search: z.string(),
+    scope: z.string().optional(),
+  }),
+  handler: async (
+    { service_uri, search, scope },
+    { supabase }: Pick<Env, "supabase">,
+  ) => {
+    try {
+      const identity = await getIdentityData();
+      if (!identity?.atp_did) throw new Error("Not authenticated");
+
+      let record: MentionService.Record;
+      const cached = serviceCache.get(service_uri);
+      if (cached && Date.now() < cached.expiresAt) {
+        record = cached.record;
+      } else {
+        const { data: service } = await supabase
+          .from("mention_services")
+          .select("record")
+          .eq("uri", service_uri)
+          .single();
+        if (!service) throw new Error("Mention service not found");
+        record = service.record as MentionService.Record;
+        serviceCache.set(service_uri, {
+          record,
+          expiresAt: Date.now() + SERVICE_CACHE_TTL,
+        });
+      }
+
+      const did = record.did;
+      if (!did) throw new Error("Service has no DID");
+
+      const sessionResult = await restoreOAuthSession(identity.atp_did);
+      if (!sessionResult.ok) throw new Error("OAuth session expired");
+
+      const session = sessionResult.value;
+      const agent = new AtpBaseClient(session.fetchHandler.bind(session));
+      agent.setHeader("atproto-proxy", `${did}#mention_search`);
+      console.log(did);
+
+      const response = await agent.call("parts.page.mention.search", {
+        service: service_uri,
+        search,
+        ...(scope ? { scope } : {}),
+      });
+
+      const data = response.data as SearchService.OutputSchema | undefined;
+      const results: SearchService.Result[] = Array.isArray(data?.results)
+        ? data.results
+        : [];
+
+      return {
+        result: {
+          results: results.slice(0, 50).map((r) => ({
+            uri: r.uri,
+            name: r.name,
+            description: r.description,
+            labels: r.labels,
+            href: r.href,
+            icon: r.icon,
+            embed: r.embed,
+            subscope: r.subscope,
+          })),
+        },
+      };
+    } catch (error) {
+      console.error("proxy_mention_search failed", {
+        service_uri,
+        search,
+        error,
+      });
+      throw error;
+    }
+  },
+});
diff --git a/app/api/rpc/[command]/route.ts b/app/api/rpc/[command]/route.ts
index 05912055..91f4bb74 100644
--- a/app/api/rpc/[command]/route.ts
+++ b/app/api/rpc/[command]/route.ts
@@ -19,6 +19,8 @@ import { get_hot_feed } from "./get_hot_feed";
 import { get_document_interactions } from "./get_document_interactions";
 import { get_publication_analytics } from "./get_publication_analytics";
 import { get_publication_subscribers_timeseries } from "./get_publication_subscribers_timeseries";
+import { get_user_mention_services } from "./get_user_mention_services";
+import { proxy_mention_search } from "./proxy_mention_search";
 
 let supabase = createClient<Database>(
   process.env.NEXT_PUBLIC_SUPABASE_API_URL as string,
@@ -51,6 +53,8 @@ let Routes = [
   get_document_interactions,
   get_publication_analytics,
   get_publication_subscribers_timeseries,
+  get_user_mention_services,
+  proxy_mention_search,
 ];
 export async function POST(
   req: Request,
diff --git a/app/api/rpc/[command]/search_loose_leafs.ts b/app/api/rpc/[command]/search_loose_leafs.ts
new file mode 100644
index 00000000..b8800105
--- /dev/null
+++ b/app/api/rpc/[command]/search_loose_leafs.ts
@@ -0,0 +1,43 @@
+import { z } from "zod";
+import { makeRoute } from "../lib";
+import type { Env } from "./route";
+import { deduplicateByUri } from "src/utils/deduplicateRecords";
+
+export type SearchLooseLeafsReturnType = Awaited<
+  ReturnType<(typeof search_loose_leafs)["handler"]>
+>;
+
+export const search_loose_leafs = makeRoute({
+  route: "search_loose_leafs",
+  input: z.object({
+    query: z.string(),
+    limit: z.number().optional().default(10),
+  }),
+  handler: async (
+    { query, limit },
+    { supabase }: Pick<Env, "supabase">,
+  ) => {
+    // Search for documents that are NOT in any publication (loose leafs)
+    // A loose leaf is a document with no entry in documents_in_publications
+    const { data: rawLooseLeafs, error } = await supabase
+      .from("documents")
+      .select("uri, data")
+      .ilike("data->>title", `%${query}%`)
+      .not("uri", "in", supabase.from("documents_in_publications").select("document"))
+      .limit(limit);
+
+    if (error) {
+      throw new Error(`Failed to search loose leafs: ${error.message}`);
+    }
+
+    // Deduplicate records that may exist under both pub.leaflet and site.standard namespaces
+    const looseLeafs = deduplicateByUri(rawLooseLeafs || []);
+
+    const result = looseLeafs.map((d) => ({
+      uri: d.uri,
+      title: (d.data as { title?: string })?.title || "Untitled",
+    }));
+
+    return { result: { documents: result } };
+  },
+});
diff --git a/app/lish/[did]/[publication]/[rkey]/Blocks/TextBlockCore.tsx b/app/lish/[did]/[publication]/[rkey]/Blocks/TextBlockCore.tsx
index 292d44c7..a2a92486 100644
--- a/app/lish/[did]/[publication]/[rkey]/Blocks/TextBlockCore.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Blocks/TextBlockCore.tsx
@@ -114,6 +114,7 @@ export function TextBlockCore(props: TextBlockCoreProps) {
         <AtMentionLink
           key={counter}
           atURI={isAtMention.atURI}
+          href={isAtMention.href}
           className={className}
         >
           {renderedText}
diff --git a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
index 47318580..9458effb 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
@@ -36,6 +36,11 @@ import { ButtonPrimary } from "components/Buttons";
 import { blockTextSize } from "src/utils/blockTextSize";
 import { slugify } from "src/utils/slugify";
 import { PostNotAvailable } from "components/Blocks/BlueskyPostBlock/BlueskyEmbed";
+import { useIframeChannel } from "src/hooks/useIframeChannel";
+import { usePubTheme } from "components/ThemeManager/PublicationThemeProvider";
+import { colorToString } from "components/ThemeManager/useColorAttribute";
+import { useDocument } from "contexts/DocumentContext";
+import { openPage as openPageAction } from "./postPageState";
 import { CheckboxChecked } from "components/Icons/CheckboxChecked";
 import { CheckboxEmpty } from "components/Icons/CheckboxEmpty";
 
@@ -202,13 +207,10 @@ export let Block = ({
     }
     case PubLeafletBlocksIframe.isMain(b.block): {
       return (
-        <iframe
-          className={`flex flex-col relative w-full overflow-hidden group/embedBlock block-border my-2`}
-          width="100%"
+        <PublishedIframeBlock
+          url={b.block.url}
           height={b.block.height}
-          src={b.block.url}
-          allow="fullscreen"
-          loading="lazy"
+          pageId={pageId}
         />
       );
     }
@@ -487,6 +489,49 @@ export let Block = ({
   }
 };
 
+function PublishedIframeBlock(props: {
+  url: string;
+  height?: number;
+  pageId?: string;
+}) {
+  let parentPage = props.pageId
+    ? { type: "doc" as const, id: props.pageId }
+    : undefined;
+  let { iframeRef } = useIframeChannel({
+    onOpen: (url) => {
+      openPageAction(parentPage, { type: "iframe", url });
+    },
+    onReplaceWith: () => {},
+    onAddBelow: () => {},
+  });
+
+  let { theme } = useDocument();
+  let pubTheme = usePubTheme(theme);
+  let iframeSrc = new URL(props.url);
+  iframeSrc.searchParams.set("parts.page.embed.ctx.mode", "view");
+  iframeSrc.searchParams.set(
+    "parts.page.embed.ctx.bgColor",
+    `rgb(${colorToString(pubTheme.bgPage, "rgb")})`,
+  );
+  iframeSrc.searchParams.set(
+    "parts.page.embed.ctx.primaryColor",
+    `rgb(${colorToString(pubTheme.primary, "rgb")})`,
+  );
+
+
+  return (
+    <iframe
+      ref={iframeRef}
+      className="flex flex-col relative w-full overflow-hidden group/embedBlock block-border my-2"
+      width="100%"
+      height={props.height}
+      src={iframeSrc.toString()}
+      allow="fullscreen"
+      loading="lazy"
+    />
+  );
+}
+
 function ListItem(props: {
   index: number[];
   pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
diff --git a/app/lish/[did]/[publication]/[rkey]/PostPages.tsx b/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
index d678e484..85d8b2bb 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
@@ -29,15 +29,23 @@ import {
   type DocPage,
   type ThreadPage,
   type QuotesPage,
+  type IframePage,
   getPageKey,
   useOpenPages,
   useInitializeOpenPages,
-  openPage,
+  openPage as openPageAction,
   closePage,
 } from "./postPageState";
+import { IframePageView } from "components/Pages/IframePageView";
 
-export type { DocPage, ThreadPage, QuotesPage, OpenPage };
-export { getPageKey, useOpenPages, useInitializeOpenPages, openPage, closePage };
+export type { DocPage, ThreadPage, QuotesPage, IframePage, OpenPage };
+export {
+  getPageKey,
+  useOpenPages,
+  useInitializeOpenPages,
+  openPageAction as openPage,
+  closePage,
+};
 
 // Shared props type for both page components
 export type SharedPageProps = {
@@ -230,6 +238,27 @@ export function PostPages({
           );
         }
 
+        // Handle iframe pages
+        if (openPage.type === "iframe") {
+          return (
+            <Fragment key={pageKey}>
+              <SandwichSpacer />
+              <IframePageView
+                url={openPage.url}
+                onOpen={(url) => {
+                  openPageAction(openPage, { type: "iframe", url });
+                }}
+                pageOptions={
+                  <PageOptions
+                    onClick={() => closePage(openPage)}
+                    hasPageBackground={hasPageBackground}
+                  />
+                }
+              />
+            </Fragment>
+          );
+        }
+
         // Handle document pages
         let page = pages.find(
           (p) =>
diff --git a/app/lish/[did]/[publication]/[rkey]/postPageState.ts b/app/lish/[did]/[publication]/[rkey]/postPageState.ts
index 7553b9cd..e91c62a7 100644
--- a/app/lish/[did]/[publication]/[rkey]/postPageState.ts
+++ b/app/lish/[did]/[publication]/[rkey]/postPageState.ts
@@ -9,12 +9,14 @@ import { useEffect } from "react";
 export type DocPage = { type: "doc"; id: string };
 export type ThreadPage = { type: "thread"; uri: string };
 export type QuotesPage = { type: "quotes"; uri: string };
-export type OpenPage = DocPage | ThreadPage | QuotesPage;
+export type IframePage = { type: "iframe"; url: string };
+export type OpenPage = DocPage | ThreadPage | QuotesPage | IframePage;
 
 // Get a stable key for a page
 export const getPageKey = (page: OpenPage): string => {
   if (page.type === "doc") return page.id;
   if (page.type === "quotes") return `quotes:${page.uri}`;
+  if (page.type === "iframe") return `iframe:${page.url}`;
   return `thread:${page.uri}`;
 };
 
diff --git a/appview/index.ts b/appview/index.ts
index e795436f..2cba2277 100644
--- a/appview/index.ts
+++ b/appview/index.ts
@@ -374,11 +374,10 @@ async function handleEvent(evt: Event) {
   // }
   if (evt.collection === "parts.page.mention.service") {
     if (evt.event === "create" || evt.event === "update") {
-      let record = evt.record as any;
       let { error } = await supabase.from("mention_services").upsert({
         uri: evt.uri.toString(),
         identity_did: evt.did,
-        record: record as Json,
+        record: evt.record as Json,
       });
       if (error) console.log("Error upserting mention service:", error);
     }
@@ -391,12 +390,12 @@ async function handleEvent(evt: Event) {
   }
   if (evt.collection === "parts.page.mention.config") {
     if (evt.event === "create" || evt.event === "update") {
-      let record = evt.record as any;
+      let record = evt.record as Record<string, unknown> | undefined;
       if (!Array.isArray(record?.services)) return;
       let { error } = await supabase.from("mention_service_configs").upsert({
         uri: evt.uri.toString(),
         identity_did: evt.did,
-        record: record as Json,
+        record: evt.record as Json,
       });
       if (error) console.log("Error upserting mention config:", error);
     }
diff --git a/components/AtMentionLink.tsx b/components/AtMentionLink.tsx
index 29580785..fb23f93c 100644
--- a/components/AtMentionLink.tsx
+++ b/components/AtMentionLink.tsx
@@ -1,9 +1,4 @@
-import { AtUri } from "@atproto/api";
-import { atUriToUrl } from "src/utils/mentionUtils";
-import {
-  isDocumentCollection,
-  isPublicationCollection,
-} from "src/utils/collectionHelpers";
+import { atUriToUrl, classifyAtUri } from "src/utils/mentionUtils";
 
 /**
  * Component for rendering at-uri mentions (publications and documents) as clickable links.
@@ -12,33 +7,41 @@ import {
  */
 export function AtMentionLink({
   atURI,
+  href,
+  icon: iconUrl,
   children,
   className = "",
 }: {
   atURI: string;
+  href?: string;
+  icon?: string;
   children: React.ReactNode;
   className?: string;
 }) {
-  const aturi = new AtUri(atURI);
-  const isPublication = isPublicationCollection(aturi.collection);
-  const isDocument = isDocumentCollection(aturi.collection);
+  const { isPublication, isDocument } = classifyAtUri(atURI);
 
-  // Show publication icon if available
-  const icon =
-    isPublication || isDocument ? (
-      <img
-        src={`/api/pub_icon?at_uri=${encodeURIComponent(atURI)}`}
-        className="inline-block w-4 h-4 rounded-full mr-1 mt-[3px] align-text-top"
-        alt=""
-        width="20"
-        height="20"
-        loading="lazy"
-      />
-    ) : null;
+  // Show publication icon, or service-provided icon
+  const iconSrc =
+    isPublication || isDocument
+      ? `/api/pub_icon?at_uri=${encodeURIComponent(atURI)}`
+      : iconUrl ?? null;
+
+  const icon = iconSrc ? (
+    <img
+      src={iconSrc}
+      className="inline-block w-4 h-4 rounded-full mr-1 mt-[3px] align-text-top"
+      alt=""
+      width="20"
+      height="20"
+      loading="lazy"
+    />
+  ) : null;
+
+  const linkHref = href || atUriToUrl(atURI);
 
   return (
     <a
-      href={atUriToUrl(atURI)}
+      href={linkHref}
       target="_blank"
       rel="noopener noreferrer"
       className={`mention ${isPublication ? "font-bold" : ""} ${isDocument ? "italic" : ""} ${className}`}
diff --git a/components/Blocks/EmbedBlock.tsx b/components/Blocks/EmbedBlock.tsx
index 95b3b1e2..2b22b6e5 100644
--- a/components/Blocks/EmbedBlock.tsx
+++ b/components/Blocks/EmbedBlock.tsx
@@ -1,6 +1,6 @@
 import { useEntitySetContext } from "components/EntitySetProvider";
 import { generateKeyBetween } from "fractional-indexing";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useEntity, useReplicache } from "src/replicache";
 import { useUIState } from "src/useUIState";
 import { BlockProps, BlockLayout } from "./Block";
@@ -19,9 +19,18 @@ import {
   LinkPreviewBody,
   LinkPreviewMetadataResult,
 } from "app/api/link_previews/route";
+import { getAspectRatio } from "src/utils/aspectRatio";
+import { useIframeChannel } from "src/hooks/useIframeChannel";
+import { scrollIntoView } from "src/utils/scrollIntoView";
+import { EmbedBlockData } from "src/partsPageChannel";
+import {
+  useColorAttribute,
+  colorToString,
+} from "components/ThemeManager/useColorAttribute";
 
 export const EmbedBlock = (props: BlockProps & { preview?: boolean }) => {
-  let { permissions } = useEntitySetContext();
+  let entity_set = useEntitySetContext();
+  let { permissions } = entity_set;
   let { rep } = useReplicache();
   let url = useEntity(props.entityID, "embed/url");
   let isCanvasBlock = props.pageType === "canvas";
@@ -31,6 +40,7 @@ export const EmbedBlock = (props: BlockProps & { preview?: boolean }) => {
   );
 
   let height = useEntity(props.entityID, "embed/height")?.data.value || 360;
+  let aspectRatio = useEntity(props.entityID, "embed/aspect-ratio")?.data.value;
 
   let heightOnDragEnd = useCallback(
     (dragPosition: { x: number; y: number }) => {
@@ -48,6 +58,79 @@ export const EmbedBlock = (props: BlockProps & { preview?: boolean }) => {
 
   let heightHandle = useDrag({ onDragEnd: heightOnDragEnd });
 
+  let assertBlockData = useCallback(
+    async (entityID: string, block: EmbedBlockData) => {
+      if (!rep) return;
+      if (block.type === "text") {
+        await rep.mutate.assertFact([
+          {
+            entity: entityID,
+            attribute: "block/type",
+            data: { type: "block-type-union", value: "text" },
+          },
+          {
+            entity: entityID,
+            attribute: "block/text",
+            data: { type: "text", value: block.content },
+          },
+        ]);
+      } else {
+        let facts: Parameters<typeof rep.mutate.assertFact>[0] = [
+          {
+            entity: entityID,
+            attribute: "block/type",
+            data: { type: "block-type-union", value: "embed" },
+          },
+          {
+            entity: entityID,
+            attribute: "embed/url",
+            data: { type: "string", value: block.url },
+          },
+        ];
+        if (block.aspectRatio) {
+          facts.push({
+            entity: entityID,
+            attribute: "embed/aspect-ratio",
+            data: { type: "string", value: block.aspectRatio },
+          });
+        } else if (block.height) {
+          facts.push({
+            entity: entityID,
+            attribute: "embed/height",
+            data: { type: "number", value: block.height },
+          });
+        }
+        await rep.mutate.assertFact(facts);
+      }
+    },
+    [rep],
+  );
+
+  let { iframeRef } = useIframeChannel({
+    onOpen: (openUrl) => {
+      useUIState
+        .getState()
+        .openPage(props.parent, { type: "iframe", url: openUrl });
+      scrollIntoView(`iframe-page-${openUrl}`, "pages", 0.8);
+    },
+    onReplaceWith: (block) => {
+      assertBlockData(props.entityID, block);
+    },
+    onAddBelow: async (block) => {
+      if (!rep) return;
+      let newEntityID = v7();
+      await rep.mutate.addBlock({
+        permission_set: entity_set.set,
+        factID: v7(),
+        parent: props.parent,
+        type: block.type === "text" ? "text" : "card",
+        position: generateKeyBetween(props.position, props.nextPosition),
+        newEntityID,
+      });
+      await assertBlockData(newEntityID, block);
+    },
+  });
+
   useEffect(() => {
     if (props.preview) return;
     let input = document.getElementById(elementId.block(props.entityID).input);
@@ -78,36 +161,49 @@ export const EmbedBlock = (props: BlockProps & { preview?: boolean }) => {
       </label>
     );
   }
+  let bgPage = useColorAttribute(null, "theme/page-background");
+  let primary = useColorAttribute(null, "theme/primary");
+  let iframeSrc = useMemo(() => {
+    if (!url) return undefined;
+    let src = new URL(url.data.value);
+    src.searchParams.set("parts.page.embed.ctx.mode", "edit");
+    src.searchParams.set(
+      "parts.page.embed.ctx.bgColor",
+      `rgb(${colorToString(bgPage, "rgb")})`,
+    );
+    src.searchParams.set(
+      "parts.page.embed.ctx.primaryColor",
+      `rgb(${colorToString(primary, "rgb")})`,
+    );
+    return src.toString();
+  }, [url, bgPage, primary]);
+
   if (props.preview) return null;
 
   return (
     <div
-      className={`w-full ${heightHandle.dragDelta ? "pointer-events-none" : ""}`}
+      className={`w-full ${!aspectRatio && heightHandle.dragDelta ? "pointer-events-none" : ""}`}
     >
       <BlockLayout
         isSelected={!!isSelected}
         className="flex flex-col relative w-full overflow-hidden group/embedBlock p-0!"
       >
         <iframe
-          width="100%"
-          height={height + (heightHandle.dragDelta?.y || 0)}
-          src={url?.data.value}
+          ref={iframeRef}
+          className={aspectRatio ? "w-full h-auto" : "w-full"}
+          style={
+            aspectRatio
+              ? { aspectRatio }
+              : { height: height + (heightHandle.dragDelta?.y || 0) }
+          }
+          src={iframeSrc}
           allow="fullscreen"
           loading="lazy"
           referrerPolicy="no-referrer"
         ></iframe>
       </BlockLayout>
-      {/* <div className="w-full overflow-x-hidden truncate text-xs italic text-accent-contrast">
-        <a
-          href={url?.data.value}
-          target="_blank"
-          className={`py-0.5 min-w-0 w-full whitespace-nowrap`}
-        >
-          {url?.data.value}
-        </a>
-      </div> */}
 
-      {!props.preview && permissions.write && (
+      {!props.preview && permissions.write && !aspectRatio && (
         <>
           <div
             data-draggable
@@ -166,6 +262,7 @@ const BlockLinkInput = (props: BlockProps) => {
 
       let embedUrl = link;
       let embedHeight = 360;
+      let embedAspectRatio: string | null = null;
 
       if (res.status === 200) {
         let data = await (res.json() as LinkPreviewMetadataResult);
@@ -173,10 +270,11 @@ const BlockLinkInput = (props: BlockProps) => {
           let embed = data.data.links.player[0];
           embedUrl = embed.href;
           embedHeight = embed.media?.height || 300;
+          embedAspectRatio = getAspectRatio(embed.media);
         }
       }
 
-      await rep.mutate.assertFact([
+      let facts: Parameters<typeof rep.mutate.assertFact>[0] = [
         {
           entity: entity,
           attribute: "embed/url",
@@ -185,15 +283,27 @@ const BlockLinkInput = (props: BlockProps) => {
             value: embedUrl,
           },
         },
-        {
+      ];
+      if (embedAspectRatio) {
+        facts.push({
+          entity: entity,
+          attribute: "embed/aspect-ratio",
+          data: {
+            type: "string",
+            value: embedAspectRatio,
+          },
+        });
+      } else {
+        facts.push({
           entity: entity,
           attribute: "embed/height",
           data: {
             type: "number",
             value: embedHeight,
           },
-        },
-      ]);
+        });
+      }
+      await rep.mutate.assertFact(facts);
     } catch {
       // On any error, fallback to using the URL directly
       await rep.mutate.assertFact([
diff --git a/components/Blocks/TextBlock/RenderYJSFragment.tsx b/components/Blocks/TextBlock/RenderYJSFragment.tsx
index fb12897f..d277d17e 100644
--- a/components/Blocks/TextBlock/RenderYJSFragment.tsx
+++ b/components/Blocks/TextBlock/RenderYJSFragment.tsx
@@ -113,8 +113,10 @@ export function RenderYJSFragment({
                 ) {
                   const atURI = node.getAttribute("atURI") || "";
                   const text = node.getAttribute("text") || "";
+                  const href = node.getAttribute("href") || undefined;
+                  const icon = node.getAttribute("icon") || undefined;
                   return (
-                    <AtMentionLink key={index} atURI={atURI}>
+                    <AtMentionLink key={index} atURI={atURI} href={href} icon={icon}>
                       {text}
                     </AtMentionLink>
                   );
diff --git a/components/Blocks/TextBlock/index.tsx b/components/Blocks/TextBlock/index.tsx
index bce54fa1..d157bdfb 100644
--- a/components/Blocks/TextBlock/index.tsx
+++ b/components/Blocks/TextBlock/index.tsx
@@ -27,9 +27,12 @@ import { useMountProsemirror } from "./mountProsemirror";
 import { schema } from "./schema";
 import { useFootnotePopoverStore } from "components/Footnotes/FootnotePopover";
 import { blockTextSize } from "src/utils/blockTextSize";
+import { getAspectRatio } from "src/utils/aspectRatio";
 
 import { Mention, MentionAutocomplete } from "components/Mention";
 import { addMentionToEditor } from "app/[leaflet_id]/publish/BskyPostEditorProsemirror";
+import { v7 } from "uuid";
+import { generateKeyBetween } from "fractional-indexing";
 
 const HeadingStyle = {
   1: "font-bold [font-family:var(--theme-heading-font)]",
@@ -232,8 +235,9 @@ export function BaseTextBlock(props: BlockProps & { className?: string }) {
     mentionCoords,
     openMentionAutocomplete,
     handleMentionSelect,
+    handleMentionEmbed,
     handleMentionOpenChange,
-  } = useMentionState(props.entityID);
+  } = useMentionState(props.entityID, props);
 
   let { mountRef, actionTimeout } = useMountProsemirror({
     props,
@@ -316,6 +320,7 @@ export function BaseTextBlock(props: BlockProps & { className?: string }) {
             onOpenChange={handleMentionOpenChange}
             view={viewRef}
             onSelect={handleMentionSelect}
+            onEmbed={handleMentionEmbed}
             coords={mentionCoords}
           />
         )}
@@ -515,11 +520,16 @@ const CommandOptions = (props: BlockProps & { className?: string }) => {
   );
 };
 
-const useMentionState = (entityID: string) => {
+const useMentionState = (entityID: string, blockProps: BlockProps) => {
   let view = useEditorStates((s) => s.editorStates[entityID])?.view;
   let viewRef = useRef(view || null);
   viewRef.current = view || null;
 
+  let { rep } = useReplicache();
+  let entity_set = useEntitySetContext();
+  let blockPropsRef = useRef(blockProps);
+  blockPropsRef.current = blockProps;
+
   const [mentionOpen, setMentionOpen] = useState(false);
   const [mentionCoords, setMentionCoords] = useState<{
     top: number;
@@ -582,6 +592,90 @@ const useMentionState = (entityID: string) => {
     [entityID, mentionInsertPos],
   );
 
+  const handleMentionEmbed = useCallback(
+    (mention: Mention & { type: "service_result" }) => {
+      if (!rep || !mention.embed) return;
+      let props = blockPropsRef.current;
+
+      const editorState =
+        useEditorStates.getState().editorStates[entityID]?.editor;
+      // Check if the block is empty (only the @ character)
+      const blockIsEmpty =
+        editorState && editorState.doc.textContent.replace("@", "").trim() === "";
+
+      let targetEntityID: string;
+      if (blockIsEmpty) {
+        // Replace the current block
+        targetEntityID = props.entityID;
+        rep.mutate.assertFact({
+          entity: targetEntityID,
+          attribute: "block/type",
+          data: { type: "block-type-union", value: "embed" },
+        });
+        rep.mutate.retractAttribute({
+          entity: targetEntityID,
+          attribute: "block/text",
+        });
+      } else {
+        // Create a new block below
+        targetEntityID = v7();
+        rep.mutate.addBlock({
+          permission_set: entity_set.set,
+          factID: v7(),
+          type: "embed",
+          newEntityID: targetEntityID,
+          parent: props.parent,
+          position: generateKeyBetween(
+            props.position,
+            props.nextPosition,
+          ),
+        });
+        // Remove the @ from the current block's editor
+        const view = useEditorStates.getState().editorStates[entityID]?.view;
+        if (view && mentionInsertPos !== null) {
+          const from = mentionInsertPos - 1;
+          const to = mentionInsertPos;
+          const tr = view.state.tr.delete(from, to);
+          view.dispatch(tr);
+        }
+      }
+
+      // Set embed attributes
+      let facts: Parameters<typeof rep.mutate.assertFact>[0] = [
+        {
+          entity: targetEntityID,
+          attribute: "embed/url",
+          data: { type: "string", value: mention.embed.src },
+        },
+      ];
+      let aspectRatio = getAspectRatio(
+        mention.embed.aspectRatio
+          ? mention.embed.aspectRatio
+          : mention.embed.width && mention.embed.height
+            ? { width: mention.embed.width, height: mention.embed.height }
+            : undefined,
+      );
+      if (aspectRatio) {
+        facts.push({
+          entity: targetEntityID,
+          attribute: "embed/aspect-ratio",
+          data: { type: "string", value: aspectRatio },
+        });
+      } else {
+        facts.push({
+          entity: targetEntityID,
+          attribute: "embed/height",
+          data: {
+            type: "number",
+            value: mention.embed.height || 360,
+          },
+        });
+      }
+      rep.mutate.assertFact(facts);
+    },
+    [rep, entityID, entity_set.set, mentionInsertPos],
+  );
+
   const handleMentionOpenChange = useCallback((open: boolean) => {
     setMentionOpen(open);
     if (!open) {
@@ -596,6 +690,7 @@ const useMentionState = (entityID: string) => {
     mentionCoords,
     openMentionAutocomplete,
     handleMentionSelect,
+    handleMentionEmbed,
     handleMentionOpenChange,
   };
 };
diff --git a/components/Blocks/TextBlock/mountProsemirror.ts b/components/Blocks/TextBlock/mountProsemirror.ts
index 7ce2707b..37d2142d 100644
--- a/components/Blocks/TextBlock/mountProsemirror.ts
+++ b/components/Blocks/TextBlock/mountProsemirror.ts
@@ -143,8 +143,12 @@ export function useMountProsemirror({
 
           // Check for atMention inline nodes
           if (node?.type === schema.nodes.atMention) {
-            const url = atUriToUrl(node.attrs.atURI);
-            window.open(url, "_blank", "noopener,noreferrer");
+            if (node.attrs.href)
+              window.open(node.attrs.href, "_blank", "noopener,noreferrer");
+            else {
+              const url = atUriToUrl(node.attrs.atURI);
+              window.open(url, "_blank", "noopener,noreferrer");
+            }
             return;
           }
 
diff --git a/components/Blocks/TextBlock/schema.ts b/components/Blocks/TextBlock/schema.ts
index df1ca5e5..e40406b5 100644
--- a/components/Blocks/TextBlock/schema.ts
+++ b/components/Blocks/TextBlock/schema.ts
@@ -1,11 +1,7 @@
-import { AtUri } from "@atproto/api";
 import { Schema, Node, MarkSpec, NodeSpec } from "prosemirror-model";
 import { marks } from "prosemirror-schema-basic";
 import { theme } from "tailwind.config";
-import {
-  isDocumentCollection,
-  isPublicationCollection,
-} from "src/utils/collectionHelpers";
+import { classifyAtUri } from "src/utils/mentionUtils";
 
 let baseSchema = {
   marks: {
@@ -131,6 +127,8 @@ let baseSchema = {
       attrs: {
         atURI: {},
         text: { default: "" },
+        href: { default: undefined },
+        icon: { default: undefined },
       },
       group: "inline",
       inline: true,
@@ -144,6 +142,8 @@ let baseSchema = {
             return {
               atURI: dom.getAttribute("data-at-uri"),
               text: dom.textContent || "",
+              href: dom.getAttribute("data-href") || undefined,
+              icon: dom.getAttribute("data-icon") || undefined,
             };
           },
         },
@@ -152,26 +152,35 @@ let baseSchema = {
         // NOTE: This rendering should match the AtMentionLink component in
         // components/AtMentionLink.tsx. If you update one, update the other.
         let className = "atMention mention";
-        let aturi = new AtUri(node.attrs.atURI);
-        if (isPublicationCollection(aturi.collection))
-          className += " font-bold";
-        if (isDocumentCollection(aturi.collection)) className += " italic";
+        const { isPublication, isDocument } = classifyAtUri(node.attrs.atURI);
+        if (isPublication) className += " font-bold";
+        if (isDocument) className += " italic";
 
-        // For publications and documents, show icon
-        if (
-          isPublicationCollection(aturi.collection) ||
-          isDocumentCollection(aturi.collection)
-        ) {
+        const attrs: Record<string, string> = {
+          class: className,
+          "data-at-uri": node.attrs.atURI,
+        };
+        if (node.attrs.href) {
+          attrs["data-href"] = node.attrs.href;
+        }
+        if (node.attrs.icon) {
+          attrs["data-icon"] = node.attrs.icon;
+        }
+
+        // Show icon for publications/documents or service results
+        const iconSrc =
+          isPublication || isDocument
+            ? `/api/pub_icon?at_uri=${encodeURIComponent(node.attrs.atURI)}`
+            : node.attrs.icon ?? null;
+
+        if (iconSrc) {
           return [
             "span",
-            {
-              class: className,
-              "data-at-uri": node.attrs.atURI,
-            },
+            attrs,
             [
               "img",
               {
-                src: `/api/pub_icon?at_uri=${encodeURIComponent(node.attrs.atURI)}`,
+                src: iconSrc,
                 class:
                   "inline-block w-4 h-4 rounded-full mt-[3px] mr-1 align-text-top",
                 alt: "",
@@ -184,14 +193,7 @@ let baseSchema = {
           ];
         }
 
-        return [
-          "span",
-          {
-            class: className,
-            "data-at-uri": node.attrs.atURI,
-          },
-          node.attrs.text,
-        ];
+        return ["span", attrs, node.attrs.text];
       },
     } as NodeSpec,
     footnote: {
diff --git a/components/Mention.tsx b/components/Mention.tsx
index 32e0075a..62fa84c2 100644
--- a/components/Mention.tsx
+++ b/components/Mention.tsx
@@ -1,10 +1,18 @@
 "use client";
 import { Agent } from "@atproto/api";
-import { useState, useEffect, Fragment, useRef, useCallback } from "react";
-import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
+import {
+  useState,
+  useEffect,
+  useMemo,
+  Fragment,
+  useRef,
+  useCallback,
+} from "react";
+import useSWR from "swr";
 import * as Popover from "@radix-ui/react-popover";
 import { EditorView } from "prosemirror-view";
 import { callRPC } from "app/api/rpc/client";
+import type * as SearchService from "lexicons/api/types/parts/page/mention/search";
 import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
 import { GoBackSmall } from "components/Icons/GoBackSmall";
 import { SearchTiny } from "components/Icons/SearchTiny";
@@ -17,16 +25,39 @@ export function MentionAutocomplete(props: {
   onOpenChange: (open: boolean) => void;
   view: React.RefObject<EditorView | null>;
   onSelect: (mention: Mention) => void;
+  onEmbed?: (mention: Mention & { type: "service_result" }) => void;
   coords: { top: number; left: number } | null;
   placeholder?: string;
 }) {
   const [searchQuery, setSearchQuery] = useState("");
-  const [noResults, setNoResults] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
 
-  const { suggestionIndex, setSuggestionIndex, suggestions, scope, setScope } =
-    useMentionSuggestions(searchQuery);
+  const {
+    suggestionIndex,
+    setSuggestionIndex,
+    suggestions,
+    scope,
+    setScope,
+    searchComplete,
+    hasDidScopableServices,
+  } = useMentionSuggestions(searchQuery, props.open);
+
+  const noResults =
+    searchComplete && searchQuery !== "" && suggestions.length === 0;
+
+  const sortedSuggestions = useMemo(() => {
+    const order: Mention["type"][] = [
+      "did",
+      "publication",
+      "post",
+      "service",
+      "service_result",
+    ];
+    return [...suggestions].sort(
+      (a, b) => order.indexOf(a.type) - order.indexOf(b.type),
+    );
+  }, [suggestions]);
 
   // Clear search when scope changes
   const handleScopeChange = useCallback(
@@ -52,23 +83,9 @@ export function MentionAutocomplete(props: {
       setSearchQuery("");
       setScope({ type: "default" });
       setSuggestionIndex(0);
-      setNoResults(false);
     }
   }, [props.open, setScope, setSuggestionIndex]);
 
-  // Handle timeout for showing "No results found"
-  useEffect(() => {
-    if (searchQuery && suggestions.length === 0) {
-      setNoResults(false);
-      const timer = setTimeout(() => {
-        setNoResults(true);
-      }, 2000);
-      return () => clearTimeout(timer);
-    } else {
-      setNoResults(false);
-    }
-  }, [searchQuery, suggestions.length]);
-
   // Handle keyboard navigation
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === "Escape") {
@@ -98,11 +115,11 @@ export function MentionAutocomplete(props: {
       }
     } else if (e.key === downKey) {
       e.preventDefault();
-      if (suggestionIndex < suggestions.length - 1) {
+      if (suggestionIndex < sortedSuggestions.length - 1) {
         setSuggestionIndex((i) => i + 1);
       }
     } else if (e.key === "Tab") {
-      const selectedSuggestion = suggestions[suggestionIndex];
+      const selectedSuggestion = sortedSuggestions[suggestionIndex];
       if (selectedSuggestion?.type === "publication") {
         e.preventDefault();
         handleScopeChange({
@@ -110,11 +127,75 @@ export function MentionAutocomplete(props: {
           uri: selectedSuggestion.uri,
           name: selectedSuggestion.name,
         });
+      } else if (selectedSuggestion?.type === "did" && hasDidScopableServices) {
+        // Tab on a DID result → show services that can be scoped to this DID
+        e.preventDefault();
+        handleScopeChange({
+          type: "did_services",
+          did: selectedSuggestion.did,
+          name: selectedSuggestion.displayName || selectedSuggestion.handle,
+        });
+      } else if (
+        selectedSuggestion?.type === "service" &&
+        scope.type === "did_services"
+      ) {
+        // Tab on a service in the DID services scope → search that service scoped to the DID
+        e.preventDefault();
+        handleScopeChange({
+          type: "service",
+          serviceUri: selectedSuggestion.serviceUri,
+          name: selectedSuggestion.name,
+          scope: scope.did,
+          serviceName: selectedSuggestion.name,
+          scopedDid: scope.did,
+          scopedDidName: scope.name,
+        });
+      } else if (selectedSuggestion?.type === "service") {
+        e.preventDefault();
+        handleScopeChange(serviceScopeFromMention(selectedSuggestion));
+      } else if (
+        selectedSuggestion?.type === "service_result" &&
+        selectedSuggestion.subscope &&
+        scope.type === "service"
+      ) {
+        e.preventDefault();
+        handleScopeChange({
+          type: "service",
+          serviceUri: scope.serviceUri,
+          name: selectedSuggestion.name,
+          scope: selectedSuggestion.subscope.scope,
+          serviceName: scope.serviceName ?? scope.name,
+          scopedDid: scope.scopedDid,
+          scopedDidName: scope.scopedDidName,
+        });
       }
     } else if (e.key === "Enter") {
       e.preventDefault();
-      const selectedSuggestion = suggestions[suggestionIndex];
-      if (selectedSuggestion) {
+      const selectedSuggestion = sortedSuggestions[suggestionIndex];
+      if (
+        selectedSuggestion?.type === "service" &&
+        scope.type === "did_services"
+      ) {
+        handleScopeChange({
+          type: "service",
+          serviceUri: selectedSuggestion.serviceUri,
+          name: selectedSuggestion.name,
+          scope: scope.did,
+          serviceName: selectedSuggestion.name,
+          scopedDid: scope.did,
+          scopedDidName: scope.name,
+        });
+      } else if (selectedSuggestion?.type === "service") {
+        handleScopeChange(serviceScopeFromMention(selectedSuggestion));
+      } else if (
+        (e.ctrlKey || e.metaKey) &&
+        selectedSuggestion?.type === "service_result" &&
+        selectedSuggestion.embed &&
+        props.onEmbed
+      ) {
+        props.onEmbed(selectedSuggestion);
+        props.onOpenChange(false);
+      } else if (selectedSuggestion) {
         props.onSelect(selectedSuggestion);
         props.onOpenChange(false);
       }
@@ -139,30 +220,53 @@ export function MentionAutocomplete(props: {
   if (!props.open || !props.coords) return null;
 
   const getHeader = (type: Mention["type"], scope?: MentionScope) => {
+    // When in a built-in scope, show a back header
+    if (
+      scope?.type === "identities" ||
+      scope?.type === "publications" ||
+      scope?.type === "publication" ||
+      scope?.type === "service" ||
+      scope?.type === "did_services"
+    ) {
+      return (
+        <ScopeHeader
+          scope={scope}
+          handleScopeChange={() => {
+            // When in a service entered from did_services, go back to did_services
+            if (scope.type === "service" && scope.scopedDid) {
+              handleScopeChange({
+                type: "did_services",
+                did: scope.scopedDid,
+                name: scope.scopedDidName ?? scope.scopedDid,
+              });
+              // When in a subscoped service, go back to the parent service scope
+            } else if (scope.type === "service" && scope.scope) {
+              handleScopeChange({
+                type: "service",
+                serviceUri: scope.serviceUri,
+                name: scope.serviceName ?? scope.name,
+              });
+            } else {
+              handleScopeChange({ type: "default" });
+            }
+          }}
+        />
+      );
+    }
     switch (type) {
       case "did":
         return "People";
       case "publication":
         return "Publications";
       case "post":
-        if (scope) {
-          return (
-            <ScopeHeader
-              scope={scope}
-              handleScopeChange={() => {
-                handleScopeChange({ type: "default" });
-              }}
-            />
-          );
-        } else return "Posts";
+        return "Posts";
+      case "service":
+        return "Services";
+      case "service_result":
+        return null;
     }
   };
 
-  const sortedSuggestions = [...suggestions].sort((a, b) => {
-    const order: Mention["type"][] = ["did", "publication", "post"];
-    return order.indexOf(a.type) - order.indexOf(b.type);
-  });
-
   return (
     <Popover.Root open>
       <Popover.Anchor
@@ -205,11 +309,7 @@ export function MentionAutocomplete(props: {
                 }}
                 onKeyDown={handleKeyDown}
                 autoFocus
-                placeholder={
-                  scope.type === "publication"
-                    ? "Search posts..."
-                    : props.placeholder ?? "Search people & publications..."
-                }
+                placeholder={scopePlaceholder(scope, props.placeholder)}
                 className="flex-1 w-full min-w-0 bg-transparent border-none outline-none text-sm placeholder:text-tertiary"
               />
             </div>
@@ -227,10 +327,15 @@ export function MentionAutocomplete(props: {
                   index === 0 ||
                   (prevResult && prevResult.type !== result.type);
 
+                const key =
+                  result.type === "did"
+                    ? result.did
+                    : result.type === "service"
+                      ? result.serviceUri
+                      : result.uri;
+
                 return (
-                  <Fragment
-                    key={result.type === "did" ? result.did : result.uri}
-                  >
+                  <Fragment key={key}>
                     {showHeader && (
                       <>
                         {index > 0 && (
@@ -252,6 +357,17 @@ export function MentionAutocomplete(props: {
                         handle={result.handle}
                         avatar={result.avatar}
                         selected={index === suggestionIndex}
+                        onServicesClick={
+                          hasDidScopableServices
+                            ? () => {
+                                handleScopeChange({
+                                  type: "did_services",
+                                  did: result.did,
+                                  name: result.displayName || result.handle,
+                                });
+                              }
+                            : undefined
+                        }
                       />
                     ) : result.type === "publication" ? (
                       <PublicationResult
@@ -271,6 +387,64 @@ export function MentionAutocomplete(props: {
                           });
                         }}
                       />
+                    ) : result.type === "service" ? (
+                      <ServiceEntry
+                        onClick={() => {
+                          if (scope.type === "did_services") {
+                            handleScopeChange({
+                              type: "service",
+                              serviceUri: result.serviceUri,
+                              name: result.name,
+                              scope: scope.did,
+                              serviceName: result.name,
+                              scopedDid: scope.did,
+                              scopedDidName: scope.name,
+                            });
+                          } else {
+                            handleScopeChange(serviceScopeFromMention(result));
+                          }
+                        }}
+                        onMouseDown={(e) => e.preventDefault()}
+                        name={result.name}
+                        description={result.description}
+                        selected={index === suggestionIndex}
+                      />
+                    ) : result.type === "service_result" ? (
+                      <ServiceSearchResult
+                        onClick={() => {
+                          props.onSelect(result);
+                          props.onOpenChange(false);
+                        }}
+                        onMouseDown={(e) => e.preventDefault()}
+                        name={result.name}
+                        description={result.description}
+                        labels={result.labels}
+                        icon={result.icon}
+                        hasEmbed={!!result.embed}
+                        onEmbedClick={
+                          result.embed && props.onEmbed
+                            ? () => {
+                                props.onEmbed!(result);
+                                props.onOpenChange(false);
+                              }
+                            : undefined
+                        }
+                        subscope={result.subscope}
+                        onSubscopeClick={
+                          result.subscope && scope.type === "service"
+                            ? () => {
+                                handleScopeChange({
+                                  type: "service",
+                                  serviceUri: scope.serviceUri,
+                                  name: result.name,
+                                  scope: result.subscope!.scope,
+                                  serviceName: scope.serviceName ?? scope.name,
+                                });
+                              }
+                            : undefined
+                        }
+                        selected={index === suggestionIndex}
+                      />
                     ) : (
                       <PostResult
                         onClick={() => {
@@ -321,7 +495,7 @@ const Result = (props: {
           {props.result}
         </div>
         {props.subtext && (
-          <div className="text-tertiary italic text-xs font-normal min-w-0 truncate pb-[1px]">
+          <div className="text-tertiary text-xs font-normal min-w-0 pb-[1px]">
             {props.subtext}
           </div>
         )}
@@ -359,7 +533,9 @@ const DidResult = (props: {
   onClick: () => void;
   onMouseDown: (e: React.MouseEvent) => void;
   selected?: boolean;
+  onServicesClick?: () => void;
 }) => {
+  const nameContent = props.displayName ? props.displayName : props.handle;
   return (
     <Result
       icon={
@@ -373,8 +549,17 @@ const DidResult = (props: {
           <div className="w-5 h-5 rounded-full bg-border shrink-0" />
         )
       }
-      result={props.displayName ? props.displayName : props.handle}
-      subtext={props.displayName && `@${props.handle}`}
+      result={
+        props.onServicesClick ? (
+          <>
+            <div className="truncate w-full grow min-w-0">{nameContent}</div>
+            <ScopeButton onClick={props.onServicesClick}>Search</ScopeButton>
+          </>
+        ) : (
+          nameContent
+        )
+      }
+      subtext={props.displayName && <span className="truncate italic">{`@${props.handle}`}</span>}
       onClick={props.onClick}
       onMouseDown={props.onMouseDown}
       selected={props.selected}
@@ -428,25 +613,136 @@ const PostResult = (props: {
   );
 };
 
+const ServiceEntry = (props: {
+  name: string;
+  description?: string;
+  onClick: () => void;
+  onMouseDown: (e: React.MouseEvent) => void;
+  selected?: boolean;
+}) => {
+  return (
+    <Result
+      result={
+        <>
+          <div className="truncate w-full grow min-w-0">{props.name}</div>
+          <ScopeButton onClick={props.onClick}>Search</ScopeButton>
+        </>
+      }
+      subtext={props.description && <span className="truncate italic">{props.description}</span>}
+      onClick={props.onClick}
+      onMouseDown={props.onMouseDown}
+      selected={props.selected}
+    />
+  );
+};
+
+const ServiceSearchResult = (props: {
+  name: string;
+  description?: string;
+  labels?: SearchService.MentionLabel[];
+  icon?: string;
+  hasEmbed?: boolean;
+  onEmbedClick?: () => void;
+  subscope?: SearchService.SubscopeInfo;
+  onSubscopeClick?: () => void;
+  onClick: () => void;
+  onMouseDown: (e: React.MouseEvent) => void;
+  selected?: boolean;
+}) => {
+  const hasActions =
+    (props.hasEmbed && props.onEmbedClick) ||
+    (props.subscope && props.onSubscopeClick);
+  const hasLabels = props.labels && props.labels.length > 0;
+  const hasDescription = !!props.description;
+  const hasSubtext = hasLabels || hasDescription;
+  return (
+    <Result
+      icon={
+        props.icon ? (
+          <img
+            src={props.icon}
+            alt=""
+            className="w-5 h-5 rounded-full shrink-0"
+          />
+        ) : undefined
+      }
+      result={
+        hasActions ? (
+          <>
+            <div className={`grow min-w-0 ${hasSubtext ? "line-clamp-2 whitespace-normal" : "truncate w-full"}`}>{props.name}</div>
+            {props.subscope && props.onSubscopeClick && (
+              <ScopeButton onClick={props.onSubscopeClick}>
+                {props.subscope.label}
+              </ScopeButton>
+            )}
+            {props.hasEmbed && props.onEmbedClick && (
+              <ScopeButton onClick={props.onEmbedClick}>Embed</ScopeButton>
+            )}
+          </>
+        ) : (
+          <div className={`min-w-0 ${hasSubtext ? "line-clamp-2 whitespace-normal" : "truncate w-full"}`}>{props.name}</div>
+        )
+      }
+      subtext={
+        hasSubtext ? (
+          <div className="flex flex-col gap-0.5">
+            {hasLabels && (
+              <div className="flex flex-wrap gap-1 items-center text-tertiary text-xs leading-normal">
+                {props.labels!.flatMap(
+                  (label, i) =>
+                    label.text
+                      ? [
+                          ...(i > 0
+                            ? [<span key={`sep-${i}`} className="text-border-light">|</span>]
+                            : []),
+                          <span key={i}>{label.text}</span>,
+                        ]
+                      : [],
+                )}
+              </div>
+            )}
+            {hasDescription && (
+              <span className="text-secondary text-xs truncate">
+                {props.description}
+              </span>
+            )}
+          </div>
+        ) : undefined
+      }
+      onClick={props.onClick}
+      onMouseDown={props.onMouseDown}
+      selected={props.selected}
+    />
+  );
+};
+
 const ScopeHeader = (props: {
   scope: MentionScope;
   handleScopeChange: () => void;
 }) => {
   if (props.scope.type === "default") return;
-  if (props.scope.type === "publication")
-    return (
-      <button
-        className="w-full flex flex-row gap-2 pt-1 rounded text-tertiary hover:text-accent-contrast shrink-0 text-xs"
-        onClick={() => props.handleScopeChange()}
-        onMouseDown={(e) => e.preventDefault()}
-      >
-        <GoBackTiny className="shrink-0 " />
-
-        <div className="grow w-full truncate text-left">
-          Posts from {props.scope.name}
-        </div>
-      </button>
-    );
+
+  const label =
+    props.scope.type === "identities"
+      ? "People"
+      : props.scope.type === "publications"
+        ? "Publications"
+        : props.scope.type === "publication"
+          ? `Posts from ${props.scope.name}`
+          : props.scope.type === "did_services"
+            ? `Services for ${props.scope.name}`
+            : `Results from ${props.scope.name}`;
+
+  return (
+    <button
+      className="w-full flex flex-row gap-2 pt-1 rounded text-tertiary hover:text-accent-contrast shrink-0 text-xs"
+      onClick={() => props.handleScopeChange()}
+      onMouseDown={(e) => e.preventDefault()}
+    >
+      <GoBackTiny className="shrink-0 " />
+      <div className="grow w-full truncate text-left">{label}</div>
+    </button>
+  );
 };
 
 export type Mention =
@@ -458,15 +754,170 @@ export type Mention =
       avatar?: string;
     }
   | { type: "publication"; uri: string; name: string; url: string }
-  | { type: "post"; uri: string; title: string; url: string };
+  | { type: "post"; uri: string; title: string; url: string }
+  | {
+      type: "service";
+      serviceUri: string;
+      name: string;
+      description?: string;
+      canBeScopedToDid?: boolean;
+    }
+  | {
+      type: "service_result";
+      uri: string;
+      name: string;
+      description?: string;
+      labels?: SearchService.MentionLabel[];
+      href?: string;
+      icon?: string;
+      embed?: SearchService.EmbedInfo;
+      subscope?: SearchService.SubscopeInfo;
+    };
 
 export type MentionScope =
   | { type: "default" }
-  | { type: "publication"; uri: string; name: string };
-function useMentionSuggestions(query: string | null) {
+  | { type: "identities" }
+  | { type: "publications" }
+  | { type: "publication"; uri: string; name: string }
+  | {
+      type: "service";
+      serviceUri: string;
+      name: string;
+      scope?: string;
+      serviceName?: string;
+      scopedDid?: string;
+      scopedDidName?: string;
+    }
+  | { type: "did_services"; did: string; name: string };
+
+function scopePlaceholder(scope: MentionScope, fallback?: string): string {
+  switch (scope.type) {
+    case "identities":
+      return "Search people...";
+    case "publications":
+      return "Search publications...";
+    case "publication":
+      return "Search posts...";
+    case "service":
+      return `Search ${scope.name}...`;
+    case "did_services":
+      return `Search ${scope.name} with...`;
+    default:
+      return fallback ?? "Search people & publications...";
+  }
+}
+
+function serviceScopeFromMention(
+  service: Mention & { type: "service" },
+): MentionScope {
+  if (service.serviceUri === BUILTIN_IDENTITIES.serviceUri)
+    return { type: "identities" };
+  if (service.serviceUri === BUILTIN_PUBLICATIONS.serviceUri)
+    return { type: "publications" };
+  return {
+    type: "service",
+    serviceUri: service.serviceUri,
+    name: service.name,
+  };
+}
+
+const BUILTIN_IDENTITIES: Mention & { type: "service" } = {
+  type: "service",
+  serviceUri: "builtin:identities",
+  name: "Identities",
+  description: "Search people on Bluesky",
+};
+const BUILTIN_PUBLICATIONS: Mention & { type: "service" } = {
+  type: "service",
+  serviceUri: "builtin:publications",
+  name: "Publications",
+  description: "Search publications on Leaflet",
+};
+
+const bskyAgent = new Agent("https://public.api.bsky.app");
+
+async function searchIdentities(
+  query: string,
+  limit: number,
+): Promise<Mention[]> {
+  const result = await bskyAgent.searchActorsTypeahead({ q: query, limit });
+  return result.data.actors.map((actor) => ({
+    type: "did" as const,
+    handle: actor.handle,
+    did: actor.did,
+    displayName: actor.displayName,
+    avatar: actor.avatar,
+  }));
+}
+
+async function searchPublications(
+  query: string,
+  limit: number,
+): Promise<Mention[]> {
+  const publications = await callRPC(`search_publication_names`, {
+    query,
+    limit,
+  });
+  return publications.result.publications.map((p) => ({
+    type: "publication" as const,
+    uri: p.uri,
+    name: p.name,
+    url: p.url,
+  }));
+}
+
+const EMPTY_SERVICES: Array<Mention> = [];
+function useMentionServices(enabled: boolean): Array<Mention> {
+  const { data } = useSWR(
+    enabled ? "mention_services" : null,
+    async () => {
+      try {
+        const result = await callRPC(`get_user_mention_services`, {});
+        return result.result.services.map(
+          (s: {
+            uri: string;
+            name: string;
+            description?: string;
+            canBeScopedToDid?: boolean;
+          }) => ({
+            type: "service" as const,
+            serviceUri: s.uri,
+            name: s.name,
+            description: s.description,
+            canBeScopedToDid: s.canBeScopedToDid,
+          }),
+        );
+      } catch {
+        return EMPTY_SERVICES;
+      }
+    },
+    { revalidateOnFocus: false, revalidateOnReconnect: false },
+  );
+  return data || EMPTY_SERVICES;
+}
+
+function useMentionSuggestions(query: string | null, open: boolean) {
   const [suggestionIndex, setSuggestionIndex] = useState(0);
   const [suggestions, setSuggestions] = useState<Array<Mention>>([]);
   const [scope, setScope] = useState<MentionScope>({ type: "default" });
+  const [searchComplete, setSearchComplete] = useState(false);
+  const externalServices = useMentionServices(open);
+  const allServices = useMemo(
+    () =>
+      externalServices.length > 0
+        ? [BUILTIN_IDENTITIES, BUILTIN_PUBLICATIONS, ...externalServices]
+        : EMPTY_SERVICES,
+    [externalServices],
+  );
+  const hasServices = allServices.length > 0;
+  const didScopableServices = useMemo(
+    () =>
+      externalServices.filter(
+        (s) => s.type === "service" && s.canBeScopedToDid,
+      ),
+    [externalServices],
+  );
+  const hasDidScopableServices = didScopableServices.length > 0;
 
   // Clear suggestions immediately when scope changes
   const setScopeAndClear = useCallback((newScope: MentionScope) => {
@@ -474,58 +925,100 @@ function useMentionSuggestions(query: string | null) {
     setScope(newScope);
   }, []);
 
-  useDebouncedEffect(
-    async () => {
-      if (!query && scope.type === "default") {
-        setSuggestions([]);
-        return;
-      }
+  useEffect(() => {
+    let stale = false;
+    setSearchComplete(false);
+    // DID services scope: show DID-scopable services filtered locally
+    if (scope.type === "did_services") {
+      const filtered = didScopableServices.filter((s) =>
+        s.type === "service"
+          ? s.name.toLowerCase().includes((query || "").toLowerCase())
+          : true,
+      );
+      setSuggestions(filtered);
+      setSearchComplete(true);
+      return;
+    }
+
+    // Default scope with services: show local filter instantly, debounce network fallback
+    if (hasServices && scope.type === "default") {
+      const filtered = allServices.filter((s) =>
+        s.type === "service"
+          ? s.name.toLowerCase().includes((query || "").toLowerCase())
+          : true,
+      );
+      setSuggestions(filtered);
+      setSearchComplete(true);
+
+      // If local filter found matches, no need for network search
+      if (!query || filtered.length > 0) return;
+      setSearchComplete(false);
+    }
+
+    const handler = setTimeout(async () => {
+      if (stale || !open) return;
+
+      let results: Array<Mention>;
 
-      if (scope.type === "publication") {
-        // Search within the publication's documents
+      if (scope.type === "identities") {
+        results = await searchIdentities(query || "", 10);
+      } else if (scope.type === "publications") {
+        results = await searchPublications(query || "", 10);
+      } else if (scope.type === "publication") {
+        // Search within a specific publication's documents
         const documents = await callRPC(`search_publication_documents`, {
           publication_uri: scope.uri,
           query: query || "",
           limit: 10,
         });
-        setSuggestions(
-          documents.result.documents.map((d) => ({
-            type: "post" as const,
-            uri: d.uri,
-            title: d.title,
-            url: d.url,
-          })),
-        );
+        results = (documents?.result?.documents ?? []).map((d) => ({
+          type: "post" as const,
+          uri: d.uri,
+          title: d.title,
+          url: d.url,
+        }));
+      } else if (scope.type === "service") {
+        const res = await callRPC(`proxy_mention_search`, {
+          service_uri: scope.serviceUri,
+          search: query || "",
+          ...(scope.scope ? { scope: scope.scope } : {}),
+        });
+        const items: SearchService.Result[] = res?.result?.results ?? [];
+        results = items.map((r) => ({
+          type: "service_result" as const,
+          uri: r.uri,
+          name: r.name,
+          description: r.description,
+          labels: r.labels,
+          href: r.href,
+          icon: r.icon,
+          embed: r.embed,
+          subscope: r.subscope,
+        }));
+      } else if (hasServices) {
+        // Default scope with services: local filter showed no matches, fall back to identity search
+        results = await searchIdentities(query || "", 10);
       } else {
-        // Default scope: search people and publications
-        const agent = new Agent("https://public.api.bsky.app");
-        const [result, publications] = await Promise.all([
-          agent.searchActorsTypeahead({
-            q: query || "",
-            limit: 8,
-          }),
-          callRPC(`search_publication_names`, { query: query || "", limit: 8 }),
-        ]);
-        setSuggestions([
-          ...result.data.actors.map((actor) => ({
-            type: "did" as const,
-            handle: actor.handle,
-            did: actor.did,
-            displayName: actor.displayName,
-            avatar: actor.avatar,
-          })),
-          ...publications.result.publications.map((p) => ({
-            type: "publication" as const,
-            uri: p.uri,
-            name: p.name,
-            url: p.url,
-          })),
+        // Default scope, no services: search people & publications together
+        const [identities, publications] = await Promise.all([
+          searchIdentities(query || "", 8),
+          searchPublications(query || "", 8),
         ]);
+        results = [...identities, ...publications];
       }
-    },
-    300,
-    [query, scope],
-  );
+
+      if (!stale) {
+        setSuggestions(results);
+        setSearchComplete(true);
+      }
+    }, 300);
+
+    return () => {
+      stale = true;
+      clearTimeout(handler);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query, scope, open, hasServices, allServices, didScopableServices]);
 
   useEffect(() => {
     if (suggestionIndex > suggestions.length - 1) {
@@ -539,5 +1032,7 @@ function useMentionSuggestions(query: string | null) {
     setSuggestionIndex,
     scope,
     setScope: setScopeAndClear,
+    searchComplete,
+    hasDidScopableServices,
   };
 }
diff --git a/components/Pages/IframePageView.tsx b/components/Pages/IframePageView.tsx
new file mode 100644
index 00000000..3f37d70f
--- /dev/null
+++ b/components/Pages/IframePageView.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import React, { useMemo } from "react";
+import { useIframeChannel } from "src/hooks/useIframeChannel";
+import {
+  useColorAttribute,
+  colorToString,
+} from "components/ThemeManager/useColorAttribute";
+import { PageWrapper } from "./Page";
+
+export function IframePageView(props: {
+  url: string;
+  pageOptions?: React.ReactNode;
+  onOpen: (url: string) => void;
+}) {
+  let { iframeRef } = useIframeChannel({
+    onOpen: props.onOpen,
+    onReplaceWith: () => {},
+    onAddBelow: () => {},
+  });
+
+  let bgPage = useColorAttribute(null, "theme/page-background");
+  let primary = useColorAttribute(null, "theme/primary");
+  let iframeSrc = useMemo(() => {
+    let src = new URL(props.url);
+    src.searchParams.set("parts.page.embed.ctx.mode", "edit");
+    src.searchParams.set(
+      "parts.page.embed.ctx.bgColor",
+      `rgb(${colorToString(bgPage, "rgb")})`,
+    );
+    src.searchParams.set(
+      "parts.page.embed.ctx.primaryColor",
+      `rgb(${colorToString(primary, "rgb")})`,
+    );
+    return src.toString();
+  }, [props.url, bgPage, primary]);
+
+  return (
+    <PageWrapper
+      id={`iframe-page-${props.url}`}
+      isFocused={false}
+      fullPageScroll={false}
+      pageType="doc"
+      drawerOpen={false}
+      pageOptions={props.pageOptions}
+      noBottomSpacer
+      overflow="hidden"
+    >
+      <iframe
+        ref={iframeRef}
+        className="w-full h-full"
+        src={iframeSrc}
+        allow="fullscreen"
+        loading="lazy"
+      />
+    </PageWrapper>
+  );
+}
diff --git a/components/Pages/Page.tsx b/components/Pages/Page.tsx
index 20bd9774..0dc68515 100644
--- a/components/Pages/Page.tsx
+++ b/components/Pages/Page.tsx
@@ -107,6 +107,8 @@ export const PageWrapper = (props: {
   pageType: "canvas" | "doc";
   drawerOpen: boolean | undefined;
   fixedWidth?: boolean;
+  noBottomSpacer?: boolean;
+  overflow?: "scroll" | "hidden";
 }) => {
   const cardBorderHidden = useCardBorderHidden();
   let { ref } = usePreserveScroll<HTMLDivElement>(props.id);
@@ -129,7 +131,7 @@ export const PageWrapper = (props: {
       pageScrollWrapper
       grow
       shrink-0 snap-center
-      overflow-y-scroll
+      ${props.overflow === "hidden" ? "overflow-hidden" : "overflow-y-scroll"}
       ${
         !cardBorderHidden &&
         `h-full border
@@ -154,7 +156,7 @@ export const PageWrapper = (props: {
         `}
         >
           {props.children}
-          {props.pageType === "doc" && <div className="h-4 sm:h-6 w-full" />}
+          {props.pageType === "doc" && !props.noBottomSpacer && <div className="h-4 sm:h-6 w-full" />}
         </div>
       </div>
       {props.pageOptions}
diff --git a/components/Pages/index.tsx b/components/Pages/index.tsx
index c25dacf3..537a769e 100644
--- a/components/Pages/index.tsx
+++ b/components/Pages/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { useUIState } from "src/useUIState";
+import { useUIState, getEditorPageKey } from "src/useUIState";
 import { useSearchParams } from "next/navigation";
 
 import { useEntity } from "src/replicache";
@@ -10,6 +10,10 @@ import { useCardBorderHidden } from "./useCardBorderHidden";
 import { BookendSpacer, SandwichSpacer } from "components/LeafletLayout";
 import { LeafletSidebar } from "app/[leaflet_id]/Sidebar";
 import { Page } from "./Page";
+import { IframePageView } from "./IframePageView";
+import { PageOptionButton } from "./PageOptions";
+import { CloseTiny } from "components/Icons/CloseTiny";
+import { scrollIntoViewIfNeeded } from "src/utils/scrollIntoViewIfNeeded";
 
 export function Pages(props: { rootPage: string }) {
   let rootPage = useEntity(props.rootPage, "root/page")[0];
@@ -34,16 +38,59 @@ export function Pages(props: { rootPage: string }) {
       )}
 
       <Page entityID={firstPage} first fullPageScroll={fullPageScroll} />
-      {pages.map((page) => (
-        <React.Fragment key={page}>
-          <SandwichSpacer
-            onClick={(e) => {
-              e.currentTarget === e.target && blurPage();
-            }}
-          />
-          <Page entityID={page} fullPageScroll={false} />
-        </React.Fragment>
-      ))}
+      {pages.map((page) => {
+        let key = getEditorPageKey(page);
+        if (typeof page === "object") {
+          return (
+            <React.Fragment key={key}>
+              <SandwichSpacer
+                onClick={(e) => {
+                  e.currentTarget === e.target && blurPage();
+                }}
+              />
+              <IframePageView
+                url={page.url}
+                onOpen={(url) => {
+                  useUIState
+                    .getState()
+                    .openPage(page, { type: "iframe", url });
+                  requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                      scrollIntoViewIfNeeded(
+                        document.getElementById(`iframe-page-${url}`),
+                        false,
+                        "smooth",
+                        0.8,
+                      );
+                    });
+                  });
+                }}
+                pageOptions={
+                  <div className="pageOptions w-fit z-10 absolute sm:-right-[19px] right-3 sm:top-3 top-0 flex sm:flex-col flex-row-reverse gap-1 items-start">
+                    <PageOptionButton
+                      onClick={() =>
+                        useUIState.getState().closePage(page)
+                      }
+                    >
+                      <CloseTiny />
+                    </PageOptionButton>
+                  </div>
+                }
+              />
+            </React.Fragment>
+          );
+        }
+        return (
+          <React.Fragment key={key}>
+            <SandwichSpacer
+              onClick={(e) => {
+                e.currentTarget === e.target && blurPage();
+              }}
+            />
+            <Page entityID={page} fullPageScroll={false} />
+          </React.Fragment>
+        );
+      })}
       {!fullPageScroll && (
         <BookendSpacer
           onClick={(e) => {
diff --git a/components/RouteUIStateManger.tsx b/components/RouteUIStateManger.tsx
index b416158a..ee5e4ce6 100644
--- a/components/RouteUIStateManger.tsx
+++ b/components/RouteUIStateManger.tsx
@@ -1,9 +1,9 @@
 "use client";
-import { useUIState } from "src/useUIState";
+import { useUIState, type EditorOpenPage } from "src/useUIState";
 import { useEffect } from "react";
 import { usePathname } from "next/navigation";
 
-const routeOpenPages = new Map<string, string[]>();
+const routeOpenPages = new Map<string, EditorOpenPage[]>();
 let previousPathname = null as null | string;
 export const RouteUIStateManager = () => {
   const pathname = usePathname();
diff --git a/drizzle/schema.ts b/drizzle/schema.ts
index 2f44c62c..237c22bc 100644
--- a/drizzle/schema.ts
+++ b/drizzle/schema.ts
@@ -281,12 +281,14 @@ export const documents = pgTable("documents", {
 	bsky_like_count: integer("bsky_like_count").default(0).notNull(),
 	recommend_count: integer("recommend_count").default(0).notNull(),
 	indexed: boolean("indexed").default(false).notNull(),
+	identity_did: text("identity_did"),
 },
 (table) => {
 	return {
 		sort_date_idx: index("documents_sort_date_idx").on(table.uri, table.sort_date),
 		indexed_at_idx: index("documents_indexed_at_idx").on(table.indexed_at),
 		idx_documents_ranking: index("idx_documents_ranking").on(table.uri, table.sort_date, table.bsky_like_count, table.recommend_count),
+		identity_did_sort_idx: index("documents_identity_did_sort_idx").on(table.uri, table.sort_date, table.identity_did),
 	}
 });
 
diff --git a/feeds/index.ts b/feeds/index.ts
index a30e229f..b2066589 100644
--- a/feeds/index.ts
+++ b/feeds/index.ts
@@ -1,6 +1,6 @@
 import { Hono, HonoRequest } from "hono";
 import { serve } from "@hono/node-server";
-import { DidResolver } from "@atproto/identity";
+import { DidResolver, MemoryCache } from "@atproto/identity";
 import { parseReqNsid, verifyJwt } from "@atproto/xrpc-server";
 import { supabaseServerClient } from "supabase/serverClient";
 import {
@@ -9,6 +9,8 @@ import {
 } from "src/utils/normalizeRecords";
 import { inngest } from "app/api/inngest/client";
 import { AtUri } from "@atproto/api";
+import { wikipedia } from "../mentions/services/wikipedia";
+import { pokemon } from "../mentions/services/pokemon";
 
 const app = new Hono();
 
@@ -25,9 +27,53 @@ app.get("/.well-known/did.json", (c) => {
         type: "BskyFeedGenerator",
         serviceEndpoint: `https://${domain}`,
       },
+      {
+        id: "#mention_search",
+        type: "MentionSearchService",
+        serviceEndpoint: `https://${domain}`,
+      },
     ],
   });
 });
+
+// Mention search services, keyed by rkey
+const mentionServices: Record<
+  string,
+  (search: string, limit: number) => Promise<{ uri: string; name: string; href?: string; icon?: string; embed?: { src: string; width?: number; height?: number } }[]>
+> = {
+  wikipedia,
+  pokemon,
+};
+
+app.get("/xrpc/parts.page.mention.search", async (c) => {
+  const serviceUri = c.req.query("service");
+  const search = c.req.query("search");
+  const limit = Math.min(
+    Math.max(parseInt(c.req.query("limit") || "20"), 1),
+    50,
+  );
+
+  if (!serviceUri || !search) {
+    return c.json({ error: "missing required parameters: service, search" }, 400);
+  }
+
+  let rkey: string;
+  try {
+    const parsed = new AtUri(serviceUri);
+    rkey = parsed.rkey;
+  } catch {
+    return c.json({ error: "invalid service AT URI" }, 400);
+  }
+
+  const handler = mentionServices[rkey];
+  if (!handler) {
+    return c.json({ error: `unknown service: ${rkey}` }, 404);
+  }
+
+  const results = await handler(search, limit);
+  return c.json({ results });
+});
+
 //Cursor format ts::uri
 
 app.get("/xrpc/app.bsky.feed.getFeedSkeleton", async (c) => {
@@ -144,7 +190,7 @@ app.get("/xrpc/app.bsky.feed.getFeedSkeleton", async (c) => {
   });
 });
 
-const didResolver = new DidResolver({});
+const didResolver = new DidResolver({ didCache: new MemoryCache() });
 const validateAuth = async (
   req: HonoRequest,
   serviceDid: string,
diff --git a/lexicons/api/index.ts b/lexicons/api/index.ts
index 8bc2afd1..79f21ed8 100644
--- a/lexicons/api/index.ts
+++ b/lexicons/api/index.ts
@@ -23,6 +23,10 @@ import * as ComAtprotoRepoListRecords from './types/com/atproto/repo/listRecords
 import * as ComAtprotoRepoPutRecord from './types/com/atproto/repo/putRecord'
 import * as ComAtprotoRepoStrongRef from './types/com/atproto/repo/strongRef'
 import * as ComAtprotoRepoUploadBlob from './types/com/atproto/repo/uploadBlob'
+import * as PartsPageEmbedCtx from './types/parts/page/embed/ctx'
+import * as PartsPageMentionConfig from './types/parts/page/mention/config'
+import * as PartsPageMentionSearch from './types/parts/page/mention/search'
+import * as PartsPageMentionService from './types/parts/page/mention/service'
 import * as PubLeafletBlocksBlockquote from './types/pub/leaflet/blocks/blockquote'
 import * as PubLeafletBlocksBskyPost from './types/pub/leaflet/blocks/bskyPost'
 import * as PubLeafletBlocksButton from './types/pub/leaflet/blocks/button'
@@ -71,6 +75,10 @@ export * as ComAtprotoRepoListRecords from './types/com/atproto/repo/listRecords
 export * as ComAtprotoRepoPutRecord from './types/com/atproto/repo/putRecord'
 export * as ComAtprotoRepoStrongRef from './types/com/atproto/repo/strongRef'
 export * as ComAtprotoRepoUploadBlob from './types/com/atproto/repo/uploadBlob'
+export * as PartsPageEmbedCtx from './types/parts/page/embed/ctx'
+export * as PartsPageMentionConfig from './types/parts/page/mention/config'
+export * as PartsPageMentionSearch from './types/parts/page/mention/search'
+export * as PartsPageMentionService from './types/parts/page/mention/service'
 export * as PubLeafletBlocksBlockquote from './types/pub/leaflet/blocks/blockquote'
 export * as PubLeafletBlocksBskyPost from './types/pub/leaflet/blocks/bskyPost'
 export * as PubLeafletBlocksButton from './types/pub/leaflet/blocks/button'
@@ -121,6 +129,7 @@ export const PUB_LEAFLET_PAGES = {
 export class AtpBaseClient extends XrpcClient {
   app: AppNS
   com: ComNS
+  parts: PartsNS
   pub: PubNS
   site: SiteNS
 
@@ -128,6 +137,7 @@ export class AtpBaseClient extends XrpcClient {
     super(options, schemas)
     this.app = new AppNS(this)
     this.com = new ComNS(this)
+    this.parts = new PartsNS(this)
     this.pub = new PubNS(this)
     this.site = new SiteNS(this)
   }
@@ -395,6 +405,221 @@ export class ComAtprotoRepoNS {
   }
 }
 
+export class PartsNS {
+  _client: XrpcClient
+  page: PartsPageNS
+
+  constructor(client: XrpcClient) {
+    this._client = client
+    this.page = new PartsPageNS(client)
+  }
+}
+
+export class PartsPageNS {
+  _client: XrpcClient
+  mention: PartsPageMentionNS
+
+  constructor(client: XrpcClient) {
+    this._client = client
+    this.mention = new PartsPageMentionNS(client)
+  }
+}
+
+export class PartsPageMentionNS {
+  _client: XrpcClient
+  config: PartsPageMentionConfigRecord
+  service: PartsPageMentionServiceRecord
+
+  constructor(client: XrpcClient) {
+    this._client = client
+    this.config = new PartsPageMentionConfigRecord(client)
+    this.service = new PartsPageMentionServiceRecord(client)
+  }
+
+  search(
+    params?: PartsPageMentionSearch.QueryParams,
+    opts?: PartsPageMentionSearch.CallOptions,
+  ): Promise<PartsPageMentionSearch.Response> {
+    return this._client.call(
+      'parts.page.mention.search',
+      params,
+      undefined,
+      opts,
+    )
+  }
+}
+
+export class PartsPageMentionConfigRecord {
+  _client: XrpcClient
+
+  constructor(client: XrpcClient) {
+    this._client = client
+  }
+
+  async list(
+    params: OmitKey<ComAtprotoRepoListRecords.QueryParams, 'collection'>,
+  ): Promise<{
+    cursor?: string
+    records: { uri: string; value: PartsPageMentionConfig.Record }[]
+  }> {
+    const res = await this._client.call('com.atproto.repo.listRecords', {
+      collection: 'parts.page.mention.config',
+      ...params,
+    })
+    return res.data
+  }
+
+  async get(
+    params: OmitKey<ComAtprotoRepoGetRecord.QueryParams, 'collection'>,
+  ): Promise<{
+    uri: string
+    cid: string
+    value: PartsPageMentionConfig.Record
+  }> {
+    const res = await this._client.call('com.atproto.repo.getRecord', {
+      collection: 'parts.page.mention.config',
+      ...params,
+    })
+    return res.data
+  }
+
+  async create(
+    params: OmitKey<
+      ComAtprotoRepoCreateRecord.InputSchema,
+      'collection' | 'record'
+    >,
+    record: Un$Typed<PartsPageMentionConfig.Record>,
+    headers?: Record<string, string>,
+  ): Promise<{ uri: string; cid: string }> {
+    const collection = 'parts.page.mention.config'
+    const res = await this._client.call(
+      'com.atproto.repo.createRecord',
+      undefined,
+      {
+        collection,
+        rkey: 'self',
+        ...params,
+        record: { ...record, $type: collection },
+      },
+      { encoding: 'application/json', headers },
+    )
+    return res.data
+  }
+
+  async put(
+    params: OmitKey<
+      ComAtprotoRepoPutRecord.InputSchema,
+      'collection' | 'record'
+    >,
+    record: Un$Typed<PartsPageMentionConfig.Record>,
+    headers?: Record<string, string>,
+  ): Promise<{ uri: string; cid: string }> {
+    const collection = 'parts.page.mention.config'
+    const res = await this._client.call(
+      'com.atproto.repo.putRecord',
+      undefined,
+      { collection, ...params, record: { ...record, $type: collection } },
+      { encoding: 'application/json', headers },
+    )
+    return res.data
+  }
+
+  async delete(
+    params: OmitKey<ComAtprotoRepoDeleteRecord.InputSchema, 'collection'>,
+    headers?: Record<string, string>,
+  ): Promise<void> {
+    await this._client.call(
+      'com.atproto.repo.deleteRecord',
+      undefined,
+      { collection: 'parts.page.mention.config', ...params },
+      { headers },
+    )
+  }
+}
+
+export class PartsPageMentionServiceRecord {
+  _client: XrpcClient
+
+  constructor(client: XrpcClient) {
+    this._client = client
+  }
+
+  async list(
+    params: OmitKey<ComAtprotoRepoListRecords.QueryParams, 'collection'>,
+  ): Promise<{
+    cursor?: string
+    records: { uri: string; value: PartsPageMentionService.Record }[]
+  }> {
+    const res = await this._client.call('com.atproto.repo.listRecords', {
+      collection: 'parts.page.mention.service',
+      ...params,
+    })
+    return res.data
+  }
+
+  async get(
+    params: OmitKey<ComAtprotoRepoGetRecord.QueryParams, 'collection'>,
+  ): Promise<{
+    uri: string
+    cid: string
+    value: PartsPageMentionService.Record
+  }> {
+    const res = await this._client.call('com.atproto.repo.getRecord', {
+      collection: 'parts.page.mention.service',
+      ...params,
+    })
+    return res.data
+  }
+
+  async create(
+    params: OmitKey<
+      ComAtprotoRepoCreateRecord.InputSchema,
+      'collection' | 'record'
+    >,
+    record: Un$Typed<PartsPageMentionService.Record>,
+    headers?: Record<string, string>,
+  ): Promise<{ uri: string; cid: string }> {
+    const collection = 'parts.page.mention.service'
+    const res = await this._client.call(
+      'com.atproto.repo.createRecord',
+      undefined,
+      { collection, ...params, record: { ...record, $type: collection } },
+      { encoding: 'application/json', headers },
+    )
+    return res.data
+  }
+
+  async put(
+    params: OmitKey<
+      ComAtprotoRepoPutRecord.InputSchema,
+      'collection' | 'record'
+    >,
+    record: Un$Typed<PartsPageMentionService.Record>,
+    headers?: Record<string, string>,
+  ): Promise<{ uri: string; cid: string }> {
+    const collection = 'parts.page.mention.service'
+    const res = await this._client.call(
+      'com.atproto.repo.putRecord',
+      undefined,
+      { collection, ...params, record: { ...record, $type: collection } },
+      { encoding: 'application/json', headers },
+    )
+    return res.data
+  }
+
+  async delete(
+    params: OmitKey<ComAtprotoRepoDeleteRecord.InputSchema, 'collection'>,
+    headers?: Record<string, string>,
+  ): Promise<void> {
+    await this._client.call(
+      'com.atproto.repo.deleteRecord',
+      undefined,
+      { collection: 'parts.page.mention.service', ...params },
+      { headers },
+    )
+  }
+}
+
 export class PubNS {
   _client: XrpcClient
   leaflet: PubLeafletNS
diff --git a/lexicons/api/lexicons.ts b/lexicons/api/lexicons.ts
index 875405c2..6be2d1c4 100644
--- a/lexicons/api/lexicons.ts
+++ b/lexicons/api/lexicons.ts
@@ -1014,6 +1014,257 @@ export const schemaDict = {
       },
     },
   },
+  PartsPageEmbedCtx: {
+    lexicon: 1,
+    id: 'parts.page.embed.ctx',
+    defs: {
+      mode: {
+        type: 'string',
+        knownValues: ['edit', 'view'],
+      },
+      bgColor: {
+        type: 'string',
+      },
+      primaryColor: {
+        type: 'string',
+      },
+    },
+  },
+  PartsPageMentionConfig: {
+    lexicon: 1,
+    id: 'parts.page.mention.config',
+    defs: {
+      main: {
+        type: 'record',
+        key: 'literal:self',
+        description:
+          "User's configured mention services. Singleton record per user.",
+        record: {
+          type: 'object',
+          required: ['services'],
+          properties: {
+            services: {
+              type: 'array',
+              items: {
+                type: 'string',
+                format: 'at-uri',
+              },
+              maxLength: 50,
+              description:
+                'AT URIs of parts.page.mention.service records the user has enabled',
+            },
+          },
+        },
+      },
+    },
+  },
+  PartsPageMentionSearch: {
+    lexicon: 1,
+    id: 'parts.page.mention.search',
+    defs: {
+      main: {
+        type: 'query',
+        description:
+          'Search a mention service for matching results. A single XRPC host can serve multiple mention services, distinguished by the service AT URI.',
+        parameters: {
+          type: 'params',
+          required: ['service', 'search'],
+          properties: {
+            service: {
+              type: 'string',
+              format: 'at-uri',
+              description:
+                'AT URI of the parts.page.mention.service record identifying which service to query',
+            },
+            search: {
+              type: 'string',
+              description: 'Search query string',
+            },
+            scope: {
+              type: 'string',
+              description:
+                "Optional scope identifier to narrow results within a service, as returned by a previous result's subscope.scope field",
+            },
+            limit: {
+              type: 'integer',
+              minimum: 1,
+              maximum: 50,
+              default: 20,
+              description: 'Maximum number of results to return',
+            },
+          },
+        },
+        output: {
+          encoding: 'application/json',
+          schema: {
+            type: 'object',
+            required: ['results'],
+            properties: {
+              results: {
+                type: 'array',
+                items: {
+                  type: 'ref',
+                  ref: 'lex:parts.page.mention.search#result',
+                },
+                maxLength: 50,
+              },
+            },
+          },
+        },
+      },
+      result: {
+        type: 'object',
+        required: ['uri', 'name'],
+        properties: {
+          uri: {
+            type: 'string',
+            description: 'Identifier for the mentioned entity',
+          },
+          name: {
+            type: 'string',
+            description: 'Display name for the mentioned entity',
+          },
+          description: {
+            type: 'string',
+            description: 'A description for the mentioned entity',
+          },
+          labels: {
+            type: 'array',
+            items: {
+              type: 'ref',
+              ref: 'lex:parts.page.mention.search#mentionLabel',
+            },
+            description:
+              'A set of labels to be rendered with the mentionedEntity',
+          },
+          href: {
+            type: 'string',
+            format: 'uri',
+            description: 'Optional web URL for the mentioned entity',
+          },
+          icon: {
+            type: 'string',
+            format: 'uri',
+            description:
+              'Optional icon URL for the mentioned entity, displayed next to the mention',
+          },
+          embed: {
+            type: 'ref',
+            ref: 'lex:parts.page.mention.search#embedInfo',
+            description:
+              'Optional embed info for creating an embed block instead of an inline mention',
+          },
+          subscope: {
+            type: 'ref',
+            ref: 'lex:parts.page.mention.search#subscopeInfo',
+            description:
+              'Optional subscope info indicating this result can be scoped into for further searching',
+          },
+        },
+      },
+      mentionLabel: {
+        type: 'object',
+        properties: {
+          text: {
+            type: 'string',
+          },
+        },
+      },
+      embedInfo: {
+        type: 'object',
+        required: ['src'],
+        properties: {
+          src: {
+            type: 'string',
+            format: 'uri',
+            description: 'Source URL for the iframe embed',
+          },
+          width: {
+            type: 'integer',
+            minimum: 16,
+            maximum: 3200,
+            description: 'Default width of the embed in pixels',
+          },
+          height: {
+            type: 'integer',
+            minimum: 16,
+            maximum: 3200,
+            description: 'Default height of the embed in pixels',
+          },
+          aspectRatio: {
+            type: 'ref',
+            ref: 'lex:parts.page.mention.search#aspectRatio',
+            description:
+              'Aspect ratio of the embed. If provided, takes precedence over width/height for sizing.',
+          },
+        },
+      },
+      aspectRatio: {
+        type: 'object',
+        required: ['width', 'height'],
+        properties: {
+          width: {
+            type: 'integer',
+          },
+          height: {
+            type: 'integer',
+          },
+        },
+      },
+      subscopeInfo: {
+        type: 'object',
+        required: ['scope', 'label'],
+        properties: {
+          scope: {
+            type: 'string',
+            description:
+              'Scope identifier passed back to the service in subsequent search queries',
+          },
+          label: {
+            type: 'string',
+            maxLength: 100,
+            description:
+              "Display label for the scope-down button (e.g. 'Posts', 'Tracks')",
+          },
+        },
+      },
+    },
+  },
+  PartsPageMentionService: {
+    lexicon: 1,
+    id: 'parts.page.mention.service',
+    defs: {
+      main: {
+        type: 'record',
+        key: 'any',
+        description:
+          'Declares a mention service. The did is an XRPC service URL that implements parts.page.mention.search.',
+        record: {
+          type: 'object',
+          required: ['name', 'did'],
+          properties: {
+            name: {
+              type: 'string',
+              maxLength: 200,
+            },
+            description: {
+              type: 'string',
+              maxLength: 2000,
+            },
+            canBeScopedToDid: {
+              type: 'boolean',
+            },
+            did: {
+              type: 'string',
+              format: 'did',
+              description:
+                'DID of the service that implements parts.page.mention.search',
+            },
+          },
+        },
+      },
+    },
+  },
   PubLeafletBlocksBlockquote: {
     lexicon: 1,
     id: 'pub.leaflet.blocks.blockquote',
@@ -1150,6 +1401,22 @@ export const schemaDict = {
             minimum: 16,
             maximum: 1600,
           },
+          aspectRatio: {
+            type: 'ref',
+            ref: 'lex:pub.leaflet.blocks.iframe#aspectRatio',
+          },
+        },
+      },
+      aspectRatio: {
+        type: 'object',
+        required: ['width', 'height'],
+        properties: {
+          width: {
+            type: 'integer',
+          },
+          height: {
+            type: 'integer',
+          },
         },
       },
     },
@@ -2103,6 +2370,10 @@ export const schemaDict = {
             type: 'string',
             format: 'uri',
           },
+          href: {
+            type: 'string',
+            format: 'uri',
+          },
         },
       },
       code: {
@@ -2552,6 +2823,10 @@ export const ids = {
   ComAtprotoRepoPutRecord: 'com.atproto.repo.putRecord',
   ComAtprotoRepoStrongRef: 'com.atproto.repo.strongRef',
   ComAtprotoRepoUploadBlob: 'com.atproto.repo.uploadBlob',
+  PartsPageEmbedCtx: 'parts.page.embed.ctx',
+  PartsPageMentionConfig: 'parts.page.mention.config',
+  PartsPageMentionSearch: 'parts.page.mention.search',
+  PartsPageMentionService: 'parts.page.mention.service',
   PubLeafletBlocksBlockquote: 'pub.leaflet.blocks.blockquote',
   PubLeafletBlocksBskyPost: 'pub.leaflet.blocks.bskyPost',
   PubLeafletBlocksButton: 'pub.leaflet.blocks.button',
diff --git a/lexicons/api/types/parts/page/embed/ctx.ts b/lexicons/api/types/parts/page/embed/ctx.ts
new file mode 100644
index 00000000..458b7c96
--- /dev/null
+++ b/lexicons/api/types/parts/page/embed/ctx.ts
@@ -0,0 +1,19 @@
+/**
+ * GENERATED CODE - DO NOT MODIFY
+ */
+import { type ValidationResult, BlobRef } from '@atproto/lexicon'
+import { CID } from 'multiformats/cid'
+import { validate as _validate } from '../../../../lexicons'
+import {
+  type $Typed,
+  is$typed as _is$typed,
+  type OmitKey,
+} from '../../../../util'
+
+const is$typed = _is$typed,
+  validate = _validate
+const id = 'parts.page.embed.ctx'
+
+export type Mode = 'edit' | 'view' | (string & {})
+export type BgColor = string
+export type PrimaryColor = string
diff --git a/lexicons/api/types/parts/page/mention/config.ts b/lexicons/api/types/parts/page/mention/config.ts
new file mode 100644
index 00000000..5f2bb0d2
--- /dev/null
+++ b/lexicons/api/types/parts/page/mention/config.ts
@@ -0,0 +1,32 @@
+/**
+ * GENERATED CODE - DO NOT MODIFY
+ */
+import { type ValidationResult, BlobRef } from '@atproto/lexicon'
+import { CID } from 'multiformats/cid'
+import { validate as _validate } from '../../../../lexicons'
+import {
+  type $Typed,
+  is$typed as _is$typed,
+  type OmitKey,
+} from '../../../../util'
+
+const is$typed = _is$typed,
+  validate = _validate
+const id = 'parts.page.mention.config'
+
+export interface Record {
+  $type: 'parts.page.mention.config'
+  /** AT URIs of parts.page.mention.service records the user has enabled */
+  services: string[]
+  [k: string]: unknown
+}
+
+const hashRecord = 'main'
+
+export function isRecord<V>(v: V) {
+  return is$typed(v, id, hashRecord)
+}
+
+export function validateRecord<V>(v: V) {
+  return validate<Record & V>(v, id, hashRecord, true)
+}
diff --git a/lexicons/api/types/parts/page/mention/search.ts b/lexicons/api/types/parts/page/mention/search.ts
new file mode 100644
index 00000000..c2c45b98
--- /dev/null
+++ b/lexicons/api/types/parts/page/mention/search.ts
@@ -0,0 +1,145 @@
+/**
+ * GENERATED CODE - DO NOT MODIFY
+ */
+import { HeadersMap, XRPCError } from '@atproto/xrpc'
+import { type ValidationResult, BlobRef } from '@atproto/lexicon'
+import { CID } from 'multiformats/cid'
+import { validate as _validate } from '../../../../lexicons'
+import {
+  type $Typed,
+  is$typed as _is$typed,
+  type OmitKey,
+} from '../../../../util'
+
+const is$typed = _is$typed,
+  validate = _validate
+const id = 'parts.page.mention.search'
+
+export type QueryParams = {
+  /** AT URI of the parts.page.mention.service record identifying which service to query */
+  service: string
+  /** Search query string */
+  search: string
+  /** Optional scope identifier to narrow results within a service, as returned by a previous result's subscope.scope field */
+  scope?: string
+  /** Maximum number of results to return */
+  limit?: number
+}
+export type InputSchema = undefined
+
+export interface OutputSchema {
+  results: Result[]
+}
+
+export interface CallOptions {
+  signal?: AbortSignal
+  headers?: HeadersMap
+}
+
+export interface Response {
+  success: boolean
+  headers: HeadersMap
+  data: OutputSchema
+}
+
+export function toKnownErr(e: any) {
+  return e
+}
+
+export interface Result {
+  $type?: 'parts.page.mention.search#result'
+  /** Identifier for the mentioned entity */
+  uri: string
+  /** Display name for the mentioned entity */
+  name: string
+  /** A description for the mentioned entity */
+  description?: string
+  /** A set of labels to be rendered with the mentionedEntity */
+  labels?: MentionLabel[]
+  /** Optional web URL for the mentioned entity */
+  href?: string
+  /** Optional icon URL for the mentioned entity, displayed next to the mention */
+  icon?: string
+  embed?: EmbedInfo
+  subscope?: SubscopeInfo
+}
+
+const hashResult = 'result'
+
+export function isResult<V>(v: V) {
+  return is$typed(v, id, hashResult)
+}
+
+export function validateResult<V>(v: V) {
+  return validate<Result & V>(v, id, hashResult)
+}
+
+export interface MentionLabel {
+  $type?: 'parts.page.mention.search#mentionLabel'
+  text?: string
+}
+
+const hashMentionLabel = 'mentionLabel'
+
+export function isMentionLabel<V>(v: V) {
+  return is$typed(v, id, hashMentionLabel)
+}
+
+export function validateMentionLabel<V>(v: V) {
+  return validate<MentionLabel & V>(v, id, hashMentionLabel)
+}
+
+export interface EmbedInfo {
+  $type?: 'parts.page.mention.search#embedInfo'
+  /** Source URL for the iframe embed */
+  src: string
+  /** Default width of the embed in pixels */
+  width?: number
+  /** Default height of the embed in pixels */
+  height?: number
+  aspectRatio?: AspectRatio
+}
+
+const hashEmbedInfo = 'embedInfo'
+
+export function isEmbedInfo<V>(v: V) {
+  return is$typed(v, id, hashEmbedInfo)
+}
+
+export function validateEmbedInfo<V>(v: V) {
+  return validate<EmbedInfo & V>(v, id, hashEmbedInfo)
+}
+
+export interface AspectRatio {
+  $type?: 'parts.page.mention.search#aspectRatio'
+  width: number
+  height: number
+}
+
+const hashAspectRatio = 'aspectRatio'
+
+export function isAspectRatio<V>(v: V) {
+  return is$typed(v, id, hashAspectRatio)
+}
+
+export function validateAspectRatio<V>(v: V) {
+  return validate<AspectRatio & V>(v, id, hashAspectRatio)
+}
+
+export interface SubscopeInfo {
+  $type?: 'parts.page.mention.search#subscopeInfo'
+  /** Scope identifier passed back to the service in subsequent search queries */
+  scope: string
+  /** Display label for the scope-down button (e.g. 'Posts', 'Tracks') */
+  label: string
+}
+
+const hashSubscopeInfo = 'subscopeInfo'
+
+export function isSubscopeInfo<V>(v: V) {
+  return is$typed(v, id, hashSubscopeInfo)
+}
+
+export function validateSubscopeInfo<V>(v: V) {
+  return validate<SubscopeInfo & V>(v, id, hashSubscopeInfo)
+}
diff --git a/lexicons/api/types/parts/page/mention/service.ts b/lexicons/api/types/parts/page/mention/service.ts
new file mode 100644
index 00000000..d16a08a4
--- /dev/null
+++ b/lexicons/api/types/parts/page/mention/service.ts
@@ -0,0 +1,35 @@
+/**
+ * GENERATED CODE - DO NOT MODIFY
+ */
+import { type ValidationResult, BlobRef } from '@atproto/lexicon'
+import { CID } from 'multiformats/cid'
+import { validate as _validate } from '../../../../lexicons'
+import {
+  type $Typed,
+  is$typed as _is$typed,
+  type OmitKey,
+} from '../../../../util'
+
+const is$typed = _is$typed,
+  validate = _validate
+const id = 'parts.page.mention.service'
+
+export interface Record {
+  $type: 'parts.page.mention.service'
+  name: string
+  description?: string
+  canBeScopedToDid?: boolean
+  /** DID of the service that implements parts.page.mention.search */
+  did: string
+  [k: string]: unknown
+}
+
+const hashRecord = 'main'
+
+export function isRecord<V>(v: V) {
+  return is$typed(v, id, hashRecord)
+}
+
+export function validateRecord<V>(v: V) {
+  return validate<Record & V>(v, id, hashRecord, true)
+}
diff --git a/lexicons/api/types/pub/leaflet/blocks/iframe.ts b/lexicons/api/types/pub/leaflet/blocks/iframe.ts
index 8425a884..ccca2a6e 100644
--- a/lexicons/api/types/pub/leaflet/blocks/iframe.ts
+++ b/lexicons/api/types/pub/leaflet/blocks/iframe.ts
@@ -18,6 +18,7 @@ export interface Main {
   $type?: 'pub.leaflet.blocks.iframe'
   url: string
   height?: number
+  aspectRatio?: AspectRatio
 }
 
 const hashMain = 'main'
@@ -29,3 +30,19 @@ export function isMain<V>(v: V) {
 export function validateMain<V>(v: V) {
   return validate<Main & V>(v, id, hashMain)
 }
+
+export interface AspectRatio {
+  $type?: 'pub.leaflet.blocks.iframe#aspectRatio'
+  width: number
+  height: number
+}
+
+const hashAspectRatio = 'aspectRatio'
+
+export function isAspectRatio<V>(v: V) {
+  return is$typed(v, id, hashAspectRatio)
+}
+
+export function validateAspectRatio<V>(v: V) {
+  return validate<AspectRatio & V>(v, id, hashAspectRatio)
+}
diff --git a/lexicons/api/types/pub/leaflet/richtext/facet.ts b/lexicons/api/types/pub/leaflet/richtext/facet.ts
index dc8062c1..576c574d 100644
--- a/lexicons/api/types/pub/leaflet/richtext/facet.ts
+++ b/lexicons/api/types/pub/leaflet/richtext/facet.ts
@@ -97,6 +97,7 @@ export function validateDidMention<V>(v: V) {
 export interface AtMention {
   $type?: 'pub.leaflet.richtext.facet#atMention'
   atURI: string
+  href?: string
 }
 
 const hashAtMention = 'atMention'
diff --git a/lexicons/build.ts b/lexicons/build.ts
index 3f38f99e..b005bfa4 100644
--- a/lexicons/build.ts
+++ b/lexicons/build.ts
@@ -12,6 +12,7 @@ import { PubLeafletRichTextFacet } from "./src/facet";
 import { PubLeafletComment } from "./src/comment";
 import { PubLeafletAuthFullPermissions } from "./src/authFullPermissions";
 import { PubLeafletContent } from "./src/content";
+import * as MentionServiceLexicons from "./src/mentionService";
 
 const outdir = path.join("lexicons", "pub", "leaflet");
 
@@ -36,9 +37,23 @@ const lexicons = [
 ];
 
 // Write each lexicon to a file
-lexicons.forEach((lexicon) => {
+const allLexicons = [
+  ...lexicons,
+  ...Object.values(MentionServiceLexicons),
+];
+allLexicons.forEach((lexicon) => {
   let id = lexicon.id.split(".");
-  let folder = path.join(outdir, ...id.slice(2, -1));
+  // Determine output base and path segments based on namespace
+  let baseDir: string;
+  let segments: string[];
+  if (id[0] === "parts" && id[1] === "page") {
+    baseDir = path.join("lexicons", "parts", "page");
+    segments = id.slice(2, -1);
+  } else {
+    baseDir = outdir;
+    segments = id.slice(2, -1);
+  }
+  let folder = path.join(baseDir, ...segments);
   if (!fs.existsSync(folder)) fs.mkdirSync(folder, { recursive: true });
   const filename = path.join(folder, id[id.length - 1] + ".json");
   fs.writeFileSync(filename, JSON.stringify(lexicon, null, 2));
diff --git a/lexicons/parts/page/embed/ctx.json b/lexicons/parts/page/embed/ctx.json
new file mode 100644
index 00000000..5b5b32a2
--- /dev/null
+++ b/lexicons/parts/page/embed/ctx.json
@@ -0,0 +1,19 @@
+{
+  "lexicon": 1,
+  "id": "parts.page.embed.ctx",
+  "defs": {
+    "mode": {
+      "type": "string",
+      "knownValues": [
+        "edit",
+        "view"
+      ]
+    },
+    "bgColor": {
+      "type": "string"
+    },
+    "primaryColor": {
+      "type": "string"
+    }
+  }
+}
\ No newline at end of file
diff --git a/lexicons/parts/page/mention/config.json b/lexicons/parts/page/mention/config.json
new file mode 100644
index 00000000..1b9080fe
--- /dev/null
+++ b/lexicons/parts/page/mention/config.json
@@ -0,0 +1,28 @@
+{
+  "lexicon": 1,
+  "id": "parts.page.mention.config",
+  "defs": {
+    "main": {
+      "type": "record",
+      "key": "literal:self",
+      "description": "User's configured mention services. Singleton record per user.",
+      "record": {
+        "type": "object",
+        "required": [
+          "services"
+        ],
+        "properties": {
+          "services": {
+            "type": "array",
+            "items": {
+              "type": "string",
+              "format": "at-uri"
+            },
+            "maxLength": 50,
+            "description": "AT URIs of parts.page.mention.service records the user has enabled"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/lexicons/parts/page/mention/search.json b/lexicons/parts/page/mention/search.json
new file mode 100644
index 00000000..cfe92506
--- /dev/null
+++ b/lexicons/parts/page/mention/search.json
@@ -0,0 +1,178 @@
+{
+  "lexicon": 1,
+  "id": "parts.page.mention.search",
+  "defs": {
+    "main": {
+      "type": "query",
+      "description": "Search a mention service for matching results. A single XRPC host can serve multiple mention services, distinguished by the service AT URI.",
+      "parameters": {
+        "type": "params",
+        "required": [
+          "service",
+          "search"
+        ],
+        "properties": {
+          "service": {
+            "type": "string",
+            "format": "at-uri",
+            "description": "AT URI of the parts.page.mention.service record identifying which service to query"
+          },
+          "search": {
+            "type": "string",
+            "description": "Search query string"
+          },
+          "scope": {
+            "type": "string",
+            "description": "Optional scope identifier to narrow results within a service, as returned by a previous result's subscope.scope field"
+          },
+          "limit": {
+            "type": "integer",
+            "minimum": 1,
+            "maximum": 50,
+            "default": 20,
+            "description": "Maximum number of results to return"
+          }
+        }
+      },
+      "output": {
+        "encoding": "application/json",
+        "schema": {
+          "type": "object",
+          "required": [
+            "results"
+          ],
+          "properties": {
+            "results": {
+              "type": "array",
+              "items": {
+                "type": "ref",
+                "ref": "#result"
+              },
+              "maxLength": 50
+            }
+          }
+        }
+      }
+    },
+    "result": {
+      "type": "object",
+      "required": [
+        "uri",
+        "name"
+      ],
+      "properties": {
+        "uri": {
+          "type": "string",
+          "description": "Identifier for the mentioned entity"
+        },
+        "name": {
+          "type": "string",
+          "description": "Display name for the mentioned entity"
+        },
+        "description": {
+          "type": "string",
+          "description": "A description for the mentioned entity"
+        },
+        "labels": {
+          "type": "array",
+          "items": {
+            "type": "ref",
+            "ref": "#mentionLabel"
+          },
+          "description": "A set of labels to be rendered with the mentionedEntity"
+        },
+        "href": {
+          "type": "string",
+          "format": "uri",
+          "description": "Optional web URL for the mentioned entity"
+        },
+        "icon": {
+          "type": "string",
+          "format": "uri",
+          "description": "Optional icon URL for the mentioned entity, displayed next to the mention"
+        },
+        "embed": {
+          "type": "ref",
+          "ref": "#embedInfo",
+          "description": "Optional embed info for creating an embed block instead of an inline mention"
+        },
+        "subscope": {
+          "type": "ref",
+          "ref": "#subscopeInfo",
+          "description": "Optional subscope info indicating this result can be scoped into for further searching"
+        }
+      }
+    },
+    "mentionLabel": {
+      "type": "object",
+      "properties": {
+        "text": {
+          "type": "string"
+        }
+      }
+    },
+    "embedInfo": {
+      "type": "object",
+      "required": [
+        "src"
+      ],
+      "properties": {
+        "src": {
+          "type": "string",
+          "format": "uri",
+          "description": "Source URL for the iframe embed"
+        },
+        "width": {
+          "type": "integer",
+          "minimum": 16,
+          "maximum": 3200,
+          "description": "Default width of the embed in pixels"
+        },
+        "height": {
+          "type": "integer",
+          "minimum": 16,
+          "maximum": 3200,
+          "description": "Default height of the embed in pixels"
+        },
+        "aspectRatio": {
+          "type": "ref",
+          "ref": "#aspectRatio",
+          "description": "Aspect ratio of the embed. If provided, takes precedence over width/height for sizing."
+        }
+      }
+    },
+    "aspectRatio": {
+      "type": "object",
+      "required": [
+        "width",
+        "height"
+      ],
+      "properties": {
+        "width": {
+          "type": "integer"
+        },
+        "height": {
+          "type": "integer"
+        }
+      }
+    },
+    "subscopeInfo": {
+      "type": "object",
+      "required": [
+        "scope",
+        "label"
+      ],
+      "properties": {
+        "scope": {
+          "type": "string",
+          "description": "Scope identifier passed back to the service in subsequent search queries"
+        },
+        "label": {
+          "type": "string",
+          "maxLength": 100,
+          "description": "Display label for the scope-down button (e.g. 'Posts', 'Tracks')"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/lexicons/parts/page/mention/service.json b/lexicons/parts/page/mention/service.json
new file mode 100644
index 00000000..0679fc5b
--- /dev/null
+++ b/lexicons/parts/page/mention/service.json
@@ -0,0 +1,36 @@
+{
+  "lexicon": 1,
+  "id": "parts.page.mention.service",
+  "defs": {
+    "main": {
+      "type": "record",
+      "key": "any",
+      "description": "Declares a mention service. The did is an XRPC service URL that implements parts.page.mention.search.",
+      "record": {
+        "type": "object",
+        "required": [
+          "name",
+          "did"
+        ],
+        "properties": {
+          "name": {
+            "type": "string",
+            "maxLength": 200
+          },
+          "description": {
+            "type": "string",
+            "maxLength": 2000
+          },
+          "canBeScopedToDid": {
+            "type": "boolean"
+          },
+          "did": {
+            "type": "string",
+            "format": "did",
+            "description": "DID of the service that implements parts.page.mention.search"
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/lexicons/pub/leaflet/blocks/iframe.json b/lexicons/pub/leaflet/blocks/iframe.json
index 5c99a707..7e5445ba 100644
--- a/lexicons/pub/leaflet/blocks/iframe.json
+++ b/lexicons/pub/leaflet/blocks/iframe.json
@@ -16,6 +16,25 @@
           "type": "integer",
           "minimum": 16,
           "maximum": 1600
+        },
+        "aspectRatio": {
+          "type": "ref",
+          "ref": "#aspectRatio"
+        }
+      }
+    },
+    "aspectRatio": {
+      "type": "object",
+      "required": [
+        "width",
+        "height"
+      ],
+      "properties": {
+        "width": {
+          "type": "integer"
+        },
+        "height": {
+          "type": "integer"
         }
       }
     }
diff --git a/lexicons/pub/leaflet/richtext/facet.json b/lexicons/pub/leaflet/richtext/facet.json
index 70859735..9520868a 100644
--- a/lexicons/pub/leaflet/richtext/facet.json
+++ b/lexicons/pub/leaflet/richtext/facet.json
@@ -88,6 +88,10 @@
         "atURI": {
           "type": "string",
           "format": "uri"
+        },
+        "href": {
+          "type": "string",
+          "format": "uri"
         }
       }
     },
diff --git a/lexicons/src/blocks.ts b/lexicons/src/blocks.ts
index 237b2a65..198e1709 100644
--- a/lexicons/src/blocks.ts
+++ b/lexicons/src/blocks.ts
@@ -303,6 +303,18 @@ export const PubLeafletBlocksIFrame: LexiconDoc = {
       properties: {
         url: { type: "string", format: "uri" },
         height: { type: "integer", minimum: 16, maximum: 1600 },
+        aspectRatio: {
+          type: "ref",
+          ref: "#aspectRatio",
+        },
+      },
+    },
+    aspectRatio: {
+      type: "object",
+      required: ["width", "height"],
+      properties: {
+        width: { type: "integer" },
+        height: { type: "integer" },
       },
     },
   },
diff --git a/lexicons/src/facet.ts b/lexicons/src/facet.ts
index b942df88..00e19d57 100644
--- a/lexicons/src/facet.ts
+++ b/lexicons/src/facet.ts
@@ -19,7 +19,10 @@ const FacetItems: LexiconDoc["defs"] = {
     type: "object",
     description: "Facet feature for mentioning an AT URI.",
     required: ["atURI"],
-    properties: { atURI: { type: "string", format: "uri" } },
+    properties: {
+      atURI: { type: "string", format: "uri" },
+      href: { type: "string", format: "uri" },
+    },
   },
   code: {
     type: "object",
diff --git a/lexicons/src/mentionService.ts b/lexicons/src/mentionService.ts
new file mode 100644
index 00000000..ccc4a2dd
--- /dev/null
+++ b/lexicons/src/mentionService.ts
@@ -0,0 +1,231 @@
+import { LexiconDoc } from "@atproto/lexicon";
+
+export const PagePartsEmbedContext: LexiconDoc = {
+  lexicon: 1,
+  id: "parts.page.embed.ctx",
+  defs: {
+    mode: {
+      type: "string",
+      knownValues: ["edit", "view"],
+    },
+    bgColor: {
+      type: "string",
+    },
+    primaryColor: { type: "string" },
+  },
+};
+
+export const PagePartsMentionService: LexiconDoc = {
+  lexicon: 1,
+  id: "parts.page.mention.service",
+  defs: {
+    main: {
+      type: "record",
+      key: "any",
+      description:
+        "Declares a mention service. The did is an XRPC service URL that implements parts.page.mention.search.",
+      record: {
+        type: "object",
+        required: ["name", "did"],
+        properties: {
+          name: { type: "string", maxLength: 200 },
+          description: { type: "string", maxLength: 2000 },
+          canBeScopedToDid: { type: "boolean" },
+          did: {
+            type: "string",
+            format: "did",
+            description:
+              "DID of the service that implements parts.page.mention.search",
+          },
+        },
+      },
+    },
+  },
+};
+
+export const PagePartsMentionSearchService: LexiconDoc = {
+  lexicon: 1,
+  id: "parts.page.mention.search",
+  defs: {
+    main: {
+      type: "query",
+      description:
+        "Search a mention service for matching results. A single XRPC host can serve multiple mention services, distinguished by the service AT URI.",
+      parameters: {
+        type: "params",
+        required: ["service", "search"],
+        properties: {
+          service: {
+            type: "string",
+            format: "at-uri",
+            description:
+              "AT URI of the parts.page.mention.service record identifying which service to query",
+          },
+          search: {
+            type: "string",
+            description: "Search query string",
+          },
+          scope: {
+            type: "string",
+            description:
+              "Optional scope identifier to narrow results within a service, as returned by a previous result's subscope.scope field",
+          },
+          limit: {
+            type: "integer",
+            minimum: 1,
+            maximum: 50,
+            default: 20,
+            description: "Maximum number of results to return",
+          },
+        },
+      },
+      output: {
+        encoding: "application/json",
+        schema: {
+          type: "object",
+          required: ["results"],
+          properties: {
+            results: {
+              type: "array",
+              items: { type: "ref", ref: "#result" },
+              maxLength: 50,
+            },
+          },
+        },
+      },
+    },
+    result: {
+      type: "object",
+      required: ["uri", "name"],
+      properties: {
+        uri: {
+          type: "string",
+          description: "Identifier for the mentioned entity",
+        },
+        name: {
+          type: "string",
+          description: "Display name for the mentioned entity",
+        },
+        description: {
+          type: "string",
+          description: "A description for the mentioned entity",
+        },
+        labels: {
+          type: "array",
+          items: { type: "ref", ref: "#mentionLabel" },
+          description:
+            "A set of labels to be rendered with the mentionedEntity",
+        },
+        href: {
+          type: "string",
+          format: "uri",
+          description: "Optional web URL for the mentioned entity",
+        },
+        icon: {
+          type: "string",
+          format: "uri",
+          description:
+            "Optional icon URL for the mentioned entity, displayed next to the mention",
+        },
+        embed: {
+          type: "ref",
+          ref: "#embedInfo",
+          description:
+            "Optional embed info for creating an embed block instead of an inline mention",
+        },
+        subscope: {
+          type: "ref",
+          ref: "#subscopeInfo",
+          description:
+            "Optional subscope info indicating this result can be scoped into for further searching",
+        },
+      },
+    },
+    mentionLabel: {
+      type: "object",
+      properties: {
+        text: { type: "string" },
+      },
+    },
+    embedInfo: {
+      type: "object",
+      required: ["src"],
+      properties: {
+        src: {
+          type: "string",
+          format: "uri",
+          description: "Source URL for the iframe embed",
+        },
+        width: {
+          type: "integer",
+          minimum: 16,
+          maximum: 3200,
+          description: "Default width of the embed in pixels",
+        },
+        height: {
+          type: "integer",
+          minimum: 16,
+          maximum: 3200,
+          description: "Default height of the embed in pixels",
+        },
+        aspectRatio: {
+          type: "ref",
+          ref: "#aspectRatio",
+          description:
+            "Aspect ratio of the embed. If provided, takes precedence over width/height for sizing.",
+        },
+      },
+    },
+    aspectRatio: {
+      type: "object",
+      required: ["width", "height"],
+      properties: {
+        width: { type: "integer" },
+        height: { type: "integer" },
+      },
+    },
+    subscopeInfo: {
+      type: "object",
+      required: ["scope", "label"],
+      properties: {
+        scope: {
+          type: "string",
+          description:
+            "Scope identifier passed back to the service in subsequent search queries",
+        },
+        label: {
+          type: "string",
+          maxLength: 100,
+          description:
+            "Display label for the scope-down button (e.g. 'Posts', 'Tracks')",
+        },
+      },
+    },
+  },
+};
+
+export const PagePartsMentionConfig: LexiconDoc = {
+  lexicon: 1,
+  id: "parts.page.mention.config",
+  defs: {
+    main: {
+      type: "record",
+      key: "literal:self",
+      description:
+        "User's configured mention services. Singleton record per user.",
+      record: {
+        type: "object",
+        required: ["services"],
+        properties: {
+          services: {
+            type: "array",
+            items: { type: "string", format: "at-uri" },
+            maxLength: 50,
+            description:
+              "AT URIs of parts.page.mention.service records the user has enabled",
+          },
+        },
+      },
+    },
+  },
+};
diff --git a/mentions/services/pokemon.ts b/mentions/services/pokemon.ts
new file mode 100644
index 00000000..aaaaff94
--- /dev/null
+++ b/mentions/services/pokemon.ts
@@ -0,0 +1,39 @@
+import type { MentionResult } from "./types";
+
+type Result = MentionResult;
+
+let cachedPokemon: { name: string; url: string }[] | null = null;
+
+async function getAllPokemon() {
+  if (cachedPokemon) return cachedPokemon;
+  const res = await fetch("https://pokeapi.co/api/v2/pokemon?limit=1302");
+  if (!res.ok) return [];
+  const data = (await res.json()) as {
+    results: { name: string; url: string }[];
+  };
+  cachedPokemon = data.results;
+  return cachedPokemon;
+}
+
+function formatName(name: string) {
+  return name
+    .split("-")
+    .map((w) => w[0].toUpperCase() + w.slice(1))
+    .join(" ");
+}
+
+export async function pokemon(search: string, limit: number): Promise<Result[]> {
+  if (!search.trim()) return [];
+
+  const allPokemon = await getAllPokemon();
+  const query = search.toLowerCase();
+
+  return allPokemon
+    .filter((p) => p.name.includes(query))
+    .slice(0, limit)
+    .map((p) => ({
+      uri: `pokemon:${p.name}`,
+      name: formatName(p.name),
+      href: `https://pokemondb.net/pokedex/${p.name}`,
+    }));
+}
diff --git a/mentions/services/types.ts b/mentions/services/types.ts
new file mode 100644
index 00000000..9f14ac91
--- /dev/null
+++ b/mentions/services/types.ts
@@ -0,0 +1,11 @@
+export type MentionResult = {
+  uri: string;
+  name: string;
+  href?: string;
+  icon?: string;
+  embed?: {
+    src: string;
+    width?: number;
+    height?: number;
+  };
+};
diff --git a/mentions/services/wikipedia.ts b/mentions/services/wikipedia.ts
new file mode 100644
index 00000000..8146b8c6
--- /dev/null
+++ b/mentions/services/wikipedia.ts
@@ -0,0 +1,34 @@
+import type { MentionResult } from "./types";
+
+export async function wikipedia(search: string, limit: number): Promise<MentionResult[]> {
+  if (!search.trim()) return [];
+
+  const url = new URL("https://en.wikipedia.org/w/api.php");
+  url.searchParams.set("action", "opensearch");
+  url.searchParams.set("search", search);
+  url.searchParams.set("limit", String(limit));
+  url.searchParams.set("format", "json");
+
+  const res = await fetch(url.toString());
+  if (!res.ok) return [];
+
+  // OpenSearch returns [query, [titles], [descriptions], [urls]]
+  const data = (await res.json()) as [string, string[], string[], string[]];
+  const titles = data[1] || [];
+  const urls = data[3] || [];
+
+  return titles.map((title, i) => {
+    const articleUrl = urls[i] || `https://en.wikipedia.org/wiki/${encodeURIComponent(title)}`;
+    return {
+      uri: articleUrl,
+      name: title,
+      href: articleUrl,
+      icon: "https://en.wikipedia.org/static/apple-touch/wikipedia.png",
+      embed: {
+        src: `https://en.m.wikipedia.org/wiki/${encodeURIComponent(title)}?useskin=minerva`,
+        width: 600,
+        height: 400,
+      },
+    };
+  });
+}
diff --git a/package-lock.json b/package-lock.json
index 398787ca..ba57cb41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,7 @@
         "@yornaath/batshit": "^0.14.0",
         "babel-plugin-react-compiler": "^19.1.0-rc.1",
         "base64-js": "^1.5.1",
+        "capnweb": "^0.6.1",
         "colorjs.io": "^0.5.2",
         "drizzle-orm": "^0.30.10",
         "feed": "^5.1.0",
@@ -9932,6 +9933,12 @@
         "tslib": "^2.2.0"
       }
     },
+    "node_modules/capnweb": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/capnweb/-/capnweb-0.6.1.tgz",
+      "integrity": "sha512-fmhV26QPd1ewf5R74h55oVZnGwIcSaRMzbfLQUy8+zOBjuTmT3KXoT8wxHvnp1m9Ht9BoUUS5ZwNLoVLfQTyBg==",
+      "license": "MIT"
+    },
     "node_modules/cbor-extract": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/cbor-extract/-/cbor-extract-2.2.0.tgz",
diff --git a/package.json b/package.json
index 80f5c350..567657a5 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "dev": "TZ=UTC next dev --turbo",
     "publish-lexicons": "tsx lexicons/publish.ts",
     "generate-db-types": "supabase gen types --local > supabase/database.types.ts && drizzle-kit introspect && rm -rf ./drizzle/*.sql ./drizzle/meta",
-    "lexgen": "tsx ./lexicons/build.ts && lex gen-api ./lexicons/api ./lexicons/pub/leaflet/document.json ./lexicons/pub/leaflet/comment.json ./lexicons/pub/leaflet/publication.json ./lexicons/pub/leaflet/content.json ./lexicons/pub/leaflet/*/* ./lexicons/com/atproto/*/* ./lexicons/app/bsky/*/* ./lexicons/site/*/* ./lexicons/site/*/*/* --yes && tsx ./lexicons/fix-extensions.ts ./lexicons/api",
+    "lexgen": "tsx ./lexicons/build.ts && lex gen-api ./lexicons/api ./lexicons/pub/leaflet/document.json ./lexicons/pub/leaflet/comment.json ./lexicons/pub/leaflet/publication.json ./lexicons/pub/leaflet/content.json ./lexicons/pub/leaflet/*/* ./lexicons/com/atproto/*/* ./lexicons/app/bsky/*/* ./lexicons/site/*/* ./lexicons/site/*/*/* ./lexicons/parts/*/* ./lexicons/parts/*/*/* --yes && tsx ./lexicons/fix-extensions.ts ./lexicons/api",
     "wrangler-dev": "wrangler dev",
     "build-appview": "esbuild appview/index.ts --outfile=appview/dist/index.js --bundle --platform=node",
     "build-feed-service": "esbuild feeds/index.ts --outfile=feeds/dist/index.js --bundle --platform=node",
@@ -53,6 +53,7 @@
     "@yornaath/batshit": "^0.14.0",
     "babel-plugin-react-compiler": "^19.1.0-rc.1",
     "base64-js": "^1.5.1",
+    "capnweb": "^0.6.1",
     "colorjs.io": "^0.5.2",
     "drizzle-orm": "^0.30.10",
     "feed": "^5.1.0",
diff --git a/src/hooks/useIframeChannel.ts b/src/hooks/useIframeChannel.ts
new file mode 100644
index 00000000..9dfd7455
--- /dev/null
+++ b/src/hooks/useIframeChannel.ts
@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useRef } from "react";
+import { newMessagePortRpcSession } from "capnweb";
+import { PartsPageHost, PartsPageHandlers } from "src/partsPageChannel";
+
+export function useIframeChannel(options: PartsPageHandlers) {
+  let iframeElRef = useRef<HTMLIFrameElement | null>(null);
+  let handlersRef = useRef(options);
+  handlersRef.current = options;
+
+  let sessionRef = useRef<ReturnType<
+    typeof newMessagePortRpcSession
+  > | null>(null);
+
+  let cleanup = useCallback(() => {
+    if (sessionRef.current) {
+      sessionRef.current[Symbol.dispose]();
+      sessionRef.current = null;
+    }
+  }, []);
+
+  let handleMessage = useCallback(
+    (event: MessageEvent) => {
+      let iframe = iframeElRef.current;
+      if (!iframe?.contentWindow) return;
+      if (event.source !== iframe.contentWindow) return;
+      if (event.data?.type !== "parts.page.connect") return;
+
+      cleanup();
+
+      let { port1, port2 } = new MessageChannel();
+
+      let host = new PartsPageHost({
+        onOpen: (url) => handlersRef.current.onOpen(url),
+        onReplaceWith: (block) => handlersRef.current.onReplaceWith(block),
+        onAddBelow: (block) => handlersRef.current.onAddBelow(block),
+      });
+
+      try {
+        sessionRef.current = newMessagePortRpcSession(port1, host);
+      } catch (e) {
+        console.error("[parts.page] RPC session creation failed", e);
+        throw e;
+      }
+
+      iframe.contentWindow.postMessage({ type: "parts.page.channel" }, "*", [
+        port2,
+      ]);
+    },
+    [cleanup],
+  );
+
+  useEffect(() => {
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+      cleanup();
+    };
+  }, [handleMessage, cleanup]);
+
+  let iframeRef = useCallback(
+    (el: HTMLIFrameElement | null) => {
+      iframeElRef.current = el;
+    },
+    [],
+  );
+
+  return { iframeRef };
+}
diff --git a/src/partsPageChannel.ts b/src/partsPageChannel.ts
new file mode 100644
index 00000000..a88aca05
--- /dev/null
+++ b/src/partsPageChannel.ts
@@ -0,0 +1,37 @@
+import { RpcTarget } from "capnweb";
+
+export type EmbedBlockData =
+  | { type: "text"; content: string }
+  | {
+      type: "embed";
+      url: string;
+      height?: number;
+      aspectRatio?: string;
+    };
+
+export type PartsPageHandlers = {
+  onOpen: (url: string) => void;
+  onReplaceWith: (block: EmbedBlockData) => void;
+  onAddBelow: (block: EmbedBlockData) => void;
+};
+
+export class PartsPageHost extends RpcTarget {
+  #handlers: PartsPageHandlers;
+
+  constructor(handlers: PartsPageHandlers) {
+    super();
+    this.#handlers = handlers;
+  }
+
+  open(url: string) {
+    this.#handlers.onOpen(url);
+  }
+
+  replaceWith(block: EmbedBlockData) {
+    this.#handlers.onReplaceWith(block);
+  }
+
+  addBelow(block: EmbedBlockData) {
+    this.#handlers.onAddBelow(block);
+  }
+}
diff --git a/src/replicache/attributes.ts b/src/replicache/attributes.ts
index d857270e..eb59fa17 100644
--- a/src/replicache/attributes.ts
+++ b/src/replicache/attributes.ts
@@ -156,6 +156,10 @@ const EmbedBlockAttributes = {
     type: "number",
     cardinality: "one",
   },
+  "embed/aspect-ratio": {
+    type: "string",
+    cardinality: "one",
+  },
 } as const;
 
 const BlueskyPostBlockAttributes = {
diff --git a/src/useUIState.ts b/src/useUIState.ts
index 713fe980..7fd0047a 100644
--- a/src/useUIState.ts
+++ b/src/useUIState.ts
@@ -3,6 +3,13 @@ import { create } from "zustand";
 import { combine, createJSONStorage, persist } from "zustand/middleware";
 
 type SelectedBlock = Pick<Block, "value" | "parent">;
+
+export type EditorIframePage = { type: "iframe"; url: string };
+export type EditorOpenPage = string | EditorIframePage;
+
+export const getEditorPageKey = (page: EditorOpenPage): string =>
+  typeof page === "string" ? page : `iframe:${page.url}`;
+
 export const useUIState = create(
   combine(
     {
@@ -13,7 +20,7 @@ export const useUIState = create(
         | { entityType: "footnote"; entityID: string; parent: string }
         | null,
       foldedBlocks: [] as string[],
-      openPages: [] as string[],
+      openPages: [] as EditorOpenPage[],
       selectedBlocks: [] as SelectedBlock[],
       openPopover: null as string | null,
     },
@@ -30,9 +37,12 @@ export const useUIState = create(
           };
         });
       },
-      openPage: (parent: string, page: string) =>
+      openPage: (parent: EditorOpenPage, page: EditorOpenPage) =>
         set((state) => {
-          let parentPosition = state.openPages.findIndex((s) => s == parent);
+          let parentKey = getEditorPageKey(parent);
+          let parentPosition = state.openPages.findIndex(
+            (s) => getEditorPageKey(s) === parentKey,
+          );
           return {
             openPages:
               parentPosition === -1
@@ -40,10 +50,15 @@ export const useUIState = create(
                 : [...state.openPages.slice(0, parentPosition + 1), page],
           };
         }),
-      closePage: (pages: string | string[]) =>
-        set((s) => ({
-          openPages: s.openPages.filter((c) => ![pages].flat().includes(c)),
-        })),
+      closePage: (pages: EditorOpenPage | EditorOpenPage[]) =>
+        set((s) => {
+          let keys = [pages].flat().map(getEditorPageKey);
+          return {
+            openPages: s.openPages.filter(
+              (c) => !keys.includes(getEditorPageKey(c)),
+            ),
+          };
+        }),
       setFocusedBlock: (
         b:
           | { entityType: "page"; entityID: string }
diff --git a/src/utils/addLinkBlock.ts b/src/utils/addLinkBlock.ts
index 3fd79e01..36965e61 100644
--- a/src/utils/addLinkBlock.ts
+++ b/src/utils/addLinkBlock.ts
@@ -7,6 +7,7 @@ import { Replicache } from "replicache";
 import type { ReplicacheMutators } from "src/replicache";
 import { AtpAgent } from "@atproto/api";
 import { v7 } from "uuid";
+import { getAspectRatio } from "src/utils/aspectRatio";
 
 export async function addLinkBlock(
   url: string,
@@ -60,7 +61,7 @@ export async function addLinkBlock(
 
   if (data.data.links?.player?.[0]) {
     let embed = data.data.links?.player?.[0];
-    await rep.mutate.assertFact([
+    let facts: Parameters<typeof rep.mutate.assertFact>[0] = [
       {
         entity: entityID,
         attribute: "block/type",
@@ -74,15 +75,28 @@ export async function addLinkBlock(
           value: embed.href,
         },
       },
-      {
+    ];
+    let aspectRatio = getAspectRatio(embed.media);
+    if (aspectRatio) {
+      facts.push({
+        entity: entityID,
+        attribute: "embed/aspect-ratio",
+        data: {
+          type: "string",
+          value: aspectRatio,
+        },
+      });
+    } else {
+      facts.push({
         entity: entityID,
         attribute: "embed/height",
         data: {
           type: "number",
           value: embed.media?.height || 300,
         },
-      },
-    ]);
+      });
+    }
+    await rep.mutate.assertFact(facts);
     return;
   }
   await rep?.mutate.assertFact([
diff --git a/src/utils/aspectRatio.ts b/src/utils/aspectRatio.ts
new file mode 100644
index 00000000..9c30e01c
--- /dev/null
+++ b/src/utils/aspectRatio.ts
@@ -0,0 +1,42 @@
+export function gcd(a: number, b: number): number {
+  return b === 0 ? a : gcd(b, a % b);
+}
+
+// Find the simplest fraction close to a decimal by testing small denominators
+export function toFraction(
+  decimal: number,
+  maxDenominator = 100,
+): [number, number] {
+  let bestNum = 1,
+    bestDen = 1,
+    bestErr = Infinity;
+  for (let d = 1; d <= maxDenominator; d++) {
+    let n = Math.round(decimal * d);
+    let err = Math.abs(decimal - n / d);
+    if (err < bestErr) {
+      bestErr = err;
+      bestNum = n;
+      bestDen = d;
+      if (err < 1e-9) break;
+    }
+  }
+  let d = gcd(bestNum, bestDen);
+  return [bestNum / d, bestDen / d];
+}
+
+export function getAspectRatio(
+  media:
+    | { width?: number; height?: number; "aspect-ratio"?: number }
+    | undefined,
+): string | null {
+  if (!media) return null;
+  if (media["aspect-ratio"]) {
+    let [w, h] = toFraction(media["aspect-ratio"]);
+    return `${w}/${h}`;
+  }
+  if (media.width && media.height) {
+    let d = gcd(media.width, media.height);
+    return `${media.width / d}/${media.height / d}`;
+  }
+  return null;
+}
diff --git a/src/utils/focusPage.ts b/src/utils/focusPage.ts
index cc68de6f..2b330c0b 100644
--- a/src/utils/focusPage.ts
+++ b/src/utils/focusPage.ts
@@ -21,17 +21,19 @@ export async function focusPage(
     },
   }));
 
-  setTimeout(async () => {
-    //scroll to page
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      scrollIntoViewIfNeeded(
+        document.getElementById(elementId.page(pageID).container),
+        false,
+        "smooth",
+        0.8,
+      );
+    });
+  });
 
-    scrollIntoViewIfNeeded(
-      document.getElementById(elementId.page(pageID).container),
-      false,
-      "smooth",
-    );
-
-    // if we asked that the function focus the first block, focus the first block
-    if (focusFirstBlock === "focusFirstBlock") {
+  if (focusFirstBlock === "focusFirstBlock") {
+    setTimeout(async () => {
       let firstBlock = await rep.query(async (tx) => {
         let type = await scanIndex(tx).eav(pageID, "page/type");
         let blocks = await scanIndex(tx).eav(
@@ -68,6 +70,6 @@ export async function focusPage(
           focusBlock(firstBlock, { type: "start" });
         }, 500);
       }
-    }
-  }, 50);
+    }, 50);
+  }
 }
diff --git a/src/utils/mentionUtils.ts b/src/utils/mentionUtils.ts
index 8e97482f..dc72c766 100644
--- a/src/utils/mentionUtils.ts
+++ b/src/utils/mentionUtils.ts
@@ -4,6 +4,25 @@ import {
   isPublicationCollection,
 } from "src/utils/collectionHelpers";
 
+/**
+ * Safely classifies an AT URI string as publication, document, or unknown.
+ * Returns { isPublication: false, isDocument: false } for invalid/external URIs.
+ */
+export function classifyAtUri(atURI: string): {
+  isPublication: boolean;
+  isDocument: boolean;
+} {
+  try {
+    const uri = new AtUri(atURI);
+    return {
+      isPublication: isPublicationCollection(uri.collection),
+      isDocument: isDocumentCollection(uri.collection),
+    };
+  } catch {
+    return { isPublication: false, isDocument: false };
+  }
+}
+
 /**
  * Converts a DID to a Bluesky profile URL
  */
@@ -11,6 +30,16 @@ export function didToBlueskyUrl(did: string): string {
   return `https://bsky.app/profile/${did}`;
 }
 
+function tryAsHttpUrl(str: string): string | null {
+  try {
+    const url = new URL(str);
+    if (url.protocol === "http:" || url.protocol === "https:") return str;
+  } catch {
+    // Not a valid URL
+  }
+  return null;
+}
+
 /**
  * Converts an AT URI (publication or document) to the appropriate URL
  */
@@ -18,14 +47,14 @@ export function atUriToUrl(atUri: string): string {
   try {
     const uri = new AtUri(atUri);
 
-    if (isPublicationCollection(uri.collection)) {
-      return `/lish/uri/${encodeURIComponent(atUri)}`;
-    } else if (isDocumentCollection(uri.collection)) {
+    if (isPublicationCollection(uri.collection) || isDocumentCollection(uri.collection)) {
       return `/lish/uri/${encodeURIComponent(atUri)}`;
     }
 
-    return "#";
+    return tryAsHttpUrl(atUri) ?? "#";
   } catch (e) {
+    const httpUrl = tryAsHttpUrl(atUri);
+    if (httpUrl) return httpUrl;
     console.error("Failed to parse AT URI:", atUri, e);
     return "#";
   }
@@ -49,12 +78,6 @@ export function handleMentionClick(
     window.open(didToBlueskyUrl(value), "_blank", "noopener,noreferrer");
   } else {
     // Navigate to publication/document in same tab
-    const url = atUriToUrl(value);
-    if (url.startsWith("/lish/uri/")) {
-      // Redirect route - navigate to it
-      window.location.href = url;
-    } else {
-      window.location.href = url;
-    }
+    window.location.href = atUriToUrl(value);
   }
 }
diff --git a/src/utils/scrollIntoView.ts b/src/utils/scrollIntoView.ts
index ce2dd4de..27af1536 100644
--- a/src/utils/scrollIntoView.ts
+++ b/src/utils/scrollIntoView.ts
@@ -11,7 +11,7 @@ export function scrollIntoView(
   // pages from within other pages.
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
-      scrollIntoViewIfNeeded(element, false, "smooth");
+      scrollIntoViewIfNeeded(element, false, "smooth", threshold);
     });
   });
 }
diff --git a/src/utils/scrollIntoViewIfNeeded.ts b/src/utils/scrollIntoViewIfNeeded.ts
index 583d762d..74db1c23 100644
--- a/src/utils/scrollIntoViewIfNeeded.ts
+++ b/src/utils/scrollIntoViewIfNeeded.ts
@@ -2,25 +2,29 @@ export function scrollIntoViewIfNeeded(
   el: Element | null,
   centerIfNeeded: boolean = true,
   behavior?: ScrollBehavior,
+  threshold: number = 1,
 ) {
   if (!el) {
     return;
   }
-  let observer = new IntersectionObserver(function ([entry]) {
-    const ratio = entry.intersectionRatio;
+  let observer = new IntersectionObserver(
+    function ([entry]) {
+      const ratio = entry.intersectionRatio;
 
-    if (ratio < 1) {
-      let place =
-        ratio <= 0 && centerIfNeeded
-          ? ("center" as const)
-          : ("nearest" as const);
-      el.scrollIntoView({
-        block: place,
-        inline: place,
-        behavior: behavior ? behavior : "auto",
-      });
-    }
-    observer.disconnect();
-  });
+      if (ratio < threshold) {
+        let place =
+          ratio <= 0 && centerIfNeeded
+            ? ("center" as const)
+            : ("nearest" as const);
+        el.scrollIntoView({
+          block: place,
+          inline: place,
+          behavior: behavior ? behavior : "auto",
+        });
+      }
+      observer.disconnect();
+    },
+    { threshold: [0, threshold] },
+  );
   observer.observe(el);
 }
-- 
2.51.2


From e39c7bd8fdf0a2adfe5834edde61542b4840b84c Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Thu, 9 Apr 2026 23:32:15 -0400
Subject: [PATCH 08/13] order mention services

---
 components/Mention.tsx | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/components/Mention.tsx b/components/Mention.tsx
index 62fa84c2..0f3ca2e2 100644
--- a/components/Mention.tsx
+++ b/components/Mention.tsx
@@ -873,20 +873,24 @@ function useMentionServices(enabled: boolean): Array<Mention> {
     async () => {
       try {
         const result = await callRPC(`get_user_mention_services`, {});
-        return result.result.services.map(
-          (s: {
-            uri: string;
-            name: string;
-            description?: string;
-            canBeScopedToDid?: boolean;
-          }) => ({
-            type: "service" as const,
-            serviceUri: s.uri,
-            name: s.name,
-            description: s.description,
-            canBeScopedToDid: s.canBeScopedToDid,
-          }),
-        );
+        return result.result.services
+          .map(
+            (s: {
+              uri: string;
+              name: string;
+              description?: string;
+              canBeScopedToDid?: boolean;
+            }) => ({
+              type: "service" as const,
+              serviceUri: s.uri,
+              name: s.name,
+              description: s.description,
+              canBeScopedToDid: s.canBeScopedToDid,
+            }),
+          )
+          .sort((a: { name: string }, b: { name: string }) =>
+            a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
+          );
       } catch {
         return EMPTY_SERVICES;
       }
-- 
2.51.2


From acb13f86fe17425fd8b194599f2283b6146efc51 Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Fri, 10 Apr 2026 16:03:05 -0400
Subject: [PATCH 09/13] fix src check in embedblock

---
 components/Blocks/EmbedBlock.tsx | 52 +++++++++++---------------------
 1 file changed, 18 insertions(+), 34 deletions(-)

diff --git a/components/Blocks/EmbedBlock.tsx b/components/Blocks/EmbedBlock.tsx
index 2b22b6e5..220a9593 100644
--- a/components/Blocks/EmbedBlock.tsx
+++ b/components/Blocks/EmbedBlock.tsx
@@ -113,22 +113,6 @@ export const EmbedBlock = (props: BlockProps & { preview?: boolean }) => {
         .openPage(props.parent, { type: "iframe", url: openUrl });
       scrollIntoView(`iframe-page-${openUrl}`, "pages", 0.8);
     },
-    onReplaceWith: (block) => {
-      assertBlockData(props.entityID, block);
-    },
-    onAddBelow: async (block) => {
-      if (!rep) return;
-      let newEntityID = v7();
-      await rep.mutate.addBlock({
-        permission_set: entity_set.set,
-        factID: v7(),
-        parent: props.parent,
-        type: block.type === "text" ? "text" : "card",
-        position: generateKeyBetween(props.position, props.nextPosition),
-        newEntityID,
-      });
-      await assertBlockData(newEntityID, block);
-    },
   });
 
   useEffect(() => {
@@ -139,6 +123,24 @@ export const EmbedBlock = (props: BlockProps & { preview?: boolean }) => {
     } else input?.blur();
   }, [isSelected, props.entityID, props.preview]);
 
+  let bgPage = useColorAttribute(null, "theme/page-background");
+  let primary = useColorAttribute(null, "theme/primary");
+  let iframeSrc = useMemo(() => {
+    if (!url) return undefined;
+    let src = new URL(url.data.value);
+    src.searchParams.set("parts.page.embed.ctx.mode", "edit");
+    src.searchParams.set(
+      "parts.page.embed.ctx.bgColor",
+      `rgb(${colorToString(bgPage, "rgb")})`,
+    );
+    src.searchParams.set(
+      "parts.page.embed.ctx.primaryColor",
+      `rgb(${colorToString(primary, "rgb")})`,
+    );
+    return src.toString();
+  }, [url, bgPage, primary]);
+
+  if (props.preview) return null;
   if (!url) {
     if (!permissions.write) return null;
     return (
@@ -161,24 +163,6 @@ export const EmbedBlock = (props: BlockProps & { preview?: boolean }) => {
       </label>
     );
   }
-  let bgPage = useColorAttribute(null, "theme/page-background");
-  let primary = useColorAttribute(null, "theme/primary");
-  let iframeSrc = useMemo(() => {
-    if (!url) return undefined;
-    let src = new URL(url.data.value);
-    src.searchParams.set("parts.page.embed.ctx.mode", "edit");
-    src.searchParams.set(
-      "parts.page.embed.ctx.bgColor",
-      `rgb(${colorToString(bgPage, "rgb")})`,
-    );
-    src.searchParams.set(
-      "parts.page.embed.ctx.primaryColor",
-      `rgb(${colorToString(primary, "rgb")})`,
-    );
-    return src.toString();
-  }, [url, bgPage, primary]);
-
-  if (props.preview) return null;
 
   return (
     <div
-- 
2.51.2


From 1ab2e2b79bcaa3c074ca64b82c3368685aa0cd3c Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Fri, 10 Apr 2026 16:35:09 -0400
Subject: [PATCH 10/13] add back onreplacewith and onaddbelow

---
 components/Blocks/EmbedBlock.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/components/Blocks/EmbedBlock.tsx b/components/Blocks/EmbedBlock.tsx
index 220a9593..aefe1128 100644
--- a/components/Blocks/EmbedBlock.tsx
+++ b/components/Blocks/EmbedBlock.tsx
@@ -113,6 +113,22 @@ export const EmbedBlock = (props: BlockProps & { preview?: boolean }) => {
         .openPage(props.parent, { type: "iframe", url: openUrl });
       scrollIntoView(`iframe-page-${openUrl}`, "pages", 0.8);
     },
+    onReplaceWith: (block) => {
+      assertBlockData(props.entityID, block);
+    },
+    onAddBelow: async (block) => {
+      if (!rep) return;
+      let newEntityID = v7();
+      await rep.mutate.addBlock({
+        permission_set: entity_set.set,
+        factID: v7(),
+        parent: props.parent,
+        type: block.type === "text" ? "text" : "card",
+        position: generateKeyBetween(props.position, props.nextPosition),
+        newEntityID,
+      });
+      await assertBlockData(newEntityID, block);
+    },
   });
 
   useEffect(() => {
-- 
2.51.2


From f9dd251481f368053d749f06c26904ed6f3e029a Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Fri, 10 Apr 2026 16:41:59 -0400
Subject: [PATCH 11/13] pass theme color as hex

---
 app/lish/[did]/[publication]/[rkey]/PostContent.tsx | 5 ++---
 components/Blocks/EmbedBlock.tsx                    | 9 +++------
 components/Pages/IframePageView.tsx                 | 9 +++------
 3 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
index 9458effb..508916e8 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
@@ -38,7 +38,6 @@ import { slugify } from "src/utils/slugify";
 import { PostNotAvailable } from "components/Blocks/BlueskyPostBlock/BlueskyEmbed";
 import { useIframeChannel } from "src/hooks/useIframeChannel";
 import { usePubTheme } from "components/ThemeManager/PublicationThemeProvider";
-import { colorToString } from "components/ThemeManager/useColorAttribute";
 import { useDocument } from "contexts/DocumentContext";
 import { openPage as openPageAction } from "./postPageState";
 import { CheckboxChecked } from "components/Icons/CheckboxChecked";
@@ -511,11 +510,11 @@ function PublishedIframeBlock(props: {
   iframeSrc.searchParams.set("parts.page.embed.ctx.mode", "view");
   iframeSrc.searchParams.set(
     "parts.page.embed.ctx.bgColor",
-    `rgb(${colorToString(pubTheme.bgPage, "rgb")})`,
+    pubTheme.bgPage.toString("hex"),
   );
   iframeSrc.searchParams.set(
     "parts.page.embed.ctx.primaryColor",
-    `rgb(${colorToString(pubTheme.primary, "rgb")})`,
+    pubTheme.primary.toString("hex"),
   );
 
 
diff --git a/components/Blocks/EmbedBlock.tsx b/components/Blocks/EmbedBlock.tsx
index aefe1128..630853cf 100644
--- a/components/Blocks/EmbedBlock.tsx
+++ b/components/Blocks/EmbedBlock.tsx
@@ -23,10 +23,7 @@ import { getAspectRatio } from "src/utils/aspectRatio";
 import { useIframeChannel } from "src/hooks/useIframeChannel";
 import { scrollIntoView } from "src/utils/scrollIntoView";
 import { EmbedBlockData } from "src/partsPageChannel";
-import {
-  useColorAttribute,
-  colorToString,
-} from "components/ThemeManager/useColorAttribute";
+import { useColorAttribute } from "components/ThemeManager/useColorAttribute";
 
 export const EmbedBlock = (props: BlockProps & { preview?: boolean }) => {
   let entity_set = useEntitySetContext();
@@ -147,11 +144,11 @@ export const EmbedBlock = (props: BlockProps & { preview?: boolean }) => {
     src.searchParams.set("parts.page.embed.ctx.mode", "edit");
     src.searchParams.set(
       "parts.page.embed.ctx.bgColor",
-      `rgb(${colorToString(bgPage, "rgb")})`,
+      bgPage.toString("hex"),
     );
     src.searchParams.set(
       "parts.page.embed.ctx.primaryColor",
-      `rgb(${colorToString(primary, "rgb")})`,
+      primary.toString("hex"),
     );
     return src.toString();
   }, [url, bgPage, primary]);
diff --git a/components/Pages/IframePageView.tsx b/components/Pages/IframePageView.tsx
index 3f37d70f..8ed675ba 100644
--- a/components/Pages/IframePageView.tsx
+++ b/components/Pages/IframePageView.tsx
@@ -2,10 +2,7 @@
 
 import React, { useMemo } from "react";
 import { useIframeChannel } from "src/hooks/useIframeChannel";
-import {
-  useColorAttribute,
-  colorToString,
-} from "components/ThemeManager/useColorAttribute";
+import { useColorAttribute } from "components/ThemeManager/useColorAttribute";
 import { PageWrapper } from "./Page";
 
 export function IframePageView(props: {
@@ -26,11 +23,11 @@ export function IframePageView(props: {
     src.searchParams.set("parts.page.embed.ctx.mode", "edit");
     src.searchParams.set(
       "parts.page.embed.ctx.bgColor",
-      `rgb(${colorToString(bgPage, "rgb")})`,
+      bgPage.toString("hex"),
     );
     src.searchParams.set(
       "parts.page.embed.ctx.primaryColor",
-      `rgb(${colorToString(primary, "rgb")})`,
+      primary.toString("hex"),
     );
     return src.toString();
   }, [props.url, bgPage, primary]);
-- 
2.51.2


From a522e97e52641e545e054ee183c9367f618d6177 Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Sat, 11 Apr 2026 17:01:33 -0400
Subject: [PATCH 12/13] pass aspect ratio to published iframes

---
 app/lish/[did]/[publication]/[rkey]/PostContent.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
index 508916e8..f7b39074 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
@@ -209,6 +209,7 @@ export let Block = ({
         <PublishedIframeBlock
           url={b.block.url}
           height={b.block.height}
+          aspectRatio={b.block.aspectRatio}
           pageId={pageId}
         />
       );
@@ -491,6 +492,7 @@ export let Block = ({
 function PublishedIframeBlock(props: {
   url: string;
   height?: number;
+  aspectRatio?: PubLeafletBlocksIframe.AspectRatio;
   pageId?: string;
 }) {
   let parentPage = props.pageId
@@ -518,12 +520,15 @@ function PublishedIframeBlock(props: {
   );
 
 
+  let aspectRatio = props.aspectRatio
+    ? `${props.aspectRatio.width}/${props.aspectRatio.height}`
+    : undefined;
+
   return (
     <iframe
       ref={iframeRef}
-      className="flex flex-col relative w-full overflow-hidden group/embedBlock block-border my-2"
-      width="100%"
-      height={props.height}
+      className={`relative w-full overflow-hidden group/embedBlock block-border my-2 ${aspectRatio ? "h-auto" : ""}`}
+      style={aspectRatio ? { aspectRatio } : { height: props.height }}
       src={iframeSrc.toString()}
       allow="fullscreen"
       loading="lazy"
-- 
2.51.2


From 44e7c34a867ec9c1ba8f22fe893d850a05f6a861 Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Wed, 15 Apr 2026 10:38:30 -0400
Subject: [PATCH 13/13] handle invoice paid events

---
 app/api/inngest/client.ts        |  7 +++++++
 app/api/webhooks/stripe/route.ts | 23 +++++++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/app/api/inngest/client.ts b/app/api/inngest/client.ts
index f9b1093d..dfed7189 100644
--- a/app/api/inngest/client.ts
+++ b/app/api/inngest/client.ts
@@ -82,6 +82,13 @@ export type Events = {
       subscriptionId: string;
     };
   };
+  "stripe/invoice.payment.succeeded": {
+    data: {
+      invoiceId: string;
+      subscriptionId: string;
+      customerId: string;
+    };
+  };
   "stripe/invoice.payment.failed": {
     data: {
       invoiceId: string;
diff --git a/app/api/webhooks/stripe/route.ts b/app/api/webhooks/stripe/route.ts
index 576790ba..404c91e7 100644
--- a/app/api/webhooks/stripe/route.ts
+++ b/app/api/webhooks/stripe/route.ts
@@ -57,6 +57,29 @@ export async function POST(req: NextRequest) {
       break;
     }
 
+    case "invoice.payment_succeeded": {
+      const invoice = event.data.object;
+      const sub = invoice.parent?.subscription_details?.subscription;
+      const subId =
+        typeof sub === "string"
+          ? sub
+          : typeof sub === "object" && sub
+            ? sub.id
+            : "";
+      if (subId) {
+        await inngest.send({
+          name: "stripe/invoice.payment.succeeded",
+          data: {
+            invoiceId: invoice.id,
+            subscriptionId: subId,
+            customerId: invoice.customer as string,
+          },
+        });
+        await handleSubscriptionUpdated(subId);
+      }
+      break;
+    }
+
     case "invoice.payment_failed": {
       const invoice = event.data.object;
       const sub = invoice.parent?.subscription_details?.subscription;