hpo-react-visualizer 0.0.2 → 0.0.3

package/dist/index.cjs

@@ -192,7 +192,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
@@ -224,6 +236,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];
@@ -1061,18 +1087,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__ */ jsxRuntime.jsx("g", { className, "data-organ": "neoplasm", children: /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      d: NEOPLASM_PATH,
-      fill,
-      stroke: style?.stroke,
-      strokeWidth: style?.strokeWidth,
-      style: { transition: TRANSITION_STYLE }
-    }
-  ) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, "data-organ": "neoplasm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: NEOPLASM_PATH,
+        fill,
+        stroke: style?.stroke,
+        strokeWidth: style?.strokeWidth,
+        style: { transition: TRANSITION_STYLE }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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];
@@ -1237,25 +1267,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__ */ jsxRuntime.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: [
@@ -1341,14 +1367,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 = react.useMemo(
     () => ({
@@ -1379,103 +1399,230 @@ 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 } = options;
+  const { minZoom = 1, maxZoom = 5, zoomStep = 0.5, wheelZoom = true, viewBox } = options;
   const [zoom, setZoom] = react.useState(1);
   const [pan, setPan] = react.useState({ x: 0, y: 0 });
   const [isDragging, setIsDragging] = react.useState(false);
   const dragStartRef = react.useRef({ x: 0, y: 0 });
   const panStartRef = react.useRef({ x: 0, y: 0 });
   const containerRef = react.useRef(null);
+  const zoomRef = react.useRef(1);
+  const panRef = react.useRef({ x: 0, y: 0 });
+  const animationRef = react.useRef(null);
   const clampZoom = react.useCallback(
     (value) => Math.max(minZoom, Math.min(maxZoom, value)),
     [minZoom, maxZoom]
   );
+  const stopAnimation = react.useCallback(() => {
+    if (animationRef.current !== null) {
+      cancelAnimationFrame(animationRef.current);
+      animationRef.current = null;
+    }
+  }, []);
+  const animateZoom = react.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 = react.useCallback(() => {
-    setZoom((prev) => clampZoom(prev + zoomStep));
-  }, [clampZoom, zoomStep]);
+    const nextZoom = clampZoom(zoomRef.current + zoomStep);
+    animateZoom(nextZoom);
+  }, [animateZoom, clampZoom, zoomStep]);
   const zoomOut = react.useCallback(() => {
-    setZoom((prev) => clampZoom(prev - zoomStep));
-  }, [clampZoom, zoomStep]);
+    const nextZoom = clampZoom(zoomRef.current - zoomStep);
+    animateZoom(nextZoom);
+  }, [animateZoom, clampZoom, zoomStep]);
   const resetZoom = react.useCallback(() => {
-    setZoom(1);
-    setPan({ x: 0, y: 0 });
-  }, []);
+    animateZoom(1, { targetPan: { x: 0, y: 0 } });
+  }, [animateZoom]);
+  const getViewBoxSize = react.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 = react.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 = react.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 = react.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))
+      };
+    },
+    []
+  );
+  react.useEffect(() => {
+    zoomRef.current = zoom;
+  }, [zoom]);
+  react.useEffect(() => {
+    panRef.current = pan;
+  }, [pan]);
+  react.useEffect(() => {
+    return () => stopAnimation();
+  }, [stopAnimation]);
   react.useEffect(() => {
     const container = containerRef.current;
-    if (!container) return;
+    if (!container || !wheelZoom) return;
     const wheelZoomStep = 0.1;
     const handleWheel = (e) => {
       e.preventDefault();
-      const rect = container.getBoundingClientRect();
-      const mouseX = e.clientX - rect.left - rect.width / 2;
-      const mouseY = e.clientY - rect.top - rect.height / 2;
+      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;
-      setZoom((prevZoom) => {
-        const newZoom = clampZoom(prevZoom + delta);
-        if (newZoom === prevZoom) return prevZoom;
-        setPan((prevPan) => {
-          const contentX = (mouseX - prevPan.x) / prevZoom;
-          const contentY = (mouseY - prevPan.y) / prevZoom;
-          const newPanX = mouseX - contentX * newZoom;
-          const newPanY = mouseY - contentY * newZoom;
-          if (newZoom <= 1) {
-            return { x: 0, y: 0 };
-          }
-          const maxPanX = rect.width * (newZoom - 1) / 2;
-          const maxPanY = rect.height * (newZoom - 1) / 2;
-          return {
-            x: Math.max(-maxPanX, Math.min(maxPanX, newPanX)),
-            y: Math.max(-maxPanY, Math.min(maxPanY, newPanY))
-          };
-        });
-        return newZoom;
-      });
+      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]);
-  const clampPan = react.useCallback((newPan, currentZoom) => {
-    const container = containerRef.current;
-    if (!container || currentZoom <= 1) {
-      return { x: 0, y: 0 };
-    }
-    const containerWidth = container.clientWidth;
-    const containerHeight = container.clientHeight;
-    const maxPanX = containerWidth * (currentZoom - 1) / 2;
-    const maxPanY = containerHeight * (currentZoom - 1) / 2;
-    return {
-      x: Math.max(-maxPanX, Math.min(maxPanX, newPan.x)),
-      y: Math.max(-maxPanY, Math.min(maxPanY, newPan.y))
-    };
-  }, []);
+  }, [clampZoom, wheelZoom, getViewBoxMetrics, getPointerPosition, clampPan, stopAnimation]);
   react.useEffect(() => {
-    setPan((currentPan) => clampPan(currentPan, zoom));
-  }, [zoom, clampPan]);
+    const container = containerRef.current;
+    if (!container) return;
+    const { viewBoxWidth, viewBoxHeight } = getViewBoxMetrics(container);
+    setPan((currentPan) => clampPan(currentPan, zoom, viewBoxWidth, viewBoxHeight));
+  }, [zoom, clampPan, getViewBoxMetrics]);
   const handleMouseDown = react.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]
