{
  "absorbed": [
    "Thumbnail"
  ],
  "docPath": "data-display/image.tsx",
  "example": "import { Image, ImagePreviewGroup, Prose } from \"@godxjp/ui/data-display\";\n\n<ImagePreviewGroup>\n  <Prose>\n    <p><Image src=\"/shots/before.png\" alt=\"Before the fix\" width={320} /></p>\n    <p><Image src=\"/shots/after.png\" alt=\"After the fix\" width={320} /></p>\n    <p><Image src=\"/logo.svg\" alt=\"\" width={24} preview={false} /></p>\n  </Prose>\n</ImagePreviewGroup>",
  "group": "data-display",
  "importPath": "@godxjp/ui/data-display",
  "name": "Image",
  "props": [
    {
      "description": "Image URL.",
      "name": "src",
      "type": "string"
    },
    {
      "description": "Required (as on Thumbnail). Also names the trigger \"Preview: {alt}\". Pass \"\" for a decorative picture.",
      "name": "alt",
      "type": "string"
    },
    {
      "description": "antd shape. `false` = a plain, non-clickable picture that also leaves its group. `src` shows a different (larger) file in the preview. Defaults: scaleStep 0.5, minScale 1, maxScale 50. `download` adds a Download action to the preview toolbar (gh#1122): `true` = a link to the picture on show (`<a href download>`; a cross-origin URL opens instead), a function `({ src, index }) => void` = a button for a signed URL or a blob. The same key works on `ImagePreviewGroup preview`.",
      "name": "preview",
      "type": "boolean | { visible?, onVisibleChange?(visible, prevVisible), src?, mask?, scaleStep?, minScale?, maxScale?, download? }"
    },
    {
      "description": "Shown when `src` fails. A failed picture does not open a preview (antd).",
      "name": "fallback",
      "type": "string"
    },
    {
      "description": "Painted over the frame until the picture loads; `true` = a muted block.",
      "name": "placeholder",
      "type": "ReactNode | boolean"
    },
    {
      "description": "antd Image: size the FRAME (number = px, or a CSS length); the picture fills it. `width` alone keeps the picture's ratio; a fixed height crops per `fit`. Also set on the img.",
      "name": "width / height",
      "type": "number | string"
    },
    {
      "description": "Thumbnail frame on the Thumbnail height scale (64 / 96 / 160px) at `--thumbnail-width-ratio` (4 / 3), cropped to fill. godx extension; `width`/`height` override the side they name.",
      "name": "size",
      "type": "\"sm\" | \"md\" | \"lg\""
    },
    {
      "description": "object-fit inside a fixed frame (`cover` crops, `contain` letterboxes). Default `cover` once the height is fixed (size or height). `intrinsic` keeps the picture's OWN ratio: the frame is the `size` height (default md) at the picture's own width — never cropped — with the hairline thumbnail frame on a muted backdrop, clamped to its column; `width`/`height` then stay `<img>` attributes (the file's real pixels) so the width is reserved before the bytes land. Use it for a wrapping row of mixed portrait/landscape screenshots at one height — what the retired `Thumbnail` was (v32). Pair with `preview={false}` for a plain picture.",
      "name": "fit",
      "type": "\"cover\" | \"contain\" | \"intrinsic\""
    },
    {
      "description": "Text under the picture in a figure held to the picture's width — a long file name truncates instead of widening the tile. godx extension.",
      "name": "caption",
      "type": "ReactNode"
    },
    {
      "description": "Class on the wrapper (the button).",
      "name": "className",
      "type": "string"
    },
    {
      "description": "Explicit gallery instead of the Images rendered under the group. A clicked child opens at the item with its own src.",
      "name": "ImagePreviewGroup.items",
      "type": "(string | { src, alt? })[]"
    },
    {
      "description": "antd shape and argument order. `false` turns every Image under the group into a plain picture.",
      "name": "ImagePreviewGroup.preview",
      "type": "boolean | { current?, onChange?(current, prevCurrent), visible?, onVisibleChange?(visible, prevVisible), scaleStep?, minScale?, maxScale? }"
    },
    {
      "description": "Shown in the preview for a picture that fails to load.",
      "name": "ImagePreviewGroup.fallback",
      "type": "string"
    }
  ],
  "related": [
    "Image `fit=\"intrinsic\" preview={false}` — a framed picture at a fixed height and its own width, with no preview (the former Thumbnail).",
    "Prose — the Markdown body the group usually wraps.",
    "Carousel — slides on the page itself, not a full-viewport preview."
  ],
  "rules": [
    2,
    6,
    23,
    44,
    45
  ],
  "storyPath": "data-display/image.tsx",
  "subParts": [
    "ImagePreviewGroup"
  ],
  "tagline": "antd `Image` + `Image.PreviewGroup`: a picture that opens in a full-viewport preview (zoom in/out by button, wheel or double-click; rotate; flip; reset; drag to pan). Inside an `ImagePreviewGroup` every Image at any depth joins one gallery in document order — prev/next buttons, ←/→, a \"2 / 3\" counter. Esc closes; focus is trapped and returned to the picture.",
  "usage": [
    "DO wrap a rendered Markdown body in ImagePreviewGroup and map its `img` to `<Image>` — every screenshot of the article then pages in one preview, in reading order.",
    "DO pass `preview={false}` for a logo or icon inside that body so it neither opens nor counts.",
    "DO use `Image.PreviewGroup` or `ImagePreviewGroup` — the same component.",
    "DON'T hand-roll a lightbox from Dialog + Carousel: it has no zoom, no arrow keys and a 32rem box. That composition is what this replaces.",
    "DON'T nest an Image inside a link or button: the thumbnail is itself a button.",
    "DO size an attachment gallery with `size=\"md\"` (96px, 4:3, cropped) and put the file name in `caption` — never an inline style reading `--thumbnail-block-size`."
  ],
  "useCases": [
    "Screenshots in a test result or wiki page that the reader opens large and pages through.",
    "A product or evidence gallery with zoom and rotate."
  ]
}