feat: pass pixelWidth/pixelHeight from Image props to Kitty renderer

Previously the test computed accurate pixel dimensions from the original
image's aspect ratio, but the prop chain never forwarded them through
ImageComponentProps -> ImageRenderer -> KittyImage -> useImage, so
KittyImage always computed pixels from resolved chars × cell size (losing
aspect ratio information). Now the full chain forwards pixelWidth/
pixelHeight as overrides, letting the test control exact pixel scaling
while width/height still drive Ink layout and Kitty placement bounds.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/ink-picture/__tests__/LocalPicture.test.tsx

@@ -40,7 +40,7 @@ function App() {
         const cols = process.stdout.columns ?? 80;
 
         // 1. 目标字符尺寸
-        const targetW_chars = Math.floor(cols * 0.6);
+        const targetW_chars = Math.floor(cols * 0.4);
 
         // 2. 转为像素尺寸（用于图片缩放）
         const targetW_pixels = targetW_chars * CELL_WIDTH;

src/ink-picture/components/image/Kitty.tsx

@@ -18,7 +18,7 @@ import type { ImageProps } from "./protocol.js";
 function KittyImage(props: ImageProps) {
   const terminalInfo = useTerminalInfo();
   const { stdout } = useStdout();
-  const { src, width, height, alt } = props;
+  const { src, width, height, pixelWidth, pixelHeight, alt } = props;
 
   const { containerRef, resolvedWidth, resolvedHeight } = useMeasuredSize(
     width,
@@ -27,13 +27,14 @@ function KittyImage(props: ImageProps) {
 
   const componentPosition = usePosition(containerRef);
 
-  const pixelWidth = resolvedWidth * (terminalInfo?.cellWidth ?? 0);
-  const pixelHeight = resolvedHeight * (terminalInfo?.cellHeight ?? 0);
+  // Use external pixel dimensions if provided, otherwise compute from chars
+  const actualPixelWidth = pixelWidth ?? resolvedWidth * (terminalInfo?.cellWidth ?? 0);
+  const actualPixelHeight = pixelHeight ?? resolvedHeight * (terminalInfo?.cellHeight ?? 0);
 
   const { imageData, error } = useImage({
     src,
-    pixelWidth,
-    pixelHeight,
+    pixelWidth: actualPixelWidth,
+    pixelHeight: actualPixelHeight,
     mode: "png",
   });
 
@@ -118,6 +119,7 @@ function KittyImage(props: ImageProps) {
       ref={containerRef}
       width={width}
       height={height}
+      imageHeight={actualPixelHeight}
       alt={alt}
       error={error}
       loaded={!!imageId}

src/ink-picture/components/image/index.tsx

@@ -44,6 +44,8 @@ function Image({
   getVisibility,
   width = "100%",
   height = "100%",
+  pixelWidth,
+  pixelHeight,
   ...props
 }: ImageComponentProps) {
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
@@ -121,6 +123,8 @@ function Image({
         key={effectiveProtocol}
         width={resolvedWidth}
         height={resolvedHeight}
+        pixelWidth={pixelWidth}
+        pixelHeight={pixelHeight}
         {...props}
       />
     </Box>

src/ink-picture/components/image/protocol.ts

@@ -13,6 +13,10 @@ export interface ImageProps {
   height: number | string;
   /** Alternative text displayed while loading or on error */
   alt?: string;
+  /** Override pixel width for image scaling (default: resolved from width) */
+  pixelWidth?: number;
+  /** Override pixel height for image scaling (default: resolved from height) */
+  pixelHeight?: number;
 }
 
 /**