@imfusion/web-ui 0.10.1-dev.51.gc342cd5f → 0.10.1-dev.54.g47954adf

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.10.1-dev.51.gc342cd5f",
+  "version": "0.10.1-dev.54.g47954adf",
   "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,

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

@@ -62,8 +62,10 @@ Use the report contract's severity, `path:line` evidence, concrete impact, and s
 that same structure: unavailable runtime evidence, the impact of the unknown, and the check that resolves it. Do not promote
 an optional tool or a working alternative to a missing finding. A `vite.config.ts` without `localWebUILink()` registered from
 `@imfusion/web-ui/vite` is Missing. A `tsconfig.json` without the `paths` block from the `tooling` topic is Missing too. Each
-next action is the add from that topic. A major or minor mismatch between the project and Web UI on a package listed under
-Aligned runtime packages in the `tooling` topic is a Deviation. Report both versions, with
+next action is the add from that topic. A Vite config that reads tsconfig `paths` (`resolve.tsconfigPaths` or
+`vite-tsconfig-paths`) is Broken: it loads the React types package as React once Web UI comes from the registry. The fix is
+to drop it and give the `#/` alias through `imports` in `package.json`. A major or minor mismatch between the project and Web
+UI on a package listed under Aligned runtime packages in the `tooling` topic is a Deviation. Report both versions, with
 `npm install <package>@<Web UI's version>` as the fix.
 
 ## Topics

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

@@ -101,8 +101,15 @@ export default defineConfig({
 });
 ```
 
-Use strict TypeScript with bundler module resolution, `verbatimModuleSyntax`, unused-value checks, and `#/` paths. Keep
-`import type` for type-only imports.
+Use strict TypeScript with bundler module resolution, `verbatimModuleSyntax`, unused-value checks, and `import type` for
+type-only imports. The `#/` alias is a subpath import in `package.json`, which Vite and TypeScript both read without a
+plugin:
+
+```json
+"imports": {
+  "#/*": "./src/*"
+}
+```
 
 ## Pre-commit checks
 
@@ -150,7 +157,7 @@ Aligned versions are the primary fix. The plugin and the `paths` block below cat
 checkout, it keeps one React in dev, build, and Vitest.
 
 Add this to `compilerOptions` in `tsconfig.json`, merged by hand into an existing `paths`. For a symlinked checkout it keeps
-one set of React and Vite types for `tsc`, and it does nothing for an installed package:
+one set of React and Vite types for `tsc`:
 
 ```json
 "paths": {
@@ -159,3 +166,8 @@ one set of React and Vite types for `tsc`, and it does nothing for an installed
   "vite": ["./node_modules/vite"]
 }
 ```
+
+Only TypeScript reads these `paths`. Never let Vite read them: leave `resolve.tsconfigPaths` off and do not add
+`vite-tsconfig-paths`. Either one applies the `react` mapping at runtime, loads the types package as React, and breaks the
+build and tests once `@imfusion/web-ui` is installed from the registry. A symlinked checkout hides the break, because
+`localWebUILink()` dedupes React first.

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

@@ -55,7 +55,8 @@ The plan describes the exact starter files. It does not copy a generic starter p
 Propose a `vite.config.ts` that registers `imfusionBrandAssets()`, `readableCssModuleNames()`, and `localWebUILink()` from
 `@imfusion/web-ui/vite`, next to the plugins the project already has. Register `localWebUILink()` in every project: without a
 symlinked checkout it does nothing. Also propose the `tsconfig.json` `paths` block. Both keep one React and one set of types
-when the package is a symlinked checkout. The `tooling` topic has the exact config.
+when the package is a symlinked checkout. Vite must not read those `paths`: never propose `resolve.tsconfigPaths` or
+`vite-tsconfig-paths`, and give the `#/` alias through `imports` in `package.json`. The `tooling` topic has the exact config.
 
 ## Installer steps
 

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
 }