@imfusion/web-ui 0.8.1-dev.9.gda40b9aa → 0.9.0

package/CHANGELOG.md

@@ -1,27 +1,272 @@
 # Changelog
 
-## [Unreleased]
+## `0.9.0`          2026.10.14
+
+### Highlights
+
+#### A reworked AppShell
+
+The navbar runs the full height of the screen on the support background, and Header and Footer start beside it.
+`AppShell.Main` is the one scroll container, with a thin scrollbar, so the header, navbar, and
+aside stay put while the content scrolls. Sections drop their dividers and are set apart by their backgrounds
+([WEBSDK-243](https://imfusion.atlassian.net/browse/WEBSDK-243)).
+
+- `variant="branded"` fills the navbar with the primary color and switches its text to on-color.
+- `AppShell.NavItem` is a navbar link with an icon, a label, and a description, in the navbar's text color.
+- `AppShell.Burger` opens the navbar as a drawer below its breakpoint. The aside opens as a bottom sheet on phones and a side
+  drawer on tablets, and both report through `onOpenChange`.
+- The docked aside has a drag handle that resizes it; a double-click or Home resets it. `resizable`, `onWidthChange`, and
+  `resizeLabel` configure it.
+- `AppShell.Root` is an inline-size container. The navbar, the aside, and Main size against it, and Main keeps at least 45%
+  of the shell.
+
+![Resizing from desktop to phone: the shell reflows smoothly, and the navbar opens as a drawer](docs/assets/changelog/0.9.0-appshell-resize.mp4)
+![Desktop: the navbar runs the full height, and Main scrolls between the fixed sections](docs/assets/changelog/0.9.0-appshell-desktop.webp)
+![Branded navbar filled with the primary color](docs/assets/changelog/0.9.0-appshell-branded.webp)
+![Dark color scheme](docs/assets/changelog/0.9.0-appshell-dark.webp)
+![Phone: the navbar opens as a drawer](docs/assets/changelog/0.9.0-appshell-phone.webp)
+![Phone: the aside opens as a bottom sheet](docs/assets/changelog/0.9.0-appshell-phone-sheet.webp)
+
+#### Medical imaging icons
+
+`@imfusion/web-ui/icons` has 65 Medical Imaging icons from the ImFusion design team, such as `ToolBrush`, `ToolWindowLevel`,
+and `DefineRoiAction`. Every icon now has square corners, line caps, and joins to match them; letters, digits, stars, and
+badges keep Iconoir's round shapes. The package generates its icons from Iconoir's SVG source, so `iconoir-react` is no longer
+a dependency, and `strokeWidth` reaches every part of an icon, circles and rectangles included
+([WEBSDK-267](https://imfusion.atlassian.net/browse/WEBSDK-267)).
+
+The Iconography catalog filters by origin, `iconoir` or `imfusion`, and gives every icon its own page with a shareable link
+and an SVG download. `imf-web-ui-update` proposes catalog icons for project-local icons they now cover.
+
+#### Built with Vite+
+
+Web UI builds, tests, lints, and formats with [Vite+](https://viteplus.dev/), a single `vp` toolchain over Vite, Vitest,
+Oxlint, and Oxfmt. Oxlint and Oxfmt replace ESLint and Prettier, so their config files are gone: one `vite.config.ts`
+holds the build, lint, format, and staged-check settings, and only the test projects keep their own `vitest.config.ts`.
+The lint check drops from about 9 seconds to 1, and the format check from 2 seconds to half a second. The pre-commit
+hook checks the staged state, every generated file included, and never rewrites anything.
+
+`imf-web-ui-conventions` recommends the same setup for ImFusion frontends, so `imf-web-ui-audit` reports a project that still
+runs Vite, Vitest, ESLint, and Prettier as separate tools. `vp migrate --no-hooks` moves one over.
+
+#### Skills that fit the person
+
+On the first run, the agent asks a few short questions, one at a time: your name, your technical background, how much you
+have built for the web, how comfortable you are with npm and the terminal, how much explanation you want, and how you like to work.
+You can decline any question, and you see the result before anything is saved.
+
+The answers go to `~/.config/imfusion/web-ui/consumer-profile.md`, outside the project. Every skill you run reads that file.
+Someone new to npm gets a plain sentence before each command and a short gloss for a term like lockfile; a seasoned developer
+gets the short version. You can ask for a pause after each step or after each finished piece, and the approvals the
+workflows already ask for stay as they are. Say "change my profile" to answer again.
+
+#### New and updated components
+
+- `Avatar` is new. It shows a person's photo, their initials, or a person glyph, in three sizes and an on-color context.
+
+  ![Avatar sizes, light](docs/assets/changelog/0.9.0-avatar-light.webp)
+  ![Avatar sizes, dark](docs/assets/changelog/0.9.0-avatar-dark.webp)
+
+- `AccountCard` is new. It links to the signed-in person's account, with an action such as Log out in its top row, and
+  `AccountCard.Group` lists several cards with the current one marked. `splitEmail` and `initialsFromEmail` fill an
+  `AccountCard` or `Avatar` before the person's name is known.
+
+  ![AccountCard group, light](docs/assets/changelog/0.9.0-account-card-light.webp)
+  ![AccountCard group, dark](docs/assets/changelog/0.9.0-account-card-dark.webp)
+
+- `Skeleton` is new. It holds the place of loading data, one text line or a sized block at a time.
+
+  ![Skeleton, light](docs/assets/changelog/0.9.0-skeleton-light.webp)
+  ![Skeleton, dark](docs/assets/changelog/0.9.0-skeleton-dark.webp)
+
+- `Meter` is new. It shows a measured amount within a range, such as seats in use, as a read-only bar
+  ([WEBSDK-250](https://imfusion.atlassian.net/browse/WEBSDK-250)).
+
+  ![Meter, light](docs/assets/changelog/0.9.0-meter-light.webp)
+  ![Meter, dark](docs/assets/changelog/0.9.0-meter-dark.webp)
+
+- `IconButton` is new. It is a square `Button` with a single icon, named by its `label`.
+
+  ![IconButton variants and sizes, light](docs/assets/changelog/0.9.0-icon-button-light.webp)
+  ![IconButton variants and sizes, dark](docs/assets/changelog/0.9.0-icon-button-dark.webp)
+
+- `Kbd` is new. It shows a keyboard key as a keycap, alone, as a combination such as `Ctrl Z`, or with a `Keyboard` glyph
+  in running text. `@imfusion/web-ui/icons` adds that `Keyboard` icon.
+
+  ![Kbd keys in running text, light](docs/assets/changelog/0.9.0-kbd-light.webp)
+  ![Kbd keys in running text, dark](docs/assets/changelog/0.9.0-kbd-dark.webp)
+
+- `Button`, `IconButton`, and `Toggle` take a `shortcut` prop that shows the activating key in their top corner and sets
+  `aria-keyshortcuts`. The app binds the key, for example with TanStack Hotkeys, which `imf-web-ui-conventions` now
+  recommends.
+
+  ![Pressing P, E, D, and S drives a toolbar through its shortcut hints](docs/assets/changelog/0.9.0-shortcut-hotkeys.mp4)
+  ![Shortcut hints on a ToggleGroup and a Button, light](docs/assets/changelog/0.9.0-shortcut-light.webp)
+  ![Shortcut hints on a ToggleGroup and a Button, dark](docs/assets/changelog/0.9.0-shortcut-dark.webp)
+
+- `FrameSelection` is new, from `@imfusion/web-ui/integrations/frame-selection`. It steps through the frames of ImFusion Web
+  SDK image sets with a position slider and a current-of-total readout.
+
+  ![FrameSelection, light](docs/assets/changelog/0.9.0-frame-selection-light.webp)
+  ![FrameSelection, dark](docs/assets/changelog/0.9.0-frame-selection-dark.webp)
+
+- `Slider.Root` has `variant="position"`, a scrollbar-like trough and thumb for picking one position in a range.
+
+  ![Slider position variant, light](docs/assets/changelog/0.9.0-slider-position-light.webp)
+  ![Slider position variant, dark](docs/assets/changelog/0.9.0-slider-position-dark.webp)
+
+- `Card.Status` marks a card's outcome with a tinted column or band and the matching `Callout` glyph.
+
+  ![Card statuses, light](docs/assets/changelog/0.9.0-card-status-light.webp)
+  ![Card statuses, dark](docs/assets/changelog/0.9.0-card-status-dark.webp)
+
+- `Table.RowLink` links a row to its detail page from inside a cell and takes `render` for router links.
+
+  ![Table with row links, light](docs/assets/changelog/0.9.0-table-row-link-light.webp)
+  ![Table with row links, dark](docs/assets/changelog/0.9.0-table-row-link-dark.webp)
+
+- `Typo.Eyebrow` is new. It sets a short mono label above a heading, such as a study name over a page title.
+
+  ![Typo.Eyebrow over a page heading and a card title, light](docs/assets/changelog/0.9.0-typo-eyebrow-light.webp)
+  ![Typo.Eyebrow over a page heading and a card title, dark](docs/assets/changelog/0.9.0-typo-eyebrow-dark.webp)
+
+- `Typo` body members take a `weight` of `regular`, `medium`, or `strong`, for short text on cards that reads thin at the
+  regular weight.
+
+  ![Typo weights, light](docs/assets/changelog/0.9.0-typo-weight-light.webp)
+  ![Typo weights, dark](docs/assets/changelog/0.9.0-typo-weight-dark.webp)
+
+- `Button` centers its icons and label when a container stretches it; `justify="spread"` pins the icons to the edges.
+
+  ![Button justify, light](docs/assets/changelog/0.9.0-button-justify-light.webp)
+  ![Button justify, dark](docs/assets/changelog/0.9.0-button-justify-dark.webp)
+
+#### Important fixes
+
+- Screen readers announce `Field.Error` when its message appears.
+- `WebUIProvider` and the components under it render on React 18.
+- `data-imf-ui-color-scheme` on a nested element switches the semantic colors for that subtree.
+- The `@imfusion/sdk` and `@imfusion/sdk-react` peers accept any version, SDK dev builds included.
+
+#### Migrating from 0.8
+
+Web UI needs Safari 17.5, Chrome 123, or Firefox 120. Older browsers show no semantic colors.
+
+The document no longer scrolls inside an `AppShell`. Move window scroll listeners onto `AppShell.Main`:
+
+```diff
+- window.addEventListener("scroll", onScroll);
+- <AppShell.Main>…</AppShell.Main>
++ <AppShell.Main onScroll={onScroll}>…</AppShell.Main>
+```
+
+Scroll restoration and `scrollTo` take Main's element through a `ref`:
+
+```diff
+- window.scrollTo({ top: 0 });
++ mainRef.current?.scrollTo({ top: 0 });
++ <AppShell.Main ref={mainRef}>…</AppShell.Main>
+```
+
+AppShell sections draw no dividers. Delete overrides of the border properties, which no longer apply:
+
+```diff
+- --imf-ui-appshell-border-color: var(--imf-ui-color-bg-brand);
+- --imf-ui-appshell-border-width: var(--imf-ui-border-size-2);
+```
+
+### Breaking
+
+- **Breaking:** The library supports Safari 17.5, Chrome 123, and Firefox 120 or newer. — Nikolaus Brunner <brunner@imfusion.com>
+  - The stylesheet ships native `light-dark()`; older browsers get no semantic colors.
+  - The JavaScript build targets the same versions.
+- **Breaking:** AppShell sections draw no dividers, and the `--imf-ui-appshell-border-color`, `--imf-ui-appshell-border-width`, and `--imf-ui-appshell-border-style` properties are removed. ([WEBSDK-243](https://imfusion.atlassian.net/browse/WEBSDK-243)) — Nikolaus Brunner <brunner@imfusion.com>
+- **Breaking:** `AppShell.Main` is the scroll container and the document does not scroll; window scroll listeners, scroll restoration, and `scrollTo` target `AppShell.Main`. ([WEBSDK-243](https://imfusion.atlassian.net/browse/WEBSDK-243)) — Nikolaus Brunner <brunner@imfusion.com>
 
 ### Added
 
-- Components — Nikolaus Brunner <brunner@imfusion.com>
-  - `Avatar` shows a person's photo, their initials, or a person glyph, in three sizes and an on-color context.
-  - `AccountCard` links to the signed-in person's account: a large title over a quiet subtitle, then the organization and a
-    mono role under a rule, with an action such as Log out in its top row. Emails wrap at the `@` and at dots, and
-    `AccountCard.Group` lists several cards with the current one marked.
+- Agent skills — Nikolaus Brunner <brunner@imfusion.com>
+  - `web-ui-dev-user-profile` keeps a contributor's profile in `dev-profile.md` beside the consumer one;
+    `web-ui-dev-start` and `web-ui-dev-getting-started` read it before any other step.
+  - `web-ui-dev-new-integration` builds a component around a package only some apps install. It runs
+    `web-ui-dev-new-component` with the integration contract, which `docs/component-definition.md` now spells out.
+  - `web-ui-dev-design-system-sync` builds the design system and publishes it to its Claude Design System artifact, with
+    resolved light and dark tokens, a live preview per component, the design language and a cover
+    ([CP-202](https://imfusion.atlassian.net/browse/CP-202)).
+  - `web-ui-dev-new-icon` adds custom icons from an SVG, a Figma link, a Claude Design project, or a description. It checks the icon catalog
+    first, and codegen validates the SVGs in `src/icons/svg/` and exports them beside the Iconoir set ([WEBSDK-267](https://imfusion.atlassian.net/browse/WEBSDK-267)).
+  - `imf-web-ui-conventions` recommends TanStack Hotkeys for keyboard shortcuts, and its tooling map names each tool's
+    documentation source: `npx @tanstack/cli` with the library id for TanStack, the official site for the rest.
+- AppShell ([WEBSDK-243](https://imfusion.atlassian.net/browse/WEBSDK-243)) — Nikolaus Brunner <brunner@imfusion.com>
+  - `--imf-ui-appshell-aside-min-width` (`max(20rem, 20cqi)`) is the narrowest the docked aside gets, dragged or not.
+  - `--imf-ui-appshell-main-min-width` (`max(24rem, 45cqi)`) caps the docked aside so Main keeps at least 45% of the shell.
+  - `--imf-ui-appshell-main-max-width` caps Main's content at `100rem` on wide screens, aligned to the start.
+  - `--imf-ui-appshell-navbar-padding` sets one gutter for the navbar's sections. Nav items and an `AccountCard` widen
+    their surface past it, so the logo, icons, and avatar share one edge, and the first section is a header-height row.
+- Storybook — Nikolaus Brunner <brunner@imfusion.com>
+  - The toolbar has Full HD, QHD, and Ultrawide viewports for previews past `xl`.
+  - The floating token button is hidden by default; `parameters.tokenDrawer.show` shows it for a story, and a toolbar toggle overrides either way.
+  - Sidebar labels stay in the sidebar text color when a story has test warnings or errors; the status icon carries the state.
+  - `All` matrices and stories with a fixed render hide the controls panel; stories that log actions keep it without the Controls tab.
 
 ### Changed
 
+- Icons ([WEBSDK-267](https://imfusion.atlassian.net/browse/WEBSDK-267)) — Nikolaus Brunner <brunner@imfusion.com>
+  - Every record in the icon catalog names its `origin`, `iconoir` or `imfusion`, and its source `file`. While no category
+    filter is set, each Iconography tile names the icon's category.
+- Components — Nikolaus Brunner <brunner@imfusion.com>
+  - Parts that render a plain element, such as `AppShell.Main`, `Stack`, and `Card.Root`, accept a `ref`.
+  - `Typo.Link` sets its text in the strong weight, so a link stands out from body text of the same color.
+- Documentation — Nikolaus Brunner <brunner@imfusion.com>
+  - The `CodeHighlight` install section names TanStack Highlight 0.1.x and the 0.1.0 build it is tested against.
+  - The consumer agent tooling diagram groups the skills you run in one lane, so the router and the profile each reach them
+    with a single edge.
 - Agent skills — Nikolaus Brunner <brunner@imfusion.com>
   - `imf-web-ui-conventions` declares named functions, local component helpers included, with `function`, and keeps
     inline callbacks as arrows.
   - `imf-web-ui-conventions` loads route data with `queryClient.query({ ...options, staleTime: "static" })` in place of the
     deprecated `ensureQueryData`.
+  - `imf-web-ui-update` opens with the route and its decision points, and names the optional `imf-web-ui-audit full` in
+    the report and its closing offer.
+  - `web-ui-dev-teardown-worktree merge` rebases onto the fetched `origin` base, runs `verify:full`, fast-forwards, and
+    pushes; it never creates a merge commit. `web-ui-dev-commit` routes landing a worktree branch there.
+  - `web-ui-dev-changelog` gives every new component, and every visibly changed one, a light and a dark screenshot of its
+    story in the release highlights.
+  - `imf-web-ui-update` checks for a running npm process by PID and working directory, and shows a command line only for
+    a process in the package being updated.
+  - `web-ui-dev-eval-consumer-skills` records every run's benchmark, and skips the record only when the user asks for it.
+  - `web-ui-dev-claude-design-sync-legacy` uploads to the standalone Claude Design site until it closes on 2026-12-14
+    ([CP-202](https://imfusion.atlassian.net/browse/CP-202)).
+  - `web-ui install` formats the files it writes, skill version markers and hook settings, with the project's `vp fmt` when
+    the project has it, and with its Prettier otherwise.
+  - `imf-web-ui-audit` searches the frontend for `TODO`, `FIXME`, `HACK`, and similar markers. A marker that admits a
+    convention gap backs that topic's finding, and the rest go under `Suggestions`.
+- CI and verification — Nikolaus Brunner <brunner@imfusion.com>
+  - `verify:generated` checks every committed `*.gen.*` file against the sources that produce it. It runs in the pre-commit hook, in `verify:full`, and as a TeamCity step.
+  - The pre-push hook runs `verify:fast`, the `verify:full` suite without the builds and tests.
+- AppShell ([WEBSDK-243](https://imfusion.atlassian.net/browse/WEBSDK-243)) — Nikolaus Brunner <brunner@imfusion.com>
+  - Below their breakpoints the navbar opens as a drawer from the inline end and the aside as a bottom sheet on phones or a side drawer on tablets.
+  - `AppShell.Root` is an inline-size container; the navbar is `clamp(16rem, 18cqi, 20rem)` and the aside `clamp(20rem, 30cqi, 40rem)` wide.
+  - Main and aside padding grow with the shell, from `1.25rem` up to `3rem` and `2rem`, and the header is `4rem` tall.
 
 ### Fixed
 
 - Components — Nikolaus Brunner <brunner@imfusion.com>
-  - Screen readers announce `Field.Error` when its message appears; it has `role="alert"` by default.
+  - On-color `ghost` and `outline` Buttons invert to a white fill on hover instead of near-black.
+  - `Button`'s `startIcon` sits level with the label.
+- Peer dependencies — Nikolaus Brunner <brunner@imfusion.com>
+  - The `FrameSelection` and `ImageDisplayOptions` install sections name SDK 1.x and the 1.0.0 build they are tested against.
+- CI and verification — Nikolaus Brunner <brunner@imfusion.com>
+  - The dev skill eval report scores the dev scenarios and lists only the `web-ui-dev-*` skills.
+  - `verify:icons` fails when a one-icon import bundles any other icon ([WEBSDK-267](https://imfusion.atlassian.net/browse/WEBSDK-267)).
+  - The dev skill eval builds its workspace from a checkout without uncommitted changes.
+  - The repository's Chrome DevTools MCP server runs with an isolated profile, so several agent sessions can drive Chrome
+    at once.
+  - The Iconography interaction test covers the catalog's core behavior and finishes well within the CI timeout.
+- Storybook — Nikolaus Brunner <brunner@imfusion.com>
+  - The Iconography catalog shows solid icons as drawn, and its Copy JSX snippet adds no fill or stroke override.
+  - Long icon names in the Iconography catalog break between words instead of being cut off.
+  - Button's controls list `variant`, `size`, and its other variant props before the inherited Base UI props.
 
 ---
 

package/README.md

@@ -65,28 +65,39 @@ npm install
 npm run git:config
 ```
 
-`git:config` sets the tracked hooks path, enables rebase pulls, and requires fast-forward merges. The
+`git:config` sets the tracked hooks path, enables rebase pulls, and requires fast-forward merges. Every checkout and worktree
+needs its own `node_modules`; the hooks stop with "run npm ci" without one.
+
+The pre-commit hook runs `vp staged` against the staged state: it lints and format-checks the repository, checks that every
+generated `*.gen.*` file matches its sources (`npm run verify:generated`), and runs the pinned-dependency, Knip, type-check,
+and TeamCity DSL checks when their inputs are staged. It never rewrites or stages files; on failure it restores the working
+tree and prints what to fix. The pre-push hook runs `npm run verify:fast`, the CI suite without the builds and tests; the
+agent commit and landing skills run `npm run verify:full`. The
 [`web-ui-dev-getting-started`](./.agents/skills/web-ui-dev-getting-started/SKILL.md) skill can route a first task.
 
 The main development skills are:
 
-| Skill                              | Use it for                                       |
-| ---------------------------------- | ------------------------------------------------ |
-| `/web-ui-dev-getting-started`      | Route a first task based on experience and goal. |
-| `/web-ui-dev-start`                | Establish task context and working location.     |
-| `/web-ui-dev-new-component`        | Add a primitive.                                 |
-| `/web-ui-dev-update-component`     | Change an existing primitive.                    |
-| `/web-ui-dev-design-component`     | Apply the ImFusion brand to a component.         |
-| `/web-ui-dev-story`                | Author a Storybook story.                        |
-| `/web-ui-dev-commit`               | Verify and commit a change.                      |
-| `/web-ui-dev-changelog`            | Write the changelog entry or curate a release.   |
-| `/web-ui-dev-release`              | Prepare and ship a release.                      |
-| `/web-ui-dev-audit-docs`           | Check docs for drift before a commit.            |
-| `/web-ui-dev-llm-framework`        | Keep the LLM framework diagrams in sync.         |
-| `/web-ui-dev-eval-consumer-skills` | Evaluate the shipped consumer skills.            |
-| `/web-ui-dev-claude-design-sync`   | Update the design system in Claude Design.       |
-| `/web-ui-dev-teardown-worktree`    | Remove a finished worktree.                      |
-| `/web-ui-dev-mcp`                  | Recover one optional MCP capability.             |
+| Skill                                   | Use it for                                     |
+| --------------------------------------- | ---------------------------------------------- |
+| `/web-ui-dev-getting-started`           | Route a first task based on profile and goal.  |
+| `/web-ui-dev-start`                     | Establish task context and working location.   |
+| `/web-ui-dev-new-component`             | Add a primitive.                               |
+| `/web-ui-dev-new-integration`           | Add an integration with an optional peer.      |
+| `/web-ui-dev-new-icon`                  | Add custom icons from a design source.         |
+| `/web-ui-dev-update-component`          | Change an existing primitive.                  |
+| `/web-ui-dev-design-component`          | Apply the ImFusion brand to a component.       |
+| `/web-ui-dev-story`                     | Author a Storybook story.                      |
+| `/web-ui-dev-commit`                    | Verify and commit a change.                    |
+| `/web-ui-dev-changelog`                 | Write the changelog entry or curate a release. |
+| `/web-ui-dev-record-clip`               | Record a story as a video or looping clip.     |
+| `/web-ui-dev-release`                   | Prepare and ship a release.                    |
+| `/web-ui-dev-audit-docs`                | Check docs for drift before a commit.          |
+| `/web-ui-dev-llm-framework`             | Keep the LLM framework diagrams in sync.       |
+| `/web-ui-dev-eval-consumer-skills`      | Evaluate the shipped consumer skills.          |
+| `/web-ui-dev-design-system-sync`        | Publish the design system to Claude.           |
+| `/web-ui-dev-claude-design-sync-legacy` | Upload to the standalone Claude Design site.   |
+| `/web-ui-dev-teardown-worktree`         | Remove a finished worktree.                    |
+| `/web-ui-dev-mcp`                       | Recover one optional MCP capability.           |
 
 ### Work on it from a consumer app
 

package/THIRD_PARTY_NOTICES.md

@@ -32,3 +32,37 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 ```
+
+## Iconoir
+
+- Project: [Iconoir](https://github.com/iconoir-icons/iconoir)
+- License: [MIT](https://github.com/iconoir-icons/iconoir/blob/main/LICENSE)
+
+The icons exported from `@imfusion/web-ui/icons` are generated from Iconoir SVG source, with modified corners, line caps, and
+line joins.
+
+The following license text applies only to those Iconoir-derived icons and is reproduced verbatim:
+
+```text
+MIT License
+
+Copyright (c) 2021 Luca Burgio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```

package/dist/{code-D2lwxHgd.js → code-BYkr5k55.js}

@@ -1,6 +1,6 @@
-import { t as e } from "./chunk-DmhlhrBa.js";
-import { t } from "./meta-j-7HGrWv.js";
-import { Ma as n, Xo as r, r as i } from "./icons-CaGCCwG-.js";
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { Xo as t, ja as n, pM as r } from "./icons-BsK_o-Cb.js";
+import { t as i } from "./meta-V_KyLeGn.js";
 import { cx as a } from "class-variance-authority";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 import { useCallback as l, useEffect as u, useRef as d, useState as f } from "react";
@@ -32,8 +32,8 @@ var g = {
 	Inline: () => v,
 	InlineLink: () => y
 });
-function v({ copyable: e = !1, children: t, render: a, ...l }) {
-	let { copied: u, copy: f } = h(), _ = d(null), v = u ? n : r;
+function v({ copyable: e = !1, children: i, render: a, ...l }) {
+	let { copied: u, copy: f } = h(), _ = d(null), v = u ? n : t;
 	return m({
 		defaultTagName: "code",
 		render: a,
@@ -43,7 +43,7 @@ function v({ copyable: e = !1, children: t, render: a, ...l }) {
 				children: /* @__PURE__ */ c(o, { children: [
 					/* @__PURE__ */ s("span", {
 						ref: _,
-						children: t
+						children: i
 					}),
 					e && /* @__PURE__ */ s("span", { className: g.separator }),
 					e && /* @__PURE__ */ s("button", {
@@ -52,7 +52,7 @@ function v({ copyable: e = !1, children: t, render: a, ...l }) {
 						"data-copied": u || void 0,
 						"aria-label": u ? "Copied" : "Copy",
 						onClick: () => f(_.current?.textContent ?? ""),
-						children: /* @__PURE__ */ s(i, {
+						children: /* @__PURE__ */ s(r, {
 							glyph: v,
 							size: 12,
 							strokeWidth: 2,
@@ -85,15 +85,15 @@ function y({ kind: e = "external", ...t }) {
 	});
 }
 y.displayName = "Code.InlineLink";
-function b({ className: e, language: t, hideCopy: o = !1, children: l, ...u }) {
-	let { copied: f, copy: p } = h(), m = d(null), _ = f ? n : r;
+function b({ className: e, language: i, hideCopy: o = !1, children: l, ...u }) {
+	let { copied: f, copy: p } = h(), m = d(null), _ = f ? n : t;
 	return /* @__PURE__ */ c("div", {
 		"data-imf-ui-component": "Code.Block",
 		className: a(g.block, e),
 		children: [
-			t != null && /* @__PURE__ */ s("span", {
+			i != null && /* @__PURE__ */ s("span", {
 				className: g.language,
-				children: t
+				children: i
 			}),
 			!o && /* @__PURE__ */ s("button", {
 				type: "button",
@@ -101,7 +101,7 @@ function b({ className: e, language: t, hideCopy: o = !1, children: l, ...u }) {
 				"data-copied": f || void 0,
 				"aria-label": f ? "Copied" : "Copy",
 				onClick: () => p(m.current?.textContent ?? ""),
-				children: /* @__PURE__ */ s(i, {
+				children: /* @__PURE__ */ s(r, {
 					glyph: _,
 					size: 12,
 					strokeWidth: 2,
@@ -124,7 +124,7 @@ b.displayName = "Code.Block";
 //#region src/components/code/code.meta.ts
 var x = {
 	name: "Code",
-	category: t.display,
+	category: i.display,
 	status: "stable",
 	namespace: !0,
 	description: "Displays source code inline or in a block, with optional language labels and copying. Also called a code snippet or code block.",

package/dist/codegen/gen-icons.d.ts

@@ -1,3 +1,13 @@
+import { IconNode } from '../icons/create-icon';
+export type IconOrigin = "iconoir" | "imfusion";
+export type IconSource = {
+    name: string;
+    style: "regular" | "solid";
+    origin: IconOrigin;
+    /** Path of the source SVG inside its icon set, such as `regular/tool-3d-rotate.svg`. */
+    file: string;
+    nodes: IconNode[];
+};
 export type IconMetadata = {
     filename: string;
     category: string;
@@ -8,6 +18,8 @@ export type IconCatalogRecord = {
     category: string;
     tags: string[];
     style: "regular" | "solid";
+    origin: IconOrigin;
+    file: string;
 };
 type IconMetadataSource = {
     commit: string;
@@ -15,10 +27,23 @@ type IconMetadataSource = {
 };
 export declare function parseIconMetadata(csv: string): IconMetadata[];
 export declare function validateIconMetadataSource(source: string): IconMetadataSource;
-export declare function buildIconCatalog(iconNames: readonly string[], metadata: readonly IconMetadata[]): IconCatalogRecord[];
-export declare function renderIconAliases(iconNames: readonly string[]): string;
+export declare function buildIconCatalog(icons: readonly Pick<IconSource, "name" | "origin" | "file">[], metadata: readonly IconMetadata[]): IconCatalogRecord[];
+export declare function parseIconSvg(source: string): IconNode[];
+export declare function iconName(filename: string, style: IconSource["style"]): string;
+/** Problems that keep an SVG from following the Web UI icon contract; empty when it does. */
+export declare function validateIconSvg(source: string): string[];
+export declare function readIconSet(directory: string, origin: IconOrigin): IconSource[];
+export declare function mergeIconSets(iconoir: readonly IconSource[], custom: readonly IconSource[]): IconSource[];
+export declare function iconoirDirectory(): string;
+export declare function parseSharpenExclusions(source: string, icons: readonly IconSource[]): Set<string>;
+export declare function sharpenIconSet(icons: readonly IconSource[], exclusions: ReadonlySet<string>): {
+    icons: IconSource[];
+    corners: number;
+    changed: number;
+};
+export declare function renderIconModule(icons: readonly IconSource[]): string;
 export declare function renderIconCatalogJson(records: readonly IconCatalogRecord[]): string;
 export declare function renderIconCatalog(records: readonly IconCatalogRecord[]): string;
-export declare function writeIconAliases(): void;
-export declare function writeIconCatalog(): void;
+export declare function writeIconModule(icons: readonly IconSource[]): void;
+export declare function writeIconCatalog(icons: readonly IconSource[]): void;
 export {};

package/dist/codegen/sharpen-icon.d.ts

@@ -0,0 +1,11 @@
+import { IconNode } from '../icons/create-icon';
+/** Replaces curves that round a corner or a line end between straight edges with the corner itself. */
+export declare function sharpenPath(d: string, maxLeg: number): {
+    d: string;
+    corners: number;
+};
+/** Squares the rounded corners, line caps, and line joins of an icon. */
+export declare function sharpenIcon(nodes: readonly IconNode[], maxLeg: number): {
+    nodes: IconNode[];
+    corners: number;
+};

package/dist/components/account-card/account-card.d.ts

@@ -2,9 +2,9 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 import * as AvatarParts from '../avatar/avatar';
 declare const root: (props?: ({
-    context?: "default" | "oncolor" | null | undefined;
+    context?: "oncolor" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type RootProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof root>;
+type RootProps = React.ComponentProps<"div"> & VariantProps<typeof root>;
 /**
  * AccountCard.Root — the signed-in person's card: `AccountCard.Link` and, in its top row, `AccountCard.Action`. The
  * action sits beside the link, not inside it, since a link cannot contain a button.
@@ -24,7 +24,7 @@ declare function Link({ render, ...props }: useRender.ComponentProps<"a">): impo
 declare namespace Link {
     var displayName: string;
 }
-type AvatarProps = React.HTMLAttributes<HTMLSpanElement> & {
+type AvatarProps = React.ComponentProps<"span"> & {
     /** The person's photo. Until it loads, and when it fails, the initials or the person glyph show instead. */
     src?: string;
     /** The avatar size. */
@@ -42,7 +42,7 @@ declare namespace Avatar {
  * AccountCard.Title — the account's name, or the email's local part until a name exists. Set large; text wraps before
  * an `@` and after a dot.
  */
-declare function Title({ children, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+declare function Title({ children, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
 declare namespace Title {
     var displayName: string;
 }
@@ -50,17 +50,17 @@ declare namespace Title {
  * AccountCard.Subtitle — the quiet line under the title: the email's domain, or the whole email once the title is a
  * name. Text wraps before an `@` and after a dot.
  */
-declare function Subtitle({ children, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+declare function Subtitle({ children, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
 declare namespace Subtitle {
     var displayName: string;
 }
 /** AccountCard.Description — the organization, under a rule at the foot of the card. */
-declare function Description(props: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+declare function Description(props: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
 declare namespace Description {
     var displayName: string;
 }
 /** AccountCard.Role — a mono uppercase label beside the description, such as the person's role. */
-declare function Role(props: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+declare function Role(props: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
 declare namespace Role {
     var displayName: string;
 }
@@ -68,7 +68,7 @@ declare namespace Role {
  * AccountCard.Action — a slot in the card's top row, beside the link, such as a ghost icon `Button` that logs out. The
  * button carries its own `aria-label` and its own `context`.
  */
-declare function Action(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function Action(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare namespace Action {
     var displayName: string;
 }
@@ -76,7 +76,7 @@ declare namespace Action {
  * AccountCard.Group — a list of cards, such as accounts to switch between. Inside it a link with `aria-current="page"`
  * shows as current; a standalone card is always the signed-in account and shows no current state.
  */
-declare function Group(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function Group(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare namespace Group {
     var displayName: string;
 }