hpo-react-visualizer 0.0.1 → 0.0.3

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
-import { useMemo, useState, useCallback, useId } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo, useState, useCallback, useId, useRef, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/constants.ts
 var ORGAN_IDS = [
@@ -78,6 +78,82 @@ var ORGAN_NAMES_KO = {
   prenatal: "\uD0DC\uC544",
   blood: "\uD608\uC561"
 };
+var HPO_LABELS = [
+  "others",
+  "Growth abnormality",
+  "Abnormality of the genitourinary system",
+  "Abnormality of the immune system",
+  "Abnormality of the digestive system",
+  "Abnormality of metabolism/homeostasis",
+  "Abnormality of head or neck",
+  "Abnormality of the musculoskeletal system",
+  "Abnormality of the nervous system",
+  "Abnormality of the respiratory system",
+  "Abnormality of the eye",
+  "Abnormality of the cardiovascular system",
+  "Abnormality of the ear",
+  "Abnormality of prenatal development or birth",
+  "Abnormality of the integument",
+  "Abnormality of the breast",
+  "Abnormality of the endocrine system",
+  "Abnormality of blood and blood-forming tissues",
+  "Abnormality of limbs",
+  "Abnormality of the voice",
+  "Constitutional symptom",
+  "Neoplasm",
+  "Abnormal cellular phenotype",
+  "Abnormality of the thoracic cavity"
+];
+var HPO_LABEL_TO_ORGAN = {
+  "Growth abnormality": "growth",
+  "Abnormality of the genitourinary system": "kidney",
+  "Abnormality of the immune system": "immune",
+  "Abnormality of the digestive system": "digestive",
+  "Abnormality of metabolism/homeostasis": "metabolism",
+  "Abnormality of head or neck": "head",
+  "Abnormality of the musculoskeletal system": "muscle",
+  "Abnormality of the nervous system": "nervous",
+  "Abnormality of the respiratory system": "lung",
+  "Abnormality of the eye": "eye",
+  "Abnormality of the cardiovascular system": "heart",
+  "Abnormality of the ear": "ear",
+  "Abnormality of prenatal development or birth": "prenatal",
+  "Abnormality of the integument": "integument",
+  "Abnormality of the breast": "breast",
+  "Abnormality of the endocrine system": "endocrine",
+  "Abnormality of blood and blood-forming tissues": "blood",
+  "Abnormality of limbs": "limbs",
+  "Abnormality of the voice": "voice",
+  "Constitutional symptom": "constitutional",
+  Neoplasm: "neoplasm",
+  "Abnormal cellular phenotype": "cell",
+  "Abnormality of the thoracic cavity": "thoracicCavity"
+};
+var ORGAN_TO_HPO_LABEL = {
+  growth: "Growth abnormality",
+  kidney: "Abnormality of the genitourinary system",
+  immune: "Abnormality of the immune system",
+  digestive: "Abnormality of the digestive system",
+  metabolism: "Abnormality of metabolism/homeostasis",
+  head: "Abnormality of head or neck",
+  muscle: "Abnormality of the musculoskeletal system",
+  nervous: "Abnormality of the nervous system",
+  lung: "Abnormality of the respiratory system",
+  eye: "Abnormality of the eye",
+  heart: "Abnormality of the cardiovascular system",
+  ear: "Abnormality of the ear",
+  prenatal: "Abnormality of prenatal development or birth",
+  integument: "Abnormality of the integument",
+  breast: "Abnormality of the breast",
+  endocrine: "Abnormality of the endocrine system",
+  blood: "Abnormality of blood and blood-forming tissues",
+  limbs: "Abnormality of limbs",
+  voice: "Abnormality of the voice",
+  constitutional: "Constitutional symptom",
+  neoplasm: "Neoplasm",
+  cell: "Abnormal cellular phenotype",
+  thoracicCavity: "Abnormality of the thoracic cavity"
+};
 var DEFAULT_COLOR_PALETTE = {
   blue: {
     100: "#DBEAFE",
@@ -114,7 +190,19 @@ var DEFAULT_COLOR_NAME = "blue";
 var DEFAULT_STROKE_COLOR = "#ff142d";
 var DEFAULT_STROKE_WIDTH = 0.5;
 var ANIMATION_DURATION_MS = 150;
-var TRANSITION_STYLE = `all ${ANIMATION_DURATION_MS}ms ease-out`;
+var TRANSITION_PROPERTIES = [
+  "fill",
+  "stroke",
+  "stroke-width",
+  "opacity",
+  "filter",
+  "stop-color",
+  "stop-opacity",
+  "visibility"
+];
+var TRANSITION_STYLE = TRANSITION_PROPERTIES.map(
+  (property) => `${property} ${ANIMATION_DURATION_MS}ms ease-out`
+).join(", ");
 var BODY_VIEWBOX = {
   width: 122,
   height: 358
@@ -146,6 +234,20 @@ function createStrictColorPalette(palette) {
     return result;
   }, {});
 }
+
+// src/lib/organControlState.ts
+var createUniformOrganColorSchemes = (organIds, scheme) => {
+  return organIds.reduce(
+    (acc, organId) => {
+      acc[organId] = scheme;
+      return acc;
+    },
+    {}
+  );
+};
+var createOrganOutlineSet = (organIds, enabled) => {
+  return enabled ? new Set(organIds) : /* @__PURE__ */ new Set();
+};
 function Blood({ style, colorScale, isActive = false, className }) {
   const defaultColor = colorScale[200];
   const activeColor = colorScale[300];
@@ -983,18 +1085,22 @@ function Neoplasm({ style, colorScale, isActive = false, className }) {
   const defaultColor = colorScale[100];
   const activeColor = colorScale[300];
   const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
-  return /* @__PURE__ */ jsx("g", { className, "data-organ": "neoplasm", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: NEOPLASM_PATH,
-      fill,
-      stroke: style?.stroke,
-      strokeWidth: style?.strokeWidth,
-      style: { transition: TRANSITION_STYLE }
-    }
-  ) });
+  return /* @__PURE__ */ jsxs("g", { className, "data-organ": "neoplasm", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: NEOPLASM_PATH,
+        fill,
+        stroke: style?.stroke,
+        strokeWidth: style?.strokeWidth,
+        style: { transition: TRANSITION_STYLE }
+      }
+    ),
+    /* @__PURE__ */ jsx("path", { d: OUTLINE_NEOPLASM_PATH, fill: "transparent", style: { transition: TRANSITION_STYLE } })
+  ] });
 }
 var NEOPLASM_PATH = "M2.7706 0.345092C3.77204 -0.328406 4.67398 0.0748652 5.51994 0.775559C5.66929 0.84341 5.84084 0.854726 6.00335 0.870091C6.75039 0.90371 7.23202 1.47634 7.71526 1.9904C7.9442 2.15206 8.23991 2.13397 8.49487 2.22712C9.42032 2.53001 9.97875 3.53109 9.82848 4.52946C9.80496 4.72076 9.82624 4.9113 9.95893 5.05368C10.8667 5.72367 11.227 6.90427 10.8552 8.00289C10.8197 8.17335 10.8234 8.33612 10.8552 8.50914C11.1667 9.57255 10.4627 10.7371 9.42026 10.9099C9.00986 10.9605 8.83573 11.0538 8.57313 11.3857C7.90654 12.1783 6.69443 12.1982 5.99107 11.4787C5.5305 10.923 5.59744 10.7815 4.83778 10.6419C4.274 10.5136 4.05225 9.90237 3.47347 9.82554C2.48067 9.75886 1.64607 8.89953 1.56283 7.86148C1.52718 7.50386 1.66051 7.13178 1.52369 6.78727C1.3217 6.37915 1.32115 5.92532 1.23057 5.49352C1.10172 5.15452 0.710231 4.98692 0.513122 4.69274C-0.603239 3.37518 0.214433 1.09705 1.8828 0.870872C2.29014 0.811338 2.46031 0.574268 2.7706 0.345092ZM8.66675 8.95211C9.38993 8.35162 8.63882 7.25972 7.84647 7.70601C7.45807 7.89616 7.2217 7.60732 6.78065 7.86148C5.19403 8.99021 7.21312 10.9585 8.28615 9.18961C8.40479 9.09758 8.54993 9.05178 8.66675 8.95211ZM4.7104 6.27711L4.27303 6.33727C4.12492 6.3579 3.97681 6.38207 3.83565 6.41852C2.87888 6.71014 2.93127 8.12397 3.79805 8.44664C4.34702 8.66977 4.91047 8.31107 5.14548 7.78492C5.25444 7.61852 5.42561 7.46995 5.49231 7.2693C5.67652 6.73389 5.241 6.21214 4.7104 6.27711ZM8.15954 5.40524C8.913 4.35054 7.9177 2.94878 6.76301 3.66071C6.55641 3.79164 6.34141 3.80113 6.11308 3.86227C5.20786 4.14228 5.25696 5.42232 6.06934 5.76071C6.24349 5.83273 6.44219 5.82242 6.57808 5.96071C6.82774 6.35991 7.1629 6.64138 7.63085 6.42633C8.04922 6.26821 8.02001 5.76856 8.15954 5.40524ZM4.52778 2.60368C4.44638 2.07782 3.90894 1.82777 3.46273 2.07087C3.13279 2.34905 2.82713 2.08984 2.46597 2.10681C1.16526 2.23008 1.24741 4.22477 2.54961 4.25133C2.72681 4.26447 2.8382 4.34664 2.91869 4.51149C3.71452 6.01766 5.6609 4.68642 4.53008 3.18805C4.47929 2.99637 4.57022 2.79792 4.52778 2.60368Z";
