feat(ui): add image-zoom

web/app/components/image-zoom.css

@@ -0,0 +1,77 @@
+[data-rmiz] {
+  display: block;
+  position: relative;
+}
+
+[data-rmiz-ghost] {
+  pointer-events: none;
+  position: absolute;
+}
+
+[data-rmiz-btn-zoom],
+[data-rmiz-btn-unzoom] {
+  display: none;
+}
+
+[data-rmiz-content="found"] img {
+  cursor: zoom-in;
+}
+
+[data-rmiz-modal][open] {
+  width: 100vw /* fallback */;
+  width: 100dvw;
+
+  height: 100vh /* fallback */;
+  height: 100dvh;
+
+  background-color: transparent;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  overflow: hidden;
+}
+
+[data-rmiz-modal]:focus-visible {
+  outline: none;
+}
+
+[data-rmiz-modal-overlay] {
+  transition: background-color 0.3s;
+  position: absolute;
+  inset: 0;
+}
+
+[data-rmiz-modal-overlay="visible"] {
+  background-color: var(--color-fd-background);
+}
+
+[data-rmiz-modal-overlay="hidden"] {
+  background-color: transparent;
+}
+
+[data-rmiz-modal-content] {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+[data-rmiz-modal]::backdrop {
+  display: none;
+}
+
+[data-rmiz-modal-img] {
+  cursor: zoom-out;
+  image-rendering: high-quality;
+  transform-origin: 0 0;
+  transition: transform 0.3s;
+  position: absolute;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-rmiz-modal-overlay],
+  [data-rmiz-modal-img] {
+    transition-duration: 0.01ms !important;
+  }
+}

web/app/components/image-zoom.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { Image, type ImageProps } from "fumadocs-core/framework";
+import type { ComponentProps } from "react";
+import Zoom, { type UncontrolledProps } from "react-medium-image-zoom";
+import "@/components/image-zoom.css";
+
+export type ImageZoomProps = ImageProps & {
+  /**
+   * Image props when zoom in
+   */
+  zoomInProps?: ComponentProps<"img">;
+
+  /**
+   * Props for `react-medium-image-zoom`
+   */
+  rmiz?: UncontrolledProps;
+};
+
+function getImageSrc(src: ImageProps["src"]): string {
+  if (typeof src === "string") return src;
+
+  if (typeof src === "object") {
+    // Next.js
+    if ("default" in src)
+      return (src as { default: { src: string } }).default.src;
+    return src.src;
+  }
+
+  return "";
+}
+
+export function ImageZoom({
+  zoomInProps,
+  children,
+  rmiz,
+  ...props
+}: ImageZoomProps) {
+  return (
+    <Zoom
+      zoomMargin={20}
+      wrapElement="span"
+      {...rmiz}
+      zoomImg={{
+        src: getImageSrc(props.src),
+        sizes: undefined,
+        ...zoomInProps,
+      }}
+    >
+      {children ?? (
+        <Image
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 70vw, 900px"
+          {...props}
+        />
+      )}
+    </Zoom>
+  );
+}

web/app/components/probeshell/package-config-card.tsx

@@ -30,7 +30,11 @@ export default function PackageConfigCard({
 
   useEffect(() => {
     const filteredOptions = (packerConfig ?? []).filter((name) => {
-      return !name.startsWith("Agent") && !name.toLowerCase().startsWith("xxl") && !name.toLowerCase().endsWith("jar");
+      return (
+        !name.startsWith("Agent") &&
+        !name.toLowerCase().startsWith("xxl") &&
+        !name.toLowerCase().endsWith("jar")
+      );
     });
 
     const mappedOptions = filteredOptions.map((name) => {

web/app/docs/page.tsx

@@ -1,5 +1,6 @@
 import browserCollections from "fumadocs-mdx:collections/browser";
 import { useFumadocsLoader } from "fumadocs-core/source/client";
+import { ImageZoom } from "fumadocs-ui/components/image-zoom";
 import { DocsLayout } from "fumadocs-ui/layouts/docs";
 import {
   DocsBody,
@@ -32,7 +33,12 @@ const clientLoader = browserCollections.docs.createClientLoader({
         <DocsTitle>{frontmatter.title}</DocsTitle>
         <DocsDescription>{frontmatter.description}</DocsDescription>
         <DocsBody>
-          <Mdx components={{ ...defaultMdxComponents }} />
+          <Mdx
+            components={{
+              ...defaultMdxComponents,
+              img: (props) => <ImageZoom {...(props as any)} />,
+            }}
+          />
         </DocsBody>
       </DocsPage>
     );