@imfusion/web-ui 0.11.1-dev.47.g23180a23 → 0.11.1-dev.48.g0fcb0d30

package/dist/integrations/code-highlight.js

@@ -1,6 +1,6 @@
-import { s as e } from "../utils-RZJAXfcf.js";
+import { t as e } from "../rolldown-runtime-Dy4uBu1J.js";
 import { t } from "../meta-V_KyLeGn.js";
-import { i as n, n as r, r as i } from "../code-BX1Humcy.js";
+import { i as n, n as r, r as i } from "../code-BaLXMEMa.js";
 import { jsx as a } from "react/jsx-runtime";
 import { cloneElement as o, useMemo as s } from "react";
 import { createHighlighter as c, defineLanguage as l, renderNodesToHtml as u, renderTokens as d } from "@tanstack/highlight/core";

package/dist/integrations/frame-selection.js

@@ -1,5 +1,5 @@
 import { t as e } from "../meta-V_KyLeGn.js";
-import { a as t, i as n, o as r, t as i } from "../slider-BKDxeTmk.js";
+import { a as t, i as n, o as r, t as i } from "../slider-CpIZMAFl.js";
 import { t as a } from "../separator-BV2TR8U0.js";
 import { cva as o } from "class-variance-authority";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";

package/dist/integrations/image-display-options.js

@@ -1,7 +1,8 @@
 import { t as e } from "../meta-V_KyLeGn.js";
-import { a as t, d as n, f as r, g as i, h as a, i as o, m as s, n as c, o as l, r as u, t as d, u as f } from "../tabs-CLeLjFNy.js";
-import { t as p } from "../scroll-area-CUo1NBaW.js";
-import { a as m, i as h, n as g, o as _, r as v, s as y, t as b } from "../slider-BKDxeTmk.js";
+import { n as t, t as n } from "../toggle-group-eGr6_hgQ.js";
+import { a as r, d as i, f as a, i as o, m as s, n as c, o as l, r as u, t as d, u as f } from "../tabs-EMQSqOk5.js";
+import { t as p } from "../scroll-area-CXQ_SxPX.js";
+import { a as m, i as h, n as g, o as _, r as v, s as y, t as b } from "../slider-CpIZMAFl.js";
 import { cva as x } from "class-variance-authority";
 import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
 import { useId as T, useMemo as E, useState as D } from "react";
@@ -94,40 +95,40 @@ function R({ spec: e, value: t, row: n, onChange: r }) {
 		children: i
 	}) : i;
 }