+    [pan, zoom, stopAnimation]
   );
   const handleMouseMove = react.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,
-        y: panStartRef.current.y + dy
+        x: panStartRef.current.x + dx / scale,
+        y: panStartRef.current.y + dy / scale
       };
-      setPan(clampPan(newPan, zoom));
+      setPan(clampPan(newPan, zoom, viewBoxWidth, viewBoxHeight));
     },
-    [isDragging, zoom, clampPan]
+    [isDragging, zoom, clampPan, getViewBoxMetrics]
   );
   const handleMouseUp = react.useCallback(() => {
     setIsDragging(false);
@@ -1643,11 +1790,12 @@ function HpoVisualizer({
   onHover,
   onSelect,
   colorPalette: inputColorPalette,
-  width = BODY_VIEWBOX.width,
-  height = BODY_VIEWBOX.height,
+  width = "100%",
+  height = "100%",
   className,
   style,
-  maxZoom = 5
+  maxZoom = 5,
+  wheelZoom = true
 }) {
   const visualizerID = react.useId();
   const [isHovering, setIsHovering] = react.useState(false);
@@ -1663,7 +1811,7 @@ function HpoVisualizer({
     isDragging,
     isDefaultZoom,
     containerRef
-  } = useZoom({ minZoom: MIN_ZOOM, maxZoom });
+  } = useZoom({ minZoom: MIN_ZOOM, maxZoom, wheelZoom, viewBox: BODY_VIEWBOX });
   const colorPalette = react.useMemo(
     () => createStrictColorPalette(inputColorPalette),
     [inputColorPalette]
@@ -1686,12 +1834,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 = react.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",
@@ -1700,33 +1884,50 @@ function HpoVisualizer({
     position: "relative",
     width,
     height,
-    ...style,
+    ...containerStyleOverrides,
     // Apply overflow after style spread to ensure it takes precedence
-    // Use 'clip' instead of 'hidden' to respect padding
     overflow: "clip"
   };
   const contentStyle = {
-    position: "relative",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "flex-end",
     width: "100%",
     height: "100%",
-    transform: `scale(${zoom}) translate(${pan.x / zoom}px, ${pan.y / zoom}px)`,
-    transformOrigin: "center center",
+    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",
-    transition: isDragging ? "none" : "transform 0.1s ease-out"
+    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__ */ jsxRuntime.jsx(
       OrganSvg,
       {
@@ -1752,7 +1953,6 @@ function HpoVisualizer({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref: containerRef,
       className,
       style: containerStyle,
       onMouseEnter: () => setIsHovering(true),
@@ -1766,38 +1966,36 @@ function HpoVisualizer({
       role: "application",
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle, children: [
-          BACKGROUND_ORGANS.map(
-            (organId) => renderOrgan(organId, visibleOrganIds.includes(organId))
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "svg",
-            {
-              x: translateX,
-              y: "0",
-              width,
-              height,
-              viewBox,
-              style: { position: "absolute", top: "0", left: "0" },
-              pointerEvents: "none",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Human body" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Body,
-                  {
-                    colorScale: colorPalette[DEFAULT_COLOR_NAME],
-                    style: {
-                      fill: "#fff"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          FOREGROUND_ORGANS.map(
-            (organId) => renderOrgan(organId, visibleOrganIds.includes(organId))
-          )
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: contentStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            ref: containerRef,
+            width: "100%",
+            height: "100%",
+            viewBox,
+            preserveAspectRatio: "xMidYMid meet",
+            style: svgStyle,
+            "aria-label": "Human organ visualizer",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Human organ visualizer" }),
+              /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${pan.x} ${pan.y})`, children: /* @__PURE__ */ jsxRuntime.jsx("g", { transform: zoomTransform, children: renderEntries.map((entry) => {
+                if (entry.type === "body") {
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    Body,
+                    {
+                      colorScale: colorPalette[DEFAULT_COLOR_NAME],
+                      style: {
+                        fill: "#fff"
+                      }
+                    },
+                    `${visualizerID}-body`
+                  );
+                }
+                return renderOrgan(entry.organId, visibleOrganIds.includes(entry.organId));
+              }) }) })
+            ]
+          }
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           ZoomControls,
           {
@@ -1827,6 +2025,8 @@ exports.ORGAN_NAMES_EN = ORGAN_NAMES_EN;
 exports.ORGAN_NAMES_KO = ORGAN_NAMES_KO;
 exports.ORGAN_TO_HPO_LABEL = ORGAN_TO_HPO_LABEL;
 exports.OrganSvg = OrganSvg;
+exports.createOrganOutlineSet = createOrganOutlineSet;
+exports.createUniformOrganColorSchemes = createUniformOrganColorSchemes;
 exports.useOrganInteraction = useOrganInteraction;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map