@imfusion/web-ui 0.5.0

package/dist/integrations/code-highlight/code-highlight.d.ts

@@ -0,0 +1,21 @@
+import { Code } from '../../components/code';
+import { SupportedLanguage } from './highlighter';
+type BlockProps = Omit<React.ComponentProps<typeof Code.Block>, "highlighted" | "language"> & {
+    /** Language of `children`: grammar for tokenization and label for the corner notch. Omit to hide the notch and skip highlighting. */
+    language?: SupportedLanguage;
+};
+/** Code.Block — the core `Code.Block` with TanStack Highlight tokens filling its `highlighted` slot. */
+export declare function Block({ language, children, ...props }: BlockProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Block {
+    var displayName: string;
+}
+type InlineProps = Omit<React.ComponentProps<typeof Code.Inline>, "highlighted"> & {
+    /** Grammar used to tokenize the fragment. Purely visual — the chip shows no language label. Omit for plain text. */
+    language?: SupportedLanguage;
+};
+/** Code.Inline — the core `Code.Inline` with TanStack Highlight tokens filling its `highlighted` slot. */
+export declare function Inline({ language, children, ...props }: InlineProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Inline {
+    var displayName: string;
+}
+export { InlineLink } from '../../components/code/code';

package/dist/integrations/code-highlight/code-highlight.meta.d.ts

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

package/dist/integrations/code-highlight/highlighter.d.ts

@@ -0,0 +1,6 @@
+export declare const SUPPORTED_LANGUAGES: readonly ["tsx", "ts", "css", "shell", "json"];
+declare const LANGUAGE_ALIASES: readonly ["typescript", "bash", "sh", "zsh", "shellscript", "scss"];
+export type SupportedLanguage = (typeof SUPPORTED_LANGUAGES)[number] | (typeof LANGUAGE_ALIASES)[number];
+export declare function isSupportedLanguage(value: string): value is SupportedLanguage;
+export declare function highlightToHtml(code: string, language: SupportedLanguage): string;
+export {};

package/dist/integrations/code-highlight/index.d.ts

@@ -0,0 +1,3 @@
+export * as Code from './code-highlight';
+export { SUPPORTED_LANGUAGES, isSupportedLanguage, type SupportedLanguage } from './highlighter';
+export { codeHighlightMeta } from './code-highlight.meta';

package/dist/integrations/code-highlight.js

@@ -0,0 +1,97 @@
+import { a as e, t } from "../meta-B8C51eyL.js";
+import { i as n, n as r, r as i } from "../code-qBbqAHK-.js";
+import { useMemo as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import { createHighlighter as s, renderNodesToHtml as c, renderTokens as l } from "@tanstack/highlight/core";
+import { css as u } from "@tanstack/highlight/languages/css";
+import { json as d } from "@tanstack/highlight/languages/json";
+import { plaintext as f } from "@tanstack/highlight/languages/plaintext";
+import { shell as p } from "@tanstack/highlight/languages/shell";
+import { ts as m } from "@tanstack/highlight/languages/ts";
+import { tsx as h } from "@tanstack/highlight/languages/tsx";
+//#region src/integrations/code-highlight/highlighter.ts
+var g = [
+	"tsx",
+	"ts",
+	"css",
+	"shell",
+	"json"
+], _ = [
+	"typescript",
+	"bash",
+	"sh",
+	"zsh",
+	"shellscript",
+	"scss"
+], v = [...g, ..._];
+function y(e) {
+	return v.includes(e);
+}
+var b = {
+	shellscript: "shell",
+	scss: "css"
+}, x = s({
+	languages: [
+		h,
+		m,
+		u,
+		p,
+		d,
+		f
+	],
+	fallbackLanguage: "plaintext"
+});
+function S(e, t) {
+	let n = b[t] ?? t, { tokens: r } = x.tokenize(e, { lang: n });
+	return c(l(r));
+}
+//#endregion
+//#region src/integrations/code-highlight/code-highlight.tsx
+var C = /* @__PURE__ */ e({
+	Block: () => T,
+	Inline: () => E,
+	InlineLink: () => n
+});
+function w(e, t) {
+	return a(() => {
+		if (!(t == null || e === "")) return /* @__PURE__ */ o("span", { dangerouslySetInnerHTML: { __html: S(e, t) } });
+	}, [e, t]);
+}
+function T({ language: e, children: t, ...n }) {
+	let i = w(t, e);
+	return /* @__PURE__ */ o(r, {
+		...n,
+		language: e,
+		highlighted: i,
+		children: t
+	});
+}
+T.displayName = "Code.Block";
+function E({ language: e, children: t, ...n }) {
+	let r = w(t, e);
+	return /* @__PURE__ */ o(i, {
+		...n,
+		highlighted: r,
+		children: t
+	});
+}
+E.displayName = "Code.Inline";
+//#endregion
+//#region src/integrations/code-highlight/code-highlight.meta.ts
+var D = {
+	name: "CodeHighlight",
+	category: t.display,
+	status: "experimental",
+	namespace: !0,
+	description: "Syntax-highlighted drop-in for the Code parts — the same Code.Block and Code.Inline, with TanStack Highlight token coloring that follows the color scheme. Imported from @imfusion/web-ui/integrations/code-highlight; requires the @tanstack/highlight peer.",
+	origin: "adapted",
+	internalDependencies: ["Code"],
+	upstream: {
+		name: "TanStack Highlight",
+		websiteLink: "https://tanstack.com/highlight",
+		docLink: "https://tanstack.com/highlight/latest/docs/overview",
+		runtimeDependencies: ["@tanstack/highlight"]
+	}
+};
+//#endregion
+export { C as Code, g as SUPPORTED_LANGUAGES, D as codeHighlightMeta, y as isSupportedLanguage };

package/dist/integrations/image-display-options/image-display-options-view.d.ts

@@ -0,0 +1,22 @@
+import { ChangeHandler, IntensityRange, Options, Ranges, Variant } from './image-display-options-view.utils';
+type ImageDisplayOptionsViewProps = React.HTMLAttributes<HTMLDivElement> & {
+    variant?: Variant;
+    /** Current option values for both dimensions. */
+    options: Options;
+    /** Dataset intensity range `[min, max]`; window/level slider bounds derive from it. */
+    intensityRange: IntensityRange;
+    /** Optional per-slider bound overrides, merged over the derived defaults. */
+    ranges?: Ranges;
+    /** Called with the dimension and the changed subset when a control moves. */
+    onOptionsChange: ChangeHandler;
+};
+/**
+ * ImageDisplayOptionsView - the SDK-free presentational surface behind
+ * `ImageDisplayOptions`: the same controls, driven by plain props instead of
+ * live SDK handles.
+ */
+export declare function ImageDisplayOptionsView({ variant, options, intensityRange, ranges, onOptionsChange, className, ...props }: ImageDisplayOptionsViewProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ImageDisplayOptionsView {
+    var displayName: string;
+}
+export {};

package/dist/integrations/image-display-options/image-display-options-view.utils.d.ts

@@ -0,0 +1,40 @@
+import { DisplayOptions2d, DisplayOptions3d, SharedImageSet } from '@imfusion/sdk';
+export type Variant = "default" | "horizontal" | "horizontal-compact";
+export type Dimension = "2d" | "3d";
+type Options2d = Pick<DisplayOptions2d, "window" | "level" | "gamma" | "invert">;
+type Options3d = Pick<DisplayOptions3d, "window" | "level" | "invert">;
+export type Options = {
+    "2d": Options2d;
+    "3d": Options3d;
+};
+/** Dataset intensity range `[min, max]` in the original pixel domain. */
+export type IntensityRange = Readonly<ReturnType<SharedImageSet["minmaxIntensityOriginal"]>>;
+export type Patch<D extends Dimension> = Partial<Options[D]>;
+export type ChangeHandler = <D extends Dimension>(dimension: D, patch: Patch<D>) => void;
+export type FieldSpec = {
+    key: "window" | "level" | "gamma";
+    label: string;
+    min: number;
+    max: number;
+    step: number;
+    format: Intl.NumberFormatOptions;
+};
+/** Per-slider bounds override. */
+type SliderRange = {
+    min?: number;
+    max?: number;
+    step?: number;
+};
+/** Optional overrides for the window/level/gamma slider bounds. */
+export type Ranges = Partial<Record<FieldSpec["key"], SliderRange>>;
+/** Determines a slider step from the intensity range. */
+export declare function sliderStep(range: number): number;
+/** Returns the number of decimal places needed to display a slider step. */
+export declare function fractionDigits(step: number): number;
+/** Derives the window, level, and gamma field specifications for an intensity range. */
+export declare function fieldsForRange([min, max]: IntensityRange, ranges?: Ranges): Record<Dimension, FieldSpec[]>;
+/** Builds a single-field patch for an option change. */
+export declare function patchFor(key: FieldSpec["key"], value: number): Partial<Options2d>;
+/** Gets a field value from either the 2D or 3D display options. */
+export declare function valueFor(opts: Options2d | Options3d, key: FieldSpec["key"]): number;
+export {};

package/dist/integrations/image-display-options/image-display-options.d.ts

@@ -0,0 +1,29 @@
+import { SharedImageSet } from '@imfusion/sdk';
+import { Ranges, Variant } from './image-display-options-view.utils';
+type Props = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The dataset whose display options are edited.
+     */
+    data: SharedImageSet;
+    /**
+     * Layout: a stacked card (`default`), a horizontal row with side tabs
+     * (`horizontal`), or a flat compact row (`horizontal-compact`).
+     */
+    variant?: Variant;
+    /**
+     * Override individual slider bounds.
+     * Merged over the defaults, which are driven from the dataset's intensity domain.
+     */
+    ranges?: Ranges;
+};
+/**
+ * ImageDisplayOptions - a panel or toolbar of controls bound to an image
+ * dataset's display options.
+ *
+ * Must render inside an `ImFusionProvider`.
+ */
+export declare function ImageDisplayOptions({ data, variant, ranges, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace ImageDisplayOptions {
+    var displayName: string;
+}
+export {};

package/dist/integrations/image-display-options/image-display-options.meta.d.ts

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

package/dist/integrations/image-display-options/index.d.ts

@@ -0,0 +1,2 @@
+export { ImageDisplayOptions } from './image-display-options';
+export { imageDisplayOptionsMeta } from './image-display-options.meta';

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

@@ -0,0 +1,319 @@
+import { n as e, t } from "../meta-B8C51eyL.js";
+import { C as n, S as r, a as i, b as a, c as o, d as s, g as c, h as l, i as u, l as d, n as f, o as p, p as m, r as h, t as g, v as _, w as v, x as y, y as b } from "../tabs-DqBFSqq6.js";
+import { useId as x, useMemo as S, useState as C } from "react";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+import { useDisplayOptions2d as D, useDisplayOptions3d as O } from "@imfusion/sdk-react";
+var k = {
+	compactStrip: "imf-ui-image-display-options-module-compactStrip",
+	horizontalPanel: "imf-ui-image-display-options-module-horizontalPanel",
+	horizontalTabs: "imf-ui-image-display-options-module-horizontalTabs",
+	invertLabel: "imf-ui-image-display-options-module-invertLabel",
+	invertRow: "imf-ui-image-display-options-module-invertRow",
+	root: "imf-ui-image-display-options-module-root",
+	rowField: "imf-ui-image-display-options-module-rowField",
+	segment: "imf-ui-image-display-options-module-segment",
+	strip: "imf-ui-image-display-options-module-strip"
+}, A = {
+	key: "gamma",
+	label: "Gamma",
+	min: .1,
+	max: 3,
+	step: .1,
+	format: { maximumFractionDigits: 1 }
+};
+function j(e) {
+	return e > 0 ? 10 ** Math.floor(Math.log10(e / 1e3)) : 1;
+}
+function M(e) {
+	return !(e > 0) || e >= 1 ? 0 : Math.ceil(-Math.log10(e));
+}
+function N([e, t], n) {
+	let r = t - e, i = j(r), a = { maximumFractionDigits: M(i) }, o = (e) => {
+		let t = n?.[e.key];
+		if (!t) return e;
+		let r = t.step ?? e.step;
+		return {
+			...e,
+			min: t.min ?? e.min,
+			max: t.max ?? e.max,
+			step: r,
+			format: t.step === void 0 ? e.format : { maximumFractionDigits: M(r) }
+		};
+	}, s = o({
+		key: "window",
+		label: "Window",
+		min: i,
+		max: Math.max(r * 2, i * 2),
+		step: i,
+		format: a
+	}), c = o({
+		key: "level",
+		label: "Level",
+		min: e,
+		max: t,
+		step: i,
+		format: a
+	});
+	return {
+		"2d": [
+			s,
+			c,
+			o(A)
+		],
+		"3d": [s, c]
+	};
+}
+function P(e, t) {
+	return e === "window" ? { window: t } : e === "level" ? { level: t } : { gamma: t };
+}
+function F(e, t) {
+	return t === "window" ? e.window : t === "level" ? e.level : "gamma" in e ? e.gamma : 0;
+}
+//#endregion
+//#region src/integrations/image-display-options/image-display-options-view.tsx
+var I = e(k.root);
+function L({ spec: e, value: t, row: i, onChange: o }) {
+	let s = /* @__PURE__ */ E(y, {
+		value: t,
+		min: e.min,
+		max: e.max,
+		step: e.step,
+		format: e.format,
+		onValueChange: (e) => {
+			o(typeof e == "number" ? e : e[0]);
+		},
+		children: [/* @__PURE__ */ E(d, {
+			justify: "between",
+			children: [/* @__PURE__ */ T(a, { children: e.label }), /* @__PURE__ */ T(v, {})]
+		}), /* @__PURE__ */ T(_, { children: /* @__PURE__ */ E(n, { children: [/* @__PURE__ */ T(b, {}), /* @__PURE__ */ T(r, { "aria-label": e.label })] }) })]
+	});
+	return i ? /* @__PURE__ */ T("div", {
+		className: k.rowField,
+		children: s
+	}) : s;
+}
+function R({ checked: e, row: t, onChange: n }) {
+	let r = x();
+	return /* @__PURE__ */ E(d, {
+		align: "center",
+		justify: t ? "start" : "between",
+		gap: "2",
+		className: k.invertRow,
+		children: [/* @__PURE__ */ T("span", {
+			id: r,
+			className: k.invertLabel,
+			children: "Invert"
+		}), /* @__PURE__ */ T(l, {
+			"aria-labelledby": r,
+			checked: e,
+			onCheckedChange: (e) => {
+				n(e);
+			},
+			children: /* @__PURE__ */ T(c, {})
+		})]
+	});
+}
+function z({ active: e, onChange: t }) {
+	return /* @__PURE__ */ E(s, {
+		className: k.segment,
+		"aria-label": "Display dimension",
+		value: [e],
+		onValueChange: (e) => {
+			let n = e[0];
+			(n === "2d" || n === "3d") && t(n);
+		},
+		children: [/* @__PURE__ */ T(m, {
+			value: "2d",
+			children: "2D"
+		}), /* @__PURE__ */ T(m, {
+			value: "3d",
+			children: "3D"
+		})]
+	});
+}
+function B({ dimension: e, fields: t, options: n, row: r, onChange: i }) {
+	let a = n[e];
+	return /* @__PURE__ */ E(w, { children: [t.map((t) => /* @__PURE__ */ T(L, {
+		spec: t,
+		value: F(a, t.key),
+		row: r,
+		onChange: (n) => {
+			i(e, P(t.key, n));
+		}
+	}, t.key)), /* @__PURE__ */ T(R, {
+		checked: a.invert,
+		row: r,
+		onChange: (t) => {
+			i(e, { invert: t });
+		}
+	})] });
+}
+function V({ variant: e = "default", options: t, intensityRange: n, ranges: r, onOptionsChange: a, className: s, ...c }) {
+	let [l, m] = C("2d"), _ = N(n, r), v = (e) => {
+		m(e === "3d" ? "3d" : "2d");
+	};
+	return /* @__PURE__ */ T("div", {
+		...c,
+		"data-imf-ui-component": "ImageDisplayOptions",
+		className: I({ className: s }),
+		children: e === "default" ? /* @__PURE__ */ E(i, {
+			value: l,
+			onValueChange: v,
+			children: [/* @__PURE__ */ E(f, { children: [
+				/* @__PURE__ */ T(p, {
+					value: "2d",
+					children: "2D Slices"
+				}),
+				/* @__PURE__ */ T(p, {
+					value: "3d",
+					children: "3D Volume"
+				}),
+				/* @__PURE__ */ T(g, {})
+			] }), /* @__PURE__ */ E(u, { children: [/* @__PURE__ */ T(h, {
+				value: "2d",
+				children: /* @__PURE__ */ T(o, {
+					gap: "3",
+					children: /* @__PURE__ */ T(B, {
+						dimension: "2d",
+						fields: _["2d"],
+						options: t,
+						row: !1,
+						onChange: a
+					})
+				})
+			}), /* @__PURE__ */ T(h, {
+				value: "3d",
+				children: /* @__PURE__ */ T(o, {
+					gap: "3",
+					children: /* @__PURE__ */ T(B, {
+						dimension: "3d",
+						fields: _["3d"],
+						options: t,
+						row: !1,
+						onChange: a
+					})
+				})
+			})] })]
+		}) : e === "horizontal" ? /* @__PURE__ */ E(i, {
+			className: k.horizontalTabs,
+			orientation: "vertical",
+			value: l,
+			onValueChange: v,
+			children: [/* @__PURE__ */ E(f, {
+				fill: !0,
+				children: [
+					/* @__PURE__ */ T(p, {
+						value: "2d",
+						children: "2D"
+					}),
+					/* @__PURE__ */ T(p, {
+						value: "3d",
+						children: "3D"
+					}),
+					/* @__PURE__ */ T(g, {})
+				]
+			}), /* @__PURE__ */ E(u, {
+				className: k.horizontalPanel,
+				children: [/* @__PURE__ */ T(h, {
+					value: "2d",
+					children: /* @__PURE__ */ T(d, {
+						align: "center",
+						gap: "3",
+						className: k.strip,
+						children: /* @__PURE__ */ T(B, {
+							dimension: "2d",
+							fields: _["2d"],
+							options: t,
+							row: !0,
+							onChange: a
+						})
+					})
+				}), /* @__PURE__ */ T(h, {
+					value: "3d",
+					children: /* @__PURE__ */ T(d, {
+						align: "center",
+						gap: "3",
+						className: k.strip,
+						children: /* @__PURE__ */ T(B, {
+							dimension: "3d",
+							fields: _["3d"],
+							options: t,
+							row: !0,
+							onChange: a
+						})
+					})
+				})]
+			})]
+		}) : /* @__PURE__ */ E(d, {
+			align: "center",
+			gap: "3",
+			className: k.compactStrip,
+			children: [/* @__PURE__ */ T(z, {
+				active: l,
+				onChange: m
+			}), /* @__PURE__ */ T(B, {
+				dimension: l,
+				fields: _[l],
+				options: t,
+				row: !0,
+				onChange: a
+			})]
+		})
+	});
+}
+V.displayName = "ImageDisplayOptionsView";
+//#endregion
+//#region src/integrations/image-display-options/image-display-options.tsx
+function H({ data: e, variant: t = "default", ranges: n, ...r }) {
+	let i = D(e), a = O(e), o = {
+		"2d": {
+			window: i.window,
+			level: i.level,
+			gamma: i.gamma,
+			invert: i.invert
+		},
+		"3d": {
+			window: a.window,
+			level: a.level,
+			invert: a.invert
+		}
+	}, s = S(() => e.minmaxIntensityOriginal(), [e]);
+	return /* @__PURE__ */ T(V, {
+		...r,
+		variant: t,
+		options: o,
+		intensityRange: s,
+		ranges: n,
+		onOptionsChange: (e, t) => {
+			Object.assign(e === "2d" ? i : a, t);
+		}
+	});
+}
+H.displayName = "ImageDisplayOptions";
+//#endregion
+//#region src/integrations/image-display-options/image-display-options.meta.ts
+var U = {
+	name: "ImageDisplayOptions",
+	category: t.inputs,
+	status: "experimental",
+	description: "A panel or toolbar of controls bound to an image dataset's display options.",
+	origin: "adapted",
+	internalDependencies: [
+		"Tabs",
+		"Slider",
+		"Switch",
+		"ToggleGroup",
+		"Toggle",
+		"Row",
+		"Stack"
+	],
+	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 { H as ImageDisplayOptions, U as imageDisplayOptionsMeta };

package/dist/llms/gen-llms.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/meta-B8C51eyL.js

@@ -0,0 +1,74 @@
+//#region \0rolldown/runtime.js
+var e = Object.defineProperty, t = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), n = (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
+//#region node_modules/clsx/dist/clsx.mjs
+function r(e) {
+	var t, n, i = "";
+	if (typeof e == "string" || typeof e == "number") i += e;
+	else if (typeof e == "object") if (Array.isArray(e)) {
+		var a = e.length;
+		for (t = 0; t < a; t++) e[t] && (n = r(e[t])) && (i && (i += " "), i += n);
+	} else for (n in e) e[n] && (i && (i += " "), i += n);
+	return i;
+}
+function i() {
+	for (var e, t, n = 0, i = "", a = arguments.length; n < a; n++) (e = arguments[n]) && (t = r(e)) && (i && (i += " "), i += t);
+	return i;
+}
+//#endregion
+//#region node_modules/class-variance-authority/dist/index.mjs
+var a = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, o = i, s = (e, t) => (n) => {
+	if (t?.variants == null) return o(e, n?.class, n?.className);
+	let { variants: r, defaultVariants: i } = t, s = Object.keys(r).map((e) => {
+		let t = n?.[e], o = i?.[e];
+		if (t === null) return null;
+		let s = a(t) || a(o);
+		return r[e][s];
+	}), c = n && Object.entries(n).reduce((e, t) => {
+		let [n, r] = t;
+		return r === void 0 || (e[n] = r), e;
+	}, {});
+	return o(e, s, t?.compoundVariants?.reduce((e, t) => {
+		let { class: n, className: r, ...a } = t;
+		return Object.entries(a).every((e) => {
+			let [t, n] = e;
+			return Array.isArray(n) ? n.includes({
+				...i,
+				...c
+			}[t]) : {
+				...i,
+				...c
+			}[t] === n;
+		}) ? [
+			...e,
+			n,
+			r
+		] : e;
+	}, []), n?.class, n?.className);
+}, c = {
+	buttons: {
+		id: "buttons",
+		label: "Buttons"
+	},
+	inputs: {
+		id: "inputs",
+		label: "Inputs"
+	},
+	layout: {
+		id: "layout",
+		label: "Layout"
+	},
+	display: {
+		id: "display",
+		label: "Display"
+	}
+};
+//#endregion
+export { n as a, t as i, s as n, o as r, c as t };

package/dist/provider/index.d.ts

@@ -0,0 +1 @@
+export { WebUIProvider } from './web-ui-provider';

package/dist/provider/web-ui-provider.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+}
+export declare function WebUIProvider({ children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};