makersclaw 0.2.0 → 0.3.1

package/templates/next/files/components/ui/scroll-area.jsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cx } from "./cx";
+
+// ScrollArea — a box whose content scrolls inside it: a long list in a
+// rail, a row of cards wider than the screen. The browser's own
+// scrolling (touch, wheel, keys, momentum), with thin scrollbars in the
+// workspace's colours. Give it a bound through className (max-h-80, h-64)
+// or it simply grows.
+//
+//   orientation  vertical · horizontal · both
+//   fade         true: the edges with more content past them fade out, so
+//                it is plain there is more — only while there is
+//   label        the region's name for a screen reader ("Recent activity")
+//   ref          the scrolling element itself (not the outer box): read and
+//                set scrollTop, call scrollTo — a message list that sticks
+//                to the bottom, a feed that keeps its place
+//   onScroll     and every other prop (aria-busy, id, data-*) go on the
+//                scrolling element too
+//
+// When the content overflows, the box joins the tab order (a region with
+// the label) so a keyboard can scroll it — Safari does not do that for a
+// scroller on its own. When it fits, it is an ordinary box.
+
+const AXES = {
+  vertical: "overflow-y-auto overflow-x-hidden",
+  horizontal: "overflow-x-auto overflow-y-hidden",
+  both: "overflow-auto",
+};
+
+// Each edge fades over 2rem while there is content past it.
+const FADES =
+  "data-[more-top]:mask-t-from-[calc(100%-2rem)] data-[more-bottom]:mask-b-from-[calc(100%-2rem)] " +
+  "data-[more-left]:mask-l-from-[calc(100%-2rem)] data-[more-right]:mask-r-from-[calc(100%-2rem)]";
+
+export function ScrollArea({ orientation = "vertical", fade = false, label, className, children, ref: outer, ...rest }) {
+  const ref = useRef(null);
+  const setRef = useCallback(
+    (el) => {
+      ref.current = el;
+      if (typeof outer === "function") return outer(el);
+      if (outer) outer.current = el;
+    },
+    [outer],
+  );
+  const [edges, setEdges] = useState({ scrolls: false, top: false, bottom: false, left: false, right: false });
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const measure = () => {
+      const x = Math.abs(el.scrollLeft);
+      const overX = el.scrollWidth - el.clientWidth > 1;
+      const overY = el.scrollHeight - el.clientHeight > 1;
+      const next = {
+        scrolls: (orientation !== "horizontal" && overY) || (orientation !== "vertical" && overX),
+        top: overY && el.scrollTop > 1,
+        bottom: overY && el.scrollTop + el.clientHeight < el.scrollHeight - 1,
+        left: overX && x > 1,
+        right: overX && x + el.clientWidth < el.scrollWidth - 1,
+      };
+      setEdges((prev) => (Object.keys(next).every((k) => prev[k] === next[k]) ? prev : next));
+    };
+    measure();
+    el.addEventListener("scroll", measure, { passive: true });
+    if (typeof ResizeObserver === "undefined") return () => el.removeEventListener("scroll", measure);
+    // The box and each child: content growing inside a fixed box changes
+    // the overflow without resizing the box.
+    const ro = new ResizeObserver(measure);
+    const watch = () => {
+      ro.disconnect();
+      ro.observe(el);
+      for (const child of el.children) ro.observe(child);
+    };
+    watch();
+    const mo = new MutationObserver(() => {
+      watch();
+      measure();
+    });
+    mo.observe(el, { childList: true });
+    return () => {
+      el.removeEventListener("scroll", measure);
+      ro.disconnect();
+      mo.disconnect();
+    };
+  }, [orientation]);
+
+  const show = (edge) => (fade && edges[edge] ? "" : undefined);
+
+  return (
+    // The ring sits on this outer box: a mask on the scroller would cut
+    // off a ring drawn around it.
+    <div
+      className={cx(
+        "flex min-h-0 min-w-0 flex-col rounded-md",
+        "has-[>[data-scroller]:focus-visible]:ring-2 has-[>[data-scroller]:focus-visible]:ring-ring",
+        className,
+      )}
+    >
+      <div
+        {...rest}
+        ref={setRef}
+        data-scroller=""
+        tabIndex={edges.scrolls ? 0 : undefined}
+        role={edges.scrolls && label ? "region" : undefined}
+        aria-label={edges.scrolls ? label : undefined}
+        data-more-top={show("top")}
+        data-more-bottom={show("bottom")}
+        data-more-left={show("left")}
+        data-more-right={show("right")}
+        className={cx(
+          "min-h-0 flex-1 rounded-[inherit] outline-none",
+          "scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent",
+          AXES[orientation] ?? AXES.vertical,
+          fade && FADES,
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

package/templates/next/files/components/ui/separator.jsx

@@ -0,0 +1,119 @@
+import { cx } from "./cx";
+
+// Small static parts that shape a layout: a separator, a key cap, a box
+// that keeps its ratio. Server-safe (no hooks).
+
+/**
+ * A hairline between groups. Decorative by default — most lines only
+ * group what spacing already groups, and a screen reader should not
+ * announce them. Pass `decorative={false}` when the line divides two
+ * sections a reader should know about (role=separator).
+ *
+ *   orientation  horizontal (full width) · vertical (full height of a
+ *                flex row: toolbar groups, breadcrumb-like rows)
+ *   decorative   true (hidden from readers) · false (a separator)
+ *   label        horizontal only: a word on the line ("or")
+ */
+export function Separator({ orientation = "horizontal", decorative = true, label, className }) {
+  const vertical = orientation === "vertical";
+  const a11y = decorative
+    ? { role: "none" }
+    : { role: "separator", "aria-orientation": vertical ? "vertical" : undefined };
+  if (vertical) {
+    return <div {...a11y} className={cx("w-px shrink-0 self-stretch bg-border", className)} />;
+  }
+  if (label) {
+    return (
+      <div {...a11y} className={cx("flex items-center gap-3 text-xs text-muted-foreground", className)}>
+        <span className="h-px flex-1 bg-border" />
+        <span>{label}</span>
+        <span className="h-px flex-1 bg-border" />
+      </div>
+    );
+  }
+  return <div {...a11y} className={cx("h-px w-full shrink-0 bg-border", className)} />;
+}
+
+// Symbols a reader cannot say; each is shown to the eye and spelled out
+// to the ear.
+const KEY_NAMES = {
+  "⌘": "Command",
+  "⌥": "Option",
+  "⇧": "Shift",
+  "⌃": "Control",
+  "↵": "Enter",
+  "⏎": "Return",
+  "⌫": "Backspace",
+  "⌦": "Delete",
+  "⎋": "Escape",
+  "⇥": "Tab",
+  "↑": "Up",
+  "↓": "Down",
+  "←": "Left",
+  "→": "Right",
+};
+
+/** One key, as printed on the keyboard: ⌘, Esc, K. A native <kbd>. */
+export function Kbd({ className, children }) {
+  const name = typeof children === "string" ? KEY_NAMES[children] : undefined;
+  return (
+    <kbd
+      className={cx(
+        "inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-border bg-muted px-1",
+        "font-sans text-2xs font-medium leading-none text-muted-foreground",
+        className,
+      )}
+    >
+      {name ? (
+        <>
+          <span aria-hidden="true">{children}</span>
+          <span className="sr-only">{name}</span>
+        </>
+      ) : (
+        children
+      )}
+    </kbd>
+  );
+}
+
+/** A combo pressed together (⌘ K). `keys` is ["⌘", "K"]; children work
+ *  too. Nested <kbd>s, which is how HTML spells a key combination. */
+export function KbdGroup({ keys, className, children }) {
+  return (
+    <kbd className={cx("inline-flex items-center gap-1 font-sans", className)}>
+      {keys ? keys.map((k, i) => <Kbd key={i}>{k}</Kbd>) : children}
+    </kbd>
+  );
+}
+
+const RATIOS = {
+  square: "aspect-square",
+  video: "aspect-video",
+  portrait: "aspect-3/4",
+  photo: "aspect-4/3",
+  wide: "aspect-21/9",
+};
+
+/**
+ * A box that keeps its shape as its width changes — a thumbnail, a video,
+ * a map. Its one child fills it (an <img> is cropped to cover).
+ *
+ *   ratio   square · video (16:9) · portrait (3:4) · photo (4:3) · wide
+ *           (21:9), or a number (width / height, e.g. 2)
+ */
+export function AspectRatio({ ratio = "video", className, children }) {
+  const named = typeof ratio === "string" ? RATIOS[ratio] : undefined;
+  return (
+    <div
+      className={cx(
+        "relative w-full overflow-hidden",
+        named ?? (typeof ratio === "number" ? undefined : RATIOS.video),
+        "[&>*]:absolute [&>*]:inset-0 [&>*]:size-full [&>img]:object-cover",
+        className,
+      )}
+      style={typeof ratio === "number" && ratio > 0 ? { aspectRatio: ratio } : undefined}
+    >
+      {children}
+    </div>
+  );
+}

package/templates/next/files/components/ui/sheet.jsx

@@ -1,16 +1,24 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { cx } from "./cx";
 import { Button, IconButton } from "./button";
+import { Checkbox, Input } from "./field";
 
 // Sheet — the one overlay. A native <dialog> (focus trap, Esc, scroll
 // lock and the top layer come from the browser), docked to the side the
 // surface asks for. Mobile first: on a narrow window every side becomes
 // a bottom sheet the thumb can reach. Controlled: `open` + `onClose`.
 //
-//   side   end (a rail beside the work; the default) · center (a dialog)
-//          · bottom
+//   side   end (a rail beside the work; the default) · start (a drawer
+//          from the leading edge, as navigation opens) · center (a
+//          dialog) · bottom
+//   title, description  the header; the title names the dialog
+//   footer  a row of buttons under the body
+//   bare    true: no header and a flush body (no padding) — for a panel
+//           that draws its own top, as CommandDialog does. Esc and a
+//           press outside still close it. Give it `label`.
+//   label   the dialog's name for a screen reader when no `title` shows
 //
 // Confirm below is the "delete this?" case — never window.confirm().
 
@@ -18,12 +26,17 @@ const SIDES = {
   end:
     "inset-y-0 right-0 left-auto h-dvh max-h-none w-full max-w-md rounded-none border-l " +
     "max-sm:inset-x-0 max-sm:top-auto max-sm:bottom-0 max-sm:h-auto max-sm:max-h-[85dvh] max-sm:max-w-none max-sm:rounded-t-xl max-sm:border-l-0 max-sm:border-t",
+  start:
+    "inset-y-0 left-0 right-auto h-dvh max-h-none w-full max-w-md rounded-none border-r " +
+    "max-sm:inset-x-0 max-sm:top-auto max-sm:bottom-0 max-sm:h-auto max-sm:max-h-[85dvh] max-sm:max-w-none max-sm:rounded-t-xl max-sm:border-r-0 max-sm:border-t",
   center: "m-auto w-[calc(100%-2rem)] max-w-lg rounded-lg border max-sm:mb-0 max-sm:mt-auto max-sm:w-full max-sm:max-w-none max-sm:rounded-b-none max-sm:rounded-t-xl",
   bottom: "inset-x-0 top-auto bottom-0 w-full max-w-none max-h-[85dvh] rounded-t-xl border-t",
 };
 
-export function Sheet({ open, onClose, title, description, side = "end", footer, className, children }) {
+export function Sheet({ open, onClose, title, description, side = "end", footer, bare = false, label, className, children }) {
   const ref = useRef(null);
+  const titleId = useId();
+  const named = Boolean(title) && !bare;
 
   useEffect(() => {
     const el = ref.current;
@@ -44,19 +57,20 @@ export function Sheet({ open, onClose, title, description, side = "end", footer,
         SIDES[side] ?? SIDES.end,
         className,
       )}
-      aria-labelledby={title ? "sheet-title" : undefined}
+      aria-labelledby={named ? titleId : undefined}
+      aria-label={named ? undefined : label}
     >
       <div className="flex min-h-0 flex-1 flex-col">
-        {title || onClose ? (
+        {!bare && (title || onClose) ? (
           <header className="flex items-start justify-between gap-3 border-b border-border px-4 py-3">
             <div className="min-w-0">
-              {title ? <h2 id="sheet-title" className="text-base font-semibold leading-tight">{title}</h2> : null}
+              {title ? <h2 id={titleId} className="text-base font-semibold leading-tight">{title}</h2> : null}
               {description ? <p className="mt-0.5 text-sm text-muted-foreground">{description}</p> : null}
             </div>
             <IconButton icon="x" label="Close" size="sm" onClick={() => ref.current?.close()} className="-mr-2" />
           </header>
         ) : null}
-        <div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">{children}</div>
+        <div className={cx("min-h-0 flex-1 overflow-y-auto", !bare && "px-4 py-4")}>{children}</div>
         {footer ? <footer className="flex flex-wrap justify-end gap-2 border-t border-border px-4 py-3">{footer}</footer> : null}
       </div>
     </dialog>
@@ -64,8 +78,45 @@ export function Sheet({ open, onClose, title, description, side = "end", footer,
 }
 
 /** A yes/no with the consequence spelled out. `tone="danger"` for a
- *  destructive confirm. Resolves through `onConfirm`; closes either way. */
-export function Confirm({ open, onClose, onConfirm, title, body, confirmLabel = "Confirm", cancelLabel = "Cancel", tone = "neutral", busy }) {
+ *  destructive confirm. Resolves through `onConfirm`; closes either way.
+ *
+ *    consequences  lines that will happen ("14 contacts are deleted"), a
+ *                  muted bullet list under the body
+ *    requireText   the exact text to type ("acme-corp") before Confirm
+ *                  unlocks — for the one delete that cannot come back
+ *    acknowledge   a checkbox label that must be ticked first ("I have
+ *                  exported what I need")
+ *
+ *  Confirm stays disabled until each gate given is met; both reset when
+ *  the dialog opens again. Without them it is the plain yes/no. */
+export function Confirm({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  body,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  tone = "neutral",
+  busy,
+  consequences,
+  requireText,
+  acknowledge,
+}) {
+  const [typed, setTyped] = useState("");
+  const [ticked, setTicked] = useState(false);
+  const typeId = useId();
+  const tickId = useId();
+
+  useEffect(() => {
+    if (!open) return;
+    setTyped("");
+    setTicked(false);
+  }, [open]);
+
+  const lines = Array.isArray(consequences) ? consequences.filter(Boolean) : [];
+  const held = (requireText ? typed !== requireText : false) || (acknowledge ? !ticked : false);
+
   return (
     <Sheet
       open={open}
@@ -77,13 +128,47 @@ export function Confirm({ open, onClose, onConfirm, title, body, confirmLabel =
           <Button variant="quiet" onClick={onClose} disabled={busy}>
             {cancelLabel}
           </Button>
-          <Button variant={tone === "danger" ? "danger" : "primary"} onClick={onConfirm} disabled={busy}>
+          <Button variant={tone === "danger" ? "danger" : "primary"} onClick={onConfirm} disabled={busy || held}>
             {busy ? "Working…" : confirmLabel}
           </Button>
         </>
       }
     >
       {body ? <p className="text-sm text-muted-foreground">{body}</p> : null}
+      {lines.length ? (
+        <ul className={cx("list-disc space-y-1 ps-5 text-sm text-muted-foreground marker:text-muted-foreground", body && "mt-3")}>
+          {lines.map((line, i) => (
+            <li key={i}>{line}</li>
+          ))}
+        </ul>
+      ) : null}
+      {requireText ? (
+        <div className={cx("grid gap-1.5", (body || lines.length) && "mt-4")}>
+          <label htmlFor={typeId} className="text-sm text-foreground">
+            Type <span className="break-all font-mono font-medium">{requireText}</span> to confirm
+          </label>
+          <Input
+            id={typeId}
+            value={typed}
+            onChange={(e) => setTyped(e.target.value)}
+            autoComplete="off"
+            autoCapitalize="off"
+            autoCorrect="off"
+            spellCheck={false}
+            disabled={busy}
+          />
+        </div>
+      ) : null}
+      {acknowledge ? (
+        <Checkbox
+          id={tickId}
+          checked={ticked}
+          onChange={(e) => setTicked(e.target.checked)}
+          label={acknowledge}
+          disabled={busy}
+          className={cx((body || lines.length || requireText) && "mt-2")}
+        />
+      ) : null}
     </Sheet>
   );
 }

package/templates/next/files/components/ui/slider.jsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { cx } from "./cx";
+
+// Slider — pick a number (or a span of numbers) by dragging. The native
+// <input type="range"> underneath, so keyboard (arrows, Page Up/Down,
+// Home/End), touch, forms and screen readers are the browser's; the
+// track, the filled part and the thumb are drawn from tokens. The input
+// is 44px tall however thin the track looks: the thumb is what a thumb
+// hits. Controlled (`value` + `onChange`) or not (`defaultValue`).
+//
+//   value       a number — or [low, high] for a range: two thumbs on one
+//               track, each its own native input (labels "Minimum" and
+//               "Maximum"; `thumbLabels` renames them). A range can never
+//               cross: low stops at high - `minGap`.
+//   onChange    (value) → the number, or [low, high]; not an event
+//   min, max, step   as the native input (0, 100, 1)
+//   showValue   print the value beside the track, through `format`
+//   format      (n) → string — "$40", "12 seats"; also what a screen
+//               reader says (aria-valuetext)
+//   label       the accessible name when no <Field> label points at `id`
+//   name        the form field; a range submits two values under it
+//
+// Use it where the exact number matters less than its place in a span
+// (budget, seats, a threshold). A value someone will type — a price, a
+// quantity to the unit — is an Input with type="number".
+
+// The native input, stripped to a transparent strip with a drawn thumb.
+// Written out per engine: Tailwind reads classes literally, never a
+// built string. The wrapper sets --rail (the input's height: 44px, the
+// target) and --thumb (the drawn thumb): WebKit puts the thumb at the top
+// of its track, so the margin centres it, and the fill below measures on
+// --thumb to meet the thumb's centre.
+const RANGE =
+  "absolute inset-0 h-full w-full appearance-none bg-transparent outline-none cursor-pointer disabled:cursor-not-allowed " +
+  "[&::-webkit-slider-runnable-track]:h-full [&::-webkit-slider-runnable-track]:bg-transparent " +
+  "[&::-webkit-slider-thumb]:mt-[calc((var(--rail)-var(--thumb))/2)] [&::-webkit-slider-thumb]:size-[var(--thumb)] [&::-webkit-slider-thumb]:appearance-none " +
+  "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary [&::-webkit-slider-thumb]:bg-background " +
+  "[&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-thumb]:transition-shadow " +
+  "hover:[&::-webkit-slider-thumb]:ring-4 hover:[&::-webkit-slider-thumb]:ring-ring/15 " +
+  "active:[&::-webkit-slider-thumb]:ring-4 active:[&::-webkit-slider-thumb]:ring-ring/25 " +
+  "focus-visible:[&::-webkit-slider-thumb]:ring-2 focus-visible:[&::-webkit-slider-thumb]:ring-ring focus-visible:[&::-webkit-slider-thumb]:ring-offset-2 focus-visible:[&::-webkit-slider-thumb]:ring-offset-background " +
+  "[&::-moz-range-track]:bg-transparent [&::-moz-range-progress]:bg-transparent " +
+  "[&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:size-[var(--thumb)] [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 " +
+  "[&::-moz-range-thumb]:border-primary [&::-moz-range-thumb]:bg-background [&::-moz-range-thumb]:shadow-sm [&::-moz-range-thumb]:transition-shadow " +
+  "hover:[&::-moz-range-thumb]:ring-4 hover:[&::-moz-range-thumb]:ring-ring/15 " +
+  "active:[&::-moz-range-thumb]:ring-4 active:[&::-moz-range-thumb]:ring-ring/25 " +
+  "focus-visible:[&::-moz-range-thumb]:ring-2 focus-visible:[&::-moz-range-thumb]:ring-ring focus-visible:[&::-moz-range-thumb]:ring-offset-2 focus-visible:[&::-moz-range-thumb]:ring-offset-background";
+
+// Two inputs share one track: neither takes the pointer except at its
+// own thumb, so each thumb drags on its own and the other stays put.
+const TWIN =
+  "pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-moz-range-thumb]:pointer-events-auto";
+
+const clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
+
+export function Slider({
+  id,
+  value,
+  defaultValue,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  minGap = 0,
+  showValue,
+  format = String,
+  label,
+  thumbLabels = ["Minimum", "Maximum"],
+  name,
+  disabled,
+  className,
+  ...rest
+}) {
+  const [own, setOwn] = useState(defaultValue ?? min);
+  const current = value ?? own;
+  const range = Array.isArray(current);
+  const [low, high] = range ? current : [min, current];
+  const lowRef = useRef(null);
+  const highRef = useRef(null);
+
+  function set(next) {
+    if (value === undefined) setOwn(next);
+    onChange?.(next);
+  }
+
+  const span = max - min || 1;
+  const p = (n) => (clamp(n, min, max) - min) / span;
+  // The native thumb travels inside the track, half a thumb in from each
+  // end; the fill measures on that same inner span so it meets the
+  // thumb's centre at every value.
+  const at = (f) => `calc(var(--thumb) / 2 + ${f} * (100% - var(--thumb)))`;
+  const fill = range
+    ? { left: at(p(low)), width: `calc(${p(high) - p(low)} * (100% - var(--thumb)))` }
+    : { left: 0, width: at(p(high)) };
+
+  // A press on the bare track (not a thumb) moves the nearer thumb there.
+  // A single slider needs none of this: its input takes the press itself.
+  function onTrackDown(e) {
+    if (!range || disabled || e.target !== e.currentTarget) return;
+    const box = e.currentTarget.getBoundingClientRect();
+    const thumb = parseFloat(getComputedStyle(e.currentTarget).getPropertyValue("--thumb")) * parseFloat(getComputedStyle(document.documentElement).fontSize) || 20;
+    const f = clamp((e.clientX - box.left - thumb / 2) / (box.width - thumb), 0, 1);
+    const n = clamp(Math.round((min + f * span - min) / step) * step + min, min, max);
+    if (Math.abs(n - low) <= Math.abs(n - high)) {
+      set([Math.min(n, high - minGap), high]);
+      lowRef.current?.focus();
+    } else {
+      set([low, Math.max(n, low + minGap)]);
+      highRef.current?.focus();
+    }
+  }
+
+  const shown = range ? `${format(low)} – ${format(high)}` : format(high);
+  const common = { type: "range", min, max, step, disabled, name };
+
+  return (
+    <div className={cx("flex w-full items-center gap-3", disabled && "opacity-50", className)}>
+      <div
+        className="relative h-[var(--rail)] min-w-0 flex-1"
+        style={{ "--rail": "2.75rem", "--thumb": "1.25rem" }}
+        onPointerDown={onTrackDown}
+      >
+        <span aria-hidden="true" className="pointer-events-none absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-muted" />
+        <span aria-hidden="true" className="pointer-events-none absolute top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-primary" style={fill} />
+        {range ? (
+          <>
+            <input
+              {...common}
+              ref={lowRef}
+              id={id}
+              value={low}
+              aria-label={label ? `${label}, ${thumbLabels[0].toLowerCase()}` : thumbLabels[0]}
+              aria-valuetext={format(low)}
+              onChange={(e) => set([Math.min(Number(e.target.value), high - minGap), high])}
+              // The upper half of the track belongs to whichever thumb can
+              // still move there: when both sit at the top, low must be on
+              // top or it could never be dragged back down.
+              className={cx(RANGE, TWIN, p(low) > 0.5 ? "z-20" : "z-10")}
+              {...rest}
+            />
+            <input
+              {...common}
+              ref={highRef}
+              id={id ? `${id}-max` : undefined}
+              value={high}
+              aria-label={label ? `${label}, ${thumbLabels[1].toLowerCase()}` : thumbLabels[1]}
+              aria-valuetext={format(high)}
+              onChange={(e) => set([low, Math.max(Number(e.target.value), low + minGap)])}
+              className={cx(RANGE, TWIN, "z-10")}
+            />
+          </>
+        ) : (
+          <input
+            {...common}
+            id={id}
+            value={high}
+            aria-label={label}
+            aria-valuetext={format === String ? undefined : format(high)}
+            onChange={(e) => set(Number(e.target.value))}
+            className={RANGE}
+            {...rest}
+          />
+        )}
+      </div>
+      {showValue ? (
+        <output htmlFor={range && id ? `${id} ${id}-max` : id} data-nums className="shrink-0 text-right text-sm text-foreground">
+          {shown}
+        </output>
+      ) : null}
+    </div>
+  );
+}