@motion-proto/live-tokens 0.35.0 → 0.37.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 0.37.0 — ImageLightbox `capNatural` accepts a multiple
+
+### Added
+
+- **`ImageLightbox`'s `capNatural` now takes a number as well as a boolean.**
+  `true` still caps the open fit at 1:1 (100%); a number caps at that multiple of
+  the source's natural resolution (`capNatural={2}` = up to 200%). This allows a
+  small source to open a little larger than native without being upscaled all the
+  way to the viewport. Backward compatible — the boolean form is unchanged.
+
+## 0.36.0 — ImageLightbox `capNatural`: stop upscaling small sources
+
+### Added
+
+- **`ImageLightbox` gains a `capNatural` prop.** By default the modal opens
+  fitted to the viewport, which upscales a small source (e.g. a low-res GIF or
+  screenshot) until it looks soft. Set `capNatural` and the open fit is clamped
+  to the source's natural resolution (100%, 1 source px = 1 screen px), so small
+  images stay crisp while larger ones fit the viewport exactly as before. It only
+  bounds the initial open; pair it with `maxZoom={1}` to also stop the `extended`
+  zoom controls from magnifying past 100%. Needs the natural pixel size (from
+  `width`/`height` or the loaded image) — until that's known the image fits the
+  viewport, then snaps to the cap once measured.
+
 ## 0.35.0 — Dev routes moved to a reserved `/live-tokens/*` namespace
 
 ### Changed (breaking)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.35.0",
+  "version": "0.37.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [

package/src/system/components/ImageLightbox.svelte

@@ -28,12 +28,23 @@
     extended?: boolean;
     /** Maximum zoom, as a multiple of the image's natural resolution: `1` = 100%
         of the source's real pixels (1 source px = 1 screen px), `2` = 200%. The
-        modal always opens fitted to the viewport; this only caps how far the
-        `extended` zoom controls can magnify. Unset = the default 5x-the-fit cap.
-        An image whose fitted size already exceeds the cap simply can't be zoomed
-        in. Needs the natural pixel size (from `width`/`height`, or the loaded
-        image); until that's known the default cap applies. */
+        modal opens fitted to the viewport (or to a `capNatural`-capped size when
+        that's set); this only caps how far the `extended` zoom controls magnify.
+        Unset = the default 5x-the-fit cap. An image whose fitted size already
+        exceeds the cap simply can't be zoomed in. Needs the natural pixel size
+        (from `width`/`height`, or the loaded image); until that's known the
+        default cap applies. */
     maxZoom?: number | undefined;
+    /** Cap the opened image's fit relative to its natural resolution, so a small
+        source (e.g. a low-res GIF) isn't upscaled to fill the viewport until it
+        looks soft. `true` caps at 1:1 (100%); a number caps at that multiple
+        (`2` = up to 200% of native). The modal still opens centered and never
+        below the viewport fit, so larger sources are unaffected. Only bounds the
+        initial open fit — the `extended` zoom controls still run up to `maxZoom`
+        (pair with `maxZoom` to also bound zoom). Needs the natural pixel size
+        (from `width`/`height`, or the loaded image); until that's known the image
+        fits the viewport, then snaps to the cap once measured. */
+    capNatural?: boolean | number;
   }
 
   let {
@@ -46,6 +57,7 @@
     fit = 'contain',
     extended = false,
     maxZoom = undefined,
+    capNatural = false,
   }: Props = $props();
 
   const items = $derived(
@@ -151,7 +163,12 @@
     if (!aspect) {
       return { top: vh * 0.04, left: vw * 0.03, width: capW, height: capH };
     }
-    const tileW = Math.min(capW, capH * aspect);
+    let tileW = Math.min(capW, capH * aspect);
+    if (capNatural) {
+      const nw = naturalWidthOf(current);
+      const mult = capNatural === true ? 1 : capNatural;
+      if (nw) tileW = Math.min(tileW, nw * mult);
+    }
     const tileH = tileW / aspect;
     return {
       top: (vh - tileH) / 2,