@imfusion/web-ui 0.8.1-dev.58.g0912b389 → 0.8.1-dev.64.gbde1f63f

package/CHANGELOG.md

@@ -173,6 +173,8 @@ AppShell sections draw no dividers. Delete overrides of the border properties, w
     ([CP-202](https://imfusion.atlassian.net/browse/CP-202)).
   - `web-ui-dev-new-icon` adds custom icons from an SVG, a Figma link, a Claude Design project, or a description. It checks the icon catalog
     first, and codegen validates the SVGs in `src/icons/svg/` and exports them beside the Iconoir set ([WEBSDK-267](https://imfusion.atlassian.net/browse/WEBSDK-267)).
+  - `imf-web-ui-conventions` recommends TanStack Hotkeys for keyboard shortcuts, and its tooling map names each tool's
+    documentation source: `npx @tanstack/cli` with the library id for TanStack, the official site for the rest.
 - 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.
@@ -180,6 +182,14 @@ AppShell sections draw no dividers. Delete overrides of the border properties, w
     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.
+  - `Kbd` shows a keyboard key as a keycap with a chamfered side face, tinted from the text around it so it fits any
+    surface. A combination such as `Ctrl Z` goes in one key, and `icon` adds a keyboard glyph before it for a shortcut in
+    running text. `variant` is `default`, `primary`, or `flat`, the key without its side face.
+  - `@imfusion/web-ui/icons` has a `Keyboard` icon.
+  - `Button`, `IconButton`, and `Toggle` take a `shortcut` prop that shows the activating key in the top corner at the end
+    of the line and sets `aria-keyshortcuts` from it. On a chamfered button the key sits clear of the cut. An
+    `IconButton` or `Toggle` with a key grows one size so its icon clears the hint. The prop only shows the key; the app
+    binds it, for example with TanStack Hotkeys.
 - AppShell ([WEBSDK-243](https://imfusion.atlassian.net/browse/WEBSDK-243)) — Nikolaus Brunner <brunner@imfusion.com>
   - `--imf-ui-appshell-aside-min-width` (`max(20rem, 20cqi)`) is the narrowest the docked aside gets, dragged or not.
   - `--imf-ui-appshell-main-min-width` (`max(24rem, 45cqi)`) caps the docked aside so Main keeps at least 45% of the shell.

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

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

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

@@ -2,7 +2,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 import * as AvatarParts from '../avatar/avatar';
 declare const root: (props?: ({
-    context?: "default" | "oncolor" | null | undefined;
+    context?: "oncolor" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type RootProps = React.ComponentProps<"div"> & VariantProps<typeof root>;
 /**

package/dist/components/avatar/avatar.d.ts

@@ -2,7 +2,7 @@ import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
 import { VariantProps } from 'class-variance-authority';
 declare const root: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
-    context?: "default" | "oncolor" | null | undefined;
+    context?: "oncolor" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 interface RootProps extends React.ComponentProps<typeof AvatarPrimitive.Root>, VariantProps<typeof root> {
 }

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

@@ -1,11 +1,11 @@
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { VariantProps } from 'class-variance-authority';
 declare const button: (props?: ({
-    variant?: "primary" | "secondary" | "positive" | "negative" | "outline" | "ghost" | null | undefined;
+    variant?: "primary" | "positive" | "negative" | "secondary" | "outline" | "ghost" | null | undefined;
     size?: "sm" | "md" | "lg" | "hero" | null | undefined;
     chamfer?: boolean | null | undefined;
-    radius?: "sm" | "md" | "lg" | "none" | "round" | null | undefined;
-    context?: "default" | "oncolor" | null | undefined;
+    radius?: "none" | "round" | "sm" | "md" | "lg" | null | undefined;
+    context?: "oncolor" | "default" | null | undefined;
     justify?: "center" | "spread" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 interface Props extends VariantProps<typeof button>, React.ComponentProps<typeof ButtonPrimitive> {
@@ -13,6 +13,12 @@ interface Props extends VariantProps<typeof button>, React.ComponentProps<typeof
     startIcon?: React.ReactNode;
     /** Trailing slot, typically an icon. */
     endIcon?: React.ReactNode;
+    /**
+     * Key hint shown in the top corner at the end of the line, such as `"S"` or `"Ctrl Z"`. It also sets
+     * `aria-keyshortcuts` in its notation (`Control+Z`), which an explicit
+     * `aria-keyshortcuts` prop overrides. Display only: bind the key in the app, for example with `useHotkey` from TanStack Hotkeys.
+     */
+    shortcut?: string;
 }
 /**
  * Button
@@ -22,5 +28,5 @@ interface Props extends VariantProps<typeof button>, React.ComponentProps<typeof
  */
 export declare function Button({ variant, size, 
 /** Explicit saturated-surface context; this is never inferred from an ancestor. */
-context, chamfer, radius, justify, startIcon, endIcon, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+context, chamfer, radius, justify, startIcon, endIcon, shortcut, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,9 +1,9 @@
 import { VariantProps } from 'class-variance-authority';
 declare const root: (props?: ({
     density?: "compact" | "comfortable" | "spacious" | null | undefined;
-    variant?: "primary" | "main" | "support" | "minor" | "brand" | null | undefined;
-    shadow?: "sm" | "md" | "lg" | "none" | null | undefined;
-    radius?: "sm" | "md" | "lg" | "brand" | null | undefined;
+    variant?: "main" | "support" | "minor" | "brand" | "primary" | null | undefined;
+    shadow?: "none" | "sm" | "md" | "lg" | null | undefined;
+    radius?: "brand" | "sm" | "md" | "lg" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type RootProps = React.ComponentProps<"div"> & VariantProps<typeof root> & {

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

@@ -4,7 +4,7 @@
  * avoids cross-component imports between Chip and its siblings.
  */
 export declare const chip: (props?: ({
-    variant?: "primary" | "positive" | "negative" | "main" | "support" | "minor" | "brand" | "warning" | "info" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
+    variant?: "main" | "support" | "minor" | "brand" | "primary" | "positive" | "negative" | "warning" | "info" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
     appearance?: "outline" | "solid" | "subtle" | null | undefined;
     inline?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -3,7 +3,7 @@ import { IconComponent } from './types';
 export declare const ICON_VARIANTS: readonly ["inherit", "main", "support", "minor", "brand", "primary", "positive", "negative", "warning", "info", "oncolor", "accent-1", "accent-2", "accent-3"];
 export type IconVariant = (typeof ICON_VARIANTS)[number];
 declare const icon: (props?: ({
-    variant?: "primary" | "positive" | "negative" | "oncolor" | "main" | "inherit" | "support" | "minor" | "brand" | "warning" | "info" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
+    variant?: "inherit" | "main" | "support" | "minor" | "brand" | "primary" | "positive" | "negative" | "warning" | "info" | "oncolor" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type Props = Omit<React.ComponentProps<IconComponent>, "color"> & VariantProps<typeof icon> & {
     /** Icon component imported from `@imfusion/web-ui/icons`. */

package/dist/components/kbd/aria-key-shortcuts.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Turns a displayed shortcut such as `"Ctrl Shift Z"` into the `aria-keyshortcuts` form `"Control+Shift+Z"`, which joins
+ * the keys of one combination with `+` and reserves spaces for alternatives.
+ */
+export declare function toAriaKeyShortcuts(shortcut: string): string | undefined;

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

@@ -0,0 +1,2 @@
+export { Kbd } from './kbd';
+export { kbdMeta } from './kbd.meta';

package/dist/components/kbd/kbd.d.ts

@@ -0,0 +1,14 @@
+import { VariantProps } from 'class-variance-authority';
+declare const kbd: (props?: ({
+    variant?: "primary" | "flat" | "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface Props extends React.ComponentProps<"kbd">, VariantProps<typeof kbd> {
+    /** Show a keyboard glyph before the key, to mark it as a shortcut in running text. @default false */
+    icon?: boolean;
+}
+/**
+ * Kbd — a keyboard key or shortcut, drawn as a keycap tinted from the surrounding text. A combination such as `Ctrl Z` goes
+ * in one Kbd. `flat` drops the side face for a hint inside a control.
+ */
+export declare function Kbd({ variant, icon, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
 declare const logo: (props?: ({
     size?: "sm" | "md" | "lg" | "hero" | "xl" | "xs" | "fit" | null | undefined;
-    variant?: "oncolor" | "main" | "inherit" | "support" | "minor" | "brand" | null | undefined;
+    variant?: "inherit" | "main" | "support" | "minor" | "brand" | "oncolor" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type Props = Omit<React.ComponentProps<"span">, "children"> & VariantProps<typeof logo> & {
     /** Logo source — an image URL or inline SVG node. No brand default; see `ImFusionLogo` for the ImFusion mark. */

package/dist/components/popover/popover.d.ts

@@ -1,11 +1,11 @@
 import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 import { VariantProps } from 'class-variance-authority';
 declare const popoverTrigger: (props?: ({
-    variant?: "primary" | "secondary" | "positive" | "negative" | "outline" | "ghost" | null | undefined;
+    variant?: "primary" | "positive" | "negative" | "secondary" | "outline" | "ghost" | null | undefined;
     inline?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const popoverPopup: (props?: ({
-    variant?: "primary" | "secondary" | "positive" | "negative" | "outline" | "ghost" | null | undefined;
+    variant?: "primary" | "positive" | "negative" | "secondary" | "outline" | "ghost" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const createHandle: typeof PopoverPrimitive.createHandle;
 type RootProps<Payload = unknown> = React.ComponentProps<typeof PopoverPrimitive.Root<Payload>>;

package/dist/components/row/row.d.ts

@@ -1,8 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
 declare const row: (props?: ({
     gap?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | null | undefined;
-    align?: "center" | "end" | "start" | "stretch" | null | undefined;
-    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
+    align?: "end" | "center" | "start" | "stretch" | null | undefined;
+    justify?: "end" | "center" | "start" | "between" | "around" | "evenly" | null | undefined;
     wrap?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type Props = React.ComponentProps<"div"> & VariantProps<typeof row> & {

package/dist/components/stack/stack.d.ts

@@ -1,8 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
 declare const stack: (props?: ({
     gap?: "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | null | undefined;
-    align?: "center" | "end" | "start" | "stretch" | null | undefined;
-    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
+    align?: "end" | "center" | "start" | "stretch" | null | undefined;
+    justify?: "end" | "center" | "start" | "between" | "around" | "evenly" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type Props = React.ComponentProps<"div"> & VariantProps<typeof stack>;
 /**

package/dist/components/toggle/toggle.d.ts

@@ -1,5 +1,11 @@
 import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
 interface Props extends React.ComponentProps<typeof TogglePrimitive> {
+    /**
+     * Key hint shown in the top corner at the end of the line, such as `"P"` or `"Ctrl Z"`. It also sets
+     * `aria-keyshortcuts` in its notation (`Control+Z`), which an explicit
+     * `aria-keyshortcuts` prop overrides. Display only: bind the key in the app, for example with `useHotkey` from TanStack Hotkeys.
+     */
+    shortcut?: string;
 }
 /**
  * Toggle - a two-state button. Use standalone for a
@@ -9,5 +15,5 @@ interface Props extends React.ComponentProps<typeof TogglePrimitive> {
  * @doc https://base-ui.com/react/components/toggle
  * @llm https://base-ui.com/react/components/toggle.md
  */
-export declare function Toggle({ style, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Toggle({ style, shortcut, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/tooltip/tooltip.d.ts

@@ -2,11 +2,11 @@ import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
 import { VariantProps } from 'class-variance-authority';
 type UpstreamTrigger = React.ComponentProps<typeof TooltipPrimitive.Trigger>;
 declare const tooltipTrigger: (props?: ({
-    variant?: "primary" | "secondary" | "positive" | "negative" | null | undefined;
+    variant?: "primary" | "positive" | "negative" | "secondary" | null | undefined;
     inline?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const tooltipPopup: (props?: ({
-    variant?: "primary" | "secondary" | "positive" | "negative" | null | undefined;
+    variant?: "primary" | "positive" | "negative" | "secondary" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const createHandle: typeof TooltipPrimitive.createHandle;
 /**

package/dist/components/typo/typo.d.ts

@@ -2,7 +2,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 import { Code } from '../code';
 declare const typo: (props?: ({
-    variant?: "primary" | "positive" | "negative" | "oncolor" | "main" | "support" | "minor" | "brand" | "warning" | "info" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
+    variant?: "main" | "support" | "minor" | "brand" | "primary" | "positive" | "negative" | "warning" | "info" | "oncolor" | "accent-1" | "accent-2" | "accent-3" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TypoProps = VariantProps<typeof typo>;
 type WeightProps = {

package/dist/icons/catalog.gen.d.ts

@@ -5759,6 +5759,13 @@ export declare const ICON_CATALOG: readonly [{
     readonly style: "regular";
     readonly origin: "iconoir";
     readonly file: "regular/key-xmark.svg";
+}, {
+    readonly name: "Keyboard";
+    readonly category: "System";
+    readonly tags: readonly ["keyboard", "shortcut", "key", "hotkey", "input"];
+    readonly style: "regular";
+    readonly origin: "imfusion";
+    readonly file: "regular/keyboard.svg";
 }, {
     readonly name: "Keyframe";
     readonly category: "Animations";

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

@@ -817,6 +817,7 @@ export declare const JpgFormat: import('.').IconComponent;
 export declare const KanbanBoard: import('.').IconComponent;
 export declare const Key: import('.').IconComponent;
 export declare const KeyBack: import('.').IconComponent;
+export declare const Keyboard: import('.').IconComponent;
 export declare const KeyCommand: import('.').IconComponent;
 export declare const Keyframe: import('.').IconComponent;
 export declare const KeyframeAlignCenter: import('.').IconComponent;