@imfusion/web-ui 0.11.1-dev.5.g8a97f4f6 → 0.11.1-dev.53.g43897e72

package/src/llms/icon-catalog.gen.json

@@ -7571,6 +7571,30 @@
     "origin": "iconoir",
     "file": "regular/laptop-warning.svg"
   },
+  {
+    "name": "LayoutAuto",
+    "category": "Layout",
+    "tags": ["layout", "auto", "masonry", "viewports", "tiles", "grid"],
+    "style": "regular",
+    "origin": "imfusion",
+    "file": "regular/layout-auto.svg"
+  },
+  {
+    "name": "LayoutFocusPlusRows",
+    "category": "Layout",
+    "tags": ["layout", "focus", "rows", "main viewport", "viewports", "split"],
+    "style": "regular",
+    "origin": "imfusion",
+    "file": "regular/layout-focus-plus-rows.svg"
+  },
+  {
+    "name": "LayoutFocusPlusStack",
+    "category": "Layout",
+    "tags": ["layout", "focus", "stack", "main viewport", "sidebar", "viewports"],
+    "style": "regular",
+    "origin": "imfusion",
+    "file": "regular/layout-focus-plus-stack.svg"
+  },
   {
     "name": "LayoutLeft",
     "category": "Layout",
@@ -7587,6 +7611,14 @@
     "origin": "iconoir",
     "file": "regular/layout-right.svg"
   },
