jiplak 0.1.0 → 0.1.1

package/dist/core.d.ts

@@ -18,5 +18,10 @@ export interface Theme {
     animate?: Animate;
     speed?: string;
 }
-/** Pick the capture for the largest breakpoint <= width, else the smallest one. */
+/**
+ * Pick the capture whose captured container width is nearest to `width`.
+ * Compares container to container (keys are viewport widths, and a container is
+ * usually narrower than its viewport). Nearest, not floor, so a scrollbar that
+ * shaves a few px off the live container still picks the matching capture.
+ */
 export declare function pickCapture(bones: Bones, width: number): Capture | undefined;

package/dist/core.js

@@ -1,6 +1,14 @@
-/** Pick the capture for the largest breakpoint <= width, else the smallest one. */
+/**
+ * Pick the capture whose captured container width is nearest to `width`.
+ * Compares container to container (keys are viewport widths, and a container is
+ * usually narrower than its viewport). Nearest, not floor, so a scrollbar that
+ * shaves a few px off the live container still picks the matching capture.
+ */
 export function pickCapture(bones, width) {
-    const bps = Object.keys(bones).map(Number).sort((a, b) => a - b);
-    const bp = bps.filter(b => b <= width).pop() ?? bps[0];
-    return bp === undefined ? undefined : bones[bp];
+    let best;
+    for (const c of Object.values(bones)) {
+        if (!best || Math.abs(c.width - width) < Math.abs(best.width - width))
+            best = c;
+    }
+    return best;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jiplak",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Pixel-perfect skeleton loading screens, auto-captured from your real React UI.",
   "keywords": [
     "skeleton",