@imfusion/web-ui 0.11.1-dev.47.g23180a23 → 0.11.1-dev.49.gcda1589f

package/CHANGELOG.md

@@ -14,6 +14,13 @@
   failed rows. A single-file zone shows its file with `FileDropZone.File` and `FileDropZone.Remove`, and the glyph changes to a
   page.
   [FileDropZone](src/components/file-drop-zone/file-drop-zone.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- `@imfusion/web-ui/integrations/view-tools` adds `ViewTools`: Pan, Zoom, and Windowing toggles that limit the left mouse
+  button in the ImFusion main 2D and MPR views to one action, and a button that resets the view group. `orientation` lays
+  the tools out in a row (`"horizontal"`, the default) or a column (`"vertical"`). It needs `@imfusion/sdk` 1.3.0 or later. [ViewTools](src/integrations/view-tools/view-tools.mdx)
+  ([WEBSDK-290](https://imfusion.atlassian.net/browse/WEBSDK-290)) — Stephan Wenninger <wenninger@imfusion.com>
+- `useViewInteraction` from `@imfusion/web-ui/integrations/view-tools` reads and sets the active `ViewTools` tool, so the
+  app and the toolbar share one value. `setViewInteraction("Default")` releases the tool. [ViewTools](src/integrations/view-tools/view-tools.mdx)
+  ([WEBSDK-290](https://imfusion.atlassian.net/browse/WEBSDK-290)) — Nikolaus Brunner <brunner@imfusion.com>
 - `TabNav` is a new row of links to routes with a bar under the current one, in the underline look of `Tabs`. `TabNav.Item`
   renders an `<a>`, takes a router link as `render`, and sets `aria-current="page"` from `current`.
   [TabNav](src/components/tab-nav/tab-nav.stories.tsx#InAProjectHeader) — Nikolaus Brunner <brunner@imfusion.com>
@@ -36,6 +43,11 @@
 - `@imfusion/web-ui/icons` adds four viewport layout icons in the Layout category: `LayoutAuto`, `LayoutRows`,
   `LayoutFocusPlusStack`, and `LayoutFocusPlusRows`. [Iconography](src/icons/iconography.stories.tsx#Iconography)
   — Stephan Wenninger <wenninger@imfusion.com>
+- `LayoutMode` is new, from `@imfusion/web-ui/integrations/layout-mode`. It switches the ImFusion Web SDK viewer between
+  Auto, Rows, Focus + stack, and Focus + rows through `useLayoutMode`. `variant="compact"` is a row of icon toggles and
+  `variant="labeled"` a vertical list with each mode's name beside its icon; every name can be replaced through its label
+  prop. [LayoutMode](src/integrations/layout-mode/layout-mode.mdx)
+  ([WEBSDK-292](https://imfusion.atlassian.net/browse/WEBSDK-292)) — Stephan Wenninger <wenninger@imfusion.com>
 - `Typo.UnorderedList` takes `markerVariant` to colour its dash apart from the text, such as the brand dash on main text.
   [Typo](src/components/typo/typo.stories.tsx#MarkerVariant) — Nikolaus Brunner <brunner@imfusion.com>
 - Focus ring tokens: `--imf-ui-focus-ring-width`, `--imf-ui-focus-ring-color`, and two offsets for a ring outside the

package/dist/{code-BX1Humcy.js → code-BaLXMEMa.js}

@@ -1,7 +1,7 @@
-import { s as e } from "./utils-RZJAXfcf.js";
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
 import { Xo as t, _M as n, ja as r } from "./icons-vc1WZCxX.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-CUo1NBaW.js";
+import { a, i as o, n as s, o as c, s as l } from "./scroll-area-CXQ_SxPX.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";

package/dist/icon-button-roSB497o.js

@@ -0,0 +1,171 @@
+import { _M as e } from "./icons-vc1WZCxX.js";
+import { t } from "./meta-V_KyLeGn.js";
+import { a as n, r } from "./toggle-group-eGr6_hgQ.js";
+import { a as i } from "./utils-J6vbjIt1.js";
+import { Button as a } from "@base-ui/react/button";
+import { cva as o } from "class-variance-authority";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+var l = {
+	chamfer: "imf-ui-button-module-chamfer",
+	contextOncolor: "imf-ui-button-module-contextOncolor",
+	endIcon: "imf-ui-button-module-endIcon",
+	justifySpread: "imf-ui-button-module-justifySpread",
+	label: "imf-ui-button-module-label",
+	radiusLg: "imf-ui-button-module-radiusLg",
+	radiusMd: "imf-ui-button-module-radiusMd",
+	radiusRound: "imf-ui-button-module-radiusRound",
+	radiusSm: "imf-ui-button-module-radiusSm",
+	root: "imf-ui-button-module-root",
+	shortcut: "imf-ui-button-module-shortcut",
+	sizeHero: "imf-ui-button-module-sizeHero",
+	sizeLg: "imf-ui-button-module-sizeLg",
+	sizeMd: "imf-ui-button-module-sizeMd",
+	sizeSm: "imf-ui-button-module-sizeSm",
+	startIcon: "imf-ui-button-module-startIcon",
+	variantGhost: "imf-ui-button-module-variantGhost",
+	variantNegative: "imf-ui-button-module-variantNegative",
+	variantOutline: "imf-ui-button-module-variantOutline",
+	variantPositive: "imf-ui-button-module-variantPositive",
+	variantPrimary: "imf-ui-button-module-variantPrimary",
+	variantSecondary: "imf-ui-button-module-variantSecondary"
+}, u = o(l.root, { variants: {
+	variant: {
+		primary: l.variantPrimary,
+		secondary: l.variantSecondary,
+		positive: l.variantPositive,
+		negative: l.variantNegative,
+		outline: l.variantOutline,
+		ghost: l.variantGhost
+	},
+	size: {
+		sm: l.sizeSm,
+		md: l.sizeMd,
+		lg: l.sizeLg,
+		hero: l.sizeHero
+	},
+	chamfer: {
+		false: null,
+		true: l.chamfer
+	},
+	radius: {
+		none: null,
+		sm: l.radiusSm,
+		md: l.radiusMd,
+		lg: l.radiusLg,
+		round: l.radiusRound
+	},
+	context: {
+		default: null,
+		oncolor: l.contextOncolor
+	},
+	justify: {
+		center: null,
+		spread: l.justifySpread
+	}
+} });
+function d({ variant: e = "primary", size: t = "md", context: o = "default", chamfer: d = t === "hero", radius: f = "none", justify: p = "center", startIcon: m, endIcon: h, shortcut: g, children: _, ...v }) {
+	return /* @__PURE__ */ c(a, {
+		"aria-keyshortcuts": g ? r(g) : void 0,
+		...v,
+		"data-imf-ui-component": "Button",
+		className: (n) => u({
+			variant: e,
+			size: t,
+			chamfer: d,
+			radius: f,
+			context: o,
+			justify: p,
+			className: i(v.className, n)
+		}),
+		children: [
+			m != null && /* @__PURE__ */ s("span", {
+				className: l.startIcon,
+				"aria-hidden": !0,
+				children: m
+			}),
+			/* @__PURE__ */ s("span", {
+				className: l.label,
+				children: _
+			}),
+			h != null && /* @__PURE__ */ s("span", {
+				className: l.endIcon,
+				"aria-hidden": !0,
+				children: h
+			}),
+			g && /* @__PURE__ */ s(n, {
+				variant: "flat",
+				className: l.shortcut,
+				"aria-hidden": !0,
+				children: g
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/button/button.meta.ts
+var f = {
+	name: "Button",
+	category: t.buttons,
+	status: "stable",
+	description: "Triggers an action such as submit, confirm, cancel, navigate, or delete. Also called a CTA or action button; variants and sizes communicate its importance.",
+	origin: "adapted",
+	internalDependencies: ["Kbd"],
+	upstream: {
+		name: "Base UI",
+		websiteLink: "https://base-ui.com/",
+		docLink: "https://base-ui.com/react/components/button",
+		llmDocLink: "https://base-ui.com/react/components/button.md"
+	}
+}, p = {
+	root: "imf-ui-icon-button-module-root",
+	sizeHero: "imf-ui-icon-button-module-sizeHero",
+	sizeLg: "imf-ui-icon-button-module-sizeLg",
+	sizeMd: "imf-ui-icon-button-module-sizeMd",
+	sizeSm: "imf-ui-icon-button-module-sizeSm"
+}, m = o(p.root, { variants: { size: {
+	sm: p.sizeSm,
+	md: p.sizeMd,
+	lg: p.sizeLg,
+	hero: p.sizeHero
+} } }), h = {
+	sm: 15,
+	md: 18,
+	lg: 20,
+	hero: 24
+}, g = {
+	sm: "md",
+	md: "lg",
+	lg: "hero",
+	hero: "hero"
+};
+function _({ glyph: t, label: n, iconProps: r, size: a = "md", ...o }) {
+	let c = a ?? "md", l = o.shortcut ? g[c] : c;
+	return /* @__PURE__ */ s(d, {
+		...o,
+		size: c,
+		"aria-label": n,
+		className: (e) => m({
+			size: l,
+			className: i(o.className, e)
+		}),
+		children: /* @__PURE__ */ s(e, {
+			size: h[c],
+			...r,
+			glyph: t,
+			"aria-hidden": !0
+		})
+	});
+}
+_.displayName = "IconButton";
+//#endregion
+//#region src/components/icon-button/icon-button.meta.ts
+var v = {
+	name: "IconButton",
+	category: t.buttons,
+	status: "experimental",
+	description: "Square button that shows a single icon and no visible text, with its accessible name from `label`. Also called an icon-only or toolbar button. Use Button with `startIcon` or `endIcon` when a text label is visible.",
+	origin: "native",
+	internalDependencies: ["Button", "Icon"]
+};
+//#endregion
+export { d as i, _ as n, f as r, v as t };