@imfusion/web-ui 0.10.1-dev.3.gc9ea991e → 0.10.1-dev.33.g8275f59f

package/CHANGELOG.md

@@ -2,14 +2,126 @@
 
 ## [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:** The AppShell navbar drawer renders its own close on the logo row. Remove the close `AppShell.Burger` your navbar's first section renders, or the drawer shows two closes. — Nikolaus Brunner <brunner@imfusion.com>
+- **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.
+
+### Added
+
+- `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
+  ([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>
+- `AppShell.Burger` with no props opens and closes the navbar drawer, so the header needs no state wiring. [AppShell](src/components/app-shell/app-shell.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+
 ### Changed
 
+- 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>
+  - `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.
+- 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.
+- 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>
+
+### Fixed
+
+- `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>
 
 ---
 
@@ -247,6 +359,37 @@ AppShell sections draw no dividers. Delete overrides of the border properties, w
 - --imf-ui-appshell-border-width: var(--imf-ui-border-size-2);
 ```
 
+Navbar sections pad themselves with `--imf-ui-appshell-navbar-padding`, and that rule outranks a single class. Delete your
+own section padding, and set the variable when the gutter needs to change:
+
+```diff
+- .navSection { padding: 0 var(--imf-ui-appshell-padding); }
++ .root { --imf-ui-appshell-navbar-padding: var(--imf-ui-size-5); }
+```
+
+Nav links widen past the gutter only as `AppShell.NavItem`. Replace hand-built navbar links, and pass a router link through
+`render`:
+
+```diff
+- <MyNavLink to="/products" icon={Box} label="Products" />
++ <AppShell.NavItem render={<Link to="/products" />} icon={<Icon glyph={Box} />}>Products</AppShell.NavItem>
+```
+
+Above `lg` the aside docks whether or not `open` is set. Render no aside when there is nothing to show, not an empty one:
+
+```diff
+- <AppShell.Aside>{selected ? <Details /> : <div />}</AppShell.Aside>
++ {selected ? <AppShell.Aside><Details /></AppShell.Aside> : null}
+```
+
+The navbar's first row and Main's offset read the header height while an `AppShell.Header` is rendered, even when CSS hides
+it. Render the header conditionally instead of hiding it or setting the height to `0`:
+
+```diff
+- <AppShell.Header className={styles.hiddenOnDesktop}>…</AppShell.Header>
++ {isDesktop ? null : <AppShell.Header>…</AppShell.Header>}
+```
+
 ### Breaking
 
 - **Breaking:** The library supports Safari 17.5, Chrome 123, and Firefox 120 or newer. — Nikolaus Brunner <brunner@imfusion.com>
@@ -254,6 +397,11 @@ AppShell sections draw no dividers. Delete overrides of the border properties, w
   - 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>