-function z({ checked: e, row: t, onChange: i }) {
-	let a = T();
+function z({ checked: e, row: t, onChange: n }) {
+	let r = T();
 	return /* @__PURE__ */ w(f, {
 		align: "center",
 		justify: t ? "start" : "between",
 		gap: "2",
 		className: A.invertRow,
 		children: [/* @__PURE__ */ C("span", {
-			id: a,
+			id: r,
 			className: A.invertLabel,
 			children: "Invert"
-		}), /* @__PURE__ */ C(n, {
-			"aria-labelledby": a,
+		}), /* @__PURE__ */ C(i, {
+			"aria-labelledby": r,
 			checked: e,
 			onCheckedChange: (e) => {
-				i(e);
+				n(e);
 			},
-			children: /* @__PURE__ */ C(r, {})
+			children: /* @__PURE__ */ C(a, {})
 		})]
 	});
 }
-function B({ active: e, onChange: t }) {
-	return /* @__PURE__ */ w(a, {
+function B({ active: e, onChange: r }) {
+	return /* @__PURE__ */ w(n, {
 		className: A.segment,
 		"aria-label": "Display dimension",
 		value: [e],
 		onValueChange: (e) => {
-			let n = e[0];
-			(n === "2d" || n === "3d") && t(n);
+			let t = e[0];
+			(t === "2d" || t === "3d") && r(t);
 		},
-		children: [/* @__PURE__ */ C(i, {
+		children: [/* @__PURE__ */ C(t, {
 			value: "2d",
 			children: "2D"
-		}), /* @__PURE__ */ C(i, {
+		}), /* @__PURE__ */ C(t, {
 			value: "3d",
 			children: "3D"
 		})]
@@ -150,15 +151,15 @@ function V({ dimension: e, fields: t, options: n, row: r, onChange: i }) {
 		}
 	})] });
 }
-function H({ variant: e = "default", options: n, intensityRange: r, ranges: i, onOptionsChange: a, className: m, ...h }) {
-	let [g, _] = D("2d"), v = P(r, i), y = (e) => {
+function H({ variant: e = "default", options: t, intensityRange: n, ranges: i, onOptionsChange: a, className: m, ...h }) {
+	let [g, _] = D("2d"), v = P(n, i), y = (e) => {
 		_(e === "3d" ? "3d" : "2d");
 	};
 	return /* @__PURE__ */ C("div", {
 		...h,
 		"data-imf-ui-component": "ImageDisplayOptions",
 		className: L({ className: m }),
-		children: e === "default" ? /* @__PURE__ */ w(t, {
+		children: e === "default" ? /* @__PURE__ */ w(r, {
 			value: g,
 			onValueChange: y,
 			children: [/* @__PURE__ */ w(c, { children: [
@@ -178,7 +179,7 @@ function H({ variant: e = "default", options: n, intensityRange: r, ranges: i, o
 					children: /* @__PURE__ */ C(V, {
 						dimension: "2d",
 						fields: v["2d"],
-						options: n,
+						options: t,
 						row: !1,
 						onChange: a
 					})
@@ -190,13 +191,13 @@ function H({ variant: e = "default", options: n, intensityRange: r, ranges: i, o
 					children: /* @__PURE__ */ C(V, {
 						dimension: "3d",
 						fields: v["3d"],
-						options: n,
+						options: t,
 						row: !1,
 						onChange: a
 					})
 				})
 			})] })]
-		}) : e === "horizontal" ? /* @__PURE__ */ w(t, {
+		}) : e === "horizontal" ? /* @__PURE__ */ w(r, {
 			className: A.horizontalTabs,
 			orientation: "vertical",
 			value: g,
@@ -227,7 +228,7 @@ function H({ variant: e = "default", options: n, intensityRange: r, ranges: i, o
 							children: /* @__PURE__ */ C(V, {
 								dimension: "2d",
 								fields: v["2d"],
-								options: n,
+								options: t,
 								row: !0,
 								onChange: a
 							})
@@ -244,7 +245,7 @@ function H({ variant: e = "default", options: n, intensityRange: r, ranges: i, o
 							children: /* @__PURE__ */ C(V, {
 								dimension: "3d",
 								fields: v["3d"],
-								options: n,
+								options: t,
 								row: !0,
 								onChange: a
 							})
@@ -264,7 +265,7 @@ function H({ variant: e = "default", options: n, intensityRange: r, ranges: i, o
 				}), /* @__PURE__ */ C(V, {
 					dimension: g,
 					fields: v[g],
-					options: n,
+					options: t,
 					row: !0,
 					onChange: a
 				})]

package/dist/integrations/layout-mode/index.d.ts

@@ -0,0 +1,2 @@
+export { LayoutMode } from './layout-mode';
+export { layoutModeMeta } from './layout-mode.meta';

package/dist/integrations/layout-mode/layout-mode-view.d.ts

@@ -0,0 +1,32 @@
+import { VariantProps } from 'class-variance-authority';
+import { ToggleGroup } from '../../components/toggle-group';
+declare const layoutMode: (props?: ({
+    variant?: "compact" | "labeled" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** The SDK's `DisplayLayoutMode`, restated so the view stays free of SDK imports. */
+type Mode = "Auto" | "Rows" | "FocusPlusStack" | "FocusPlusRows";
+type LayoutModeViewProps = Omit<React.ComponentProps<typeof ToggleGroup>, "value" | "defaultValue" | "onValueChange" | "multiple" | "children"> & VariantProps<typeof layoutMode> & {
+    /** The pressed layout mode. */
+    mode: Mode;
+    /** Called with the mode the user picks. */
+    onModeChange: (mode: Mode) => void;
+    /** Accessible name of the group. */
+    label?: string;
+    /** Name of the toggle that lets the viewer choose between Rows and Focus + stack. */
+    autoLabel?: string;
+    /** Name of the toggle that arranges the views in up to two rows. */
+    rowsLabel?: string;
+    /** Name of the toggle that shows one large view with the others stacked beside it. */
+    focusPlusStackLabel?: string;
+    /** Name of the toggle that shows one large view with the others in rows beside it. */
+    focusPlusRowsLabel?: string;
+};
+/**
+ * LayoutModeView - the SDK-free presentational surface behind `LayoutMode`:
+ * the same toggles, driven by plain props instead of the viewer's layout mode.
+ */
+export declare function LayoutModeView({ mode, onModeChange, variant, label, autoLabel, rowsLabel, focusPlusStackLabel, focusPlusRowsLabel, orientation, className, ...props }: LayoutModeViewProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace LayoutModeView {
+    var displayName: string;
+}
+export {};

package/dist/integrations/layout-mode/layout-mode.d.ts

@@ -0,0 +1,13 @@
+import { LayoutModeView } from './layout-mode-view';
+type Props = Omit<React.ComponentProps<typeof LayoutModeView>, "mode" | "onModeChange">;
+/**
+ * LayoutMode - picks the ImFusion viewer's layout mode: Auto, Rows, Focus + stack, or Focus + rows.
+ * `compact` is a row of icon toggles; `labeled` stacks them vertically with each mode's name beside its icon.
+ *
+ * Must render inside `ImFusionReady`, within an `ImFusionProvider`.
+ */
+export declare function LayoutMode(props: Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace LayoutMode {
+    var displayName: string;
+}
+export {};

package/dist/integrations/layout-mode/layout-mode.meta.d.ts

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

package/dist/integrations/layout-mode.js

@@ -0,0 +1,103 @@
+import { Qh as e, Xh as t, Zh as n, _M as r, tg as i } from "../icons-vc1WZCxX.js";
+import { t as a } from "../meta-V_KyLeGn.js";
+import { n as o, t as s } from "../toggle-group-eGr6_hgQ.js";
+import { a as c } from "../utils-J6vbjIt1.js";
+import "../toggle-group-Bhb3qicp.js";
+import { cva as l } from "class-variance-authority";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useLayoutMode as f } from "@imfusion/sdk-react";
+var p = {
+	labeled: "imf-ui-layout-mode-module-labeled",
+	root: "imf-ui-layout-mode-module-root",
+	toggle: "imf-ui-layout-mode-module-toggle"
+}, m = l(p.root, { variants: { variant: {
+	compact: null,
+	labeled: p.labeled
+} } }), h = [
+	{
+		mode: "Auto",
+		glyph: t
+	},
+	{
+		mode: "Rows",
+		glyph: i
+	},
+	{
+		mode: "FocusPlusStack",
+		glyph: e
+	},
+	{
+		mode: "FocusPlusRows",
+		glyph: n
+	}
+];
+function g(e) {
+	return h.some((t) => t.mode === e);
+}
+function _({ mode: e, onModeChange: t, variant: n = "compact", label: i = "Layout", autoLabel: a = "Auto", rowsLabel: l = "Rows", focusPlusStackLabel: f = "Focus + stack", focusPlusRowsLabel: _ = "Focus + rows", orientation: v = "horizontal", className: y, ...b }) {
+	let x = {
+		Auto: a,
+		Rows: l,
+		FocusPlusStack: f,
+		FocusPlusRows: _
+	}, S = n === "labeled";
+	function C(e) {
+		g(e[0]) && t(e[0]);
+	}
+	return /* @__PURE__ */ u(s, {
+		"aria-label": i,
+		...b,
+		orientation: S ? "vertical" : v,
+		className: (e) => m({
+			variant: n,
+			className: c(y, e)
+		}),
+		value: [e],
+		onValueChange: C,
+		children: h.map(({ mode: e, glyph: t }) => /* @__PURE__ */ d(o, {
+			value: e,
+			"aria-label": S ? void 0 : x[e],
+			className: p.toggle,
+			children: [/* @__PURE__ */ u(r, {
+				glyph: t,
+				size: 16,
+				"aria-hidden": !0
+			}), S && x[e]]
+		}, e))
+	});
+}
+_.displayName = "LayoutModeView";
+//#endregion
+//#region src/integrations/layout-mode/layout-mode.tsx
+function v(e) {
+	let { mode: t, setMode: n } = f();
+	return /* @__PURE__ */ u(_, {
+		...e,
+		mode: t,
+		onModeChange: n
+	});
+}
+v.displayName = "LayoutMode";
+//#endregion
+//#region src/integrations/layout-mode/layout-mode.meta.ts
+var y = {
+	name: "LayoutMode",
+	category: a.inputs,
+	status: "experimental",
+	description: "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.",
+	origin: "adapted",
+	internalDependencies: [
+		"ToggleGroup",
+		"Toggle",
+		"Icon"
+	],
+	upstream: {
+		name: "ImFusion Web SDK",
+		websiteLink: "https://www.imfusion.com/",
+		docLink: "https://docs.imfusion.com/",
+		llmDocLink: "https://docs.imfusion.com/",
+		runtimeDependencies: ["@imfusion/sdk", "@imfusion/sdk-react"]
+	}
+};
+//#endregion
+export { v as LayoutMode, y as layoutModeMeta };

package/dist/rolldown-runtime-Dy4uBu1J.js

@@ -0,0 +1,11 @@
+//#region \0rolldown/runtime.js
+var e = Object.defineProperty, t = (t, n) => {
+	let r = {};
+	for (var i in t) e(r, i, {
+		get: t[i],
+		enumerable: !0
+	});
+	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
+};
+//#endregion
+export { t };

package/dist/{scroll-area-CUo1NBaW.js → scroll-area-CXQ_SxPX.js}

@@ -1,4 +1,5 @@
-import { a as e, s as t } from "./utils-RZJAXfcf.js";
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { a as t } from "./utils-J6vbjIt1.js";
 import { cva as n } from "class-variance-authority";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { ScrollArea as a } from "@base-ui/react/scroll-area";
@@ -9,7 +10,7 @@ var o = {
 	scrollbar: "imf-ui-scroll-area-module-scrollbar",
 	thumb: "imf-ui-scroll-area-module-thumb",
 	viewport: "imf-ui-scroll-area-module-viewport"
-}, s = /* @__PURE__ */ t({
+}, s = /* @__PURE__ */ e({
 	Auto: () => b,
 	Content: () => g,
 	Corner: () => y,
@@ -18,51 +19,51 @@ var o = {
 	Thumb: () => v,
 	Viewport: () => h
 }), c = n(o.root), l = n(o.viewport), u = n(o.content), d = n(o.scrollbar), f = n(o.thumb), p = n(o.corner);
-function m(t) {
+function m(e) {
 	return /* @__PURE__ */ r(a.Root, {
-		...t,
+		...e,
 		"data-imf-ui-component": "ScrollArea.Root",
-		className: (n) => c({ className: e(t.className, n) })
+		className: (n) => c({ className: t(e.className, n) })
 	});
 }
 m.displayName = "ScrollArea.Root";
-function h(t) {
+function h(e) {
 	return /* @__PURE__ */ r(a.Viewport, {
-		...t,
+		...e,
 		"data-imf-ui-component": "ScrollArea.Viewport",
-		className: (n) => l({ className: e(t.className, n) })
+		className: (n) => l({ className: t(e.className, n) })
 	});
 }
 h.displayName = "ScrollArea.Viewport";
-function g(t) {
+function g(e) {
 	return /* @__PURE__ */ r(a.Content, {
-		...t,
+		...e,
 		"data-imf-ui-component": "ScrollArea.Content",
-		className: (n) => u({ className: e(t.className, n) })
+		className: (n) => u({ className: t(e.className, n) })
 	});
 }
 g.displayName = "ScrollArea.Content";
-function _(t) {
+function _(e) {
 	return /* @__PURE__ */ r(a.Scrollbar, {
-		...t,
+		...e,
 		"data-imf-ui-component": "ScrollArea.Scrollbar",
-		className: (n) => d({ className: e(t.className, n) })
+		className: (n) => d({ className: t(e.className, n) })
 	});
 }
 _.displayName = "ScrollArea.Scrollbar";
-function v(t) {
+function v(e) {
 	return /* @__PURE__ */ r(a.Thumb, {
-		...t,
+		...e,
 		"data-imf-ui-component": "ScrollArea.Thumb",
-		className: (n) => f({ className: e(t.className, n) })
+		className: (n) => f({ className: t(e.className, n) })
 	});
 }
 v.displayName = "ScrollArea.Thumb";
-function y(t) {
+function y(e) {
 	return /* @__PURE__ */ r(a.Corner, {
-		...t,
+		...e,
 		"data-imf-ui-component": "ScrollArea.Corner",
-		className: (n) => p({ className: e(t.className, n) })
+		className: (n) => p({ className: t(e.className, n) })
 	});
 }
 y.displayName = "ScrollArea.Corner";

package/dist/{slider-BKDxeTmk.js → slider-CpIZMAFl.js}

@@ -1,4 +1,5 @@
-import { a as e, s as t } from "./utils-RZJAXfcf.js";
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { a as t } from "./utils-J6vbjIt1.js";
 import { cva as n } from "class-variance-authority";
 import { jsx as r } from "react/jsx-runtime";
 import { Slider as i } from "@base-ui/react/slider";
@@ -11,7 +12,7 @@ var a = {
 	track: "imf-ui-slider-module-track",
 	value: "imf-ui-slider-module-value",
 	variantPosition: "imf-ui-slider-module-variantPosition"
-}, o = /* @__PURE__ */ t({
+}, o = /* @__PURE__ */ e({
 	Control: () => _,
 	Indicator: () => y,
 	Label: () => h,
@@ -23,14 +24,14 @@ var a = {
 	default: null,
 	position: a.variantPosition
 } } }), c = n(a.label), l = n(a.value), u = n(a.control), d = n(a.track), f = n(a.indicator), p = n(a.thumb);
-function m({ variant: t = "default", value: n, defaultValue: a, onValueChange: o, onValueCommitted: c, min: l = 0, max: u = 100, step: d = 1, largeStep: f = 10, minStepsBetweenValues: p = 0, disabled: m = !1, orientation: h = "horizontal", name: g, form: _, locale: v, thumbAlignment: y = "edge", thumbCollisionBehavior: b = "push", format: x, ...S }) {
+function m({ variant: e = "default", value: n, defaultValue: a, onValueChange: o, onValueCommitted: c, min: l = 0, max: u = 100, step: d = 1, largeStep: f = 10, minStepsBetweenValues: p = 0, disabled: m = !1, orientation: h = "horizontal", name: g, form: _, locale: v, thumbAlignment: y = "edge", thumbCollisionBehavior: b = "push", format: x, ...S }) {
 	return /* @__PURE__ */ r(i.Root, {
 		...S,
 		"data-imf-ui-component": "Slider.Root",
 		"data-orientation": h,
 		className: (n) => s({
-			variant: t,
-			className: e(S.className, n)
+			variant: e,
+			className: t(S.className, n)
 		}),
 		value: n,
 		defaultValue: a,
@@ -52,53 +53,53 @@ function m({ variant: t = "default", value: n, defaultValue: a, onValueChange: o
 	});
 }
 m.displayName = "Slider.Root";
-function h(t) {
+function h(e) {
 	return /* @__PURE__ */ r(i.Label, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Slider.Label",
-		className: (n) => c({ className: e(t.className, n) })
+		className: (n) => c({ className: t(e.className, n) })
 	});
 }
 h.displayName = "Slider.Label";
-function g({ children: t, ...n }) {
+function g({ children: e, ...n }) {
 	return /* @__PURE__ */ r(i.Value, {
 		...n,
 		"data-imf-ui-component": "Slider.Value",
-		className: (t) => l({ className: e(n.className, t) }),
-		children: t
+		className: (e) => l({ className: t(n.className, e) }),
+		children: e
 	});
 }
 g.displayName = "Slider.Value";
-function _(t) {
+function _(e) {
 	return /* @__PURE__ */ r(i.Control, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Slider.Control",
-		className: (n) => u({ className: e(t.className, n) })
+		className: (n) => u({ className: t(e.className, n) })
 	});
 }
 _.displayName = "Slider.Control";
-function v(t) {
+function v(e) {
 	return /* @__PURE__ */ r(i.Track, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Slider.Track",
-		className: (n) => d({ className: e(t.className, n) })
+		className: (n) => d({ className: t(e.className, n) })
 	});
 }
 v.displayName = "Slider.Track";
-function y(t) {
+function y(e) {
 	return /* @__PURE__ */ r(i.Indicator, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Slider.Indicator",
-		className: (n) => f({ className: e(t.className, n) })
+		className: (n) => f({ className: t(e.className, n) })
 	});
 }
 y.displayName = "Slider.Indicator";
-function b({ index: t, ...n }) {
+function b({ index: e, ...n }) {
 	return /* @__PURE__ */ r(i.Thumb, {
 		...n,
 		"data-imf-ui-component": "Slider.Thumb",
-		className: (t) => p({ className: e(n.className, t) }),
-		index: t
+		className: (e) => p({ className: t(n.className, e) }),
+		index: e
 	});
 }
 b.displayName = "Slider.Thumb";