+var OUTLINE_NEOPLASM_PATH = "M2.7706 0.345092C3.77204 -0.328406 4.67398 0.0748652 5.51994 0.775559C5.66929 0.84341 5.84084 0.854726 6.00335 0.870091C6.75039 0.90371 7.23202 1.47634 7.71526 1.9904C7.9442 2.15206 8.23991 2.13397 8.49487 2.22712C9.42032 2.53001 9.97875 3.53109 9.82848 4.52946C9.80497 4.72076 9.82624 4.9113 9.95893 5.05368C10.8667 5.72367 11.227 6.90427 10.8552 8.00289C10.8197 8.17335 10.8234 8.33612 10.8552 8.50914C11.1667 9.57254 10.4627 10.7371 9.42026 10.9099C9.00986 10.9605 8.83573 11.0538 8.57313 11.3857C7.90654 12.1783 6.69443 12.1982 5.99108 11.4787C5.5305 10.923 5.59744 10.7815 4.83778 10.6419C4.274 10.5136 4.05225 9.90237 3.47347 9.82554C2.48067 9.75886 1.64607 8.89953 1.56283 7.86148C1.52718 7.50386 1.66051 7.13178 1.52369 6.78727C1.3217 6.37915 1.32115 5.92532 1.23057 5.49352C1.10172 5.15452 0.710231 4.98692 0.513122 4.69274C-0.603239 3.37518 0.214433 1.09705 1.8828 0.870872C2.29014 0.811338 2.46031 0.574268 2.7706 0.345092Z";
 function Nervous({ style, colorScale, isActive = false, className }) {
   const defaultColor = colorScale[100];
   const activeColor = colorScale[200];
@@ -1159,25 +1265,21 @@ function OrganSvg({
     };
     return mergeStyles(userStyle, strokeStyle);
   }, [config?.style, showOutline]);
