nuxt-cornerstone 1.0.0

package/dist/runtime/components/CornerstoneViewport.vue

@@ -0,0 +1,227 @@
+<script setup>
+import { onBeforeUnmount, onMounted, ref, shallowRef, useId, watch } from "vue";
+import { ensureCornerstone, getCornerstoneOptions } from "../cornerstone";
+import { useCornerstoneTools } from "../composables/useCornerstoneTools";
+import { useRenderingEngine } from "../composables/useRenderingEngine";
+const props = defineProps({
+  imageIds: { type: Array, required: true },
+  viewportId: { type: String, required: false, default: void 0 },
+  renderingEngineId: { type: String, required: false, default: void 0 },
+  toolGroupId: { type: String, required: false, default: void 0 },
+  imageIndex: { type: Number, required: false, default: 0 },
+  background: { type: Array, required: false, default: () => [0, 0, 0] },
+  defaultTool: { type: [String, Boolean], required: false, default: "WindowLevelTool" }
+});
+const emit = defineEmits(["ready", "error", "imageRendered", "imageIndexChange"]);
+const element = ref(null);
+const viewport = shallowRef(null);
+const status = ref("loading");
+const error = shallowRef(null);
+const engines = useRenderingEngine();
+const tools = useCornerstoneTools(props.toolGroupId);
+const viewportId = props.viewportId ?? `nuxt-cornerstone-${useId()}`;
+const renderingEngineId = props.renderingEngineId ?? getCornerstoneOptions().renderingEngineId;
+let libs = null;
+let sizeObserver = null;
+let resizeObserver = null;
+let frame = 0;
+let acquired = false;
+let disposed = false;
+let settingIndex = false;
+let queuedIndex = null;
+function fail(caught) {
+  const asError = caught instanceof Error ? caught : new Error(String(caught));
+  error.value = asError;
+  status.value = "error";
+  emit("error", asError);
+}
+function waitForSize(el) {
+  if (el.clientWidth > 0 && el.clientHeight > 0) return Promise.resolve();
+  return new Promise((resolve) => {
+    sizeObserver = new ResizeObserver(() => {
+      if (el.clientWidth > 0 && el.clientHeight > 0) {
+        sizeObserver?.disconnect();
+        sizeObserver = null;
+        resolve();
+      }
+    });
+    sizeObserver.observe(el);
+  });
+}
+function observeResize(el) {
+  resizeObserver = new ResizeObserver(() => {
+    cancelAnimationFrame(frame);
+    frame = requestAnimationFrame(() => {
+      engines.get(renderingEngineId)?.resize(true, true);
+    });
+  });
+  resizeObserver.observe(el);
+}
+function onImageRendered() {
+  emit("imageRendered");
+}
+function onStackNewImage() {
+  const index = viewport.value?.getCurrentImageIdIndex();
+  if (typeof index === "number") emit("imageIndexChange", index);
+}
+function clampIndex(index, length) {
+  if (length === 0) return 0;
+  return Math.min(Math.max(index, 0), length - 1);
+}
+async function applyStack(imageIds, index) {
+  const vp = viewport.value;
+  if (!vp) return;
+  queuedIndex = null;
+  if (imageIds.length === 0) {
+    vp.setStack([]);
+    vp.render();
+    return;
+  }
+  await vp.setStack(imageIds, clampIndex(index, imageIds.length));
+  vp.render();
+}
+async function showIndex(target) {
+  if (settingIndex) {
+    queuedIndex = target;
+    return;
+  }
+  settingIndex = true;
+  try {
+    let next = target;
+    while (next !== null && !disposed) {
+      const vp = viewport.value;
+      if (!vp) return;
+      const current = next;
+      next = null;
+      if (vp.getCurrentImageIdIndex() !== current) await vp.setImageIdIndex(current);
+      if (queuedIndex !== null) {
+        next = queuedIndex;
+        queuedIndex = null;
+      }
+    }
+  } catch (caught) {
+    if (!disposed) fail(caught);
+  } finally {
+    settingIndex = false;
+  }
+}
+onMounted(async () => {
+  const el = element.value;
+  if (!el) return;
+  try {
+    libs = await ensureCornerstone();
+    await waitForSize(el);
+    if (disposed) return;
+    const { Enums } = libs.core;
+    const engine = await engines.acquire(renderingEngineId);
+    acquired = true;
+    if (disposed) return;
+    engine.enableElement({
+      viewportId,
+      element: el,
+      type: Enums.ViewportType.STACK,
+      defaultOptions: { background: props.background }
+    });
+    viewport.value = engine.getViewport(viewportId);
+    el.addEventListener(Enums.Events.IMAGE_RENDERED, onImageRendered);
+    el.addEventListener(Enums.Events.STACK_NEW_IMAGE, onStackNewImage);
+    await tools.addViewport(viewportId, renderingEngineId);
+    if (props.defaultTool) await tools.setActive(props.defaultTool);
+    observeResize(el);
+    await applyStack(props.imageIds, props.imageIndex);
+    if (disposed) return;
+    status.value = "ready";
+    emit("ready", viewport.value);
+  } catch (caught) {
+    if (!disposed) fail(caught);
+  }
+});
+watch(
+  () => props.imageIds,
+  async (imageIds) => {
+    if (!viewport.value) return;
+    try {
+      await applyStack(imageIds, props.imageIndex);
+    } catch (caught) {
+      fail(caught);
+    }
+  }
+);
+watch(
+  () => props.imageIndex,
+  (index) => {
+    const vp = viewport.value;
+    if (!vp || props.imageIds.length === 0) return;
+    const target = clampIndex(index, props.imageIds.length);
+    if (!settingIndex && vp.getCurrentImageIdIndex() === target) return;
+    showIndex(target);
+  }
+);
+onBeforeUnmount(() => {
+  disposed = true;
+  cancelAnimationFrame(frame);
+  sizeObserver?.disconnect();
+  resizeObserver?.disconnect();
+  sizeObserver = null;
+  resizeObserver = null;
+  const el = element.value;
+  if (el && libs) {
+    el.removeEventListener(libs.core.Enums.Events.IMAGE_RENDERED, onImageRendered);
+    el.removeEventListener(libs.core.Enums.Events.STACK_NEW_IMAGE, onStackNewImage);
+  }
+  tools.removeViewport(viewportId, renderingEngineId);
+  try {
+    engines.get(renderingEngineId)?.disableElement(viewportId);
+  } catch {
+  }
+  if (acquired) engines.release(renderingEngineId);
+  viewport.value = null;
+});
+defineExpose({
+  /** The Cornerstone stack viewport, once mounted. */
+  viewport,
+  viewportId,
+  renderingEngineId,
+  status,
+  error,
+  setImageIndex: async (index) => {
+    if (!viewport.value) return;
+    await showIndex(clampIndex(index, props.imageIds.length));
+  },
+  resetCamera: () => {
+    viewport.value?.resetCamera();
+    viewport.value?.render();
+  },
+  getRenderingEngine: () => engines.get(renderingEngineId)
+});
+</script>
+
+<template>
+  <!--
+    The layout this element needs to work at all is in the `<style>` block
+    below rather than in utility classes here — see the note there.
+
+    `dir="ltr"` is deliberate and should stay. In an RTL app the surrounding
+    chrome flips, but a DICOM image must not: left and right are facts about the
+    patient, and mirroring one turns a left-sided finding into a right-sided
+    one. It is written as a default rather than hard-coded, so an app that has
+    its own reason to change it still can by passing `dir` to the component.
+  -->
+  <div
+    ref="element"
+    dir="ltr"
+    class="nuxt-cornerstone-viewport"
+    :data-status="status"
+    @contextmenu.prevent
+  >
+    <slot
+      :status="status"
+      :error="error"
+      :viewport="viewport"
+    />
+  </div>
+</template>
+
+<style>
+:where(.nuxt-cornerstone-viewport){height:100%;overflow:hidden;position:relative;touch-action:none;width:100%}:where(.nuxt-cornerstone-viewport)>canvas{display:block}
+</style>

