@motion-proto/live-tokens 0.64.3 → 0.65.1

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # Changelog
 
+## 0.65.1 — applyFontStacks returns what it wrote
+
+### Changed
+
+- **`applyFontStacks` returns the variables it wrote.** It writes the `--font-*`
+  stacks from a list it kept to itself, so a consumer tracking what it had
+  applied — to tear those vars down when switching looks — had to hand-maintain
+  a copy of that list. A copy falls behind silently the moment a stack is added
+  here, and the missed variable stays stuck at the outgoing look's value:
+  `--font-editorial` did exactly that to a site that had listed the original
+  four. The return value is additive, so existing calls keep working.
+
+  ```ts
+  applied = [...applied, ...applyFontStacks(theme.fontStacks, theme.fontSources)];
+  ```
+
+## 0.65.0 — A link the router cannot serve is the browser's
+
+### Fixed
+
+- **The router hijacked links it could not serve.** Its click interception
+  claimed every anchor whose `href` began with `/`, reading neither `target`,
+  `download`, `rel`, nor whether any route rendered the path. So a link to a
+  file the origin serves — a PDF or an image under `public/`, a download, a
+  server endpoint — had its click cancelled and its path pushed at a router with
+  nothing to show for it, and the link silently did nothing. A left-click is now
+  claimed only when the anchor asks for ordinary same-tab navigation and a route
+  actually renders the path; everything else loads for real. Protocol-relative
+  hrefs (`//host/x`) are no longer mistaken for local paths either — they start
+  with `/`, and `pushState` throws on a cross-origin URL.
+
+### Changed (breaking)
+
+- **An unrouted path now performs a real navigation.** `pages['/']` is a
+  fallback for *rendering* an unmatched path, not a claim on it, so the router
+  no longer intercepts clicks on paths no route declares. On an SPA-rewriting
+  host the page still lands on the `pages['/']` fallback, now via a page load
+  rather than a client-side swap; on a host without the rewrite the URL 404s
+  instead of quietly rendering the home page. Return your own entry from
+  `resolve()` to keep claiming such paths.
+
 ## 0.64.3 — The add button names the act
 
 ### Changed

package/README.md

@@ -84,6 +84,8 @@ bootLiveTokens(App, '#app');
 
 For routes you cannot enumerate ahead of time (a `/:id`, a path prefix, a page shown only under some condition), add a `resolve` function from the current path to a `RouteEntry` and return `null` to fall through. Resolution order is `pages[path]`, then `resolve(path)`, then the `pages['/']` fallback, so adding `resolve` never changes how existing entries match. A resolved entry can carry `props`, letting one component serve many paths, and its `source` gives the dynamic route a working "Page Source" button.
 
