@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/range-dial/range-dial.js

@@ -0,0 +1,308 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useRef, useState } from "react";
+//#region src/components/range-dial/range-dial.tsx
+const PREFIX = "dowel-range-dial";
+const DAY = 1440;
+const STYLES = `
+@keyframes ${PREFIX}-fill{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
+.${PREFIX} [data-slot=range-dial-tick][data-entering]{stroke-dasharray:1;animation:${PREFIX}-fill calc(260ms * var(--motion-scale, 1)) cubic-bezier(.22,1,.36,1) calc(var(--d, 0) * 16ms * var(--motion-scale, 1)) both}
+`;
+const clamp = (value, lo, hi) => Math.min(Math.max(value, lo), hi);
+const wrap = (minutes) => (Math.round(minutes) % DAY + DAY) % DAY;
+const gap = (a, b) => {
+	const d = Math.abs(a - b) % DAY;
+	return Math.min(d, DAY - d);
+};
+function spokenDuration(minutes) {
+	const hours = Math.floor(minutes / 60);
+	const rest = minutes % 60;
+	const parts = [];
+	if (hours > 0) parts.push(`${String(hours)} ${hours === 1 ? "hour" : "hours"}`);
+	if (rest > 0 || hours === 0) parts.push(`${String(rest)} ${rest === 1 ? "minute" : "minutes"}`);
+	return parts.join(" ");
+}
+/** Position on the dial, as percentages of its box, for an angle in minutes. */
+function polar(minutes, radius) {
+	const angle = minutes / DAY * 2 * Math.PI;
+	const r = radius / 2;
+	return {
+		left: `${(50 + r * Math.sin(angle)).toFixed(3)}%`,
+		top: `${(50 - r * Math.cos(angle)).toFixed(3)}%`
+	};
+}
+/** A 24-hour circular two-thumb range, such as a sleep window. */
+function RangeDial({ className, style, value: valueProp, defaultValue = [1380, 390], onValueChange, onValueCommit, snap = 15, density = 48, reach = 56, thumbLabels = ["Start time", "End time"], locale, formatTime, formatDuration = spokenDuration, disabled = false, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(() => [wrap(defaultValue[0]), wrap(defaultValue[1])]);
+	const controlled = valueProp !== void 0;
+	const value = controlled ? [wrap(valueProp[0]), wrap(valueProp[1])] : uncontrolled;
+	const [start, end] = value;
+	const duration = wrap(end - start);
+	const [announcement, setAnnouncement] = useState("");
+	const [dragging, setDragging] = useState(null);
+	const latest = useRef(value);
+	const thumbs = useRef([]);
+	const filterId = `${PREFIX}-${useId().replace(/:/g, "")}`;
+	const timeFormat = useMemo(() => new Intl.DateTimeFormat(locale, {
+		hour: "numeric",
+		minute: "2-digit",
+		timeZone: "UTC"
+	}), [locale]);
+	const timeText = (minutes) => formatTime ? formatTime(minutes) : timeFormat.format(/* @__PURE__ */ new Date(minutes * 6e4));
+	const count = clamp(Math.round(density), 24, 96);
+	const ring = clamp(reach, 44, 68);
+	const onList = Array.from({ length: count }, (_, index) => index).map((index) => ({
+		index,
+		offset: wrap(index * DAY / count - start)
+	})).filter((tick) => tick.offset <= duration).sort((a, b) => a.offset - b.offset).map((tick) => tick.index);
+	const onKey = onList.join(",");
+	const [trail, setTrail] = useState(() => ({
+		key: onKey,
+		entering: new Map(onList.map((index, rank) => [index, rank]))
+	}));
+	let entering = trail.entering;
+	if (trail.key !== onKey) {
+		const before = new Set(trail.key ? trail.key.split(",").map(Number) : []);
+		const next = /* @__PURE__ */ new Map();
+		let rank = 0;
+		for (const index of onList) if (!before.has(index)) next.set(index, rank++);
+		else if (trail.entering.has(index)) next.set(index, trail.entering.get(index) ?? 0);
+		entering = next;
+		setTrail({
+			key: onKey,
+			entering: next
+		});
+	}
+	const onSet = new Set(onList);
+	function setThumb(thumb, minutes) {
+		const current = latest.current;
+		const next = thumb === 0 ? [wrap(minutes), current[1]] : [current[0], wrap(minutes)];
+		latest.current = next;
+		if (next[0] === current[0] && next[1] === current[1]) return next;
+		if (!controlled) setUncontrolled(next);
+		setAnnouncement(formatDuration(wrap(next[1] - next[0])));
+		onValueChange?.(next);
+		return next;
+	}
+	function fromPointer(event) {
+		const rect = event.currentTarget.getBoundingClientRect();
+		if (rect.width === 0 || rect.height === 0) return null;
+		const dx = event.clientX - (rect.left + rect.width / 2);
+		const dy = event.clientY - (rect.top + rect.height / 2);
+		const turn = (Math.atan2(dx, -dy) / (2 * Math.PI) + 1) % 1;
+		return wrap(Math.round(turn * DAY / snap) * snap);
+	}
+	function handlePointerDown(event) {
+		onPointerDown?.(event);
+		if (disabled || event.button !== 0 || event.defaultPrevented) return;
+		const minutes = fromPointer(event);
+		if (minutes === null) return;
+		event.preventDefault();
+		const thumb = gap(minutes, start) <= gap(minutes, end) ? 0 : 1;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		latest.current = value;
+		setDragging(thumb);
+		setThumb(thumb, minutes);
+		thumbs.current[thumb]?.focus({ preventScroll: true });
+	}
+	function handlePointerMove(event) {
+		onPointerMove?.(event);
+		if (dragging === null) return;
+		const minutes = fromPointer(event);
+		if (minutes !== null) setThumb(dragging, minutes);
+	}
+	function handlePointerEnd(event) {
+		if (event.type === "pointerup") onPointerUp?.(event);
+		else onPointerCancel?.(event);
+		if (dragging === null) return;
+		setDragging(null);
+		onValueCommit?.(latest.current);
+	}
+	function handleKeyDown(thumb, event) {
+		if (disabled) return;
+		const current = value[thumb];
+		let next;
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowUp":
+				next = Math.floor(current / snap) * snap + snap;
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				next = Math.ceil(current / snap) * snap - snap;
+				break;
+			case "PageUp":
+				next = current + 60;
+				break;
+			case "PageDown":
+				next = current - 60;
+				break;
+			case "Home":
+				next = 0;
+				break;
+			case "End":
+				next = DAY - snap;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		latest.current = value;
+		const committed = setThumb(thumb, next);
+		if (committed[thumb] !== current) onValueCommit?.(committed);
+	}
+	const orbit = ring + 10.67;
+	const hours = Math.floor(duration / 60);
+	const mins = String(duration % 60).padStart(2, "0");
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": ariaLabelledBy ? ariaLabel : ariaLabel ?? "Time range",
+		"aria-labelledby": ariaLabelledBy,
+		"aria-disabled": disabled || void 0,
+		"data-slot": "range-dial",
+		"data-dragging": dragging === null ? void 0 : "",
+		"data-disabled": disabled ? "" : void 0,
+		className: cn(PREFIX, "relative aspect-square w-72 touch-none text-foreground select-none", disabled ? "cursor-not-allowed opacity-55" : "cursor-grab data-dragging:cursor-grabbing", className),
+		style: {
+			containerType: "inline-size",
+			direction: "ltr",
+			...style
+		},
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: handlePointerEnd,
+		onPointerCancel: handlePointerEnd,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: PREFIX,
+				precedence: "dowel",
+				children: STYLES
+			}),
+			/* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 200 200",
+				"aria-hidden": "true",
+				"data-slot": "range-dial-ticks",
+				className: "absolute inset-0 size-full",
+				children: Array.from({ length: count }, (_, index) => {
+					const angle = index / count * 2 * Math.PI;
+					const on = onSet.has(index);
+					const outer = on ? ring + 19 : ring + 9;
+					const rank = entering.get(index);
+					return /* @__PURE__ */ jsx("line", {
+						"data-slot": "range-dial-tick",
+						"data-on": on ? "" : void 0,
+						"data-entering": on && rank !== void 0 ? "" : void 0,
+						x1: 100 + ring * Math.sin(angle),
+						y1: 100 - ring * Math.cos(angle),
+						x2: 100 + outer * Math.sin(angle),
+						y2: 100 - outer * Math.cos(angle),
+						pathLength: 1,
+						stroke: "currentColor",
+						strokeWidth: 2,
+						strokeLinecap: "round",
+						opacity: on ? .9 : .24,
+						style: { "--d": rank ?? 0 }
+					}, index);
+				})
+			}),
+			/* @__PURE__ */ jsx("svg", {
+				width: "0",
+				height: "0",
+				"aria-hidden": "true",
+				className: "absolute",
+				children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+					id: filterId,
+					children: [
+						/* @__PURE__ */ jsx("feGaussianBlur", {
+							in: "SourceGraphic",
+							stdDeviation: "4",
+							result: "blur"
+						}),
+						/* @__PURE__ */ jsx("feColorMatrix", {
+							in: "blur",
+							mode: "matrix",
+							values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 16 -6.17",
+							result: "goo"
+						}),
+						/* @__PURE__ */ jsx("feComposite", {
+							in: "SourceGraphic",
+							in2: "goo",
+							operator: "over"
+						})
+					]
+				}) })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				"data-slot": "range-dial-knobs",
+				className: "pointer-events-none absolute inset-0",
+				style: { filter: `url(#${filterId}) drop-shadow(0 2px 8px var(--shadow-color)) drop-shadow(0 1px 3px var(--shadow-color))` },
+				children: value.map((minutes, thumb) => /* @__PURE__ */ jsx("span", {
+					"data-slot": "range-dial-knob",
+					className: "absolute flex size-[6.94cqi] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-card",
+					style: polar(minutes, orbit),
+					children: thumb === 0 ? /* @__PURE__ */ jsx("span", {
+						"data-slot": "range-dial-pip",
+						className: "size-1/4 rounded-full bg-foreground/50"
+					}) : null
+				}, thumb))
+			}),
+			value.map((minutes, thumb) => /* @__PURE__ */ jsx("span", {
+				ref: (node) => {
+					thumbs.current[thumb] = node;
+				},
+				role: "slider",
+				tabIndex: disabled ? -1 : 0,
+				"aria-label": thumbLabels[thumb],
+				"aria-valuemin": 0,
+				"aria-valuemax": 1439,
+				"aria-valuenow": minutes,
+				"aria-valuetext": timeText(minutes),
+				"aria-disabled": disabled || void 0,
+				"data-slot": "range-dial-thumb",
+				"data-thumb": thumb === 0 ? "start" : "end",
+				className: cn("absolute size-[9cqi] -translate-x-1/2 -translate-y-1/2 rounded-full", focusRing),
+				style: polar(minutes, orbit),
+				onKeyDown: (event) => {
+					handleKeyDown(thumb, event);
+				}
+			}, thumb)),
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "range-dial-readout",
+				className: "pointer-events-none absolute inset-0 flex items-center justify-center font-medium tracking-[-0.045em] tabular-nums",
+				style: { fontSize: "11.8cqi" },
+				children: [/* @__PURE__ */ jsxs("span", {
+					"aria-hidden": "true",
+					children: [
+						hours,
+						/* @__PURE__ */ jsx("span", {
+							className: "ms-[0.09em] me-[0.18em] text-[0.7em] opacity-42",
+							children: "h"
+						}),
+						mins,
+						/* @__PURE__ */ jsx("span", {
+							className: "ms-[0.09em] text-[0.7em] opacity-42",
+							children: "m"
+						})
+					]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: formatDuration(duration)
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: "sr-only",
+				"data-slot": "range-dial-status",
+				children: announcement
+			})
+		]
+	});
+}
+//#endregion
+export { RangeDial };
+
+//# sourceMappingURL=range-dial.js.map

