@motion-proto/live-tokens 0.46.0 → 0.46.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 0.46.1 — The Colors view collapses on its own width
+
+### Fixed
+
+- **Colors view collapses by pane width, not viewport width.** `.pane` is now a
+  `container: pane / inline-size`, and the harmony columns (`44rem`) and wheel
+  rail (`26rem`) collapse against it. The pane is one column of a two-pane grid,
+  so a wide standalone window narrowed it just as the docked panel does while
+  the old `@media (max-width: 720px)` query never fired.
+
+- **Swatch rows and derived-scale strips rank instead of shrinking to slivers.**
+  Below `28rem` of their own container both switch from flex to
+  `repeat(auto-fill, minmax(...))` grids, keeping a readable chip width and
+  wrapping into ranks. `auto-fill` holds the tracks steady, so a short last rank
+  never stretches.
+
+- **`UIMenuButton` anchors correctly inside a container-type ancestor.** A
+  `container-type` (or transformed) ancestor re-parents a fixed element's
+  containing block off the viewport origin, so the menu landed offset from its
+  computed position. It now measures where it landed and re-anchors.
+
 ## 0.46.0 — Harmony axes are numbered, and you assign them with a picker
 
 ### Changed

package/package.json

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

package/src/editor/ui/UIMenuButton.svelte

@@ -120,6 +120,14 @@
     }
     menu.style.left = `${left}px`;
     menu.style.top = `${top}px`;
+    // A container-type (or transformed) ancestor re-parents the fixed
+    // containing block off the viewport origin; measure where the menu landed
+    // and re-anchor so the viewport math above still holds.
+    const placed = menu.getBoundingClientRect();
+    if (Math.abs(placed.left - left) > 0.5 || Math.abs(placed.top - top) > 0.5) {
+      menu.style.left = `${left - (placed.left - left)}px`;
+      menu.style.top = `${top - (placed.top - top)}px`;
+    }
     menu.style.visibility = 'visible';
   }
 

package/src/editor/ui/colors/ColorsTab.svelte

@@ -339,7 +339,11 @@
     }
   }
 
+  /* The pane is one column of a two-pane grid, so it goes narrow on a wide
+     standalone window just as it does in the docked panel. Every collapse
+     below keys on the pane's own width, never the viewport's. */
   .pane {
+    container: pane / inline-size;
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-32);
@@ -434,9 +438,8 @@
     gap: var(--ui-space-6);
   }
 
-  /* The docked panel's iframe viewport is the panel itself, so this collapse
-     fires there long before the standalone page ever gets this narrow. */
-  @media (max-width: 720px) {
+  /* Below this the three columns squeeze the swatches into slivers. */
+  @container pane (max-width: 44rem) {
     .harmony-cols {
       grid-template-columns: minmax(0, 1fr);
     }
@@ -446,8 +449,10 @@
       justify-content: center;
       transform: rotate(90deg);
     }
+  }
 
-    /* Below the wheel's minimum the rail is taller than the disc it flanks. */
+  /* Below the wheel's minimum the rail is taller than the disc it flanks. */
+  @container pane (max-width: 26rem) {
     .wheel-row {
       flex-direction: column;
       align-items: stretch;
@@ -572,6 +577,7 @@
   }
 
   .swatch-rows {
+    container: swatches / inline-size;
     display: flex;
     flex-direction: column;
     gap: var(--ui-space-8);
@@ -593,6 +599,17 @@
     outline-color: var(--ui-text-primary);
   }
 
+  /* Too narrow for one swatch per family: wrap into ranks that keep a readable
+     swatch width rather than shrinking toward slivers. auto-fill keeps every
+     rank on the same tracks, so a short last rank never stretches. */
+  @container swatches (max-width: 28rem) {
+    .swatch-row {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
+      gap: var(--ui-space-8);
+    }
+  }
+
   /* Every swatch keeps one width: selection reads in the frame's height alone,
      so nothing in the row shifts sideways as the selection moves. */
   .swatch {

package/src/editor/ui/colors/PaletteStepStrip.svelte

@@ -51,33 +51,51 @@
   }
 </script>
 
-<div class="strip" role="group" aria-label={`${spec.label} derived scale`}>
-  {#each steps as s, i (s.label)}
-    <div
-      class="spot"
-      class:anchored={anchoredStep === i}
-      class:background={backgroundStep === i}
-      style:flex-grow={dockGrow(i, anchoredStep)}
-      title={stepTitle(s, i)}
-    >
-      <span class="chip" style:background={s.hex}>
-        <span class="aa" class:fail={!s.aa} style:color={s.textHex}>Aa</span>
-      </span>
-      <span class="step-label">{s.label}</span>
-    </div>
-  {/each}
+<div class="strip-viewport">
+  <div class="strip" role="group" aria-label={`${spec.label} derived scale`}>
+    {#each steps as s, i (s.label)}
+      <div
+        class="spot"
+        class:anchored={anchoredStep === i}
+        class:background={backgroundStep === i}
+        style:flex-grow={dockGrow(i, anchoredStep)}
+        title={stepTitle(s, i)}
+      >
+        <span class="chip" style:background={s.hex}>
+          <span class="aa" class:fail={!s.aa} style:color={s.textHex}>Aa</span>
+        </span>
+        <span class="step-label">{s.label}</span>
+      </div>
+    {/each}
+  </div>
 </div>
 {#if isGradient}
   <p class="hint">The page background is currently a gradient; the base color takes over when gradient mode is off.</p>
 {/if}
 
 <style>
+  .strip-viewport {
+    container: strip / inline-size;
+    min-width: 0;
+  }
+
   .strip {
     display: flex;
     align-items: flex-end;
     gap: var(--ui-space-4);
   }
 
+  /* Eleven steps shrink to slivers before the pane is done narrowing: below
+     that, rank the chips on a grid that keeps a readable width. Grid ignores
+     the dock-magnify flex-grow, so the anchored step reads by height alone. */
+  @container strip (max-width: 28rem) {
+    .strip {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
+      gap: var(--ui-space-8) var(--ui-space-4);
+    }
+  }
+
   .spot {
     flex: 1 1 0;
     min-width: 0;