@imfusion/web-ui 0.11.1-dev.59.g5c2572e2 → 0.11.1-dev.62.gfcd31b6e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.11.1-dev.59.g5c2572e2",
+  "version": "0.11.1-dev.62.gfcd31b6e",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",

package/src/docgen/doc.gen.json

@@ -6666,6 +6666,148 @@
     },
     "subComponents": []
   },
+  "image": {
+    "root": {
+      "name": "Image",
+      "description": "Image — a picture box with one `<source>` per format (AVIF, then WebP) and an `<img>` fallback. The browser picks the\nformat and size. The box reserves `width` by `height` before the image arrives, pulses while it loads, and shows a\nglyph when it fails. Also called a photo, thumbnail or media.\n\n`ref` and every prop not named here reach the `<img>`.",
+      "props": [
+        {
+          "name": "alt",
+          "required": true,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Describes the image. Pass `\"\"` to mark it decorative."
+        },
+        {
+          "name": "aspectRatio",
+          "required": false,
+          "type": "number",
+          "defaultValue": null,
+          "description": "Width divided by height of the box. Defaults to `width / height`; the picture crops or letterboxes per `fit`."
+        },
+        {
+          "name": "avifSrcSet",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "AVIF candidates for the `<picture>`, offered before WebP."
+        },
+        {
+          "name": "border",
+          "required": false,
+          "type": "\"none\" | \"single\" | null",
+          "defaultValue": "none",
+          "description": ""
+        },
+        {
+          "name": "borderWidth",
+          "required": false,
+          "type": "1 | 2 | 3",
+          "defaultValue": "1",
+          "description": "Hairline width in `border-size` steps. Applies with `border=\"single\"`."
+        },
+        {
+          "name": "className",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Sizing and layout hook on the box around the picture."
+        },
+        {
+          "name": "decoding",
+          "required": false,
+          "type": "\"auto\" | \"async\" | \"sync\"",
+          "defaultValue": "async",
+          "description": "`async` decodes off the main thread."
+        },
+        {
+          "name": "fit",
+          "required": false,
+          "type": "\"cover\" | \"contain\" | null",
+          "defaultValue": "cover",
+          "description": ""
+        },
+        {
+          "name": "height",
+          "required": true,
+          "type": "number",
+          "defaultValue": null,
+          "description": "Intrinsic height in pixels."
+        },
+        {
+          "name": "loading",
+          "required": false,
+          "type": "\"lazy\" | \"eager\"",
+          "defaultValue": "lazy",
+          "description": "`lazy` defers the request until the image nears the viewport."
+        },
+        {
+          "name": "priority",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Loads the image eagerly with high fetch priority. Set it on the page's largest image only."
+        },
+        {
+          "name": "radius",
+          "required": false,
+          "type": "\"none\" | \"sm\" | \"md\" | \"lg\" | \"round\" | null",
+          "defaultValue": "none",
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "required": false,
+          "type": "Ref<HTMLImageElement>",
+          "defaultValue": null,
+          "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+        },
+        {
+          "name": "sizes",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Slot width the browser plans for, shared by both `<source>` elements and the `<img>`."
+        },
+        {
+          "name": "src",
+          "required": true,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Address of the fallback `<img>`."
+        },
+        {
+          "name": "srcSet",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Width candidates of the fallback `<img>`."
+        },
+        {
+          "name": "style",
+          "required": false,
+          "type": "CSSProperties",
+          "defaultValue": null,
+          "description": "Sizing and layout hook on the box around the picture."
+        },
+        {
+          "name": "webpSrcSet",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "WebP candidates for the `<picture>`, offered after AVIF."
+        },
+        {
+          "name": "width",
+          "required": true,
+          "type": "number",
+          "defaultValue": null,
+          "description": "Intrinsic width in pixels. Together with `height` it reserves the box before the image loads."
+        }
+      ]
+    },
+    "subComponents": []
+  },
   "input": {
     "root": {
       "name": "Input",

package/src/llms/llms.gen.txt

@@ -140,6 +140,11 @@ Renders a Web UI icon with an optional semantic foreground color. The default in
 Square button that shows a single icon and no visible text, with its accessible name from `label`. Also called an icon-only or toolbar button. Use Button with `startIcon` or `endIcon` when a text label is visible.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .icon-button (jq: jq '.icon-button' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 
+## Image
+- category: Display, status: experimental
+Picture with AVIF and WebP sources, reserved space, lazy loading, and a fallback while it loads or when it fails. Also called a photo, thumbnail or media. Use Avatar for a person and Card.Image for a card's edge-to-edge slot.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .image (jq: jq '.image' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+
 ## ImageDisplayOptions
 - category: Inputs, status: experimental
 Panel and toolbar controls for an image dataset's display options, including window, level, gamma, and invert settings.

package/src/llms/skills/imf-web-ui-conventions/topics/assets.md

@@ -32,6 +32,10 @@ floor.
 </picture>
 ```
 
+`Image` from `@imfusion/web-ui` renders this `<picture>` from `avifSrcSet`, `webpSrcSet`, `srcSet`, `sizes`, `width`,
+`height` and `alt`. It adds lazy loading and async decoding, a pulse while the image loads and a glyph when it fails. Use it
+for content images instead of writing the `<picture>` by hand.
+
 ## Loading
 
 Every `<img>` carries `width` and `height` in the source's aspect ratio, so the browser reserves its space before it loads.