-  const svgStyle = {
-    position: "absolute",
-    left: x,
-    top: y,
-    transition: `${TRANSITION_STYLE}, visibility 0s`,
-    zIndex: isSelected ? 1 : 0
+  const [minX = 0, minY = 0, viewBoxWidth, viewBoxHeight] = viewBox.split(" ").map(Number);
+  const scaleX = viewBoxWidth ? width / viewBoxWidth : 1;
+  const scaleY = viewBoxHeight ? height / viewBoxHeight : 1;
+  const transform = `translate(${x} ${y}) scale(${scaleX} ${scaleY}) translate(${-minX} ${-minY})`;
+  const groupStyle = {
+    transition: `${TRANSITION_STYLE}, visibility 0s`
   };
   const filter = isActive ? "blur(1px)" : void 0;
   return /* @__PURE__ */ jsxs(
-    "svg",
+    "g",
     {
-      width,
-      height,
-      viewBox,
-      style: svgStyle,
+      transform,
+      style: groupStyle,
       filter,
       "aria-label": organId,
-      overflow: "visible",
-      pointerEvents: "none",
       opacity: isVisible ? 1 : 0,
       visibility: isVisible ? "visible" : "hidden",
       children: [
@@ -1263,14 +1365,8 @@ function useOrganInteraction(options = {}) {
         setInternalSelected(newSelected);
       }
       onSelect?.(newSelected);
-      if (newSelected === null) {
-        if (!isHoverControlled) {
-          setInternalHovered(null);
-        }
-        onHover?.(null);
-      }
     },
-    [selectedOrgan, isSelectControlled, isHoverControlled, onSelect, onHover]
+    [selectedOrgan, isSelectControlled, onSelect]
   );
   const state = useMemo(
     () => ({
@@ -1301,6 +1397,338 @@ function useOrganInteraction(options = {}) {
     isHovered
   };
 }
+var ZOOM_ANIMATION_MS = 180;
+var easeOutCubic = (t) => 1 - (1 - t) ** 3;
+function useZoom(options = {}) {
+  const { minZoom = 1, maxZoom = 5, zoomStep = 0.5, wheelZoom = true, viewBox } = options;
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartRef = useRef({ x: 0, y: 0 });
+  const panStartRef = useRef({ x: 0, y: 0 });
+  const containerRef = useRef(null);
+  const zoomRef = useRef(1);
+  const panRef = useRef({ x: 0, y: 0 });
+  const animationRef = useRef(null);
+  const clampZoom = useCallback(
+    (value) => Math.max(minZoom, Math.min(maxZoom, value)),
+    [minZoom, maxZoom]
+  );
+  const stopAnimation = useCallback(() => {
+    if (animationRef.current !== null) {
+      cancelAnimationFrame(animationRef.current);
+      animationRef.current = null;
+    }
+  }, []);
+  const animateZoom = useCallback(
+    (targetZoom, options2) => {
+      const { targetPan, durationMs = ZOOM_ANIMATION_MS } = options2 ?? {};
+      stopAnimation();
+      const startZoom = zoomRef.current;
+      const clampedTargetZoom = clampZoom(targetZoom);
+      const startPan = panRef.current;
+      const hasPanTarget = targetPan !== void 0;
+      const finalPan = targetPan ?? startPan;
+      if (durationMs <= 0 || clampedTargetZoom === startZoom && (!hasPanTarget || finalPan.x === startPan.x && finalPan.y === startPan.y)) {
+        setZoom(clampedTargetZoom);
+        zoomRef.current = clampedTargetZoom;
+        if (hasPanTarget) {
+          setPan(finalPan);
+          panRef.current = finalPan;
+        }
+        return;
+      }
+      const startTime = performance.now();
+      const step = (now) => {
+        const elapsed = now - startTime;
+        const t = Math.min(elapsed / durationMs, 1);
+        const eased = easeOutCubic(t);
+        const nextZoom = startZoom + (clampedTargetZoom - startZoom) * eased;
+        zoomRef.current = nextZoom;
+        setZoom(nextZoom);
+        if (hasPanTarget) {
+          const nextPan = {
+            x: startPan.x + (finalPan.x - startPan.x) * eased,
+            y: startPan.y + (finalPan.y - startPan.y) * eased
+          };
+          panRef.current = nextPan;
+          setPan(nextPan);
+        }
+        if (t < 1) {
+          animationRef.current = requestAnimationFrame(step);
+        } else {
+          animationRef.current = null;
+          setZoom(clampedTargetZoom);
+          zoomRef.current = clampedTargetZoom;
+          if (hasPanTarget) {
+            setPan(finalPan);
+            panRef.current = finalPan;
+          }
+        }
+      };
+      animationRef.current = requestAnimationFrame(step);
+    },
+    [clampZoom, stopAnimation]
+  );
+  const zoomIn = useCallback(() => {
+    const nextZoom = clampZoom(zoomRef.current + zoomStep);
+    animateZoom(nextZoom);
+  }, [animateZoom, clampZoom, zoomStep]);
+  const zoomOut = useCallback(() => {
+    const nextZoom = clampZoom(zoomRef.current - zoomStep);
+    animateZoom(nextZoom);
+  }, [animateZoom, clampZoom, zoomStep]);
+  const resetZoom = useCallback(() => {
+    animateZoom(1, { targetPan: { x: 0, y: 0 } });
+  }, [animateZoom]);
+  const getViewBoxSize = useCallback(
+    (container) => {
+      if (viewBox?.width && viewBox?.height) {
+        return { width: viewBox.width, height: viewBox.height };
+      }
+      const rect = container.getBoundingClientRect();
+      return { width: rect.width || 1, height: rect.height || 1 };
+    },
+    [viewBox?.width, viewBox?.height]
+  );
+  const getViewBoxMetrics = useCallback(
+    (container) => {
+      const rect = container.getBoundingClientRect();
+      const { width: viewBoxWidth, height: viewBoxHeight } = getViewBoxSize(container);
+      const safeWidth = viewBoxWidth || 1;
+      const safeHeight = viewBoxHeight || 1;
+      const scale = rect.width > 0 && rect.height > 0 ? Math.min(rect.width / safeWidth, rect.height / safeHeight) : 0;
+      const contentWidth = safeWidth * scale;
+      const contentHeight = safeHeight * scale;
+      const offsetX = (rect.width - contentWidth) / 2;
+      const offsetY = (rect.height - contentHeight) / 2;
+      return { rect, viewBoxWidth: safeWidth, viewBoxHeight: safeHeight, scale, offsetX, offsetY };
+    },
+    [getViewBoxSize]
+  );
+  const getPointerPosition = useCallback(
+    (container, clientX, clientY) => {
+      const ctm = container.getScreenCTM();
+      if (ctm) {
+        if (typeof DOMPoint !== "undefined") {
+          const point = new DOMPoint(clientX, clientY);
+          const { x, y } = point.matrixTransform(ctm.inverse());
+          return { x, y };
+        }
+        if ("createSVGPoint" in container) {
+          const point = container.createSVGPoint();
+          point.x = clientX;
+          point.y = clientY;
+          const { x, y } = point.matrixTransform(ctm.inverse());
+          return { x, y };
+        }
+      }
+      const { rect, scale, offsetX, offsetY } = getViewBoxMetrics(container);
+      if (scale <= 0) return null;
+      return {
+        x: (clientX - rect.left - offsetX) / scale,
+        y: (clientY - rect.top - offsetY) / scale
+      };
+    },
+    [getViewBoxMetrics]
+  );
+  const clampPan = useCallback(
+    (newPan, currentZoom, viewBoxWidth, viewBoxHeight) => {
+      if (currentZoom <= 1) {
+        return { x: 0, y: 0 };
+      }
+      const maxPanX = viewBoxWidth * (currentZoom - 1) / 2;
+      const maxPanY = viewBoxHeight * (currentZoom - 1) / 2;
+      return {
+        x: Math.max(-maxPanX, Math.min(maxPanX, newPan.x)),
+        y: Math.max(-maxPanY, Math.min(maxPanY, newPan.y))
+      };
+    },
+    []
+  );
+  useEffect(() => {
+    zoomRef.current = zoom;
+  }, [zoom]);
+  useEffect(() => {
+    panRef.current = pan;
+  }, [pan]);
+  useEffect(() => {
+    return () => stopAnimation();
+  }, [stopAnimation]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !wheelZoom) return;
+    const wheelZoomStep = 0.1;
+    const handleWheel = (e) => {
+      e.preventDefault();
+      stopAnimation();
+      const { viewBoxWidth, viewBoxHeight } = getViewBoxMetrics(container);
+      const pointer = getPointerPosition(container, e.clientX, e.clientY);
+      if (!pointer) return;
+      const { x: mouseX, y: mouseY } = pointer;
+      const centerX = viewBoxWidth / 2;
+      const centerY = viewBoxHeight / 2;
+      const delta = e.deltaY > 0 ? -wheelZoomStep : wheelZoomStep;
+      const currentZoom = zoomRef.current;
+      const nextZoom = clampZoom(currentZoom + delta);
+      if (nextZoom === currentZoom) return;
+      const zoomRatio = nextZoom / currentZoom;
+      const nextPan = {
+        x: (mouseX - centerX) * (1 - zoomRatio) + panRef.current.x * zoomRatio,
+        y: (mouseY - centerY) * (1 - zoomRatio) + panRef.current.y * zoomRatio
+      };
+      const clampedPan = clampPan(nextPan, nextZoom, viewBoxWidth, viewBoxHeight);
+      zoomRef.current = nextZoom;
+      panRef.current = clampedPan;
+      setZoom(nextZoom);
+      setPan(clampedPan);
+    };
+    container.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      container.removeEventListener("wheel", handleWheel);
+    };
+  }, [clampZoom, wheelZoom, getViewBoxMetrics, getPointerPosition, clampPan, stopAnimation]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const { viewBoxWidth, viewBoxHeight } = getViewBoxMetrics(container);
+    setPan((currentPan) => clampPan(currentPan, zoom, viewBoxWidth, viewBoxHeight));
+  }, [zoom, clampPan, getViewBoxMetrics]);
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (e.button !== 0 || zoom <= 1) return;
+      stopAnimation();
+      setIsDragging(true);
+      dragStartRef.current = { x: e.clientX, y: e.clientY };
+      panStartRef.current = { ...pan };
+      e.preventDefault();
+    },
+    [pan, zoom, stopAnimation]
+  );
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!isDragging || zoom <= 1) return;
+      const container = containerRef.current;
+      if (!container) return;
+      const { scale, viewBoxWidth, viewBoxHeight } = getViewBoxMetrics(container);
+      if (scale <= 0) return;
+      const dx = e.clientX - dragStartRef.current.x;
+      const dy = e.clientY - dragStartRef.current.y;
+      const newPan = {
+        x: panStartRef.current.x + dx / scale,
+        y: panStartRef.current.y + dy / scale
+      };
+      setPan(clampPan(newPan, zoom, viewBoxWidth, viewBoxHeight));
+    },
+    [isDragging, zoom, clampPan, getViewBoxMetrics]
+  );
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  const isDefaultZoom = zoom === 1 && pan.x === 0 && pan.y === 0;
+  return {
+    zoom,
+    pan,
+    zoomIn,
+    zoomOut,
+    resetZoom,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    isDragging,
+    isDefaultZoom,
+    containerRef
+  };
+}
+var buttonBaseStyle = {
+  width: 32,
+  height: 32,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "rgba(255, 255, 255, 0.9)",
+  border: "1px solid #d1d5db",
+  borderRadius: 6,
+  cursor: "pointer",
+  fontSize: 18,
+  fontWeight: "bold",
+  color: "#374151",
+  transition: "background-color 0.15s ease",
+  userSelect: "none"
+};
+var buttonDisabledStyle = {
+  ...buttonBaseStyle,
+  opacity: 0.4,
+  cursor: "not-allowed"
+};
+var getContainerStyle = (isVisible) => ({
+  position: "absolute",
+  bottom: 12,
+  right: 12,
+  display: "flex",
+  flexDirection: "column",
+  gap: 4,
+  zIndex: 10,
+  opacity: isVisible ? 1 : 0,
+  transition: "opacity 0.2s ease-in-out",
+  pointerEvents: isVisible ? "auto" : "none"
+});
+var getResetContainerStyle = (isVisible) => ({
+  position: "absolute",
+  bottom: 12,
+  left: 12,
+  zIndex: 10,
+  opacity: isVisible ? 1 : 0,
+  transition: "opacity 0.2s ease-in-out",
+  pointerEvents: isVisible ? "auto" : "none"
+});
+var resetButtonStyle = {
+  ...buttonBaseStyle,
+  width: "auto",
+  padding: "6px 12px",
+  fontSize: 12,
+  fontWeight: 500
+};
+function ZoomControls({
+  onZoomIn,
+  onZoomOut,
+  onReset,
+  showResetButton,
+  zoom,
+  minZoom,
+  maxZoom,
+  isVisible
+}) {
+  const isMinZoom = zoom <= minZoom;
+  const isMaxZoom = zoom >= maxZoom;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { style: getContainerStyle(isVisible), children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onZoomIn,
+          disabled: isMaxZoom,
+          style: isMaxZoom ? buttonDisabledStyle : buttonBaseStyle,
+          "aria-label": "Zoom in",
+          children: "+"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onZoomOut,
+          disabled: isMinZoom,
+          style: isMinZoom ? buttonDisabledStyle : buttonBaseStyle,
+          "aria-label": "Zoom out",
+          children: "\u2212"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: getResetContainerStyle(isVisible && showResetButton), children: /* @__PURE__ */ jsx("button", { type: "button", onClick: onReset, style: resetButtonStyle, "aria-label": "Reset zoom", children: "\u21BA" }) })
+  ] });
+}
 var ORGAN_POSITIONS = {
   growth: { x: 104, y: 1, width: 12, height: 349, viewBox: "0 0 12 349" },
   constitutional: { x: 0, y: 0, width: 122, height: 358, viewBox: "0 0 122 358" },
@@ -1351,6 +1779,7 @@ var FOREGROUND_ORGANS = [
   "prenatal",
   "blood"
 ];
+var MIN_ZOOM = 1;
 function HpoVisualizer({
   organs,
   visibleOrgans,
@@ -1359,12 +1788,28 @@ function HpoVisualizer({
   onHover,
   onSelect,
   colorPalette: inputColorPalette,
-  width = BODY_VIEWBOX.width,
-  height = BODY_VIEWBOX.height,
+  width = "100%",
+  height = "100%",
   className,
-  style
+  style,
+  maxZoom = 5,
+  wheelZoom = true
 }) {
   const visualizerID = useId();
+  const [isHovering, setIsHovering] = useState(false);
+  const {
+    zoom,
+    pan,
+    zoomIn,
+    zoomOut,
+    resetZoom,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    isDragging,
+    isDefaultZoom,
+    containerRef
+  } = useZoom({ minZoom: MIN_ZOOM, maxZoom, wheelZoom, viewBox: BODY_VIEWBOX });
   const colorPalette = useMemo(
     () => createStrictColorPalette(inputColorPalette),
     [inputColorPalette]
@@ -1387,12 +1832,48 @@ function HpoVisualizer({
     }
     return map;
   }, [organs]);
-  const { handlers, isHovered, isSelected } = useOrganInteraction({
+  const { handlers, isHovered, isSelected, state } = useOrganInteraction({
     hoveredOrgan: controlledHovered,
     selectedOrgan: controlledSelected,
     onHover,
     onSelect
   });
+  const selectedOrganId = state.selectedOrgan;
+  const renderEntries = useMemo(() => {
+    const base = [
+      ...BACKGROUND_ORGANS.map((organId) => ({ type: "organ", organId })),
+      { type: "body" },
+      ...FOREGROUND_ORGANS.map((organId) => ({ type: "organ", organId }))
+    ];
+    if (!selectedOrganId) {
+      return base;
+    }
+    const selectedIndex = base.findIndex(
+      (entry) => entry.type === "organ" && entry.organId === selectedOrganId
+    );
+    if (selectedIndex === -1) {
+      return base;
+    }
+    const selectedEntry = base[selectedIndex];
+    if (!selectedEntry || selectedEntry.type !== "organ") {
+      return base;
+    }
+    return [...base.slice(0, selectedIndex), ...base.slice(selectedIndex + 1), selectedEntry];
+  }, [selectedOrganId]);
+  const {
+    padding,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    paddingInline,
+    paddingInlineStart,
+    paddingInlineEnd,
+    paddingBlock,
+    paddingBlockStart,
+    paddingBlockEnd,
+    ...containerStyleOverrides
+  } = style ?? {};
   const containerStyle = {
     display: "flex",
     justifyContent: "center",
@@ -1401,21 +1882,50 @@ function HpoVisualizer({
     position: "relative",
     width,
     height,
-    ...style
+    ...containerStyleOverrides,
+    // Apply overflow after style spread to ensure it takes precedence
+    overflow: "clip"
+  };
+  const contentStyle = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "flex-end",
+    width: "100%",
+    height: "100%",
+    boxSizing: "border-box",
+    padding,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    paddingInline,
+    paddingInlineStart,
+    paddingInlineEnd,
+    paddingBlock,
+    paddingBlockStart,
+    paddingBlockEnd
+  };
+  const svgStyle = {
+    width: "100%",
+    height: "100%",
+    display: "block",
+    cursor: isDragging ? "grabbing" : zoom > 1 ? "grab" : "default",
+    overflow: "visible"
   };
   const viewBox = `0 0 ${BODY_VIEWBOX.width} ${BODY_VIEWBOX.height}`;
-  const scale = Math.min(Number(width) / BODY_VIEWBOX.width, Number(height) / BODY_VIEWBOX.height);
-  const translateX = (Number(width) - BODY_VIEWBOX.width * scale) / 2;
+  const centerX = BODY_VIEWBOX.width / 2;
+  const centerY = BODY_VIEWBOX.height / 2;
+  const zoomTransform = `translate(${centerX} ${centerY}) scale(${zoom}) translate(${-centerX} ${-centerY})`;
   const renderOrgan = (organId, isVisible) => {
     const position = ORGAN_POSITIONS[organId];
     const config = organConfigMap.get(organId);
     if (config?.style?.visible === false) {
       return null;
     }
-    const x = translateX + position.x * scale;
-    const y = position.y * scale;
-    const width2 = position.width * scale;
-    const height2 = position.height * scale;
+    const x = position.x;
+    const y = position.y;
+    const width2 = position.width;
+    const height2 = position.height;
     return /* @__PURE__ */ jsx(
       OrganSvg,
       {
@@ -1438,36 +1948,70 @@ function HpoVisualizer({
       `${visualizerID}-${organId}`
     );
   };
-  return /* @__PURE__ */ jsxs("div", { className, style: containerStyle, children: [
-    BACKGROUND_ORGANS.map((organId) => renderOrgan(organId, visibleOrganIds.includes(organId))),
-    /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        x: translateX,
-        y: "0",
-        width,
-        height,
-        viewBox,
-        style: { position: "absolute", top: "0", left: "0" },
-        pointerEvents: "none",
-        children: [
-          /* @__PURE__ */ jsx("title", { children: "Human body" }),
-          /* @__PURE__ */ jsx(
-            Body,
-            {
-              colorScale: colorPalette[DEFAULT_COLOR_NAME],
-              style: {
-                fill: "#fff"
-              }
-            }
-          )
-        ]
-      }
-    ),
-    FOREGROUND_ORGANS.map((organId) => renderOrgan(organId, visibleOrganIds.includes(organId)))
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: containerStyle,
+      onMouseEnter: () => setIsHovering(true),
+      onMouseLeave: () => {
+        setIsHovering(false);
+        handleMouseUp();
+      },
+      onMouseDown: handleMouseDown,
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      role: "application",
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { style: contentStyle, children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            ref: containerRef,
+            width: "100%",
+            height: "100%",
+            viewBox,
+            preserveAspectRatio: "xMidYMid meet",
+            style: svgStyle,
+            "aria-label": "Human organ visualizer",
+            children: [
+              /* @__PURE__ */ jsx("title", { children: "Human organ visualizer" }),
+              /* @__PURE__ */ jsx("g", { transform: `translate(${pan.x} ${pan.y})`, children: /* @__PURE__ */ jsx("g", { transform: zoomTransform, children: renderEntries.map((entry) => {
+                if (entry.type === "body") {
+                  return /* @__PURE__ */ jsx(
+                    Body,
+                    {
+                      colorScale: colorPalette[DEFAULT_COLOR_NAME],
+                      style: {
+                        fill: "#fff"
+                      }
+                    },
+                    `${visualizerID}-body`
+                  );
+                }
+                return renderOrgan(entry.organId, visibleOrganIds.includes(entry.organId));
+              }) }) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          ZoomControls,
+          {
+            onZoomIn: zoomIn,
+            onZoomOut: zoomOut,
+            onReset: resetZoom,
+            showResetButton: !isDefaultZoom,
+            zoom,
+            minZoom: MIN_ZOOM,
+            maxZoom,
+            isVisible: isHovering
+          }
+        )
+      ]
+    }
+  );
 }
 
-export { ANIMATION_DURATION_MS, DEFAULT_COLOR_PALETTE, HpoVisualizer, ORGAN_COMPONENTS, ORGAN_IDS, ORGAN_NAMES_EN, ORGAN_NAMES_KO, OrganSvg, useOrganInteraction };
+export { ANIMATION_DURATION_MS, DEFAULT_COLOR_PALETTE, HPO_LABELS, HPO_LABEL_TO_ORGAN, HpoVisualizer, ORGAN_COMPONENTS, ORGAN_IDS, ORGAN_NAMES_EN, ORGAN_NAMES_KO, ORGAN_TO_HPO_LABEL, OrganSvg, createOrganOutlineSet, createUniformOrganColorSchemes, useOrganInteraction };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map