@motion-proto/live-tokens 0.89.2 → 0.90.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.90.0 — Thumbnail ratio for ImageLightbox
+
+### Added
+
+- **ImageLightbox takes a `thumbAspect`.** The prop sets the thumbnail box's
+  ratio, such as `thumbAspect={4 / 3}`, and pairs with `fit="cover"` to crop
+  the thumbnail. The image still opens whole, at its own ratio. VideoLightbox
+  has had the same prop. A page no longer overrides the wrapper's inline
+  `aspect-ratio` with `!important`.
+
+### Fixed
+
+- **A page's footer sits at the bottom of the page.** The router wrapper
+  added 12rem of padding under every page, in production as well as in dev,
+  so a footer ended above an empty band. The wrapper no longer pads the
+  page, and each page sets its own bottom spacing.
+
 ## 0.89.2 — Faster component tests
 
 ### Changed

package/package.json

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

package/src/editor/docs/Docs.svelte

@@ -647,14 +647,13 @@
   /* Desktop: lock the docs surface to the viewport so only the content column
      scrolls — the rail is full-height and immovable, and there is never an
      empty band under the page. The router wrapper (.lt-app) assumes window-
-     scroll pages (min-height + a 12rem bottom pad); neutralise that here, for
+     scroll pages (min-height); neutralise that here, for
      the docs route only, via :has. The doubled .lt-app outranks the wrapper's
      own scoped rule on a specificity tie. */
   @media (min-width: 961px) {
     :global(.lt-app.lt-app:has(.docs-page)) {
       height: 100vh;
       min-height: 0;
-      padding-bottom: 0;
       overflow: hidden;
     }
     .docs-page { height: 100%; overflow: hidden; }

package/src/editor/overlay/LiveTokensRouter.svelte

@@ -297,7 +297,6 @@
     width: 100%;
     min-height: 100vh;
     color: var(--text-primary);
-    padding-bottom: 12rem;
     /* Set by LiveEditorOverlay when docked-open. Extends layout past the
        fixed panel so the viewport can scroll to reveal hidden content. */
     padding-right: var(--lt-overlay-scroll-pad, 0px);
@@ -305,14 +304,12 @@
 
   .lt-app.is-editor,
   .lt-app.is-colors {
-    padding-bottom: 0;
     background: black;
   }
 
   .lt-app.is-component-editor {
     min-height: 0;
     height: 100vh;
-    padding-bottom: 0;
     padding-right: 0;
     background: black;
     overflow: hidden;

package/src/system/components/ImageLightbox.svelte

@@ -9,6 +9,10 @@
       { when: 'a video clip the reader opens from its still.', use: 'videolightbox' },
       { when: 'slides or pages the reader reads in order.', use: 'slidepager' },
     ],
+    props: {
+      thumbAspect:
+        'the ratio the thumbnail box holds, when it should not be the image\'s own. The image still opens whole, at its own ratio.',
+    },
   } satisfies CatalogueEntry;
 </script>
 
@@ -33,10 +37,12 @@
         single-entry array behaves exactly like a lone `src`. */
     images?: GalleryImage[];
     maxWidth?: number | string | undefined;
+    /** The thumbnail box's ratio, when it differs from the image's own. */
+    thumbAspect?: number | undefined;
     /** Closed-thumbnail object-fit. `cover` crops the thumbnail to fill its box;
         the expanded modal always uses `contain` so the whole image stays visible.
-        `cover` only crops when the thumbnail has its own box (an aspect from
-        `width`/`height`, or a CSS-constrained container). */
+        `cover` only crops when the thumbnail box differs from the image's shape
+        (a `thumbAspect`, or a CSS-constrained container). */
     fit?: 'contain' | 'cover';
     /** Where the tile's shadow lands. Both modes read
         `--imagelightbox-tile-shadow`: `box` casts it from the tile's rectangle,
@@ -94,6 +100,7 @@
     height = undefined,
     images = undefined,
     maxWidth = undefined,
+    thumbAspect = undefined,
     fit = 'contain',
     shadow = 'box',
     surface = undefined,
@@ -188,7 +195,7 @@
     return m ? m.w / m.h : undefined;
   };
   const naturalWidthOf = (it?: GalleryImage) => (it ? (it.width ?? measured[it.src]?.w) : undefined);
-  const coverAspect = $derived(aspectOf(cover)); // inline thumbnail box
+  const tileAspect = $derived(thumbAspect ?? aspectOf(cover));
   const aspect = $derived(aspectOf(current)); // open modal box
 
   // Internal `scale` is relative to the fitted stage, so a natural-size cap is
@@ -620,7 +627,7 @@
 
 <div
   class="image-lightbox-wrapper"
-  style:aspect-ratio={coverAspect ? `${coverAspect}` : undefined}
+  style:aspect-ratio={tileAspect ? `${tileAspect}` : undefined}
   style:max-width={typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth}
 >
   <button