@imfusion/web-ui 0.8.1-dev.17.gcbf0282e → 0.8.1-dev.18.g2355b181

package/dist/tabs-9d4oaDwZ.js

@@ -0,0 +1,295 @@
+import { t as e } from "./chunk-DmhlhrBa.js";
+import { l as t, u as n } from "./slider-gyIYWSy3.js";
+import { cva as r } from "class-variance-authority";
+import { jsx as i } from "react/jsx-runtime";
+import { Children as a, useCallback as o } from "react";
+import { Switch as s } from "@base-ui/react/switch";
+import { Toggle as c } from "@base-ui/react/toggle";
+import { ToggleGroup as l } from "@base-ui/react/toggle-group";
+import { Tabs as u } from "@base-ui/react/tabs";
+var d = {
+	root: "imf-ui-switch-module-root",
+	thumb: "imf-ui-switch-module-thumb"
+}, f = /* @__PURE__ */ e({
+	Root: () => h,
+	Thumb: () => g
+}), p = r(d.root), m = r(d.thumb);
+function h(e) {
+	return /* @__PURE__ */ i(s.Root, {
+		...e,
+		"data-imf-ui-component": "Switch.Root",
+		className: (n) => p({ className: t(e.className, n) })
+	});
+}
+h.displayName = "Switch.Root";
+function g(e) {
+	return /* @__PURE__ */ i(s.Thumb, {
+		...e,
+		"data-imf-ui-component": "Switch.Thumb",
+		className: (n) => m({ className: t(e.className, n) })
+	});
+}
+g.displayName = "Switch.Thumb";
+//#endregion
+//#region src/components/toggle/toggle.tsx
+var _ = r({ root: "imf-ui-toggle-module-root" }.root), v = 2;
+function y(e) {
+	let t = 0;
+	return a.forEach(e, (e) => {
+		typeof e == "string" || typeof e == "number" ? t += String(e).trim().length : e != null && typeof e != "boolean" && (t += v);
+	}), t;
+}
+function b({ style: e, children: r, ...a }) {
+	let o = {
+		"--glyph-count": y(r),
+		"--max-glyphs": v
+	};
+	return /* @__PURE__ */ i(c, {
+		...a,
+		"data-imf-ui-component": "Toggle",
+		style: (t) => ({
+			...o,
+			...n(e, t)
+		}),
+		className: (e) => _({ className: t(a.className, e) }),
+		children: r
+	});
+}
+//#endregion
+//#region src/components/toggle-group/toggle-group.tsx
+var x = r({ root: "imf-ui-toggle-group-module-root" }.root);
+function S(e) {
+	return /* @__PURE__ */ i(l, {
+		...e,
+		"data-imf-ui-component": "ToggleGroup",
+		className: (n) => x({ className: t(e.className, n) })
+	});
+}
+var C = {
+	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"
+}, w = r(C.root, { variants: {
+	gap: {
+		1: C.gap1,
+		2: C.gap2,
+		3: C.gap3,
+		4: C.gap4,
+		5: C.gap5,
+		6: C.gap6,
+		7: C.gap7,
+		8: C.gap8,
+		9: C.gap9,
+		10: C.gap10
+	},
+	align: {
+		start: C.alignStart,
+		center: C.alignCenter,
+		end: C.alignEnd,
+		stretch: C.alignStretch
+	},
+	justify: {
+		start: C.justifyStart,
+		center: C.justifyCenter,
+		end: C.justifyEnd,
+		between: C.justifyBetween,
+		around: C.justifyAround,
+		evenly: C.justifyEvenly
+	},
+	wrap: {
+		true: C.wrap,
+		false: null
+	}
+} });
+function T({ gap: e = "2", align: t = "stretch", justify: n = "start", wrap: r = !1, ...a }) {
+	return /* @__PURE__ */ i("div", {
+		...a,
+		"data-imf-ui-component": "Row",
+		className: w({
+			gap: e,
+			align: t,
+			justify: n,
+			wrap: r,
+			className: a.className
+		})
+	});
+}
+var E = {
+	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 = r(E.root, { variants: {
+	gap: {
+		0: E.gap0,
+		1: E.gap1,
+		2: E.gap2,
+		3: E.gap3,
+		4: E.gap4,
+		5: E.gap5,
+		6: E.gap6,
+		7: E.gap7,
+		8: E.gap8,
+		9: E.gap9,
+		10: E.gap10
+	},
+	align: {
+		start: E.alignStart,
+		center: E.alignCenter,
+		end: E.alignEnd,
+		stretch: E.alignStretch
+	},
+	justify: {
+		start: E.justifyStart,
+		center: E.justifyCenter,
+		end: E.justifyEnd,
+		between: E.justifyBetween,
+		around: E.justifyAround,
+		evenly: E.justifyEvenly
+	}
+} });
+function O({ 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 k = {
+	indicator: "imf-ui-tabs-module-indicator",
+	list: "imf-ui-tabs-module-list",
+	listFill: "imf-ui-tabs-module-listFill",
+	panel: "imf-ui-tabs-module-panel",
+	panelViewport: "imf-ui-tabs-module-panelViewport",
+	root: "imf-ui-tabs-module-root",
+	tab: "imf-ui-tabs-module-tab"
+}, A = /* @__PURE__ */ e({
+	Indicator: () => H,
+	List: () => B,
+	Panel: () => W,
+	PanelViewport: () => U,
+	Root: () => z,
+	Tab: () => V
+}), j = r(k.list, { variants: { fill: {
+	true: k.listFill,
+	false: null
+} } }), M = r(k.root), N = r(k.tab), P = r(k.indicator), F = r(k.panelViewport), I = r(k.panel);
+function L(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+function R(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 z(e) {
+	return /* @__PURE__ */ i(u.Root, {
+		...e,
+		"data-imf-ui-component": "Tabs.Root",
+		className: (n) => M({ className: t(e.className, n) })
+	});
+}
+z.displayName = "Tabs.Root";
+function B({ fill: e = !1, ref: n, ...r }) {
+	let a = o((e) => {
+		if (!e) return;
+		L(n, e);
+		let t = R(e);
+		return () => {
+			t(), L(n, null);
+		};
+	}, [n]);
+	return /* @__PURE__ */ i(u.List, {
+		...r,
+		ref: a,
+		"data-imf-ui-component": "Tabs.List",
+		className: (n) => j({
+			fill: e,
+			className: t(r.className, n)
+		})
+	});
+}
+B.displayName = "Tabs.List";
+function V(e) {
+	return /* @__PURE__ */ i(u.Tab, {
+		...e,
+		"data-imf-ui-component": "Tabs.Tab",
+		className: (n) => N({ className: t(e.className, n) })
+	});
+}
+V.displayName = "Tabs.Tab";
+function H(e) {
+	return /* @__PURE__ */ i(u.Indicator, {
+		...e,
+		"data-imf-ui-component": "Tabs.Indicator",
+		className: (n) => P({ className: t(e.className, n) })
+	});
+}
+H.displayName = "Tabs.Indicator";
+function U(e) {
+	return /* @__PURE__ */ i("div", {
+		...e,
+		"data-imf-ui-component": "Tabs.PanelViewport",
+		className: F({ className: e.className })
+	});
+}
+U.displayName = "Tabs.PanelViewport";
+function W(e) {
+	return /* @__PURE__ */ i(u.Panel, {
+		...e,
+		"data-imf-ui-component": "Tabs.Panel",
+		className: (n) => I({ className: t(e.className, n) })
+	});
+}
+W.displayName = "Tabs.Panel";
+//#endregion
+export { z as a, O as c, b as d, h as f, U as i, T as l, f as m, B as n, V as o, g as p, W as r, A as s, H as t, S as u };

package/dist/vite.js

@@ -1,4 +1,4 @@
-import { n as e } from "./paths-Oi0v8x-w.js";
+import { n as e } from "./paths-CUyf9wjm.js";
 import { readFileSync as t, readdirSync as n, realpathSync as r } from "node:fs";
 import { dirname as i, join as a, resolve as o, sep as s } from "node:path";
 import { fileURLToPath as c } from "node:url";

package/dist/web-ui-cli.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { n as e, r as t, t as n } from "./paths-Oi0v8x-w.js";
+import { n as e, r as t, t as n } from "./paths-CUyf9wjm.js";
 import { chmodSync as r, cpSync as i, existsSync as a, lstatSync as o, mkdirSync as s, readFileSync as c, readdirSync as l, readlinkSync as u, realpathSync as d, rmSync as f, symlinkSync as p, writeFileSync as m } from "node:fs";
 import { dirname as h, relative as g, resolve as _ } from "node:path";
 import { Command as ee, Option as te } from "commander";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/web-ui",
-  "version": "0.8.1-dev.17.gcbf0282e",
+  "version": "0.8.1-dev.18.g2355b181",
   "description": "The official Web UI component library for ImFusion web apps",
   "author": "ImFusion GmbH",
   "homepage": "https://imfusion.com",

package/src/docgen/doc.gen.json

@@ -5569,7 +5569,7 @@
   "slider": {
     "root": {
       "name": "Slider.Root",
-      "description": "Slider.Root — value selector along a continuous or stepped track.",
+      "description": "Slider.Root — value selector along a continuous or stepped track.\n\n`variant=\"position\"` draws a scrollbar-like trough and bar thumb for picking one position\nbetween `min` and `max`, such as a slice or frame; `onValueChange` reports the position.",
       "props": [
         {
           "name": "className",
@@ -5717,6 +5717,13 @@
           "type": "number | readonly number[]",
           "defaultValue": null,
           "description": "The value of the slider.\nFor ranged sliders, provide an array with two values."
+        },
+        {
+          "name": "variant",
+          "required": false,
+          "type": "\"default\" | \"position\" | null",
+          "defaultValue": "default",
+          "description": ""
         }
       ]
     },
@@ -8349,6 +8356,43 @@
       }
     ]
   },
+  "frame-selection": {
+    "root": {
+      "name": "FrameSelection",
+      "description": "FrameSelection - a position slider bound to the focused frame of the multi-frame image sets in `data`.\nEvery matching image set follows the slider, and a `{focus} | {count}` readout sits beside it.\nRenders nothing when `data` holds no multi-frame image set.\n\nMust render inside an `ImFusionProvider`.",
+      "props": [
+        {
+          "name": "data",
+          "required": true,
+          "type": "HandleArray<Data>",
+          "defaultValue": null,
+          "description": "Datasets to scan, for example from `useVisibleData()`. Non-image data, single-frame image sets, and image sets whose\nframe count differs from the first multi-frame set are ignored."
+        },
+        {
+          "name": "disabled",
+          "required": false,
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Whether the slider ignores user interaction."
+        },
+        {
+          "name": "label",
+          "required": false,
+          "type": "string",
+          "defaultValue": "Frame",
+          "description": "Accessible name of the slider thumb."
+        },
+        {
+          "name": "orientation",
+          "required": false,
+          "type": "\"horizontal\" | \"vertical\"",
+          "defaultValue": "horizontal",
+          "description": "Direction of the slider; the vertical layout stacks the readout under it."
+        }
+      ]
+    },
+    "subComponents": []
+  },
   "image-display-options": {
     "root": {
       "name": "ImageDisplayOptions",

package/src/llms/llms.gen.txt

@@ -96,6 +96,12 @@ Semantic group for related form controls with a shared legend. Also called a for
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .fieldset (jq: jq '.fieldset' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 - further reading (usage/anatomy, not props): https://base-ui.com/react/components/fieldset.md
 
+## FrameSelection
+- category: Inputs, status: experimental
+Frame or slice picker bound to the focused frame of ImFusion image sets, with a focus and count readout. For a position picker not tied to the SDK, use Slider with variant="position".
+- props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .frame-selection (jq: jq '.frame-selection' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
+- further reading (usage/anatomy, not props): https://docs.imfusion.com/
+
 ## Icon
 - category: Display, status: stable
 Renders a Web UI icon with an optional semantic foreground color. The default inherits the surrounding currentColor.
@@ -160,7 +166,7 @@ Line that divides content horizontally or vertically. Also called a divider or r
 
 ## Slider
 - category: Inputs, status: stable
-Numeric input for choosing one value or a range by dragging a thumb. Also called a range input; use it when relative magnitude matters.
+Numeric input for choosing one value or a range by dragging a thumb. Also called a range input; use it when relative magnitude matters. The position variant is a scrubber for picking one slice or frame.
 - props: node_modules/@imfusion/web-ui/src/docgen/doc.gen.json -> .slider (jq: jq '.slider' node_modules/@imfusion/web-ui/src/docgen/doc.gen.json)
 - further reading (usage/anatomy, not props): https://base-ui.com/react/components/slider.md