@cytario/web 2.1.4 → 2.1.6

package/app/components/.client/ImageViewer/components/Image/Overlays/OverlaysLayer.tsx

@@ -15,9 +15,7 @@ import { toastBridge } from "~/toast-bridge";
 import { isPointMode } from "~/utils/db/getGeomQuery";
 import { getTileDataWasm } from "~/utils/db/getTileDataWasm";
 
-type SetTooltip = (
-  tooltip: { content: ReactNode; x: number; y: number } | null
-) => void;
+type SetTooltip = (tooltip: { content: ReactNode; x: number; y: number } | null) => void;
 
 interface OverlaysLayerProps {
   resourceId: string;
@@ -37,10 +35,7 @@ interface OverlaysLayerProps {
 const MarkerLabel = ({ color, name }: { color: string; name: string }) => {
   return (
     <div key={name} className="flex items-center gap-2">
-      <div
-        className="w-4 h-4 rounded-full"
-        style={{ backgroundColor: color }}
-      />
+      <div className="w-4 h-4 rounded-full" style={{ backgroundColor: color }} />
       {name}
     </div>
   );
@@ -62,29 +57,20 @@ export const OverlaysLayer = ({
 }: OverlaysLayerProps) => {
   const markerPrefix = "marker_positive_";
 
-  const getTileData = async ({
-    id,
-    index,
-  }: TileLoadProps): Promise<Table | null> => {
+  const getTileData = async ({ id, index }: TileLoadProps): Promise<Table | null> => {
     loadTile(id);
 
     try {
       // Get ALL marker column names (not just enabled ones)
       const allMarkerKeys = Object.keys(fileMarkers);
 
-      const data = await getTileDataWasm(
-        resourceId,
-        index,
-        allMarkerKeys,
-      );
+      const data = await getTileDataWasm(resourceId, index, allMarkerKeys);
 
       return data;
     } catch (error) {
       toastBridge.emit({
         variant: "error",
-        message: `Error fetching tile data: ${
-          (error as Error).message ?? error
-        }`,
+        message: `Error fetching tile data: ${(error as Error).message ?? error}`,
       });
       console.error("Error fetching tile data:", error);
       return null;
@@ -243,11 +229,7 @@ export const OverlaysLayer = ({
           const fullBitmask = new Float32Array(numRows);
           let outputIndex = 0;
 
-          for (
-            let chunkIdx = 0;
-            chunkIdx < bitmaskCol.data.length;
-            chunkIdx++
-          ) {
+          for (let chunkIdx = 0; chunkIdx < bitmaskCol.data.length; chunkIdx++) {
             const chunk = bitmaskCol.data[chunkIdx];
             const values = chunk.values as Float32Array;
             const chunkLength = chunk.length;

package/app/components/.client/ImageViewer/components/Image/Overlays/markerUniforms.ts

@@ -32,10 +32,7 @@ export type MarkerProps = {
 
 export interface MarkerLayerProps {
   markerProps?: MarkerProps;
-  getMarkerMask?: (
-    d: unknown,
-    info: { index: number; data: unknown; target: unknown[] }
-  ) => number; // Returns a 32-bit bitmask
+  getMarkerMask?: (d: unknown, info: { index: number; data: unknown; target: unknown[] }) => number; // Returns a 32-bit bitmask
 }
 
 // Export the ShaderModule with uniform types
@@ -75,7 +72,7 @@ export const markerUniforms = {
  */
 export function createMarkerProps(
   fileMarkers: Record<string, { color: RGBA }>,
-  opacity: number
+  opacity: number,
 ): MarkerProps {
   const keys = Object.keys(fileMarkers);
 

package/app/components/.client/ImageViewer/components/Image/Overlays/useOverlaysLayer.tsx

@@ -6,37 +6,25 @@ import { select } from "../../../state/store/selectors";
 import { useViewerStore } from "../../../state/store/ViewerStoreContext";
 import { useTilesLoading } from "../../../utils/useTilesLoading";
 
-type SetTooltip = (
-  tooltip: { content: ReactNode; x: number; y: number } | null
-) => void;
+type SetTooltip = (tooltip: { content: ReactNode; x: number; y: number } | null) => void;
 
 /**
  * Hook to create overlays layers for the image viewer.
  */
-export const useOverlaysLayers = (
-  imagePanelId: number,
-  setTooltip?: SetTooltip
-) => {
+export const useOverlaysLayers = (imagePanelId: number, setTooltip?: SetTooltip) => {
   const layersStates = useViewerStore(select.layersStates);
   const metadata = useViewerStore(select.metadata);
   const minZoom = useViewerStore(select.minZoom);
   const maxZoom = useViewerStore(select.maxZoom);
-  const panelLayersStateIndex = useViewerStore((state) => state.imagePanels)[
-    imagePanelId
-  ];
+  const panelLayersStateIndex = useViewerStore((state) => state.imagePanels)[imagePanelId];
   const setIsOverlaysLoading = useViewerStore(select.setIsOverlaysLoading);
-  const { loadTile, finishTile } = useTilesLoading(
-    imagePanelId,
-    setIsOverlaysLoading
-  );
+  const { loadTile, finishTile } = useTilesLoading(imagePanelId, setIsOverlaysLoading);
 
   const imageWidth = metadata?.Pixels?.SizeX ?? 0;
   const imageHeight = metadata?.Pixels?.SizeY ?? 0;
 
-  const fillOpacity =
-    layersStates[panelLayersStateIndex]?.overlaysFillOpacity ?? 0.8;
-  const showCellOutline =
-    layersStates[panelLayersStateIndex]?.showCellOutline ?? true;
+  const fillOpacity = layersStates[panelLayersStateIndex]?.overlaysFillOpacity ?? 0.8;
+  const showCellOutline = layersStates[panelLayersStateIndex]?.showCellOutline ?? true;
 
   const overlaysLayers = useMemo(() => {
     const layersState = layersStates[panelLayersStateIndex];
@@ -47,9 +35,7 @@ export const useOverlaysLayers = (
     return Object.keys(overlayState).map((resourceId) => {
       const fileMarkers = overlayState[resourceId];
 
-      const enabledMarkers = Object.keys(fileMarkers).filter(
-        (key) => fileMarkers[key].isVisible
-      );
+      const enabledMarkers = Object.keys(fileMarkers).filter((key) => fileMarkers[key].isVisible);
 
       // Build marker props directly from fileMarkers
       const markerProps = createMarkerProps(fileMarkers, fillOpacity);

package/app/components/.client/ImageViewer/components/Image/useInitializeChannels.ts

@@ -22,11 +22,5 @@ export const useInitializeChannels = (viewPort: ViewPort) => {
       isInitialized.current = true;
       addChannelsState();
     }
-  }, [
-    metadata,
-    viewPort,
-    channelsState,
-    addChannelsState,
-    setChannelVisibility,
-  ]);
+  }, [metadata, viewPort, channelsState, addChannelsState, setChannelVisibility]);
 };

package/app/components/.client/ImageViewer/components/Image/useResizeObserver.ts

@@ -13,7 +13,7 @@ export function useDebouncedValue<T>(value: T, delay: number): T {
 
 export const useResizeObserver = (
   ref: React.RefObject<HTMLElement | null>,
-  resetOnResize: boolean
+  resetOnResize: boolean,
 ) => {
   const [viewPort, setViewPort] = useState({ width: 0, height: 0 });
   const debouncedViewPort = useDebouncedValue(viewPort, 100);

package/app/components/.client/ImageViewer/components/Magnifier.tsx

@@ -5,15 +5,11 @@ import { type ViewerStore, type ViewState } from "../state/store/types";
 
 const MAGNIFICATION_PRESETS = [5, 10, 20, 40, 80] as const;
 
-export const zoomFromMagnification = (
-  magnification: number,
-  objectivePower = 20,
-): number => Math.log2(magnification / objectivePower);
+export const zoomFromMagnification = (magnification: number, objectivePower = 20): number =>
+  Math.log2(magnification / objectivePower);
 
-export const magnificationFromZoom = (
-  zoom: number,
-  objectivePower = 20,
-): number => objectivePower * Math.pow(2, zoom);
+export const magnificationFromZoom = (zoom: number, objectivePower = 20): number =>
+  objectivePower * Math.pow(2, zoom);
 
 export const Magnifier = ({
   metadata,
@@ -42,11 +38,7 @@ export const Magnifier = ({
         setViewState={setViewStateActive}
       />
 
-      <SegmentedControl
-        selectionMode="none"
-        size="sm"
-        aria-label="Magnification presets"
-      >
+      <SegmentedControl selectionMode="none" size="sm" aria-label="Magnification presets">
         {MAGNIFICATION_PRESETS.map((mag) => (
           <SegmentedControlItem
             key={mag}

package/app/components/.client/ImageViewer/components/Measurements/ActiveViewStatePreview.tsx

@@ -11,18 +11,13 @@ export function ActiveViewStatePreview() {
   const measurementsPreview = useMeasurements(viewStatePreview);
 
   const { width, height, x, y } = useMemo(() => {
-    const scaleFactor =
-      2 ** (measurementsPreview.zoom - measurementsActive.zoom);
+    const scaleFactor = 2 ** (measurementsPreview.zoom - measurementsActive.zoom);
 
     return {
       width: measurementsActive.viewPortWidth * scaleFactor,
       height: measurementsActive.viewPortHeight * scaleFactor,
-      x:
-        measurementsPreview.screenOffsetLeft -
-        measurementsActive.screenOffsetLeft * scaleFactor,
-      y:
-        measurementsPreview.screenOffsetTop -
-        measurementsActive.screenOffsetTop * scaleFactor,
+      x: measurementsPreview.screenOffsetLeft - measurementsActive.screenOffsetLeft * scaleFactor,
+      y: measurementsPreview.screenOffsetTop - measurementsActive.screenOffsetTop * scaleFactor,
     };
   }, [
     measurementsActive.viewPortWidth,

package/app/components/.client/ImageViewer/components/Measurements/CursorTick.tsx

@@ -20,10 +20,7 @@ export const CursorTick = ({ vertical }: { vertical?: boolean }) => {
 
   // Convert absolute pixels to metric units
   const unit = metadata.Pixels.PhysicalSizeXUnit;
-  const absoluteToMetric = absoluteToMetricFactory(
-    metadata.Pixels.PhysicalSizeX ?? 1,
-    unit
-  );
+  const absoluteToMetric = absoluteToMetricFactory(metadata.Pixels.PhysicalSizeX ?? 1, unit);
 
   // Calculate metric position
   const absoluteX = screenPixelsToAbsolutePixels(x - screenOffsetLeft);
@@ -32,7 +29,5 @@ export const CursorTick = ({ vertical }: { vertical?: boolean }) => {
   const metricY = absoluteToMetric(absoluteY);
   const cursorOffset = vertical ? metricY : metricX;
 
-  return (
-    <Tick number={cursorOffset} offset={vertical ? y : x} vertical={vertical} />
-  );
+  return <Tick number={cursorOffset} offset={vertical ? y : x} vertical={vertical} />;
 };

package/app/components/.client/ImageViewer/components/Measurements/Ruler.tsx

@@ -47,14 +47,7 @@ export const Ruler = ({
         const isMajor = i % interval === 0;
         const label = isMajor ? i : undefined;
 
-        return (
-          <Tick
-            key={i}
-            number={label}
-            offset={offset + i * one_mm}
-            vertical={vertical}
-          />
-        );
+        return <Tick key={i} number={label} offset={offset + i * one_mm} vertical={vertical} />;
       })}
 
       <CursorTick vertical={vertical} />

package/app/components/.client/ImageViewer/components/Measurements/SlideCarrier.tsx

@@ -31,19 +31,9 @@ export function SlideCarrier() {
   );
 }
 
-const Size = ({
-  value,
-  vertical = false,
-}: {
-  value: number;
-  vertical?: boolean;
-}) => {
-  const {
-    imageWidthScreen,
-    imageHeightScreen,
-    screenOffsetLeft,
-    screenOffsetTop,
-  } = useMeasurements();
+const Size = ({ value, vertical = false }: { value: number; vertical?: boolean }) => {
+  const { imageWidthScreen, imageHeightScreen, screenOffsetLeft, screenOffsetTop } =
+    useMeasurements();
 
   const transform = vertical
     ? `translate(${screenOffsetLeft}px, ${screenOffsetTop - 18}px) rotate(90deg)`

package/app/components/.client/ImageViewer/components/Measurements/Tick.tsx

@@ -17,7 +17,7 @@ export const Tick = ({ number, offset, vertical = false }: TickProps) => {
     "border-l border-l-[var(--color-text-secondary)]",
     isMajor ? "h-4" : "h-2",
     vertical ? "rotate-90" : "",
-    vertical ? "bottom-0" : "top-0"
+    vertical ? "bottom-0" : "top-0",
   );
 
   const adjustedOffset = Math.floor(offset) - (vertical ? 2 : 3);

package/app/components/.client/ImageViewer/components/Measurements/calculateViewStateToFit.ts

@@ -8,7 +8,7 @@ interface CalculateViewStateOptions {
 export function calculateViewStateToFit(
   metadata: Image,
   viewport: ViewPort,
-  options?: CalculateViewStateOptions
+  options?: CalculateViewStateOptions,
 ): ViewState {
   const { SizeX, SizeY, PhysicalSizeX, PhysicalSizeY } = metadata.Pixels;
 

package/app/components/.client/ImageViewer/components/Measurements/useMeasurements.ts

@@ -55,15 +55,11 @@ const measurementsDataInitial: UseMeasurementsData = {
   target: [0, 0],
 };
 
-const absolutePixelsToScreenPixels = (n = 0, zoom: number) =>
-  n / (1 / 2 ** zoom);
+const absolutePixelsToScreenPixels = (n = 0, zoom: number) => n / (1 / 2 ** zoom);
 
-const screenPixelsToAbsolutePixels = (n = 0, zoom: number) =>
-  n * (1 / 2 ** zoom);
+const screenPixelsToAbsolutePixels = (n = 0, zoom: number) => n * (1 / 2 ** zoom);
 
-export const useMeasurements = (
-  viewStateOptional?: ViewState | null,
-): UseMeasurementsData => {
+export const useMeasurements = (viewStateOptional?: ViewState | null): UseMeasurementsData => {
   const viewStateActive = useViewerStore(select.viewStateActive);
   const viewState = viewStateOptional ?? viewStateActive;
   const metadata = useViewerStore(select.metadata);
@@ -85,37 +81,22 @@ export const useMeasurements = (
     unit,
   );
 
-  const metricToAbsolute = metricToAbsoluteFactory(
-    metadata.Pixels.PhysicalSizeX ?? 1,
-    unit,
-  );
+  const metricToAbsolute = metricToAbsoluteFactory(metadata.Pixels.PhysicalSizeX ?? 1, unit);
 
   const widthTotalMm = absoluteToMetric(metadata.Pixels.SizeX);
   const heightTotalMm = absoluteToMetric(metadata.Pixels.SizeY);
 
-  const imageWidthScreen = absolutePixelsToScreenPixels(
-    metadata.Pixels.SizeX,
-    zoom,
-  );
-  const imageHeightScreen = absolutePixelsToScreenPixels(
-    metadata.Pixels.SizeY,
-    zoom,
-  );
+  const imageWidthScreen = absolutePixelsToScreenPixels(metadata.Pixels.SizeX, zoom);
+  const imageHeightScreen = absolutePixelsToScreenPixels(metadata.Pixels.SizeY, zoom);
 
   const screenOffsetLeft = -target[0] / (1 / 2 ** zoom) + viewPortWidth / 2;
   const screenOffsetRight = viewPortWidth - screenOffsetLeft;
   const screenOffsetTop = -target[1] / (1 / 2 ** zoom) + viewPortHeight / 2;
   const screenOffsetBottom = viewPortHeight - screenOffsetTop;
 
-  const metricOffsetLeft = absoluteToMetric(
-    screenPixelsToAbsolutePixels(-screenOffsetLeft, zoom),
-  );
-  const metricOffsetTop = absoluteToMetric(
-    screenPixelsToAbsolutePixels(-screenOffsetTop, zoom),
-  );
-  const metricOffsetRight = absoluteToMetric(
-    screenPixelsToAbsolutePixels(screenOffsetRight, zoom),
-  );
+  const metricOffsetLeft = absoluteToMetric(screenPixelsToAbsolutePixels(-screenOffsetLeft, zoom));
+  const metricOffsetTop = absoluteToMetric(screenPixelsToAbsolutePixels(-screenOffsetTop, zoom));
+  const metricOffsetRight = absoluteToMetric(screenPixelsToAbsolutePixels(screenOffsetRight, zoom));
   const metricOffsetBottom = absoluteToMetric(
     screenPixelsToAbsolutePixels(screenOffsetBottom, zoom),
   );

package/app/components/.client/ImageViewer/components/OverlaysController/AddOverlay.tsx

@@ -2,10 +2,7 @@ import { Button, Input, Tree, useToast } from "@cytario/design";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useFetcher } from "react-router";
 
-import {
-  type TreeNode,
-  findNodeById,
-} from "~/components/DirectoryView/buildDirectoryTree";
+import { type TreeNode, findNodeById } from "~/components/DirectoryView/buildDirectoryTree";
 import { LavaLoader } from "~/components/LavaLoader";
 import { SearchRouteLoaderResponse } from "~/routes/search.route";
 import { convertCsvToParquet } from "~/utils/db/convertCsvToParquet";
@@ -32,10 +29,7 @@ export function AddOverlay({ callback, query, onOverlayAdd }: AddOverlayProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps -- fetcher object ref changes every render; only re-run on state transitions
   }, [objectsFetcher.state, objectsFetcher.data, searchString]);
 
-  const nodes = useMemo(
-    () => objectsFetcher.data?.nodes ?? [],
-    [objectsFetcher.data?.nodes],
-  );
+  const nodes = useMemo(() => objectsFetcher.data?.nodes ?? [], [objectsFetcher.data?.nodes]);
   const isLoading = objectsFetcher.state === "loading";
 
   // Selection state: single file selection
@@ -57,8 +51,7 @@ export function AddOverlay({ callback, query, onOverlayAdd }: AddOverlayProps) {
   const [searchTerm, setSearchTerm] = useState("");
 
   const searchMatch = useCallback(
-    (node: { name: string }, term: string) =>
-      node.name.toLowerCase().includes(term.toLowerCase()),
+    (node: { name: string }, term: string) => node.name.toLowerCase().includes(term.toLowerCase()),
     [],
   );
 
@@ -131,9 +124,7 @@ export function AddOverlay({ callback, query, onOverlayAdd }: AddOverlayProps) {
               searchMatch={searchMatch}
             />
           </div>
-          <p className="truncate text-xs text-(--color-text-tertiary)">
-            {hoveredPath ?? "…"}
-          </p>
+          <p className="truncate text-xs text-(--color-text-tertiary)">{hoveredPath ?? "…"}</p>
         </>
       )}
 

package/app/components/.client/ImageViewer/components/OverlaysController/OverlayPicker.modal.tsx

@@ -8,12 +8,7 @@ export function LoadOverlayModal({ onClose }: { onClose: () => void }) {
   const addOverlaysState = useViewerStore(select.addOverlaysState);
 
   return (
-    <RouteModal
-      title="Select Overlay File"
-      onClose={onClose}
-      size="lg"
-      isDismissable={false}
-    >
+    <RouteModal title="Select Overlay File" onClose={onClose} size="lg" isDismissable={false}>
       <AddOverlay callback={onClose} query="parquet" onOverlayAdd={addOverlaysState} />
     </RouteModal>
   );

package/app/components/.client/ImageViewer/components/OverlaysController/OverlaysController.Item.tsx

@@ -1,8 +1,4 @@
-import {
-  IconButton,
-  IconButtonLink,
-  useToast,
-} from "@cytario/design";
+import { IconButton, IconButtonLink, useToast } from "@cytario/design";
 import { ExternalLink, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { RadioGroup } from "react-aria-components";
@@ -36,13 +32,9 @@ export const OverlaysControllerItem = ({
   const { toast } = useToast();
 
   // Get file download progress from the file store
-  const fileProgress = useFileStore(
-    (state) => state.files[resourceId]?.progress,
-  );
+  const fileProgress = useFileStore((state) => state.files[resourceId]?.progress);
 
-  const cx = twMerge(
-    "flex flex-col px-3",
-  );
+  const cx = twMerge("flex flex-col px-3");
 
   const [isOpen, setIsOpen] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
@@ -57,9 +49,7 @@ export const OverlaysControllerItem = ({
   );
 
   const { connectionName } = parseResourceId(resourceId);
-  const connectionConfig = useConnectionsStore(
-    connectionsSelect.connectionConfig(connectionName),
-  );
+  const connectionConfig = useConnectionsStore(connectionsSelect.connectionConfig(connectionName));
 
   // Fetch markers on mount if not already loaded
   useEffect(() => {
@@ -90,14 +80,7 @@ export const OverlaysControllerItem = ({
     };
 
     fetchMarkers();
-  }, [
-    hasMarkers,
-    resourceId,
-    connectionConfig,
-    updateOverlaysState,
-    toast,
-    fileName,
-  ]);
+  }, [hasMarkers, resourceId, connectionConfig, updateOverlaysState, toast, fileName]);
 
   return (
     <div className="flex flex-col">
@@ -125,9 +108,7 @@ export const OverlaysControllerItem = ({
           variant="ghost"
           size="sm"
           onPress={() => {
-            const confirmation = confirm(
-              `Are you sure you want to remove overlay "${fileName}"?`,
-            );
+            const confirmation = confirm(`Are you sure you want to remove overlay "${fileName}"?`);
             if (confirmation) removeOverlaysState(resourceId);
           }}
         />
@@ -140,38 +121,27 @@ export const OverlaysControllerItem = ({
             <div className="flex flex-col items-center justify-center gap-2 p-4">
               <LavaLoader />
               {fileProgress && fileProgress.percentage < 100 && (
-                <div className="text-sm">
-                  Downloading: {Math.round(fileProgress.percentage)}%
-                </div>
+                <div className="text-sm">Downloading: {Math.round(fileProgress.percentage)}%</div>
               )}
             </div>
           ) : hasMarkers ? (
-            Object.entries(overlayState).map(
-              ([markerName, { color, count, isVisible }]) => {
-                return (
-                  <ChannelsControllerItem
-                    key={markerName}
-                    name={
-                      markerName.replace(
-                        "marker_positive_",
-                        "",
-                      ) as keyof ChannelsStateColumns
-                    }
-                    color={color}
-                    isVisible={isVisible}
-                    isLoading={false}
-                    pixelValue={count}
-                    maxDomain={maxDomain}
-                    toggleChannelVisibility={() =>
-                      setMarkerVisibility(resourceId, markerName, !isVisible)
-                    }
-                    onColorChange={(color) =>
-                      setMarkerColor(resourceId, markerName, color)
-                    }
-                  />
-                );
-              },
-            )
+            Object.entries(overlayState).map(([markerName, { color, count, isVisible }]) => {
+              return (
+                <ChannelsControllerItem
+                  key={markerName}
+                  name={markerName.replace("marker_positive_", "") as keyof ChannelsStateColumns}
+                  color={color}
+                  isVisible={isVisible}
+                  isLoading={false}
+                  pixelValue={count}
+                  maxDomain={maxDomain}
+                  toggleChannelVisibility={() =>
+                    setMarkerVisibility(resourceId, markerName, !isVisible)
+                  }
+                  onColorChange={(color) => setMarkerColor(resourceId, markerName, color)}
+                />
+              );
+            })
           ) : (
             <div className="p-4 text-sm text-[var(--color-text-secondary)]">
               No markers found in this overlay

package/app/components/.client/ImageViewer/components/OverlaysController/OverlaysController.tsx

@@ -66,9 +66,7 @@ export const OverlaysController = () => {
         )}
       </footer>
 
-      {isOpen && (
-        <LoadOverlayModal onClose={() => setIsOpen(false)} />
-      )}
+      {isOpen && <LoadOverlayModal onClose={() => setIsOpen(false)} />}
     </FeatureItem>
   );
 };

package/app/components/.client/ImageViewer/components/SplitViewToggle.tsx

@@ -17,9 +17,7 @@ export const SplitViewToggle = () => {
   const isSplitViewEnabled = imagePanels.length > 1;
 
   return (
-    <Tooltip
-      content={isSplitViewEnabled ? "Disable Split View" : "Enable Split View"}
-    >
+    <Tooltip content={isSplitViewEnabled ? "Disable Split View" : "Enable Split View"}>
       <Button
         onPress={() => {
           if (imagePanels.length === 1) {

package/app/components/.client/ImageViewer/components/ViewerHeader.tsx

@@ -22,9 +22,7 @@ export const ViewerHeader = ({
 
   useEffect(() => {
     if (children) {
-      setHeaderSlot(
-        children({ metadata, viewStateActive, setViewStateActive })
-      );
+      setHeaderSlot(children({ metadata, viewStateActive, setViewStateActive }));
     }
 
     return () => {

package/app/components/.client/ImageViewer/state/decoders/decodeJPEG2000.d.ts

@@ -1,15 +1,15 @@
 export interface FrameInfo {
-    width: number;
-    height: number;
-    componentCount: number;
-    bitsPerSample: number;
-    isSigned: boolean;
-    isReversible: boolean;
+  width: number;
+  height: number;
+  componentCount: number;
+  bitsPerSample: number;
+  isSigned: boolean;
+  isReversible: boolean;
 }
 
 export interface DecodedImage {
-    info: FrameInfo;
-    pixels: Uint8Array;
+  info: FrameInfo;
+  pixels: Uint8Array;
 }
 
 /**
@@ -25,9 +25,7 @@ export function loadJp2KDecoder(decodeConfig?: unknown): Promise<void>;
  * @returns Promise resolving to decoded image data with frame info and pixels
  * @throws Error if the compressed frame is invalid or decoding fails
  */
-export function decodeJPEG2000(
-    compressedImageFrame: Uint8Array,
-): Promise<DecodedImage>;
+export function decodeJPEG2000(compressedImageFrame: Uint8Array): Promise<DecodedImage>;
 
 /**
  * Cleanup function to release decoder resources