feat(ui): add image-zoom

Author: ReaJason

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/biome.json

@@ -19,7 +19,11 @@
     "rules": {
       "recommended": true,
       "suspicious": {
-        "noExplicitAny": "off"
+        "noExplicitAny": "off",
+        "noDuplicateProperties": "off"
+      },
+      "complexity": {
+        "noImportantStyles": "off"
       }
     },
     "domains": {

web/bun.lock

@@ -21,7 +21,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.25",
-    "fumadocs-core": "16.2.3",
+    "fumadocs-core": "^16.2.4",
     "fumadocs-mdx": "14.1.0",
     "fumadocs-ui": "16.2.3",
     "i18next": "^25.7.2",
@@ -34,6 +34,7 @@
     "react-dom": "^19.2.1",
     "react-hook-form": "^7.68.0",
     "react-i18next": "^16.4.0",
+    "react-medium-image-zoom": "^5.4.0",
     "react-syntax-highlighter": "^16.1.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",