@imfusion/web-ui 0.11.1-dev.48.g0fcb0d30 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.11.1-dev.48.g0fcb0d30",
+  "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

@@ -14267,5 +14267,28 @@
       ]
     },
     "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

@@ -308,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/

package/dist/tabs-EMQSqOk5.js

@@ -1,305 +0,0 @@
-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 = {
-	alignCenter: "imf-ui-stack-module-alignCenter",
-	alignEnd: "imf-ui-stack-module-alignEnd",
-	alignStart: "imf-ui-stack-module-alignStart",
-	alignStretch: "imf-ui-stack-module-alignStretch",
-	gap0: "imf-ui-stack-module-gap0",
-	gap1: "imf-ui-stack-module-gap1",
-	gap10: "imf-ui-stack-module-gap10",
-	gap2: "imf-ui-stack-module-gap2",
-	gap3: "imf-ui-stack-module-gap3",
-	gap4: "imf-ui-stack-module-gap4",
-	gap5: "imf-ui-stack-module-gap5",
-	gap6: "imf-ui-stack-module-gap6",
-	gap7: "imf-ui-stack-module-gap7",
-	gap8: "imf-ui-stack-module-gap8",
-	gap9: "imf-ui-stack-module-gap9",
-	justifyAround: "imf-ui-stack-module-justifyAround",
-	justifyBetween: "imf-ui-stack-module-justifyBetween",
-	justifyCenter: "imf-ui-stack-module-justifyCenter",
-	justifyEnd: "imf-ui-stack-module-justifyEnd",
-	justifyEvenly: "imf-ui-stack-module-justifyEvenly",
-	justifyStart: "imf-ui-stack-module-justifyStart",
-	root: "imf-ui-stack-module-root"
-}, d = n(u.root, { variants: {
-	gap: {
-		0: u.gap0,
-		1: u.gap1,
-		2: u.gap2,
-		3: u.gap3,
-		4: u.gap4,
-		5: u.gap5,
-		6: u.gap6,
-		7: u.gap7,
-		8: u.gap8,
-		9: u.gap9,
-		10: u.gap10
-	},
-	align: {
-		start: u.alignStart,
-		center: u.alignCenter,
-		end: u.alignEnd,
-		stretch: u.alignStretch
-	},
-	justify: {
-		start: u.justifyStart,
-		center: u.justifyCenter,
-		end: u.justifyEnd,
-		between: u.justifyBetween,
-		around: u.justifyAround,
-		evenly: u.justifyEvenly
-	}
-} });
-function f({ gap: e = "4", align: t = "stretch", justify: n = "start", ...r }) {
-	return /* @__PURE__ */ i("div", {
-		...r,
-		"data-imf-ui-component": "Stack",
-		className: d({
-			gap: e,
-			align: t,
-			justify: n,
-			className: r.className
-		})
-	});
-}
-var p = {
-	root: "imf-ui-switch-module-root",
-	thumb: "imf-ui-switch-module-thumb"
-}, m = /* @__PURE__ */ e({
-	Root: () => _,
-	Thumb: () => v
-}), h = n(p.root), g = n(p.thumb);
-function _(e) {
-	return /* @__PURE__ */ i(c.Root, {
-		...e,
-		"data-imf-ui-component": "Switch.Root",
-		className: (n) => h({ className: t(e.className, n) })
-	});
-}
-_.displayName = "Switch.Root";
-function v(e) {
-	return /* @__PURE__ */ i(c.Thumb, {
-		...e,
-		"data-imf-ui-component": "Switch.Thumb",
-		className: (n) => g({ className: t(e.className, n) })
-	});
-}
-v.displayName = "Switch.Thumb";
-var y = {
-	alignCenter: "imf-ui-row-module-alignCenter",
-	alignEnd: "imf-ui-row-module-alignEnd",
-	alignStart: "imf-ui-row-module-alignStart",
-	alignStretch: "imf-ui-row-module-alignStretch",
-	gap1: "imf-ui-row-module-gap1",
-	gap10: "imf-ui-row-module-gap10",
-	gap2: "imf-ui-row-module-gap2",
-	gap3: "imf-ui-row-module-gap3",
-	gap4: "imf-ui-row-module-gap4",
-	gap5: "imf-ui-row-module-gap5",
-	gap6: "imf-ui-row-module-gap6",
-	gap7: "imf-ui-row-module-gap7",
-	gap8: "imf-ui-row-module-gap8",
-	gap9: "imf-ui-row-module-gap9",
-	justifyAround: "imf-ui-row-module-justifyAround",
-	justifyBetween: "imf-ui-row-module-justifyBetween",
-	justifyCenter: "imf-ui-row-module-justifyCenter",
-	justifyEnd: "imf-ui-row-module-justifyEnd",
-	justifyEvenly: "imf-ui-row-module-justifyEvenly",
-	justifyStart: "imf-ui-row-module-justifyStart",
-	root: "imf-ui-row-module-root",
-	wrap: "imf-ui-row-module-wrap"
-}, b = n(y.root, { variants: {
-	gap: {
-		1: y.gap1,
-		2: y.gap2,
-		3: y.gap3,
-		4: y.gap4,
-		5: y.gap5,
-		6: y.gap6,
-		7: y.gap7,
-		8: y.gap8,
-		9: y.gap9,
-		10: y.gap10
-	},
-	align: {
-		start: y.alignStart,
-		center: y.alignCenter,
-		end: y.alignEnd,
-		stretch: y.alignStretch
-	},
-	justify: {
-		start: y.justifyStart,
-		center: y.justifyCenter,
-		end: y.justifyEnd,
-		between: y.justifyBetween,
-		around: y.justifyAround,
-		evenly: y.justifyEvenly
-	},
-	wrap: {
-		true: y.wrap,
-		false: null
-	}
-} });
-function x({ gap: e = "2", align: t = "stretch", justify: n = "start", wrap: r = !1, ...a }) {
-	return /* @__PURE__ */ i("div", {
-		...a,
-		"data-imf-ui-component": "Row",
-		className: b({
-			gap: e,
-			align: t,
-			justify: n,
-			wrap: r,
-			className: a.className
-		})
-	});
-}
-var S = {
-	item: "imf-ui-tabs-underline-module-item",
-	rule: "imf-ui-tabs-underline-module-rule"
-}, C = n(S.rule), w = n(S.item), T = {
-	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"
-}, E = /* @__PURE__ */ e({
-	Indicator: () => z,
-	List: () => L,
-	Panel: () => V,
-	PanelViewport: () => B,
-	Root: () => I,
-	Tab: () => R
-}), D = n(T.list, { variants: {
-	fill: {
-		true: T.listFill,
-		false: null
-	},
-	appearance: {
-		boxed: null,
-		underline: r(T.listUnderline, C())
-	}
-} }), O = n(T.root), k = n(null, { variants: { appearance: {
-	boxed: T.tab,
-	underline: r(T.tabUnderline, w())
-} } }), A = n(null, { variants: { appearance: {
-	boxed: T.indicator,
-	underline: T.indicatorUnderline
-} } }), j = n(T.panelViewport, { variants: { appearance: {
-	boxed: null,
-	underline: T.panelViewportUnderline
-} } }), M = n(T.panel, { variants: { appearance: {
-	boxed: null,
-	underline: T.panelUnderline
-} } }), N = a("boxed");
-function P(e, t) {
-	typeof e == "function" ? e(t) : e && (e.current = t);
-}
-function F(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 I({ appearance: e = "boxed", ...n }) {
-	let r = n.orientation === "vertical" ? "boxed" : e;
-	return /* @__PURE__ */ i(N, {
-		value: r,
-		children: /* @__PURE__ */ i(l.Root, {
-			...n,
-			"data-imf-ui-component": "Tabs.Root",
-			className: (e) => O({ className: t(n.className, e) })
-		})
-	});
-}
-I.displayName = "Tabs.Root";
-function L({ fill: e = !1, ref: n, ...r }) {
-	let a = s(N), c = o((e) => {
-		if (!e) return;
-		P(n, e);
-		let t = F(e);
-		return () => {
-			t(), P(n, null);
-		};
-	}, [n]);
-	return /* @__PURE__ */ i(l.List, {
-		...r,
-		ref: c,
-		"data-imf-ui-component": "Tabs.List",
-		className: (n) => D({
-			fill: e,
-			appearance: a,
-			className: t(r.className, n)
-		})
-	});
-}
-L.displayName = "Tabs.List";
-function R(e) {
-	let n = s(N);
-	return /* @__PURE__ */ i(l.Tab, {
-		...e,
-		"data-imf-ui-component": "Tabs.Tab",
-		className: (r) => k({
-			appearance: n,
-			className: t(e.className, r)
-		})
-	});
-}
-R.displayName = "Tabs.Tab";
-function z(e) {
-	let n = s(N);
-	return /* @__PURE__ */ i(l.Indicator, {
-		...e,
-		"data-imf-ui-component": "Tabs.Indicator",
-		className: (r) => A({
-			appearance: n,
-			className: t(e.className, r)
-		})
-	});
-}
-z.displayName = "Tabs.Indicator";
-function B(e) {
-	let t = s(N);
-	return /* @__PURE__ */ i("div", {
-		...e,
-		"data-imf-ui-component": "Tabs.PanelViewport",
-		className: j({
-			appearance: t,
-			className: e.className
-		})
-	});
-}
-B.displayName = "Tabs.PanelViewport";
-function V(e) {
-	let n = s(N);
-	return /* @__PURE__ */ i(l.Panel, {
-		...e,
-		"data-imf-ui-component": "Tabs.Panel",
-		className: (r) => M({
-			appearance: n,
-			className: t(e.className, r)
-		})
-	});
-}
-V.displayName = "Tabs.Panel";
-//#endregion
-export { I as a, w as c, _ as d, v as f, B as i, C as l, f as m, L as n, R as o, m as p, V as r, E as s, z as t, x as u };