+  {
+    "name": "LayoutRows",
+    "category": "Layout",
+    "tags": ["layout", "rows", "viewports", "grid", "2x2", "tiles"],
+    "style": "regular",
+    "origin": "imfusion",
+    "file": "regular/layout-rows.svg"
+  },
   {
     "name": "Leaderboard",
     "category": "Activities",

package/src/llms/llms.gen.txt

@@ -19,6 +19,12 @@ The signed-in person's account row: the avatar in a lead column, the name or ema
 Application layout shell for a header, sidebars, footer, and scrolling main area. Also called an app layout or dashboard shell; sizing is CSS-driven and sidebars can become sliding panels on small screens.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .app-shell (jq: jq '.app-shell' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 
+## Autocomplete
+- category: Inputs, status: experimental
+Text input that suggests options as you type, keeping free text. Also called a typeahead or search suggestions. Use Combobox when the value must come from the list.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .autocomplete (jq: jq '.autocomplete' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://base-ui.com/react/components/autocomplete.md
+
 ## Avatar
 - category: Display, status: experimental
 Round badge that stands for a person, showing their photo, their initials, or a person glyph. Also called a profile picture or user badge; for a signed-in account row with a name, use AccountCard.
@@ -78,6 +84,12 @@ Show-and-hide region for secondary content such as FAQs, settings, or details. A
 Light, System, and Dark segments that set and remember the page's color scheme. Also called an appearance or theme switch; built on ToggleGroup, which is the choice for any other segmented selection.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .color-scheme-toggle (jq: jq '.color-scheme-toggle' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 
+## Combobox
+- category: Inputs, status: experimental
+Text input with a filterable list of options, for choosing one or several from a long list. Also called a searchable select, typeahead, or multi-select. Use Select for short lists and Autocomplete when free text is allowed.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .combobox (jq: jq '.combobox' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://base-ui.com/react/components/combobox.md
+
 ## CopyButton
 - category: Buttons, status: stable
 Copies a value to the clipboard and briefly shows confirmation. Also called a copy-to-clipboard button; commonly used with Code.Block.
@@ -107,6 +119,11 @@ Semantic group for related form controls with a shared legend. Also called a for
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .fieldset (jq: jq '.fieldset' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 - further reading (usage/anatomy, not props): https://base-ui.com/react/components/fieldset.md
 
+## FileDropZone
+- category: Inputs, status: experimental
+Drop zone with picker buttons for files or whole folders, reporting accepted and rejected files. Also called a file upload area or dropzone. For a single native file control inside a form, use Input.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .file-drop-zone (jq: jq '.file-drop-zone' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+
 ## FrameSelection
 - category: Inputs, status: experimental
 Frame or slice picker bound to the focused frame of ImFusion image sets, with a focus and count readout. For a position picker not tied to the SDK, use Slider with variant="position".
@@ -140,6 +157,12 @@ Single-line text input for form data entry. Also called a text field; it support
 Shows a keyboard key or shortcut, such as the letter that activates a button. Also called a key hint; Button and Toggle render it through their `shortcut` prop.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .kbd (jq: jq '.kbd' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 
+## LayoutMode
+- category: Inputs, status: experimental
+Picker bound to the ImFusion viewer's layout mode: Auto, Rows, Focus + stack, or Focus + rows, as a compact icon row or a labeled vertical list. Also called a layout or view arrangement switch; for a segmented choice not tied to the SDK, use ToggleGroup.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .layout-mode (jq: jq '.layout-mode' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://docs.imfusion.com/
+
 ## Logo
 - category: Display, status: stable
 Renders a logo from a URL or inline React element with consistent sizing. Also called a wordmark or brand mark.
@@ -169,6 +192,12 @@ Floating panel anchored to a trigger for contextual content, quick forms, or act
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .popover (jq: jq '.popover' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 - further reading (usage/anatomy, not props): https://base-ui.com/react/components/popover.md
 
+## Progress
+- category: Display, status: experimental
+Bar for the completion of a running task, such as an upload or export. Also called a progress bar. Indeterminate when the amount is unknown. Use Meter for a static measure within a range.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .progress (jq: jq '.progress' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://base-ui.com/react/components/progress.md
+
 ## Prose
 - category: Layout, status: experimental
 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.
@@ -229,6 +258,11 @@ Two-state control for an on/off setting that takes effect immediately. Also call
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .switch (jq: jq '.switch' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 - further reading (usage/anatomy, not props): https://base-ui.com/react/components/switch.md
 
+## TabNav
+- category: Display, status: experimental
+Row of links to routes with a bar under the current one, such as the sections of a project. Also called route tabs or link tabs; use Tabs to switch panels on one page.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .tab-nav (jq: jq '.tab-nav' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+
 ## Table
 - category: Display, status: stable
 Presentational table parts for static tabular data. Pair them with a headless table library for sorting, pagination, or selection.
@@ -236,10 +270,16 @@ Presentational table parts for static tabular data. Pair them with a headless ta
 
 ## Tabs
 - category: Display, status: stable
-Switches between related panels within one view. Also called a tab strip or tab bar; it supports horizontal and vertical layouts.
+Switches between related panels within one view. Also called a tab strip or tab bar; it supports horizontal and vertical layouts and a boxed or underline look. Use TabNav for links to routes.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .tabs (jq: jq '.tabs' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 - further reading (usage/anatomy, not props): https://base-ui.com/react/components/tabs.md
 
+## Textarea
+- category: Inputs, status: experimental
+Multi-line text input for longer free text, such as a description or note. Also called a text area; use Input for a single line. It reads validation state from Field.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .textarea (jq: jq '.textarea' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://base-ui.com/react/components/input.md
+
 ## Toast
 - category: Display, status: experimental
 Transient message stack that reports the outcome of a background action without interrupting the page. Use for save confirmations, undo offers, and async progress; attach one to an element for contextual feedback like a copy confirmation. Also called a snackbar, notification, or flash message; for a message that stays inline in the page use Callout instead.
@@ -268,3 +308,9 @@ Hover- or focus-triggered label for brief help about a control or term. Also cal
 - category: Display, status: stable
 Semantic text primitives for display and standard headings, paragraphs, lists, quotes, links, and inline code. The namespace uses native HTML elements and token-based text roles.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .typo (jq: jq '.typo' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+
+## ViewTools
+- category: Inputs, status: experimental
+Toolbar that limits mouse interaction in the ImFusion main 2D and MPR views to pan, zoom, or windowing, with a reset button for the view group. For a segmented control not tied to the SDK, use ToggleGroup.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .view-tools (jq: jq '.view-tools' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://docs.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.

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

@@ -7,6 +7,9 @@ integration seams.
 
 - Do not import Base UI or another implementation package directly, including its stylesheet.
 - If Web UI is missing a component or part, report the gap instead of reaching around it.
+- Use what Web UI already ships before building your own: a component, a part, or a helper such as `initialsFromName`. A
+  native element or local function that duplicates one, such as a `div role="separator"` or a hand-written initials function,
+  is a finding.
 - Import glyphs from `@imfusion/web-ui/icons` and render them with `Icon`.
 
 ## Stand in for a missing component

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

@@ -19,7 +19,8 @@ Use native CSS and Web UI's public seams. The library's CSS Modules and token na
   transition: opacity var(--imf-ui-duration-quick-2) var(--imf-ui-ease-2);
 
   &:focus-visible {
-    outline: var(--imf-ui-border-size-2) solid var(--imf-ui-color-fg-primary);
+    outline: var(--imf-ui-focus-ring-width) solid var(--imf-ui-focus-ring-color);
+    outline-offset: var(--imf-ui-focus-ring-offset);
   }
 
   &[data-disabled] {
@@ -28,6 +29,13 @@ Use native CSS and Web UI's public seams. The library's CSS Modules and token na
 }
 ```
 
+## Focus ring
+
+Web UI parts draw their own focus ring. Your own focusable elements draw the same one from the `--imf-ui-focus-ring-*`
+tokens: `width` and `color` for the outline, and one of two offsets: `offset` outside a standalone control and `offset-inset`
+for items inside a scrolling or tight container, which would clip an outside ring. A surface filled with a saturated color
+sets `--imf-ui-focus-ring-color` to `--imf-ui-color-fg-oncolor` for everything inside it.
+
 ## Build custom UI from tokens
 
 Use names from the shipped token index for colors, type, size, radius, and shadow. A literal beside a tokenized concept is a
@@ -54,6 +62,19 @@ hook, not a state flag.
 }
 ```
 
+Your own components follow the same seam. A container that changes a child sets a custom property; the child reads it with
+its own default as the fallback, so it works with or without the container:
+
+```css
+.panel {
+  --panel-row-gap: var(--imf-ui-size-2);
+}
+
+.row {
+  padding-block: var(--panel-row-gap, var(--imf-ui-size-3));
+}
+```
+
 ## Spacing
 
 Web UI components have no outer margin. The parent sets the distance between its children: `Stack` and `Row` gaps in UI,

package/src/llms/tokens.gen.json

@@ -462,6 +462,24 @@
         "value": "cubic-bezier(0, 0, 0.05, 1)"
       }
     ],
+    "focus": [
+      {
+        "name": "--imf-ui-focus-ring-color",
+        "value": "var(--imf-ui-color-fg-primary)"
+      },
+      {
+        "name": "--imf-ui-focus-ring-offset",
+        "value": "2px"
+      },
+      {
+        "name": "--imf-ui-focus-ring-offset-inset",
+        "value": "calc(var(--imf-ui-focus-ring-width) * -1)"
+      },
+      {
+        "name": "--imf-ui-focus-ring-width",
+        "value": "var(--imf-ui-border-size-2)"
+      }
+    ],
     "font": [
       {
         "name": "--imf-ui-font-family-body",
@@ -955,5 +973,5 @@
       }
     ]
   },
-  "count": 233
+  "count": 237
 }