@motion-proto/live-tokens 0.64.2 → 0.65.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## 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
+
+- **The add button names the act, not the font.** It read `+ add Domine` — the
+  next family it would reach for — so the label changed under the pointer as a
+  stack filled up, and a control that renames itself between clicks is hard to
+  aim at. It now reads `+ add font`, and still falls back to `+ add fallback`
+  once every project font is in the stack.
+
 ## 0.64.2 — A stack can gain a second font
 
 ### Fixed

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.2",
+  "version": "0.65.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [

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>
 

package/src/editor/ui/FontStackEditor.svelte

@@ -193,8 +193,7 @@
   }
 
   function addLabel(variable: FontStackVariable): string {
-    const next = nextAddableSlot(variable);
-    return next?.kind === 'project' ? `+ add ${slotDisplayName(next)}` : '+ add fallback';
+    return nextAddableSlot(variable)?.kind === 'project' ? '+ add font' : '+ add fallback';
   }
 
   /** A font joins the other fonts, above the fallbacks; a fallback lands just