@motion-proto/live-tokens 0.89.2 → 0.90.1

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## 0.90.1 — Sketch mode spares the editor overlay
+
+### Fixed
+
+- **Sketch mode leaves the editor overlay's layout alone.** The layer picks
+  out components by bare class name, and the overlay's pull tab shares
+  TabBar's `.tab`. With a sketchstyle on, a pill docked to an edge lost its
+  tab's positioning and background, which left nothing on screen to pull it
+  back with. Every rule that paints or moves an element now skips anything
+  inside `[data-live-tokens-chrome]`. A sketch scope nested inside chrome
+  still draws, so a preview stage placed there keeps previewing. The guard
+  sits in `:where()` and adds no specificity, so page overrides of the layer
+  keep their order.
+
+## 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.1",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [

package/src/editor/core/sketch/sketchLayer.ts

@@ -370,6 +370,15 @@ const UNCLIPPED = PART_SPECS.filter((p) => !p.clips).map((p) => p.sel).join(', '
 const CLIPPED = PART_SPECS.filter((p) => p.clips).map((p) => p.sel).join(', ');
 const UNMASKED = PART_SPECS.filter((p) => p.unmasked).map((p) => p.sel).join(', ');
 
+/** Keeps the layer off the editor's own UI on the host page. The part
+    selectors are bare class names, and the overlay's `.tab` matched TabBar's:
+    the docked pill lost its positioning and its pull tab drew invisible. A
+    scope nested inside chrome draws again, so a preview stage placed there
+    still previews. `:where` adds no weight, so overrides keep their order. */
+const OUTSIDE_CHROME =
+  ':where(:not([data-live-tokens-chrome], [data-live-tokens-chrome] *),' +
+  ' [data-live-tokens-chrome] [data-sketch] *)';
+
 export function buildDefsMarkup(s: SketchStyleSettings): string {
   /**
    * `warp` is the shape stage: one wave of noise whose wavelength spans a whole
@@ -697,9 +706,9 @@ const WARP_FREQUENCY = 0.08;
 
 export function buildStylesheet(s: SketchStyleSettings): string {
   const on = '[data-sketch]';
-  const parts = `:is(${PARTS})`;
+  const parts = `:is(${PARTS})${OUTSIDE_CHROME}`;
   const el = `${on} ${parts}`;
-  const strokeEl = `${on} :is(${STROKE_PARTS})`;
+  const strokeEl = `${on} :is(${STROKE_PARTS})${OUTSIDE_CHROME}`;
 
   // `--radius-none` is a bare `0`, so a part the theme leaves square hands the
   // corner maths a number where it needs a length: `calc(0 + 0.95 * 16px)` is
@@ -780,7 +789,7 @@ export function buildStylesheet(s: SketchStyleSettings): string {
   const iconSel = `[class*="fa-"], svg:not([${DEFS_ATTR}])`;
   const iconsOn = s.iconTravel > 0 || s.iconMaskOn;
   const icons = iconsOn
-    ? `${on} :is(${iconSel}){` +
+    ? `${on} :is(${iconSel})${OUTSIDE_CHROME}{` +
         (s.iconTravel > 0
           ? `filter:var(--sketch-icon-off, var(--sketch-icon-filter, url(#${ID}-icon-0)));`
           : '') +
@@ -876,14 +885,14 @@ export function buildStylesheet(s: SketchStyleSettings): string {
       `background:transparent !important;border-color:transparent !important;` +
       `box-shadow:none !important;` +
     `}` +
-    `${on} :is(${UNCLIPPED}){overflow:visible !important;}` +
+    `${on} :is(${UNCLIPPED})${OUTSIDE_CHROME}{overflow:visible !important;}` +
     // The five that keep their clip take the drawn radii on the host, so what
     // the clip cuts turns the same way the ink does at the corners. It cannot
     // follow the displacement, which is a filter and has no geometry to clip to.
     `${el}:is(${CLIPPED}){${corners}}` +
     // Only parts that sit in flow. Forcing this onto an absolutely-positioned
     // part would drop it back to its flow position.
-    `${on} :is(${FLOW_PARTS}){position:relative;}`;
+    `${on} :is(${FLOW_PARTS})${OUTSIDE_CHROME}{position:relative;}`;
 
   // Fill layer. Own seed, own offset, sits behind the content.
   //
@@ -988,7 +997,7 @@ export function buildStylesheet(s: SketchStyleSettings): string {
   // per-instance cycle as the fill offset, so no two components retrace alike.
   const retraceStep = s.retraceOffset.toFixed(2);
   const retrace = s.retracePass === 'copy'
-    ? `[data-sketch][data-sketch-passes='double'] :is(${STROKE_PARTS})::after{` +
+    ? `[data-sketch][data-sketch-passes='double'] :is(${STROKE_PARTS})${OUTSIDE_CHROME}::after{` +
         `--sketch-retrace:drop-shadow(` +
           `calc(var(--sketch-jx, 0.6) * ${retraceStep}px)` +
           ` calc(var(--sketch-jy, -0.4) * ${retraceStep}px)` +

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