@imfusion/web-ui 0.8.1-dev.5.gee230289 → 0.8.1-dev.50.g91c115bb

package/CHANGELOG.md

@@ -2,13 +2,172 @@
 
 ## [Unreleased]
 
+### Highlights
+
+#### 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, configured in one `vite.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.
+
+### 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
 
+- 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)).
 - 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.
+  - `Typo.Eyebrow` sets a short mono, uppercase label above a heading, in the quiet `support` color by default.
+  - `Card.Status` marks a card's outcome with a tinted column or band and the `info`, `positive`, `warning`, or `negative`
+    glyph that `Callout` uses for the same status.
+  - `Typo` body members (`P`, `Lead`, `Detail`, `Small`, `Blockquote`, `Highlight`, `Link`, and the lists) take an
+    optional `weight` of `regular`, `medium`, or `strong`, for short body text on cards that reads thin at the regular weight.
+  - `Table.RowLink` links a row to its detail page from inside a cell. It reads as row text without an underline, wraps long
+    values such as emails anywhere, and takes a `render` prop for router links.
+  - `Skeleton` holds the place of loading data: `Skeleton.Text` is one line of its parent's font tall, `Skeleton.Block`
+    takes a size or a circle, and `Skeleton.Root` announces the load once and can hold its scan line still.
+  - `Button` has a `justify` prop: `center` or `spread`, which pins the icons to the edges of a stretched button.
+  - `Meter` shows a measured amount within a range, such as seats in use, as a read-only bar with an optional label and
+    value readout. ([WEBSDK-250](https://imfusion.atlassian.net/browse/WEBSDK-250))
+- Components — Stephan Wenninger <wenninger@imfusion.com>
+  - `Slider.Root` has a `variant="position"` that draws a scrollbar-like trough and bar thumb for picking one position in a
+    range.
+  - `FrameSelection`, from `@imfusion/web-ui/integrations/frame-selection`, steps through the frames of ImFusion Web SDK
+    image sets with a position slider and a current-of-total readout.
+  - `IconButton` is a square `Button` that shows a single icon and no visible text. `label` sets its accessible name, the
+    glyph size follows the button size, and `iconProps` passes props such as `strokeWidth` to the icon.
+- AppShell ([WEBSDK-243](https://imfusion.atlassian.net/browse/WEBSDK-243)) — Nikolaus Brunner <brunner@imfusion.com>
+  - `AppShell.Navbar` has a `variant` prop: `default` or `branded`, a rail filled with the primary color.
+  - `AppShell.Burger` toggles the navbar drawer with three sheared bands that align on hover and cross when open.
+  - `AppShell.NavItem` is a navbar link with icon, label, and description that follows the navbar's color.
+  - `AppShell.Navbar` and `AppShell.Aside` take `onOpenChange` for their drawers.
+  - `AppShell.Aside` has a drag handle that resizes it and resets on double-click or Home. It is on by default; `resizable`, `onWidthChange`, and `resizeLabel` configure it.
+  - `--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.
+- 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.
+
+- Icons ([WEBSDK-267](https://imfusion.atlassian.net/browse/WEBSDK-267)) — Nikolaus Brunner <brunner@imfusion.com>
+  - 65 Medical Imaging icons from the ImFusion design team, such as `ToolBrush`, `ToolWindowLevel`, and `DefineRoiAction`.
+
+- Storybook ([WEBSDK-267](https://imfusion.atlassian.net/browse/WEBSDK-267)) — Nikolaus Brunner <brunner@imfusion.com>
+  - Every icon has its own Iconography page with a shareable link, and both the page and the catalog tile download the icon as
+    an SVG under its source file name.
+
+### Changed
+
+- Icons ([WEBSDK-267](https://imfusion.atlassian.net/browse/WEBSDK-267)) — Nikolaus Brunner <brunner@imfusion.com>
+  - Icons from `@imfusion/web-ui/icons` have square corners, line caps, and line joins. Letters, digits, stars, and
+    badges keep Iconoir's round geometry.
+  - The package generates its icons from Iconoir's SVG source and has no `iconoir-react` dependency.
+  - `strokeWidth` set on `Icon` or through `WebUIProvider` reaches every part of an icon, circles and rectangles included.
+  - Every record in the icon catalog names its `origin`, `iconoir` or `imfusion`, and its source `file`. The Iconography
+    catalog filters by origin and badges every icon with it. While no category filter is set, each tile also names the
+    icon's category.
+
+- Components — Nikolaus Brunner <brunner@imfusion.com>
+  - `Button` centers its icons and label when a container stretches it wider than its content; `justify="spread"`
+    keeps the icons at the edges.
+- 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-update` proposes catalog icons for project-local icons they now cover, above all icons a release added
+    ([WEBSDK-267](https://imfusion.atlassian.net/browse/WEBSDK-267)).
+  - `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)).
+  - `imf-web-ui-conventions` recommends the Vite+ toolchain: `vp dev`, `vp build`, `vp test`, Oxfmt through `vp fmt`, Oxlint
+    through `vp lint`, and a pre-commit hook that runs `vp staged`.
+  - `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>
+  - The toolchain is Vite+: `vp build` and `vp test` replace the Vite and Vitest scripts, and Oxlint and Oxfmt replace ESLint and Prettier.
+  - The pre-commit hook runs `vp staged` against the staged state and never rewrites or stages files.
+  - `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>
+  - The navbar sits on the support background by default.
+  - The navbar variants set the navbar's text color: `fg-main` by default, `fg-oncolor` when branded.
+  - The navbar runs the full height of the screen; Header and Footer start beside it.
+  - `AppShell.Main` scrolls with a thin scrollbar.
+  - 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.
+
+### Fixed
+
+- Components — Nikolaus Brunner <brunner@imfusion.com>
+  - Screen readers announce `Field.Error` when its message appears; it has `role="alert"` by default.
+  - `WebUIProvider` and the components under it render on React 18, the runtime Claude's design canvases use.
+  - 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 `@imfusion/sdk` and `@imfusion/sdk-react` peers accept any version, SDK dev builds included. 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.
+- Token defaults — Nikolaus Brunner <brunner@imfusion.com>
+  - `data-imf-ui-color-scheme` on a nested element switches the semantic colors for that element's subtree.
 
 ---
 

package/README.md

@@ -65,28 +65,38 @@ 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-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-GwkswukD.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 { t } from "./meta-V_KyLeGn.js";
+import { $o as n, Pa as r, r as i } from "./icons-DUxZcuf9.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";
@@ -33,7 +33,7 @@ var g = {
 	InlineLink: () => y
 });
 function v({ copyable: e = !1, children: t, render: a, ...l }) {
-	let { copied: u, copy: f } = h(), _ = d(null), v = u ? n : r;
+	let { copied: u, copy: f } = h(), _ = d(null), v = u ? r : n;
 	return m({
 		defaultTagName: "code",
 		render: a,
@@ -86,7 +86,7 @@ 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;
+	let { copied: f, copy: p } = h(), m = d(null), _ = f ? r : n;
 	return /* @__PURE__ */ c("div", {
 		"data-imf-ui-component": "Code.Block",
 		className: a(g.block, e),

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/app-shell/app-shell.d.ts

@@ -1,25 +1,10 @@
-/**
- * AppShell — application layout shell.
- *
- * The classic dashboard frame: a fixed header, collapsible navbar/aside
- * sidebars, an optional footer, and a scrolling main content area. Also called
- * an app layout, application frame, dashboard shell, or sidebar layout.
- *
- * Composed of seven sub-components used with dot-notation: `AppShell.Root` wraps
- * `AppShell.Header`, `AppShell.Navbar`, `AppShell.Aside`, `AppShell.Footer`,
- * `AppShell.Main`, and (inside a sidebar) `AppShell.Section`.
- *
- * Sizing is CSS-driven — override the `--imf-ui-appshell-*` custom properties
- * rather than passing dimension props. Below the responsive breakpoints the
- * navbar (`md`) and aside (`lg`) become sliding overlays toggled via the `open`
- * prop; the consumer wires that to a burger button.
- *
- * Copied and adapted from Mantine's AppShell; no upstream runtime dependency.
- * MIT licensed (see Mantine repo).
- *
- * @see https://mantine.dev/llms/core-app-shell.md
- */
-declare function Root(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+import { Button as ButtonPrimitive } from '@base-ui/react/button';
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+declare const navbarSurface: (props?: ({
+    variant?: "default" | "branded" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Root({ ref, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare namespace Root {
     var displayName: string;
 }
@@ -27,19 +12,31 @@ declare function Header(props: React.HTMLAttributes<HTMLElement>): import("react
 declare namespace Header {
     var displayName: string;
 }
-type NavbarProps = React.HTMLAttributes<HTMLElement> & {
-    /** Whether the mobile overlay is open. Ignored above the `md` breakpoint, where the navbar is always visible. */
+type DrawerProps = {
+    /** Whether the drawer is open below the breakpoint. Ignored while the section is docked. */
     open?: boolean;
+    /** Called when the drawer asks to open or close: scrim, swipe, or Escape. */
+    onOpenChange?: (open: boolean) => void;
 };
-declare function Navbar({ open, ...props }: NavbarProps): import("react/jsx-runtime").JSX.Element;
+type NavbarProps = React.HTMLAttributes<HTMLElement> & VariantProps<typeof navbarSurface> & DrawerProps;
+/**
+ * `variant="branded"` paints the primary color; children opt into on-color themselves. Below `md` the navbar opens as a
+ * drawer from the inline end.
+ */
+declare function Navbar({ variant, open, onOpenChange, ...props }: NavbarProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Navbar {
     var displayName: string;
 }
-type AsideProps = React.HTMLAttributes<HTMLElement> & {
-    /** Whether the mobile overlay is open. Ignored above the `lg` breakpoint, where the aside is always visible. */
-    open?: boolean;
+type AsideProps = React.HTMLAttributes<HTMLElement> & DrawerProps & {
+    /** Adds a drag handle on the inline-start edge from the `lg` breakpoint up. Double-click or Home restores the default width. */
+    resizable?: boolean;
+    /** Called with the new width in px when a drag ends, on each arrow-key step, and on reset. */
+    onWidthChange?: (width: number) => void;
+    /** Accessible name of the drag handle. */
+    resizeLabel?: string;
 };
-declare function Aside({ open, ...props }: AsideProps): import("react/jsx-runtime").JSX.Element;
+/** 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 namespace Aside {
     var displayName: string;
 }
@@ -59,4 +56,32 @@ declare function Section({ grow, ...props }: SectionProps): import("react/jsx-ru
 declare namespace Section {
     var displayName: string;
 }
-export { Root, Header, Navbar, Aside, Footer, Main, Section };
+type BurgerProps = React.ComponentProps<typeof ButtonPrimitive> & {
+    /** Whether the navigation it controls is open; draws the cross and sets `aria-expanded`. */
+    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.
+ */
+declare function Burger({ opened, label, className, ...props }: BurgerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Burger {
+    var displayName: string;
+}
+type NavItemProps = useRender.ComponentProps<"a"> & {
+    /** Leading icon, decorative. */
+    icon?: React.ReactNode;
+    /** One line under the label saying what is behind the link. */
+    description?: React.ReactNode;
+};
+/**
+ * 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`.
+ */
+declare function NavItem({ icon, description, children, render, ...props }: NavItemProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+declare namespace NavItem {
+    var displayName: string;
+}
+export { Root, Header, Navbar, Aside, Footer, Main, Section, Burger, NavItem };

package/dist/components/button/button.d.ts

@@ -6,11 +6,12 @@ declare const button: (props?: ({
     chamfer?: boolean | null | undefined;
     radius?: "sm" | "md" | "lg" | "none" | "round" | null | undefined;
     context?: "default" | "oncolor" | null | undefined;
+    justify?: "center" | "spread" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-interface Props extends React.ComponentProps<typeof ButtonPrimitive>, VariantProps<typeof button> {
-    /** Leading slot — typically a label. When present, the label aligns right and the icon pins left. */
+interface Props extends VariantProps<typeof button>, React.ComponentProps<typeof ButtonPrimitive> {
+    /** Leading slot, typically an icon. */
     startIcon?: React.ReactNode;
-    /** Trailing slot — typically an icon. When present, the label aligns left and the icon pins right. */
+    /** Trailing slot, typically an icon. */
     endIcon?: React.ReactNode;
 }
 /**
@@ -21,5 +22,5 @@ interface Props extends React.ComponentProps<typeof ButtonPrimitive>, VariantPro
  */
 export declare function Button({ variant, size, 
 /** Explicit saturated-surface context; this is never inferred from an ancestor. */
-context, chamfer, radius, startIcon, endIcon, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+context, chamfer, radius, justify, startIcon, endIcon, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -42,6 +42,20 @@ declare function Image({ alt, aspectRatio, style, ...props }: ImageProps): impor
 declare namespace Image {
     var displayName: string;
 }
+declare const status: (props?: ({
+    variant?: "positive" | "negative" | "warning" | "info" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type StatusProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof status>;
+/**
+ * Card.Status — a tinted slot that marks the card's status with the variant's glyph. Pass
+ * children to replace the glyph. Like `Card.Image`, place it first among the slots: a column
+ * beside the body in a horizontal card, a band above it in a vertical one. Decorative
+ * (`aria-hidden`); the card's text carries the status.
+ */
+declare function Status({ variant, children, ...props }: StatusProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Status {
+    var displayName: string;
+}
 type SlotProps = React.HTMLAttributes<HTMLDivElement>;
 /** Card.Header — the padded title region at the top of the card body. */
 declare function Header(props: SlotProps): import("react/jsx-runtime").JSX.Element;
@@ -62,4 +76,4 @@ declare function Footer(props: SlotProps): import("react/jsx-runtime").JSX.Eleme
 declare namespace Footer {
     var displayName: string;
 }
-export { Root, Image, Header, Content, Footer };
+export { Root, Image, Status, Header, Content, Footer };

package/dist/components/field/field.d.ts

@@ -29,8 +29,11 @@ export declare function Control(props: React.ComponentProps<typeof FieldPrimitiv
 export declare namespace Control {
     var displayName: string;
 }
-/** Field.Error — an inline validation message shown when its match condition fails. */
-export declare function Error(props: React.ComponentProps<typeof FieldPrimitive.Error>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Field.Error — an inline validation message shown when its match condition fails.
+ * It announces itself with `role="alert"`; pass another `role` to quiet it.
+ */
+export declare function Error({ role, ...props }: React.ComponentProps<typeof FieldPrimitive.Error>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Error {
     var displayName: string;
 }

package/dist/components/icon-button/icon-button.d.ts

@@ -0,0 +1,19 @@
+import { Button } from '../button';
+import { Icon, IconComponent } from '../icon';
+interface Props extends Omit<React.ComponentProps<typeof Button>, "children" | "startIcon" | "endIcon" | "justify"> {
+    /** Icon component imported from `@imfusion/web-ui/icons`. */
+    glyph: IconComponent;
+    /** Accessible name; the button renders no visible text. */
+    label: string;
+    /** Props for the inner Icon, such as `strokeWidth` or a `size` override. */
+    iconProps?: Omit<React.ComponentProps<typeof Icon>, "glyph">;
+}
+/**
+ * IconButton — a square Button that shows a single Icon. Composes Button, so every Button variant and native attribute
+ * passes through.
+ */
+export declare function IconButton({ glyph, label, iconProps, size, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace IconButton {
+    var displayName: string;
+}
+export {};

package/dist/components/icon-button/icon-button.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const iconButtonMeta: ComponentMeta;

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1,2 @@
+export { IconButton } from './icon-button';
+export { iconButtonMeta } from './icon-button.meta';

package/dist/components/logo/logo.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
 declare const logo: (props?: ({
-    size?: "sm" | "md" | "lg" | "hero" | "xs" | "xl" | "fit" | null | undefined;
+    size?: "sm" | "md" | "lg" | "hero" | "xl" | "xs" | "fit" | null | undefined;
     variant?: "oncolor" | "main" | "inherit" | "support" | "minor" | "brand" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & VariantProps<typeof logo> & {

package/dist/components/meter/index.d.ts

@@ -0,0 +1,2 @@
+export * as Meter from './meter';
+export { meterMeta } from './meter.meta';

package/dist/components/meter/meter.d.ts

@@ -0,0 +1,33 @@
+import { Meter as MeterPrimitive } from '@base-ui/react/meter';
+/**
+ * Meter.Root — read-only measurement of a value within a known range.
+ *
+ * Without a visible `Meter.Label`, name the meter with `aria-label`.
+ *
+ * @doc https://base-ui.com/react/components/meter
+ * @llm https://base-ui.com/react/components/meter.md
+ */
+export declare function Root({ min, max, ...props }: React.ComponentProps<typeof MeterPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Root {
+    var displayName: string;
+}
+/** Meter.Label — accessible label for the meter. */
+export declare function Label(props: React.ComponentProps<typeof MeterPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Label {
+    var displayName: string;
+}
+/** Meter.Value — formatted readout of the current value. */
+export declare function Value(props: React.ComponentProps<typeof MeterPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Value {
+    var displayName: string;
+}
+/** Meter.Track — the full range. */
+export declare function Track(props: React.ComponentProps<typeof MeterPrimitive.Track>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Track {
+    var displayName: string;
+}
+/** Meter.Indicator — filled portion of the track up to the value. */
+export declare function Indicator(props: React.ComponentProps<typeof MeterPrimitive.Indicator>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Indicator {
+    var displayName: string;
+}

package/dist/components/meter/meter.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const meterMeta: ComponentMeta;

package/dist/components/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export * as Skeleton from './skeleton';
+export { skeletonMeta } from './skeleton.meta';