diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 83bca7480..e6ed4e1e4 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -66,7 +66,7 @@ jobs:
         run: deno task build
         working-directory: lb
 
-  test:
+  check:
     runs-on: ubuntu-22.04
     if: github.event_name != 'push'
     steps:
@@ -80,17 +80,13 @@ jobs:
 
       - uses: Swatinem/rust-cache@v2
 
-      - name: Setup postgres for tests
-        run: docker compose up -d
-
-      - name: Build
-        run: cargo build --all-targets --tests
-        working-directory: api
-
       - name: Format
         run: cargo fmt --all -- --check
         working-directory: api
 
+      - name: Setup postgres for tests
+        run: docker compose up -d
+
       - uses: taiki-e/cache-cargo-install-action@v3
         with:
           tool: sqlx-cli@0.7.1
@@ -98,7 +94,7 @@ jobs:
       - name: Check sqlx metadata is up to date
         run: |
           cargo sqlx migrate run
-          cargo sqlx prepare --check
+          cargo sqlx prepare --check -- --all-targets
         working-directory: api
         env:
           DATABASE_URL: postgres://user:password@localhost/registry
@@ -107,6 +103,27 @@ jobs:
         run: cargo clippy --all-targets --all-features -- -D warnings
         working-directory: api
 
+  test:
+    runs-on: ubuntu-22.04
+    if: github.event_name != 'push'
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v6
+        with:
+          lfs: true
+
+      - name: Install Rust
+        uses: dsherret/rust-toolchain-file@v1
+
+      - uses: Swatinem/rust-cache@v2
+
+      - name: Setup postgres for tests
+        run: docker compose up -d
+
+      - name: Build
+        run: cargo build --all-targets --tests
+        working-directory: api
+
       - name: Test
         run: cargo test
         working-directory: api
