@imfusion/web-ui 0.11.1-dev.6.gf4b6c627 → 0.11.1-dev.62.gfcd31b6e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (93) hide show
  1. package/CHANGELOG.md +168 -1
  2. package/dist/{code-Cl9AzRyF.js → code-BaLXMEMa.js} +8 -8
  3. package/dist/components/autocomplete/autocomplete.d.ts +144 -0
  4. package/dist/components/autocomplete/autocomplete.meta.d.ts +2 -0
  5. package/dist/components/autocomplete/index.d.ts +2 -0
  6. package/dist/components/avatar/avatar.d.ts +1 -1
  7. package/dist/components/card/card.d.ts +3 -2
  8. package/dist/components/checkbox/checkbox.cva.d.ts +3 -0
  9. package/dist/components/combobox/combobox.cva.d.ts +37 -0
  10. package/dist/components/combobox/combobox.d.ts +171 -0
  11. package/dist/components/combobox/combobox.meta.d.ts +2 -0
  12. package/dist/components/combobox/index.d.ts +2 -0
  13. package/dist/components/dialog/dialog.d.ts +23 -3
  14. package/dist/components/file-drop-zone/collect-files.d.ts +56 -0
  15. package/dist/components/file-drop-zone/file-drop-zone-context.d.ts +15 -0
  16. package/dist/components/file-drop-zone/file-drop-zone.d.ts +185 -0
  17. package/dist/components/file-drop-zone/file-drop-zone.meta.d.ts +2 -0
  18. package/dist/components/file-drop-zone/format-bytes.d.ts +5 -0
  19. package/dist/components/file-drop-zone/index.d.ts +4 -0
  20. package/dist/components/image/image.d.ts +50 -0
  21. package/dist/components/image/image.meta.d.ts +2 -0
  22. package/dist/components/image/index.d.ts +2 -0
  23. package/dist/components/logo/logo.d.ts +1 -1
  24. package/dist/components/popover/popover.d.ts +2 -2
  25. package/dist/components/progress/index.d.ts +2 -0
  26. package/dist/components/progress/progress.d.ts +40 -0
  27. package/dist/components/progress/progress.meta.d.ts +2 -0
  28. package/dist/components/rich-link/rich-link.d.ts +1 -1
  29. package/dist/components/select/select.cva.d.ts +7 -0
  30. package/dist/components/select/select.d.ts +1 -1
  31. package/dist/components/tab-nav/index.d.ts +2 -0
  32. package/dist/components/tab-nav/tab-nav.d.ts +26 -0
  33. package/dist/components/tab-nav/tab-nav.meta.d.ts +2 -0
  34. package/dist/components/table/table.d.ts +8 -0
  35. package/dist/components/tabs/tabs-underline.cva.d.ts +6 -0
  36. package/dist/components/tabs/tabs.d.ts +13 -4
  37. package/dist/components/textarea/index.d.ts +2 -0
  38. package/dist/components/textarea/textarea.d.ts +32 -0
  39. package/dist/components/textarea/textarea.meta.d.ts +2 -0
  40. package/dist/components/toast/toast.d.ts +2 -2
  41. package/dist/components/typo/typo.d.ts +5 -1
  42. package/dist/docgen/component-sources.d.ts +4 -0
  43. package/dist/icon-button-roSB497o.js +171 -0
  44. package/dist/index.d.ts +9 -0
  45. package/dist/index.js +4536 -2958
  46. package/dist/integrations/code-highlight.js +2 -2
  47. package/dist/integrations/frame-selection.js +1 -1
  48. package/dist/integrations/image-display-options.js +73 -71
  49. package/dist/integrations/layout-mode/index.d.ts +2 -0
  50. package/dist/integrations/layout-mode/layout-mode-view.d.ts +32 -0
  51. package/dist/integrations/layout-mode/layout-mode.d.ts +13 -0
  52. package/dist/integrations/layout-mode/layout-mode.meta.d.ts +2 -0
  53. package/dist/integrations/layout-mode.js +103 -0
  54. package/dist/integrations/view-tools/index.d.ts +4 -0
  55. package/dist/integrations/view-tools/use-view-interaction.d.ts +21 -0
  56. package/dist/integrations/view-tools/view-tools-view.d.ts +23 -0
  57. package/dist/integrations/view-tools/view-tools.d.ts +14 -0
  58. package/dist/integrations/view-tools/view-tools.meta.d.ts +2 -0
  59. package/dist/integrations/view-tools.js +133 -0
  60. package/dist/{resolve-state-props-DQf9WiGv.js → rolldown-runtime-Dy4uBu1J.js} +1 -12
  61. package/dist/row-CImu8yXV.js +136 -0
  62. package/dist/{scroll-area-z9Lf9uIk.js → scroll-area-CXQ_SxPX.js} +2 -1
  63. package/dist/{slider-Bf274cMe.js → slider-CpIZMAFl.js} +2 -1
  64. package/dist/style.css +2 -1
  65. package/dist/tabs-BqgyMmo6.js +173 -0
  66. package/dist/toggle-group-Bhb3qicp.js +31 -0
  67. package/dist/toggle-group-eGr6_hgQ.js +125 -0
  68. package/dist/utils/email.d.ts +4 -1
  69. package/dist/utils/index.d.ts +2 -0
  70. package/dist/utils/initials.d.ts +4 -0
  71. package/dist/utils/item-parts.d.ts +23 -0
  72. package/dist/utils/stable-popup-height.d.ts +10 -0
  73. package/dist/utils-J6vbjIt1.js +46 -0
  74. package/package.json +4 -4
  75. package/src/docgen/doc.gen.json +5526 -1748
  76. package/src/llms/llms.gen.txt +52 -1
  77. package/src/llms/skills/imf-web-ui-audit/SKILL.md +5 -2
  78. package/src/llms/skills/imf-web-ui-conventions/SKILL.md +2 -2
  79. package/src/llms/skills/imf-web-ui-conventions/templates/AUDIT_CHECKLIST.md +19 -2
  80. package/src/llms/skills/imf-web-ui-conventions/topics/assets.md +28 -4
  81. package/src/llms/skills/imf-web-ui-conventions/topics/components.md +10 -0
  82. package/src/llms/skills/imf-web-ui-conventions/topics/library-boundary.md +3 -0
  83. package/src/llms/skills/imf-web-ui-conventions/topics/npm-project.md +2 -1
  84. package/src/llms/skills/imf-web-ui-conventions/topics/react/composition.md +54 -0
  85. package/src/llms/skills/imf-web-ui-conventions/topics/react/effects.md +59 -0
  86. package/src/llms/skills/imf-web-ui-conventions/topics/react/state.md +41 -0
  87. package/src/llms/skills/imf-web-ui-conventions/topics/react.md +7 -60
  88. package/src/llms/skills/imf-web-ui-conventions/topics/styling.md +22 -1
  89. package/src/llms/skills/imf-web-ui-conventions/topics/tooling.md +3 -2
  90. package/src/llms/skills/imf-web-ui-conventions/topics/validation.md +7 -0
  91. package/src/llms/skills/imf-web-ui-ux/references/forms.md +3 -2
  92. package/src/llms/tokens.gen.json +19 -1
  93. package/dist/tabs-DsDSCA--.js +0 -376