package/dist/components/range-dial/range-dial.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-dial.js","names":[],"sources":["../../../src/components/range-dial/range-dial.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Range dial (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport {\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A 24-hour dial with two thumbs: the window is the clockwise arc from the\n * start thumb to the end thumb, and it may wrap past midnight. A ring of ticks\n * shows the window (long and dark inside, short and faint outside), and the\n * duration sits in the middle.\n *\n * The source was pointer-only. Here each thumb is a focusable role=\"slider\"\n * (arrows step by `snap`, Page Up/Down by an hour, Home/End jump to midnight\n * and the last step of the day, all wrapping round the clock), and a polite\n * live region announces the new duration once something has changed.\n *\n * The dial is a clock, not reading order: it keeps `direction: ltr` and\n * clockwise stays clockwise in right-to-left layouts, and so do the arrow keys\n * (up/right always add time, as on any circular slider).\n *\n * There is no gesture velocity to carry, so no `motion`: the thumbs follow the\n * pointer directly and ticks draw in with a hoisted keyframe whose duration and\n * stagger run through --motion-scale.\n */\n\nconst PREFIX = \"dowel-range-dial\";\nconst DAY = 1440;\n\nconst STYLES = `\n@keyframes ${PREFIX}-fill{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}\n.${PREFIX} [data-slot=range-dial-tick][data-entering]{stroke-dasharray:1;animation:${PREFIX}-fill calc(260ms * var(--motion-scale, 1)) cubic-bezier(.22,1,.36,1) calc(var(--d, 0) * 16ms * var(--motion-scale, 1)) both}\n`;\n\nexport type RangeDialValue = [start: number, end: number];\n\nexport interface RangeDialProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"defaultValue\" | \"onChange\" | \"children\"\n> {\n  /** `[start, end]` in minutes after midnight, 0–1439. The window runs clockwise. */\n  value?: RangeDialValue;\n  /** Uncontrolled start value. Defaults to 23:00 → 06:30 (7h30m). */\n  defaultValue?: RangeDialValue;\n  /** Called on every change: while dragging and per key press. */\n  onValueChange?: (value: RangeDialValue) => void;\n  /** Called when an interaction ends: pointer released or key press. */\n  onValueCommit?: (value: RangeDialValue) => void;\n  /** Step in minutes for the pointer and the arrow keys. */\n  snap?: 5 | 15 | 30;\n  /** Number of ticks round the dial, 24–96 (the source's slider stepped by 8). */\n  density?: number;\n  /** Tick ring radius in viewBox units, 44–68. Scales the whole dial geometry. */\n  reach?: number;\n  /** Accessible names of the two thumbs. */\n  thumbLabels?: [start: string, end: string];\n  /** Locale for the default time format. */\n  locale?: string;\n  /** Formats a time (minutes after midnight) for `aria-valuetext`. */\n  formatTime?: (minutes: number) => string;\n  /** Formats a duration in minutes for the live announcement. */\n  formatDuration?: (minutes: number) => string;\n  disabled?: boolean;\n}\n\nconst clamp = (value: number, lo: number, hi: number) => Math.min(Math.max(value, lo), hi);\nconst wrap = (minutes: number) => ((Math.round(minutes) % DAY) + DAY) % DAY;\nconst gap = (a: number, b: number) => {\n  const d = Math.abs(a - b) % DAY;\n  return Math.min(d, DAY - d);\n};\n\nfunction spokenDuration(minutes: number): string {\n  const hours = Math.floor(minutes / 60);\n  const rest = minutes % 60;\n  const parts: string[] = [];\n  if (hours > 0) parts.push(`${String(hours)} ${hours === 1 ? \"hour\" : \"hours\"}`);\n  if (rest > 0 || hours === 0)\n    parts.push(`${String(rest)} ${rest === 1 ? \"minute\" : \"minutes\"}`);\n  return parts.join(\" \");\n}\n\n/** Position on the dial, as percentages of its box, for an angle in minutes. */\nfunction polar(minutes: number, radius: number): { left: string; top: string } {\n  const angle = (minutes / DAY) * 2 * Math.PI;\n  const r = radius / 2; // viewBox units (of 200) to percent\n  return {\n    left: `${(50 + r * Math.sin(angle)).toFixed(3)}%`,\n    top: `${(50 - r * Math.cos(angle)).toFixed(3)}%`,\n  };\n}\n\ninterface Trail {\n  key: string;\n  /** Ticks drawing in, with their stagger rank along the arc. */\n  entering: Map<number, number>;\n}\n\n/** A 24-hour circular two-thumb range, such as a sleep window. */\nexport function RangeDial({\n  className,\n  style,\n  value: valueProp,\n  defaultValue = [23 * 60, 6 * 60 + 30],\n  onValueChange,\n  onValueCommit,\n  snap = 15,\n  density = 48,\n  reach = 56,\n  thumbLabels = [\"Start time\", \"End time\"],\n  locale,\n  formatTime,\n  formatDuration = spokenDuration,\n  disabled = false,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  onPointerDown,\n  onPointerMove,\n  onPointerUp,\n  onPointerCancel,\n  ...props\n}: RangeDialProps) {\n  const [uncontrolled, setUncontrolled] = useState<RangeDialValue>(() => [\n    wrap(defaultValue[0]),\n    wrap(defaultValue[1]),\n  ]);\n  const controlled = valueProp !== undefined;\n  const value: RangeDialValue = controlled\n    ? [wrap(valueProp[0]), wrap(valueProp[1])]\n    : uncontrolled;\n  const [start, end] = value;\n  const duration = wrap(end - start);\n\n  const [announcement, setAnnouncement] = useState(\"\");\n  const [dragging, setDragging] = useState<0 | 1 | null>(null);\n  const latest = useRef(value);\n  const thumbs = useRef<(HTMLSpanElement | null)[]>([]);\n  const filterId = `${PREFIX}-${useId().replace(/:/g, \"\")}`;\n\n  const timeFormat = useMemo(\n    () =>\n      new Intl.DateTimeFormat(locale, { hour: \"numeric\", minute: \"2-digit\", timeZone: \"UTC\" }),\n    [locale],\n  );\n  const timeText = (minutes: number) =>\n    formatTime ? formatTime(minutes) : timeFormat.format(new Date(minutes * 60_000));\n\n  /* Ticks -------------------------------------------------------------- */\n  const count = clamp(Math.round(density), 24, 96);\n  const ring = clamp(reach, 44, 68);\n  const onList = Array.from({ length: count }, (_, index) => index)\n    .map((index) => ({ index, offset: wrap((index * DAY) / count - start) }))\n    .filter((tick) => tick.offset <= duration)\n    .sort((a, b) => a.offset - b.offset)\n    .map((tick) => tick.index);\n  const onKey = onList.join(\",\");\n\n  // Ticks that have just joined the window draw in, one after another along\n  // the arc. Derived from the previous render's set (React's \"adjust state\n  // while rendering\" pattern), so a tick already on never replays.\n  const [trail, setTrail] = useState<Trail>(() => ({\n    key: onKey,\n    entering: new Map(onList.map((index, rank) => [index, rank])),\n  }));\n  let entering = trail.entering;\n  if (trail.key !== onKey) {\n    const before = new Set(trail.key ? trail.key.split(\",\").map(Number) : []);\n    const next = new Map<number, number>();\n    let rank = 0;\n    for (const index of onList) {\n      if (!before.has(index)) next.set(index, rank++);\n      else if (trail.entering.has(index)) next.set(index, trail.entering.get(index) ?? 0);\n    }\n    entering = next;\n    setTrail({ key: onKey, entering: next });\n  }\n  const onSet = new Set(onList);\n\n  /* Changes ------------------------------------------------------------ */\n  function setThumb(thumb: 0 | 1, minutes: number): RangeDialValue {\n    const current = latest.current;\n    const next: RangeDialValue =\n      thumb === 0 ? [wrap(minutes), current[1]] : [current[0], wrap(minutes)];\n    latest.current = next;\n    if (next[0] === current[0] && next[1] === current[1]) return next;\n    if (!controlled) setUncontrolled(next);\n    setAnnouncement(formatDuration(wrap(next[1] - next[0])));\n    onValueChange?.(next);\n    return next;\n  }\n\n  function fromPointer(event: PointerEvent<HTMLDivElement>): number | null {\n    const rect = event.currentTarget.getBoundingClientRect();\n    if (rect.width === 0 || rect.height === 0) return null;\n    const dx = event.clientX - (rect.left + rect.width / 2);\n    const dy = event.clientY - (rect.top + rect.height / 2);\n    const turn = (Math.atan2(dx, -dy) / (2 * Math.PI) + 1) % 1;\n    return wrap(Math.round((turn * DAY) / snap) * snap);\n  }\n\n  function handlePointerDown(event: PointerEvent<HTMLDivElement>) {\n    onPointerDown?.(event);\n    if (disabled || event.button !== 0 || event.defaultPrevented) return;\n    const minutes = fromPointer(event);\n    if (minutes === null) return;\n    event.preventDefault();\n    const thumb: 0 | 1 = gap(minutes, start) <= gap(minutes, end) ? 0 : 1;\n    event.currentTarget.setPointerCapture(event.pointerId);\n    latest.current = value;\n    setDragging(thumb);\n    setThumb(thumb, minutes);\n    thumbs.current[thumb]?.focus({ preventScroll: true });\n  }\n\n  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {\n    onPointerMove?.(event);\n    if (dragging === null) return;\n    const minutes = fromPointer(event);\n    if (minutes !== null) setThumb(dragging, minutes);\n  }\n\n  function handlePointerEnd(event: PointerEvent<HTMLDivElement>) {\n    if (event.type === \"pointerup\") onPointerUp?.(event);\n    else onPointerCancel?.(event);\n    if (dragging === null) return;\n    setDragging(null);\n    onValueCommit?.(latest.current);\n  }\n\n  function handleKeyDown(thumb: 0 | 1, event: KeyboardEvent<HTMLSpanElement>) {\n    if (disabled) return;\n    const current = value[thumb];\n    let next: number;\n    switch (event.key) {\n      case \"ArrowRight\":\n      case \"ArrowUp\":\n        next = Math.floor(current / snap) * snap + snap;\n        break;\n      case \"ArrowLeft\":\n      case \"ArrowDown\":\n        next = Math.ceil(current / snap) * snap - snap;\n        break;\n      case \"PageUp\":\n        next = current + 60;\n        break;\n      case \"PageDown\":\n        next = current - 60;\n        break;\n      case \"Home\":\n        next = 0;\n        break;\n      case \"End\":\n        next = DAY - snap;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    latest.current = value;\n    const committed = setThumb(thumb, next);\n    if (committed[thumb] !== current) onValueCommit?.(committed);\n  }\n\n  /* Render ------------------------------------------------------------- */\n  const orbit = ring + 10.67; // the knobs ride just outside the short ticks\n  const hours = Math.floor(duration / 60);\n  const mins = String(duration % 60).padStart(2, \"0\");\n\n  return (\n    <div\n      role=\"group\"\n      aria-label={ariaLabelledBy ? ariaLabel : (ariaLabel ?? \"Time range\")}\n      aria-labelledby={ariaLabelledBy}\n      aria-disabled={disabled || undefined}\n      data-slot=\"range-dial\"\n      data-dragging={dragging === null ? undefined : \"\"}\n      data-disabled={disabled ? \"\" : undefined}\n      className={cn(\n        PREFIX,\n        \"relative aspect-square w-72 touch-none text-foreground select-none\",\n        disabled\n          ? \"cursor-not-allowed opacity-55\"\n          : \"cursor-grab data-dragging:cursor-grabbing\",\n        className,\n      )}\n      style={{ containerType: \"inline-size\", direction: \"ltr\", ...style }}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerUp={handlePointerEnd}\n      onPointerCancel={handlePointerEnd}\n      {...props}\n    >\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <svg\n        viewBox=\"0 0 200 200\"\n        aria-hidden=\"true\"\n        data-slot=\"range-dial-ticks\"\n        className=\"absolute inset-0 size-full\"\n      >\n        {Array.from({ length: count }, (_, index) => {\n          const angle = (index / count) * 2 * Math.PI;\n          const on = onSet.has(index);\n          const outer = on ? ring + 19 : ring + 9;\n          const rank = entering.get(index);\n          return (\n            <line\n              key={index}\n              data-slot=\"range-dial-tick\"\n              data-on={on ? \"\" : undefined}\n              data-entering={on && rank !== undefined ? \"\" : undefined}\n              x1={100 + ring * Math.sin(angle)}\n              y1={100 - ring * Math.cos(angle)}\n              x2={100 + outer * Math.sin(angle)}\n              y2={100 - outer * Math.cos(angle)}\n              pathLength={1}\n              stroke=\"currentColor\"\n              strokeWidth={2}\n              strokeLinecap=\"round\"\n              opacity={on ? 0.9 : 0.24}\n              style={{ \"--d\": rank ?? 0 } as CSSProperties}\n            />\n          );\n        })}\n      </svg>\n\n      <svg width=\"0\" height=\"0\" aria-hidden=\"true\" className=\"absolute\">\n        <defs>\n          <filter id={filterId}>\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"4\" result=\"blur\" />\n            <feColorMatrix\n              in=\"blur\"\n              mode=\"matrix\"\n              values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 16 -6.17\"\n              result=\"goo\"\n            />\n            <feComposite in=\"SourceGraphic\" in2=\"goo\" operator=\"over\" />\n          </filter>\n        </defs>\n      </svg>\n      <div\n        aria-hidden=\"true\"\n        data-slot=\"range-dial-knobs\"\n        className=\"pointer-events-none absolute inset-0\"\n        style={{\n          filter: `url(#${filterId}) drop-shadow(0 2px 8px var(--shadow-color)) drop-shadow(0 1px 3px var(--shadow-color))`,\n        }}\n      >\n        {value.map((minutes, thumb) => (\n          <span\n            key={thumb}\n            data-slot=\"range-dial-knob\"\n            className=\"absolute flex size-[6.94cqi] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-card\"\n            style={polar(minutes, orbit)}\n          >\n            {thumb === 0 ? (\n              <span\n                data-slot=\"range-dial-pip\"\n                className=\"size-1/4 rounded-full bg-foreground/50\"\n              />\n            ) : null}\n          </span>\n        ))}\n      </div>\n\n      {value.map((minutes, thumb) => (\n        <span\n          key={thumb}\n          ref={(node) => {\n            thumbs.current[thumb] = node;\n          }}\n          role=\"slider\"\n          tabIndex={disabled ? -1 : 0}\n          aria-label={thumbLabels[thumb]}\n          aria-valuemin={0}\n          aria-valuemax={DAY - 1}\n          aria-valuenow={minutes}\n          aria-valuetext={timeText(minutes)}\n          aria-disabled={disabled || undefined}\n          data-slot=\"range-dial-thumb\"\n          data-thumb={thumb === 0 ? \"start\" : \"end\"}\n          className={cn(\n            \"absolute size-[9cqi] -translate-x-1/2 -translate-y-1/2 rounded-full\",\n            focusRing,\n          )}\n          style={polar(minutes, orbit)}\n          onKeyDown={(event) => {\n            handleKeyDown(thumb as 0 | 1, event);\n          }}\n        />\n      ))}\n\n      <div\n        data-slot=\"range-dial-readout\"\n        className=\"pointer-events-none absolute inset-0 flex items-center justify-center font-medium tracking-[-0.045em] tabular-nums\"\n        style={{ fontSize: \"11.8cqi\" }}\n      >\n        <span aria-hidden=\"true\">\n          {hours}\n          <span className=\"ms-[0.09em] me-[0.18em] text-[0.7em] opacity-42\">h</span>\n          {mins}\n          <span className=\"ms-[0.09em] text-[0.7em] opacity-42\">m</span>\n        </span>\n        <span className=\"sr-only\">{formatDuration(duration)}</span>\n      </div>\n      <span\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        className=\"sr-only\"\n        data-slot=\"range-dial-status\"\n      >\n        {announcement}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/record-diff/record-diff.js

@@ -121,17 +121,17 @@ function RecordDiffTable({ className, collapseUnchanged = true, ...props }) {
 					children: [
 						/* @__PURE__ */ jsx("th", {
 							scope: "col",
-							className: "px-3 py-2 text-left text-xs font-medium text-muted-foreground",
+							className: "px-3 py-2 text-start text-xs font-medium text-muted-foreground",
 							children: "Field"
 						}),
 						/* @__PURE__ */ jsx("th", {
 							scope: "col",
-							className: "px-3 py-2 text-left text-xs font-medium text-muted-foreground",
+							className: "px-3 py-2 text-start text-xs font-medium text-muted-foreground",
 							children: "Before"
 						}),
 						/* @__PURE__ */ jsx("th", {
 							scope: "col",
-							className: "px-3 py-2 text-left text-xs font-medium text-muted-foreground",
+							className: "px-3 py-2 text-start text-xs font-medium text-muted-foreground",
 							children: "After"
 						})
 					]
@@ -142,7 +142,7 @@ function RecordDiffTable({ className, collapseUnchanged = true, ...props }) {
 					children: [
 						/* @__PURE__ */ jsxs("th", {
 							scope: "row",
-							className: "px-3 py-2 text-left align-top font-medium whitespace-nowrap",
+							className: "px-3 py-2 text-start align-top font-medium whitespace-nowrap",
 							children: [field.label, /* @__PURE__ */ jsx("span", {
 								className: "sr-only",
 								children: `, ${field.change}`

package/dist/components/record-diff/record-diff.js.map

@@ -1 +1 @@
-{"version":3,"file":"record-diff.js","names":[],"sources":["../../../src/components/record-diff/record-diff.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  useState,\n  type ComponentPropsWithRef,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * What changed about a record, field by field.\n *\n * Every diff package on npm compares lines of text. That is the wrong shape for\n * an audit entry, a settings revision or a config history, where the change is\n * \"role went from viewer to admin\" and rendering it as two lines of JSON makes\n * the reader do the comparison themselves.\n *\n * Scope is deliberately flat records. Nested objects and arrays are formatted as\n * values rather than recursed into, because a recursive differ is a different\n * and much larger component, and pretending otherwise would produce a shallow\n * one that quietly lies about deep changes. `formatValue` is the escape hatch.\n *\n * Redaction is by key pattern and applied before formatting, so a secret is\n * never handed to a formatter that might log it.\n */\n\nexport type FieldChange = \"added\" | \"removed\" | \"changed\" | \"unchanged\";\n\nexport interface RecordField {\n  key: string;\n  label: string;\n  change: FieldChange;\n  before: unknown;\n  after: unknown;\n  redacted: boolean;\n}\n\n/** Values that read as absent, so \"\" → null is not reported as a change. */\nfunction isEmpty(value: unknown): boolean {\n  return value === null || value === undefined || value === \"\";\n}\n\nfunction classify(before: unknown, after: unknown): FieldChange {\n  const hadBefore = !isEmpty(before);\n  const hasAfter = !isEmpty(after);\n\n  if (!hadBefore && hasAfter) return \"added\";\n  if (hadBefore && !hasAfter) return \"removed\";\n  // Both absent. Falling through would compare \"\" against null, which\n  // serialise differently and would report a change that did not happen.\n  if (!hadBefore && !hasAfter) return \"unchanged\";\n  // Structural comparison, so {a:1} and {a:1} are equal. Key order differences\n  // would report a false change, so keys are sorted before comparing.\n  return stableStringify(before) === stableStringify(after) ? \"unchanged\" : \"changed\";\n}\n\nfunction stableStringify(value: unknown): string {\n  if (value === null || typeof value !== \"object\") return JSON.stringify(value) ?? \"\";\n  if (Array.isArray(value)) return `[${value.map(stableStringify).join(\",\")}]`;\n  const entries = Object.entries(value as Record<string, unknown>).sort(([a], [b]) =>\n    a.localeCompare(b),\n  );\n  return `{${entries.map(([k, v]) => `${k}:${stableStringify(v)}`).join(\",\")}}`;\n}\n\nfunction defaultFormatValue(value: unknown): string {\n  if (value === null || value === undefined) return \"—\";\n  if (value === \"\") return \"empty\";\n  if (typeof value === \"string\") return value;\n  if (typeof value === \"boolean\") return value ? \"yes\" : \"no\";\n  if (typeof value === \"number\" || typeof value === \"bigint\") return String(value);\n  if (Array.isArray(value)) {\n    return value.length === 0 ? \"none\" : value.map(defaultFormatValue).join(\", \");\n  }\n  if (typeof value === \"object\") return JSON.stringify(value);\n  // Symbols and functions have no sensible representation as a field value, and\n  // String() would yield \"[object Object]\" or a function body. Say what it is.\n  return `[${typeof value}]`;\n}\n\n/** Keys whose values must never be rendered, however the record was built. */\nconst DEFAULT_REDACT = /password|secret|token|api[-_]?key|authorization|credential/i;\n\nexport interface RecordDiffProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  before: Record<string, unknown>;\n  after: Record<string, unknown>;\n  /** Overrides the humanised key. */\n  labels?: Record<string, string>;\n  /** Keys to render as redacted. Defaults to common secret-shaped names. */\n  redact?: RegExp;\n  /** Only these keys, in this order. Anything else is ignored. */\n  fields?: string[];\n  /** Hides unchanged fields behind a toggle. */\n  collapseUnchanged?: boolean;\n  formatValue?: (value: unknown, key: string) => string;\n  children?: React.ReactNode;\n}\n\ninterface RecordDiffContextValue {\n  fields: RecordField[];\n  changedCount: number;\n  formatValue: (value: unknown, key: string) => string;\n}\n\nconst RecordDiffContext = createContext<RecordDiffContextValue | null>(null);\n\nfunction useRecordDiffContext(component: string): RecordDiffContextValue {\n  const context = useContext(RecordDiffContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <RecordDiff>.`);\n  }\n  return context;\n}\n\n/** \"billingEmail\" and \"billing_email\" both read as \"Billing email\". */\nfunction humanise(key: string): string {\n  const spaced = key\n    .replace(/[_-]+/g, \" \")\n    .replace(/([a-z0-9])([A-Z])/g, \"$1 $2\")\n    .trim();\n  return spaced.charAt(0).toUpperCase() + spaced.slice(1).toLowerCase();\n}\n\nexport function diffRecords(\n  before: Record<string, unknown>,\n  after: Record<string, unknown>,\n  options: { labels?: Record<string, string>; redact?: RegExp; fields?: string[] } = {},\n): RecordField[] {\n  const { labels = {}, redact = DEFAULT_REDACT, fields } = options;\n\n  // The union of both sides, so a removed key is still reported. Iterating only\n  // `after` is how removals go missing from audit logs.\n  const keys = fields ?? [...new Set([...Object.keys(before), ...Object.keys(after)])];\n\n  return keys.map((key) => ({\n    key,\n    label: labels[key] ?? humanise(key),\n    change: classify(before[key], after[key]),\n    before: before[key],\n    after: after[key],\n    redacted: redact.test(key),\n  }));\n}\n\nconst CHANGE_STYLES: Record<FieldChange, string> = {\n  added: \"text-success\",\n  removed: \"text-destructive\",\n  changed: \"text-foreground\",\n  unchanged: \"text-muted-foreground\",\n};\n\nexport function RecordDiff({\n  className,\n  before,\n  after,\n  labels,\n  redact = DEFAULT_REDACT,\n  fields: fieldKeys,\n  collapseUnchanged = true,\n  formatValue = defaultFormatValue,\n  children,\n  ...props\n}: RecordDiffProps) {\n  const fields = useMemo(\n    () => diffRecords(before, after, { labels, redact, fields: fieldKeys }),\n    [before, after, labels, redact, fieldKeys],\n  );\n\n  const changedCount = fields.filter((field) => field.change !== \"unchanged\").length;\n\n  const context = useMemo<RecordDiffContextValue>(\n    () => ({ fields, changedCount, formatValue }),\n    [fields, changedCount, formatValue],\n  );\n\n  return (\n    <RecordDiffContext.Provider value={context}>\n      <div\n        data-slot=\"record-diff\"\n        data-changed={changedCount}\n        className={cn(\"flex flex-col gap-2\", className)}\n        {...props}\n      >\n        {children ?? (\n          <>\n            <RecordDiffSummary />\n            <RecordDiffTable collapseUnchanged={collapseUnchanged} />\n          </>\n        )}\n      </div>\n    </RecordDiffContext.Provider>\n  );\n}\n\n/** \"3 fields changed\" — the thing a reviewer scanning a log needs first. */\nexport function RecordDiffSummary({ className, ...props }: ComponentPropsWithRef<\"p\">) {\n  const { changedCount, fields } = useRecordDiffContext(\"RecordDiffSummary\");\n\n  return (\n    <p\n      data-slot=\"record-diff-summary\"\n      className={cn(\"text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      {changedCount === 0\n        ? \"No fields changed\"\n        : `${String(changedCount)} of ${String(fields.length)} field${fields.length === 1 ? \"\" : \"s\"} changed`}\n    </p>\n  );\n}\n\nexport interface RecordDiffTableProps extends ComponentPropsWithRef<\"table\"> {\n  collapseUnchanged?: boolean;\n}\n\nexport function RecordDiffTable({\n  className,\n  collapseUnchanged = true,\n  ...props\n}: RecordDiffTableProps) {\n  const { fields, formatValue, changedCount } = useRecordDiffContext(\"RecordDiffTable\");\n  const [showUnchanged, setShowUnchanged] = useState(!collapseUnchanged);\n\n  const unchangedCount = fields.length - changedCount;\n  const visible = showUnchanged\n    ? fields\n    : fields.filter((field) => field.change !== \"unchanged\");\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"overflow-x-auto\">\n        <table\n          data-slot=\"record-diff-table\"\n          className={cn(\"w-full border-collapse text-sm\", className)}\n          {...props}\n        >\n          <thead>\n            <tr className=\"border-b border-border\">\n              <th\n                scope=\"col\"\n                className=\"px-3 py-2 text-left text-xs font-medium text-muted-foreground\"\n              >\n                Field\n              </th>\n              <th\n                scope=\"col\"\n                className=\"px-3 py-2 text-left text-xs font-medium text-muted-foreground\"\n              >\n                Before\n              </th>\n              <th\n                scope=\"col\"\n                className=\"px-3 py-2 text-left text-xs font-medium text-muted-foreground\"\n              >\n                After\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            {visible.map((field) => (\n              <tr\n                key={field.key}\n                data-slot=\"record-diff-row\"\n                data-change={field.change}\n                className=\"border-b border-border last:border-0\"\n              >\n                {/* scope=\"row\" so each value is announced with its field name\n                    rather than as a loose cell in a wall of table. */}\n                <th\n                  scope=\"row\"\n                  className=\"px-3 py-2 text-left align-top font-medium whitespace-nowrap\"\n                >\n                  {field.label}\n                  {/* The change kind must not be carried by row colour alone. */}\n                  <span className=\"sr-only\">{`, ${field.change}`}</span>\n                </th>\n                <td className=\"px-3 py-2 align-top text-muted-foreground\">\n                  {field.redacted ? (\n                    <RedactedValue />\n                  ) : field.change === \"added\" ? (\n                    <span className=\"text-muted-foreground\">—</span>\n                  ) : (\n                    <span className=\"line-through decoration-muted-foreground/50\">\n                      {formatValue(field.before, field.key)}\n                    </span>\n                  )}\n                </td>\n                <td className={cn(\"px-3 py-2 align-top\", CHANGE_STYLES[field.change])}>\n                  {field.redacted ? (\n                    <RedactedValue />\n                  ) : field.change === \"removed\" ? (\n                    <span className=\"text-muted-foreground\">—</span>\n                  ) : (\n                    formatValue(field.after, field.key)\n                  )}\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n\n      {collapseUnchanged && unchangedCount > 0 ? (\n        <button\n          type=\"button\"\n          data-slot=\"record-diff-toggle\"\n          aria-expanded={showUnchanged}\n          onClick={() => {\n            setShowUnchanged((shown) => !shown);\n          }}\n          className={cn(\n            \"self-start rounded-md px-1.5 py-0.5 text-xs text-muted-foreground\",\n            \"transition-colors hover:text-foreground\",\n            \"outline-none focus-visible:ring-2 focus-visible:ring-ring/55\",\n          )}\n        >\n          {showUnchanged\n            ? `Hide ${String(unchangedCount)} unchanged`\n            : `Show ${String(unchangedCount)} unchanged`}\n        </button>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * A value that is never rendered.\n *\n * Redaction happens before formatting, so a secret is not passed to a formatter\n * that might log or transform it — the value simply does not reach the DOM.\n */\nfunction RedactedValue() {\n  return (\n    <span data-slot=\"record-diff-redacted\" className=\"text-muted-foreground italic\">\n      redacted\n    </span>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"record-diff.js","names":[],"sources":["../../../src/components/record-diff/record-diff.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  useState,\n  type ComponentPropsWithRef,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * What changed about a record, field by field.\n *\n * Every diff package on npm compares lines of text. That is the wrong shape for\n * an audit entry, a settings revision or a config history, where the change is\n * \"role went from viewer to admin\" and rendering it as two lines of JSON makes\n * the reader do the comparison themselves.\n *\n * Scope is deliberately flat records. Nested objects and arrays are formatted as\n * values rather than recursed into, because a recursive differ is a different\n * and much larger component, and pretending otherwise would produce a shallow\n * one that quietly lies about deep changes. `formatValue` is the escape hatch.\n *\n * Redaction is by key pattern and applied before formatting, so a secret is\n * never handed to a formatter that might log it.\n */\n\nexport type FieldChange = \"added\" | \"removed\" | \"changed\" | \"unchanged\";\n\nexport interface RecordField {\n  key: string;\n  label: string;\n  change: FieldChange;\n  before: unknown;\n  after: unknown;\n  redacted: boolean;\n}\n\n/** Values that read as absent, so \"\" → null is not reported as a change. */\nfunction isEmpty(value: unknown): boolean {\n  return value === null || value === undefined || value === \"\";\n}\n\nfunction classify(before: unknown, after: unknown): FieldChange {\n  const hadBefore = !isEmpty(before);\n  const hasAfter = !isEmpty(after);\n\n  if (!hadBefore && hasAfter) return \"added\";\n  if (hadBefore && !hasAfter) return \"removed\";\n  // Both absent. Falling through would compare \"\" against null, which\n  // serialise differently and would report a change that did not happen.\n  if (!hadBefore && !hasAfter) return \"unchanged\";\n  // Structural comparison, so {a:1} and {a:1} are equal. Key order differences\n  // would report a false change, so keys are sorted before comparing.\n  return stableStringify(before) === stableStringify(after) ? \"unchanged\" : \"changed\";\n}\n\nfunction stableStringify(value: unknown): string {\n  if (value === null || typeof value !== \"object\") return JSON.stringify(value) ?? \"\";\n  if (Array.isArray(value)) return `[${value.map(stableStringify).join(\",\")}]`;\n  const entries = Object.entries(value as Record<string, unknown>).sort(([a], [b]) =>\n    a.localeCompare(b),\n  );\n  return `{${entries.map(([k, v]) => `${k}:${stableStringify(v)}`).join(\",\")}}`;\n}\n\nfunction defaultFormatValue(value: unknown): string {\n  if (value === null || value === undefined) return \"—\";\n  if (value === \"\") return \"empty\";\n  if (typeof value === \"string\") return value;\n  if (typeof value === \"boolean\") return value ? \"yes\" : \"no\";\n  if (typeof value === \"number\" || typeof value === \"bigint\") return String(value);\n  if (Array.isArray(value)) {\n    return value.length === 0 ? \"none\" : value.map(defaultFormatValue).join(\", \");\n  }\n  if (typeof value === \"object\") return JSON.stringify(value);\n  // Symbols and functions have no sensible representation as a field value, and\n  // String() would yield \"[object Object]\" or a function body. Say what it is.\n  return `[${typeof value}]`;\n}\n\n/** Keys whose values must never be rendered, however the record was built. */\nconst DEFAULT_REDACT = /password|secret|token|api[-_]?key|authorization|credential/i;\n\nexport interface RecordDiffProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  before: Record<string, unknown>;\n  after: Record<string, unknown>;\n  /** Overrides the humanised key. */\n  labels?: Record<string, string>;\n  /** Keys to render as redacted. Defaults to common secret-shaped names. */\n  redact?: RegExp;\n  /** Only these keys, in this order. Anything else is ignored. */\n  fields?: string[];\n  /** Hides unchanged fields behind a toggle. */\n  collapseUnchanged?: boolean;\n  formatValue?: (value: unknown, key: string) => string;\n  children?: React.ReactNode;\n}\n\ninterface RecordDiffContextValue {\n  fields: RecordField[];\n  changedCount: number;\n  formatValue: (value: unknown, key: string) => string;\n}\n\nconst RecordDiffContext = createContext<RecordDiffContextValue | null>(null);\n\nfunction useRecordDiffContext(component: string): RecordDiffContextValue {\n  const context = useContext(RecordDiffContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <RecordDiff>.`);\n  }\n  return context;\n}\n\n/** \"billingEmail\" and \"billing_email\" both read as \"Billing email\". */\nfunction humanise(key: string): string {\n  const spaced = key\n    .replace(/[_-]+/g, \" \")\n    .replace(/([a-z0-9])([A-Z])/g, \"$1 $2\")\n    .trim();\n  return spaced.charAt(0).toUpperCase() + spaced.slice(1).toLowerCase();\n}\n\nexport function diffRecords(\n  before: Record<string, unknown>,\n  after: Record<string, unknown>,\n  options: { labels?: Record<string, string>; redact?: RegExp; fields?: string[] } = {},\n): RecordField[] {\n  const { labels = {}, redact = DEFAULT_REDACT, fields } = options;\n\n  // The union of both sides, so a removed key is still reported. Iterating only\n  // `after` is how removals go missing from audit logs.\n  const keys = fields ?? [...new Set([...Object.keys(before), ...Object.keys(after)])];\n\n  return keys.map((key) => ({\n    key,\n    label: labels[key] ?? humanise(key),\n    change: classify(before[key], after[key]),\n    before: before[key],\n    after: after[key],\n    redacted: redact.test(key),\n  }));\n}\n\nconst CHANGE_STYLES: Record<FieldChange, string> = {\n  added: \"text-success\",\n  removed: \"text-destructive\",\n  changed: \"text-foreground\",\n  unchanged: \"text-muted-foreground\",\n};\n\nexport function RecordDiff({\n  className,\n  before,\n  after,\n  labels,\n  redact = DEFAULT_REDACT,\n  fields: fieldKeys,\n  collapseUnchanged = true,\n  formatValue = defaultFormatValue,\n  children,\n  ...props\n}: RecordDiffProps) {\n  const fields = useMemo(\n    () => diffRecords(before, after, { labels, redact, fields: fieldKeys }),\n    [before, after, labels, redact, fieldKeys],\n  );\n\n  const changedCount = fields.filter((field) => field.change !== \"unchanged\").length;\n\n  const context = useMemo<RecordDiffContextValue>(\n    () => ({ fields, changedCount, formatValue }),\n    [fields, changedCount, formatValue],\n  );\n\n  return (\n    <RecordDiffContext.Provider value={context}>\n      <div\n        data-slot=\"record-diff\"\n        data-changed={changedCount}\n        className={cn(\"flex flex-col gap-2\", className)}\n        {...props}\n      >\n        {children ?? (\n          <>\n            <RecordDiffSummary />\n            <RecordDiffTable collapseUnchanged={collapseUnchanged} />\n          </>\n        )}\n      </div>\n    </RecordDiffContext.Provider>\n  );\n}\n\n/** \"3 fields changed\" — the thing a reviewer scanning a log needs first. */\nexport function RecordDiffSummary({ className, ...props }: ComponentPropsWithRef<\"p\">) {\n  const { changedCount, fields } = useRecordDiffContext(\"RecordDiffSummary\");\n\n  return (\n    <p\n      data-slot=\"record-diff-summary\"\n      className={cn(\"text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      {changedCount === 0\n        ? \"No fields changed\"\n        : `${String(changedCount)} of ${String(fields.length)} field${fields.length === 1 ? \"\" : \"s\"} changed`}\n    </p>\n  );\n}\n\nexport interface RecordDiffTableProps extends ComponentPropsWithRef<\"table\"> {\n  collapseUnchanged?: boolean;\n}\n\nexport function RecordDiffTable({\n  className,\n  collapseUnchanged = true,\n  ...props\n}: RecordDiffTableProps) {\n  const { fields, formatValue, changedCount } = useRecordDiffContext(\"RecordDiffTable\");\n  const [showUnchanged, setShowUnchanged] = useState(!collapseUnchanged);\n\n  const unchangedCount = fields.length - changedCount;\n  const visible = showUnchanged\n    ? fields\n    : fields.filter((field) => field.change !== \"unchanged\");\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"overflow-x-auto\">\n        <table\n          data-slot=\"record-diff-table\"\n          className={cn(\"w-full border-collapse text-sm\", className)}\n          {...props}\n        >\n          <thead>\n            <tr className=\"border-b border-border\">\n              <th\n                scope=\"col\"\n                className=\"px-3 py-2 text-start text-xs font-medium text-muted-foreground\"\n              >\n                Field\n              </th>\n              <th\n                scope=\"col\"\n                className=\"px-3 py-2 text-start text-xs font-medium text-muted-foreground\"\n              >\n                Before\n              </th>\n              <th\n                scope=\"col\"\n                className=\"px-3 py-2 text-start text-xs font-medium text-muted-foreground\"\n              >\n                After\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            {visible.map((field) => (\n              <tr\n                key={field.key}\n                data-slot=\"record-diff-row\"\n                data-change={field.change}\n                className=\"border-b border-border last:border-0\"\n              >\n                {/* scope=\"row\" so each value is announced with its field name\n                    rather than as a loose cell in a wall of table. */}\n                <th\n                  scope=\"row\"\n                  className=\"px-3 py-2 text-start align-top font-medium whitespace-nowrap\"\n                >\n                  {field.label}\n                  {/* The change kind must not be carried by row colour alone. */}\n                  <span className=\"sr-only\">{`, ${field.change}`}</span>\n                </th>\n                <td className=\"px-3 py-2 align-top text-muted-foreground\">\n                  {field.redacted ? (\n                    <RedactedValue />\n                  ) : field.change === \"added\" ? (\n                    <span className=\"text-muted-foreground\">—</span>\n                  ) : (\n                    <span className=\"line-through decoration-muted-foreground/50\">\n                      {formatValue(field.before, field.key)}\n                    </span>\n                  )}\n                </td>\n                <td className={cn(\"px-3 py-2 align-top\", CHANGE_STYLES[field.change])}>\n                  {field.redacted ? (\n                    <RedactedValue />\n                  ) : field.change === \"removed\" ? (\n                    <span className=\"text-muted-foreground\">—</span>\n                  ) : (\n                    formatValue(field.after, field.key)\n                  )}\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n\n      {collapseUnchanged && unchangedCount > 0 ? (\n        <button\n          type=\"button\"\n          data-slot=\"record-diff-toggle\"\n          aria-expanded={showUnchanged}\n          onClick={() => {\n            setShowUnchanged((shown) => !shown);\n          }}\n          className={cn(\n            \"self-start rounded-md px-1.5 py-0.5 text-xs text-muted-foreground\",\n            \"transition-colors hover:text-foreground\",\n            \"outline-none focus-visible:ring-2 focus-visible:ring-ring/55\",\n          )}\n        >\n          {showUnchanged\n            ? `Hide ${String(unchangedCount)} unchanged`\n            : `Show ${String(unchangedCount)} unchanged`}\n        </button>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * A value that is never rendered.\n *\n * Redaction happens before formatting, so a secret is not passed to a formatter\n * that might log or transform it — the value simply does not reach the DOM.\n */\nfunction RedactedValue() {\n  return (\n    <span data-slot=\"record-diff-redacted\" className=\"text-muted-foreground italic\">\n      redacted\n    </span>\n  );\n}\n"],"mappings":"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"}

package/dist/components/reorder-list/index.d.ts

@@ -0,0 +1,2 @@
+import { ReorderList, ReorderListAnnouncementDetails, ReorderListAnnouncements, ReorderListItem, ReorderListProps, leanFor, reorderListVariants, reorderSpring } from "./reorder-list.js";
+export { ReorderList, type ReorderListAnnouncementDetails, type ReorderListAnnouncements, type ReorderListItem, type ReorderListProps, leanFor, reorderListVariants, reorderSpring };

package/dist/components/reorder-list/index.js

@@ -0,0 +1,2 @@
+import { ReorderList, leanFor, reorderListVariants, reorderSpring } from "./reorder-list.js";
+export { ReorderList, leanFor, reorderListVariants, reorderSpring };

package/dist/components/reorder-list/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/reorder-list/meta.ts
+const meta = defineMeta({
+	name: "reorder-list",
+	title: "Reorder List",
+	description: "A short list of people or things you put in order by dragging liquid pills, or with Space and the arrow keys.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority", "motion"],
+	registryDependencies: ["avatar"],
+	files: ["reorder-list.tsx"],
+	a11y: "A real list (ol, role=list, named by aria-label) whose rows are buttons named by their label and described by the keyboard instructions. Space or Enter picks a row up (aria-pressed), ArrowUp/ArrowDown or Home/End move it, Space or Enter drops it and Escape (or leaving the row) cancels and restores the original order; without a grab the arrows move focus between rows. Focus stays on the moved row. A polite, visually hidden status region announces each grab, move, drop and cancel (messages overridable for i18n), including drops made by pointer. The goo layer of pill backgrounds is aria-hidden and separate from the text, and avatars are decorative. Under reduced motion nothing deforms and rows jump to their slots."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/reorder-list/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/reorder-list/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"reorder-list\",\n  title: \"Reorder List\",\n  description:\n    \"A short list of people or things you put in order by dragging liquid pills, or with Space and the arrow keys.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"motion\"],\n  registryDependencies: [\"avatar\"],\n  files: [\"reorder-list.tsx\"],\n  a11y:\n    \"A real list (ol, role=list, named by aria-label) whose rows are buttons named by their label and described by \" +\n    \"the keyboard instructions. Space or Enter picks a row up (aria-pressed), ArrowUp/ArrowDown or Home/End move \" +\n    \"it, Space or Enter drops it and Escape (or leaving the row) cancels and restores the original order; without \" +\n    \"a grab the arrows move focus between rows. Focus stays on the moved row. A polite, visually hidden status \" +\n    \"region announces each grab, move, drop and cancel (messages overridable for i18n), including drops made by \" +\n    \"pointer. The goo layer of pill backgrounds is aria-hidden and separate from the text, and avatars are \" +\n    \"decorative. Under reduced motion nothing deforms and rows jump to their slots.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,QAAQ;CACnD,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,kBAAkB;CAC1B,MACE;AAOJ,CAAC"}

package/dist/components/reorder-list/reorder-list.d.ts

@@ -0,0 +1,79 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/reorder-list/reorder-list.d.ts
+/** Spring for rows settling. `give` 0 is stiff and exact, 100 soft and bouncy. */
+declare function reorderSpring(give: number): {
+  type: "spring";
+  stiffness: number;
+  damping: number;
+  restDelta: number;
+};
+/**
+ * How the held pill deforms at a velocity (px/s). `lean` is 0–100; at the
+ * default 18 a brisk drag gives about scaleX 0.8, scaleY 1.1, skewY 1.4°.
+ */
+declare function leanFor(velocity: number, lean: number): {
+  scaleX: number;
+  scaleY: number;
+  skewY: number;
+};
+interface ReorderListItem {
+  id: string;
+  /** The row's name. Announced, and names its button. */
+  label: string;
+  /** Avatar image URL. Decorative: the label already names the row. */
+  avatar?: string;
+  /** Shown when there is no image, or it fails to load. */
+  initials?: string;
+  /** CSS colour behind the avatar, e.g. `var(--color-primary)`. */
+  accent?: string;
+  /** Shows a presence dot (success token) and adds "online" to the name. */
+  online?: boolean;
+}
+interface ReorderListAnnouncementDetails {
+  item: ReorderListItem;
+  /** 1-based. */
+  position: number;
+  total: number;
+}
+interface ReorderListAnnouncements {
+  grabbed: (details: ReorderListAnnouncementDetails) => string;
+  moved: (details: ReorderListAnnouncementDetails) => string;
+  dropped: (details: ReorderListAnnouncementDetails) => string;
+  cancelled: (details: ReorderListAnnouncementDetails) => string;
+}
+declare const reorderListVariants: (props?: ({
+  fill?: "light" | "dark" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ReorderListProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "children">, VariantProps<typeof reorderListVariants> {
+  items: ReorderListItem[];
+  /** Order as item ids (controlled). */
+  value?: string[];
+  /** Initial order (uncontrolled). Defaults to the order of `items`. */
+  defaultValue?: string[];
+  /** Called with the new order after a drop that changed it. */
+  onValueChange?: (value: string[]) => void;
+  /** Replaces the avatar and label inside a row. The label still names the button. */
+  renderItem?: (item: ReorderListItem, state: {
+    grabbed: boolean;
+    index: number;
+  }) => ReactNode;
+  /** Pill corner radius, 0–22 px. */
+  corner?: number;
+  /** Spring softness for rows settling, 0–100. */
+  give?: number;
+  /** How much the held pill skews and squashes with velocity, 0–100. */
+  lean?: number;
+  /** 1px inset hairline on each pill. */
+  stroke?: boolean;
+  disabled?: boolean;
+  /** Overrides for the live-region messages (i18n). */
+  announcements?: Partial<ReorderListAnnouncements>;
+  /** Describes the keyboard operation; referenced by every row's button. */
+  instructions?: string;
+}
+/** A list you reorder by dragging liquid pills, or with Space and the arrow keys. */
+declare function ReorderList({ className, items, value, defaultValue, onValueChange, renderItem, corner, give, lean, fill, stroke, disabled, announcements, instructions, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ReorderListProps): import("react").JSX.Element;
+//#endregion
+export { ReorderList, ReorderListAnnouncementDetails, ReorderListAnnouncements, ReorderListItem, ReorderListProps, leanFor, reorderListVariants, reorderSpring };
+//# sourceMappingURL=reorder-list.d.ts.map

package/dist/components/reorder-list/reorder-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reorder-list.d.ts","names":[],"sources":["../../../src/components/reorder-list/reorder-list.tsx"],"mappings":";;;;iBAqFgB,cAAc;;;;;;;;;;iBAcd,QAAQ,kBAAkB;;;;;UAUzB;EACf;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;UAGe;EACf,MAAM;;EAEN;EACA;;UAGe;EACf,UAAU,SAAS;EACnB,QAAQ,SAAS;EACjB,UAAU,SAAS;EACnB,YAAY,SAAS;;cAejB,sBAAmB;;6CASvB;UAEe,yBAEb,KAAK,4DACL,oBAAoB;EACtB,OAAO;;EAEP;;EAEA;;EAEA,iBAAiB;;EAEjB,cAAc,MAAM,iBAAiB;IAAS;IAAkB;QAAoB;;EAEpF;;EAEA;;EAEA;;EAEA;EACA;;EAEA,gBAAgB,QAAQ;;EAExB;;;iBA+Bc,cACd,WACA,OACA,OACA,cACA,eACA,YACA,QACA,MACA,MACA,MACA,QACA,UACA,eACA,cACA,qBACc,8BACK,mBAChB,SACF,mCAAgB,IAAA"}