@motion-proto/live-tokens 0.37.0 → 0.38.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.37.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,