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

package/dist/tabs-BqgyMmo6.js

@@ -0,0 +1,173 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { a as t } from "./utils-J6vbjIt1.js";
+import { cva as n, cx as r } from "class-variance-authority";
+import { jsx as i } from "react/jsx-runtime";
+import { createContext as a, useCallback as o, useContext as s } from "react";
+import { Switch as c } from "@base-ui/react/switch";
+import { Tabs as l } from "@base-ui/react/tabs";
+var u = {
+	root: "imf-ui-switch-module-root",
+	thumb: "imf-ui-switch-module-thumb"
+}, d = /* @__PURE__ */ e({
+	Root: () => m,
+	Thumb: () => h
+}), f = n(u.root), p = n(u.thumb);
+function m(e) {
+	return /* @__PURE__ */ i(c.Root, {
+		...e,
+		"data-imf-ui-component": "Switch.Root",
+		className: (n) => f({ className: t(e.className, n) })
+	});
+}
+m.displayName = "Switch.Root";
+function h(e) {
+	return /* @__PURE__ */ i(c.Thumb, {
+		...e,
+		"data-imf-ui-component": "Switch.Thumb",
+		className: (n) => p({ className: t(e.className, n) })
+	});
+}
+h.displayName = "Switch.Thumb";
+var g = {
+	item: "imf-ui-tabs-underline-module-item",
+	rule: "imf-ui-tabs-underline-module-rule"
+}, _ = n(g.rule), v = n(g.item), y = {
+	indicator: "imf-ui-tabs-module-indicator",
+	indicatorUnderline: "imf-ui-tabs-module-indicatorUnderline",
+	list: "imf-ui-tabs-module-list",
+	listFill: "imf-ui-tabs-module-listFill",
+	listUnderline: "imf-ui-tabs-module-listUnderline",
+	panel: "imf-ui-tabs-module-panel",
+	panelUnderline: "imf-ui-tabs-module-panelUnderline",
+	panelViewport: "imf-ui-tabs-module-panelViewport",
+	panelViewportUnderline: "imf-ui-tabs-module-panelViewportUnderline",
+	root: "imf-ui-tabs-module-root",
+	tab: "imf-ui-tabs-module-tab",
+	tabUnderline: "imf-ui-tabs-module-tabUnderline"
+}, b = /* @__PURE__ */ e({
+	Indicator: () => N,
+	List: () => j,
+	Panel: () => F,
+	PanelViewport: () => P,
+	Root: () => A,
+	Tab: () => M
+}), x = n(y.list, { variants: {
+	fill: {
+		true: y.listFill,
+		false: null
+	},
+	appearance: {
+		boxed: null,
+		underline: r(y.listUnderline, _())
+	}
+} }), S = n(y.root), C = n(null, { variants: { appearance: {
+	boxed: y.tab,
+	underline: r(y.tabUnderline, v())
+} } }), w = n(null, { variants: { appearance: {
+	boxed: y.indicator,
+	underline: y.indicatorUnderline
+} } }), T = n(y.panelViewport, { variants: { appearance: {
+	boxed: null,
+	underline: y.panelViewportUnderline
+} } }), E = n(y.panel, { variants: { appearance: {
+	boxed: null,
+	underline: y.panelUnderline
+} } }), D = a("boxed");
+function O(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+function k(e) {
+	let t = new ResizeObserver(() => {
+		let t = e.dataset.orientation === "vertical" ? e.scrollHeight > e.clientHeight : e.scrollWidth > e.clientWidth;
+		e.toggleAttribute("data-overflowing", t);
+	}), n = () => {
+		t.disconnect(), t.observe(e);
+		for (let n of e.children) t.observe(n);
+	}, r = new MutationObserver(n);
+	return r.observe(e, { childList: !0 }), n(), () => {
+		t.disconnect(), r.disconnect();
+	};
+}
+function A({ appearance: e = "boxed", ...n }) {
+	let r = n.orientation === "vertical" ? "boxed" : e;
+	return /* @__PURE__ */ i(D, {
+		value: r,
+		children: /* @__PURE__ */ i(l.Root, {
+			...n,
+			"data-imf-ui-component": "Tabs.Root",
+			className: (e) => S({ className: t(n.className, e) })
+		})
+	});
+}
+A.displayName = "Tabs.Root";
+function j({ fill: e = !1, ref: n, ...r }) {
+	let a = s(D), c = o((e) => {
+		if (!e) return;
+		O(n, e);
+		let t = k(e);
+		return () => {
+			t(), O(n, null);
+		};
+	}, [n]);
+	return /* @__PURE__ */ i(l.List, {
+		...r,
+		ref: c,
+		"data-imf-ui-component": "Tabs.List",
+		className: (n) => x({
+			fill: e,
+			appearance: a,
+			className: t(r.className, n)
+		})
+	});
+}
+j.displayName = "Tabs.List";
+function M(e) {
+	let n = s(D);
+	return /* @__PURE__ */ i(l.Tab, {
+		...e,
+		"data-imf-ui-component": "Tabs.Tab",
+		className: (r) => C({
+			appearance: n,
+			className: t(e.className, r)
+		})
+	});
+}
+M.displayName = "Tabs.Tab";
+function N(e) {
+	let n = s(D);
+	return /* @__PURE__ */ i(l.Indicator, {
+		...e,
+		"data-imf-ui-component": "Tabs.Indicator",
+		className: (r) => w({
+			appearance: n,
+			className: t(e.className, r)
+		})
+	});
+}
+N.displayName = "Tabs.Indicator";
+function P(e) {
+	let t = s(D);
+	return /* @__PURE__ */ i("div", {
+		...e,
+		"data-imf-ui-component": "Tabs.PanelViewport",
+		className: T({
+			appearance: t,
+			className: e.className
+		})
+	});
+}
+P.displayName = "Tabs.PanelViewport";
+function F(e) {
+	let n = s(D);
+	return /* @__PURE__ */ i(l.Panel, {
+		...e,
+		"data-imf-ui-component": "Tabs.Panel",
+		className: (r) => E({
+			appearance: n,
+			className: t(e.className, r)
+		})
+	});
+}
+F.displayName = "Tabs.Panel";
+//#endregion
+export { A as a, v as c, h as d, d as f, P as i, _ as l, j as n, M as o, F as r, b as s, N as t, m as u };

package/dist/toggle-group-Bhb3qicp.js

@@ -0,0 +1,31 @@
+import { t as e } from "./meta-V_KyLeGn.js";
+import "./toggle-group-eGr6_hgQ.js";
+//#region src/components/toggle/toggle.meta.ts
+var t = {
+	name: "Toggle",
+	category: e.inputs,
+	status: "experimental",
+	description: "Two-state button for a pressed or unpressed option. Compose several in ToggleGroup for a segmented control.",
+	origin: "adapted",
+	internalDependencies: ["Kbd"],
+	upstream: {
+		name: "Base UI",
+		websiteLink: "https://base-ui.com/",
+		docLink: "https://base-ui.com/react/components/toggle",
+		llmDocLink: "https://base-ui.com/react/components/toggle.md"
+	}
+}, n = {
+	name: "ToggleGroup",
+	category: e.inputs,
+	status: "experimental",
+	description: "Group of connected Toggle buttons that share a selection. Also called a segmented control; set `multiple` for more than one active option.",
+	origin: "adapted",
+	upstream: {
+		name: "Base UI",
+		websiteLink: "https://base-ui.com/",
+		docLink: "https://base-ui.com/react/components/toggle-group",
+		llmDocLink: "https://base-ui.com/react/components/toggle-group.md"
+	}
+};
+//#endregion
+export { t as n, n as t };

package/dist/toggle-group-eGr6_hgQ.js

@@ -0,0 +1,125 @@
+import { _M as e, mh as t } from "./icons-vc1WZCxX.js";
+import { t as n } from "./meta-V_KyLeGn.js";
+import { a as r, o as i } from "./utils-J6vbjIt1.js";
+import { cva as a } from "class-variance-authority";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Children as c, createContext as l, useContext as u } from "react";
+import { Toggle as d } from "@base-ui/react/toggle";
+import { ToggleGroup as f } from "@base-ui/react/toggle-group";
+var p = {
+	flat: "imf-ui-kbd-module-flat",
+	icon: "imf-ui-kbd-module-icon",
+	primary: "imf-ui-kbd-module-primary",
+	root: "imf-ui-kbd-module-root"
+}, m = a(p.root, { variants: { variant: {
+	default: null,
+	primary: p.primary,
+	flat: p.flat
+} } });
+function h({ variant: n = "default", icon: r = !1, children: i, ...a }) {
+	return /* @__PURE__ */ s("kbd", {
+		...a,
+		"data-imf-ui-component": "Kbd",
+		className: m({
+			variant: n,
+			className: a.className
+		}),
+		children: [r && /* @__PURE__ */ o(e, {
+			glyph: t,
+			strokeWidth: 2,
+			"aria-hidden": !0,
+			className: p.icon
+		}), i]
+	});
+}
+//#endregion
+//#region src/components/kbd/kbd.meta.ts
+var g = {
+	name: "Kbd",
+	category: n.display,
+	status: "experimental",
+	description: "Shows a keyboard key or shortcut, such as the letter that activates a button. Also called a key hint; Button and Toggle render it through their `shortcut` prop.",
+	origin: "native",
+	internalDependencies: ["Icon"]
+}, _ = {
+	ctrl: "Control",
+	control: "Control",
+	cmd: "Meta",
+	"⌘": "Meta",
+	meta: "Meta",
+	opt: "Alt",
+	option: "Alt",
+	"⌥": "Alt",
+	alt: "Alt",
+	shift: "Shift",
+	"⇧": "Shift",
+	esc: "Escape",
+	escape: "Escape"
+};
+function v(e) {
+	let t = e.trim().split(/\s+/).filter(Boolean);
+	if (t.length !== 0) return t.map((e) => _[e.toLowerCase()] ?? (e.length === 1 ? e.toUpperCase() : e)).join("+");
+}
+//#endregion
+//#region src/components/toggle-group/toggle-group-size.ts
+var y = l("md"), b = {
+	root: "imf-ui-toggle-module-root",
+	shortcut: "imf-ui-toggle-module-shortcut",
+	sizeSm: "imf-ui-toggle-module-sizeSm"
+}, x = a(b.root, { variants: { size: {
+	sm: b.sizeSm,
+	md: null
+} } }), S = 2;
+function C(e) {
+	let t = 0;
+	return c.forEach(e, (e) => {
+		typeof e == "string" || typeof e == "number" ? t += String(e).trim().length : e != null && typeof e != "boolean" && (t += S);
+	}), t;
+}
+function w({ style: e, shortcut: t, size: n, children: a, ...c }) {
+	let l = u(y), f = {
+		"--glyph-count": C(a),
+		"--max-glyphs": S
+	};
+	return /* @__PURE__ */ s(d, {
+		"aria-keyshortcuts": t ? v(t) : void 0,
+		...c,
+		"data-imf-ui-component": "Toggle",
+		style: (t) => ({
+			...f,
+			...i(e, t)
+		}),
+		className: (e) => x({
+			size: n ?? l,
+			className: r(c.className, e)
+		}),
+		children: [a, t && /* @__PURE__ */ o(h, {
+			variant: "flat",
+			className: b.shortcut,
+			"aria-hidden": !0,
+			children: t
+		})]
+	});
+}
+var T = {
+	root: "imf-ui-toggle-group-module-root",
+	sizeSm: "imf-ui-toggle-group-module-sizeSm"
+}, E = a(T.root, { variants: { size: {
+	sm: T.sizeSm,
+	md: null
+} } });
+function D({ size: e = "md", ...t }) {
+	return /* @__PURE__ */ o(y.Provider, {
+		value: e ?? "md",
+		children: /* @__PURE__ */ o(f, {
+			...t,
+			"data-imf-ui-component": "ToggleGroup",
+			className: (n) => E({
+				size: e,
+				className: r(t.className, n)
+			})
+		})
+	});
+}
+//#endregion
+export { h as a, g as i, w as n, v as r, D as t };

