@blurrow/ui 0.2.0 → 0.2.1

package/dist/registry/ReadingProgress.tsx

@@ -42,8 +42,8 @@ export function ReadingProgress({ className = "" }: ReadingProgressProps) {
         style={{
           // transform instead of width: no layout on every scroll frame
           transform: `scaleX(${progress / 100})`,
-          background: "linear-gradient(90deg, #0a0a0a 0%, #262626 100%)",
-          boxShadow: "0 0 8px rgba(17,17,17,0.3)",
+          background: "var(--progress-bar)",
+          boxShadow: "var(--progress-bar-glow)",
         }}
       />
     </div>

package/dist/registry/ReadingTime.tsx

@@ -9,7 +9,7 @@ export function ReadingTime({ minutes, className = "" }: ReadingTimeProps) {
   return (
     <span
       className={[
-        "inline-flex items-center gap-1.5 text-[12px] font-medium text-neutral-500",
+        "inline-flex items-center gap-1.5 text-[12px] font-medium text-ink-muted",
         className,
       ]
         .filter(Boolean)
@@ -24,7 +24,7 @@ export function ReadingTime({ minutes, className = "" }: ReadingTimeProps) {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className="text-neutral-400"
+        className="text-ink-faint"
       >
         <circle cx="12" cy="12" r="10" />
         <polyline points="12 6 12 12 16 14" />

package/dist/registry/Select.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import React, { useState, useRef, useEffect, useId } from "react";
+import { Portal } from "./Floating";
+import { useFloatingPanel } from "./useFloatingPanel";
 
 interface SelectOption {
   value: string;
@@ -33,41 +35,20 @@ export function Select({
   fullWidth = false,
   className = "",
 }: SelectProps) {
-  const [open, setOpen] = useState(false);
-  // The list stays mounted while it folds away, and only unfolds once painted
-  const [mounted, setMounted] = useState(false);
-  const [entered, setEntered] = useState(false);
-  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [active, setActive] = useState(0);
   const ref = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
   const uid = useId();
+  // The list is portalled to the body and pinned under the field
+  const { open, mounted, close, show, setFloating, panelStyle } = useFloatingPanel(ref, {
+    matchWidth: true,
+    onEscape: () => buttonRef.current?.focus(),
+  });
 
   const selectedIndex = options.findIndex((o) => o.value === value);
   const selected = options[selectedIndex];
 
-  const close = () => {
-    setOpen(false);
-    setEntered(false);
-    if (closeTimer.current) clearTimeout(closeTimer.current);
-    closeTimer.current = setTimeout(() => setMounted(false), 200);
-  };
-
-  useEffect(() => () => {
-    if (closeTimer.current) clearTimeout(closeTimer.current);
-  }, []);
-
-  useEffect(() => {
-    function onOutside(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        close();
-      }
-    }
-    document.addEventListener("mousedown", onOutside);
-    return () => document.removeEventListener("mousedown", onOutside);
-  }, []);
-
   useEffect(() => {
     if (!open) return;
     listRef.current
@@ -77,10 +58,7 @@ export function Select({
 
   const openList = () => {
     setActive(selectedIndex >= 0 ? selectedIndex : 0);
-    if (closeTimer.current) clearTimeout(closeTimer.current);
-    setOpen(true);
-    setMounted(true);
-    requestAnimationFrame(() => requestAnimationFrame(() => setEntered(true)));
+    show();
   };
 
   const pick = (index: number) => {
@@ -143,7 +121,7 @@ export function Select({
       {label && (
         <span
           id={`${uid}-label`}
-          className="text-[12.5px] font-medium text-neutral-700 tracking-[-0.005em]"
+          className="text-[12.5px] font-medium text-ink-label tracking-[-0.005em]"
         >
           {label}
         </span>
@@ -156,6 +134,9 @@ export function Select({
         <button
           ref={buttonRef}
           type="button"
+          /* A select-only combobox: the role is what lets the button point
+             at the active option while focus stays on it                */
+          role="combobox"
           disabled={disabled}
           onClick={() => (open ? close() : openList())}
           onKeyDown={onKeyDown}
@@ -166,7 +147,7 @@ export function Select({
           aria-activedescendant={open ? `${uid}-opt-${active}` : undefined}
           className={[
             "group/select relative isolate inline-flex items-center justify-between gap-3 w-full",
-            "rounded-xl px-4 py-3 text-[13.5px] font-medium text-neutral-900",
+            "rounded-xl px-4 py-3 text-[13.5px] font-medium text-ink",
             "field cursor-pointer select-none",
             "focus:outline-none disabled:opacity-40 disabled:pointer-events-none",
           ].join(" ")}
@@ -176,7 +157,7 @@ export function Select({
             id={`${uid}-value`}
             className={[
               "relative z-10 truncate",
-              selected ? "text-neutral-900" : "text-neutral-400 font-normal",
+              selected ? "text-ink" : "text-ink-faint font-normal",
             ].join(" ")}
           >
             {selected ? selected.label : placeholder}
@@ -191,7 +172,7 @@ export function Select({
             viewBox="0 0 24 24"
             className={[
               "relative z-10 shrink-0 transition-[transform,color] duration-300 ease-[var(--ease-spring)]",
-              open ? "rotate-180 text-neutral-900" : "text-neutral-400 group-hover/select:text-neutral-700",
+              open ? "rotate-180 text-ink" : "text-ink-faint group-hover/select:text-ink-label",
             ].join(" ")}
           >
             <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
@@ -203,7 +184,7 @@ export function Select({
                 className="block absolute inset-y-0 w-[30%] -left-[30%] animate-input-shimmer"
                 style={{
                   background:
-                    "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%)",
+                    "linear-gradient(90deg, transparent 0%, var(--shimmer) 50%, transparent 100%)",
                 }}
               />
             </span>
@@ -211,23 +192,14 @@ export function Select({
         </button>
 
         {mounted && (
+          <Portal>
           <div
-            className="absolute left-0 z-50 mt-2 p-1.5 rounded-[16px] origin-top"
+            ref={setFloating}
+            className="p-1.5 rounded-[16px]"
             style={{
-              minWidth: "100%",
+              ...panelStyle,
               maxWidth: "min(420px, calc(100vw - 2rem))",
               width: "max-content",
-              background: "var(--panel-bezel)",
-              boxShadow: "var(--overlay-shadow)",
-              /* Unfolds downward out of the field: a clip reveals it top to
-                 bottom while it fades and settles. The clip's sides reach
-                 past the panel so its shadow is never cut off.             */
-              opacity: entered ? 1 : 0,
-              transform: entered ? "none" : "translateY(-4px) scale(0.98)",
-              clipPath: entered ? "inset(-48px -48px -48px -48px)" : "inset(-48px -48px 55% -48px)",
-              transition: entered
-                ? "opacity 180ms ease-out, transform 360ms var(--ease-out-soft), clip-path 360ms var(--ease-out-soft)"
-                : "opacity 160ms ease-in, transform 200ms ease-in, clip-path 200ms ease-in",
             }}
           >
             <div
@@ -235,7 +207,7 @@ export function Select({
               id={`${uid}-list`}
               role="listbox"
               aria-labelledby={label ? `${uid}-label` : undefined}
-              className="bg-white rounded-[11px] p-1 flex flex-col gap-0.5 max-h-72 overflow-y-auto scroll-thin"
+              className="bg-panel-face rounded-[11px] p-1 flex flex-col gap-0.5 max-h-72 overflow-y-auto scroll-thin"
               style={{ boxShadow: "var(--panel-face-shadow)" }}
             >
               {options.map((opt, i) => {
@@ -254,8 +226,10 @@ export function Select({
                     className={[
                       "flex items-center justify-between gap-3 w-full px-2.5 py-2 text-[13px] rounded-[8px] cursor-pointer",
                       "transition-colors duration-100",
-                      isSelected ? "font-medium text-neutral-900" : "text-neutral-600",
-                      isActive ? "bg-neutral-100/80 text-neutral-900" : "",
+                      isSelected ? "font-medium" : "",
+                      // one ink per state: utilities sort by name, so text-ink-body would beat text-ink
+                      isSelected || isActive ? "text-ink" : "text-ink-body",
+                      isActive ? "bg-surface-active/80" : "",
                     ].join(" ")}
                     style={{
                       animation: `select-option-in 300ms var(--ease-out-soft) ${40 + i * 22}ms both`,
@@ -265,7 +239,7 @@ export function Select({
                     {isSelected && (
                       <svg
                         aria-hidden
-                        className="shrink-0 text-neutral-900"
+                        className="shrink-0 text-ink"
                         width="13"
                         height="13"
                         fill="none"
@@ -281,10 +255,11 @@ export function Select({
               })}
             </div>
           </div>
+          </Portal>
         )}
       </div>
 
-      {hint && <p className="text-[11.5px] text-neutral-500 mt-0.5">{hint}</p>}
+      {hint && <p className="text-[11.5px] text-ink-muted mt-0.5">{hint}</p>}
     </div>
   );
 }

package/dist/registry/Separator.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+interface SeparatorProps {
+  orientation?: "horizontal" | "vertical";
+  /** A few words set into the middle of the line, like "or" */
+  label?: React.ReactNode;
+  /** Only draws a line; screen readers skip it */
+  decorative?: boolean;
+  className?: string;
+}
+
+/* A groove scored into the surface: a dark line with a lit lip just
+   under it, the way a cut catches light from above.                */
+function Groove({ vertical }: { vertical: boolean }) {
+  return (
+    <span
+      aria-hidden
+      className={vertical ? "block w-px self-stretch" : "block h-px flex-1"}
+      style={{
+        background: "var(--groove)",
+        boxShadow: vertical ? "var(--groove-lip)" : "var(--groove-lip-below)",
+      }}
+    />
+  );
+}
+
+export function Separator({ orientation = "horizontal", label, decorative = false, className = "" }: SeparatorProps) {
+  const vertical = orientation === "vertical";
+  const a11y = decorative
+    ? { "aria-hidden": true as const }
+    : { role: "separator", "aria-orientation": orientation };
+
+  if (vertical) {
+    return (
+      <span {...a11y} className={["inline-flex self-stretch", className].join(" ")}>
+        <Groove vertical />
+      </span>
+    );
+  }
+
+  return (
+    <div {...a11y} className={["flex w-full items-center gap-3", className].join(" ")}>
+      <Groove vertical={false} />
+      {label && (
+        <>
+          <span className="shrink-0 text-[11.5px] font-medium text-ink-faint">{label}</span>
+          <Groove vertical={false} />
+        </>
+      )}
+    </div>
+  );
+}

package/dist/registry/ShareButtons.tsx

@@ -110,7 +110,7 @@ export function ShareButtons({
       onClick: handleCopy as () => void,
       content: (
         <>
-          <span key={String(copied)} className={["animate-checkbox-in", copied ? "text-emerald-600" : ""].join(" ")}>
+          <span key={String(copied)} className={["animate-checkbox-in", copied ? "text-success-soft" : ""].join(" ")}>
             {copied ? <CheckIcon /> : <LinkIcon />}
           </span>
           <span className="w-[62px] text-left">{copied ? "copied" : "copy link"}</span>
@@ -124,7 +124,7 @@ export function ShareButtons({
 
   return (
     <div className={className}>
-      <p className="text-[12px] font-medium text-neutral-500 lowercase mb-3">
+      <p className="text-[12px] font-medium text-ink-muted lowercase mb-3">
         Share
       </p>
       <ButtonGroup label="Share" items={keys} />

package/dist/registry/Sidebar.tsx

@@ -53,8 +53,8 @@ export function Sidebar({
     setPill({ top: br.top - nr.top, height: br.height, ready: true });
   };
 
-  useLayoutEffect(() => { measurePill(current); }, []);
-  useEffect(() => { measurePill(current); }, [current]);
+  // Before paint, so the pill is never seen out of place
+  useLayoutEffect(() => { measurePill(current); }, [current]);
 
   useEffect(() => {
     const ro = new ResizeObserver(() => measurePill(current));
@@ -73,27 +73,27 @@ export function Sidebar({
       className={["rounded-[20px] p-1.5", className].join(" ")}
       style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
     >
-      <div className="bg-white rounded-[15px] overflow-hidden" style={{ boxShadow: "var(--panel-face-shadow)" }}>
+      <div className="bg-panel-face rounded-[15px] overflow-hidden" style={{ boxShadow: "var(--panel-face-shadow)" }}>
       {header && (
-        <div className="px-3 py-3 border-b border-neutral-100 flex items-center gap-2.5">
+        <div className="px-3 py-3 border-b border-line flex items-center gap-2.5">
           {header.logo && (
             <div
-              className="w-7 h-7 rounded-[8px] flex items-center justify-center shrink-0 text-white"
-              style={{ background: "var(--face-dark)", boxShadow: "var(--face-dark-shadow)" }}
+              className="w-7 h-7 rounded-[8px] flex items-center justify-center shrink-0 text-ink-inverse"
+              style={{ background: "var(--face-inverse)", boxShadow: "var(--face-inverse-shadow)" }}
             >
               {header.logo}
             </div>
           )}
           <div className="flex-1 min-w-0">
-            <p className="text-[13px] font-semibold text-neutral-900 leading-none truncate">{header.title}</p>
+            <p className="text-[13px] font-semibold text-ink leading-none truncate">{header.title}</p>
             {header.subtitle && (
-              <p className="text-[11px] text-neutral-400 mt-0.5 leading-none truncate">{header.subtitle}</p>
+              <p className="text-[11px] text-ink-faint mt-0.5 leading-none truncate">{header.subtitle}</p>
             )}
           </div>
           <button
             type="button"
             aria-label="Switch workspace"
-            className="shrink-0 w-6 h-6 flex items-center justify-center text-neutral-400 hover:text-neutral-900 transition-colors cursor-pointer rounded-[7px] hover:bg-neutral-100"
+            className="shrink-0 w-6 h-6 flex items-center justify-center text-ink-faint hover:text-ink transition-colors cursor-pointer rounded-[7px] hover:bg-surface-active"
           >
             <svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" d="M8 9l4-4 4 4M8 15l4 4 4-4" />
@@ -110,8 +110,8 @@ export function Sidebar({
             style={{
               top: pill.top,
               height: pill.height,
-              background: "var(--face-dark)",
-              boxShadow: "var(--face-dark-shadow)",
+              background: "var(--face-inverse)",
+              boxShadow: "var(--face-inverse-shadow)",
               transition: "top 300ms var(--ease-spring), height 300ms var(--ease-spring)",
             }}
           />
@@ -120,7 +120,7 @@ export function Sidebar({
         {sections.map((section, si) => (
           <div key={si} className="flex flex-col gap-0.5">
             {section.title && (
-              <p className="relative z-10 px-2.5 pt-1 pb-1.5 text-[11.5px] font-medium text-neutral-400 lowercase">
+              <p className="relative z-10 px-2.5 pt-1 pb-1.5 text-[11.5px] font-medium text-ink-faint lowercase">
                 {section.title}
               </p>
             )}
@@ -139,8 +139,8 @@ export function Sidebar({
                     "transition-colors duration-200 cursor-pointer",
                     "disabled:opacity-35 disabled:pointer-events-none",
                     isActive
-                      ? "text-white"
-                      : "text-neutral-600 hover:text-neutral-900 hover:bg-neutral-100/80",
+                      ? "text-ink-inverse"
+                      : "text-ink-body hover:text-ink hover:bg-surface-active/80",
                   ].join(" ")}
                 >
                   {item.icon && (
@@ -148,8 +148,8 @@ export function Sidebar({
                       className={[
                         "shrink-0 w-[22px] h-[22px] rounded-md flex items-center justify-center transition-colors duration-200",
                         isActive
-                          ? "bg-white/12 shadow-[inset_0_1px_0_rgba(255,255,255,0.12)]"
-                          : "text-neutral-500 [background:var(--face-light)] [box-shadow:var(--face-light-shadow)]",
+                          ? "bg-ink-inverse/12 shadow-[inset_0_1px_0_var(--inverse-lip)]"
+                          : "text-ink-muted [background:var(--face)] [box-shadow:var(--face-shadow)]",
                       ].join(" ")}
                     >
                       {item.icon}
@@ -163,8 +163,8 @@ export function Sidebar({
                       className={[
                         "shrink-0 text-[11px] font-medium px-1.5 py-0.5 rounded-md tabular-nums leading-none transition-colors duration-200",
                         isActive
-                          ? "bg-white/20 text-white/80"
-                          : "bg-neutral-100 text-neutral-500",
+                          ? "bg-ink-inverse/20 text-ink-inverse/80"
+                          : "bg-surface-active text-ink-muted",
                       ].join(" ")}
                     >
                       {item.badge}

package/dist/registry/Skeleton.tsx

@@ -44,7 +44,7 @@ export function Skeleton({
         className={["rounded-[20px] p-1.5", className].join(" ")}
         style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
       >
-        <div className="bg-white rounded-[15px] p-1.5" style={{ boxShadow: "var(--panel-face-shadow)" }}>
+        <div className="bg-panel-face rounded-[15px] p-1.5" style={{ boxShadow: "var(--panel-face-shadow)" }}>
           <div className={[base, "w-full rounded-[11px]"].join(" ")} style={{ ...well, height: height ?? 160 }} />
           <div className="px-3.5 pt-4 pb-3.5 flex flex-col gap-2.5">
             <div className={[base, "h-3.5 w-3/5"].join(" ")} style={well} />

package/dist/registry/Slider.tsx

@@ -0,0 +1,229 @@
+"use client";
+
+import React, { useId, useRef, useState } from "react";
+import { FieldLabel } from "./FieldMessage";
+
+type SliderValue = number | [number, number];
+
+interface SliderProps<V extends SliderValue> {
+  /** One number for a slider, two for a range */
+  value?: V;
+  defaultValue?: V;
+  onChange?: (value: V) => void;
+  /** Fires once the knob is let go, for work too heavy to do while dragging */
+  onCommit?: (value: V) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  label?: string;
+  /** Show the value beside the label; pass a function to format it */
+  showValue?: boolean | ((value: V) => React.ReactNode);
+  /** Small labels under the track, at these values */
+  marks?: number[];
+  disabled?: boolean;
+  /** Name of a hidden input (two for a range: name[0], name[1]) */
+  name?: string;
+  className?: string;
+}
+
+const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));
+const decimals = (n: number) => (String(n).split(".")[1] ?? "").length;
+
+/* A sunken track with the filled part in the inverse material, and a
+   raised knob (or two, for a range) that you drag along it. The knob
+   swells while held; arrows step, shift steps by ten, page keys by a
+   tenth of the range, home and end jump to the ends.               */
+export function Slider<V extends SliderValue = number>({
+  value,
+  defaultValue,
+  onChange,
+  onCommit,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  showValue = false,
+  marks,
+  disabled = false,
+  name,
+  className = "",
+}: SliderProps<V>) {
+  const uid = useId();
+  const trackRef = useRef<HTMLDivElement>(null);
+  const knobs = useRef<(HTMLSpanElement | null)[]>([]);
+  const isRange = Array.isArray(value ?? defaultValue);
+  const [internal, setInternal] = useState<V>(() => (defaultValue ?? value ?? (min as V)) as V);
+  const current = (value !== undefined ? value : internal) as V;
+  const values: number[] = Array.isArray(current) ? [...current] : [current as number];
+  const [dragging, setDragging] = useState<number | null>(null);
+  const digits = decimals(step);
+
+  const snap = (n: number) => Number(clamp(Math.round((n - min) / step) * step + min, min, max).toFixed(digits));
+  const pct = (n: number) => ((n - min) / (max - min)) * 100;
+
+  const emit = (next: number[], commit = false) => {
+    const v = (isRange ? [next[0], next[1]] : next[0]) as V;
+    setInternal(v);
+    if (next.some((n, i) => n !== values[i])) onChange?.(v);
+    if (commit) onCommit?.(v);
+  };
+
+  /* Each knob is kept on its own side of the other */
+  const setAt = (i: number, n: number, commit = false) => {
+    const next = [...values];
+    next[i] = snap(n);
+    if (isRange) next[i] = i === 0 ? Math.min(next[0], values[1]) : Math.max(next[1], values[0]);
+    emit(next, commit);
+  };
+
+  const fromPointer = (clientX: number) => {
+    const r = trackRef.current!.getBoundingClientRect();
+    return min + clamp((clientX - r.left) / r.width, 0, 1) * (max - min);
+  };
+
+  const onPointerDown = (e: React.PointerEvent) => {
+    if (disabled || e.button !== 0) return;
+    e.preventDefault();
+    const n = fromPointer(e.clientX);
+    // Grab whichever knob is nearer; on a tie, the one that can move that way
+    let i = 0;
+    if (isRange) {
+      const d0 = Math.abs(n - values[0]);
+      const d1 = Math.abs(n - values[1]);
+      i = d1 < d0 || (d0 === d1 && n > values[1]) ? 1 : 0;
+    }
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    setDragging(i);
+    knobs.current[i]?.focus();
+    setAt(i, n);
+  };
+
+  const onKeyDown = (i: number) => (e: React.KeyboardEvent) => {
+    const big = Math.max(step, (max - min) / 10);
+    const moves: Record<string, number> = {
+      ArrowRight: step * (e.shiftKey ? 10 : 1),
+      ArrowUp: step * (e.shiftKey ? 10 : 1),
+      ArrowLeft: -step * (e.shiftKey ? 10 : 1),
+      ArrowDown: -step * (e.shiftKey ? 10 : 1),
+      PageUp: big,
+      PageDown: -big,
+    };
+    if (e.key in moves) {
+      e.preventDefault();
+      setAt(i, values[i] + moves[e.key], true);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setAt(i, min, true);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setAt(i, max, true);
+    }
+  };
+
+  const shown =
+    typeof showValue === "function"
+      ? showValue(current)
+      : showValue
+        ? values.join(" – ")
+        : null;
+
+  const lo = isRange ? pct(values[0]) : 0;
+  const hi = pct(values[isRange ? 1 : 0]);
+
+  return (
+    <div className={["flex w-full flex-col gap-2.5", disabled ? "opacity-40" : "", className].join(" ")}>
+      {(label || shown !== null) && (
+        <div className="flex items-center justify-between gap-4">
+          {label && <FieldLabel id={`${uid}-label`}>{label}</FieldLabel>}
+          {shown !== null && <span className="text-[12.5px] tabular-nums text-ink-muted">{shown}</span>}
+        </div>
+      )}
+
+      <div
+        className={["relative flex h-6 touch-none items-center", disabled ? "pointer-events-none" : "cursor-pointer"].join(" ")}
+        onPointerDown={onPointerDown}
+        onPointerMove={(e) => dragging !== null && setAt(dragging, fromPointer(e.clientX))}
+        onPointerUp={() => {
+          if (dragging !== null) onCommit?.(current);
+          setDragging(null);
+        }}
+        onPointerCancel={() => setDragging(null)}
+      >
+        {/* The track: a groove cut into the surface */}
+        <div
+          ref={trackRef}
+          className="relative h-2 w-full rounded-full"
+          style={{ background: "var(--track)", boxShadow: "var(--track-shadow)" }}
+        >
+          <div
+            className="absolute inset-y-px rounded-full"
+            style={{
+              left: `calc(${lo}% + ${isRange ? 0 : 1}px)`,
+              width: `calc(${hi - lo}% - ${isRange ? 0 : 1}px)`,
+              background: "var(--face-inverse)",
+              boxShadow: "var(--fill-shadow)",
+              transition: dragging === null ? "left 200ms var(--ease-out-soft), width 200ms var(--ease-out-soft)" : "none",
+            }}
+          />
+        </div>
+
+        {values.map((v, i) => (
+          <span
+            key={i}
+            ref={(el) => {
+              knobs.current[i] = el;
+            }}
+            role="slider"
+            tabIndex={disabled ? -1 : 0}
+            aria-labelledby={label ? `${uid}-label` : undefined}
+            aria-label={isRange ? (i === 0 ? "minimum" : "maximum") : label ? undefined : "value"}
+            aria-valuemin={isRange && i === 1 ? values[0] : min}
+            aria-valuemax={isRange && i === 0 ? values[1] : max}
+            aria-valuenow={v}
+            aria-disabled={disabled || undefined}
+            onKeyDown={onKeyDown(i)}
+            className="absolute top-1/2 h-5 w-5 rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-page"
+            style={{
+              left: `${pct(v)}%`,
+              // the last-dragged knob of a range sits on top, so two at one spot can be pulled apart
+              zIndex: dragging === i ? 2 : 1,
+              background: "var(--face)",
+              boxShadow: "var(--knob-shadow)",
+              transform: `translate(-50%, -50%) scale(${dragging === i ? 1.15 : 1})`,
+              transition:
+                dragging === null
+                  ? "left 200ms var(--ease-out-soft), transform 220ms var(--ease-spring)"
+                  : "transform 220ms var(--ease-spring)",
+            }}
+          >
+            {/* A small dimple on the knob's crown */}
+            <span
+              aria-hidden
+              className="absolute left-1/2 top-1/2 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full"
+              style={{ background: "var(--track)", boxShadow: "var(--track-shadow)" }}
+            />
+          </span>
+        ))}
+      </div>
+
+      {marks && marks.length > 0 && (
+        <div aria-hidden className="relative h-4">
+          {marks.map((m) => (
+            <span
+              key={m}
+              className="absolute -translate-x-1/2 text-[11px] tabular-nums text-ink-faint"
+              style={{ left: `${pct(m)}%` }}
+            >
+              {m}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {name &&
+        values.map((v, i) => (
+          <input key={i} type="hidden" name={isRange ? `${name}[${i}]` : name} value={v} />
+        ))}
+    </div>
+  );
+}

package/dist/registry/Spinner.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+type SpinnerSize = "sm" | "md" | "lg";
+
+interface SpinnerProps {
+  size?: SpinnerSize | number;
+  /** Read out to screen readers; the spinner is silent without it */
+  label?: string;
+  className?: string;
+}
+
+const SIZES: Record<SpinnerSize, number> = { sm: 14, md: 18, lg: 24 };
+
+/* A short arc chasing round a faint ring. It takes the text colour, so
+   inside a primary button it's light and on the page it's ink.       */
+export function Spinner({ size = "md", label, className = "" }: SpinnerProps) {
+  const px = typeof size === "number" ? size : SIZES[size];
+  return (
+    <span
+      role={label ? "status" : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+      className={["inline-flex shrink-0", className].join(" ")}
+      style={{ width: px, height: px }}
+    >
+      <svg viewBox="0 0 24 24" width={px} height={px} fill="none" className="animate-spin">
+        <circle cx="12" cy="12" r="9.5" stroke="currentColor" strokeWidth="2.5" opacity="0.18" />
+        <path d="M21.5 12a9.5 9.5 0 0 0-9.5-9.5" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
+      </svg>
+    </span>
+  );
+}