package/dist/runtime/components/CornerstoneViewport.vue.d.ts

@@ -0,0 +1,57 @@
+/**
+ * A Cornerstone3D stack viewport.
+ *
+ * Registered with `mode: 'client'`, so Nuxt never renders it on the server —
+ * WebGL, web workers and the WASM decoders have no server-side equivalent.
+ */
+type __VLS_Props = {
+    /** `wadouri:` / `wadors:` / `dicomfile:` imageIds, in display order. */
+    imageIds: string[];
+    /** Defaults to a generated id, unique per component instance. */
+    viewportId?: string;
+    renderingEngineId?: string;
+    toolGroupId?: string;
+    /** Index into `imageIds`. Two-way via the `imageIndexChange` event. */
+    imageIndex?: number;
+    /** Canvas background as RGB in 0..1. */
+    background?: [number, number, number];
+    /** Tool to bind to left-drag once mounted, or `false` to leave it alone. */
+    defaultTool?: string | false;
+};
+declare var __VLS_1: {
+    status: "ready" | "error" | "loading";
+    error: Error | null;
+    viewport: import("@cornerstonejs/core").StackViewport | null;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    /** The Cornerstone stack viewport, once mounted. */
+    viewport: import("vue").ShallowRef<import("@cornerstonejs/core").StackViewport | null, import("@cornerstonejs/core").StackViewport | null>;
+    viewportId: string;
+    renderingEngineId: string;
+    status: import("vue").Ref<"ready" | "error" | "loading", "ready" | "error" | "loading">;
+    error: import("vue").ShallowRef<Error | null, Error | null>;
+    setImageIndex: (index: number) => Promise<void>;
+    resetCamera: () => void;
+    getRenderingEngine: () => import("@cornerstonejs/core").RenderingEngine | null;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (viewport: import("@cornerstonejs/core").StackViewport) => any;
+    error: (error: Error) => any;
+    imageRendered: () => any;
+    imageIndexChange: (index: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReady?: ((viewport: import("@cornerstonejs/core").StackViewport) => any) | undefined;
+    onError?: ((error: Error) => any) | undefined;
+    onImageRendered?: (() => any) | undefined;
+    onImageIndexChange?: ((index: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/composables/useAnnotationReport.d.ts

@@ -0,0 +1,28 @@
+import type { MaybeRefOrGetter } from 'vue';
+import type { StackViewport } from '../types.js';
+export interface AnnotationReportOptions {
+    /** CSS colour for the boxes. Default: amber. */
+    color?: string;
+}
+/**
+ * Opening a JSON annotation report as a user action.
+ *
+ * {@link useDicomAnnotations} reads the file and draws the boxes; this adds the
+ * part an application always ends up writing — which file is open, whether its
+ * boxes are showing, and what to tell the reader afterwards. The interesting
+ * case is a file that parsed perfectly and placed nothing, which normally means
+ * the report was made from a different series rather than that anything went
+ * wrong, and which a bare count would not explain.
+ */
+export declare function useAnnotationReport(viewport: MaybeRefOrGetter<StackViewport | null | undefined>, options?: AnnotationReportOptions): {
+    open: (file: File) => Promise<void>;
+    toggle: () => void;
+    reset: () => void;
+    busy: import("vue").Ref<boolean, boolean>;
+    loaded: import("vue").Ref<boolean, boolean>;
+    visible: import("vue").Ref<boolean, boolean>;
+    summaryText: import("vue").ComputedRef<string | null>;
+    failure: import("vue").Ref<string | null, string | null>;
+    drawn: import("vue").Ref<number, number>;
+    pending: import("vue").Ref<number, number>;
+};

package/dist/runtime/composables/useAnnotationReport.js

@@ -0,0 +1,66 @@
+import { computed, ref } from "vue";
+import { t } from "../i18n/index.js";
+import { useDicomAnnotations } from "./useDicomAnnotations.js";
+const DEFAULT_BOX_COLOR = "rgb(251, 191, 36)";
+export function useAnnotationReport(viewport, options = {}) {
+  const { addJson, clear, setVisible, visible, drawn, pending } = useDicomAnnotations(viewport);
+  const busy = ref(false);
+  const loaded = ref(false);
+  const fileName = ref(null);
+  const failure = ref(null);
+  const stats = ref(null);
+  async function open(file) {
+    busy.value = true;
+    failure.value = null;
+    try {
+      clear();
+      const result = await addJson(file, { color: options.color ?? DEFAULT_BOX_COLOR });
+      fileName.value = file.name;
+      loaded.value = true;
+      setVisible(true);
+      stats.value = {
+        total: result.report.boxes.length,
+        placed: result.drawn + result.deferred,
+        malformed: result.report.malformed,
+        series: result.report.seriesInstanceUid
+      };
+    } catch (caught) {
+      reset();
+      failure.value = t("report.failed", {
+        file: file.name,
+        message: caught instanceof Error ? caught.message : String(caught)
+      });
+    } finally {
+      busy.value = false;
+    }
+  }
+  function toggle() {
+    setVisible(!visible.value);
+  }
+  function reset() {
+    clear();
+    loaded.value = false;
+    fileName.value = null;
+    stats.value = null;
+    failure.value = null;
+  }
+  const summaryText = computed(() => {
+    const value = stats.value;
+    if (!value || !fileName.value) return null;
+    if (value.total === 0) return t("report.empty", { file: fileName.value });
+    if (value.placed === 0) {
+      return value.series ? t("report.unmatched", { total: value.total, series: value.series }) : t("report.unmatchedNoSeries", { total: value.total });
+    }
+    const parts = [
+      t("report.summary", {
+        file: fileName.value,
+        placed: value.placed,
+        total: value.total
+      })
+    ];
+    if (pending.value > 0) parts.push(t("report.waiting", { count: pending.value }));
+    if (value.malformed > 0) parts.push(t("report.dropped", { count: value.malformed }));
+    return parts.join(" ");
+  });
+  return { open, toggle, reset, busy, loaded, visible, summaryText, failure, drawn, pending };
+}

package/dist/runtime/composables/useCinePlayer.d.ts

@@ -0,0 +1,52 @@
+import type { MaybeRefOrGetter, Ref } from 'vue';
+export interface CinePlayerOptions {
+    /** Frames per second. Default: `15`, and clamped to {@link FRAME_RATE_RANGE}. */
+    frameRate?: number;
+    /** Start again from the other end instead of stopping. Default: `true`. */
+    loop?: boolean;
+    /**
+     * Reverse at each end rather than jumping back. Default: `false`.
+     *
+     * This is what a cardiac cine wants — a short loop read back and forth reads
+     * as motion, where the jump from last frame to first reads as a glitch.
+     */
+    bounce?: boolean;
+    /** `1` plays towards the last image, `-1` towards the first. Default: `1`. */
+    direction?: 1 | -1;
+}
+/** What {@link useCinePlayer} will accept as a frame rate. */
+export declare const FRAME_RATE_RANGE: {
+    readonly min: 1;
+    readonly max: 60;
+};
+/**
+ * Play a stack as a film.
+ *
+ * The player owns no images and no viewport: it advances the index ref it is
+ * given, on a wall-clock schedule, and whatever is bound to that index follows.
+ * That keeps it usable with `<CornerstoneViewport v-model>`-style bindings, a
+ * scrubber, keyboard stepping and anything else, all moving the same value.
+ *
+ * Frames are paced with `requestAnimationFrame` rather than `setInterval`,
+ * which buys two things: the schedule is measured against the clock so it does
+ * not drift, and a backgrounded tab stops advancing instead of spending the
+ * battery on frames nobody is watching.
+ *
+ * Nothing here waits for an image to decode. A frame the loader has not caught
+ * up with is simply shown late, so a stack played straight off the network
+ * stutters — run {@link useImagePrefetch} over it first and playback is a
+ * sequence of cache hits.
+ */
+export declare function useCinePlayer(index: Ref<number>, frameCount: MaybeRefOrGetter<number>, options?: CinePlayerOptions): {
+    playing: Ref<boolean, boolean>;
+    frameRate: import("vue").WritableComputedRef<number, number>;
+    loop: Ref<boolean, boolean>;
+    bounce: Ref<boolean, boolean>;
+    direction: Ref<1 | -1, 1 | -1>;
+    canPlay: import("vue").ComputedRef<boolean>;
+    play: () => void;
+    pause: () => void;
+    toggle: () => void;
+    setFrameRate: (value: number) => void;
+    setDirection: (value: 1 | -1) => void;
+};

package/dist/runtime/composables/useCinePlayer.js

@@ -0,0 +1,95 @@
+import { computed, getCurrentScope, onScopeDispose, ref, toValue, watch } from "vue";
+export const FRAME_RATE_RANGE = { min: 1, max: 60 };
+const DEFAULT_FRAME_RATE = 15;
+export function useCinePlayer(index, frameCount, options = {}) {
+  const rate = ref(clampFrameRate(options.frameRate ?? DEFAULT_FRAME_RATE));
+  const loop = ref(options.loop ?? true);
+  const bounce = ref(options.bounce ?? false);
+  const direction = ref(options.direction ?? 1);
+  const playing = ref(false);
+  const count = computed(() => Math.max(0, Math.trunc(toValue(frameCount)) || 0));
+  const canPlay = computed(() => count.value > 1);
+  let frame = 0;
+  let dueAt = 0;
+  function tick(now) {
+    if (!playing.value) return;
+    if (now >= dueAt) {
+      const interval = 1e3 / rate.value;
+      advance();
+      dueAt = now - dueAt > interval ? now + interval : dueAt + interval;
+    }
+    frame = requestAnimationFrame(tick);
+  }
+  function advance() {
+    const last = count.value - 1;
+    if (last < 1) return;
+    let next = index.value + direction.value;
+    if (next > last || next < 0) {
+      if (bounce.value) {
+        direction.value = direction.value === 1 ? -1 : 1;
+        next = index.value + direction.value;
+      } else if (loop.value) {
+        next = direction.value === 1 ? 0 : last;
+      } else {
+        pause();
+        return;
+      }
+    }
+    index.value = Math.min(Math.max(next, 0), last);
+  }
+  function play() {
+    if (!import.meta.client || playing.value || !canPlay.value) return;
+    const last = count.value - 1;
+    if (!bounce.value) {
+      if (direction.value === 1 && index.value >= last) index.value = 0;
+      if (direction.value === -1 && index.value <= 0) index.value = last;
+    }
+    playing.value = true;
+    dueAt = performance.now() + 1e3 / rate.value;
+    frame = requestAnimationFrame(tick);
+  }
+  function pause() {
+    if (!playing.value) return;
+    playing.value = false;
+    cancelAnimationFrame(frame);
+    frame = 0;
+  }
+  function toggle() {
+    if (playing.value) pause();
+    else play();
+  }
+  function setFrameRate(value) {
+    const clamped = clampFrameRate(value);
+    if (clamped === rate.value) return;
+    rate.value = clamped;
+    if (playing.value) dueAt = performance.now() + 1e3 / clamped;
+  }
+  const frameRate = computed({
+    get: () => rate.value,
+    set: setFrameRate
+  });
+  function setDirection(value) {
+    direction.value = value;
+  }
+  watch(canPlay, (value) => {
+    if (!value) pause();
+  });
+  if (getCurrentScope()) onScopeDispose(pause);
+  return {
+    playing,
+    frameRate,
+    loop,
+    bounce,
+    direction,
+    canPlay,
+    play,
+    pause,
+    toggle,
+    setFrameRate,
+    setDirection
+  };
+}
+function clampFrameRate(value) {
+  if (!Number.isFinite(value)) return DEFAULT_FRAME_RATE;
+  return Math.min(Math.max(value, FRAME_RATE_RANGE.min), FRAME_RATE_RANGE.max);
+}

package/dist/runtime/composables/useCornerstone.d.ts

@@ -0,0 +1,17 @@
+import type { CornerstoneLibs, CornerstoneModuleOptions } from '../types.js';
+/**
+ * Access to the initialised Cornerstone3D libraries.
+ *
+ * Calling this on the client starts initialisation if it has not started
+ * already; `ready` flips once `core`, the DICOM image loader and the tools are
+ * all up. Initialisation itself is shared process-wide, so calling this from
+ * ten components still initialises once.
+ */
+export declare function useCornerstone(): {
+    libs: import("vue").ShallowRef<CornerstoneLibs | null, CornerstoneLibs | null>;
+    ready: import("vue").ComputedRef<boolean>;
+    error: import("vue").ShallowRef<Error | null, Error | null>;
+    pending: import("vue").ShallowRef<boolean, boolean>;
+    ensure: (overrides?: CornerstoneModuleOptions) => Promise<CornerstoneLibs>;
+    options: import("../types.js").ResolvedCornerstoneOptions;
+};

package/dist/runtime/composables/useCornerstone.js

@@ -0,0 +1,30 @@
+import { computed, shallowRef } from "vue";
+import {
+  ensureCornerstone,
+  getCornerstoneOptions,
+  getLoadedCornerstone
+} from "../cornerstone.js";
+export function useCornerstone() {
+  const libs = shallowRef(getLoadedCornerstone());
+  const error = shallowRef(null);
+  const pending = shallowRef(false);
+  const ready = computed(() => libs.value !== null);
+  async function ensure(overrides) {
+    pending.value = true;
+    try {
+      libs.value = await ensureCornerstone(overrides);
+      error.value = null;
+      return libs.value;
+    } catch (caught) {
+      error.value = caught instanceof Error ? caught : new Error(String(caught));
+      throw error.value;
+    } finally {
+      pending.value = false;
+    }
+  }
+  if (import.meta.client && !libs.value) {
+    ensure().catch(() => {
+    });
+  }
+  return { libs, ready, error, pending, ensure, options: getCornerstoneOptions() };
+}

package/dist/runtime/composables/useCornerstoneI18n.d.ts

@@ -0,0 +1,24 @@
+import { addCornerstoneMessages, formatBytes, n, setCornerstoneLocale, setCornerstoneTranslator, t } from '../i18n/index.js';
+/**
+ * Locale, translation and number formatting for this module's strings.
+ *
+ * The locale lives in a module-scoped ref, so every viewer in the app switches
+ * together and `t()` re-runs inside any computed or render that read it.
+ *
+ * `dir` is for an app's own chrome. Do not apply it to the viewport: a DICOM
+ * image must never be mirrored, because left and right are clinical facts about
+ * the patient. `<CornerstoneViewport>` therefore pins itself to `dir="ltr"`.
+ */
+export declare function useCornerstoneI18n(): {
+    locale: import("vue").WritableComputedRef<string, string>;
+    setLocale: typeof setCornerstoneLocale;
+    availableLocales: import("vue").ComputedRef<string[]>;
+    /** `'rtl'` or `'ltr'` for the active locale. */
+    dir: import("vue").ComputedRef<"ltr" | "rtl">;
+    isRtl: import("vue").ComputedRef<boolean>;
+    t: typeof t;
+    n: typeof n;
+    formatBytes: typeof formatBytes;
+    addMessages: typeof addCornerstoneMessages;
+    setTranslator: typeof setCornerstoneTranslator;
+};

package/dist/runtime/composables/useCornerstoneI18n.js

@@ -0,0 +1,32 @@
+import { computed } from "vue";
+import {
+  addCornerstoneMessages,
+  dirForLocale,
+  formatBytes,
+  getCornerstoneLocale,
+  getCornerstoneLocales,
+  isRtlLocale,
+  n,
+  setCornerstoneLocale,
+  setCornerstoneTranslator,
+  t
+} from "../i18n/index.js";
+export function useCornerstoneI18n() {
+  const locale = computed({
+    get: () => getCornerstoneLocale(),
+    set: (value) => setCornerstoneLocale(value)
+  });
+  return {
+    locale,
+    setLocale: setCornerstoneLocale,
+    availableLocales: computed(() => getCornerstoneLocales()),
+    /** `'rtl'` or `'ltr'` for the active locale. */
+    dir: computed(() => dirForLocale(locale.value)),
+    isRtl: computed(() => isRtlLocale(locale.value)),
+    t,
+    n,
+    formatBytes,
+    addMessages: addCornerstoneMessages,
+    setTranslator: setCornerstoneTranslator
+  };
+}

package/dist/runtime/composables/useCornerstoneTools.d.ts

@@ -0,0 +1,21 @@
+import type { ToolBinding } from '../types.js';
+import type { Types as ToolsTypes } from '@cornerstonejs/tools';
+/**
+ * Tool group management.
+ *
+ * Note the two different names in play: `WindowLevelTool` is the *class* export
+ * from `@cornerstonejs/tools`, while `'WindowLevel'` (its static `toolName`) is
+ * what tool groups speak. Both are accepted here and resolved to the latter.
+ */
+export declare function useCornerstoneTools(toolGroupId?: string): {
+    toolGroupId: string;
+    ensureGroup: () => Promise<ToolsTypes.IToolGroup>;
+    addViewport: (viewportId: string, renderingEngineId?: string) => Promise<void>;
+    removeViewport: (viewportId: string, renderingEngineId?: string) => void;
+    setActive: (tool: string, bindings?: ToolBinding[]) => Promise<void>;
+    setPassive: (tool: string) => Promise<void>;
+    setEnabled: (tool: string) => Promise<void>;
+    setDisabled: (tool: string) => Promise<void>;
+    getActiveTool: () => string | null;
+    destroy: () => void;
+};