@imfusion/sdk-react 0.7.0-dev.40.g25e24fd5 → 0.7.0-dev.46.g3dd09010

package/dist/ImFusionError.d.ts

@@ -34,4 +34,4 @@ export interface ImFusionErrorProps {
  * @see {@link useImFusionError}
  * @see {@link useImFusionState}
  */
-export declare function ImFusionError({ children }: ImFusionErrorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ImFusionError({ children }: ImFusionErrorProps): import("react").JSX.Element | null;

package/dist/ImFusionLoading.d.ts

@@ -22,4 +22,4 @@ export interface ImFusionLoadingProps {
  *
  * @see {@link useImFusionState}
  */
-export declare function ImFusionLoading({ children }: ImFusionLoadingProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ImFusionLoading({ children }: ImFusionLoadingProps): import("react").JSX.Element | null;

package/dist/ImFusionProvider.d.ts

@@ -53,4 +53,4 @@ export interface ImFusionProviderProps {
  * The SDK is initialized once per provider instance. Changes to `options` do
  * not reconfigure an already initialized SDK.
  */
-export declare function ImFusionProvider({ options, onReady, onError, children }: ImFusionProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImFusionProvider({ options, onReady, onError, children }: ImFusionProviderProps): import("react").JSX.Element;

package/dist/ImFusionReady.d.ts

@@ -22,4 +22,4 @@ export interface ImFusionReadyProps {
  * @see {@link useImFusion}
  * @see {@link useImFusionState}
  */
-export declare function ImFusionReady({ children }: ImFusionReadyProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ImFusionReady({ children }: ImFusionReadyProps): import("react").JSX.Element | null;

package/dist/index.d.ts

@@ -15,3 +15,4 @@ export { useViewVisibility } from './useViewVisibility.js';
 export { useDisplayOptions2d, useDisplayOptions3d } from './useDisplayOptions.js';
 export { useFrameSelection } from './useFrameSelection.js';
 export { useContextMenu } from './useContextMenu.js';
+export { useThumbnail } from './useThumbnail.js';

package/dist/index.js

@@ -15,3 +15,4 @@ export { useViewVisibility } from './useViewVisibility.js';
 export { useDisplayOptions2d, useDisplayOptions3d } from './useDisplayOptions.js';
 export { useFrameSelection } from './useFrameSelection.js';
 export { useContextMenu } from './useContextMenu.js';
+export { useThumbnail } from './useThumbnail.js';

package/dist/useThumbnail.d.ts

@@ -0,0 +1,27 @@
+import type { Data } from '@imfusion/sdk';
+/**
+ * Returns an object URL pointing at a PNG thumbnail of `data`.
+ * Returns `null` when:
+ * - Thumbnail is still being generated or
+ * - `data` is nullish, or if it does not support thumbnails.
+ *
+ * The thumbnail is generated asynchronously via `requestIdleCallback` (falling
+ * back to a 0ms `setTimeout`).
+ *
+ * @param data - The dataset to generate a thumbnail for. Currently only supports `SharedImageSet`.
+ * @param options.width - Logical width in CSS pixels (default 200).
+ * @param options.height - Logical height in CSS pixels (default 200).
+ * @returns A blob URL or `null`.
+ *
+ * @example
+ * ```tsx
+ * function DatasetCard({ data }: { data: Data }) {
+ *   const url = useThumbnail(data);
+ *   return url ? <img src={url} alt={data.name} /> : <Placeholder />;
+ * }
+ * ```
+ */
+export declare function useThumbnail(data: Data | null | undefined, options?: {
+    width?: number;
+    height?: number;
+}): string | null;

package/dist/useThumbnail.js

@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react';
+import { useImFusion } from './useImFusion.js';
+import { useStableHandle } from './useStableHandle.js';
+/**
+ * Returns an object URL pointing at a PNG thumbnail of `data`.
+ * Returns `null` when:
+ * - Thumbnail is still being generated or
+ * - `data` is nullish, or if it does not support thumbnails.
+ *
+ * The thumbnail is generated asynchronously via `requestIdleCallback` (falling
+ * back to a 0ms `setTimeout`).
+ *
+ * @param data - The dataset to generate a thumbnail for. Currently only supports `SharedImageSet`.
+ * @param options.width - Logical width in CSS pixels (default 200).
+ * @param options.height - Logical height in CSS pixels (default 200).
+ * @returns A blob URL or `null`.
+ *
+ * @example
+ * ```tsx
+ * function DatasetCard({ data }: { data: Data }) {
+ *   const url = useThumbnail(data);
+ *   return url ? <img src={url} alt={data.name} /> : <Placeholder />;
+ * }
+ * ```
+ */
+export function useThumbnail(data, options) {
+    const imf = useImFusion();
+    const { width = 200, height = 200 } = options ?? {};
+    const stable = useStableHandle(data ?? undefined);
+    const [url, setUrl] = useState(null);
+    useEffect(() => {
+        if (!(stable instanceof imf.bindings.SharedImageSet)) {
+            setUrl(null);
+            return;
+        }
+        let cancelled = false;
+        let objectUrl = null;
+        const generate = () => {
+            if (cancelled)
+                return;
+            try {
+                const frame = Math.floor(stable.size() / 2);
+                const widthPx = Math.round(width * imf.dpiScale);
+                const heightPx = Math.round(height * imf.dpiScale);
+                const bytes = stable.thumbnail(frame, widthPx, heightPx);
+                objectUrl = URL.createObjectURL(new Blob([bytes], { type: 'image/png' }));
+                if (!cancelled)
+                    setUrl(objectUrl);
+            }
+            catch (err) {
+                console.warn('Thumbnail generation failed for dataset:', stable.name, err);
+                if (!cancelled)
+                    setUrl(null);
+            }
+        };
+        // Safari doesn't support requestIdleCallback yet.
+        const id = window.requestIdleCallback?.(generate) ?? window.setTimeout(generate, 0);
+        return () => {
+            cancelled = true;
+            if (window.cancelIdleCallback)
+                window.cancelIdleCallback(id);
+            else
+                window.clearTimeout(id);
+            if (objectUrl)
+                URL.revokeObjectURL(objectUrl);
+        };
+    }, [stable, width, height, imf, imf.dpiScale]);
+    return url;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imfusion/sdk-react",
-  "version": "0.7.0-dev.40.g25e24fd5",
+  "version": "0.7.0-dev.46.g3dd09010",
   "description": "React bindings for ImFusion Web SDK",
   "author": "ImFusion GmbH",
   "license": "SEE LICENSE IN License.rtf",
@@ -29,7 +29,7 @@
     "License.rtf"
   ],
   "peerDependencies": {
-    "@imfusion/sdk": "0.7.0-dev.40.g25e24fd5",
+    "@imfusion/sdk": "0.7.0-dev.46.g3dd09010",
     "react": ">=18"
   },
   "devDependencies": {