diff --git a/Cargo.lock b/Cargo.lock
index bf20df618..35d34031e 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1187,9 +1187,9 @@ dependencies = [
 
 [[package]]
 name = "deno_doc"
-version = "0.193.0"
+version = "0.194.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d03db8870d046379f6e2aa5326d21340e7f9d937ae79e06f8bf3e86dfb6340f7"
+checksum = "1264b31a19f293d6f14d3633053a1450ac3b863fa73ed5f5ba1fb10f89c07cd6"
 dependencies = [
  "anyhow",
  "cfg-if",
@@ -1209,6 +1209,7 @@ dependencies = [
  "serde",
  "serde-wasm-bindgen",
  "serde_json",
+ "similar",
  "termcolor",
  "url",
  "wasm-bindgen",
@@ -4558,6 +4559,12 @@ dependencies = [
  "rand_core",
 ]
 
+[[package]]
+name = "similar"
+version = "2.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbbb5d9659141646ae647b42fe094daf6c6192d1620870b449d9557f748b2daa"
+
 [[package]]
 name = "simple_asn1"
 version = "0.6.2"
diff --git a/api/Cargo.toml b/api/Cargo.toml
index a3292ca4f..2da6796bf 100644
--- a/api/Cargo.toml
+++ b/api/Cargo.toml
@@ -83,7 +83,7 @@ async-compression = { version = "0.4", features = ["futures-io", "gzip"] }
 deno_graph = "=0.107.0"
 deno_ast = { version = "0.53.0", features = ["view"] }
 # sync with frontend/deno.json
-deno_doc = { version = "=0.193.0", features = ["comrak"] }
+deno_doc = { version = "=0.194.0", features = ["comrak"] }
 deno_error = "0.7.0"
 comrak = { version = "0.29.0", default-features = false }
 ammonia = "4.0.0"
diff --git a/api/src/analysis.rs b/api/src/analysis.rs
index 8eb790a8e..6e645eaaa 100644
--- a/api/src/analysis.rs
+++ b/api/src/analysis.rs
@@ -253,6 +253,7 @@ async fn analyze_package_inner(
   let info = crate::docs::get_docs_info(&exports, None);
 
   let ctx = crate::docs::get_generate_ctx(
+    "/doc".to_string(),
     doc_nodes,
     main_entrypoint,
     info.rewrite_map,
@@ -270,6 +271,7 @@ async fn analyze_package_inner(
       bun: None,
     },
     registry_url.to_string(),
+    None,
   );
   let search_index = deno_doc::html::generate_search_index(&ctx);
   let doc_search_json = if let serde_json::Value::Object(mut obj) = search_index
diff --git a/api/src/api/errors.rs b/api/src/api/errors.rs
index 5dfde1d06..695322c3e 100644
--- a/api/src/api/errors.rs
+++ b/api/src/api/errors.rs
@@ -44,6 +44,10 @@ errors!(
     status: NOT_FOUND,
     "The requested package version was not found.",
   },
+  DiffNoIndex {
+    status: NOT_FOUND,
+    "Diffs do not have an index.",
+  },
   EntrypointOrSymbolNotFound {
     status: NOT_FOUND,
     "The requested entrypoint or symbol was not found.",
diff --git a/api/src/api/package.rs b/api/src/api/package.rs
index 257caef0b..d5bd82a4e 100644
--- a/api/src/api/package.rs
+++ b/api/src/api/package.rs
@@ -83,14 +83,14 @@ use crate::provenance;
 use crate::publish::publish_task;
 use crate::tarball::bucket_tarball_path;
 use crate::util;
-use crate::util::ApiResult;
-use crate::util::CacheDuration;
 use crate::util::LicenseStore;
 use crate::util::RequestIdExt;
 use crate::util::VersionOrLatest;
 use crate::util::decode_json;
 use crate::util::pagination;
 use crate::util::search;
+use crate::util::{ApiResult, docs_queries};
+use crate::util::{CacheDuration, DocsQueries};
 
 use super::ApiCreatePackageRequest;
 use super::ApiDependency;
@@ -181,6 +181,10 @@ pub fn package_router() -> Router<Body, ApiError> {
       "/:package/versions/:version/source",
       util::cache(CacheDuration::ONE_MINUTE, util::json(get_source_handler)),
     )
+    .get(
+      "/:package/diff/:old_version/:new_version",
+      util::cache(CacheDuration::ONE_MINUTE, util::json(get_diff_handler)),
+    )
     .get(
       "/:package/versions/:version/dependencies",
       util::json(list_dependencies_handler),
@@ -1198,31 +1202,18 @@ pub async fn get_docs_handler(
   Span::current().record("scope", field::display(&scope));
   Span::current().record("package", field::display(&package_name));
   Span::current().record("version", field::display(&version_or_latest));
-  let all_symbols = req.query("all_symbols").is_some();
+  let DocsQueries {
+    all_symbols,
+    entrypoint,
+    symbol,
+  } = docs_queries(&req)?;
+
   Span::current().record("all_symbols", field::display(&all_symbols));
-  let entrypoint = req.query("entrypoint").map(|s| match s.as_str() {
-    "" => ".",
-    s => s,
-  });
   Span::current()
     .record("entrypoint", field::display(&entrypoint.unwrap_or("")));
-
-  let symbol = req
-    .query("symbol")
-    .and_then(|s| match s.as_str() {
-      "" => None,
-      s => Some(urlencoding::decode(s)),
-    })
-    .transpose()?;
   Span::current()
     .record("symbol", field::display(&symbol.as_deref().unwrap_or("")));
 
-  if all_symbols && (entrypoint.is_some() || symbol.is_some()) {
-    return Err(ApiError::MalformedRequest {
-      msg: "Cannot specify both all_symbols and entrypoint".into(),
-    });
-  }
-
   let db = req.data::<Database>().unwrap();
   let buckets = req.data::<Buckets>().unwrap();
   let (package, repo, _) = db
@@ -1245,6 +1236,7 @@ pub async fn get_docs_handler(
   let docs_path =
     crate::gcs_paths::docs_v1_path(&scope, &package_name, &version.version);
   let doc_nodes_fut = buckets.docs_bucket.download(docs_path.into());
+
   let readme_fut = if !all_symbols && entrypoint.is_none() && symbol.is_none() {
     if let Some(readme_path) = &version.readme_path {
       let gcs_path = crate::gcs_paths::file_path(
@@ -1276,6 +1268,7 @@ pub async fn get_docs_handler(
   })?;
   let doc_nodes: DocNodesByUrl =
     serde_json::from_slice(&docs).context("failed to parse doc nodes")?;
+
   let readme = readme.and_then(|readme| {
     std::str::from_utf8(&readme).ok().map(ToOwned::to_owned)
   });
@@ -1305,6 +1298,7 @@ pub async fn get_docs_handler(
   };
 
   let docs = crate::docs::generate_docs_html(
+    "/doc".to_string(),
     doc_nodes,
     docs_info.main_entrypoint,
     docs_info.rewrite_map,
@@ -1318,6 +1312,7 @@ pub async fn get_docs_handler(
     package.runtime_compat,
     registry_url,
     package.readme_source,
+    None,
   )
   .map_err(|e| {
     error!("failed to generate docs: {}", e);
@@ -1393,6 +1388,7 @@ pub async fn get_docs_search_handler(
   let registry_url = req.data::<RegistryUrl>().unwrap().0.to_string();
 
   let ctx = crate::docs::get_generate_ctx(
+    "/doc".to_string(),
     doc_nodes,
     docs_info.main_entrypoint,
     docs_info.rewrite_map,
@@ -1404,6 +1400,7 @@ pub async fn get_docs_search_handler(
     false,
     package.runtime_compat,
     registry_url,
+    None,
   );
 
   let search_index = deno_doc::html::generate_search_index(&ctx);
@@ -1464,6 +1461,7 @@ pub async fn get_docs_search_structured_handler(
   let registry_url = req.data::<RegistryUrl>().unwrap().0.to_string();
 
   let docs = crate::docs::generate_docs_html(
+    "/doc".to_string(),
     doc_nodes,
     docs_info.main_entrypoint,
     docs_info.rewrite_map,
@@ -1477,6 +1475,7 @@ pub async fn get_docs_search_structured_handler(
     package.runtime_compat,
     registry_url,
     package.readme_source,
+    None,
   )
   .map_err(|e| {
     error!("failed to generate docs: {}", e);
@@ -1659,6 +1658,164 @@ pub async fn get_source_handler(
   })
 }
 
+#[instrument(
+  name = "GET /api/scopes/:scope/packages/:package/diff/:old_version/:new_version",
+  skip(req),
+  err,
+  fields(scope, package, version, all_symbols, entrypoint, symbol)
+)]
+pub async fn get_diff_handler(
+  req: Request<Body>,
+) -> ApiResult<ApiPackageVersionDocs> {
+  let scope = req.param_scope()?;
+  let package_name = req.param_package()?;
+  Span::current().record("scope", field::display(&scope));
+  Span::current().record("package", field::display(&package_name));
+
+  let old_version = util::param(&req, "old_version")?;
+  let old_version = Version::try_from(old_version.as_str()).map_err(|err| {
+    let msg =
+      format!("failed to parse path parameter 'old_version': {err}").into();
+    ApiError::MalformedRequest { msg }
+  })?;
+  Span::current().record("old_version", field::display(&old_version));
+
+  let new_version = util::param(&req, "new_version")?;
+  let new_version = Version::try_from(new_version.as_str()).map_err(|err| {
+    let msg =
+      format!("failed to parse path parameter 'new_version': {err}").into();
+    ApiError::MalformedRequest { msg }
+  })?;
+  Span::current().record("new_version", field::display(&new_version));
+
+  let DocsQueries {
+    all_symbols,
+    entrypoint,
+    symbol,
+  } = docs_queries(&req)?;
+  if !all_symbols && entrypoint.is_none() {
+    return Err(ApiError::DiffNoIndex);
+  }
+
+  Span::current().record("all_symbols", field::display(&all_symbols));
+  Span::current()
+    .record("entrypoint", field::display(&entrypoint.unwrap_or("")));
+  Span::current()
+    .record("symbol", field::display(&symbol.as_deref().unwrap_or("")));
+
+  let full = req.query("full").is_some();
+  Span::current().record("full", field::display(full));
+
+  let db = req.data::<Database>().unwrap();
+  let buckets = req.data::<Buckets>().unwrap();
+  let (package, repo, _) = db
+    .get_package(&scope, &package_name)
+    .await?
+    .ok_or(ApiError::PackageNotFound)?;
+
+  let old_version = db
+    .get_package_version(&scope, &package_name, &old_version)
+    .await?
+    .ok_or(ApiError::PackageVersionNotFound)?;
+  let new_version = db
+    .get_package_version(&scope, &package_name, &new_version)
+    .await?
+    .ok_or(ApiError::PackageVersionNotFound)?;
+
+  let old_docs_path =
+    crate::gcs_paths::docs_v1_path(&scope, &package_name, &old_version.version);
+  let old_doc_nodes_fut = buckets.docs_bucket.download(old_docs_path.into());
+  let new_docs_path =
+    crate::gcs_paths::docs_v1_path(&scope, &package_name, &new_version.version);
+  let new_doc_nodes_fut = buckets.docs_bucket.download(new_docs_path.into());
+
+  let (old_docs, new_docs) =
+    futures::future::try_join(old_doc_nodes_fut, new_doc_nodes_fut).await?;
+
+  let old_docs = old_docs.ok_or_else(|| {
+    error!(
+      "docs not found for {}/{}/{}",
+      scope, package_name, old_version.version
+    );
+    ApiError::InternalServerError
+  })?;
+  let new_docs = new_docs.ok_or_else(|| {
+    error!(
+      "docs not found for {}/{}/{}",
+      scope, package_name, new_version.version
+    );
+    ApiError::InternalServerError
+  })?;
+
+  let old_doc_nodes: DocNodesByUrl =
+    serde_json::from_slice(&old_docs).context("failed to parse doc nodes")?;
+  let new_doc_nodes: DocNodesByUrl =
+    serde_json::from_slice(&new_docs).context("failed to parse doc nodes")?;
+
+  // diffs are applied on top of the new version
+  let new_docs_info =
+    crate::docs::get_docs_info(&new_version.exports, entrypoint);
+
+  if entrypoint.is_some() && new_docs_info.entrypoint_url.is_none() {
+    return Err(ApiError::EntrypointOrSymbolNotFound);
+  }
+
+  let registry_url = req.data::<RegistryUrl>().unwrap().0.to_string();
+
+  let req = match (new_docs_info.entrypoint_url, symbol) {
+    _ if all_symbols => DocsRequest::AllSymbols,
+    (Some(entrypoint), None) => DocsRequest::File(entrypoint),
+    (Some(entrypoint), Some(symbol)) => {
+      DocsRequest::Symbol(entrypoint, symbol.into())
+    }
+    (None, Some(symbol)) => {
+      if let Some(entrypoint_url) = new_docs_info.main_entrypoint.clone() {
+        DocsRequest::Symbol(entrypoint_url, symbol.into())
+      } else {
+        return Err(ApiError::EntrypointOrSymbolNotFound);
+      }
+    }
+    (None, None) => DocsRequest::Index,
+  };
+
+  let docs = crate::docs::generate_docs_html(
+    format!("/diff/{}...{}", old_version.version, new_version.version),
+    new_doc_nodes,
+    new_docs_info.main_entrypoint,
+    new_docs_info.rewrite_map,
+    req,
+    scope.clone(),
+    package_name.clone(),
+    new_version.version.clone(),
+    true,
+    repo,
+    None,
+    package.runtime_compat,
+    registry_url,
+    package.readme_source,
+    Some((old_doc_nodes, full)),
+  )
+  .map_err(|e| {
+    error!("failed to generate docs: {}", e);
+    ApiError::InternalServerError
+  })?
+  .ok_or(ApiError::EntrypointOrSymbolNotFound)?;
+
+  match docs {
+    GeneratedDocsOutput::Docs(docs) => Ok(ApiPackageVersionDocs::Content {
+      comrak_css: Cow::Borrowed(deno_doc::html::comrak::COMRAK_STYLESHEET),
+      script: Cow::Borrowed(deno_doc::html::SCRIPT_JS),
+      breadcrumbs: docs.breadcrumbs,
+      toc: docs.toc,
+      main: docs.main.into(),
+      version: ApiPackageVersion::from(new_version),
+    }),
+    GeneratedDocsOutput::Redirect(href) => {
+      Ok(ApiPackageVersionDocs::Redirect { symbol: href })
+    }
+  }
+}
+
 #[instrument(
   name = "GET /api/scopes/:scope/packages/:package/dependents",
   skip(req),
@@ -3611,12 +3768,11 @@ ggHohNAjhbzDaY2iBW/m3NC5dehGUP4T2GBo/cwGhg==
         comrak_css: _,
         script: _,
         breadcrumbs,
-        toc,
+        toc: _,
         main: _,
       } => {
         assert_eq!(version.version, task.package_version);
         assert!(breadcrumbs.is_none(), "{:?}", breadcrumbs);
-        assert!(toc.is_some(), "{:?}", toc)
       }
       ApiPackageVersionDocs::Redirect { .. } => panic!(),
     }
@@ -3635,12 +3791,11 @@ ggHohNAjhbzDaY2iBW/m3NC5dehGUP4T2GBo/cwGhg==
         comrak_css: _,
         script: _,
         breadcrumbs,
-        toc,
+        toc: _,
         main: _,
       } => {
         assert_eq!(version.version, task.package_version);
         assert!(breadcrumbs.is_some());
-        assert!(toc.is_none(), "{:?}", toc);
       }
       ApiPackageVersionDocs::Redirect { .. } => panic!(),
     }
@@ -3659,12 +3814,11 @@ ggHohNAjhbzDaY2iBW/m3NC5dehGUP4T2GBo/cwGhg==
         comrak_css: _,
         script: _,
         breadcrumbs,
-        toc,
+        toc: _,
         main: _,
       } => {
         assert_eq!(version.version, task.package_version);
         assert!(breadcrumbs.is_some());
-        assert!(toc.is_some(), "{:?}", toc);
       }
       ApiPackageVersionDocs::Redirect { .. } => panic!(),
     }
@@ -3686,12 +3840,11 @@ ggHohNAjhbzDaY2iBW/m3NC5dehGUP4T2GBo/cwGhg==
         comrak_css: _,
         script: _,
         breadcrumbs,
-        toc,
+        toc: _,
         main: _,
       } => {
         assert_eq!(version.version, task.package_version);
         assert!(breadcrumbs.is_some());
-        assert!(toc.is_some(), "{:?}", toc);
       }
       ApiPackageVersionDocs::Redirect { .. } => panic!(),
     }
diff --git a/api/src/api/types.rs b/api/src/api/types.rs
index 9e4e5778a..6549c8074 100644
--- a/api/src/api/types.rs
+++ b/api/src/api/types.rs
@@ -636,7 +636,7 @@ pub enum ApiPackageVersionDocs {
     comrak_css: Cow<'static, str>,
     script: Cow<'static, str>,
     breadcrumbs: Option<deno_doc::html::util::BreadcrumbsCtx>,
-    toc: Option<deno_doc::html::util::ToCCtx>,
+    toc: deno_doc::html::util::ToCCtx,
     main: ApiGeneratedDocsContent,
   },
   Redirect {
diff --git a/api/src/docs.rs b/api/src/docs.rs
index b82725885..ba172d62a 100644
--- a/api/src/docs.rs
+++ b/api/src/docs.rs
@@ -308,7 +308,7 @@ pub enum GeneratedDocsOutput {
 #[derive(Debug)]
 pub struct GeneratedDocs {
   pub breadcrumbs: Option<BreadcrumbsCtx>,
-  pub toc: Option<deno_doc::html::ToCCtx>,
+  pub toc: deno_doc::html::ToCCtx,
   pub main: GeneratedDocsContent,
 }
 
@@ -430,10 +430,12 @@ fn get_url_rewriter(
     version_is_latest,
     has_readme,
     runtime_compat,
-    registry_url
+    registry_url,
+    diff
   )
 )]
 pub fn get_generate_ctx(
+  doc_base: String,
   doc_nodes_by_url: DocNodesByUrl,
   main_entrypoint: Option<ModuleSpecifier>,
   rewrite_map: IndexMap<ModuleSpecifier, String>,
@@ -445,6 +447,7 @@ pub fn get_generate_ctx(
   has_readme: bool,
   runtime_compat: RuntimeCompat,
   registry_url: String,
+  diff: Option<(deno_doc::diff::DocDiff, bool)>,
 ) -> GenerateCtx {
   let package_name = format!("@{scope}/{package}");
   let url_rewriter_base = format!("/{package_name}/{version}");
@@ -506,12 +509,16 @@ pub fn get_generate_ctx(
             .collect()
           })
           .clone(),
+        doc_base,
+        full: diff.as_ref().map(|diff| diff.1),
+      }),
+      usage_composer: diff.is_none().then(|| {
+        Rc::new(DocUsageComposer {
+          runtime_compat,
+          scope,
+          package,
+        }) as Rc<dyn deno_doc::html::UsageComposer>
       }),
-      usage_composer: (Rc::new(DocUsageComposer {
-        runtime_compat,
-        scope,
-        package,
-      })),
       rewrite_map: Some(rewrite_map),
       category_docs: None,
       disable_search: false,
@@ -521,10 +528,12 @@ pub fn get_generate_ctx(
       markdown_stripper: Rc::new(deno_doc::html::comrak::strip),
       head_inject: None,
       id_prefix: None,
+      diff_only: diff.as_ref().map(|diff| !diff.1).unwrap_or_default(),
     },
     None,
     deno_doc::html::FileMode::Normal,
     doc_nodes_by_url,
+    diff.map(|diff| diff.0),
   )
   .unwrap()
 }
@@ -532,10 +541,11 @@ pub fn get_generate_ctx(
 #[allow(clippy::too_many_arguments)]
 #[instrument(
   name = "generate_docs_html",
-  skip(doc_nodes_by_url, rewrite_map, readme),
+  skip(doc_nodes_by_url, rewrite_map, readme, diff_data),
   err
 )]
 pub fn generate_docs_html(
+  doc_base: String,
   doc_nodes_by_url: DocNodesByUrl,
   main_entrypoint: Option<ModuleSpecifier>,
   rewrite_map: IndexMap<ModuleSpecifier, String>,
@@ -549,8 +559,19 @@ pub fn generate_docs_html(
   runtime_compat: RuntimeCompat,
   registry_url: String,
   readme_source: ReadmeSource,
+  diff_data: Option<(DocNodesByUrl, bool)>,
 ) -> Result<Option<GeneratedDocsOutput>, anyhow::Error> {
+  let diff = if let Some((old_doc_nodes_by_url, full)) = diff_data {
+    Some((
+      deno_doc::diff::DocDiff::diff(&old_doc_nodes_by_url, &doc_nodes_by_url),
+      full,
+    ))
+  } else {
+    None
+  };
+
   let ctx = get_generate_ctx(
+    doc_base,
     doc_nodes_by_url,
     main_entrypoint,
     rewrite_map,
@@ -562,6 +583,7 @@ pub fn generate_docs_html(
     readme.is_some(),
     runtime_compat,
     registry_url,
+    diff,
   );
 
   match req {
@@ -572,9 +594,11 @@ pub fn generate_docs_html(
       let all_symbols = deno_doc::html::AllSymbolsCtx::new(&render_ctx);
       let breadcrumbs = render_ctx.get_breadcrumbs();
 
+      let toc = deno_doc::html::ToCCtx::new(render_ctx, false, Some(&[]));
+
       Ok(Some(GeneratedDocsOutput::Docs(GeneratedDocs {
         breadcrumbs: Some(breadcrumbs),
-        toc: None,
+        toc,
         main: GeneratedDocsContent::AllSymbols(all_symbols),
       })))
     }
@@ -624,11 +648,11 @@ pub fn generate_docs_html(
         index_module_doc.sections.docs = Some(markdown);
       }
 
-      let toc_ctx = deno_doc::html::ToCCtx::new(render_ctx, true, Some(&[]));
+      let toc = deno_doc::html::ToCCtx::new(render_ctx, true, Some(&[]));
 
       Ok(Some(GeneratedDocsOutput::Docs(GeneratedDocs {
         breadcrumbs: None,
-        toc: Some(toc_ctx),
+        toc,
         main: GeneratedDocsContent::Index(index_module_doc),
       })))
     }
@@ -657,11 +681,11 @@ pub fn generate_docs_html(
 
       let breadcrumbs = render_ctx.get_breadcrumbs();
 
-      let toc_ctx = deno_doc::html::ToCCtx::new(render_ctx, false, Some(&[]));
+      let toc = deno_doc::html::ToCCtx::new(render_ctx, false, Some(&[]));
 
       Ok(Some(GeneratedDocsOutput::Docs(GeneratedDocs {
         breadcrumbs: Some(breadcrumbs),
-        toc: Some(toc_ctx),
+        toc,
         main: GeneratedDocsContent::File(module_doc),
       })))
     }
@@ -686,7 +710,7 @@ pub fn generate_docs_html(
           categories_panel: _categories_panel,
         } => Ok(Some(GeneratedDocsOutput::Docs(GeneratedDocs {
           breadcrumbs: Some(breadcrumbs_ctx),
-          toc: Some(*toc_ctx),
+          toc: *toc_ctx,
           main: GeneratedDocsContent::Symbol(symbol_group_ctx),
         }))),
         SymbolPage::Redirect { href, .. } => {
@@ -740,6 +764,7 @@ fn generate_symbol_page(
                 return Some(SymbolPage::Redirect {
                   current_symbol: name.to_string(),
                   href: name.rsplit_once('.').unwrap().0.to_string(),
+                  diff_status: None, // TODO
                 });
               } else {
                 is_static = false;
@@ -992,6 +1017,8 @@ struct DocResolver {
   registry_url: String,
   deno_types: std::collections::HashSet<Vec<String>>,
   web_types: std::collections::HashMap<Vec<String>, String>,
+  doc_base: String,
+  full: Option<bool>,
 }
 
 impl HrefResolver for DocResolver {
@@ -1010,9 +1037,9 @@ impl HrefResolver for DocResolver {
         String::new()
       }
     );
-    let doc_base = format!("{package_base}/doc");
+    let doc_base = format!("{package_base}{}", self.doc_base);
 
-    match target {
+    let path = match target {
       UrlResolveKind::Root => package_base,
       UrlResolveKind::AllSymbols => format!("{doc_base}/all_symbols"),
       UrlResolveKind::Symbol { file, symbol } => {
@@ -1034,6 +1061,12 @@ impl HrefResolver for DocResolver {
         }
       ),
       UrlResolveKind::Category { .. } => unreachable!(),
+    };
+
+    if self.full.is_some_and(std::convert::identity) {
+      path + "?full"
+    } else {
+      path
     }
   }
 
@@ -1243,6 +1276,8 @@ mod tests {
       registry_url: "".to_string(),
       deno_types: Default::default(),
       web_types: Default::default(),
+      doc_base: "/doc".to_string(),
+      full: None,
     };
 
     let specifier = ModuleSpecifier::parse("file:///mod.ts").unwrap();
diff --git a/api/src/util.rs b/api/src/util.rs
index 4995ee920..2d895eb32 100644
--- a/api/src/util.rs
+++ b/api/src/util.rs
@@ -299,6 +299,40 @@ pub fn pagination(req: &Request<Body>) -> (i64, i64) {
   (start, limit)
 }
 
+pub struct DocsQueries<'a> {
+  pub all_symbols: bool,
+  pub entrypoint: Option<&'a str>,
+  pub symbol: Option<std::borrow::Cow<'a, str>>,
+}
+
+pub fn docs_queries(req: &Request<Body>) -> Result<DocsQueries<'_>, ApiError> {
+  let all_symbols = req.query("all_symbols").is_some();
+  let entrypoint = req.query("entrypoint").map(|s| match s.as_str() {
+    "" => ".",
+    s => s,
+  });
+
+  let symbol = req
+    .query("symbol")
+    .and_then(|s| match s.as_str() {
+      "" => None,
+      s => Some(urlencoding::decode(s)),
+    })
+    .transpose()?;
+
+  if all_symbols && (entrypoint.is_some() || symbol.is_some()) {
+    return Err(ApiError::MalformedRequest {
+      msg: "Cannot specify both all_symbols and entrypoint".into(),
+    });
+  }
+
+  Ok(DocsQueries {
+    all_symbols,
+    entrypoint,
+    symbol,
+  })
+}
+
 // Sanitize redirect urls
 // - Remove origin from Url: https://evil.com -> /
 // - Replace multiple slashes with one slash to remove prevent
@@ -339,7 +373,7 @@ pub trait RequestIdExt {
   fn param_version_or_latest(&self) -> Result<VersionOrLatest, ApiError>;
 }
 
-fn param<'a>(
+pub fn param<'a>(
   req: &'a Request<Body>,
   name: &str,
 ) -> Result<&'a String, ApiError> {
diff --git a/deno.json b/deno.json
index 8c38ee2f9..2dde101eb 100644
--- a/deno.json
+++ b/deno.json
@@ -42,7 +42,7 @@
     "api/license-list-data"
   ],
   "imports": {
-    "@deno/doc": "jsr:@deno/doc@^0.193.0",
+    "@deno/doc": "jsr:@deno/doc@^0.194.0",
     "@deno/gfm": "jsr:@deno/gfm@^0.10.0",
     "@mdn/browser-compat-data": "npm:@mdn/browser-compat-data@^7.1.6",
     "@std/async": "jsr:@std/async@^1.0.8",
diff --git a/deno.lock b/deno.lock
index c567609dc..7f8856a73 100644
--- a/deno.lock
+++ b/deno.lock
@@ -2,7 +2,7 @@
   "version": "5",
   "specifiers": {
     "jsr:@deno/cache-dir@0.25": "0.25.0",
-    "jsr:@deno/doc@0.193": "0.193.0",
+    "jsr:@deno/doc@0.194": "0.194.0",
     "jsr:@deno/gfm@0.10": "0.10.0",
     "jsr:@deno/graph@0.100": "0.100.1",
     "jsr:@deno/graph@0.86": "0.86.9",
@@ -47,8 +47,8 @@
         "jsr:@std/path"
       ]
     },
-    "@deno/doc@0.193.0": {
-      "integrity": "53e86ecbbbad01caabadf8e11ec0a089b95a83d30a776c2976c279601e39cf5c",
+    "@deno/doc@0.194.0": {
+      "integrity": "eac7bc9d5061252a57b11cdfd1a24d6c773eb93004794112b23e9af937acc7eb",
       "dependencies": [
         "jsr:@deno/cache-dir",
         "jsr:@deno/graph@0.100"
@@ -314,7 +314,7 @@
   },
   "workspace": {
     "dependencies": [
-      "jsr:@deno/doc@0.193",
+      "jsr:@deno/doc@0.194",
       "jsr:@deno/gfm@0.10",
       "jsr:@std/async@^1.0.8",
       "jsr:@std/bytes@^1.0.6",
diff --git a/frontend/components/doc/Anchor.tsx b/frontend/components/doc/Anchor.tsx
index 1ac47f972..9e471e63b 100644
--- a/frontend/components/doc/Anchor.tsx
+++ b/frontend/components/doc/Anchor.tsx
@@ -2,11 +2,15 @@
 import type { AnchorCtx } from "@deno/doc/html-types";
 import TbLink from "tb-icons/TbLink";
 
-export function Anchor({ anchor: { id } }: { anchor: AnchorCtx }) {
+export function Anchor(
+  { anchor: { id }, class: classes }: { anchor: AnchorCtx; class?: string },
+) {
   return (
     <a
       href={`#${id}`}
-      class="anchor hidden float-left leading-none text-stone-600 ml-[-24px] p-1 pr-1 pt-1 top-0 bottom-0 dark:text-stone-400"
+      class={`anchor hidden float-left leading-none text-stone-600 ml-[-24px] p-1 pr-1 pt-1 top-0 bottom-0 dark:text-stone-400 ${
+        classes ?? ""
+      }`}
       aria-label="Anchor"
       tabIndex={-1}
     >
diff --git a/frontend/components/doc/DocEntry.tsx b/frontend/components/doc/DocEntry.tsx
index 78559a7c3..3e97262c2 100644
--- a/frontend/components/doc/DocEntry.tsx
+++ b/frontend/components/doc/DocEntry.tsx
@@ -3,18 +3,36 @@ import type { DocEntryCtx } from "@deno/doc/html-types";
 import { Anchor } from "./Anchor.tsx";
 import { Tag } from "./Tag.tsx";
 import { SourceButton } from "./SourceButton.tsx";
+import { getDiffColor } from "./mod.ts";
 
 export function DocEntry(
-  {
-    entry: { id, name, name_href, anchor, tags, content, source_href, js_doc },
-  }: { entry: DocEntryCtx },
+  { entry }: { entry: DocEntryCtx },
 ) {
+  const {
+    name_prefix,
+    name,
+    name_href,
+    anchor,
+    tags,
+    content,
+    source_href,
+    js_doc,
+    diff_status,
+    old_content,
+  } = entry;
+
+  const renamedOldName = diff_status?.kind === "renamed"
+    ? diff_status.old_name
+    : undefined;
+
   return (
     <div
-      class={`mb-4 space-y-2 ${
+      class={`space-y-2 max-md:-pl-1 max-md:-ml-1 py-1 px-2 -mx-2 ${
         name ? "anchorable" : ""
-      } group/sourceable relative`}
-      id={id}
+      } group/sourceable relative diff-mobile-skip-round ${
+        getDiffColor(diff_status, false)
+      }`}
+      id={anchor.id}
     >
       <div class="flex justify-between items-start md:text-base">
         <div class="wrap-break-word">
@@ -25,31 +43,70 @@ export function DocEntry(
           )}
 
           <code>
-            {name && anchor && <Anchor anchor={anchor} />}
-            {name_href
-              ? (
-                <a
-                  class="font-bold font-lg link"
-                  href={name_href}
+            {name && (
+              <Anchor
+                anchor={anchor}
+                class={(diff_status && diff_status.kind !== "modified")
+                  ? (renamedOldName ? "!-ml-10" : "!-ml-12")
+                  : ""}
+              />
+            )}
+            <span class="font-bold font-lg align-top">
+              {name_prefix && (
+                <span class="text-secondary">{name_prefix + " "}</span>
+              )}
+
+              {renamedOldName && (
+                <span
+                  class="diff-removed diff-inline"
                   // may include type defs which are generated with spans (for ie default parameters)
                   // deno-lint-ignore react-no-danger
-                  dangerouslySetInnerHTML={{ __html: name! }}
+                  dangerouslySetInnerHTML={{ __html: renamedOldName }}
                 />
-              )
-              : name && (
+              )}
+              {name_href
+                ? (
+                  <a
+                    class={`link ${
+                      renamedOldName ? "diff-added diff-inline" : ""
+                    }`}
+                    href={name_href}
+                    // may include type defs which are generated with spans (for ie default parameters)
+                    // deno-lint-ignore react-no-danger
+                    dangerouslySetInnerHTML={{ __html: name! }}
+                  />
+                )
+                : name && (
+                  <span
+                    class={renamedOldName ? "diff-added diff-inline" : ""}
+                    // may include type defs which are generated with spans (for ie default parameters)
+                    // deno-lint-ignore react-no-danger
+                    dangerouslySetInnerHTML={{ __html: name }}
+                  />
+                )}
+            </span>
+            <span
+              class={`font-medium text-stone-500 dark:text-stone-200 ${
+                old_content ? "inline-block ml-5" : ""
+              }`}
+            >
+              {old_content && (
                 <span
-                  class="font-bold font-lg"
-                  // may include type defs which are generated with spans (for ie default parameters)
+                  class="block diff-removed diff-flat-bottom px-0.5"
+                  // includes type defs which are generated with spans
                   // deno-lint-ignore react-no-danger
-                  dangerouslySetInnerHTML={{ __html: name }}
+                  dangerouslySetInnerHTML={{ __html: old_content }}
                 />
               )}
-            <span
-              class="font-medium text-stone-500 dark:text-stone-200"
-              // includes type defs which are generated with spans
-              // deno-lint-ignore react-no-danger
-              dangerouslySetInnerHTML={{ __html: content }}
-            />
+              <span
+                class={old_content
+                  ? "block diff-added diff-flat-top px-0.5"
+                  : ""}
+                // includes type defs which are generated with spans
+                // deno-lint-ignore react-no-danger
+                dangerouslySetInnerHTML={{ __html: content }}
+              />
+            </span>
           </code>
         </div>
 
diff --git a/frontend/components/doc/Function.tsx b/frontend/components/doc/Function.tsx
index 68e70e1df..18beec02b 100644
--- a/frontend/components/doc/Function.tsx
+++ b/frontend/components/doc/Function.tsx
@@ -9,7 +9,7 @@ export function Function({ func: { functions } }: { func: FunctionCtx }) {
     <div class="mt-3 space-y-8">
       {functions.map((func, index) => (
         <>
-          <div class="scroll-mt-16" id={func.id}>
+          <div class="scroll-mt-16" id={func.anchor.id}>
             <code class="anchorable text-base wrap-break-word">
               <Anchor anchor={func.anchor} />
               <span class="font-bold">{func.name}</span>
diff --git a/frontend/components/doc/IndexSignature.tsx b/frontend/components/doc/IndexSignature.tsx
index e718e86be..0ca925129 100644
--- a/frontend/components/doc/IndexSignature.tsx
+++ b/frontend/components/doc/IndexSignature.tsx
@@ -2,26 +2,74 @@
 // deno-lint-ignore-file jsx-curly-braces
 import type { IndexSignatureCtx } from "@deno/doc/html-types";
 import { Anchor } from "./Anchor.tsx";
+import { getDiffColor } from "./mod.ts";
 
 export function IndexSignature(
-  { signature: { id, anchor, readonly, params, ts_type } }: {
+  { signature }: {
     signature: IndexSignatureCtx;
   },
 ) {
+  const {
+    anchor,
+    diff_status,
+    old_readonly,
+    readonly,
+    old_params,
+    params,
+    old_ts_type,
+    ts_type,
+  } = signature;
+
+  let readonlyClass;
+
+  if (readonly == old_readonly) {
+    readonlyClass = "";
+  } else if (readonly) {
+    readonlyClass = "diff-added ml-3";
+  } else if (old_readonly) {
+    readonlyClass = "diff-removed ml-3";
+  }
+
   return (
-    <div class="anchorable text-sm" id={id}>
+    <div
+      class={`anchorable text-sm ${getDiffColor(diff_status, false)}`}
+      id={anchor.id}
+    >
       <Anchor anchor={anchor} />
-      {readonly && <span>{"readonly "}</span>}
-      [<span
-        // jsdoc rendering
-        // deno-lint-ignore react-no-danger
-        dangerouslySetInnerHTML={{ __html: params }}
-      />]
-      <span
-        // jsdoc rendering
-        // deno-lint-ignore react-no-danger
-        dangerouslySetInnerHTML={{ __html: ts_type }}
-      />
+
+      <div>
+        {(old_readonly ?? readonly) && (
+          <span class={readonlyClass}>{"readonly "}</span>
+        )}
+        [<span>
+          {old_params && (
+            <span
+              class="diff-removed"
+              // deno-lint-ignore react-no-danger
+              dangerouslySetInnerHTML={{ __html: old_params }}
+            />
+          )}
+          <span
+            class={old_params ? "diff-added" : ""}
+            // deno-lint-ignore react-no-danger
+            dangerouslySetInnerHTML={{ __html: params }}
+          />
+        </span>]
+        <span>
+          {old_ts_type && (
+            <span
+              class="diff-removed"
+              // deno-lint-ignore react-no-danger
+              dangerouslySetInnerHTML={{ __html: old_ts_type }}
+            />
+          )}
+          <span
+            class={old_ts_type ? "diff-added" : ""}
+            // deno-lint-ignore react-no-danger
+            dangerouslySetInnerHTML={{ __html: ts_type }}
+          />
+        </span>
+      </div>
     </div>
   );
 }
diff --git a/frontend/components/doc/NamespaceSection.tsx b/frontend/components/doc/NamespaceSection.tsx
index 77c26ac4c..052d68c67 100644
--- a/frontend/components/doc/NamespaceSection.tsx
+++ b/frontend/components/doc/NamespaceSection.tsx
@@ -1,124 +1,169 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
 import type { NamespaceNodeCtx } from "@deno/doc/html-types";
 import { DocNodeKindIcon } from "./DocNodeKindIcon.tsx";
+import { getDiffColor } from "./mod.ts";
 
 export function NamespaceSection({ items }: { items: NamespaceNodeCtx[] }) {
   return (
-    <div class="space-y-2 mt-6! max-w-prose">
-      {items.map((item) => (
-        <div
-          id={item.id}
-          class={`flex gap-x-2.5 md:min-h-16 lg:pr-4 rounded transition duration-125 ${
-            item.deprecated ? "opacity-60" : ""
-          }`}
-          aria-label={item.deprecated ? "deprecated" : undefined}
-        >
-          <DocNodeKindIcon
-            kinds={item.doc_node_kind_ctx}
-            class="w-auto flex-col justify-start! gap-1 mt-1 [&>*+*]:ml-0 [&>*+*]:-mt-0.5"
-          />
+    <div class="space-y-3 mt-6! max-w-prose">
+      {items.map((item) => {
+        const renamedOldName = item.diff_status?.kind === "renamed"
+          ? item.diff_status.old_name
+          : undefined;
 
+        return (
           <div
-            class={`w-0 flex-1 ${
+            id={item.anchor.id}
+            class={`md:min-h-16 lg:pr-4 max-md:-pl-1 max-md:-ml-1 py-1 px-2 -mt-1 -mx-2 ${
               item.deprecated
-                ? "line-through decoration-2 decoration-stone-500/70 text-stone-500 dark:text-stone-400"
+                ? "opacity-60 line-through decoration-2 decoration-stone-500/70 text-stone-500 dark:text-stone-400"
                 : ""
-            }`}
+            } diff-mobile-skip-round ${getDiffColor(item.diff_status, false)}`}
+            aria-label={item.deprecated ? "deprecated" : undefined}
           >
-            <div class="block font-mono">
-              <a
-                href={item.href}
-                title={item.name}
-                class="highlightable leading-none break-all font-medium underline underline-offset-2"
-              >
-                {item.name}
-              </a>
-              {item.ty && (
-                <>
-                  <span
-                    class="font-light opacity-85 dark:opacity-75"
-                    // jsdoc rendering
-                    // deno-lint-ignore react-no-danger
-                    dangerouslySetInnerHTML={{ __html: item.ty.ty }}
-                  />
-                  {item.ty.info && (
-                    <div class="italic text-xs ml-2 text-stone-600 dark:text-stone-400">
-                      {item.ty.info}
-                    </div>
+            <div
+              class={`flex gap-x-2.5 pl-1 -ml-1 pr-1.5 -mr-1.5 px-1 -mx-1 ${
+                item.diff_status?.kind === "modified" ? "diff-modified" : ""
+              }`}
+            >
+              <DocNodeKindIcon
+                kinds={item.doc_node_kind_ctx}
+                class="w-4 flex-col justify-start! gap-1 mt-1 [&>*+*]:ml-0 [&>*+*]:-mt-0.5"
+              />
+
+              <div class="space-y-2">
+                <div class="block font-mono">
+                  <a
+                    href={item.href}
+                    title={item.name}
+                    class={`highlightable leading-none break-all font-medium underline underline-offset-2`}
+                  >
+                    {renamedOldName && (
+                      <span class="diff-removed diff-inline ml-3">
+                        {renamedOldName}
+                      </span>
+                    )}
+                    <span
+                      class={renamedOldName ? "diff-added diff-inline" : ""}
+                    >
+                      {item.name}
+                    </span>
+                  </a>
+                  {item.ty && (
+                    <>
+                      <span
+                        class="font-light opacity-85 dark:opacity-75"
+                        // jsdoc rendering
+                        // deno-lint-ignore react-no-danger
+                        dangerouslySetInnerHTML={{ __html: item.ty.ty }}
+                      />
+                      {item.ty.info && (
+                        <div class="italic text-xs ml-2 text-stone-600 dark:text-stone-400">
+                          {item.ty.info}
+                        </div>
+                      )}
+                    </>
                   )}
-                </>
-              )}
-            </div>
+                </div>
 
-            <div class="mt-2 text-sm leading-5">
-              {item.docs
-                ? (
-                  <span
-                    class="highlightable"
-                    // jsdoc rendering
-                    // deno-lint-ignore react-no-danger
-                    dangerouslySetInnerHTML={{ __html: item.docs }}
-                  />
-                )
-                : (
-                  <span class="italic text-stone-600 dark:text-stone-400">
-                    No documentation available
-                  </span>
-                )}
+                <div>
+                  {item.docs
+                    ? (
+                      <span
+                        class="highlightable text-sm leading-5"
+                        // jsdoc rendering
+                        // deno-lint-ignore react-no-danger
+                        dangerouslySetInnerHTML={{ __html: item.docs }}
+                      />
+                    )
+                    : (
+                      <span class="text-xs leading-none italic text-stone-600 dark:text-stone-400">
+                        No documentation available
+                      </span>
+                    )}
+                </div>
+              </div>
             </div>
 
             {item.subitems && item.subitems.length > 0 && (
-              <ul class="gap-y-3 text-sm mt-3 ml-2">
-                {item.subitems.map((subitem) => (
-                  <li>
-                    <div class="block font-mono">
-                      <a
-                        href={subitem.href}
-                        title={subitem.title}
-                        class="highlightable underline underline-offset-2"
-                      >
-                        {subitem.title}
-                      </a>
-                      {subitem.ty && (
-                        <>
-                          <span
-                            class="font-light opacity-85 dark:opacity-75"
-                            // jsdoc rendering
-                            // deno-lint-ignore react-no-danger
-                            dangerouslySetInnerHTML={{ __html: subitem.ty.ty }}
-                          />
-                          {subitem.ty.info && (
-                            <div class="italic text-xs ml-2 text-stone-600 dark:text-stone-400">
-                              {subitem.ty.info}
-                            </div>
-                          )}
-                        </>
-                      )}
-                    </div>
+              <ul class="space-y-2.5 text-sm mt-3 ml-8.5">
+                {item.subitems.map((subitem, i) => {
+                  const renamedOldName = subitem.diff_status?.kind === "renamed"
+                    ? subitem.diff_status.old_name
+                    : undefined;
 
-                    <div class="mt-2 leading-5">
-                      {subitem.docs
-                        ? (
+                  return (
+                    <li
+                      key={i}
+                      class={`px-1.5 -mx-1.5 ${
+                        getDiffColor(subitem.diff_status, true)
+                      }`}
+                    >
+                      <div class="block font-mono">
+                        <a
+                          href={subitem.href}
+                          title={subitem.title}
+                          class="highlightable underline underline-offset-2"
+                        >
+                          {renamedOldName &&
+                            (
+                              <span class="diff-removed diff-inline">
+                                {renamedOldName}
+                              </span>
+                            )}
                           <span
-                            class="highlightable"
-                            // jsdoc rendering
-                            // deno-lint-ignore react-no-danger
-                            dangerouslySetInnerHTML={{ __html: subitem.docs }}
-                          />
-                        )
-                        : (
-                          <span class="italic text-stone-600 dark:text-stone-400">
-                            No documentation available
+                            class={renamedOldName
+                              ? "diff-added diff-inline"
+                              : ""}
+                          >
+                            {subitem.title}
                           </span>
+                        </a>
+                        {subitem.ty && (
+                          <>
+                            <span
+                              class="font-light opacity-85 dark:opacity-75"
+                              // jsdoc rendering
+                              // deno-lint-ignore react-no-danger
+                              dangerouslySetInnerHTML={{
+                                __html: subitem.ty.ty,
+                              }}
+                            />
+                            {subitem.ty.info && (
+                              <div class="italic text-xs ml-2 text-stone-600 dark:text-stone-400">
+                                {subitem.ty.info}
+                              </div>
+                            )}
+                          </>
                         )}
-                    </div>
-                  </li>
-                ))}
+                      </div>
+
+                      <div class="mt-1.5">
+                        {subitem.docs
+                          ? (
+                            <span
+                              class="highlightable leading-5"
+                              // jsdoc rendering
+                              // deno-lint-ignore react-no-danger
+                              dangerouslySetInnerHTML={{
+                                __html: subitem.docs,
+                              }}
+                            />
+                          )
+                          : (
+                            <span class="text-xs leading-none italic text-stone-600 dark:text-stone-400">
+                              No documentation available
+                            </span>
+                          )}
+                      </div>
+                    </li>
+                  );
+                })}
               </ul>
             )}
           </div>
-        </div>
-      ))}
+        );
+      })}
     </div>
   );
 }
diff --git a/frontend/components/doc/Section.tsx b/frontend/components/doc/Section.tsx
index e871780dc..1dadb56c6 100644
--- a/frontend/components/doc/Section.tsx
+++ b/frontend/components/doc/Section.tsx
@@ -38,7 +38,7 @@ function SectionContent({ content }: { content: SectionContentCtx }) {
       );
     case "doc_entry":
       return (
-        <div class="space-y-8">
+        <div class="space-y-2">
           {content.content.map((entry, i) => (
             <DocEntry
               key={i}
diff --git a/frontend/components/doc/SymbolGroup.tsx b/frontend/components/doc/SymbolGroup.tsx
index 0a1f0bdc5..e838d8f86 100644
--- a/frontend/components/doc/SymbolGroup.tsx
+++ b/frontend/components/doc/SymbolGroup.tsx
@@ -7,21 +7,47 @@ import { Function } from "./Function.tsx";
 import { SourceButton } from "./SourceButton.tsx";
 import { SymbolContent } from "./SymbolContent.tsx";
 import { Tag } from "./Tag.tsx";
+import { getDiffColor } from "./mod.ts";
 
 export function SymbolGroup(
-  { content: { name, symbols } }: { content: SymbolGroupCtx },
+  { content: { name, symbols, diff_status } }: { content: SymbolGroupCtx },
 ) {
+  const renamedOldName = diff_status?.kind === "renamed"
+    ? diff_status.old_name
+    : undefined;
+
   return (
-    <main class="space-y-12" id={`symbol_${name}`}>
-      {symbols.map((symbol) => (
-        <article class="space-y-5">
+    <main
+      class={`space-y-12 px-3 -mx-3 py-2 -my-2 ${
+        getDiffColor(diff_status, false)
+      }`}
+      id={`symbol_${name}`}
+    >
+      {symbols.map((symbol, i) => (
+        <article
+          key={i}
+          class={`space-y-5 px-2 -mx-2 py-1 -my-1 ${
+            getDiffColor(symbol.diff_status, false)
+          }`}
+        >
           <div class="flex justify-between items-start group/sourceable relative">
             <div class="font-medium space-y-1">
               <div class="text-2xl leading-none break-all">
                 <span class={`text-${symbol.kind.kind}`}>
                   {symbol.kind.title_lowercase}
                 </span>{" "}
-                <span class="font-bold">{name}</span>
+                {renamedOldName && (
+                  <span class="font-bold diff-removed diff-inline">
+                    {renamedOldName}
+                  </span>
+                )}
+                <span
+                  class={`font-bold ${
+                    renamedOldName ? "diff-added diff-inline" : ""
+                  }`}
+                >
+                  {name}
+                </span>
               </div>
               {symbol.subtitle && (
                 <div class="space-y-0.5 text-sm leading-4">
diff --git a/frontend/components/doc/Tag.tsx b/frontend/components/doc/Tag.tsx
index 665934e20..c3ab54261 100644
--- a/frontend/components/doc/Tag.tsx
+++ b/frontend/components/doc/Tag.tsx
@@ -1,11 +1,16 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
-import type { Tag as TagType } from "@deno/doc/html-types";
+import type { TagCtx } from "@deno/doc/html-types";
 
 function titleCase(str: string): string {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
-export function Tag({ tag, large }: { tag: TagType; large?: boolean }) {
+export function Tag(
+  { tag, large }: {
+    tag: TagCtx;
+    large?: boolean;
+  },
+) {
   const sizeClasses = large ? "font-bold py-2 px-3" : "text-sm py-1 px-2";
 
   const renderContent = () => {
@@ -41,6 +46,12 @@ export function Tag({ tag, large }: { tag: TagType; large?: boolean }) {
     <div
       class={`text-${tag.kind} border border-${tag.kind}/50 bg-${tag.kind}/5 inline-flex items-center gap-0.5 *:flex-none rounded-md leading-none ${sizeClasses}`}
     >
+      {tag.diff === "added" && (
+        <span class="text-green-600 dark:text-green-400 font-bold mr-1">+</span>
+      )}
+      {tag.diff === "removed" && (
+        <span class="text-red-600 dark:text-red-400 font-bold mr-1">-</span>
+      )}
       {renderContent()}
     </div>
   );
diff --git a/frontend/components/doc/Toc.tsx b/frontend/components/doc/Toc.tsx
index 4511b7b4a..2df1725ed 100644
--- a/frontend/components/doc/Toc.tsx
+++ b/frontend/components/doc/Toc.tsx
@@ -6,18 +6,41 @@ import { DocNodeKindIcon } from "./DocNodeKindIcon.tsx";
 import Usages from "../../islands/DocUsages.tsx";
 
 export function Toc(
-  { content: { usages, top_symbols, document_navigation } }: {
+  { content: { usages, top_symbols, document_navigation }, diff }: {
     content: ToCCtx;
+    diff?: {
+      oldVersionUrl: string;
+      oldVersion: string;
+      newVersionUrl: string;
+      newVersion: string;
+    };
   },
 ) {
-  if (!usages && !top_symbols && document_navigation.length === 0) {
+  if (!usages && !top_symbols && document_navigation.length === 0 && !diff) {
     return null;
   }
 
   return (
-    <div class="ddoc w-full lg:overflow-y-auto pb-4 pt-4">
+    <div class="ddoc lg:overflow-y-auto pb-4 pt-4 -mx-3 px-3">
       <div class="toc">
         <div class="space-y-5">
+          {diff && (
+            <div class="flex flex-col gap-4">
+              <a
+                href={diff.oldVersionUrl}
+                class="block button-sm button-secondary"
+              >
+                View in {diff.oldVersion}
+              </a>
+              <a
+                href={diff.newVersionUrl}
+                class="block button-sm button-secondary"
+              >
+                View in {diff.newVersion}
+              </a>
+            </div>
+          )}
+
           {usages && <Usages usages={usages} />}
 
           {top_symbols && (
diff --git a/frontend/components/doc/mod.ts b/frontend/components/doc/mod.ts
index 8a32c36c6..4ec2b5bd1 100644
--- a/frontend/components/doc/mod.ts
+++ b/frontend/components/doc/mod.ts
@@ -1,4 +1,6 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
+import type { DiffStatus } from "@deno/doc/html-types";
+
 export { Anchor } from "./Anchor.tsx";
 export { Breadcrumbs } from "./Breadcrumbs.tsx";
 export { CategoryPanel } from "./CategoryPanel.tsx";
@@ -19,3 +21,26 @@ export { SymbolContent } from "./SymbolContent.tsx";
 export { SymbolGroup } from "./SymbolGroup.tsx";
 export { Tag } from "./Tag.tsx";
 export { Toc } from "./Toc.tsx";
+
+export function getDiffColor(
+  diffStatus: DiffStatus | undefined,
+  allowModified: boolean,
+) {
+  if (!diffStatus) return "";
+
+  switch (diffStatus.kind) {
+    case "added":
+      return "diff-added";
+    case "removed":
+      return "diff-removed";
+    case "modified": {
+      if (allowModified) {
+        return "diff-modified";
+      } else {
+        return "";
+      }
+    }
+    case "renamed":
+      return "";
+  }
+}
diff --git a/frontend/deno.json b/frontend/deno.json
index 54758c95c..4547dab17 100644
--- a/frontend/deno.json
+++ b/frontend/deno.json
@@ -14,7 +14,7 @@
     }
   },
   "imports": {
-    "@deno/doc": "jsr:@deno/doc@^0.193.0",
+    "@deno/doc": "jsr:@deno/doc@^0.194.0",
     "@fresh/plugin-tailwind": "jsr:@fresh/plugin-tailwind@^1.0.0",
     "apexcharts": "npm:apexcharts@^4.5.0",
     "tb-icons": "jsr:@preact-icons/tb@^1.0.14",
diff --git a/frontend/deno.lock b/frontend/deno.lock
index b6c37386e..18699c747 100644
--- a/frontend/deno.lock
+++ b/frontend/deno.lock
@@ -1,13 +1,17 @@
 {
   "version": "5",
   "specifiers": {
+    "jsr:@david/console-static-text@0.3": "0.3.0",
+    "jsr:@david/dax@0.43.2": "0.43.2",
+    "jsr:@david/path@0.2": "0.2.0",
+    "jsr:@david/which@~0.4.1": "0.4.1",
     "jsr:@deno/cache-dir@0.25": "0.25.0",
-    "jsr:@deno/doc@0.193": "0.193.0",
-    "jsr:@deno/esbuild-plugin@^1.2.0": "1.2.1",
+    "jsr:@deno/doc@0.194": "0.194.0",
+    "jsr:@deno/esbuild-plugin@^1.2.0": "1.2.0",
     "jsr:@deno/gfm@0.11": "0.11.0",
     "jsr:@deno/graph@0.100": "0.100.1",
     "jsr:@deno/graph@0.86": "0.86.9",
-    "jsr:@deno/loader@~0.3.10": "0.3.12",
+    "jsr:@deno/loader@~0.3.3": "0.3.12",
     "jsr:@denosaurs/emoji@~0.3.1": "0.3.1",
     "jsr:@fresh/build-id@1": "1.0.1",
     "jsr:@fresh/core@2": "2.2.0",
@@ -15,18 +19,21 @@
     "jsr:@fresh/plugin-tailwind@1": "1.0.0",
     "jsr:@preact-icons/common@^1.1.0": "1.1.0",
     "jsr:@preact-icons/tb@^1.0.14": "1.0.14",
+    "jsr:@std/assert@1": "1.0.18",
     "jsr:@std/bytes@^1.0.6": "1.0.6",
-    "jsr:@std/cli@^1.0.27": "1.0.27",
+    "jsr:@std/cli@^1.0.27": "1.0.28",
     "jsr:@std/collections@^1.1.3": "1.1.5",
     "jsr:@std/encoding@^1.0.10": "1.0.10",
+    "jsr:@std/fmt@1": "1.0.9",
     "jsr:@std/fmt@^1.0.3": "1.0.9",
     "jsr:@std/fmt@^1.0.6": "1.0.9",
     "jsr:@std/fmt@^1.0.8": "1.0.9",
     "jsr:@std/fmt@^1.0.9": "1.0.9",
     "jsr:@std/front-matter@1": "1.0.9",
-    "jsr:@std/fs@^1.0.19": "1.0.22",
-    "jsr:@std/fs@^1.0.22": "1.0.22",
-    "jsr:@std/fs@^1.0.6": "1.0.22",
+    "jsr:@std/fs@1": "1.0.23",
+    "jsr:@std/fs@^1.0.19": "1.0.23",
+    "jsr:@std/fs@^1.0.22": "1.0.23",
+    "jsr:@std/fs@^1.0.6": "1.0.23",
     "jsr:@std/html@^1.0.5": "1.0.5",
     "jsr:@std/http@1": "1.0.24",
     "jsr:@std/http@^1.0.21": "1.0.24",
@@ -45,7 +52,7 @@
     "jsr:@std/semver@^1.0.6": "1.0.8",
     "jsr:@std/streams@^1.0.17": "1.0.17",
     "jsr:@std/toml@^1.0.3": "1.0.11",
-    "jsr:@std/uuid@^1.0.9": "1.1.0",
+    "jsr:@std/uuid@^1.0.9": "1.0.9",
     "jsr:@std/yaml@^1.0.5": "1.0.11",
     "npm:@opentelemetry/api@^1.9.0": "1.9.0",
     "npm:@orama/core@^1.2.17": "1.2.17",
@@ -53,15 +60,17 @@
     "npm:@orama/orama@2": "2.1.1",
     "npm:@preact/signals@2.7.0": "2.7.0_preact@10.28.3",
     "npm:@preact/signals@^2.2.1": "2.7.0_preact@10.28.3",
-    "npm:@tailwindcss/postcss@^4.1.10": "4.1.18",
+    "npm:@tailwindcss/postcss@^4.1.10": "4.2.0",
     "npm:@viz-js/viz@^3.11.0": "3.24.0",
     "npm:apexcharts@^4.5.0": "4.7.0_@svgdotjs+svg.js@3.2.5_@svgdotjs+svg.select.js@4.0.3__@svgdotjs+svg.js@3.2.5",
+    "npm:browserslist@4.23.0": "4.23.0",
     "npm:esbuild-wasm@~0.25.11": "0.25.12",
     "npm:esbuild@0.25.7": "0.25.7",
     "npm:esbuild@~0.25.5": "0.25.7",
     "npm:github-slugger@2": "2.0.0",
     "npm:he@^1.2.0": "1.2.0",
     "npm:katex@0.16": "0.16.28",
+    "npm:lightningcss@^1.26.0": "1.31.1",
     "npm:marked-alert@2": "2.1.2_marked@12.0.2",
     "npm:marked-footnote@^1.2.0": "1.4.0_marked@12.0.2",
     "npm:marked-gfm-heading-id@^3.1.0": "3.2.0_marked@12.0.2",
@@ -70,17 +79,43 @@
     "npm:postcss@8.4": "8.4.49",
     "npm:postcss@8.5.6": "8.5.6",
     "npm:preact-render-to-string@6.3.1": "6.3.1_preact@10.28.3",
-    "npm:preact-render-to-string@^6.6.3": "6.6.5_preact@10.28.3",
+    "npm:preact-render-to-string@^6.6.3": "6.6.6_preact@10.28.3",
     "npm:preact@10": "10.28.3",
     "npm:preact@^10.22.1": "10.28.3",
     "npm:preact@^10.27.0": "10.28.3",
     "npm:preact@^10.27.2": "10.28.3",
     "npm:prismjs@^1.29.0": "1.30.0",
     "npm:sanitize-html@^2.13.0": "2.17.0",
+    "npm:tailwindcss@3.4.3": "3.4.3_postcss@8.5.6",
     "npm:tailwindcss@4.2": "4.2.0",
     "npm:twas@^2.1.3": "2.1.3"
   },
   "jsr": {
+    "@david/console-static-text@0.3.0": {
+      "integrity": "2dfb46ecee525755f7989f94ece30bba85bd8ffe3e8666abc1bf926e1ee0698d"
+    },
+    "@david/dax@0.43.2": {
+      "integrity": "8c7df175465d994c0e3568e3eb91102768c2f1c86d2a513d7fc4cab13f9cb328",
+      "dependencies": [
+        "jsr:@david/console-static-text",
+        "jsr:@david/path",
+        "jsr:@david/which",
+        "jsr:@std/fmt@1",
+        "jsr:@std/fs@1",
+        "jsr:@std/io",
+        "jsr:@std/path@1"
+      ]
+    },
+    "@david/path@0.2.0": {
+      "integrity": "f2d7aa7f02ce5a55e27c09f9f1381794acb09d328f8d3c8a2e3ab3ffc294dccd",
+      "dependencies": [
+        "jsr:@std/fs@1",
+        "jsr:@std/path@1"
+      ]
+    },
+    "@david/which@0.4.1": {
+      "integrity": "896a682b111f92ab866cc70c5b4afab2f5899d2f9bde31ed00203b9c250f225e"
+    },
     "@deno/cache-dir@0.25.0": {
       "integrity": "e9c3e901f87961a813a197b076668007699953dcbeb3af51971d90fdb0d29723",
       "dependencies": [
@@ -91,15 +126,15 @@
         "jsr:@std/path@^1.0.8"
       ]
     },
-    "@deno/doc@0.193.0": {
-      "integrity": "53e86ecbbbad01caabadf8e11ec0a089b95a83d30a776c2976c279601e39cf5c",
+    "@deno/doc@0.194.0": {
+      "integrity": "eac7bc9d5061252a57b11cdfd1a24d6c773eb93004794112b23e9af937acc7eb",
       "dependencies": [
         "jsr:@deno/cache-dir",
         "jsr:@deno/graph@0.100"
       ]
     },
-    "@deno/esbuild-plugin@1.2.1": {
-      "integrity": "df629467913adc1f960149fdfa3a3430ba8c20381c310fba096db244e6c3c9f6",
+    "@deno/esbuild-plugin@1.2.0": {
+      "integrity": "04ddd0fca9416d8a2866263928a53b9d5ed08dfca064d64504a0aaf9800c709e",
       "dependencies": [
         "jsr:@deno/loader",
         "jsr:@std/path@^1.1.1",
@@ -184,11 +219,17 @@
         "npm:preact@^10.22.1"
       ]
     },
+    "@std/assert@1.0.18": {
+      "integrity": "270245e9c2c13b446286de475131dc688ca9abcd94fc5db41d43a219b34d1c78",
+      "dependencies": [
+        "jsr:@std/internal"
+      ]
+    },
     "@std/bytes@1.0.6": {
       "integrity": "f6ac6adbd8ccd99314045f5703e23af0a68d7f7e58364b47d2c7f408aeb5820a"
     },
-    "@std/cli@1.0.27": {
-      "integrity": "eba97edd0891871a7410e835dd94b3c260c709cca5983df2689c25a71fbe04de"
+    "@std/cli@1.0.28": {
+      "integrity": "74ef9b976db59ca6b23a5283469c9072be6276853807a83ec6c7ce412135c70a"
     },
     "@std/collections@1.1.5": {
       "integrity": "c37cc6bbbbf90fec3e782535a46c9c8a3210f19118c61add71fcea86b0ffd491"
@@ -206,9 +247,10 @@
         "jsr:@std/yaml"
       ]
     },
-    "@std/fs@1.0.22": {
-      "integrity": "de0f277a58a867147a8a01bc1b181d0dfa80bfddba8c9cf2bacd6747bcec9308",
+    "@std/fs@1.0.23": {
+      "integrity": "3ecbae4ce4fee03b180fa710caff36bb5adb66631c46a6460aaad49515565a37",
       "dependencies": [
+        "jsr:@std/internal",
         "jsr:@std/path@^1.1.4"
       ]
     },
@@ -271,8 +313,8 @@
         "jsr:@std/collections"
       ]
     },
-    "@std/uuid@1.1.0": {
-      "integrity": "6268db2ccf172849c9be80763354ca305d49ef4af41fe995623d44fcc3f7457c",
+    "@std/uuid@1.0.9": {
+      "integrity": "44b627bf2d372fe1bd099e2ad41b2be41a777fc94e62a3151006895a037f1642",
       "dependencies": [
         "jsr:@std/bytes"
       ]
@@ -445,6 +487,23 @@
     "@noble/hashes@1.8.0": {
       "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A=="
     },
+    "@nodelib/fs.scandir@2.1.5": {
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dependencies": [
+        "@nodelib/fs.stat",
+        "run-parallel"
+      ]
+    },
+    "@nodelib/fs.stat@2.0.5": {
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="
+    },
+    "@nodelib/fs.walk@1.2.8": {
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dependencies": [
+        "@nodelib/fs.scandir",
+        "fastq"
+      ]
+    },
     "@opentelemetry/api@1.9.0": {
       "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg=="
     },
@@ -508,79 +567,79 @@
         "@svgdotjs/svg.js"
       ]
     },
-    "@tailwindcss/node@4.1.18": {
-      "integrity": "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==",
+    "@tailwindcss/node@4.2.0": {
+      "integrity": "sha512-Yv+fn/o2OmL5fh/Ir62VXItdShnUxfpkMA4Y7jdeC8O81WPB8Kf6TT6GSHvnqgSwDzlB5iT7kDpeXxLsUS0T6Q==",
       "dependencies": [
         "@jridgewell/remapping",
         "enhanced-resolve",
-        "jiti",
+        "jiti@2.6.1",
         "lightningcss",
         "magic-string",
         "source-map-js",
-        "tailwindcss@4.1.18"
+        "tailwindcss@4.2.0"
       ]
     },
-    "@tailwindcss/oxide-android-arm64@4.1.18": {
-      "integrity": "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==",
+    "@tailwindcss/oxide-android-arm64@4.2.0": {
+      "integrity": "sha512-F0QkHAVaW/JNBWl4CEKWdZ9PMb0khw5DCELAOnu+RtjAfx5Zgw+gqCHFvqg3AirU1IAd181fwOtJQ5I8Yx5wtw==",
       "os": ["android"],
       "cpu": ["arm64"]
     },
-    "@tailwindcss/oxide-darwin-arm64@4.1.18": {
-      "integrity": "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==",
+    "@tailwindcss/oxide-darwin-arm64@4.2.0": {
+      "integrity": "sha512-I0QylkXsBsJMZ4nkUNSR04p6+UptjcwhcVo3Zu828ikiEqHjVmQL9RuQ6uT/cVIiKpvtVA25msu/eRV97JeNSA==",
       "os": ["darwin"],
       "cpu": ["arm64"]
     },
-    "@tailwindcss/oxide-darwin-x64@4.1.18": {
-      "integrity": "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==",
+    "@tailwindcss/oxide-darwin-x64@4.2.0": {
+      "integrity": "sha512-6TmQIn4p09PBrmnkvbYQ0wbZhLtbaksCDx7Y7R3FYYx0yxNA7xg5KP7dowmQ3d2JVdabIHvs3Hx4K3d5uCf8xg==",
       "os": ["darwin"],
       "cpu": ["x64"]
     },
-    "@tailwindcss/oxide-freebsd-x64@4.1.18": {
-      "integrity": "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==",
+    "@tailwindcss/oxide-freebsd-x64@4.2.0": {
+      "integrity": "sha512-qBudxDvAa2QwGlq9y7VIzhTvp2mLJ6nD/G8/tI70DCDoneaUeLWBJaPcbfzqRIWraj+o969aDQKvKW9dvkUizw==",
       "os": ["freebsd"],
       "cpu": ["x64"]
     },
-    "@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18": {
-      "integrity": "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==",
+    "@tailwindcss/oxide-linux-arm-gnueabihf@4.2.0": {
+      "integrity": "sha512-7XKkitpy5NIjFZNUQPeUyNJNJn1CJeV7rmMR+exHfTuOsg8rxIO9eNV5TSEnqRcaOK77zQpsyUkBWmPy8FgdSg==",
       "os": ["linux"],
       "cpu": ["arm"]
     },
-    "@tailwindcss/oxide-linux-arm64-gnu@4.1.18": {
-      "integrity": "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==",
+    "@tailwindcss/oxide-linux-arm64-gnu@4.2.0": {
+      "integrity": "sha512-Mff5a5Q3WoQR01pGU1gr29hHM1N93xYrKkGXfPw/aRtK4bOc331Ho4Tgfsm5WDGvpevqMpdlkCojT3qlCQbCpA==",
       "os": ["linux"],
       "cpu": ["arm64"]
     },
-    "@tailwindcss/oxide-linux-arm64-musl@4.1.18": {
-      "integrity": "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==",
+    "@tailwindcss/oxide-linux-arm64-musl@4.2.0": {
+      "integrity": "sha512-XKcSStleEVnbH6W/9DHzZv1YhjE4eSS6zOu2eRtYAIh7aV4o3vIBs+t/B15xlqoxt6ef/0uiqJVB6hkHjWD/0A==",
       "os": ["linux"],
       "cpu": ["arm64"]
     },
-    "@tailwindcss/oxide-linux-x64-gnu@4.1.18": {
-      "integrity": "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==",
+    "@tailwindcss/oxide-linux-x64-gnu@4.2.0": {
+      "integrity": "sha512-/hlXCBqn9K6fi7eAM0RsobHwJYa5V/xzWspVTzxnX+Ft9v6n+30Pz8+RxCn7sQL/vRHHLS30iQPrHQunu6/vJA==",
       "os": ["linux"],
       "cpu": ["x64"]
     },
-    "@tailwindcss/oxide-linux-x64-musl@4.1.18": {
-      "integrity": "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==",
+    "@tailwindcss/oxide-linux-x64-musl@4.2.0": {
+      "integrity": "sha512-lKUaygq4G7sWkhQbfdRRBkaq4LY39IriqBQ+Gk6l5nKq6Ay2M2ZZb1tlIyRNgZKS8cbErTwuYSor0IIULC0SHw==",
       "os": ["linux"],
       "cpu": ["x64"]
     },
-    "@tailwindcss/oxide-wasm32-wasi@4.1.18": {
-      "integrity": "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==",
+    "@tailwindcss/oxide-wasm32-wasi@4.2.0": {
+      "integrity": "sha512-xuDjhAsFdUuFP5W9Ze4k/o4AskUtI8bcAGU4puTYprr89QaYFmhYOPfP+d1pH+k9ets6RoE23BXZM1X1jJqoyw==",
       "cpu": ["wasm32"]
     },
-    "@tailwindcss/oxide-win32-arm64-msvc@4.1.18": {
-      "integrity": "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==",
+    "@tailwindcss/oxide-win32-arm64-msvc@4.2.0": {
+      "integrity": "sha512-2UU/15y1sWDEDNJXxEIrfWKC2Yb4YgIW5Xz2fKFqGzFWfoMHWFlfa1EJlGO2Xzjkq/tvSarh9ZTjvbxqWvLLXA==",
       "os": ["win32"],
       "cpu": ["arm64"]
     },
-    "@tailwindcss/oxide-win32-x64-msvc@4.1.18": {
-      "integrity": "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==",
+    "@tailwindcss/oxide-win32-x64-msvc@4.2.0": {
+      "integrity": "sha512-CrFadmFoc+z76EV6LPG1jx6XceDsaCG3lFhyLNo/bV9ByPrE+FnBPckXQVP4XRkN76h3Fjt/a+5Er/oA/nCBvQ==",
       "os": ["win32"],
       "cpu": ["x64"]
     },
-    "@tailwindcss/oxide@4.1.18": {
-      "integrity": "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==",
+    "@tailwindcss/oxide@4.2.0": {
+      "integrity": "sha512-AZqQzADaj742oqn2xjl5JbIOzZB/DGCYF/7bpvhA8KvjUj9HJkag6bBuwZvH1ps6dfgxNHyuJVlzSr2VpMgdTQ==",
       "optionalDependencies": [
         "@tailwindcss/oxide-android-arm64",
         "@tailwindcss/oxide-darwin-arm64",
@@ -596,14 +655,14 @@
         "@tailwindcss/oxide-win32-x64-msvc"
       ]
     },
-    "@tailwindcss/postcss@4.1.18": {
-      "integrity": "sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g==",
+    "@tailwindcss/postcss@4.2.0": {
+      "integrity": "sha512-u6YBacGpOm/ixPfKqfgrJEjMfrYmPD7gEFRoygS/hnQaRtV0VCBdpkx5Ouw9pnaLRwwlgGCuJw8xLpaR0hOrQg==",
       "dependencies": [
         "@alloc/quick-lru",
         "@tailwindcss/node",
         "@tailwindcss/oxide",
         "postcss@8.5.6",
-        "tailwindcss@4.1.18"
+        "tailwindcss@4.2.0"
       ]
     },
     "@viz-js/viz@3.24.0": {
@@ -612,6 +671,16 @@
     "@yr/monotone-cubic-spline@1.0.3": {
       "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA=="
     },
+    "any-promise@1.3.0": {
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+    },
+    "anymatch@3.1.3": {
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dependencies": [
+        "normalize-path",
+        "picomatch@2.3.1"
+      ]
+    },
     "apexcharts@4.7.0_@svgdotjs+svg.js@3.2.5_@svgdotjs+svg.select.js@4.0.3__@svgdotjs+svg.js@3.2.5": {
       "integrity": "sha512-iZSrrBGvVlL+nt2B1NpqfDuBZ9jX61X9I2+XV0hlYXHtTwhwLTHDKGXjNXAgFBDLuvSYCB/rq2nPWVPRv2DrGA==",
       "dependencies": [
@@ -623,15 +692,71 @@
         "@yr/monotone-cubic-spline"
       ]
     },
+    "arg@5.0.2": {
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+    },
+    "binary-extensions@2.3.0": {
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="
+    },
+    "braces@3.0.3": {
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dependencies": [
+        "fill-range"
+      ]
+    },
+    "browserslist@4.23.0": {
+      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
+      "dependencies": [
+        "caniuse-lite",
+        "electron-to-chromium",
+        "node-releases",
+        "update-browserslist-db"
+      ],
+      "bin": true
+    },
+    "camelcase-css@2.0.1": {
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
+    },
+    "caniuse-lite@1.0.30001770": {
+      "integrity": "sha512-x/2CLQ1jHENRbHg5PSId2sXq1CIO1CISvwWAj027ltMVG2UNgW+w9oH2+HzgEIRFembL8bUlXtfbBHR1fCg2xw=="
+    },
+    "chokidar@3.6.0": {
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dependencies": [
+        "anymatch",
+        "braces",
+        "glob-parent@5.1.2",
+        "is-binary-path",
+        "is-glob",
+        "normalize-path",
+        "readdirp"
+      ],
+      "optionalDependencies": [
+        "fsevents"
+      ]
+    },
+    "commander@4.1.1": {
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="
+    },
     "commander@8.3.0": {
       "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="
     },
+    "cssesc@3.0.0": {
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "bin": true
+    },
     "deepmerge@4.3.1": {
       "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="
     },
     "detect-libc@2.1.2": {
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="
     },
+    "didyoumean@1.2.2": {
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
+    },
+    "dlv@1.1.3": {
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+    },
     "dom-serializer@2.0.0": {
       "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
       "dependencies": [
@@ -657,6 +782,9 @@
         "domhandler"
       ]
     },
+    "electron-to-chromium@1.5.286": {
+      "integrity": "sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A=="
+    },
     "enhanced-resolve@5.19.0": {
       "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==",
       "dependencies": [
@@ -704,15 +832,75 @@
       "scripts": true,
       "bin": true
     },
+    "escalade@3.2.0": {
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="
+    },
     "escape-string-regexp@4.0.0": {
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
     },
+    "fast-glob@3.3.3": {
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dependencies": [
+        "@nodelib/fs.stat",
+        "@nodelib/fs.walk",
+        "glob-parent@5.1.2",
+        "merge2",
+        "micromatch"
+      ]
+    },
+    "fastq@1.20.1": {
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dependencies": [
+        "reusify"
+      ]
+    },
+    "fdir@6.5.0_picomatch@4.0.3": {
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dependencies": [
+        "picomatch@4.0.3"
+      ],
+      "optionalPeers": [
+        "picomatch@4.0.3"
+      ]
+    },
+    "fill-range@7.1.1": {
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dependencies": [
+        "to-regex-range"
+      ]
+    },
+    "fsevents@2.3.3": {
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "os": ["darwin"],
+      "scripts": true
+    },
+    "function-bind@1.1.2": {
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
+    },
     "github-slugger@2.0.0": {
       "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="
     },
+    "glob-parent@5.1.2": {
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": [
+        "is-glob"
+      ]
+    },
+    "glob-parent@6.0.2": {
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dependencies": [
+        "is-glob"
+      ]
+    },
     "graceful-fs@4.2.11": {
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
+    "hasown@2.0.2": {
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dependencies": [
+        "function-bind"
+      ]
+    },
     "he@1.2.0": {
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "bin": true
@@ -726,9 +914,37 @@
         "entities"
       ]
     },
+    "is-binary-path@2.1.0": {
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dependencies": [
+        "binary-extensions"
+      ]
+    },
+    "is-core-module@2.16.1": {
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dependencies": [
+        "hasown"
+      ]
+    },
+    "is-extglob@2.1.1": {
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
+    },
+    "is-glob@4.0.3": {
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dependencies": [
+        "is-extglob"
+      ]
+    },
+    "is-number@7.0.0": {
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+    },
     "is-plain-object@5.0.0": {
       "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
     },
+    "jiti@1.21.7": {
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "bin": true
+    },
     "jiti@2.6.1": {
       "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "bin": true
@@ -736,67 +952,67 @@
     "katex@0.16.28": {
       "integrity": "sha512-YHzO7721WbmAL6Ov1uzN/l5mY5WWWhJBSW+jq4tkfZfsxmo1hu6frS0EOswvjBUnWE6NtjEs48SFn5CQESRLZg==",
       "dependencies": [
-        "commander"
+        "commander@8.3.0"
       ],
       "bin": true
     },
-    "lightningcss-android-arm64@1.30.2": {
-      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+    "lightningcss-android-arm64@1.31.1": {
+      "integrity": "sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==",
       "os": ["android"],
       "cpu": ["arm64"]
     },
-    "lightningcss-darwin-arm64@1.30.2": {
-      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+    "lightningcss-darwin-arm64@1.31.1": {
+      "integrity": "sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==",
       "os": ["darwin"],
       "cpu": ["arm64"]
     },
-    "lightningcss-darwin-x64@1.30.2": {
-      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+    "lightningcss-darwin-x64@1.31.1": {
+      "integrity": "sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==",
       "os": ["darwin"],
       "cpu": ["x64"]
     },
-    "lightningcss-freebsd-x64@1.30.2": {
-      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+    "lightningcss-freebsd-x64@1.31.1": {
+      "integrity": "sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==",
       "os": ["freebsd"],
       "cpu": ["x64"]
     },
-    "lightningcss-linux-arm-gnueabihf@1.30.2": {
-      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+    "lightningcss-linux-arm-gnueabihf@1.31.1": {
+      "integrity": "sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==",
       "os": ["linux"],
       "cpu": ["arm"]
     },
-    "lightningcss-linux-arm64-gnu@1.30.2": {
-      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+    "lightningcss-linux-arm64-gnu@1.31.1": {
+      "integrity": "sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==",
       "os": ["linux"],
       "cpu": ["arm64"]
     },
-    "lightningcss-linux-arm64-musl@1.30.2": {
-      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+    "lightningcss-linux-arm64-musl@1.31.1": {
+      "integrity": "sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==",
       "os": ["linux"],
       "cpu": ["arm64"]
     },
-    "lightningcss-linux-x64-gnu@1.30.2": {
-      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+    "lightningcss-linux-x64-gnu@1.31.1": {
+      "integrity": "sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==",
       "os": ["linux"],
       "cpu": ["x64"]
     },
-    "lightningcss-linux-x64-musl@1.30.2": {
-      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+    "lightningcss-linux-x64-musl@1.31.1": {
+      "integrity": "sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==",
       "os": ["linux"],
       "cpu": ["x64"]
     },
-    "lightningcss-win32-arm64-msvc@1.30.2": {
-      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+    "lightningcss-win32-arm64-msvc@1.31.1": {
+      "integrity": "sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==",
       "os": ["win32"],
       "cpu": ["arm64"]
     },
-    "lightningcss-win32-x64-msvc@1.30.2": {
-      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+    "lightningcss-win32-x64-msvc@1.31.1": {
+      "integrity": "sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==",
       "os": ["win32"],
       "cpu": ["x64"]
     },
-    "lightningcss@1.30.2": {
-      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+    "lightningcss@1.31.1": {
+      "integrity": "sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==",
       "dependencies": [
         "detect-libc"
       ],
@@ -814,6 +1030,15 @@
         "lightningcss-win32-x64-msvc"
       ]
     },
+    "lilconfig@2.1.0": {
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="
+    },
+    "lilconfig@3.1.3": {
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="
+    },
+    "lines-and-columns@1.2.4": {
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+    },
     "magic-string@0.30.21": {
       "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
       "dependencies": [
@@ -850,16 +1075,105 @@
       "integrity": "sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==",
       "bin": true
     },
+    "merge2@1.4.1": {
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="
+    },
+    "micromatch@4.0.8": {
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dependencies": [
+        "braces",
+        "picomatch@2.3.1"
+      ]
+    },
+    "mz@2.7.0": {
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dependencies": [
+        "any-promise",
+        "object-assign",
+        "thenify-all"
+      ]
+    },
     "nanoid@3.3.11": {
       "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "bin": true
     },
+    "node-releases@2.0.27": {
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA=="
+    },
+    "normalize-path@3.0.0": {
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+    },
+    "object-assign@4.1.1": {
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+    },
+    "object-hash@3.0.0": {
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="
+    },
     "parse-srcset@1.0.2": {
       "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q=="
     },
+    "path-parse@1.0.7": {
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
     "picocolors@1.1.1": {
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
+    "picomatch@2.3.1": {
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
+    },
+    "picomatch@4.0.3": {
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="
+    },
+    "pify@2.3.0": {
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
+    },
+    "pirates@4.0.7": {
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA=="
+    },
+    "postcss-import@15.1.0_postcss@8.5.6": {
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dependencies": [
+        "postcss@8.5.6",
+        "postcss-value-parser",
+        "read-cache",
+        "resolve"
+      ]
+    },
+    "postcss-js@4.1.0_postcss@8.5.6": {
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dependencies": [
+        "camelcase-css",
+        "postcss@8.5.6"
+      ]
+    },
+    "postcss-load-config@4.0.2_postcss@8.5.6": {
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dependencies": [
+        "lilconfig@3.1.3",
+        "postcss@8.5.6",
+        "yaml"
+      ],
+      "optionalPeers": [
+        "postcss@8.5.6"
+      ]
+    },
+    "postcss-nested@6.2.0_postcss@8.5.6": {
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dependencies": [
+        "postcss@8.5.6",
+        "postcss-selector-parser"
+      ]
+    },
+    "postcss-selector-parser@6.1.2": {
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dependencies": [
+        "cssesc",
+        "util-deprecate"
+      ]
+    },
+    "postcss-value-parser@4.2.0": {
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+    },
     "postcss@8.4.49": {
       "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
       "dependencies": [
@@ -883,8 +1197,8 @@
         "pretty-format"
       ]
     },
-    "preact-render-to-string@6.6.5_preact@10.28.3": {
-      "integrity": "sha512-O6MHzYNIKYaiSX3bOw0gGZfEbOmlIDtDfWwN1JJdc/T3ihzRT6tGGSEWE088dWrEDGa1u7101q+6fzQnO9XCPA==",
+    "preact-render-to-string@6.6.6_preact@10.28.3": {
+      "integrity": "sha512-EfqZJytnjJldV+YaaqhthU2oXsEf5e+6rDv957p+zxAvNfFLQOPfvBOTncscQ+akzu6Wrl7s3Pa0LjUQmWJsGQ==",
       "dependencies": [
         "preact"
       ]
@@ -898,6 +1212,39 @@
     "prismjs@1.30.0": {
       "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw=="
     },
+    "queue-microtask@1.2.3": {
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
+    },
+    "read-cache@1.0.0": {
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dependencies": [
+        "pify"
+      ]
+    },
+    "readdirp@3.6.0": {
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": [
+        "picomatch@2.3.1"
+      ]
+    },
+    "resolve@1.22.11": {
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+      "dependencies": [
+        "is-core-module",
+        "path-parse",
+        "supports-preserve-symlinks-flag"
+      ],
+      "bin": true
+    },
+    "reusify@1.1.0": {
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="
+    },
+    "run-parallel@1.2.0": {
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dependencies": [
+        "queue-microtask"
+      ]
+    },
     "sanitize-html@2.17.0": {
       "integrity": "sha512-dLAADUSS8rBwhaevT12yCezvioCA+bmUTPH/u57xKPT8d++voeYE6HeluA/bPbQ15TwDBG2ii+QZIEmYx8VdxA==",
       "dependencies": [
@@ -916,8 +1263,49 @@
     "source-map-js@1.2.1": {
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="
     },
-    "tailwindcss@4.1.18": {
-      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw=="
+    "sucrase@3.35.1": {
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dependencies": [
+        "@jridgewell/gen-mapping",
+        "commander@4.1.1",
+        "lines-and-columns",
+        "mz",
+        "pirates",
+        "tinyglobby",
+        "ts-interface-checker"
+      ],
+      "bin": true
+    },
+    "supports-preserve-symlinks-flag@1.0.0": {
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
+    },
+    "tailwindcss@3.4.3_postcss@8.5.6": {
+      "integrity": "sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==",
+      "dependencies": [
+        "@alloc/quick-lru",
+        "arg",
+        "chokidar",
+        "didyoumean",
+        "dlv",
+        "fast-glob",
+        "glob-parent@6.0.2",
+        "is-glob",
+        "jiti@1.21.7",
+        "lilconfig@2.1.0",
+        "micromatch",
+        "normalize-path",
+        "object-hash",
+        "picocolors",
+        "postcss@8.5.6",
+        "postcss-import",
+        "postcss-js",
+        "postcss-load-config",
+        "postcss-nested",
+        "postcss-selector-parser",
+        "resolve",
+        "sucrase"
+      ],
+      "bin": true
     },
     "tailwindcss@4.2.0": {
       "integrity": "sha512-yYzTZ4++b7fNYxFfpnberEEKu43w44aqDMNM9MHMmcKuCH7lL8jJ4yJ7LGHv7rSwiqM0nkiobF9I6cLlpS2P7Q=="
@@ -925,8 +1313,52 @@
     "tapable@2.3.0": {
       "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg=="
     },
+    "thenify-all@1.6.0": {
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dependencies": [
+        "thenify"
+      ]
+    },
+    "thenify@3.3.1": {
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dependencies": [
+        "any-promise"
+      ]
+    },
+    "tinyglobby@0.2.15_picomatch@4.0.3": {
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dependencies": [
+        "fdir",
+        "picomatch@4.0.3"
+      ]
+    },
+    "to-regex-range@5.0.1": {
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dependencies": [
+        "is-number"
+      ]
+    },
+    "ts-interface-checker@0.1.13": {
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+    },
     "twas@2.1.3": {
       "integrity": "sha512-4Spnweu5OEBG9ZZIfabEh0js2x1p+34QsLLz+vHjER/nQX0L/+b7H6gelZbT+Ewi2KVNHcBy5gGhib9DeVAqpA=="
+    },
+    "update-browserslist-db@1.2.3_browserslist@4.23.0": {
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dependencies": [
+        "browserslist",
+        "escalade",
+        "picocolors"
+      ],
+      "bin": true
+    },
+    "util-deprecate@1.0.2": {
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "yaml@2.8.2": {
+      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
+      "bin": true
     }
   },
   "remote": {
@@ -1042,7 +1474,7 @@
   },
   "workspace": {
     "dependencies": [
-      "jsr:@deno/doc@0.193",
+      "jsr:@deno/doc@0.194",
       "jsr:@deno/gfm@0.11",
       "jsr:@fresh/core@^2.2.0",
       "jsr:@fresh/plugin-tailwind@1",
diff --git a/frontend/routes/package/(_components)/Docs.tsx b/frontend/routes/package/(_components)/Docs.tsx
index 008bf2dda..e302a94b2 100644
--- a/frontend/routes/package/(_components)/Docs.tsx
+++ b/frontend/routes/package/(_components)/Docs.tsx
@@ -6,16 +6,17 @@ import type {
 } from "../../../utils/api_types.ts";
 import { LocalSymbolSearch } from "../(_islands)/LocalSymbolSearch.tsx";
 import { Docs } from "../../../util.ts";
-import { Params } from "./PackageNav.tsx";
 import { BreadcrumbsSticky } from "../(_islands)/BreadcrumbsSticky.tsx";
 import { TicketModal } from "../../../islands/TicketModal.tsx";
 import { TbFlag } from "tb-icons";
 import { ModuleDoc, SymbolGroup, Toc } from "../../../components/doc/mod.ts";
 import { AllSymbols } from "../../../components/doc/AllSymbols.tsx";
+import { ComponentChildren } from "preact";
+import DiffVersionSelector from "../(_islands)/DiffVersionSelector.tsx";
+import { compileDocsRequestPath, DocsRequest } from "../../../utils/data.ts";
 
 interface DocsProps {
   docs: Docs;
-  params: Params;
   selectedVersion: PackageVersionWithUser;
   showProvenanceBadge?: boolean;
   user: User | null;
@@ -23,6 +24,17 @@ interface DocsProps {
   pkg: string;
 }
 
+interface DiffProps {
+  docs: Docs | null;
+  versions: PackageVersionWithUser[];
+  scope: string;
+  pkg: string;
+  oldVersion?: string;
+  newVersion?: string;
+  url: URL;
+  request: DocsRequest;
+}
+
 interface ProvenanceBadgeProps {
   rekorLogId: string;
 }
@@ -71,17 +83,21 @@ function ProvenanceBadge({ rekorLogId }: ProvenanceBadgeProps) {
   );
 }
 
-export function DocsView({
+function SharedView({
   docs,
-  params,
-  selectedVersion,
-  showProvenanceBadge,
-  user,
-  scope,
-  pkg,
-}: DocsProps) {
+  navRightClass,
+  navRight,
+  children,
+  toc,
+}: {
+  docs: Docs;
+  navRightClass?: string;
+  navRight: ComponentChildren;
+  children?: ComponentChildren;
+  toc: ComponentChildren;
+}) {
   return (
-    <div class="pt-6 pb-8 flex flex-col gap-8">
+    <div class="pt-6 pb-8">
       <style
         hidden
         // deno-lint-ignore react-no-danger
@@ -95,92 +111,177 @@ export function DocsView({
       />
 
       {docs.breadcrumbs && (
-        <BreadcrumbsSticky
-          searchContent={docs.main.kind === "allSymbols"
-            ? docs.main.value
-            : undefined}
-          content={docs.breadcrumbs}
-          scope={params.scope}
-          package={params.package}
-          version={selectedVersion.version}
-        />
+        <BreadcrumbsSticky content={docs.breadcrumbs} class={navRightClass}>
+          {navRight}
+        </BreadcrumbsSticky>
       )}
 
       <div class="grid grid-cols-1 lg:grid-cols-10 gap-8 lg:gap-12">
-        <div
-          class={`min-w-0 ${
-            docs.toc ? "lg:col-span-7 lg:row-start-1" : "col-span-full"
-          }`}
-        >
+        <div class="min-w-0 lg:col-span-7 lg:row-start-1 mt-4">
           <div class="ddoc mb-20" id="docMain">
             <MainDocs content={docs.main} />
           </div>
           <div class="ddoc hidden mb-20" id="docSearchResults" />
 
-          <div class="flex justify-between lg:flex-nowrap flex-wrap items-center gap-4">
-            {showProvenanceBadge && selectedVersion.rekorLogId && (
-              <ProvenanceBadge rekorLogId={selectedVersion.rekorLogId} />
-            )}
+          {children}
+        </div>
+        <div
+          class={`max-lg:row-start-1 lg:col-[span_3/_-1] lg:sticky flex flex-col box-border gap-y-4 ${
+            docs.breadcrumbs
+              ? "lg:top-[var(--breadcrumbs-height,0px)] lg:max-h-[calc(100vh-var(--breadcrumbs-height,0px))] -mt-4 lg:mt-0"
+              : "lg:top-0 lg:max-h-screen -mt-4 pt-4"
+          }`}
+        >
+          {toc}
+        </div>
+      </div>
+    </div>
+  );
+}
 
-            <div>
-              <TicketModal
-                user={user}
-                kind="package_report"
-                style="danger"
-                title="Report package"
-                description={
-                  <>
-                    <p className="mt-4 text-secondary">
-                      Please provide a reason for reporting this package. We
-                      will review your report and take appropriate action.
-                    </p>
-                    <p className="mt-4 text-secondary">
-                      Please review the{" "}
-                      <a href="/docs/usage-policy#package-contents-and-metadata">
-                        JSR usage policy
-                      </a>{" "}
-                      before submitting a report.
-                    </p>
-                  </>
-                }
-                fields={[
-                  {
-                    name: "message",
-                    label: "Reason",
-                    type: "textarea",
-                    required: true,
-                  },
-                ]}
-                extraMeta={{
-                  scope,
-                  name: pkg,
-                  version: selectedVersion?.version,
-                }}
-              >
-                <TbFlag class="size-6 md:size-4" /> Report package
-              </TicketModal>
-            </div>
-          </div>
+export function DocsView({
+  docs,
+  selectedVersion,
+  showProvenanceBadge,
+  user,
+  scope,
+  pkg,
+}: DocsProps) {
+  return (
+    <SharedView
+      docs={docs}
+      navRightClass="lg:col-span-7"
+      navRight={
+        <div class="lg:col-[span_3/_-1]">
+          <LocalSymbolSearch
+            content={docs.main.kind === "allSymbols"
+              ? docs.main.value
+              : undefined}
+            scope={scope}
+            pkg={pkg}
+            version={selectedVersion.version}
+          />
         </div>
-        {docs.toc && (
-          <div
-            class={`max-lg:row-start-1 lg:col-[span_3/_-1] lg:top-0 lg:sticky lg:max-h-screen flex flex-col box-border gap-y-4 -mt-4 pt-4 ${
-              docs.breadcrumbs ? "lg:-mt-16 lg:pt-16" : ""
-            }`}
+      }
+      toc={
+        <>
+          {!docs.breadcrumbs && selectedVersion && (
+            <LocalSymbolSearch
+              scope={scope}
+              pkg={pkg}
+              version={selectedVersion.version}
+            />
+          )}
+          <Toc content={docs.toc} />
+        </>
+      }
+    >
+      <div class="flex justify-between lg:flex-nowrap flex-wrap items-center gap-4">
+        {showProvenanceBadge && selectedVersion &&
+          selectedVersion.rekorLogId && (
+          <ProvenanceBadge rekorLogId={selectedVersion.rekorLogId} />
+        )}
+
+        <div>
+          <TicketModal
+            user={user}
+            kind="package_report"
+            style="danger"
+            title="Report package"
+            description={
+              <>
+                <p className="mt-4 text-secondary">
+                  Please provide a reason for reporting this package. We will
+                  review your report and take appropriate action.
+                </p>
+                <p className="mt-4 text-secondary">
+                  Please review the{" "}
+                  <a href="/docs/usage-policy#package-contents-and-metadata">
+                    JSR usage policy
+                  </a>{" "}
+                  before submitting a report.
+                </p>
+              </>
+            }
+            fields={[
+              {
+                name: "message",
+                label: "Reason",
+                type: "textarea",
+                required: true,
+              },
+            ]}
+            extraMeta={{
+              scope,
+              name: pkg,
+              version: selectedVersion?.version,
+            }}
           >
-            {!docs.breadcrumbs && (
-              <LocalSymbolSearch
-                scope={params.scope}
-                pkg={params.package}
-                version={selectedVersion.version}
-              />
-            )}
+            <TbFlag class="size-6 md:size-4" /> Report package
+          </TicketModal>
+        </div>
+      </div>
+    </SharedView>
+  );
+}
 
-            <Toc content={docs.toc} />
-          </div>
-        )}
+export function DiffView({
+  docs,
+  scope,
+  pkg,
+  versions,
+  oldVersion,
+  newVersion,
+  url,
+  request,
+}: DiffProps) {
+  const docsRequest = compileDocsRequestPath(request);
+
+  if (!oldVersion || !newVersion || oldVersion == newVersion || !docs) {
+    return (
+      <div class="mt-7">
+        <DiffVersionSelector
+          scope={scope}
+          pkg={pkg}
+          versions={versions.map((version) => version.version)}
+          oldVersion={oldVersion}
+          newVersion={newVersion}
+          url={url}
+          docsRequest={docsRequest}
+        />
       </div>
-    </div>
+    );
+  }
+
+  return (
+    <SharedView
+      docs={docs}
+      navRightClass="lg:col-span-5"
+      navRight={
+        <div class="lg:col-[span_5/_-1]">
+          <DiffVersionSelector
+            scope={scope}
+            pkg={pkg}
+            versions={versions.map((version) => version.version)}
+            oldVersion={oldVersion}
+            newVersion={newVersion}
+            url={url}
+            docsRequest={docsRequest}
+          />
+        </div>
+      }
+      toc={
+        <Toc
+          content={docs.toc}
+          diff={{
+            oldVersion,
+            oldVersionUrl: `/@${scope}/${pkg}@${oldVersion}/doc${docsRequest}`,
+            newVersion,
+            newVersionUrl: `/@${scope}/${pkg}@${newVersion}/doc${docsRequest}`,
+          }}
+        />
+      }
+    />
   );
 }
 
diff --git a/frontend/routes/package/(_components)/PackageHeader.tsx b/frontend/routes/package/(_components)/PackageHeader.tsx
index 183dded61..0052f462d 100644
--- a/frontend/routes/package/(_components)/PackageHeader.tsx
+++ b/frontend/routes/package/(_components)/PackageHeader.tsx
@@ -56,41 +56,51 @@ export function PackageHeader({
       {selectedVersion && pkg.latestVersion &&
         pkg.latestVersion !== selectedVersion.version && (
         <div class="border border-jsr-yellow-500 dark:border-jsr-yellow-700 bg-jsr-yellow-50 dark:bg-jsr-yellow-900/30 rounded py-3 px-4 md:text-center dark:text-gray-200">
-          <div class="text-sm md:text-base flex items-center justify-center gap-4 md:gap-2">
-            <TbAlertTriangleFilled class="text-jsr-yellow-400 flex-none" />
-            <span class="font-medium">
-              This release {selectedVersion.yanked
-                ? (
-                  <>
-                    was yanked — the latest version of @{pkg
-                      .scope}/{pkg.name} is {pkg.latestVersion}.
-                  </>
-                )
-                : isNewerPrerelease
-                ? (
-                  <>
-                    is a pre-release — the latest non-prerelease version of
-                    @{pkg.scope}/{pkg.name} is {pkg.latestVersion}.
-                  </>
-                )
-                : (
-                  <>
-                    <span class="bold">
-                      is {selectedVersion.newerVersionsCount}{" "}
-                      version{selectedVersion.newerVersionsCount !== 1 && "s"}
-                      {" "}
-                      behind {pkg.latestVersion}
-                    </span>{" "}
-                    — the latest version of @{pkg.scope}/{pkg.name}.
-                  </>
-                )}{" "}
+          <div class="flex items-center justify-between max-md:flex-col gap-4 md:gap-2">
+            <div class="text-sm md:text-base flex items-center justify-center gap-4 md:gap-2">
+              <TbAlertTriangleFilled class="text-jsr-yellow-400 flex-none" />
+              <span class="font-medium">
+                This release {selectedVersion.yanked
+                  ? (
+                    <>
+                      was yanked — the latest version of @{pkg
+                        .scope}/{pkg.name} is {pkg.latestVersion}.
+                    </>
+                  )
+                  : isNewerPrerelease
+                  ? (
+                    <>
+                      is a pre-release — the latest non-prerelease version of
+                      @{pkg.scope}/{pkg.name} is {pkg.latestVersion}.
+                    </>
+                  )
+                  : (
+                    <>
+                      <span class="bold">
+                        is {selectedVersion.newerVersionsCount}{" "}
+                        version{selectedVersion.newerVersionsCount !== 1 && "s"}
+                        {" "}
+                        behind {pkg.latestVersion}
+                      </span>{" "}
+                      — the latest version of @{pkg.scope}/{pkg.name}.
+                    </>
+                  )}
+              </span>
+            </div>
+            <div class="flex gap-4 max-md:w-full max-md:text-center">
               <a
-                class="link font-medium whitespace-nowrap"
+                class="max-md:flex-1 max-md:block button-sm button-primary whitespace-nowrap"
                 href={`/@${pkg.scope}/${pkg.name}`}
               >
                 Jump to {isNewerPrerelease ? "this version " : "latest"}
               </a>
-            </span>
+              <a
+                class="max-md:flex-1 max-md:block button-sm button-primary whitespace-nowrap"
+                href={`/@${pkg.scope}/${pkg.name}/diff/${selectedVersion.version}...${pkg.latestVersion}`}
+              >
+                Jump to diff
+              </a>
+            </div>
           </div>
         </div>
       )}
diff --git a/frontend/routes/package/(_components)/PackageNav.tsx b/frontend/routes/package/(_components)/PackageNav.tsx
index 26f664019..04b7b1ad9 100644
--- a/frontend/routes/package/(_components)/PackageNav.tsx
+++ b/frontend/routes/package/(_components)/PackageNav.tsx
@@ -11,6 +11,7 @@ export interface Params {
 type Tab =
   | "Index"
   | "Docs"
+  | "Diff"
   | "Files"
   | "Versions"
   | "Dependencies"
@@ -56,6 +57,22 @@ export function PackageNav({
           Docs
         </NavItem>
       )}
+      {(latestVersion || params.version) && (
+        <NavItem
+          href={`${base}/diff/${
+            (params.version && params.version !== latestVersion)
+              ? params.version
+              : ""
+          }...${
+            (params.version && params.version === latestVersion)
+              ? params.version
+              : latestVersion ?? ""
+          }`}
+          active={currentTab === "Diff"}
+        >
+          Diff
+        </NavItem>
+      )}
       {(latestVersion || params.version) && (
         <NavItem
           href={`${base}/${params.version || latestVersion}`}
diff --git a/frontend/routes/package/(_islands)/BreadcrumbsSticky.tsx b/frontend/routes/package/(_islands)/BreadcrumbsSticky.tsx
index 0b267ffcc..7d7a27955 100644
--- a/frontend/routes/package/(_islands)/BreadcrumbsSticky.tsx
+++ b/frontend/routes/package/(_islands)/BreadcrumbsSticky.tsx
@@ -1,16 +1,14 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
 import { useSignal } from "@preact/signals";
 import { useEffect, useRef } from "preact/hooks";
-import { LocalSymbolSearch } from "./LocalSymbolSearch.tsx";
 import { Breadcrumbs } from "../../../components/doc/Breadcrumbs.tsx";
-import type { AllSymbolsCtx, BreadcrumbsCtx } from "@deno/doc/html-types";
+import type { BreadcrumbsCtx } from "@deno/doc/html-types";
+import { ComponentChildren } from "preact";
 
 export interface BreadcrumbsStickyProps {
   content: BreadcrumbsCtx;
-  searchContent?: AllSymbolsCtx;
-  scope: string;
-  package: string;
-  version: string;
+  class?: string;
+  children: ComponentChildren;
 }
 
 export function BreadcrumbsSticky(
@@ -20,46 +18,49 @@ export function BreadcrumbsSticky(
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
     const scrollCb = () => {
-      if (ref.current) {
-        const rect = ref.current.getBoundingClientRect();
+      const rect = el.getBoundingClientRect();
+      sticky.value = rect.top <= 0;
+    };
 
-        if (rect.top <= 0) {
-          sticky.value = true;
-        } else {
-          sticky.value = false;
-        }
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        document.documentElement.style.setProperty(
+          "--breadcrumbs-height",
+          `${entry.borderBoxSize[0].blockSize}px`,
+        );
       }
-    };
+    });
+    observer.observe(el);
 
     document.addEventListener("scroll", scrollCb);
     scrollCb();
 
-    return () => document.removeEventListener("scroll", scrollCb);
+    return () => {
+      document.removeEventListener("scroll", scrollCb);
+      observer.disconnect();
+      document.documentElement.style.removeProperty("--breadcrumbs-height");
+    };
   }, []);
 
   return (
     <div
       ref={ref}
-      class={`-section-x-inset-xl top-0 sticky bg-white dark:bg-jsr-gray-950 z-20 -my-3 py-3 ${
+      class={`-section-x-inset-xl top-0 sticky bg-white dark:bg-jsr-gray-950 z-20 -mt-3 py-3 border-b ${
         sticky.value
-          ? "border-b border-jsr-cyan-100 dark:border-jsr-cyan-900 shadow-[0px_2px_4px_0px_rgba(209,235,253,0.40)] dark:shadow-[0px_2px_4px_0px_rgba(50,55,61,0.40)]"
-          : ""
+          ? "border-jsr-cyan-100 dark:border-jsr-cyan-900 shadow-[0px_2px_4px_0px_rgba(209,235,253,0.40)] dark:shadow-[0px_2px_4px_0px_rgba(50,55,61,0.40)]"
+          : "border-transparent"
       }`}
     >
       <div class="section-x-inset-xl flex md:items-center justify-between gap-4 max-md:flex-col-reverse lg:grid lg:grid-cols-10 lg:gap-12">
-        <div class="ddoc lg:col-span-7">
+        <div class={`ddoc ${props.class ?? ""}`}>
           <Breadcrumbs breadcrumbs={props.content} />
         </div>
 
-        <div class="lg:col-[span_3/_-1]">
-          <LocalSymbolSearch
-            scope={props.scope}
-            pkg={props.package}
-            version={props.version}
-            content={props.searchContent}
-          />
-        </div>
+        {props.children}
       </div>
     </div>
   );
diff --git a/frontend/routes/package/(_islands)/DiffVersionSelector.tsx b/frontend/routes/package/(_islands)/DiffVersionSelector.tsx
new file mode 100644
index 000000000..6b751c50e
--- /dev/null
+++ b/frontend/routes/package/(_islands)/DiffVersionSelector.tsx
@@ -0,0 +1,76 @@
+// Copyright 2024 the JSR authors. All rights reserved. MIT license.
+import TbArrowRight from "tb-icons/TbArrowRight";
+import TbEyeFilled from "tb-icons/TbEyeFilled";
+import TbEyeOff from "tb-icons/TbEyeOff";
+
+const SELECT_CLASSES =
+  "block w-64 py-1.5 px-2 input-container select text-sm font-normal";
+
+export default function DiffVersionSelector(
+  props: {
+    scope: string;
+    pkg: string;
+    versions: string[];
+    oldVersion?: string;
+    newVersion?: string;
+    url: URL;
+    docsRequest: string;
+  },
+) {
+  const full = props.url.searchParams.has("full");
+  const strippedUrl = new URL(props.url);
+  strippedUrl.searchParams.delete("full");
+
+  return (
+    <div class="flex justify-center items-center gap-3.5">
+      <select
+        class={SELECT_CLASSES}
+        onChange={(e) => {
+          location.href = `/@${props.scope}/${props.pkg}/diff/${
+            e.currentTarget.value || ""
+          }...${props.newVersion || ""}${props.docsRequest}`;
+        }}
+      >
+        <option disabled selected={!props.oldVersion}>select a version</option>
+        {props.versions.map((version) => (
+          <option value={version} selected={version === props.oldVersion}>
+            {version}
+          </option>
+        ))}
+      </select>
+
+      <a
+        class="p-1 -ml-1 rounded-md hover:bg-jsr-cyan-100 dark:hover:bg-jsr-cyan-950"
+        href={`/@${props.scope}/${props.pkg}/diff/${props.newVersion || ""}...${
+          props.oldVersion || ""
+        }${props.docsRequest}`}
+      >
+        <TbArrowRight class="size-6" />
+      </a>
+
+      <select
+        class={SELECT_CLASSES}
+        onChange={(e) => {
+          location.href = `/@${props.scope}/${props.pkg}/diff/${
+            props.oldVersion || ""
+          }...${e.currentTarget.value || ""}${props.docsRequest}`;
+        }}
+      >
+        <option disabled selected={!props.newVersion}>select a version</option>
+        {props.versions.map((version) => (
+          <option value={version} selected={version === props.newVersion}>
+            {version}
+          </option>
+        ))}
+      </select>
+
+      <a
+        class="p-1 -ml-1 rounded-md hover:bg-jsr-cyan-100 dark:hover:bg-jsr-cyan-950"
+        href={strippedUrl.pathname + (full ? "" : "?full")}
+        title={full ? "Only show changed items" : "Show all items"}
+      >
+        {full ? <TbEyeOff class="size-6" /> : <TbEyeFilled class="size-6" />}
+      </a>
+    </div>
+  );
+}
diff --git a/frontend/routes/package/diff/[file].tsx b/frontend/routes/package/diff/[file].tsx
new file mode 100644
index 000000000..eef9753be
--- /dev/null
+++ b/frontend/routes/package/diff/[file].tsx
@@ -0,0 +1,127 @@
+// Copyright 2024 the JSR authors. All rights reserved. MIT license.
+import { HttpError, RouteConfig } from "fresh";
+import { define } from "../../../util.ts";
+import { DiffData, packageDataWithDiff } from "../../../utils/data.ts";
+import { PackageHeader } from "../(_components)/PackageHeader.tsx";
+import { PackageNav, Params } from "../(_components)/PackageNav.tsx";
+import { DiffView } from "../(_components)/Docs.tsx";
+import { scopeIAM } from "../../../utils/iam.ts";
+
+export default define.page<typeof handler>(function File({
+  data,
+  params,
+  state,
+  url,
+}) {
+  const iam = scopeIAM(state, data.member);
+
+  return (
+    <div>
+      <PackageHeader
+        package={data.package}
+        selectedVersion={data.selectedVersion ?? undefined}
+        downloads={data.downloads}
+      />
+
+      <PackageNav
+        currentTab="Diff"
+        versionCount={data.package.versionCount}
+        dependencyCount={data.package.dependencyCount}
+        dependentCount={data.package.dependentCount}
+        iam={iam}
+        params={params as unknown as Params}
+        latestVersion={data.package.latestVersion}
+      />
+
+      <DiffView
+        docs={data.docs}
+        scope={data.package.scope}
+        pkg={data.package.name}
+        versions={data.versions}
+        oldVersion={params.oldVersion}
+        newVersion={params.newVersion}
+        url={url}
+        request={data.docsReq}
+      />
+    </div>
+  );
+});
+
+export const handler = define.handlers({
+  async GET(ctx) {
+    if (ctx.url.pathname.endsWith("/~")) {
+      return new Response(null, {
+        status: 302,
+        headers: {
+          Location: ctx.url.pathname.slice(0, -2),
+        },
+      });
+    }
+
+    const docsReq = { entrypoint: ctx.params.entrypoint };
+    const res = await packageDataWithDiff(
+      ctx.state,
+      ctx.params.scope,
+      ctx.params.package,
+      ctx.params.oldVersion,
+      ctx.params.newVersion,
+      ctx.url.searchParams.get("full"),
+      docsReq,
+    );
+    if (!res) {
+      throw new HttpError(
+        404,
+        "This package, package version, entrypoint, or symbol was not found.",
+      );
+    }
+    if (res instanceof Response) {
+      return res;
+    }
+
+    const {
+      pkg,
+      scopeMember,
+      selectedVersion,
+      docs,
+      downloads,
+      versions,
+    } = res as DiffData;
+    if (selectedVersion !== null && docs === null) {
+      throw new HttpError(
+        404,
+        "This package, package version, or entrypoint was not found.",
+      );
+    }
+
+    ctx.state.meta = {
+      title: `Diff${
+        ctx.params.oldVersion && ctx.params.newVersion
+          ? ` ${ctx.params.oldVersion} -> ${ctx.params.newVersion}`
+          : ""
+      } - ${
+        ctx.params.entrypoint || "index"
+      } - @${pkg.scope}/${pkg.name} - JSR`,
+      description: `@${ctx.params.scope}/${ctx.params.package} on JSR${
+        pkg.description ? `: ${pkg.description}` : ""
+      }`,
+    };
+
+    return {
+      data: {
+        package: pkg,
+        downloads,
+        selectedVersion,
+        docs,
+        member: scopeMember,
+        versions,
+        docsReq,
+      },
+      headers: { ...(ctx.params.version ? { "X-Robots-Tag": "noindex" } : {}) },
+    };
+  },
+});
+
+export const config: RouteConfig = {
+  routeOverride:
+    "/@:scope/:package/diff/{:oldVersion}?...{:newVersion}?{/:entrypoint([^~]*)}?{/~}?",
+};
diff --git a/frontend/routes/package/diff/[symbol].tsx b/frontend/routes/package/diff/[symbol].tsx
new file mode 100644
index 000000000..611e0e895
--- /dev/null
+++ b/frontend/routes/package/diff/[symbol].tsx
@@ -0,0 +1,127 @@
+// Copyright 2024 the JSR authors. All rights reserved. MIT license.
+import { HttpError, RouteConfig } from "fresh";
+import { define } from "../../../util.ts";
+import { DiffData, packageDataWithDiff } from "../../../utils/data.ts";
+import { PackageHeader } from "../(_components)/PackageHeader.tsx";
+import { PackageNav, Params } from "../(_components)/PackageNav.tsx";
+import { DiffView } from "../(_components)/Docs.tsx";
+import { scopeIAM } from "../../../utils/iam.ts";
+
+export default define.page<typeof handler>(function Symbol(
+  { data, params, state, url },
+) {
+  const iam = scopeIAM(state, data.member);
+
+  return (
+    <div>
+      <PackageHeader
+        package={data.package}
+        selectedVersion={data.selectedVersion ?? undefined}
+        downloads={data.downloads}
+      />
+
+      <PackageNav
+        currentTab="Diff"
+        versionCount={data.package.versionCount}
+        dependencyCount={data.package.dependencyCount}
+        dependentCount={data.package.dependentCount}
+        iam={iam}
+        params={params as unknown as Params}
+        latestVersion={data.package.latestVersion}
+      />
+
+      <DiffView
+        docs={data.docs}
+        scope={data.package.scope}
+        pkg={data.package.name}
+        versions={data.versions}
+        oldVersion={params.oldVersion}
+        newVersion={params.newVersion}
+        url={url}
+        request={data.docsReq}
+      />
+    </div>
+  );
+});
+
+export const handler = define.handlers({
+  async GET(ctx) {
+    const docsReq = {
+      entrypoint: ctx.params.entrypoint,
+      symbol: ctx.params.symbol,
+    };
+    const res = await packageDataWithDiff(
+      ctx.state,
+      ctx.params.scope,
+      ctx.params.package,
+      ctx.params.oldVersion,
+      ctx.params.newVersion,
+      ctx.url.searchParams.get("full"),
+      docsReq,
+    );
+    if (!res) {
+      throw new HttpError(
+        404,
+        "This package, package version, entrypoint, or symbol was not found.",
+      );
+    }
+    if (res instanceof Response) {
+      return res;
+    }
+
+    if (res.kind === "redirect") {
+      return new Response(null, {
+        status: 307,
+        headers: {
+          "location": res.symbol,
+        },
+      });
+    }
+
+    const {
+      pkg,
+      scopeMember,
+      selectedVersion,
+      docs,
+      downloads,
+      versions,
+    } = res as DiffData;
+    if (selectedVersion !== null && docs === null) {
+      throw new HttpError(
+        404,
+        "This package, package version, entrypoint, or symbol was not found.",
+      );
+    }
+
+    ctx.state.meta = {
+      /* TODO: print symbol kind here (function / class / etc) */
+      title: `Diff${
+        ctx.params.oldVersion && ctx.params.newVersion
+          ? ` ${ctx.params.oldVersion} -> ${ctx.params.newVersion}`
+          : ""
+      } - ${ctx.params.symbol}${
+        ctx.params.entrypoint && ` from ${ctx.params.entrypoint}`
+      } - @${pkg.scope}/${pkg.name} - JSR`,
+      description: `@${ctx.params.scope}/${ctx.params.package} on JSR${
+        pkg.description ? `: ${pkg.description}` : ""
+      }`,
+    };
+    return {
+      data: {
+        package: pkg,
+        downloads,
+        selectedVersion,
+        docs,
+        member: scopeMember,
+        versions,
+        docsReq,
+      },
+      headers: { ...(ctx.params.version ? { "X-Robots-Tag": "noindex" } : {}) },
+    };
+  },
+});
+
+export const config: RouteConfig = {
+  routeOverride:
+    "/@:scope/:package/diff/{:oldVersion}?...{:newVersion}?/:entrypoint*/~/:symbol+",
+};
diff --git a/frontend/routes/package/diff/all_symbols.tsx b/frontend/routes/package/diff/all_symbols.tsx
new file mode 100644
index 000000000..cd8f6a121
--- /dev/null
+++ b/frontend/routes/package/diff/all_symbols.tsx
@@ -0,0 +1,115 @@
+// Copyright 2024 the JSR authors. All rights reserved. MIT license.
+import { HttpError, RouteConfig } from "fresh";
+import { define } from "../../../util.ts";
+import { DiffData, packageDataWithDiff } from "../../../utils/data.ts";
+import { PackageHeader } from "../(_components)/PackageHeader.tsx";
+import { PackageNav, Params } from "../(_components)/PackageNav.tsx";
+import { DiffView } from "../(_components)/Docs.tsx";
+import { scopeIAM } from "../../../utils/iam.ts";
+
+export default define.page<typeof handler>(function AllSymbols(
+  { data, params, state, url },
+) {
+  const iam = scopeIAM(state, data.member);
+
+  return (
+    <div class="mb-20">
+      <PackageHeader
+        package={data.package}
+        selectedVersion={data.selectedVersion ?? undefined}
+        downloads={data.downloads}
+      />
+
+      <PackageNav
+        currentTab="Diff"
+        versionCount={data.package.versionCount}
+        dependencyCount={data.package.dependencyCount}
+        dependentCount={data.package.dependentCount}
+        iam={iam}
+        params={params as unknown as Params}
+        latestVersion={data.package.latestVersion}
+      />
+
+      <DiffView
+        docs={data.docs}
+        scope={data.package.scope}
+        pkg={data.package.name}
+        versions={data.versions}
+        oldVersion={params.oldVersion}
+        newVersion={params.newVersion}
+        url={url}
+        request={data.docsReq}
+      />
+    </div>
+  );
+});
+
+export const handler = define.handlers({
+  async GET(ctx) {
+    const docsReq = { all_symbols: "true" } as const;
+    const res = await packageDataWithDiff(
+      ctx.state,
+      ctx.params.scope,
+      ctx.params.package,
+      ctx.params.oldVersion,
+      ctx.params.newVersion,
+      ctx.url.searchParams.get("full"),
+      docsReq,
+    );
+    if (!res) {
+      throw new HttpError(
+        404,
+        "This package or this package version was not found.",
+      );
+    }
+    if (res instanceof Response) {
+      return res;
+    }
+
+    const {
+      pkg,
+      scopeMember,
+      selectedVersion,
+      docs,
+      downloads,
+      versions,
+    } = res as DiffData;
+    if (selectedVersion !== null && docs === null) {
+      return new Response(null, {
+        status: 302,
+        headers: {
+          Location: `/@${ctx.params.scope}/${ctx.params.package}/diff/${ctx
+            .params.oldVersion!}...${ctx.params.newVersion!}`,
+        },
+      });
+    }
+
+    ctx.state.meta = {
+      title: `Diff${
+        ctx.params.oldVersion && ctx.params.newVersion
+          ? ` ${ctx.params.oldVersion} -> ${ctx.params.newVersion}`
+          : ""
+      } - All symbols - @${pkg.scope}/${pkg.name} - JSR`,
+      description: `@${ctx.params.scope}/${ctx.params.package} on JSR${
+        pkg.description ? `: ${pkg.description}` : ""
+      }`,
+    };
+    return {
+      data: {
+        package: pkg,
+        downloads,
+        selectedVersion,
+        docs,
+        member: scopeMember,
+        versions,
+        docsReq,
+      },
+      headers: { ...(ctx.params.version ? { "X-Robots-Tag": "noindex" } : {}) },
+    };
+  },
+});
+
+export const config: RouteConfig = {
+  routeOverride:
+    "/@:scope/:package/diff/{:oldVersion}?...{:newVersion}?/all_symbols",
+};
diff --git a/frontend/routes/package/doc/[file].tsx b/frontend/routes/package/doc/[file].tsx
index 2eacdc3ef..4b8550c72 100644
--- a/frontend/routes/package/doc/[file].tsx
+++ b/frontend/routes/package/doc/[file].tsx
@@ -34,7 +34,6 @@ export default define.page<typeof handler>(function File({
 
       <DocsView
         docs={data.docs}
-        params={params as unknown as Params}
         selectedVersion={data.selectedVersion}
         user={state.user}
         scope={data.package.scope}
diff --git a/frontend/routes/package/doc/[symbol].tsx b/frontend/routes/package/doc/[symbol].tsx
index 5dd47ff23..4491439d3 100644
--- a/frontend/routes/package/doc/[symbol].tsx
+++ b/frontend/routes/package/doc/[symbol].tsx
@@ -32,7 +32,6 @@ export default define.page<typeof handler>(function Symbol(
 
       <DocsView
         docs={data.docs}
-        params={params as unknown as Params}
         selectedVersion={data.selectedVersion}
         user={state.user}
         scope={data.package.scope}
diff --git a/frontend/routes/package/doc/all_symbols.tsx b/frontend/routes/package/doc/all_symbols.tsx
index 0ef44fdb4..5ea895691 100644
--- a/frontend/routes/package/doc/all_symbols.tsx
+++ b/frontend/routes/package/doc/all_symbols.tsx
@@ -32,7 +32,6 @@ export default define.page<typeof handler>(function AllSymbols(
 
       <DocsView
         docs={data.docs}
-        params={params as unknown as Params}
         selectedVersion={data.selectedVersion}
         user={state.user}
         scope={data.package.scope}
diff --git a/frontend/routes/package/index.tsx b/frontend/routes/package/index.tsx
index 728668ee1..143b975b9 100644
--- a/frontend/routes/package/index.tsx
+++ b/frontend/routes/package/index.tsx
@@ -35,7 +35,6 @@ export default define.page<typeof handler>(function PackagePage(
         ? (
           <DocsView
             docs={data.docs}
-            params={params as unknown as Params}
             selectedVersion={data.selectedVersion}
             user={state.user}
             scope={data.package.scope}
diff --git a/frontend/static/styles.css b/frontend/static/styles.css
index 1da333419..df0c5d568 100644
--- a/frontend/static/styles.css
+++ b/frontend/static/styles.css
@@ -9,6 +9,9 @@
 @source inline("dark:text-{FunctionDark,MethodDark,VariableDark,PropertyDark,ClassDark,EnumDark,InterfaceDark,TypeAliasDark,NamespaceDark}");
 @source inline("bg-{Function,Method,Variable,Property,Class,Enum,Interface,TypeAlias,Namespace}/15");
 @source inline("dark:bg-{FunctionDark,MethodDark,VariableDark,PropertyDark,ClassDark,EnumDark,InterfaceDark,TypeAliasDark,NamespaceDark}/15");
+@source inline("text-{abstract,deprecated,unstable,writeonly,readonly,protected,private,optional,permissions,other}");
+@source inline("border-{abstract,deprecated,unstable,writeonly,readonly,protected,private,optional,permissions,other}/50");
+@source inline("bg-{abstract,deprecated,unstable,writeonly,readonly,protected,private,optional,permissions,other}/5");
 
 @layer base {
   img:where(:not(.markdown img)), video:where(:not(.markdown video)) {
@@ -182,23 +185,38 @@
       focus:outline-4 focus:outline-offset-2;
   }
 
-  .button-primary {
-    @apply button border-1.5 border-jsr-cyan-900 hover:border-jsr-cyan-600
-      bg-jsr-yellow text-jsr-cyan-950 font-bold hover:bg-jsr-yellow-300
-      transition-all duration-75 ease-in-out focus:bg-jsr-yellow-300
-      outline-jsr-cyan-700 outline-offset-2 disabled:bg-jsr-gray-100
-      dark:text-jsr-gray-900 dark:border-jsr-cyan-600
-      dark:hover:border-jsr-cyan-400 disabled:text-jsr-gray-300 shadow-accent-sm
-      dark:shadow-dark-accent-sm disabled:shadow-transparent
-      disabled:border-jsr-gray-300 dark:disabled:bg-jsr-gray-900
-      dark:disabled:text-jsr-gray-600 dark:disabled:border-jsr-gray-900;
-  }
-
-  .button-primary:not(:disabled) {
+  .button-primary, .button-secondary {
+    @apply button border-1.5 font-bold transition-all duration-75 ease-in-out
+      outline-offset-2 shadow-accent-sm dark:shadow-dark-accent-sm
+      disabled:shadow-transparent;
+  }
+
+  .button-primary:not(:disabled), .button-secondary:not(:disabled) {
     @apply active:shadow-accent-sm-close dark:active:shadow-dark-accent-sm-close
       active:translate-x-[3px] active:translate-y-[4px];
   }
 
+  .button-primary {
+    @apply border-jsr-cyan-900 dark:border-jsr-cyan-600
+      hover:border-jsr-cyan-600 dark:hover:border-jsr-cyan-400 bg-jsr-yellow
+      hover:bg-jsr-yellow-300 focus:bg-jsr-yellow-300 text-jsr-cyan-950
+      dark:text-jsr-gray-900 outline-jsr-cyan-700 disabled:bg-jsr-gray-100
+      dark:disabled:bg-jsr-gray-900 disabled:text-jsr-gray-300
+      dark:disabled:text-jsr-gray-600 disabled:border-jsr-gray-300
+      dark:disabled:border-jsr-gray-900;
+  }
+
+  .button-secondary {
+    @apply border-jsr-cyan-300/30 dark:border-jsr-cyan-600/50
+      hover:border-jsr-cyan-300 dark:hover:border-jsr-cyan-500 bg-jsr-cyan-50
+      dark:bg-jsr-cyan hover:bg-jsr-cyan-100 dark:hover:bg-jsr-cyan-800
+      focus:bg-jsr-cyan-300 dark:focus:bg-jsr-cyan-400 outline-jsr-cyan-400
+      dark:outline-jsr-cyan-700 disabled:bg-jsr-gray-100
+      dark:disabled:bg-jsr-gray-900 disabled:text-jsr-gray-300
+      dark:disabled:text-jsr-gray-600 disabled:border-jsr-gray-300
+      dark:disabled:border-jsr-gray-900;
+  }
+
   .button-danger {
     @apply button border-1.5 border-red-950 bg-red-500 text-white
       hover:bg-red-700 disabled:bg-jsr-gray-100 outline-red-600
@@ -516,6 +534,18 @@ body .ddoc {
         background-color: #005cc5;
       }
     }
+
+    .diff-added, .diff-modified, .diff-removed {
+      &:not(.diff-inline) {
+        @apply py-0.5 -mb-1 px-2 -mx-2;
+      }
+      &.diff-inline {
+        @apply py-0.5 px-1;
+      }
+    }
+    .diff-removed.diff-inline {
+      @apply ml-3;
+    }
   }
 
   .markdown_summary {
@@ -553,6 +583,75 @@ body .ddoc {
     @apply text-pink-700 dark:text-pink-400;
   }
 
+  .diff-added {
+    @apply bg-green-400/50 dark:bg-green-800/30;
+  }
+  .diff-modified {
+    @apply bg-yellow-300/50 dark:bg-yellow-800/30;
+  }
+  .diff-removed {
+    @apply bg-red-400/40 dark:bg-red-800/30;
+  }
+
+  .diff-added::before {
+    @apply bg-green-600/50 dark:bg-green-500/30;
+    content: "+";
+  }
+  .diff-modified::before {
+    @apply bg-yellow-500/50 dark:bg-yellow-500/30;
+    content: "±";
+  }
+  .diff-removed::before {
+    @apply bg-red-600/40 dark:bg-red-500/30;
+    content: "-";
+  }
+
+  .diff-added, .diff-modified, .diff-removed {
+    @apply relative rounded-r rounded-l-none;
+
+    &::before {
+      @apply absolute top-0 -left-3 w-3 h-full flex justify-center items-center
+        rounded-l text-xs font-bold font-mono leading-none text-inherit
+        text-primary;
+    }
+
+    &.diff-mobile-skip-round::before {
+      @apply max-md:rounded-none;
+    }
+
+    &.diff-flat-top {
+      @apply rounded-tr-none;
+
+      &::before {
+        @apply rounded-tl-none;
+      }
+    }
+
+    &.diff-flat-bottom {
+      @apply rounded-br-none;
+
+      &::before {
+        @apply rounded-bl-none;
+      }
+    }
+  }
+
+  .diff-inline {
+    @apply px-0.5;
+
+    &.diff-added {
+      @apply ml-3;
+    }
+
+    &.diff-removed:has(+ .diff-added) {
+      @apply rounded-r-none;
+    }
+
+    &.diff-removed + .diff-added::before {
+      @apply rounded-l-none;
+    }
+  }
+
   .sourceButton,
   .copyButton {
     @apply z-10 rounded no-underline p-1.5 cursor-pointer bg-inherit leading-0
diff --git a/frontend/static/tailwind.css b/frontend/static/tailwind.css
index 3d2f33093..7a3f56207 100644
--- a/frontend/static/tailwind.css
+++ b/frontend/static/tailwind.css
@@ -124,7 +124,6 @@
   --color-NamespaceDark: #e57e6b;
 
   /* Tag Colors */
-  --color-new: #7b61ff;
   --color-abstract: #0cafc6;
   --color-deprecated: #dc2626;
   --color-unstable: #7b61ff;
diff --git a/frontend/util.ts b/frontend/util.ts
index 319542748..d82653d4d 100644
--- a/frontend/util.ts
+++ b/frontend/util.ts
@@ -35,8 +35,7 @@ export interface Docs {
   script: string;
   // null only on index page
   breadcrumbs: BreadcrumbsCtx | null;
-  // null only on all symbols page
-  toc: ToCCtx | null;
+  toc: ToCCtx;
   main: DocsMainContent;
 }
 
diff --git a/frontend/utils/api_types.ts b/frontend/utils/api_types.ts
index ab5b3882e..95c63fd36 100644
--- a/frontend/utils/api_types.ts
+++ b/frontend/utils/api_types.ts
@@ -160,7 +160,7 @@ export interface PackageVersionDocsContent {
   comrakCss: string;
   script: string;
   breadcrumbs: BreadcrumbsCtx | null;
-  toc: ToCCtx | null;
+  toc: ToCCtx;
   main: DocsMainContent;
 }
 
diff --git a/frontend/utils/data.ts b/frontend/utils/data.ts
index 642edc4ff..0792d6ed6 100644
--- a/frontend/utils/data.ts
+++ b/frontend/utils/data.ts
@@ -91,12 +91,18 @@ export async function packageDataWithVersion(
   };
 }
 
+// deno-lint-ignore ban-types
+export type DocsRequest = {} | { all_symbols: "true" } | {
+  entrypoint: string;
+  symbol?: string;
+};
+
 export async function packageDataWithDocs(
   state: State,
   scope: string,
   pkg: string,
   version: string | undefined,
-  docs: { all_symbols: "true" } | { entrypoint?: string; symbol?: string },
+  docs: DocsRequest,
 ): Promise<PackageVersionDocsRedirect | DocsData | Response | null> {
   let [data, pkgDocsResp] = await Promise.all([
     packageData(state, scope, pkg),
@@ -172,6 +178,92 @@ export interface DocsData extends PackageData {
   docs: Docs | null;
 }
 
+export async function packageDataWithDiff(
+  state: State,
+  scope: string,
+  pkg: string,
+  oldVersion: string | undefined,
+  newVersion: string | undefined,
+  full: string | null,
+  docs: DocsRequest,
+): Promise<PackageVersionDocsRedirect | DiffData | Response | null> {
+  const [data, pkgDiffResp, versionsResp] = await Promise.all([
+    packageData(state, scope, pkg),
+    (oldVersion && newVersion)
+      ? state.api.get<PackageVersionDocs>(
+        path`/scopes/${scope}/packages/${pkg}/diff/${oldVersion}/${newVersion}`,
+        {
+          ...docs,
+          full,
+        },
+      )
+      : Promise.resolve(null),
+    state.api.get<PackageVersionWithUser[]>(
+      path`/scopes/${scope}/packages/${pkg}/versions`,
+    ),
+  ]);
+  if (data === null) return null;
+
+  if (pkgDiffResp && !pkgDiffResp.ok) {
+    if (pkgDiffResp.code === "packageVersionNotFound") {
+      return null;
+    } else {
+      if (pkgDiffResp.code === "scopeNotFound") return null;
+      if (pkgDiffResp.code === "packageNotFound") return null;
+      if (pkgDiffResp.code === "entrypointOrSymbolNotFound") {
+        // redirect to all symbols page if there is no default entrypoint
+        if ("entrypoint" in docs && !docs.symbol && docs.entrypoint === "") {
+          return new Response(null, {
+            headers: {
+              Location:
+                `/@${scope}/${pkg}/diff/${oldVersion}...${newVersion}/all_symbols`,
+            },
+            status: 302,
+          });
+        }
+
+        return null;
+      }
+      assertOk(pkgDiffResp);
+    }
+  }
+
+  assertOk(versionsResp);
+
+  if (pkgDiffResp === null) {
+    return {
+      ...data,
+      kind: "content",
+      selectedVersion: null,
+      versions: versionsResp.data,
+      docs: null,
+    };
+  } else if (pkgDiffResp.data.kind == "redirect") {
+    return pkgDiffResp.data;
+  } else {
+    return {
+      ...data,
+      kind: "content",
+      selectedVersion: pkgDiffResp.data.version,
+      versions: versionsResp.data,
+      docs: {
+        comrakCss: pkgDiffResp.data.comrakCss,
+        script: pkgDiffResp.data.script,
+        breadcrumbs: pkgDiffResp.data.breadcrumbs,
+        toc: pkgDiffResp.data.toc,
+        main: pkgDiffResp.data.main,
+      },
+    };
+  }
+}
+
+export interface DiffData extends PackageData {
+  kind: "content";
+  selectedVersion: PackageVersionWithUser | null;
+  versions: PackageVersionWithUser[];
+  docs: Docs | null;
+}
+
 export async function packageDataWithSource(
   state: State,
   scope: string,
@@ -257,3 +349,13 @@ export async function scopeDataWithMember(
     scopeMember: scopeMemberResp?.data ?? null,
   };
 }
+
+export function compileDocsRequestPath(request: DocsRequest) {
+  if ("entrypoint" in request) {
+    return `${request.entrypoint ? `/${request.entrypoint}` : ""}${
+      request.symbol ? `/~/${request.symbol}` : ""
+    }`;
+  } else {
+    return "/all_symbols";
+  }
+}
diff --git a/tools/clone_dependency.ts b/tools/clone_dependency.ts
old mode 100644
new mode 100755
index 1d4c491b7..e723fb480
--- a/tools/clone_dependency.ts
+++ b/tools/clone_dependency.ts
@@ -285,11 +285,10 @@ async function clonePackage(pv: PackageVersionReference): Promise<void> {
   const resp = await fetch(url, {
     method: "POST",
     headers: {
-      "Content-Type": "application/gzip",
       "Content-Encoding": "gzip",
       Authorization: `Bearer ${LOCAL_REGISTRY_TOKEN}`,
     },
-    body: res.body!,
+    body: res.body!.pipeThrough(new CompressionStream("gzip")),
   });
 
   if (!resp.ok) {
diff --git a/tools/dev.ts b/tools/dev.ts
index 6207ce019..8f607234c 100755
--- a/tools/dev.ts
+++ b/tools/dev.ts
@@ -127,6 +127,9 @@ class DevRunner {
   #inputBuf = "";
   #encoder = new TextEncoder();
   #shuttingDown = false;
+  #history: string[] = [];
+  #historyIndex = -1;
+  #savedInput = "";
 
   constructor(noDockerPostgres: boolean) {
     this.#noDockerPostgres = noDockerPostgres;
@@ -228,8 +231,11 @@ class DevRunner {
           if (byte === 13 || byte === 10) {
             const input = this.#inputBuf.trim();
             this.#inputBuf = "";
+            this.#historyIndex = -1;
+            this.#savedInput = "";
             this.#write(`\r${CLEAR_LINE}`);
             if (input.length > 0) {
+              this.#history.unshift(input);
               await this.#handleCommand(input);
             }
             this.#renderPrompt();
@@ -252,12 +258,45 @@ class DevRunner {
             continue;
           }
 
-          // Skip escape sequences
+          // Escape sequences (arrow keys, etc.)
           if (byte === 27) {
-            // consume remaining escape bytes
-            while (i + 1 < n && buf[i + 1] >= 0x20 && buf[i + 1] <= 0x7e) {
-              i++;
-              if (buf[i] >= 0x40) break;
+            if (i + 2 < n && buf[i + 1] === 0x5b) { // ESC [
+              const code = buf[i + 2];
+              i += 2;
+              // Up arrow
+              if (code === 0x41) {
+                if (this.#historyIndex < this.#history.length - 1) {
+                  if (this.#historyIndex === -1) {
+                    this.#savedInput = this.#inputBuf;
+                  }
+                  this.#historyIndex++;
+                  this.#inputBuf = this.#history[this.#historyIndex];
+                  this.#renderPrompt();
+                }
+                continue;
+              }
+              // Down arrow
+              if (code === 0x42) {
+                if (this.#historyIndex >= 0) {
+                  this.#historyIndex--;
+                  this.#inputBuf = this.#historyIndex >= 0
+                    ? this.#history[this.#historyIndex]
+                    : this.#savedInput;
+                  this.#renderPrompt();
+                }
+                continue;
+              }
+              // Skip other CSI sequences
+              while (i + 1 < n && buf[i + 1] >= 0x20 && buf[i + 1] <= 0x7e) {
+                i++;
+                if (buf[i] >= 0x40) break;
+              }
+            } else {
+              // Skip other escape sequences
+              while (i + 1 < n && buf[i + 1] >= 0x20 && buf[i + 1] <= 0x7e) {
+                i++;
+                if (buf[i] >= 0x40) break;
+              }
             }
             continue;
           }