@motion-proto/live-tokens 0.36.0 → 0.38.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 0.38.0 — Overridable scroll reset for smooth-scroll hosts
+
+### Added
+
+- **`setScrollReset(fn)` lets a host route navigation's scroll reset through its
+  own scroll system.** On a non-hash `navigate()` the router resets the viewport
+  to the top. That default calls `window.scrollTo(0, 0)`, which is invisible to
+  consumers driving scroll with a smooth-scroll library (Lenis, Locomotive):
+  their scroll position is decoupled from the window, so the rendered page stays
+  put — most visibly when `LiveTokensRouter` intercepts an in-page link (e.g. a
+  card) and the new page opens mid-scroll instead of at the top. Register a reset
+  that drives your provider (`setScrollReset(() => lenis.scrollTo(0, { immediate: true }))`)
+  and both the overlay's nav and intercepted links reset correctly. Hash targets
+  still skip the reset so in-page anchors are unaffected. Backward compatible —
+  unset, the native `window.scrollTo` behavior is unchanged.
+
+## 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

package/package.json

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

package/src/editor/core/routing/router.ts

@@ -13,6 +13,17 @@ function rememberPrev(current: string) {
 
 export const route = writable<string>('/');
 
+// Scroll reset on navigation. The default jumps the native viewport to the top,
+// which is invisible to consumers that drive scrolling with a smooth-scroll
+// library (Lenis, Locomotive): their internal scroll position is decoupled from
+// the window, so `window.scrollTo` leaves the rendered page where it was.
+// `setScrollReset` lets such hosts route the reset through their own provider.
+let scrollReset = () => window.scrollTo(0, 0);
+
+export function setScrollReset(fn: () => void) {
+  scrollReset = fn;
+}
+
 let initialised = false;
 
 /**
@@ -43,7 +54,7 @@ export function navigate(path: string) {
     rememberPrev(window.location.pathname || '/');
     history.pushState(null, '', path);
     if (!path.includes('#')) {
-      window.scrollTo(0, 0);
+      scrollReset();
     }
   }
   route.set(pathname);

package/src/editor/index.ts

@@ -9,7 +9,7 @@ export type { BootLiveTokensOptions } from './bootstrap';
 export { columnsVisible, toggleColumns, init as initColumnsOverlay } from './overlay/columnsOverlay';
 export { configureEditor, storageKey } from './core/store/editorConfig';
 export { activeFileName } from './core/store/editorConfigStore';
-export { init as initRouter, route, navigate } from './core/routing/router';
+export { init as initRouter, route, navigate, setScrollReset } from './core/routing/router';
 export { init as initCssVarSync } from './core/cssVarSync';
 export {
   init as initEditorStore,

package/src/system/components/ImageLightbox.svelte

@@ -28,22 +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 opens fitted to the viewport (or to natural size when `capNatural`
-        is set); this only caps how far the `extended` zoom controls can magnify.
+        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 at its natural resolution (100%): the modal still
-        opens centered, but never scales the source above 1:1, so a small source
-        (e.g. a low-res GIF) stays crisp instead of being upscaled to fill the
-        viewport. Larger images are unaffected — they fit the viewport as usual.
-        Only bounds the initial open fit; pair with `maxZoom={1}` to also stop the
-        `extended` controls zooming 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. */
-    capNatural?: boolean;
+    /** 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 {
@@ -165,7 +166,8 @@
     let tileW = Math.min(capW, capH * aspect);
     if (capNatural) {
       const nw = naturalWidthOf(current);
-      if (nw) tileW = Math.min(tileW, nw);
+      const mult = capNatural === true ? 1 : capNatural;
+      if (nw) tileW = Math.min(tileW, nw * mult);
     }
     const tileH = tileW / aspect;
     return {