@@ -1,6 +1,6 @@
1
- import { r as e } from "../resolve-state-props-DQf9WiGv.js";
1
+ import { t as e } from "../rolldown-runtime-Dy4uBu1J.js";
2
2
  import { t } from "../meta-V_KyLeGn.js";
3
- import { i as n, n as r, r as i } from "../code-Cl9AzRyF.js";
3
+ import { i as n, n as r, r as i } from "../code-BaLXMEMa.js";
4
4
  import { jsx as a } from "react/jsx-runtime";
5
5
  import { cloneElement as o, useMemo as s } from "react";
6
6
  import { createHighlighter as c, defineLanguage as l, renderNodesToHtml as u, renderTokens as d } from "@tanstack/highlight/core";
@@ -1,5 +1,5 @@
1
1
  import { t as e } from "../meta-V_KyLeGn.js";
2
- import { a as t, i as n, o as r, t as i } from "../slider-Bf274cMe.js";
2
+ import { a as t, i as n, o as r, t as i } from "../slider-CpIZMAFl.js";
3
3
  import { t as a } from "../separator-BV2TR8U0.js";
4
4
  import { cva as o } from "class-variance-authority";
5
5
  import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
@@ -1,7 +1,9 @@
1
1
  import { t as e } from "../meta-V_KyLeGn.js";
2
- import { a as t, c as n, d as r, i, l as a, m as o, n as s, o as c, p as l, r as u, t as d, u as f } from "../tabs-DsDSCA--.js";
3
- import { a as p, i as m, n as h, o as g, r as _, s as v, t as y } from "../slider-Bf274cMe.js";
4
- import { t as b } from "../scroll-area-z9Lf9uIk.js";
2
+ import { n as t, t as n } from "../toggle-group-eGr6_hgQ.js";
3
+ import { n as r, t as i } from "../row-CImu8yXV.js";
4
+ import { t as a } from "../scroll-area-CXQ_SxPX.js";
5
+ import { a as o, i as s, n as c, o as l, r as u, s as d, t as f } from "../slider-CpIZMAFl.js";
6
+ import { a as p, d as m, i as h, n as g, o as _, r as v, t as y, u as b } from "../tabs-BqgyMmo6.js";
5
7
  import { cva as x } from "class-variance-authority";
