mevebu 1.4.0 → 1.4.1

package/mevebu/app/mevebu.js

@@ -264,7 +264,7 @@ function footer() {
     el(
       "div",
       {},
-      el("h4", { class: "m-0 mb-2.5 text-2xs font-bold tracking-[0.08em] text-ink-3 uppercase" }, title),
+      el("h4", { class: "mb-2.5 text-2xs font-bold tracking-[0.08em] text-ink-3 uppercase" }, title),
       el("ul", { class: "m-0 grid list-none gap-1.5 p-0" }, ...links.map((link) => el("li", {}, link)))
     );
 

package/mevebu/app/tailwind.css

@@ -1579,6 +1579,18 @@
     }
   }
   @media (width >= 60rem) {
+    .min-\[60rem\]\:sticky {
+      position: sticky;
+    }
+    .min-\[60rem\]\:top-\[var\(--stick\)\] {
+      top: var(--stick);
+    }
+    .min-\[60rem\]\:-mx-1 {
+      margin-inline: calc(var(--spacing) * -1);
+    }
+    .min-\[60rem\]\:max-h-\[var\(--stick-max\)\] {
+      max-height: var(--stick-max);
+    }
     .min-\[60rem\]\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
       grid-template-columns: minmax(0,1fr) auto;
     }
@@ -1588,6 +1600,15 @@
     .min-\[60rem\]\:gap-6 {
       gap: calc(var(--spacing) * 6);
     }
+    .min-\[60rem\]\:overflow-y-auto {
+      overflow-y: auto;
+    }
+    .min-\[60rem\]\:overscroll-contain {
+      overscroll-behavior: contain;
+    }
+    .min-\[60rem\]\:px-1 {
+      padding-inline: var(--spacing);
+    }
   }
   @media (width >= 64rem) {
     .lg\:grid-cols-3 {
@@ -1955,6 +1976,8 @@
   --ctl: 40px;
   --card-pad: clamp(20px, 3vw, 32px);
   --band-pad: clamp(12px, 2vw, 16px);
+  --stick: calc(var(--bar) + 1rem);
+  --stick-max: calc(100dvh - var(--bar) - 3rem);
   --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
   --t: 150ms;

package/mevebu/app/tailwind.src.css

@@ -75,6 +75,12 @@
   --card-pad: clamp(20px, 3vw, 32px);
   --band-pad: clamp(12px, 2vw, 16px);
 
+  /* Where a short controls column pins while a long result scrolls past it:
+     just under the header, and never taller than the room left below it, so the
+     bottom of a long form stays reachable instead of being pushed off screen. */
+  --stick: calc(var(--bar) + 1rem);
+  --stick-max: calc(100dvh - var(--bar) - 3rem);
+
   --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 

package/mevebu/libs/js/core.js

@@ -280,7 +280,7 @@ export function openPalette({ onPick } = {}) {
     autocomplete: "off",
     spellcheck: "false",
   });
-  const list = el("ul", { class: "m-0 mt-1.5 max-h-[min(60vh,360px)] overflow-y-auto px-2 pb-2", role: "listbox" });
+  const list = el("ul", { class: "mt-1.5 max-h-[min(60vh,360px)] overflow-y-auto px-2 pb-2", role: "listbox" });
   const count = el("p", { class: "m-0 px-[18px] pt-2 text-2xs text-ink-3" });
   const footer = el(
     "p",
@@ -415,12 +415,21 @@ export function debounce(fn, ms = 120) {
 
 // ---------- bench layout ----------
 
-/** Two column bench: controls on the left, the result on the right. */
+/** Two column bench: controls on the left, the result on the right.
+ *  Above 60rem the controls pin under the header, so a long result can be read
+ *  and scrolled without the controls leaving the screen. The cap keeps the
+ *  bottom of a tall form reachable instead of pinning it out of view.
+ *  The negative margin plus the matching padding give the focus halo room to
+ *  paint: a scroll container clips its children's ink, and the fields sit flush
+ *  with the column edges, so without the 4px gutter every ring loses its sides.
+ *  The pair cancels out, so the fields keep their width and stay on the anchor line. */
 export function bench(side, main) {
+  const sideColumn =
+    "min-w-0 min-[60rem]:sticky min-[60rem]:top-[var(--stick)] min-[60rem]:max-h-[var(--stick-max)] min-[60rem]:overflow-y-auto min-[60rem]:overscroll-contain min-[60rem]:-mx-1 min-[60rem]:px-1";
   return el(
     "div",
     { class: "grid items-start gap-5 min-[60rem]:grid-cols-[minmax(0,21rem)_minmax(0,1fr)] min-[60rem]:gap-6" },
-    el("div", { class: "min-w-0" }, side),
+    el("div", { class: sideColumn }, side),
     el("div", { class: "min-w-0" }, main)
   );
 }
@@ -733,7 +742,7 @@ export function blank(iconName, text) {
 // ---------- version ----------
 
 // Kept in one place. The CLI reads the same value from package.json.
-export const VERSION = "1.4.0";
+export const VERSION = "1.4.1";
 export const PACKAGE_NAME = "mevebu";
 export const REPO_SLUG = "mevebu/mevebu";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mevebu",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Small tools that run in your browser. No accounts, no uploads, no tracking.",
   "license": "MIT",
   "type": "module",