+- **Breaking:** AppShell owns its navbar and aside layout. ([WEBSDK-243](https://imfusion.atlassian.net/browse/WEBSDK-243)) — Nikolaus Brunner <brunner@imfusion.com>
+  - Navbar sections pad themselves with `--imf-ui-appshell-navbar-padding` through a rule that outranks a single class.
+  - Only `AppShell.NavItem` widens past the navbar gutter.
+  - Above `lg` the aside docks whether or not `open` is set.
+  - The navbar's first row and Main's offset read the header height whenever an `AppShell.Header` is rendered.
 
 ### Added
 

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,

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 };

package/dist/components/app-shell/app-shell.d.ts

@@ -18,12 +18,19 @@ type DrawerProps = {
     /** Called when the drawer asks to open or close: scrim, swipe, or Escape. */
     onOpenChange?: (open: boolean) => void;
 };
-type NavbarProps = React.ComponentProps<"nav"> & VariantProps<typeof navbarSurface> & DrawerProps;
+type NavbarProps = React.ComponentProps<"nav"> & VariantProps<typeof navbarSurface> & DrawerProps & {
+    /** The brand at the top of the rail. Defaults to the ImFusion logo; `null` leaves the row empty. */
+    logo?: React.ReactNode;
+    /** The signed-in account at the foot of the rail, usually an `AccountCard`. Without it the foot is omitted. */
+    account?: React.ReactNode;
+};
 /**
- * `variant="branded"` paints the primary color; children opt into on-color themselves. Below `md` the navbar opens as a
- * drawer from the inline end.
+ * The navbar owns its frame: `logo` on top, the children (nav items) in the middle, `account` at the foot. Without a
+ * Header the logo's bottom edge sits on the baseline of Main's first heading. `variant="branded"` paints the primary
+ * color; children opt into on-color themselves. Below `md` the navbar opens as a drawer from the inline start, with its
+ * close on the logo row.
  */
-declare function Navbar({ variant, open, onOpenChange, ...props }: NavbarProps): import("react/jsx-runtime").JSX.Element;
+declare function Navbar({ variant, open, onOpenChange, logo, account, children, ...props }: NavbarProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Navbar {
     var displayName: string;
 }
@@ -34,9 +41,11 @@ type AsideProps = React.ComponentProps<"aside"> & DrawerProps & {
     onWidthChange?: (width: number) => void;
     /** Accessible name of the drag handle. */
     resizeLabel?: string;
+    /** Accessible name of the close button shown while the aside is a drawer. */
+    closeLabel?: string;
 };
 /** Below `lg` the aside opens as a drawer: from the bottom on phones, from the inline end on tablets. */
-declare function Aside({ open, onOpenChange, resizable, onWidthChange, resizeLabel, children, ...props }: AsideProps): import("react/jsx-runtime").JSX.Element;
+declare function Aside({ open, onOpenChange, resizable, onWidthChange, resizeLabel, closeLabel, children, ...props }: AsideProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Aside {
     var displayName: string;
 }
@@ -44,7 +53,7 @@ declare function Footer(props: React.ComponentProps<"footer">): import("react/js
 declare namespace Footer {
     var displayName: string;
 }
-declare function Main(props: React.ComponentProps<"main">): import("react/jsx-runtime").JSX.Element;
+declare function Main({ children, ...props }: React.ComponentProps<"main">): import("react/jsx-runtime").JSX.Element;
 declare namespace Main {
     var displayName: string;
 }
@@ -57,16 +66,17 @@ declare namespace Section {
     var displayName: string;
 }
 type BurgerProps = React.ComponentProps<typeof ButtonPrimitive> & {
-    /** Whether the navigation it controls is open; draws the cross and sets `aria-expanded`. */
+    /** Draws the cross and sets `aria-expanded`. Defaults to whether the navbar drawer is open. */
     opened?: boolean;
     /** Accessible name. Defaults to "Open navigation" or "Close navigation" from `opened`. */
     label?: string;
 };
 /**
- * AppShell.Burger — the header's menu toggle: three sheared bands that cross when `opened`. Takes its color from the
- * surface and hides from `md` up, where the navbar is docked.
+ * AppShell.Burger — the menu toggle: three sheared bands that cross while the navbar drawer is open. With no props it
+ * opens and closes that drawer. Takes its color from the surface and hides from `md` up, where the navbar is docked, and
+ * steps back while the drawer is open, so the drawer's own close is the only one shown.
  */
-declare function Burger({ opened, label, className, ...props }: BurgerProps): import("react/jsx-runtime").JSX.Element;
+declare function Burger({ opened, label, className, onClick, ...props }: BurgerProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Burger {
     var displayName: string;
 }
@@ -78,7 +88,7 @@ type NavItemProps = useRender.ComponentProps<"a"> & {
 };
 /**
  * AppShell.NavItem — a navbar link: icon, mono label, and an optional description. Takes its color from the navbar;
- * `aria-current="page"` marks the current page. Pass a router link through `render`.
+ * `aria-current="page"` underlines the label. Pass a router link through `render`.
  */
 declare function NavItem({ icon, description, children, render, ...props }: NavItemProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 declare namespace NavItem {

package/dist/components/callout/callout.d.ts

@@ -22,7 +22,7 @@ declare function Icon({ children, ...props }: React.ComponentProps<"span">): imp
 declare namespace Icon {
     var displayName: string;
 }
-/** Callout.Title — an optional short heading, set in the semi-mono UPPERCASE technical voice. */
+/** Callout.Title — an optional short heading, set in the mono UPPERCASE technical voice. */
 declare function Title(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare namespace Title {
     var displayName: string;

package/dist/components/chip/chip.d.ts

@@ -7,5 +7,5 @@ type Props = React.ComponentProps<"span"> & VariantProps<typeof chip> & {
  * Chip — compact inline label for status or category.
  * Not based on any upstream component.
  */
-export declare function Chip({ variant, appearance, inline, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Chip({ variant, appearance, inline, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};