+Link-click interception follows the same route table. A left-click becomes an in-app `navigate()` only when the anchor asks for ordinary same-tab navigation — no `target`, `download`, `rel="external"`, or modifier key — and `pages` or `resolve` claims the path. Anything else keeps the browser's own handling, so a link to a PDF or an image under `public/`, to a download, or to a path no route declares loads for real. Note that the `pages['/']` fallback renders an unmatched path without claiming it: link to a path no route declares and you get a page load, not a client-side swap.
+
 ```svelte
 <LiveTokensRouter
   pages={{ '/': { lazy: () => import('./Home.svelte'), label: 'Home' } }}

package/package.json

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

package/src/editor/core/fonts/fontLoader.ts

@@ -129,12 +129,27 @@ export function resolveFontStackValues(
  * Compose each stack into its resolved "family1, family2, ..." string and
  * write it to the matching --font-* variable on :root (and parent :root when
  * in an iframe) via the same pipeline used for color variables.
+ *
+ * Returns the variables it set, so a caller tracking what it has applied — to
+ * tear those vars down when switching looks — can record them without keeping
+ * its own copy of the stack list. A hand-maintained copy silently falls behind
+ * whenever a stack is added here, leaving the missed variable stuck at the
+ * outgoing look's value; `--font-editorial` did exactly that.
  */
-export function applyFontStacks(stacks: FontStack[], sources: FontSource[]): void {
+export function applyFontStacks(
+  stacks: FontStack[],
+  sources: FontSource[],
+): FontStackVariable[] {
   const resolved = resolveFontStackValues(stacks, sources);
+  const applied: FontStackVariable[] = [];
   for (const name of FONT_STACK_VARIABLES) {
     const value = resolved[name];
-    if (value) setCssVar(name, value);
-    else removeCssVar(name);
+    if (value) {
+      setCssVar(name, value);
+      applied.push(name);
+    } else {
+      removeCssVar(name);
+    }
   }
+  return applied;
 }

package/src/editor/overlay/LiveTokensRouter.svelte

@@ -64,6 +64,67 @@
   ): RouteEntry | null {
     return pages[route] ?? resolve?.(route) ?? pages['/'] ?? null;
   }
+
+  /** The click facts the interception decision reads, so it can be tested
+      without constructing a DOM MouseEvent. */
+  export interface LinkClick {
+    button: number;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    altKey: boolean;
+    defaultPrevented: boolean;
+  }
+
+  /**
+   * The path a left-click on `anchor` should navigate to in-app, or `null` to
+   * leave the click to the browser.
+   *
+   * Interception cancels the click, so every link this claims and cannot serve
+   * is a link that silently does nothing. It therefore claims a link only when
+   * the anchor asks for ordinary same-tab navigation *and* `claimsRoute` says a
+   * route renders that path — which leaves anything else the origin serves (a
+   * PDF or an image under `public/`, a download, a server-rendered endpoint) to
+   * load for real.
+   *
+   * `pages['/']` is a fallback for *rendering* an unmatched path, not a claim on
+   * it: treating it as one is what made every unrouted URL look interceptable.
+   */
+  export function resolveLinkNavigation(
+    anchor: Pick<Element, 'getAttribute' | 'hasAttribute'>,
+    e: LinkClick,
+    claimsRoute: (pathname: string) => boolean,
+    base: string,
+  ): string | null {
+    if (e.defaultPrevented) return null;
+    // Middle- and right-clicks reach `auxclick`, not `click`, in current
+    // browsers; the guard costs nothing and keeps the contract explicit.
+    if (e.button !== 0) return null;
+    if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return null;
+
+    const target = anchor.getAttribute('target');
+    if (target && target !== '_self') return null;
+    if (anchor.hasAttribute('download')) return null;
+    if (anchor.getAttribute('rel')?.split(/\s+/).includes('external')) return null;
+
+    const href = anchor.getAttribute('href');
+    // Relative and absolute-URL hrefs stay the browser's; only root-relative
+    // paths are candidates. `//host/x` starts with `/` and is cross-origin, and
+    // pushState would throw on it, so the origin check below has to run too.
+    if (!href?.startsWith('/')) return null;
+
+    let url: URL;
+    try {
+      url = new URL(href, base);
+    } catch {
+      return null;
+    }
+    if (url.origin !== new URL(base).origin) return null;
+
+    if (!claimsRoute(url.pathname)) return null;
+
+    return url.pathname + url.search + url.hash;
+  }
 </script>
 
 <script lang="ts">
@@ -176,17 +237,29 @@
     return Promise.resolve({ default: null as unknown as Component<any, any, any> });
   });
 
-  // In-app link interception: turn left-clicks on internal `/...` anchors into
-  // navigate() calls so router state updates without a full reload. Modifier
-  // keys (cmd/ctrl/shift/alt) pass through to the browser's default handling.
+  // Which paths this router can actually render. The `pages['/']` fallback in
+  // resolveRoute is deliberately not consulted: it renders an unmatched path,
+  // it does not claim one.
+  function claimsRoute(pathname: string): boolean {
+    if (pathname in pages) return true;
+    if (isDev && editorEnabled && pathname === editorPath) return true;
+    if (isDev && componentsEnabled && pathname === componentsPath) return true;
+    if (isDev && colorsEnabled && pathname === colorsPath) return true;
+    if (isDev && docsEnabled && pathname === docsPath) return true;
+    return !!resolve?.(pathname);
+  }
+
+  // In-app link interception: turn left-clicks on anchors this router can serve
+  // into navigate() calls, so route state updates without a full reload.
+  // Everything else — a new tab, a download, a file under `public/`, another
+  // origin — keeps the browser's own handling.
   function handleClick(e: MouseEvent) {
-    const anchor = (e.target as HTMLElement).closest('a[href]');
+    const anchor = (e.target as Element | null)?.closest?.('a[href]');
     if (!anchor) return;
-    const href = anchor.getAttribute('href');
-    if (!href || !href.startsWith('/')) return;
-    if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
+    const path = resolveLinkNavigation(anchor, e, claimsRoute, window.location.href);
+    if (!path) return;
     e.preventDefault();
-    navigate(href);
+    navigate(path);
   }
 </script>