@imfusion/web-ui 0.10.1-dev.6.gf715361a → 0.10.1-dev.61.g9d1000b8

package/CHANGELOG.md

@@ -2,14 +2,181 @@
 
 ## [Unreleased]
 
+### Highlights
+
+#### Paper Mono is the mono font
+
+[Paper Mono](https://paper.design/mono) replaces CoFo Sans Mono as the default `--imf-ui-font-family-mono`. It is licensed
+under the SIL Open Font License, ships with the package, and covers every weight from 100 to 800, where CoFo had
+only Regular. Mono text sets a little wider than before, so check tight labels in your layouts.
+
+Mono text follows three weights: 600 for titles; 500 for control labels, buttons, tabs, and table headers; 400 for eyebrows,
+metadata, values, and code. `Select`, `Slider`, and `Meter` labels, the `AppShell` nav item label, the `Popover` and
+`Tooltip` triggers, the `Popover` close button, and the `Toast` close and action buttons move to 500. The `Typo` and
+`Popover` eyebrows move to 400, and so does `Code`, which inherited the surrounding weight before: inline code in `Typo.P`
+rendered at 300.
+
+[`CodeHighlight`](src/integrations/code-highlight/code-highlight.mdx) uses the weights as well: keywords, JSX and HTML tags,
+and Markdown headings at 600, functions and types at 500, comments at 300. The
+[Weights](src/integrations/code-highlight/code-highlight.stories.tsx#Weights) story shows every tier in one snippet. A weight
+never changes the character width, so columns stay aligned. CoFo Sans Mono still ships, so setting
+`--imf-ui-font-family-mono` back to it restores the previous face; weights of 600 and up then render as synthesized bold.
+
+![Paper Mono in a highlighted TSX snippet, light](docs/assets/changelog/0.11.0-paper-mono-light.webp)
+![Paper Mono in a highlighted TSX snippet, dark](docs/assets/changelog/0.11.0-paper-mono-dark.webp)
+
+### Breaking
+
+- **Breaking:** `AppShell.Main`, the AppShell aside drawer, and `Drawer.Content` scroll in a `ScrollArea` and pad their
+  content inside it ([WEBSDK-247](https://imfusion.atlassian.net/browse/WEBSDK-247)). — Nikolaus Brunner <brunner@imfusion.com>
+  - `AppShell.Main` stays the scrolling element and pads with `--imf-ui-appshell-padding`; a `padding` set on it adds to
+    that.
+  - `Drawer.Content` pads with `--imf-ui-drawer-content-padding`; a `padding`, `gap`, or grid set on it applies outside the
+    padded layer and does not reach the children.
+  - The aside drawer pads its content inside the scroll area; a `padding` on `AppShell.Aside` in drawer mode adds to it.
+- **Breaking:** The AppShell navbar drawer opens from the inline start instead of the inline end. — Nikolaus Brunner <brunner@imfusion.com>
+  - Consumer CSS that places something against the navbar drawer's right edge moves to its left edge.
+- **Breaking:** `AppShell.Navbar` renders its own logo row and account foot, and stacks its children as nav items with its own spacing. [AppShell](src/components/app-shell/app-shell.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+  - Pass the brand as `logo` and the account card as `account`, and drop the `AppShell.Section`s that held them. Omit `logo` to use the default ImFusion logo; `logo={null}` leaves the row empty.
+- **Breaking:** The current `AppShell.NavItem` has no background surface; its label is underlined and the other items are dimmed. [AppShell](src/components/app-shell/app-shell.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+  - Consumer CSS that styled the item's background or `--navitem-current` moves to `--imf-ui-appshell-navitem-dim` and the underline properties.
+- **Breaking:** `--imf-ui-appshell-padding` runs from 1.25rem to 3rem at `2.75cqi`, and `--imf-ui-appshell-navbar-width` adds one gutter. [AppShell](src/components/app-shell/app-shell.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+  - Pages that tuned their padding against the old values re-check them. Set either property on `AppShell.Root` to restore the old numbers.
+- **Breaking:** The aside pads with `--imf-ui-appshell-padding` on every side instead of `--imf-ui-size-6` above and below. — Nikolaus Brunner <brunner@imfusion.com>
+  - Set `--imf-ui-appshell-aside-padding: var(--imf-ui-size-6) var(--imf-ui-appshell-padding)` to restore the old block padding.
+- **Breaking:** `AccountCard` is a compact row: the avatar in a lead column, the text beside it, and the organization and role stacked under the subtitle without a rule. `AccountCard.Avatar` defaults to `size="sm"`. [Account card](src/components/account-card/account-card.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+  - Pass `size="md"` to keep the larger avatar. Consumer CSS that styled the large title or the foot rule re-checks against the row.
+- **Breaking:** `AccountCard` is no longer a link, and `AccountCard.Link` and `AccountCard.Group` are removed. [Account card](src/components/account-card/account-card.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+  - Move the Link's children straight into `AccountCard.Root`. Wire account navigation to a button in `AccountCard.Action` or a nav item instead of the row.
+  - An account switcher built on `AccountCard.Group` has no replacement yet; keep the old version until one ships.
+- **Breaking:** An `AccountCard` in the `AppShell.Navbar` foot lines up with the nav items and no longer takes the 8px inset. — Nikolaus Brunner <brunner@imfusion.com>
+  - Pass the card as `account`; a card kept in a Section keeps its own padding.
+- **Breaking:** The shell renders the mobile bar itself: the navbar's logo and the toggle for its drawer. [AppShell](src/components/app-shell/app-shell.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+  - Remove `AppShell.Burger` and a logo of your own from your `AppShell.Header`; the Burger is no longer exported, and phones would show two logos.
+- **Breaking:** The header takes the navbar's `variant`: beside a `branded` navbar it fills with the primary color and its text is on-color. [AppShell](src/components/app-shell/app-shell.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+  - Remove a header color set to match the branded navbar. A custom surface still goes in `--imf-ui-appshell-header-bg`, which is unset by default and falls back to the navbar variant's surface.
+- **Breaking:** `AppShell.Header` is a flex row, and it wraps its children in a container that aligns them to the inline end. [AppShell](src/components/app-shell/app-shell.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+  - Give your own row `width: 100%` to span the header.
+- **Breaking:** `npx web-ui install hooks` removes `baseline-staleness.sh`, and the `SessionStart` hook reports installed
+  skills that differ from the package copy in `node_modules` instead. — Nikolaus Brunner <brunner@imfusion.com>
+  - Remove the `.agents/hooks/imf-web-ui/baseline-staleness.sh` line from the project's pre-commit hook before running
+    `install hooks`; a pre-commit that calls the missing script fails every commit.
+  - Keep `.agents/skills/imf-web-ui*` out of the project's formatter, or the reformatted skills read as stale.
+
+### Added
+
+- `--imf-ui-size-backdrop-edge` (`38%`) and `--imf-ui-size-backdrop-band-height` (`30dvh`) are the public backdrop's geometry tokens. The `imf-web-ui-ux` skill describes the handover. — Nikolaus Brunner <brunner@imfusion.com>
+- `ProductLogo` renders the ImFusion Labels, Suite, and SDK product logos on the `Logo` sizes and color variants. The name is solid by default and cut out of the plate with `cutout`. [Product](src/components/logo/product/product.stories.tsx#Default) — Nikolaus Brunner <brunner@imfusion.com>
+- `imf-web-ui-update` proposes and `imf-web-ui-audit` reports aligning the core runtime packages (React, Base UI, Vite+) with the versions Web UI builds with. — Nikolaus Brunner <brunner@imfusion.com>
+- `localWebUILink()` and a `paths` block in `tsconfig.json` let an app run against a symlinked web-ui checkout with one React and one set of types. `imf-web-ui-setup` proposes both and `imf-web-ui-audit` reports a missing one. — Nikolaus Brunner <brunner@imfusion.com>
+- The shell's navigation toggle sets `aria-controls` from the navbar, and reads the `id` the navbar generates. A consumer `id` on the Navbar is what it points at. — Nikolaus Brunner <brunner@imfusion.com>
+- `Separator` takes `tone="minor"` for a neutral line, a quiet break inside a page; the default stays primary. — Nikolaus Brunner <brunner@imfusion.com>
+- `Select.ItemDescription` sets a muted second line under an item's text, such as what a role allows; the trigger shows only the item text, and the list keeps the trigger's width so descriptions wrap. — Nikolaus Brunner <brunner@imfusion.com>
+- `Table.Root` takes `density` (`compact`, `comfortable`, `spacious`) for the cell padding. — Nikolaus Brunner <brunner@imfusion.com>
+- `Table.HeaderCell` and `Table.Cell` take `action` for a column of buttons: it shrinks to its content, so the data columns keep the width. — Nikolaus Brunner <brunner@imfusion.com>
+- [`useDisclosure`](src/hooks/use-disclosure.stories.tsx#UseDisclosure) keeps an open state that works controlled or uncontrolled, and returns `open`, `setOpen`, and `toggle`. — Nikolaus Brunner <brunner@imfusion.com>
+- `AppShell.Navbar` and `AppShell.Aside` take `defaultOpen` and keep their own open state when `open` is omitted, and close an uncontrolled drawer when they dock. A controlled `open` is never changed by docking. — Nikolaus Brunner <brunner@imfusion.com>
+- An `AppShell.Aside` opens from the consumer's state, such as a row selection, through `open` and `onOpenChange`. — Nikolaus Brunner <brunner@imfusion.com>
+- `AppShell.Main` content is a flex column at least as tall as Main, so a child with `flex: 1` fills the rest. — Nikolaus Brunner <brunner@imfusion.com>
+- `AppShell.Aside` content wraps long words such as emails and IDs inside a narrow panel, in the docked aside and the drawer. — Nikolaus Brunner <brunner@imfusion.com>
+- An `AppShell.NavItem` followed inside the navbar drawer closes it, unless its `onClick` calls `event.preventDefault()`. — Nikolaus Brunner <brunner@imfusion.com>
+- [`ColorSchemeToggle`](src/components/color-scheme-toggle/color-scheme-toggle.mdx) lets the user pick Light, System, or
+  Dark. It stores the choice through `useColorScheme` and needs no props; `label`, `lightLabel`, `systemLabel`, and
+  `darkLabel` replace the English text — Nikolaus Brunner <brunner@imfusion.com>
+- [`ToggleGroup`](src/components/toggle-group/toggle-group.mdx) and `Toggle` take a `size` of `sm` or `md`. A small group
+  has no inset or gap, a 1px border, and 1.5rem toggles; a toggle takes its group's size unless it sets its own
+  — Nikolaus Brunner <brunner@imfusion.com>
+- `Skeleton.Suspense` takes a `fallback` of bones, a `label`, and the content. It is a Suspense boundary whose fallback is a
+  busy `Skeleton.Root`; when the content mounts after the fallback showed, it fades in, and content that was
+  ready at mount appears without a fade. Use it for data loaded through Suspense, and `Skeleton.Root` for data loaded with
+  `useQuery` — Nikolaus Brunner <brunner@imfusion.com>
+- `ScrollArea` is a scrolling region with a slim primary-colored thumb that floats over the content and shows while the
+  area is hovered or scrolled, and a fade at each edge with more content behind it. `ScrollArea.Auto` wraps children with
+  the scrollbars for `orientation` (`vertical`, `horizontal`, `both`, or `none`); the parts compose by hand for anything else
+  ([WEBSDK-247](https://imfusion.atlassian.net/browse/WEBSDK-247)) — Nikolaus Brunner <brunner@imfusion.com>
+- `Dialog` is a modal window over a dimmed page, adapted from Base UI with all its parts. `Dialog.Header` takes a
+  `variant` (`main`, `support`, `minor`, or `primary` with light text); `Dialog.Title` renders as `Typo.H2` and
+  `Dialog.Description` as `Typo.P`. `Dialog.Body` scrolls in a `ScrollArea` while header and footer stay in view.
+  `Dialog.Popup` comes in `sm`, `md`, `lg`, and `full`, and stops at 40rem high (`--imf-ui-dialog-max-height`) except in
+  `full`. `Dialog.Status` adds a tinted status column like `Card.Status`, on top of the width the size sets.
+  `Dialog.Simple` builds the whole dialog from props, and `Dialog.Inline` opens it from a term inside running text. Both
+  show the × close button only without `actions`; with them, the footer is the way out
+  ([WEBSDK-247](https://imfusion.atlassian.net/browse/WEBSDK-247)) — Nikolaus Brunner <brunner@imfusion.com>
+- Storybook — Nikolaus Brunner <brunner@imfusion.com>
+  - The token drawer offers Paper Mono as a mono font.
+  - Docs links open a single story when they name its export after the stories file:
+    `[Inline](src/components/code/code.stories.tsx#Inline)`.
+- `withBreakHints` is exported. It inserts a break before each `@` and after each `.` in an email's string children, so the address wraps at its seams. [Account card](src/components/account-card/account-card.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- `--imf-ui-accountcard-lead` and `--imf-ui-accountcard-padding-inline` set an `AccountCard`'s avatar column and inline padding, so a container can line it up with its own rows. [Account card](src/components/account-card/account-card.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- `AppShell.Navbar` takes `logo` and `account`; the logo defaults to the ImFusion logo and lines up with the baseline of Main's first heading. [AppShell](src/components/app-shell/app-shell.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- `--imf-ui-appshell-heading-*`, `--imf-ui-appshell-navitem-dim`, `--imf-ui-appshell-navitem-underline-thickness`, and `--imf-ui-appshell-navitem-underline-offset` tune the logo row's strut and the NavItem underline. [AppShell](src/components/app-shell/app-shell.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- `AppShell.Aside` shows a close button in its drawer below `lg`, labelled by `closeLabel` (`Close panel` by default). [AppShell](src/components/app-shell/app-shell.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- `Select.Root` takes a `width` of `auto`, `wide`, or `full`: `auto` keeps the 10rem trigger minimum, `wide` raises it to
+  15rem, and `full` fills the parent. `--imf-ui-select-trigger-min-width` on `Select.Root` sets the minimum from CSS.
+  [Select](src/components/select/select.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+
 ### Changed
 
+- The `project-structure` topic sets when a single-route part is inlined into its route file: a component under 50 lines, with no `use*` hook, no stylesheet or test of its own, leaving the route file under 250 lines. `imf-web-ui-audit` reports a breach as a Deviation. — Nikolaus Brunner <brunner@imfusion.com>
+- The `Meter` track is translucent ink (8% `fg-main`), so it stays visible on tinted surfaces such as a selected table row. — Nikolaus Brunner <brunner@imfusion.com>
+- `Table` reads lighter: the header has no band, its mono labels are muted with a 1px rule under them, body rows have no rules, and cells get more vertical padding. A selected row sits one neutral step darker than a hovered row, in place of the primary tint. — Nikolaus Brunner <brunner@imfusion.com>
+- [`AppShell.Header`](src/components/app-shell/app-shell.mdx) is a page row that shows at every width, below the shell's bar on mobile. — Nikolaus Brunner <brunner@imfusion.com>
+  - The header pads its inline sides with `--imf-ui-appshell-padding`, so its content lines up with Main's.
+- AppShell — Nikolaus Brunner <brunner@imfusion.com>
+  - The navbar rail, `AppShell.Main`, and the aside share `--imf-ui-appshell-padding` as their inline gutter, so their text lines up with no consumer CSS. [Docs](src/components/app-shell/app-shell.mdx)
+  - `--imf-ui-appshell-navbar-padding` defaults to `--imf-ui-appshell-padding`, and `--imf-ui-appshell-aside-padding` defaults to `--imf-ui-appshell-padding`. Both stay overridable.
 - Agent skills — Nikolaus Brunner <brunner@imfusion.com>
+  - `npx web-ui install skills` writes no `.imf-web-ui-skill-version.json` marker into each skill and removes existing ones.
+    Both install commands read the harness back from the Claude skill links and the installer's hook registrations, and
+    take it from an old marker when one is still there.
+  - `imf-web-ui-audit` checks that `@imfusion/web-ui` is installed before it dispatches, and asks whether to install first,
+    since token, version, and type checks need the installed package. Its investigators search with whatever read-only
+    file search the host offers.
+  - The `imf-web-ui-conventions` audit checklist lists the "Derive types, don't copy them" and "Loading states" sections
+    under their current topic headings.
   - `imf-web-ui-conventions` has query factories own a numeric `staleTime` chosen by how fast other people change the data.
     Loaders call `queryClient.query(options)` without an override, and `"static"` no longer appears in factories or
     `defaultOptions`, where it blocked invalidation refetches.
   - `imf-web-ui-conventions` puts a route's own views, forms, hooks, and tests in a `-<file-name>/` folder beside the route
     file, and reserves `partials/` for parts that more than one route uses.
+  - `imf-web-ui-conventions` lifts a value into a custom property on the component's root only when it repeats within that
+    stylesheet or a state or variant changes several descendants. A value that only recurs across files stays a literal in
+    each, and a shared component owns it when those files show one design element.
+  - `imf-web-ui-conventions` exempts TanStack options factories (`queryOptions`, `mutationOptions`) from the explicit return
+    type on exported functions, since spelling it out loses the typed query key.
+  - `imf-web-ui-conventions` keeps the Git hooks in `.vite-hooks/` and installs the Vite+ dispatcher with `vp config` from
+    `git:config`.
+  - `imf-web-ui-conventions` names the Skeleton part for each way data loads, and says a layout that reads suspending data
+    needs its own boundary. `imf-web-ui-ux` points to that rule from its loading state.
+  - `imf-web-ui-conventions` lets a mutation name the sub-resource after its verb when a topic has more than one target,
+    as in `api.projects.removeMember(projectId)`; a name still never repeats its topic.
+- CI and verification — Nikolaus Brunner <brunner@imfusion.com>
+  - The Git hooks live in `.vite-hooks/` and run through the Vite+ hook dispatcher, which `npm run git:config` installs.
+    Existing clones and worktrees rerun `npm run git:config`; until then their hooks do not run.
+  - `engines.node` is `^22.22.1 || ^24.11 || >=26`, the range Vite+ supports. Node 24.0 to 24.10 and Node 25 fall
+    outside it.
+- The main column, header, and footer snap when the aside docks or undocks — Nikolaus Brunner <brunner@imfusion.com>
+- Components ([WEBSDK-247](https://imfusion.atlassian.net/browse/WEBSDK-247)) — Nikolaus Brunner <brunner@imfusion.com>
+  - The AppShell navbar drawer, `Code`, and `ImageDisplayOptions` scroll in a `ScrollArea`, with its overlay thumb and edge
+    fades.
+  - Removed default padding from `Popover.Trigger` such that it keeps a neutral style.
+- A ghost `Button` or `IconButton` hovers by fading its label or glyph, with no fill or edge, on main and oncolor surfaces alike, instead of inverting to a solid fill. `Dialog.Close` and the `AppShell.Aside` drawer close follow. [Button](src/components/button/button.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- `Typo.UnorderedList` marks its items with a short primary-coloured dash on the main, support, and minor variants, and with a dash in the text colour on the others. It sets `role="list"` by default. [Typo](src/components/typo/typo.mdx) ([WEBSDK-270](https://imfusion.atlassian.net/browse/WEBSDK-270)) — Nikolaus Brunner <brunner@imfusion.com>
+
+### Fixed
+
+- `Typo.Hero`, `Typo.H3`, `Typo.H4`, `Typo.Lead`, and `Typo.Blockquote` no longer crowd their letters: `--imf-ui-font-letterspacing-hero` and `--imf-ui-font-letterspacing-brand` scale with the viewport, from about -0.0225em and -0.01em at 360px to -0.025em and -0.02em at 1920px, so pairs like "rt" and "ty" stay apart — Nikolaus Brunner <brunner@imfusion.com>
+- The `Select` popup sits 4px below its trigger by default (`sideOffset` on `Select.Positioner`) and casts a hard shadow (`--imf-ui-shadow-4`). — Nikolaus Brunner <brunner@imfusion.com>
+- An empty `Select.ItemIndicator` draws the `Check` icon in the item's text colour, so it stays visible on the highlighted item. Base UI's fallback was a `✔️` emoji in its own colour. — Nikolaus Brunner <brunner@imfusion.com>
+- The `tooling` topic, `imf-web-ui-setup` and `imf-web-ui-audit` keep tsconfig `paths` away from Vite: `resolve.tsconfigPaths` or `vite-tsconfig-paths` loaded the React types package as React and broke a build that installs Web UI from the registry. The `#/` alias comes from `imports` in `package.json`. — Nikolaus Brunner <brunner@imfusion.com>
+- The skill staleness hook stays quiet when `@imfusion/web-ui` is a symlinked checkout, whose version never matches the installed skills. — Nikolaus Brunner <brunner@imfusion.com>
+- `Drawer.Popup` draws no focus ring around the whole panel when it takes focus on open; the controls inside keep theirs. — Nikolaus Brunner <brunner@imfusion.com>
+- `Chip` stays on one line within its container's width and ends in an ellipsis when the label doesn't fit. [Chip](src/components/chip/chip.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- Only the navbar drawer's own close shows while it is open; the header burger steps back until the drawer closes — Nikolaus Brunner <brunner@imfusion.com>
+- `Skeleton.Root` fades only its own content in when loading ends; the rest of the page stays still, and no `AbortError` reaches the console — Nikolaus Brunner <brunner@imfusion.com>
+- `AppShell`'s docked aside no longer leaves `AppShell.Main` up to 13px under it at 1024px: Main ends where the aside begins at every docked width — Nikolaus Brunner <brunner@imfusion.com>
+- The Stop hook's verify gate blocks only a turn that edited files. An edit from an earlier turn no longer blocks later turns that only answer questions while the tree stays dirty — Nikolaus Brunner <brunner@imfusion.com>
+- `imf-web-ui-ux` describes patterns and points to `imf-web-ui-components` for which components exist, instead of claiming which ones do not — Nikolaus Brunner <brunner@imfusion.com>
 
 ---
 

package/README.md

@@ -65,8 +65,10 @@ npm install
 npm run git:config
 ```
 
-`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 hooks are tracked in `.vite-hooks/`. `git:config` installs the Vite+ hook dispatcher into the git-ignored
+`.vite-hooks/_/` and points the hooks path at it, enables rebase pulls, and requires fast-forward merges. Every checkout and
+worktree needs its own `node_modules` and dispatcher, so run `npm ci` and `npm run git:config` in each; without the
+dispatcher the hooks do not run at all.
 
 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,
@@ -99,34 +101,8 @@ The main development skills are:
 | `/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
+### Try a change in a consumer app
 
-To change the library while running an app that uses it, point the app's dependency at your checkout:
-
-```json
-"@imfusion/web-ui": "file:../web-ui"
-```
-
-Run `npm install` in the app, then keep `npm run dev:lib` running here. The package resolves to `dist/`, so the app resolves
-nothing until the first watch build has finished, and sees each later change once the rebuild has written it.
-
-npm links the checkout instead of copying it. Without help, the app then loads two copies of React, its own and the one in
-this checkout's `node_modules`, and every hook fails with "Invalid hook call". Register `localWebUILink` in the app's Vite
-config to prevent that:
-
-```ts
-import { localWebUILink } from "@imfusion/web-ui/vite";
-
-export default defineConfig({
-  plugins: [react(), localWebUILink()]
-});
-```
-
-It dedupes every peer dependency of the library, including `@imfusion/sdk` and `@imfusion/sdk-react`. For an installed
-package it does nothing, so it can stay in the config.
-
-It covers the browser in development and in the build. Server rendering, including React Router prerendering, still loads
-dependencies through Node, which picks the checkout's React. Base UI's `use-sync-external-store` dependency is CommonJS, so
-Popover, Select, and other stateful parts can still fail on the server.
-
-Change the dependency back before you commit the app.
+Use the maintainer skill `imfg-web-ui-live-link`. The app needs `localWebUILink()` in its `vite.config.ts` and the `paths`
+block from the `tooling` topic of `imf-web-ui-conventions` in its `tsconfig.json`, on top of matching React, Base UI, and
+Vite+ versions.

package/THIRD_PARTY_NOTICES.md

@@ -66,3 +66,113 @@ 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.
 ```
+
+## Paper Mono
+
+- Project: [Paper Mono](https://github.com/paper-design/paper-mono)
+- License: [SIL Open Font License 1.1](https://github.com/paper-design/paper-mono/blob/v1.000/LICENSE.txt)
+
+The Paper Mono font shipped with `@imfusion/web-ui` is unmodified.
+
+The following license text applies only to Paper Mono and is reproduced verbatim:
+
+```text
+Paper Mono
+Copyright (c) 2025 Lost Coast Labs, Inc. (Paper Design)
+
+Based on Geist Mono
+Copyright (c) 2023 Vercel, in collaboration with basement.studio
+
+-----------------------------------------------------------
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+```

package/dist/code-NTcddiYk.js

@@ -0,0 +1,139 @@
+import { r as e } from "./resolve-state-props-DQf9WiGv.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 { a, i as o, n as s, o as c, s as l } from "./scroll-area-z9Lf9uIk.js";
+import { cx as u } from "class-variance-authority";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useCallback as m, useEffect as h, useRef as g, useState as _ } from "react";
+import { mergeProps as v } from "@base-ui/react/merge-props";
+import { useRender as y } from "@base-ui/react/use-render";
+//#region src/hooks/use-clipboard.ts
+function b({ timeout: e = 1500 } = {}) {
+	let [t, n] = _(!1), r = g(void 0);
+	return h(() => () => clearTimeout(r.current), []), {
+		copied: t,
+		copy: m((t) => {
+			navigator.clipboard.writeText(t).then(() => {
+				n(!0), clearTimeout(r.current), r.current = setTimeout(() => n(!1), e);
+			});
+		}, [e])
+	};
+}
+var x = {
+	block: "imf-ui-code-module-block",
+	copy: "imf-ui-code-module-copy",
+	inline: "imf-ui-code-module-inline",
+	inlineCopy: "imf-ui-code-module-inlineCopy",
+	inlineLink: "imf-ui-code-module-inlineLink",
+	language: "imf-ui-code-module-language",
+	pre: "imf-ui-code-module-pre",
+	separator: "imf-ui-code-module-separator"
+}, S = /* @__PURE__ */ e({
+	Block: () => T,
+	Inline: () => C,
+	InlineLink: () => w
+});
+function C({ copyable: e = !1, children: i, render: a, ...o }) {
+	let { copied: s, copy: c } = b(), l = g(null), u = s ? n : t;
+	return y({
+		defaultTagName: "code",
+		render: a,
+		props: {
+			...v(o, {
+				className: x.inline,
+				children: /* @__PURE__ */ p(d, { children: [
+					/* @__PURE__ */ f("span", {
+						ref: l,
+						children: i
+					}),
+					e && /* @__PURE__ */ f("span", { className: x.separator }),
+					e && /* @__PURE__ */ f("button", {
+						type: "button",
+						className: x.inlineCopy,
+						"data-copied": s || void 0,
+						"aria-label": s ? "Copied" : "Copy",
+						onClick: () => c(l.current?.textContent ?? ""),
+						children: /* @__PURE__ */ f(r, {
+							glyph: u,
+							size: 12,
+							strokeWidth: 2,
+							"aria-hidden": !0
+						})
+					})
+				] })
+			}),
+			"data-imf-ui-component": "Code.Inline"
+		}
+	});
+}
+C.displayName = "Code.Inline";
+function w({ kind: e = "external", ...t }) {
+	let n = e === "external" ? {
+		target: "_blank",
+		rel: "noreferrer"
+	} : {};
+	return y({
+		defaultTagName: "a",
+		render: t.render,
+		props: {
+			...v(n, t, {
+				className: u(x.inline, x.inlineLink, t.className),
+				children: t.children
+			}),
+			"data-imf-ui-component": "Code.InlineLink",
+			"data-kind": e
+		}
+	});
+}
+w.displayName = "Code.InlineLink";
+function T({ className: e, language: i, hideCopy: d = !1, children: m, ...h }) {
+	let { copied: _, copy: v } = b(), y = g(null), S = _ ? n : t;
+	return /* @__PURE__ */ p("div", {
+		"data-imf-ui-component": "Code.Block",
+		className: u(x.block, e),
+		children: [
+			i != null && /* @__PURE__ */ f("span", {
+				className: x.language,
+				children: i
+			}),
+			!d && /* @__PURE__ */ f("button", {
+				type: "button",
+				className: x.copy,
+				"data-copied": _ || void 0,
+				"aria-label": _ ? "Copied" : "Copy",
+				onClick: () => v(y.current?.textContent ?? ""),
+				children: /* @__PURE__ */ f(r, {
+					glyph: S,
+					size: 12,
+					strokeWidth: 2,
+					"aria-hidden": !0
+				})
+			}),
+			/* @__PURE__ */ p(o, { children: [/* @__PURE__ */ f(l, { children: /* @__PURE__ */ f(s, { children: /* @__PURE__ */ f("pre", {
+				...h,
+				className: x.pre,
+				children: /* @__PURE__ */ f("code", {
+					ref: y,
+					children: m
+				})
+			}) }) }), /* @__PURE__ */ f(a, {
+				orientation: "horizontal",
+				children: /* @__PURE__ */ f(c, {})
+			})] })
+		]
+	});
+}
+T.displayName = "Code.Block";
+//#endregion
+//#region src/components/code/code.meta.ts
+var E = {
+	name: "Code",
+	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.",
+	origin: "native",
+	internalDependencies: ["ScrollArea"]
+};
+//#endregion
+export { S as a, w as i, T as n, b as o, C as r, E as t };

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

@@ -1,4 +1,3 @@
-import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 import * as AvatarParts from '../avatar/avatar';
 declare const root: (props?: ({
@@ -6,8 +5,9 @@ declare const root: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 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.
+ * AccountCard.Root — the signed-in person's row, holding `AccountCard.Avatar`, `AccountCard.Title`, `AccountCard.Subtitle`,
+ * `AccountCard.Description`, `AccountCard.Role`, and, at its top right, `AccountCard.Action`. The row itself is not
+ * interactive; the action's buttons are.
  */
 declare function Root({ 
 /** Explicit saturated-surface context; this is never inferred from an ancestor. */
@@ -15,15 +15,6 @@ context, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Root {
     var displayName: string;
 }
-/**
- * AccountCard.Link — the link to the account, holding `AccountCard.Avatar`, `AccountCard.Title`,
- * `AccountCard.Subtitle`, `AccountCard.Description`, and `AccountCard.Role`. Pass a router link through `render`. Its
- * accessible name is its text; the avatar stays decorative.
- */
-declare function Link({ render, ...props }: useRender.ComponentProps<"a">): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
-declare namespace Link {
-    var displayName: string;
-}
 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;
@@ -39,8 +30,8 @@ declare namespace Avatar {
     var displayName: string;
 }
 /**
- * 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.
+ * AccountCard.Title — the account's name, or the email's local part until a name exists. Text wraps before an `@` and
+ * after a dot.
  */
 declare function Title({ children, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
 declare namespace Title {
@@ -54,30 +45,22 @@ declare function Subtitle({ children, ...props }: React.ComponentProps<"span">):
 declare namespace Subtitle {
     var displayName: string;
 }
-/** AccountCard.Description — the organization, under a rule at the foot of the card. */
+/** AccountCard.Description — the organization, set apart below the subtitle. */
 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. */
+/** AccountCard.Role — a mono uppercase label under the description, such as the person's role. */
 declare function Role(props: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
 declare namespace Role {
     var displayName: string;
 }
 /**
- * AccountCard.Action — a slot in the card's top row, beside the link, such as a ghost icon `Button` that logs out. The
+ * AccountCard.Action — the card's top-right slot for ghost `IconButton`s, such as one that logs out. The
  * button carries its own `aria-label` and its own `context`.
  */
 declare function Action(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare namespace Action {
     var displayName: string;
 }
-/**
- * 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.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare namespace Group {
-    var displayName: string;
-}
-export { Root, Link, Avatar, Title, Subtitle, Description, Role, Action, Group };
+export { Root, Avatar, Title, Subtitle, Description, Role, Action };