package/dist/{utils-RZJAXfcf.js → utils-J6vbjIt1.js}

@@ -1,28 +1,18 @@
 import { createContext as e, useCallback as t, useContext as n, useEffect as r, useId as i, useMemo as a, useState as o } from "react";
-//#region \0rolldown/runtime.js
-var s = Object.defineProperty, c = (e, t) => {
-	let n = {};
-	for (var r in e) s(n, r, {
-		get: e[r],
-		enumerable: !0
-	});
-	return t || s(n, Symbol.toStringTag, { value: "Module" }), n;
-};
-//#endregion
 //#region src/utils/resolve-state-props.ts
-function l(e, t) {
+function s(e, t) {
 	return e instanceof Function ? e(t) : e;
 }
-function u(e, t) {
-	return l(e, t);
+function c(e, t) {
+	return s(e, t);
 }
-function d(e, t) {
-	return l(e, t);
+function l(e, t) {
+	return s(e, t);
 }
 //#endregion
 //#region src/utils/item-parts.tsx
-var f = e(null);
-function p() {
+var u = e(null);
+function d() {
 	let e = i(), t = i(), [n, r] = o(!1), [s, c] = o(!1);
 	return {
 		context: a(() => ({
@@ -37,13 +27,13 @@ function p() {
 		}
 	};
 }
-function m(e) {
-	let t = n(f), i = e === "label" ? t?.setHasLabel : t?.setHasDescription;
+function f(e) {
+	let t = n(u), i = e === "label" ? t?.setHasLabel : t?.setHasDescription;
 	return r(() => (i?.(!0), () => i?.(!1)), [i]), e === "label" ? t?.labelId : t?.descriptionId;
 }
 //#endregion
 //#region src/utils/stable-popup-height.ts
-function h({ ref: e }) {
+function p({ ref: e }) {
 	let [n, r] = o();
 	return {
 		ref: t((t) => {
@@ -53,4 +43,4 @@ function h({ ref: e }) {
 	};
 }
 //#endregion
-export { u as a, p as i, f as n, d as o, m as r, c as s, h as t };
+export { c as a, d as i, u as n, l as o, f as r, p as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.11.1-dev.47.g23180a23",
+  "version": "0.11.1-dev.49.gcda1589f",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",
@@ -122,8 +122,8 @@
     "commander": "15.0.0"
   },
   "devDependencies": {
-    "@imfusion/sdk": "1.0.0",
-    "@imfusion/sdk-react": "1.0.0",
+    "@imfusion/sdk": "1.3.0",
+    "@imfusion/sdk-react": "1.3.0",
     "@storybook/addon-a11y": "10.6.2",
     "@storybook/addon-docs": "10.6.2",
     "@storybook/addon-mcp": "10.6.2",

package/src/docgen/doc.gen.json

@@ -14160,5 +14160,135 @@
       ]
     },
     "subComponents": []
+  },
+  "layout-mode": {
+    "root": {
+      "name": "LayoutMode",
+      "description": "LayoutMode - picks the ImFusion viewer's layout mode: Auto, Rows, Focus + stack, or Focus + rows.\n`compact` is a row of icon toggles; `labeled` stacks them vertically with each mode's name beside its icon.\n\nMust render inside `ImFusionReady`, within an `ImFusionProvider`.",
+      "props": [
+        {
+          "name": "autoLabel",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Name of the toggle that lets the viewer choose between Rows and Focus + stack."
+        },
+        {
+          "name": "className",
+          "required": false,
+          "type": "string | ((state: ToggleGroupState) => string)",
+          "defaultValue": null,
+          "description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
+        },
+        {
+          "name": "disabled",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Whether the toggle group should ignore user interaction."
+        },
+        {
+          "name": "focusPlusRowsLabel",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Name of the toggle that shows one large view with the others in rows beside it."
+        },
+        {
+          "name": "focusPlusStackLabel",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Name of the toggle that shows one large view with the others stacked beside it."
+        },
+        {
+          "name": "label",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Accessible name of the group."
+        },
+        {
+          "name": "loopFocus",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "true",
+          "description": "Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys."
+        },
+        {
+          "name": "orientation",
+          "required": false,
+          "type": "Orientation",
+          "defaultValue": "horizontal",
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "required": false,
+          "type": "Ref<HTMLDivElement>",
+          "defaultValue": null,
+          "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+        },
+        {
+          "name": "render",
+          "required": false,
+          "type": "| ReactElement<\n    unknown,\n    string | JSXElementConstructor<any>\n  >\n| ComponentRenderFn<HTMLProps, ToggleGroupState>",
+          "defaultValue": null,
+          "description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+        },
+        {
+          "name": "rowsLabel",
+          "required": false,
+          "type": "string",
+          "defaultValue": null,
+          "description": "Name of the toggle that arranges the views in up to two rows."
+        },
+        {
+          "name": "size",
+          "required": false,
+          "type": "\"sm\" | \"md\" | null",
+          "defaultValue": null,
+          "description": ""
+        },
+        {
+          "name": "style",
+          "required": false,
+          "type": "| CSSProperties\n| ((state: ToggleGroupState) => CSSProperties)",
+          "defaultValue": null,
+          "description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
+        },
+        {
+          "name": "variant",
+          "required": false,
+          "type": "\"compact\" | \"labeled\" | null",
+          "defaultValue": null,
+          "description": ""
+        }
+      ]
+    },
+    "subComponents": []
+  },
+  "view-tools": {
+    "root": {
+      "name": "ViewTools",
+      "description": "ViewTools - Pan, Zoom, and Windowing toggles that limit the left mouse button in the main 2D and MPR views to one\naction, and a button that resets the view group. Releasing the active toggle restores the default input mapping.\nThe active tool is the one `useViewInteraction` reads and sets.\n\nMust render inside `ImFusionReady`, within an `ImFusionProvider`. Needs `@imfusion/sdk` 1.3.0 or later.",
+      "props": [
+        {
+          "name": "orientation",
+          "required": false,
+          "type": "\"horizontal\" | \"vertical\"",
+          "defaultValue": null,
+          "description": "Lays the tools out in a row or a column."
+        },
+        {
+          "name": "ref",
+          "required": false,
+          "type": "Ref<HTMLDivElement>",
+          "defaultValue": null,
+          "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
+        }
+      ]
+    },
+    "subComponents": []
   }
 }

package/src/llms/llms.gen.txt

@@ -157,6 +157,12 @@ Single-line text input for form data entry. Also called a text field; it support
 Shows a keyboard key or shortcut, such as the letter that activates a button. Also called a key hint; Button and Toggle render it through their `shortcut` prop.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .kbd (jq: jq '.kbd' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 
+## LayoutMode
+- category: Inputs, status: experimental
+Picker bound to the ImFusion viewer's layout mode: Auto, Rows, Focus + stack, or Focus + rows, as a compact icon row or a labeled vertical list. Also called a layout or view arrangement switch; for a segmented choice not tied to the SDK, use ToggleGroup.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .layout-mode (jq: jq '.layout-mode' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://docs.imfusion.com/
+
 ## Logo
 - category: Display, status: stable
 Renders a logo from a URL or inline React element with consistent sizing. Also called a wordmark or brand mark.
@@ -302,3 +308,9 @@ Hover- or focus-triggered label for brief help about a control or term. Also cal
 - category: Display, status: stable
 Semantic text primitives for display and standard headings, paragraphs, lists, quotes, links, and inline code. The namespace uses native HTML elements and token-based text roles.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .typo (jq: jq '.typo' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+
+## ViewTools
+- category: Inputs, status: experimental
+Toolbar that limits mouse interaction in the ImFusion main 2D and MPR views to pan, zoom, or windowing, with a reset button for the view group. For a segmented control not tied to the SDK, use ToggleGroup.
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .view-tools (jq: jq '.view-tools' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://docs.imfusion.com/