@imfusion/web-ui 0.8.1-dev.36.g641eac85 → 0.8.1-dev.47.gcdcf0a9b

package/CHANGELOG.md

@@ -30,6 +30,8 @@ workflows already ask for stay as they are. Say "change my profile" to answer ag
 - **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
 
@@ -41,6 +43,8 @@ workflows already ask for stay as they are. Say "change my profile" to answer ag
   - `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
@@ -51,25 +55,64 @@ workflows already ask for stay as they are. Say "change my profile" to answer ag
     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.
 - 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.
+
 - 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
@@ -81,21 +124,40 @@ workflows already ask for stay as they are. Say "change my profile" to answer ag
     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.
+- 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.
 - 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

@@ -82,6 +82,7 @@ The main development skills are:
 | `/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.                      |

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-DBIxhqGE.js → code-GwkswukD.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
 import { t } from "./meta-V_KyLeGn.js";
-import { Ma as n, Xo as r, r as i } from "./icons-CM68Ql5d.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

@@ -7,7 +7,7 @@ declare const button: (props?: ({
     radius?: "sm" | "md" | "lg" | "none" | "round" | null | undefined;
     context?: "default" | "oncolor" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-interface Props extends React.ComponentProps<typeof ButtonPrimitive>, VariantProps<typeof button> {
+interface Props extends VariantProps<typeof button>, React.ComponentProps<typeof ButtonPrimitive> {
     /** Leading slot — typically a label. When present, the label aligns right and the icon pins left. */
     startIcon?: React.ReactNode;
     /** Trailing slot — typically an icon. When present, the label aligns left and the icon pins right. */

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"> {
+    /** 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/skeleton/index.d.ts

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

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

@@ -0,0 +1,47 @@
+import { useRender } from '@base-ui/react/use-render';
+type RootProps = useRender.ComponentProps<"div"> & {
+    /** Announced once through a visually hidden status. Pass `""` when something else already speaks for the region. */
+    label: string;
+    /** `none` holds every bone inside still. */
+    animation?: "shimmer" | "none";
+};
+/**
+ * Skeleton.Root — marks a region as loading. The view inside renders for real; bones stand in for the data. Sets
+ * `aria-busy` and announces `label` once, however many bones it holds.
+ */
+declare function Root({ label, animation, render, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Root {
+    var displayName: string;
+}
+type TextProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /** Width of the bar, capped at the container width. */
+    width?: React.CSSProperties["width"];
+    /** Number of stacked lines. The last of several is 60% wide. */
+    lines?: number;
+};
+/**
+ * Skeleton.Text — a text bar exactly one line of the parent's font tall. Place it inside the real Typo element so the
+ * row keeps the loaded row's height.
+ */
+declare function Text({ width, lines, style, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Text {
+    var displayName: string;
+}
+type BlockProps = React.HTMLAttributes<HTMLSpanElement> & ({
+    /** `circle` takes its size from `width`, for avatars. */
+    shape?: "rect";
+    /** Width of the block, capped at the container width. A circle uses it for both sides. */
+    width?: React.CSSProperties["width"];
+    /** Height of the block. */
+    height: React.CSSProperties["height"];
+} | {
+    shape: "circle";
+    width: React.CSSProperties["width"];
+    height?: never;
+});
+/** Skeleton.Block — a sized placeholder for a shaped element such as a meter, chip, or avatar. */
+declare function Block({ width, shape, height, style, ...props }: BlockProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Block {
+    var displayName: string;
+}
+export { Root, Text, Block };

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

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

package/dist/components/table/table.d.ts

@@ -1,3 +1,4 @@
+import { useRender } from '@base-ui/react/use-render';
 type HeaderCellProps = React.ThHTMLAttributes<HTMLTableCellElement>;
 /** Table.Root — the `<table>` element. */
 export declare function Root(props: React.TableHTMLAttributes<HTMLTableElement>): import("react/jsx-runtime").JSX.Element;
@@ -29,6 +30,14 @@ export declare function Cell(props: React.TdHTMLAttributes<HTMLTableCellElement>
 export declare namespace Cell {
     var displayName: string;
 }
+/**
+ * Table.RowLink — an `<a>` that stands in for its whole row, such as a link to the row's detail page. Reads as row text,
+ * not as a separate link, and wraps anywhere so long values like emails stay inside a narrow table.
+ */
+export declare function RowLink({ render, ...props }: useRender.ComponentProps<"a">): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare namespace RowLink {
+    var displayName: string;
+}
 /**
  * Table.HeaderButton — inline action button for header cells. Generic by
  * design: sorting toggles, filter toggles, column menus all render through it