@imfusion/web-ui 0.9.0 → 0.9.1-dev.7.g0a2385ef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.9.0",
+  "version": "0.9.1-dev.7.g0a2385ef",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",

package/src/docgen/doc.gen.json

@@ -5268,6 +5268,50 @@
     },
     "subComponents": []
   },
+  "rich-link": {
+    "root": {
+      "name": "RichLink",
+      "description": "RichLink — a link as a whole row: an optional leading icon on a tinted tile, the label with an optional description\nline, and a trailing icon for where it leads. Draws no divider; stacked links get their spacing from the layout. Wrap it\nwith TanStack Router's `createLink` to use it as a router link.",
+      "props": [
+        {
+          "name": "description",
+          "required": false,
+          "type": "ReactNode",
+          "defaultValue": null,
+          "description": "Second line under the label. When set, the label turns bold."
+        },
+        {
+          "name": "endGlyph",
+          "required": false,
+          "type": "IconComponent",
+          "defaultValue": null,
+          "description": "Trailing icon from `@imfusion/web-ui/icons`, replacing the arrow `kind` picks, such as `Download` for a file."
+        },
+        {
+          "name": "glyph",
+          "required": false,
+          "type": "IconComponent",
+          "defaultValue": null,
+          "description": "Leading icon from `@imfusion/web-ui/icons`, shown on a tile in the primary color."
+        },
+        {
+          "name": "kind",
+          "required": false,
+          "type": "\"external\" | \"internal\"",
+          "defaultValue": "external",
+          "description": "Link target scope. `\"external\"` (default) opens in a new tab with a diagonal `ArrowUpRight` icon; `\"internal\"` stays in the current tab with a horizontal `ArrowRight` icon."
+        },
+        {
+          "name": "ref",
+          "required": false,
+          "type": "Ref<HTMLAnchorElement>",
+          "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}"
+        }
+      ]
+    },
+    "subComponents": []
+  },
   "row": {
     "root": {
       "name": "Row",
@@ -6352,14 +6396,14 @@
   "skeleton": {
     "root": {
       "name": "Skeleton.Root",
-      "description": "Skeleton.Root — marks a region as loading. The view inside renders for real; bones stand in for the data. Sets\n`aria-busy` and announces `label` once, however many bones it holds.",
+      "description": "Skeleton.Root — marks a region as loading. The view inside renders for real; bones stand in for the data. While\n`loading`, sets `aria-busy` and announces `label` once, however many bones it holds. When `loading` turns false, the\ndata fades in over the bones.",
       "props": [
         {
           "name": "animation",
           "required": false,
           "type": "\"none\" | \"shimmer\"",
           "defaultValue": "shimmer",
-          "description": "`none` holds every bone inside still."
+          "description": "`none` holds every bone inside still and swaps in the data without a reveal."
         },
         {
           "name": "label",
@@ -6368,6 +6412,13 @@
           "defaultValue": null,
           "description": "Announced once through a visually hidden status. Pass `\"\"` when something else already speaks for the region."
         },
+        {
+          "name": "loading",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "true",
+          "description": "Whether the region is still loading. Root stays mounted and reveals the data when this turns false."
+        },
         {
           "name": "ref",
           "required": false,

package/src/llms/llms.gen.txt

@@ -163,6 +163,11 @@ Floating panel anchored to a trigger for contextual content, quick forms, or act
 Flow container that spaces long-form text and the blocks inside it. Also called an article or rich-text container. Use Stack or Row for UI layout.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .prose (jq: jq '.prose' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 
+## RichLink
+- category: Buttons, status: experimental
+Link as a whole row: optional leading icon, label, optional description line, and a trailing arrow for where it leads. Also called a link row or resource link. Use ChipLink for a compact link inside other content.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .rich-link (jq: jq '.rich-link' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+
 ## Row
 - category: Layout, status: stable
 Horizontal layout primitive for spacing, aligning, and wrapping children. Also called a horizontal stack or flex row.

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

@@ -9,6 +9,12 @@ integration seams.
 - If Web UI is missing a component or part, report the gap instead of reaching around it.
 - Import glyphs from `@imfusion/web-ui/icons` and render them with `Icon`.
 
+## Stand in for a missing component
+
+When a generic component is missing from Web UI and the app cannot wait, build it in `components/web-ui-pending/<name>/` and
+file the gap with the library. Keep it free of app logic and name it as the library would, so the swap is an import change.
+Delete the folder once Web UI ships the component.
+
 ## Wrap primitives when the app has a reason to
 
 Create an app-level dumb wrapper when you repeat a default, composition, styling override, accessibility improvement, or API

package/src/llms/skills/imf-web-ui-ux/SKILL.md

@@ -46,6 +46,8 @@ reason.
 ## Choose between similar controls
 
 - `Button` performs an action, `ChipLink` goes somewhere, and `Chip` labels something.
+- Use `ChipLink` for a link inside text or a row of chips, and `RichLink` for a link that fills its own row, such as a list
+  of resources.
 - Use plain `Table` parts for static small data. Pair them with a headless table library for sorting, pagination, or column
   logic. TanStack Table is the recommended choice.
 - Use `Callout` for persistent in-place status. Put transient confirmation near the action until a toast pattern exists.

package/src/llms/tokens.gen.json

@@ -573,7 +573,7 @@
       },
       {
         "name": "--imf-ui-font-lineheight-title",
-        "value": "clamp(2.0125rem, 1.8134rem + 0.8846vw, 2.5875rem)"
+        "value": "clamp(1.9872rem, 1.7979rem + 0.8413vw, 2.8076rem)"
       },
       {
         "name": "--imf-ui-font-size-0",
@@ -625,23 +625,23 @@
       },
       {
         "name": "--imf-ui-font-size-fluid-0",
-        "value": "clamp(1.125rem, 4.5vw, 1.3125rem)"
+        "value": "clamp(1.2rem, 1.1163rem + 0.3718vw, 1.5625rem)"
       },
       {
         "name": "--imf-ui-font-size-fluid-1",
-        "value": "clamp(1rem, 4vw, 1.5rem)"
+        "value": "clamp(1.44rem, 1.3216rem + 0.5263vw, 1.9531rem)"
       },
       {
         "name": "--imf-ui-font-size-fluid-2",
-        "value": "clamp(1.75rem, 1.5769rem + 0.7692vw, 2.25rem)"
+        "value": "clamp(1.728rem, 1.5634rem + 0.7317vw, 2.4414rem)"
       },
       {
         "name": "--imf-ui-font-size-fluid-3",
-        "value": "clamp(2rem, 1.1154rem + 2.8205vw, 4.5rem)"
+        "value": "clamp(2rem, 1.4231rem + 2.5641vw, 4.5rem)"
       },
       {
         "name": "--imf-ui-font-size-hero",
-        "value": "clamp(3rem, 1.8rem + 6vw, 9rem)"
+        "value": "clamp(3rem, 1.6154rem + 6.1538vw, 9rem)"
       },
       {
         "name": "--imf-ui-font-weight-1",