@imfusion/web-ui 0.11.1-dev.44.gad806324 → 0.11.1-dev.47.g23180a23

package/CHANGELOG.md

@@ -74,7 +74,11 @@
   - `imf-web-ui-conventions` exempts React components from the explicit return type on exported functions.
   - The `project-structure` topic keeps a route's only view, such as a form, in the route file and moves views to the `-`
     folder only when the page composes several. `imf-web-ui-audit` reports by views, not line counts.
-  - The `imf-web-ui-conventions` audit checklist names the assets box "Photographs: WebP", like its topic heading.
+  - The `imf-web-ui-conventions` `assets` topic encodes photographs as AVIF and WebP at 800 and 1600px and renders them
+    through `<picture>` with `srcSet` and `sizes`. Every `<img>` has `width` and `height`, below-the-fold images load
+    lazily, and only the largest paint gets `fetchpriority="high"`.
+  - The `imf-web-ui-conventions` `components` topic names the landmarks `AppShell` renders and asks for one `Typo.H1` per
+    page, `Button` for actions, and `Link` for destinations.
   - `web-ui-dev-new-component`, `web-ui-dev-update-component`, and `web-ui-dev-design-component` draft on the shared
     Web UI Component Drafts canvas: a block per component on its Storybook group's page, one row per fidelity rung.
   - `web-ui-dev-new-component` and `web-ui-dev-update-component` wait for the user to approve the design on the canvas
@@ -87,7 +91,10 @@
   - The `imf-web-ui-conventions` `styling` topic shows a container setting a custom property that its child reads with
     its own default as the fallback.
   - `web-ui-dev-release` syncs the Claude Design system once npm serves the stable version.
+  - `web-ui-dev-record-clip` records every clip in light and dark, and release highlights list both files of each pair.
 - Documentation — Nikolaus Brunner <brunner@imfusion.com>
+  - The Changelog page's screenshot carousel shows one file of each `-light`/`-dark` pair, the one for the page's color
+    scheme, and switches with the Storybook toolbar.
   - `docs/design-system.md` describes the Web UI Component Drafts canvas, and `AGENTS.md` links it. A shipped component
     keeps its block under an "Implemented" note that names its story.
   - `docs/conventions.md` shows how a component declares its default as a custom-property fallback that a container
@@ -119,6 +126,7 @@
 - `npm run dev` starts Storybook on the next free port again while another checkout's Storybook runs. — Nikolaus Brunner
   <brunner@imfusion.com>
 - A Storybook sidebar row's status icon stays in place on hover. — Nikolaus Brunner <brunner@imfusion.com>
+- `npm run ci:status` lists queued and running builds beside finished ones. — Nikolaus Brunner <brunner@imfusion.com>
 - Components — Nikolaus Brunner <brunner@imfusion.com>
   - A `Drawer.Close` or `Popover.Close` rendered as another component, such as a `Button`, keeps that component's styles.
   - A `Popover.Trigger` rendered as another component keeps that component's styles, so `render={<Button />}` looks like a Button.

package/package.json

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

package/src/llms/skills/imf-web-ui-conventions/templates/AUDIT_CHECKLIST.md

@@ -46,6 +46,7 @@ sections one to one — change a topic's sections and this file follows in the s
 - [ ] Grouping
 - [ ] One file or a folder
 - [ ] Colocation
+- [ ] Semantic elements
 
 ## TypeScript & code style — `typescript`
 
@@ -127,7 +128,8 @@ sections one to one — change a topic's sections and this file follows in the s
 ## Assets — `assets`
 
 - [ ] Importing
-- [ ] Photographs: WebP
+- [ ] Photographs: AVIF and WebP
+- [ ] Loading
 - [ ] Other formats
 - [ ] Scope
 

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

@@ -8,15 +8,35 @@ consumed by document metadata or manifests, with a build step that serves the fi
 For the library's favicon set and social sharing image, read `BrandAssets.mdx` through the packaged user-guide route in
 `imf-web-ui`.
 
-## Photographs: WebP
+## Photographs: AVIF and WebP
 
-Convert photographs to WebP before adding them:
+Encode photographs as AVIF and WebP at 800 and 1600px wide. A source narrower than a width skips it, and `srcSet` lists only
+the widths that exist:
 
 ```sh
-magick source.png -resize 2000x -quality 80 -define webp:method=6 src/assets/name.webp
+for w in 800 1600; do
+  magick source.png -resize "${w}x>" -quality 55 src/assets/name-$w.avif
+  magick source.png -resize "${w}x>" -quality 80 -define webp:method=6 src/assets/name-$w.webp
+done
 ```
 
-Keep the long edge at 2000px or less. WebP is supported by the browser floor.
+Render them through `<picture>`: an AVIF `<source>`, then a WebP `<source>`, each with `srcSet` and `sizes`, then an `<img>`
+fallback. The browser takes the first format it supports at the width that fits. Both formats are supported by the browser
+floor.
+
+```tsx
+<picture>
+  <source type="image/avif" srcSet={`${name800Avif} 800w, ${name1600Avif} 1600w`} sizes="(max-width: 40rem) 100vw, 40rem" />
+  <source type="image/webp" srcSet={`${name800Webp} 800w, ${name1600Webp} 1600w`} sizes="(max-width: 40rem) 100vw, 40rem" />
+  <img src={name800Webp} width={800} height={400} alt="…" />
+</picture>
+```
+
+## Loading
+
+Every `<img>` carries `width` and `height` in the source's aspect ratio, so the browser reserves its space before it loads.
+An image below the fold gets `loading="lazy"` and `decoding="async"`. The one image that is the page's largest paint gets
+`fetchpriority="high"` and loads eagerly.
 
 ## Other formats
 

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

@@ -53,3 +53,13 @@ Keep a component's stylesheet, tests, and local types beside the component. A co
 be a layout or dumb component instead.
 
 A route-local component keeps its stylesheet and tests in the route's `-` folder beside it.
+
+## Semantic elements
+
+Inside `AppShell`, the shell's parts render the landmarks: `AppShell.Header` a `<header>`, `AppShell.Navbar` a `<nav>`,
+`AppShell.Aside` an `<aside>`, `AppShell.Main` the page's one `<main>`, and `AppShell.Footer` a `<footer>`. A page puts its
+content inside those parts.
+
+Custom markup uses the element for its meaning: `<section>` and `<article>` for content groups, `<time dateTime>` for a date,
+`Button` for an action, and the router's `Link` for a destination. A page has one `Typo.H1`, and heading levels descend
+without skipping.