@imfusion/web-ui 0.10.1-dev.49.geca9b5e8 → 0.10.1-dev.53.gea04219d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.10.1-dev.49.geca9b5e8",
+  "version": "0.10.1-dev.53.gea04219d",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",

package/src/docgen/doc.gen.json

@@ -8338,6 +8338,13 @@
       "name": "Table.Root",
       "description": "Table.Root — the `<table>` element.",
       "props": [
+        {
+          "name": "density",
+          "required": false,
+          "type": "\"compact\" | \"comfortable\" | \"spacious\"",
+          "defaultValue": "comfortable",
+          "description": "Cell padding: `compact` for dense data, `spacious` for a few rows at a glance."
+        },
         {
           "name": "ref",
           "required": false,
@@ -8365,6 +8372,13 @@
         "name": "Table.Cell",
         "description": "Table.Cell — a `<td>` data cell.",
         "props": [
+          {
+            "name": "action",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Marks an action column: it shrinks to its content and keeps it on one line."
+          },
           {
             "name": "ref",
             "required": false,
@@ -8404,6 +8418,13 @@
         "name": "Table.HeaderCell",
         "description": "Table.HeaderCell — a `<th>` header cell.",
         "props": [
+          {
+            "name": "action",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": "false",
+            "description": "Marks an action column: it shrinks to its content and keeps it on one line."
+          },
           {
             "name": "ref",
             "required": false,
@@ -8450,6 +8471,13 @@
         "name": "Table.SortableHeaderCell",
         "description": "Table.SortableHeaderCell — a header cell whose label is a sort toggle,\npre-composing HeaderCell + HeaderButton so `aria-sort` and the direction\nindicator aren't re-derived per consumer. Omit `onToggle` for a plain cell.",
         "props": [
+          {
+            "name": "action",
+            "required": false,
+            "type": "boolean",
+            "defaultValue": null,
+            "description": "Marks an action column: it shrinks to its content and keeps it on one line."
+          },
           {
             "name": "ref",
             "required": false,

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

@@ -80,3 +80,25 @@ When no component covers a piece, compose its primitives and use `--imf-ui-*` to
 
 For a screen review, read the relevant reference under `references/`: `usability-heuristics.md`, `visual-design.md`, or
 `forms.md`.
+
+## Public backdrop handover
+
+Public pages share a backdrop with the Keycloak login page: a light column with an animated line mesh, and a brand-colored
+panel. Both sides draw the same geometry, so the cross-origin navigation between them looks seamless. Read the geometry from
+these tokens and never from literals:
+
+- `--imf-ui-size-backdrop-edge`: where the brand panel starts on wide landscape screens.
+- `--imf-ui-size-backdrop-band-height`: the height of the light band on top of narrow or portrait screens, with the panel
+  below it.
+
+The switch between the two layouts is a media query, which a token cannot carry. Use the same breakpoint as the reference
+implementations.
+
+The backdrop also paints before React mounts, so the first frame already matches. Put the same two columns on `body` as a
+hard-stop `linear-gradient`, with `min-block-size: 100dvh`. In a single-page app, a marker on `html`
+(`data-backdrop-pending`), set by an inline script in `index.html` for the routes that show the backdrop, gates that
+gradient. The backdrop component removes the marker when it mounts. Generate that script's route list at build time from the
+router's own source, never as a hand-written copy: with TanStack file routes, a small Vite plugin (`transformIndexHtml`)
+reads the folder of backdrop routes and fills a placeholder in `index.html`, so a new route gets the pre-paint without anyone
+touching the script. The ImFusion Portal's public backdrop component and the Keycloak login theme's copy of it are the
+reference implementations.

package/src/llms/tokens.gen.json

@@ -913,6 +913,14 @@
         "name": "--imf-ui-size-9",
         "value": "4rem"
       },
+      {
+        "name": "--imf-ui-size-backdrop-band-height",
+        "value": "30dvh"
+      },
+      {
+        "name": "--imf-ui-size-backdrop-edge",
+        "value": "38%"
+      },
       {
         "name": "--imf-ui-size-content-1",
         "value": "20ch"
@@ -947,5 +955,5 @@
       }
     ]
   },
-  "count": 231
+  "count": 233
 }