6
8
  import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
7
9
  import { useId as T, useMemo as E, useState as D } from "react";
@@ -75,7 +77,7 @@ function I(e, t) {
75
77
  //#region src/integrations/image-display-options/image-display-options-view.tsx
76
78
  var L = x(A.root);
77
79
  function R({ spec: e, value: t, row: n, onChange: r }) {
78
- let i = /* @__PURE__ */ w(m, {
80
+ let a = /* @__PURE__ */ w(s, {
79
81
  value: t,
80
82
  min: e.min,
81
83
  max: e.max,
@@ -84,50 +86,50 @@ function R({ spec: e, value: t, row: n, onChange: r }) {
84
86
  onValueChange: (e) => {
85
87
  r(typeof e == "number" ? e : e[0]);
86
88
  },
87
- children: [/* @__PURE__ */ w(a, {
89
+ children: [/* @__PURE__ */ w(i, {
88
90
  justify: "between",
89
- children: [/* @__PURE__ */ C(_, { children: e.label }), /* @__PURE__ */ C(v, {})]
90
- }), /* @__PURE__ */ C(y, { children: /* @__PURE__ */ w(g, { children: [/* @__PURE__ */ C(h, {}), /* @__PURE__ */ C(p, { "aria-label": e.label })] }) })]
91
+ children: [/* @__PURE__ */ C(u, { children: e.label }), /* @__PURE__ */ C(d, {})]
92
+ }), /* @__PURE__ */ C(f, { children: /* @__PURE__ */ w(l, { children: [/* @__PURE__ */ C(c, {}), /* @__PURE__ */ C(o, { "aria-label": e.label })] }) })]
91
93
  });
92
94
  return n ? /* @__PURE__ */ C("div", {
93
95
  className: A.rowField,
94
- children: i
95
- }) : i;
96
+ children: a
97
+ }) : a;
96
98
  }
97
99
  function z({ checked: e, row: t, onChange: n }) {
98
- let i = T();
99
- return /* @__PURE__ */ w(a, {
100
+ let r = T();
101
+ return /* @__PURE__ */ w(i, {
100
102
  align: "center",
101
103
  justify: t ? "start" : "between",
102
104
  gap: "2",
103
105
  className: A.invertRow,
104
106
  children: [/* @__PURE__ */ C("span", {
105
- id: i,
107
+ id: r,
106
108
  className: A.invertLabel,
107
109
  children: "Invert"
108
- }), /* @__PURE__ */ C(f, {
109
- "aria-labelledby": i,
110
+ }), /* @__PURE__ */ C(b, {
111
+ "aria-labelledby": r,
110
112
  checked: e,
111
113
  onCheckedChange: (e) => {
112
114
  n(e);
113
115
  },
114
- children: /* @__PURE__ */ C(r, {})
116
+ children: /* @__PURE__ */ C(m, {})
115
117
  })]
116
118
  });
117
119
  }
118
- function B({ active: e, onChange: t }) {
119
- return /* @__PURE__ */ w(l, {
120
+ function B({ active: e, onChange: r }) {
121
+ return /* @__PURE__ */ w(n, {
120
122
  className: A.segment,
121
123
  "aria-label": "Display dimension",
122
124
  value: [e],
123
125
  onValueChange: (e) => {
124
- let n = e[0];
125
- (n === "2d" || n === "3d") && t(n);
126
+ let t = e[0];
127
+ (t === "2d" || t === "3d") && r(t);
126
128
  },
127
- children: [/* @__PURE__ */ C(o, {
129
+ children: [/* @__PURE__ */ C(t, {
128
130
  value: "2d",
129
131
  children: "2D"
130
- }), /* @__PURE__ */ C(o, {
132
+ }), /* @__PURE__ */ C(t, {
131
133
  value: "3d",
132
134
  children: "3D"
133
135
  })]
@@ -150,123 +152,123 @@ function V({ dimension: e, fields: t, options: n, row: r, onChange: i }) {
150
152
  }
151
153
  })] });
152
154
  }
153
- function H({ variant: e = "default", options: r, intensityRange: o, ranges: l, onOptionsChange: f, className: p, ...m }) {
154
- let [h, g] = D("2d"), _ = P(o, l), v = (e) => {
155
- g(e === "3d" ? "3d" : "2d");
155
+ function H({ variant: e = "default", options: t, intensityRange: n, ranges: o, onOptionsChange: s, className: c, ...l }) {
156
+ let [u, d] = D("2d"), f = P(n, o), m = (e) => {
157
+ d(e === "3d" ? "3d" : "2d");
156
158
  };
157
159
  return /* @__PURE__ */ C("div", {
158
- ...m,
160
+ ...l,
159
161
  "data-imf-ui-component": "ImageDisplayOptions",
160
- className: L({ className: p }),
161
- children: e === "default" ? /* @__PURE__ */ w(t, {
162
- value: h,
163
- onValueChange: v,
164
- children: [/* @__PURE__ */ w(s, { children: [
165
- /* @__PURE__ */ C(c, {
162
+ className: L({ className: c }),
163
+ children: e === "default" ? /* @__PURE__ */ w(p, {
164
+ value: u,
165
+ onValueChange: m,
166
+ children: [/* @__PURE__ */ w(g, { children: [
167
+ /* @__PURE__ */ C(_, {
166
168
  value: "2d",
167
169
  children: "2D Slices"
168
170
  }),
169
- /* @__PURE__ */ C(c, {
171
+ /* @__PURE__ */ C(_, {
170
172
  value: "3d",
171
173
  children: "3D Volume"
172
174
  }),
173
- /* @__PURE__ */ C(d, {})
174
- ] }), /* @__PURE__ */ w(i, { children: [/* @__PURE__ */ C(u, {
175
+ /* @__PURE__ */ C(y, {})
176
+ ] }), /* @__PURE__ */ w(h, { children: [/* @__PURE__ */ C(v, {
175
177
  value: "2d",
176
- children: /* @__PURE__ */ C(n, {
178
+ children: /* @__PURE__ */ C(r, {
177
179
  gap: "3",
178
180
  children: /* @__PURE__ */ C(V, {
179
181
  dimension: "2d",
180
- fields: _["2d"],
181
- options: r,
182
+ fields: f["2d"],
183
+ options: t,
182
184
  row: !1,
183
- onChange: f
185
+ onChange: s
184
186
  })
185
187
  })
186
- }), /* @__PURE__ */ C(u, {
188
+ }), /* @__PURE__ */ C(v, {
187
189
  value: "3d",
188
- children: /* @__PURE__ */ C(n, {
190
+ children: /* @__PURE__ */ C(r, {
189
191
  gap: "3",
190
192
  children: /* @__PURE__ */ C(V, {
191
193
  dimension: "3d",
192
- fields: _["3d"],
193
- options: r,
194
+ fields: f["3d"],
195
+ options: t,
194
196
  row: !1,
195
- onChange: f
197
+ onChange: s
196
198
  })
197
199
  })
198
200
  })] })]
199
- }) : e === "horizontal" ? /* @__PURE__ */ w(t, {
201
+ }) : e === "horizontal" ? /* @__PURE__ */ w(p, {
200
202
  className: A.horizontalTabs,
201
203
  orientation: "vertical",
202
- value: h,
203
- onValueChange: v,
204
- children: [/* @__PURE__ */ w(s, {
204
+ value: u,
205
+ onValueChange: m,
206
+ children: [/* @__PURE__ */ w(g, {
205
207
  fill: !0,
206
208
  children: [
207
- /* @__PURE__ */ C(c, {
209
+ /* @__PURE__ */ C(_, {
208
210
  value: "2d",
209
211
  children: "2D"
210
212
  }),
211
- /* @__PURE__ */ C(c, {
213
+ /* @__PURE__ */ C(_, {
212
214
  value: "3d",
213
215
  children: "3D"
214
216
  }),
215
- /* @__PURE__ */ C(d, {})
217
+ /* @__PURE__ */ C(y, {})
216
218
  ]
217
- }), /* @__PURE__ */ w(i, {
219
+ }), /* @__PURE__ */ w(h, {
218
220
  className: A.horizontalPanel,
219
- children: [/* @__PURE__ */ C(u, {
221
+ children: [/* @__PURE__ */ C(v, {
220
222
  value: "2d",
221
- children: /* @__PURE__ */ C(b, {
223
+ children: /* @__PURE__ */ C(a, {
222
224
  orientation: "horizontal",
223
225
  className: A.strip,
224
- children: /* @__PURE__ */ C(a, {
226
+ children: /* @__PURE__ */ C(i, {
225
227
  align: "center",
226
228
  gap: "3",
227
229
  children: /* @__PURE__ */ C(V, {
228
230
  dimension: "2d",
229
- fields: _["2d"],
230
- options: r,
231
+ fields: f["2d"],
232
+ options: t,
231
233
  row: !0,
232
- onChange: f
234
+ onChange: s
233
235
  })
234
236
  })
235
237
  })
236
- }), /* @__PURE__ */ C(u, {
238
+ }), /* @__PURE__ */ C(v, {
237
239
  value: "3d",
238
- children: /* @__PURE__ */ C(b, {
240
+ children: /* @__PURE__ */ C(a, {
239
241
  orientation: "horizontal",
240
242
  className: A.strip,
241
- children: /* @__PURE__ */ C(a, {
243
+ children: /* @__PURE__ */ C(i, {
242
244
  align: "center",
243
245
  gap: "3",
244
246
  children: /* @__PURE__ */ C(V, {
245
247
  dimension: "3d",
246
- fields: _["3d"],
247
- options: r,
248
+ fields: f["3d"],
249
+ options: t,
248
250
  row: !0,
249
- onChange: f
251
+ onChange: s
250
252
  })
251
253
  })
252
254
  })
253
255
  })]
254
256
  })]
255
- }) : /* @__PURE__ */ C(b, {
257
+ }) : /* @__PURE__ */ C(a, {
256
258
  orientation: "horizontal",
257
259
  className: A.strip,
258
- children: /* @__PURE__ */ w(a, {
260
+ children: /* @__PURE__ */ w(i, {
259
261
  align: "center",
260
262
  gap: "3",
261
263
  children: [/* @__PURE__ */ C(B, {
262
- active: h,
263
- onChange: g
264
+ active: u,
265
+ onChange: d
264
266
  }), /* @__PURE__ */ C(V, {
265
- dimension: h,
266
- fields: _[h],
267
- options: r,
267
+ dimension: u,
268
+ fields: f[u],
269
+ options: t,
268
270
  row: !0,
269
- onChange: f
271
+ onChange: s
270
272
  })]
271
273
  })
272
274
  })
@@ -0,0 +1,2 @@
1
+ export { LayoutMode } from './layout-mode';
2
+ export { layoutModeMeta } from './layout-mode.meta';
@@ -0,0 +1,32 @@
1
+ import { VariantProps } from 'class-variance-authority';
2
+ import { ToggleGroup } from '../../components/toggle-group';
3
+ declare const layoutMode: (props?: ({
4
+ variant?: "compact" | "labeled" | null | undefined;
5
+ } & import('class-variance-authority/types').ClassProp) | undefined) => string;
6
+ /** The SDK's `DisplayLayoutMode`, restated so the view stays free of SDK imports. */
7
+ type Mode = "Auto" | "Rows" | "FocusPlusStack" | "FocusPlusRows";
8
+ type LayoutModeViewProps = Omit<React.ComponentProps<typeof ToggleGroup>, "value" | "defaultValue" | "onValueChange" | "multiple" | "children"> & VariantProps<typeof layoutMode> & {
9
+ /** The pressed layout mode. */
10
+ mode: Mode;
11
+ /** Called with the mode the user picks. */
12
+ onModeChange: (mode: Mode) => void;
13
+ /** Accessible name of the group. */
14
+ label?: string;
15
+ /** Name of the toggle that lets the viewer choose between Rows and Focus + stack. */
16
+ autoLabel?: string;
17
+ /** Name of the toggle that arranges the views in up to two rows. */
18
+ rowsLabel?: string;
19
+ /** Name of the toggle that shows one large view with the others stacked beside it. */
20
+ focusPlusStackLabel?: string;
21
+ /** Name of the toggle that shows one large view with the others in rows beside it. */
22
+ focusPlusRowsLabel?: string;
23
+ };
24
+ /**
25
+ * LayoutModeView - the SDK-free presentational surface behind `LayoutMode`:
26
+ * the same toggles, driven by plain props instead of the viewer's layout mode.
27
+ */
28
+ export declare function LayoutModeView({ mode, onModeChange, variant, label, autoLabel, rowsLabel, focusPlusStackLabel, focusPlusRowsLabel, orientation, className, ...props }: LayoutModeViewProps): import("react/jsx-runtime").JSX.Element;
29
+ export declare namespace LayoutModeView {
30
+ var displayName: string;
31
+ }
32
+ export {};
@@ -0,0 +1,13 @@
1
+ import { LayoutModeView } from './layout-mode-view';
2
+ type Props = Omit<React.ComponentProps<typeof LayoutModeView>, "mode" | "onModeChange">;
3
+ /**
4
+ * LayoutMode - picks the ImFusion viewer's layout mode: Auto, Rows, Focus + stack, or Focus + rows.
5
+ * `compact` is a row of icon toggles; `labeled` stacks them vertically with each mode's name beside its icon.
6
+ *
7
+ * Must render inside `ImFusionReady`, within an `ImFusionProvider`.
8
+ */
9
+ export declare function LayoutMode(props: Props): import("react/jsx-runtime").JSX.Element;
10
+ export declare namespace LayoutMode {
11
+ var displayName: string;
12
+ }
13
+ export {};
@@ -0,0 +1,2 @@
1
+ import { ComponentMeta } from '../../types/meta';
2
+ export declare const layoutModeMeta: ComponentMeta;
@@ -0,0 +1,103 @@
1
+ import { Qh as e, Xh as t, Zh as n, _M as r, tg as i } from "../icons-vc1WZCxX.js";
2
+ import { t as a } from "../meta-V_KyLeGn.js";
3
+ import { n as o, t as s } from "../toggle-group-eGr6_hgQ.js";
4
+ import { a as c } from "../utils-J6vbjIt1.js";
5
+ import "../toggle-group-Bhb3qicp.js";
6
+ import { cva as l } from "class-variance-authority";
7
+ import { jsx as u, jsxs as d } from "react/jsx-runtime";
8
+ import { useLayoutMode as f } from "@imfusion/sdk-react";
9
+ var p = {
10
+ labeled: "imf-ui-layout-mode-module-labeled",
11
+ root: "imf-ui-layout-mode-module-root",
12
+ toggle: "imf-ui-layout-mode-module-toggle"
13
+ }, m = l(p.root, { variants: { variant: {
14
+ compact: null,
15
+ labeled: p.labeled
16
+ } } }), h = [
17
+ {
18
+ mode: "Auto",
19
+ glyph: t
20
+ },
21
+ {
22
+ mode: "Rows",
23
+ glyph: i
24
+ },
25
+ {
26
+ mode: "FocusPlusStack",
27
+ glyph: e
28
+ },
29
+ {
30
+ mode: "FocusPlusRows",
31
+ glyph: n
32
+ }
33
+ ];
34
+ function g(e) {
35
+ return h.some((t) => t.mode === e);
36
+ }
37
+ 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 }) {
38
+ let x = {
39
+ Auto: a,
40
+ Rows: l,
41
+ FocusPlusStack: f,
42
+ FocusPlusRows: _
43
+ }, S = n === "labeled";
44
+ function C(e) {
45
+ g(e[0]) && t(e[0]);
46
+ }
47
+ return /* @__PURE__ */ u(s, {
48
+ "aria-label": i,
49
+ ...b,
50
+ orientation: S ? "vertical" : v,
51
+ className: (e) => m({
52
+ variant: n,
53
+ className: c(y, e)
54
+ }),
55
+ value: [e],
56
+ onValueChange: C,
57
+ children: h.map(({ mode: e, glyph: t }) => /* @__PURE__ */ d(o, {
58
+ value: e,
59
+ "aria-label": S ? void 0 : x[e],
60
+ className: p.toggle,
61
+ children: [/* @__PURE__ */ u(r, {
62
+ glyph: t,
63
+ size: 16,
64
+ "aria-hidden": !0
65
+ }), S && x[e]]
66
+ }, e))
67
+ });
68
+ }
69
+ _.displayName = "LayoutModeView";
70
+ //#endregion
71
+ //#region src/integrations/layout-mode/layout-mode.tsx
72
+ function v(e) {
73
+ let { mode: t, setMode: n } = f();
74
+ return /* @__PURE__ */ u(_, {
75
+ ...e,
76
+ mode: t,
77
+ onModeChange: n
78
+ });
79
+ }
80
+ v.displayName = "LayoutMode";
81
+ //#endregion
82
+ //#region src/integrations/layout-mode/layout-mode.meta.ts
83
+ var y = {
84
+ name: "LayoutMode",
85
+ category: a.inputs,
86
+ status: "experimental",
87
+ 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.",
88
+ origin: "adapted",
89
+ internalDependencies: [
90
+ "ToggleGroup",
91
+ "Toggle",
92
+ "Icon"
93
+ ],
94
+ upstream: {
95
+ name: "ImFusion Web SDK",
96
+ websiteLink: "https://www.imfusion.com/",
97
+ docLink: "https://docs.imfusion.com/",
98
+ llmDocLink: "https://docs.imfusion.com/",
99
+ runtimeDependencies: ["@imfusion/sdk", "@imfusion/sdk-react"]
100
+ }
101
+ };
102
+ //#endregion
103
+ export { v as LayoutMode, y as layoutModeMeta };
@@ -0,0 +1,4 @@
1
+ export { useViewInteraction } from './use-view-interaction';
2
+ export { ViewTools } from './view-tools';
3
+ export type { ViewToolAction } from './view-tools-view';
4
+ export { viewToolsMeta } from './view-tools.meta';
@@ -0,0 +1,21 @@
1
+ import { SliceViewDefaultEventHandler } from '@imfusion/sdk';
2
+ import { ViewToolAction } from './view-tools-view';
3
+ type InteractiveView = {
4
+ defaultEventHandler(): Pick<SliceViewDefaultEventHandler, "limitViewInteractionTo" | "restoreDefaultInputMapping"> | null;
5
+ };
6
+ export declare function createViewInteractionStore(views: () => InteractiveView[]): {
7
+ getViewInteraction: () => ViewToolAction;
8
+ subscribe: (listener: () => void) => () => boolean;
9
+ setViewInteraction: (next: ViewToolAction) => void;
10
+ };
11
+ /**
12
+ * useViewInteraction - the tool that limits the left mouse button in the main 2D and MPR views, shared by every caller
13
+ * and by `ViewTools`. `setViewInteraction("Default")` restores the default input mapping.
14
+ *
15
+ * Must run inside `ImFusionReady`, within an `ImFusionProvider`. Needs `@imfusion/sdk` 1.3.0 or later.
16
+ */
17
+ export declare function useViewInteraction(): {
18
+ viewInteraction: ViewToolAction;
19
+ setViewInteraction: (next: ViewToolAction) => void;
20
+ };
21
+ export {};
@@ -0,0 +1,23 @@
1
+ import { SliceViewAction } from '@imfusion/sdk';
2
+ type ViewTool = Extract<SliceViewAction, "Pan" | "Zoom" | "Windowing">;
3
+ /** `Default` restores the SDK's full input mapping; every other value limits the left mouse button to that action. */
4
+ export type ViewToolAction = "Default" | ViewTool;
5
+ type ViewToolsViewProps = React.ComponentProps<"div"> & {
6
+ /** The active tool, or `"Default"` when none is pressed. */
7
+ viewInteraction: ViewToolAction;
8
+ /** Called with the pressed tool, or `"Default"` when the active tool is pressed again. */
9
+ onViewInteractionChange: (viewInteraction: ViewToolAction) => void;
10
+ /** Called when the reset button is pressed. */
11
+ onReset: () => void;
12
+ /** Lays the tools out in a row or a column. */
13
+ orientation?: "horizontal" | "vertical";
14
+ };
15
+ /**
16
+ * ViewToolsView - the SDK-free presentational surface behind `ViewTools`:
17
+ * the same toggles and reset button, driven by plain props instead of the SDK views.
18
+ */
19
+ export declare function ViewToolsView({ viewInteraction, onViewInteractionChange, onReset, orientation, "aria-label": ariaLabel, className, ...props }: ViewToolsViewProps): import("react/jsx-runtime").JSX.Element;
20
+ export declare namespace ViewToolsView {
21
+ var displayName: string;
22
+ }
23
+ export {};
@@ -0,0 +1,14 @@
1
+ import { ViewToolsView } from './view-tools-view';
2
+ type Props = Omit<React.ComponentProps<typeof ViewToolsView>, "viewInteraction" | "onViewInteractionChange" | "onReset">;
3
+ /**
4
+ * ViewTools - Pan, Zoom, and Windowing toggles that limit the left mouse button in the main 2D and MPR views to one
5
+ * action, and a button that resets the view group. Releasing the active toggle restores the default input mapping.
6
+ * The active tool is the one `useViewInteraction` reads and sets.
7
+ *
8
+ * Must render inside `ImFusionReady`, within an `ImFusionProvider`. Needs `@imfusion/sdk` 1.3.0 or later.
9
+ */
10
+ export declare function ViewTools(props: Props): import("react/jsx-runtime").JSX.Element;
11
+ export declare namespace ViewTools {
12
+ var displayName: string;
13
+ }
14
+ export {};
@@ -0,0 +1,2 @@
1
+ import { ComponentMeta } from '../../types/meta';
2
+ export declare const viewToolsMeta: ComponentMeta;
@@ -0,0 +1,133 @@
1
+ import { _M as e, ek as t, fM as n, hl as r, vC as i } from "../icons-vc1WZCxX.js";
2
+ import { t as a } from "../meta-V_KyLeGn.js";
3
+ import { n as o, t as s } from "../toggle-group-eGr6_hgQ.js";
4
+ import { n as c } from "../icon-button-roSB497o.js";
5
+ import { n as l, t as u } from "../row-CImu8yXV.js";
6
+ import { cva as d } from "class-variance-authority";
7
+ import { jsx as f, jsxs as p } from "react/jsx-runtime";
8
+ import { useSyncExternalStore as m } from "react";
9
+ import { useImFusion as h } from "@imfusion/sdk-react";
10
+ //#region src/integrations/view-tools/use-view-interaction.ts
11
+ function g(e) {
12
+ return [
13
+ e.display.main2dView(),
14
+ e.display.mainAxialView(),
15
+ e.display.mainCoronalView(),
16
+ e.display.mainSagittalView()
17
+ ];
18
+ }
19
+ function _(e) {
20
+ let t = "Default", n = /* @__PURE__ */ new Set();
21
+ return {
22
+ getViewInteraction: () => t,
23
+ subscribe: (e) => (n.add(e), () => n.delete(e)),
24
+ setViewInteraction: (r) => {
25
+ if (r !== t) {
26
+ t = r;
27
+ for (let t of e()) {
28
+ let e = t.defaultEventHandler();
29
+ r === "Default" ? e?.restoreDefaultInputMapping() : e?.limitViewInteractionTo(r);
30
+ }
31
+ for (let e of n) e();
32
+ }
33
+ }
34
+ };
35
+ }
36
+ var v = /* @__PURE__ */ new WeakMap();
37
+ function y(e) {
38
+ let t = v.get(e);
39
+ return t || (t = _(() => g(e)), v.set(e, t)), t;
40
+ }
41
+ function b() {
42
+ let { getViewInteraction: e, subscribe: t, setViewInteraction: n } = y(h());
43
+ return {
44
+ viewInteraction: m(t, e),
45
+ setViewInteraction: n
46
+ };
47
+ }
48
+ //#endregion
49
+ //#region src/integrations/view-tools/view-tools-view.tsx
50
+ var x = d({ root: "imf-ui-view-tools-module-root" }.root), S = {
51
+ Pan: r,
52
+ Zoom: n,
53
+ Windowing: t
54
+ };
55
+ function C(e) {
56
+ return typeof e == "string" && Object.hasOwn(S, e);
57
+ }
58
+ function w({ viewInteraction: t, onViewInteractionChange: n, onReset: r, orientation: a = "horizontal", "aria-label": d = "View tools", className: m, ...h }) {
59
+ let g = a === "vertical" ? l : u;
60
+ return /* @__PURE__ */ f("div", {
61
+ role: "group",
62
+ "aria-label": d,
63
+ ...h,
64
+ "data-imf-ui-component": "ViewTools",
65
+ "data-orientation": a,
66
+ className: x({ className: m }),
67
+ children: /* @__PURE__ */ p(g, {
68
+ gap: "2",
69
+ align: "center",
70
+ children: [/* @__PURE__ */ f(s, {
71
+ orientation: a,
72
+ value: t === "Default" ? [] : [t],
73
+ onValueChange: (e) => {
74
+ n(C(e[0]) ? e[0] : "Default");
75
+ },
76
+ children: Object.entries(S).map(([t, n]) => /* @__PURE__ */ f(o, {
77
+ value: t,
78
+ "aria-label": t,
79
+ children: /* @__PURE__ */ f(e, {
80
+ glyph: n,
81
+ "aria-hidden": !0
82
+ })
83
+ }, t))
84
+ }), /* @__PURE__ */ f(c, {
85
+ glyph: i,
86
+ label: "Reset view",
87
+ variant: "ghost",
88
+ onClick: r
89
+ })]
90
+ })
91
+ });
92
+ }
93
+ w.displayName = "ViewToolsView";
94
+ //#endregion
95
+ //#region src/integrations/view-tools/view-tools.tsx
96
+ function T(e) {
97
+ let t = h(), { viewInteraction: n, setViewInteraction: r } = b();
98
+ return /* @__PURE__ */ f(w, {
99
+ ...e,
100
+ viewInteraction: n,
101
+ onViewInteractionChange: r,
102
+ onReset: () => {
103
+ t.display.viewGroup().reset();
104
+ }
105
+ });
106
+ }
107
+ T.displayName = "ViewTools";
108
+ //#endregion
109
+ //#region src/integrations/view-tools/view-tools.meta.ts
110
+ var E = {
111
+ name: "ViewTools",
112
+ category: a.inputs,
113
+ status: "experimental",
114
+ description: "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.",
115
+ origin: "adapted",
116
+ internalDependencies: [
117
+ "ToggleGroup",
118
+ "Toggle",
119
+ "Icon",
120
+ "IconButton",
121
+ "Row",
122
+ "Stack"
123
+ ],
124
+ upstream: {
125
+ name: "ImFusion Web SDK",
126
+ websiteLink: "https://www.imfusion.com/",
127
+ docLink: "https://docs.imfusion.com/",
128
+ llmDocLink: "https://docs.imfusion.com/",
129
+ runtimeDependencies: ["@imfusion/sdk", "@imfusion/sdk-react"]
130
+ }
131
+ };
132
+ //#endregion
133
+ export { T as ViewTools, b as useViewInteraction, E as viewToolsMeta };
@@ -8,15 +8,4 @@ var e = Object.defineProperty, t = (t, n) => {
8
8
  return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
9
9
  };
10
10
  //#endregion
11
- //#region src/utils/resolve-state-props.ts
12
- function n(e, t) {
13
- return e instanceof Function ? e(t) : e;
14
- }
15
- function r(e, t) {
16
- return n(e, t);
17
- }
18
- function i(e, t) {
19
- return n(e, t);
20
- }
21
- //#endregion
22
- export { i as n, t as r, r as t };
11
+ export { t };