@cytario/web 2.2.0 → 2.2.2

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

@@ -29,5 +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} />;
 };

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

@@ -1,3 +1,5 @@
+import { twMerge } from "tailwind-merge";
+
 import { CursorTick } from "./CursorTick";
 import { Tick } from "./Tick";
 
@@ -22,16 +24,21 @@ export const Ruler = ({
     arr.push(i);
   }
 
-  return (
-    <div
-      className={`
+  const cx = twMerge(
+    `
         absolute top-0 left-0 
-        w-4 h-4
+        flex w-4 h-4
         origin-top-left
         text-xs
-        font-semibold
-        ${vertical ? "rotate-90 translate-x-4" : ""}
-      `}
+        font-semibold         
+      `,
+    vertical ? "rotate-90 translate-x-4" : "",
+    vertical ? "items-end" : "items-start",
+  );
+
+  return (
+    <div
+      className={cx}
       style={{
         width: size,
       }}
@@ -47,7 +54,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} />;
       })}
 
       <CursorTick vertical={vertical} />

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

@@ -15,7 +15,7 @@ export function SlideCarrier() {
   return (
     <div
       style={{ width: viewPortWidth, height: viewPortHeight }}
-      className="absolute top-0 left-0overflow-hidden"
+      className="absolute top-0 left-0 overflow-hidden"
     >
       <Size value={widthTotalMm} />
       <Size vertical value={heightTotalMm} />
@@ -49,7 +49,7 @@ const Size = ({ value, vertical = false }: { value: number; vertical?: boolean }
         h-4 
         origin-top-left 
         text-xs font-semibold
-      text-[var(--color-text-secondary)]
+        text-(--color-text-secondary)
         `}
       style={{
         width: vertical ? imageHeightScreen : imageWidthScreen,

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

@@ -3,25 +3,19 @@ import { twMerge } from "tailwind-merge";
 interface TickProps {
   number?: number;
   offset: number;
-  label?: string | number;
-  vertical?: boolean;
 }
 
-export const Tick = ({ number, offset, vertical = false }: TickProps) => {
+export const Tick = ({ number, offset }: TickProps) => {
   const isMajor = typeof number === "number";
-
   const n = Math.round((number as number) * 100) / 100;
+  const adjustedOffset = offset - 2; // Account for border width
 
   const cx = twMerge(
     "absolute left-0 bg-[var(--color-surface-default)]",
     "border-l border-l-[var(--color-text-secondary)]",
     isMajor ? "h-4" : "h-2",
-    vertical ? "rotate-90" : "",
-    vertical ? "bottom-0" : "top-0",
   );
 
-  const adjustedOffset = Math.floor(offset) - (vertical ? 2 : 3);
-
   return (
     <div
       className={cx}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cytario/web",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "Cytario Web — scientific imaging data browser and viewer for OME-TIFF, OME-Zarr, Parquet and GeoTIFF on S3-compatible storage.",
   "license": "AGPL-3.0",
   "sideEffects": false,
@@ -48,7 +48,7 @@
   },
   "scripts": {
     "prepare": "husky || true",
-    "prepublishOnly": "npm run build:server",
+    "prepack": "npm run build:server && node scripts/prebuild.mjs",
     "prebuild": "node scripts/prebuild.mjs",
     "build": "node bin/cytario-web.mjs build",
     "build:server": "tsup --config tsup.server.config.ts",