@5voltfx/design-system 0.1.1 → 0.2.0

package/dist/chunk-SUYKOWXJ.js

@@ -0,0 +1,1219 @@
+// src/components/SlideRuleNav/SlideRuleNav.jsx
+import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef6, useState as useState2 } from "react";
+import { NavLink } from "react-router-dom";
+
+// src/components/_shared/useDetentTravel.js
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/components/_shared/useReducedMotion.js
+import { useSyncExternalStore } from "react";
+var QUERY = "(prefers-reduced-motion: reduce)";
+function subscribe(onChange) {
+  const mq = window.matchMedia(QUERY);
+  mq.addEventListener("change", onChange);
+  return () => mq.removeEventListener("change", onChange);
+}
+var getSnapshot = () => window.matchMedia(QUERY).matches;
+var getServerSnapshot = () => false;
+function useReducedMotion() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// src/components/_shared/useDetentTravel.js
+function easeBack(x) {
+  const c1 = 1.02;
+  const c3 = c1 + 1;
+  return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);
+}
+var clamp = (v, lo, hi) => v < lo ? lo : v > hi ? hi : v;
+function useDetentTravel({
+  count,
+  value,
+  defaultValue = 0,
+  onChange,
+  subdivisions = 4,
+  settleMs = 420,
+  onDetentCross
+} = {}) {
+  const last = Math.max(0, count - 1);
+  const isControlled = value != null;
+  const [internalStation, setInternalStation] = useState(
+    () => clamp(Math.round(defaultValue), 0, last)
+  );
+  const station = clamp(
+    Math.round(isControlled ? value : internalStation),
+    0,
+    last
+  );
+  const [pos, setPos] = useState(station);
+  const [dragging, setDragging] = useState(false);
+  const [settling, setSettling] = useState(false);
+  const reduced = useReducedMotion();
+  const posRef = useRef(pos);
+  const rafRef = useRef(0);
+  const targetRef = useRef(station);
+  const stationRef = useRef(station);
+  const detentRef = useRef(Math.round(station * subdivisions));
+  const onChangeRef = useRef(onChange);
+  const onDetentCrossRef = useRef(onDetentCross);
+  posRef.current = pos;
+  stationRef.current = station;
+  onChangeRef.current = onChange;
+  onDetentCrossRef.current = onDetentCross;
+  const cancel = useCallback(() => {
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = 0;
+    }
+  }, []);
+  useEffect(() => cancel, [cancel]);
+  const writePos = useCallback((v) => {
+    posRef.current = v;
+    setPos(v);
+  }, []);
+  const animateTo = useCallback(
+    (target, ms, done) => {
+      cancel();
+      const from = posRef.current;
+      if (reduced || ms <= 0 || from === target) {
+        writePos(target);
+        setSettling(false);
+        done?.();
+        return;
+      }
+      setSettling(true);
+      const t0 = performance.now();
+      const frame = (now) => {
+        const k = Math.min(1, (now - t0) / ms);
+        if (k < 1) {
+          writePos(from + (target - from) * easeBack(k));
+          rafRef.current = requestAnimationFrame(frame);
+          return;
+        }
+        rafRef.current = 0;
+        writePos(target);
+        setSettling(false);
+        done?.();
+      };
+      rafRef.current = requestAnimationFrame(frame);
+    },
+    [cancel, reduced, writePos]
+  );
+  const goTo = useCallback(
+    (i, ms = settleMs) => {
+      const next = clamp(Math.round(i), 0, last);
+      targetRef.current = next;
+      detentRef.current = Math.round(next * subdivisions);
+      animateTo(next, ms, () => {
+        if (next === stationRef.current) return;
+        if (!isControlled) setInternalStation(next);
+        onChangeRef.current?.(next);
+      });
+    },
+    [animateTo, isControlled, last, settleMs, subdivisions]
+  );
+  useEffect(() => {
+    if (targetRef.current === station) return;
+    targetRef.current = station;
+    detentRef.current = Math.round(station * subdivisions);
+    animateTo(station, settleMs);
+  }, [station, animateTo, settleMs, subdivisions]);
+  const begin = useCallback(() => {
+    cancel();
+    setSettling(false);
+    setDragging(true);
+  }, [cancel]);
+  const track = useCallback(
+    (raw) => {
+      cancel();
+      const detent = Math.round(clamp(raw, 0, last) * subdivisions);
+      if (detent !== detentRef.current) {
+        detentRef.current = detent;
+        onDetentCrossRef.current?.();
+      }
+      writePos(detent / subdivisions);
+    },
+    [cancel, last, subdivisions, writePos]
+  );
+  const release = useCallback(() => {
+    setDragging(false);
+    goTo(Math.round(posRef.current));
+  }, [goTo]);
+  const step = useCallback(
+    (delta) => goTo(stationRef.current + delta),
+    [goTo]
+  );
+  return { pos, station, dragging, settling, goTo, step, track, begin, release };
+}
+
+// src/components/_shared/validateStationCount.js
+var MIN_STATIONS = 2;
+var MAX_STATIONS = 8;
+var isDev = typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+function validateStationCount(n, component) {
+  if (n > MAX_STATIONS) {
+    if (isDev) {
+      console.warn(
+        `[${component}] ${n} stations exceeds the supported maximum of ${MAX_STATIONS}; extra items are not rendered. Slide-rule navigations stay legible up to ${MAX_STATIONS} stations.`
+      );
+    }
+    return MAX_STATIONS;
+  }
+  if (n < MIN_STATIONS && isDev) {
+    console.warn(
+      `[${component}] needs at least ${MIN_STATIONS} stations; got ${n}.`
+    );
+  }
+  return n;
+}
+
+// src/components/SlideRuleNav/geometry.js
+var MINOR_TARGET = 38;
+var LINEAR = Object.freeze({
+  /**
+   * L-I — fixed scale, cursor travels.
+   *
+   * The stock runs from `x0 - cursorBox.w / 2` to `x1 + cursorBox.w / 2` for
+   * the same reason as L-III: the cursor is centred on the station it reads,
+   * so the stock has to extend past the end graduations for it to sit on the
+   * instrument at station 0 and at the last station.
+   */
+  cursor: Object.freeze({
+    viewBox: Object.freeze([900, 136]),
+    x0: 62,
+    x1: 838,
+    railX0: 30,
+    railX1: 870,
+    top: 40,
+    bot: 112,
+    labelY: 24,
+    cursorBox: Object.freeze({ w: 60, h: 100, y: 28 }),
+    settleMs: 420
+  }),
+  /** L-II — fixed index, slide travels, true log10 station spacing. */
+  slide: Object.freeze({
+    viewBox: Object.freeze([900, 150]),
+    l0: 60,
+    lw: 1400,
+    index: 450,
+    clip: Object.freeze([30, 870]),
+    statorL0: 40,
+    statorLw: 800,
+    slideY: 46,
+    slideH: 58,
+    labelY: 88,
+    settleMs: 460
+  }),
+  /**
+   * L-III — notched rail, vernier carriage. Reference plate.
+   *
+   * The station span is 772 units, exactly as drawn in the artboards, but it
+   * is inset 124 units from the left rather than 64. The carriage is centred
+   * on the station it reads, and its widest form (5 stations) is 224 units
+   * across — so at station 0 a 64-unit inset put half the vernier off the end
+   * of the rule. The artboards never showed it because they opened on station
+   * 2. Keeping the span identical preserves every derived division.
+   *
+   * The rail then runs from `x0 - maxCarriageHalf` to `x1 + maxCarriageHalf`,
+   * because a real stock extends past its scale far enough for the cursor to
+   * reach the end graduations without hanging off the instrument.
+   */
+  vernier: Object.freeze({
+    viewBox: Object.freeze([1020, 160]),
+    x0: 124,
+    x1: 896,
+    railX0: 12,
+    railX1: 1008,
+    railY: 46,
+    railH: 42,
+    labelY: 26,
+    vernierDivisions: 5,
+    mainDivisionsSpanned: 4,
+    /** Widest half-carriage across all supported counts; the inset floor. */
+    maxCarriageHalf: 112,
+    settleMs: 380
+  })
+});
+var SLIDE_VALUES = Object.freeze({
+  2: Object.freeze([1, 8]),
+  3: Object.freeze([1, 2, 8]),
+  4: Object.freeze([1, 2, 3, 8]),
+  5: Object.freeze([1, 1.5, 2, 3, 8]),
+  6: Object.freeze([1, 1.5, 2, 3, 5, 8]),
+  7: Object.freeze([1, 1.5, 2, 3, 4, 6, 8]),
+  8: Object.freeze([1, 1.5, 2, 2.5, 3, 4, 6, 8])
+});
+var pct = (v, extent) => `${v / extent * 100}%`;
+var clamp2 = (v, lo, hi) => v < lo ? lo : v > hi ? hi : v;
+function pitchFor(spec, count) {
+  return (spec.x1 - spec.x0) / Math.max(1, count - 1);
+}
+function minorDivisions(pitch) {
+  const minorsPerPitch = 4 * Math.max(1, Math.round(pitch / (4 * MINOR_TARGET)));
+  const minor = pitch / minorsPerPitch;
+  return {
+    minorsPerPitch,
+    minor,
+    vdiv: minor * 4 / 5,
+    minorsPerDetent: minorsPerPitch / 4
+  };
+}
+function coincidence({ pos, count, spec = LINEAR.vernier }) {
+  const pitch = pitchFor(spec, count);
+  const { minor, vdiv } = minorDivisions(pitch);
+  const cx = spec.x0 + pos * pitch;
+  let k = 0;
+  let d = Infinity;
+  for (let i = 0; i < LINEAR.vernier.vernierDivisions; i++) {
+    const vx = cx + (i - 2.5) * vdiv;
+    const off = vx - spec.x0;
+    const dist = Math.abs(off - Math.round(off / minor) * minor);
+    if (dist < d - 1e-9) {
+      d = dist;
+      k = i;
+    }
+  }
+  return { k, d, lit: d < vdiv * 0.34 };
+}
+var logX = (spec, v) => spec.l0 + Math.log10(v) * spec.lw;
+var slideValues = (count) => SLIDE_VALUES[count] ?? SLIDE_VALUES[6];
+var logStops = (spec, count) => slideValues(count).map((v) => logX(spec, v));
+var statorX = (spec, v) => spec.statorL0 + Math.log10(v) * spec.statorLw;
+function localAt(stops, pos) {
+  const last = stops.length - 1;
+  const i = clamp2(Math.floor(pos), 0, last - 1);
+  const f = clamp2(pos - i, 0, 1);
+  return stops[i] + (stops[i + 1] - stops[i]) * f;
+}
+function posFromLocal(stops, want) {
+  const last = stops.length - 1;
+  if (want <= stops[0]) return 0;
+  if (want >= stops[last]) return last;
+  for (let i = 0; i < last; i++) {
+    if (want <= stops[i + 1]) {
+      return i + (want - stops[i]) / (stops[i + 1] - stops[i]);
+    }
+  }
+  return last;
+}
+
+// src/components/SlideRuleNav/variants/CursorRule.jsx
+import { forwardRef, useMemo, useRef as useRef3 } from "react";
+
+// src/components/_shared/usePointerDrag.js
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+function usePointerDrag(ref, { onBegin, onMove, onEnd, threshold = 3 } = {}) {
+  const latest = useRef2({ onBegin, onMove, onEnd, threshold });
+  latest.current = { onBegin, onMove, onEnd, threshold };
+  useEffect2(() => {
+    const node = ref.current;
+    if (!node) return void 0;
+    function onPointerDown(event) {
+      if (event.button) return;
+      const startX = event.clientX;
+      const startY = event.clientY;
+      let moved = false;
+      latest.current.onBegin?.(event);
+      function onPointerMove(moveEvent) {
+        if (!moved && Math.hypot(moveEvent.clientX - startX, moveEvent.clientY - startY) < latest.current.threshold) {
+          return;
+        }
+        moved = true;
+        latest.current.onMove?.(moveEvent);
+      }
+      function onPointerUp(upEvent) {
+        window.removeEventListener("pointermove", onPointerMove);
+        window.removeEventListener("pointerup", onPointerUp);
+        window.removeEventListener("pointercancel", onPointerUp);
+        latest.current.onEnd?.(upEvent, !moved);
+      }
+      window.addEventListener("pointermove", onPointerMove);
+      window.addEventListener("pointerup", onPointerUp);
+      window.addEventListener("pointercancel", onPointerUp);
+    }
+    node.addEventListener("pointerdown", onPointerDown);
+    return () => node.removeEventListener("pointerdown", onPointerDown);
+  }, [ref]);
+}
+
+// src/components/SlideRuleNav/variants/CursorRule.jsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CursorRule = forwardRef(function CursorRule2({ spec, count, stations, travel, toViewBoxX }, ref) {
+  const [vbW, vbH] = spec.viewBox;
+  const { x0, railX0, railX1, top, bot, cursorBox } = spec;
+  const pitch = pitchFor(spec, count);
+  const { minorsPerPitch, minorsPerDetent } = minorDivisions(pitch);
+  const cursorRef = useRef3(null);
+  usePointerDrag(cursorRef, {
+    onBegin: () => travel.begin(),
+    onMove: (event) => {
+      const x = toViewBoxX(event.clientX);
+      if (x != null) travel.track((x - x0) / pitch);
+    },
+    onEnd: (_event, wasTap) => {
+      if (!wasTap) travel.release();
+    }
+  });
+  const ticks = useMemo(() => {
+    const out = [];
+    for (let q = 0; q <= (count - 1) * minorsPerPitch; q++) {
+      const isStation = q % minorsPerPitch === 0;
+      const isDetent = q % minorsPerDetent === 0;
+      out.push({
+        x: x0 + q / minorsPerPitch * pitch,
+        kind: isStation ? "major" : isDetent ? "half" : "quarter",
+        down: isStation ? 22 : isDetent ? 13 : 8,
+        up: isStation ? 18 : isDetent ? 11 : 7,
+        station: isStation ? q / minorsPerPitch : null
+      });
+    }
+    return out;
+  }, [count, minorsPerDetent, minorsPerPitch, pitch, x0]);
+  const cursorX = x0 + travel.pos * pitch;
+  const half = cursorBox.w / 2;
+  const cursorTop = cursorBox.y;
+  const cursorBottom = cursorBox.y + cursorBox.h;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      className: "ds-rule__chrome",
+      viewBox: `0 0 ${vbW} ${vbH}`,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            className: "ds-rule__rail",
+            x: railX0,
+            y: top,
+            width: railX1 - railX0,
+            height: bot - top,
+            rx: 2
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            className: "ds-rule__tick ds-rule__tick--quarter",
+            x1: railX0,
+            y1: (top + bot) / 2,
+            x2: railX1,
+            y2: (top + bot) / 2
+          }
+        ),
+        [
+          [railX0 + 10, top + 10],
+          [railX1 - 10, top + 10],
+          [railX0 + 10, bot - 10],
+          [railX1 - 10, bot - 10]
+        ].map(([cx, cy], i) => /* @__PURE__ */ jsx("circle", { className: "ds-rule__rivet", cx, cy, r: 3 }, i)),
+        ticks.map((tick, i) => /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              className: `ds-rule__tick ds-rule__tick--${tick.kind}`,
+              x1: tick.x,
+              y1: top,
+              x2: tick.x,
+              y2: top + tick.down
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              className: `ds-rule__tick ds-rule__tick--${tick.kind}`,
+              x1: tick.x,
+              y1: bot,
+              x2: tick.x,
+              y2: bot - tick.up
+            }
+          )
+        ] }, i)),
+        ticks.filter((tick) => tick.station != null).map((tick) => /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              className: "ds-rule__numeral ds-rule__numeral--accent",
+              x: tick.x,
+              y: top + 34,
+              textAnchor: "middle",
+              children: stations[tick.station]?.value ?? tick.station.toFixed(2)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              className: "ds-rule__numeral",
+              x: tick.x,
+              y: bot - 22,
+              textAnchor: "middle",
+              children: tick.station.toFixed(2)
+            }
+          )
+        ] }, `n${tick.station}`)),
+        /* @__PURE__ */ jsxs(
+          "g",
+          {
+            ref: cursorRef,
+            className: "ds-rule__carriage",
+            transform: `translate(${cursorX},0)`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  className: "ds-rule__glass",
+                  x: -half,
+                  y: cursorTop,
+                  width: cursorBox.w,
+                  height: cursorBox.h,
+                  rx: 2
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  className: "ds-rule__frame",
+                  x: -half,
+                  y: cursorTop,
+                  width: cursorBox.w,
+                  height: cursorBox.h,
+                  rx: 3
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  className: "ds-rule__shoe",
+                  x: -half - 2,
+                  y: cursorTop,
+                  width: cursorBox.w + 4,
+                  height: 7,
+                  rx: 2
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  className: "ds-rule__shoe",
+                  x: -half - 2,
+                  y: cursorBottom - 7,
+                  width: cursorBox.w + 4,
+                  height: 7,
+                  rx: 2
+                }
+              ),
+              [
+                [-24, cursorTop + 3.5],
+                [24, cursorTop + 3.5],
+                [-24, cursorBottom - 3.5],
+                [24, cursorBottom - 3.5]
+              ].map(([cx, cy], i) => /* @__PURE__ */ jsx("circle", { className: "ds-rule__rivet", cx, cy, r: 2.2 }, i)),
+              /* @__PURE__ */ jsx(
+                "line",
+                {
+                  className: "ds-rule__hairline",
+                  x1: 0,
+                  y1: cursorTop,
+                  x2: 0,
+                  y2: cursorBottom
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+
+// src/components/SlideRuleNav/variants/SlideStator.jsx
+import { forwardRef as forwardRef2, useId, useMemo as useMemo2, useRef as useRef4 } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function decadeTicks(mapX) {
+  const bands = [
+    [1, 2, 0.02, 0.1],
+    [2, 5, 0.05, 0.5],
+    [5, 10, 0.1, 1]
+  ];
+  const out = [];
+  for (const [a, b, step, major] of bands) {
+    for (let v = a; v < b + 1e-9; v += step) {
+      const isMajor = Math.abs(v / major - Math.round(v / major)) < 1e-6;
+      const half = Math.abs(v / (major / 2) - Math.round(v / (major / 2))) < 1e-6;
+      out.push({
+        x: mapX(v),
+        v,
+        len: isMajor ? 12 : half ? 8 : 5,
+        kind: isMajor ? "major" : half ? "half" : "quarter",
+        label: isMajor ? String(Math.round(v * 10) / 10) : null
+      });
+    }
+  }
+  return out;
+}
+var SlideStator = forwardRef2(function SlideStator2({ spec, count, stations, travel, toViewBoxX }, ref) {
+  const [vbW, vbH] = spec.viewBox;
+  const { index, slideY, slideH, clip } = spec;
+  const clipId = useId();
+  const stops = useMemo2(() => logStops(spec, count), [spec, count]);
+  const values = slideValues(count);
+  const offset = index - localAt(stops, travel.pos);
+  const grabbed = useRef4(0);
+  const slideRef = useRef4(null);
+  usePointerDrag(slideRef, {
+    onBegin: (event) => {
+      travel.begin();
+      const x = toViewBoxX(event.clientX);
+      grabbed.current = localAt(stops, travel.pos) + (x == null ? 0 : x - index);
+    },
+    onMove: (event) => {
+      const x = toViewBoxX(event.clientX);
+      if (x == null) return;
+      travel.track(posFromLocal(stops, grabbed.current - (x - index)));
+    },
+    onEnd: (_event, wasTap) => {
+      if (!wasTap) travel.release();
+    }
+  });
+  const statorTicks = useMemo2(
+    () => decadeTicks((v) => statorX(spec, v)),
+    [spec]
+  );
+  const detents = useMemo2(() => {
+    const out = [];
+    for (let q = 0; q <= (count - 1) * 4; q++) {
+      if (q % 4 === 0) continue;
+      out.push({ x: localAt(stops, q / 4), half: q % 2 === 0 });
+    }
+    return out;
+  }, [count, stops]);
+  const slideBottom = slideY + slideH;
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      ref,
+      className: "ds-rule__chrome",
+      viewBox: `0 0 ${vbW} ${vbH}`,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx2("defs", { children: /* @__PURE__ */ jsx2("clipPath", { id: clipId, children: /* @__PURE__ */ jsx2("rect", { x: clip[0], y: 0, width: clip[1] - clip[0], height: vbH }) }) }),
+        /* @__PURE__ */ jsx2(
+          "rect",
+          {
+            className: "ds-rule__rail",
+            x: clip[0],
+            y: 6,
+            width: clip[1] - clip[0],
+            height: 40
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "rect",
+          {
+            className: "ds-rule__rail",
+            x: clip[0],
+            y: slideBottom,
+            width: clip[1] - clip[0],
+            height: 40
+          }
+        ),
+        statorTicks.map((tick, i) => /* @__PURE__ */ jsxs2("g", { children: [
+          /* @__PURE__ */ jsx2(
+            "line",
+            {
+              className: `ds-rule__tick ds-rule__tick--${tick.kind}`,
+              x1: tick.x,
+              y1: 46,
+              x2: tick.x,
+              y2: 46 - tick.len
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "line",
+            {
+              className: `ds-rule__tick ds-rule__tick--${tick.kind}`,
+              x1: tick.x,
+              y1: slideBottom,
+              x2: tick.x,
+              y2: slideBottom + tick.len
+            }
+          ),
+          tick.label && /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2(
+              "text",
+              {
+                className: "ds-rule__numeral",
+                x: tick.x,
+                y: 46 - tick.len - 3,
+                textAnchor: "middle",
+                children: tick.label
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "text",
+              {
+                className: "ds-rule__numeral",
+                x: tick.x,
+                y: slideBottom + tick.len + 9,
+                textAnchor: "middle",
+                children: tick.label
+              }
+            )
+          ] })
+        ] }, i)),
+        /* @__PURE__ */ jsx2("text", { className: "ds-rule__caption", x: clip[0] + 6, y: 44, children: "C" }),
+        /* @__PURE__ */ jsx2("text", { className: "ds-rule__caption", x: clip[0] + 6, y: slideBottom + 12, children: "D" }),
+        /* @__PURE__ */ jsx2("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsxs2(
+          "g",
+          {
+            ref: slideRef,
+            className: "ds-rule__carriage",
+            transform: `translate(${offset},0)`,
+            children: [
+              /* @__PURE__ */ jsx2(
+                "rect",
+                {
+                  className: "ds-rule__slide",
+                  x: stops[0] - 400,
+                  y: slideY,
+                  width: stops[stops.length - 1] - stops[0] + 800,
+                  height: slideH
+                }
+              ),
+              detents.map((d, i) => /* @__PURE__ */ jsxs2("g", { children: [
+                /* @__PURE__ */ jsx2(
+                  "line",
+                  {
+                    className: "ds-rule__tick ds-rule__tick--quarter",
+                    x1: d.x,
+                    y1: slideY,
+                    x2: d.x,
+                    y2: slideY + (d.half ? 10 : 6)
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "line",
+                  {
+                    className: "ds-rule__tick ds-rule__tick--quarter",
+                    x1: d.x,
+                    y1: slideBottom,
+                    x2: d.x,
+                    y2: slideBottom - (d.half ? 10 : 6)
+                  }
+                )
+              ] }, i)),
+              stops.map((x, i) => /* @__PURE__ */ jsxs2("g", { children: [
+                /* @__PURE__ */ jsx2(
+                  "line",
+                  {
+                    className: "ds-rule__tick ds-rule__tick--major",
+                    x1: x,
+                    y1: slideY,
+                    x2: x,
+                    y2: slideY + 14
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "line",
+                  {
+                    className: "ds-rule__tick ds-rule__tick--major",
+                    x1: x,
+                    y1: slideBottom,
+                    x2: x,
+                    y2: slideBottom - 14
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "text",
+                  {
+                    className: "ds-rule__numeral ds-rule__numeral--accent",
+                    x,
+                    y: slideBottom - 4,
+                    textAnchor: "middle",
+                    children: stations[i]?.value ?? values[i].toFixed(2)
+                  }
+                )
+              ] }, i))
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs2("g", { className: "ds-rule__window", children: [
+          /* @__PURE__ */ jsx2(
+            "rect",
+            {
+              className: "ds-rule__glass",
+              x: index - 58,
+              y: 2,
+              width: 116,
+              height: vbH - 4,
+              rx: 2
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "rect",
+            {
+              className: "ds-rule__frame",
+              x: index - 58,
+              y: 2,
+              width: 116,
+              height: vbH - 4,
+              rx: 3
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "line",
+            {
+              className: "ds-rule__hairline",
+              x1: index,
+              y1: 2,
+              x2: index,
+              y2: vbH - 2
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "path",
+            {
+              className: "ds-rule__index",
+              d: `M${index - 7},2 L${index + 7},2 L${index},13 Z`
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "path",
+            {
+              className: "ds-rule__index",
+              d: `M${index - 7},${vbH - 2} L${index + 7},${vbH - 2} L${index},${vbH - 13} Z`
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "text",
+            {
+              className: "ds-rule__caption ds-rule__caption--accent",
+              x: index + 64,
+              y: 12,
+              children: "INDEX"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+
+// src/components/SlideRuleNav/variants/VernierCarriage.jsx
+import { forwardRef as forwardRef3, useMemo as useMemo3, useRef as useRef5 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var VernierCarriage = forwardRef3(function VernierCarriage2({ spec, count, stations, travel, toViewBoxX }, ref) {
+  const [vbW, vbH] = spec.viewBox;
+  const { x0, railX0, railX1, railY, railH } = spec;
+  const bot = railY + railH;
+  const pitch = pitchFor(spec, count);
+  const { minor, vdiv, minorsPerPitch, minorsPerDetent } = minorDivisions(pitch);
+  const carriageRef = useRef5(null);
+  usePointerDrag(carriageRef, {
+    onBegin: () => travel.begin(),
+    onMove: (event) => {
+      const x = toViewBoxX(event.clientX);
+      if (x != null) travel.track((x - x0) / pitch);
+    },
+    onEnd: (_event, wasTap) => {
+      if (!wasTap) travel.release();
+    }
+  });
+  const totalMinors = (count - 1) * minorsPerPitch;
+  const rail = useMemo3(() => {
+    let d = `M${railX0},${bot} L${railX0},${railY} `;
+    for (let q = 0; q <= totalMinors; q++) {
+      const tx = x0 + q / minorsPerPitch * pitch;
+      const deep = q % minorsPerDetent === 0;
+      const w = deep ? 7 : 4;
+      const dep = deep ? 9 : 5;
+      d += `L${tx - w},${railY} L${tx},${railY + dep} L${tx + w},${railY} `;
+    }
+    return `${d}L${railX1},${railY} L${railX1},${bot} Z`;
+  }, [bot, minorsPerDetent, minorsPerPitch, pitch, railX0, railX1, railY, totalMinors, x0]);
+  const ticks = useMemo3(() => {
+    const out = [];
+    for (let q = 0; q <= totalMinors; q++) {
+      const tx = x0 + q / minorsPerPitch * pitch;
+      const isStation = q % minorsPerPitch === 0;
+      const isDetent = q % minorsPerDetent === 0;
+      out.push({
+        x: tx,
+        len: isStation ? 20 : isDetent ? 13 : 8,
+        kind: isStation ? "major" : isDetent ? "half" : "quarter",
+        station: isStation ? q / minorsPerPitch : null
+      });
+    }
+    return out;
+  }, [minorsPerDetent, minorsPerPitch, pitch, totalMinors, x0]);
+  const { pos } = travel;
+  const carriageX = x0 + pos * pitch;
+  const lit = coincidence({ pos, count, spec });
+  const frac = Math.abs(pos * minorsPerPitch - Math.round(pos * minorsPerPitch));
+  const pawlY = railY + 2 - frac * 13;
+  const glassW = vdiv * 5.8;
+  const captionLeft = carriageX + glassW / 2 + 60 > railX1;
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      ref,
+      className: "ds-rule__chrome",
+      viewBox: `0 0 ${vbW} ${vbH}`,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx3("path", { className: "ds-rule__rail", d: rail }),
+        /* @__PURE__ */ jsx3("circle", { className: "ds-rule__rivet", cx: railX0 + 10, cy: bot - 8, r: 3 }),
+        /* @__PURE__ */ jsx3("circle", { className: "ds-rule__rivet", cx: railX1 - 10, cy: bot - 8, r: 3 }),
+        ticks.map((tick, i) => /* @__PURE__ */ jsx3(
+          "line",
+          {
+            className: `ds-rule__tick ds-rule__tick--${tick.kind}`,
+            x1: tick.x,
+            y1: bot,
+            x2: tick.x,
+            y2: bot - tick.len
+          },
+          i
+        )),
+        ticks.filter((tick) => tick.station != null).map((tick) => /* @__PURE__ */ jsx3(
+          "text",
+          {
+            className: "ds-rule__numeral ds-rule__numeral--accent",
+            x: tick.x,
+            y: bot - 24,
+            textAnchor: "middle",
+            children: stations[tick.station]?.value ?? tick.station.toFixed(2)
+          },
+          `n${tick.station}`
+        )),
+        /* @__PURE__ */ jsx3("text", { className: "ds-rule__caption", x: railX0 + 6, y: railY - 8, children: "MAIN" }),
+        ticks.filter((tick) => tick.station != null).map((tick) => /* @__PURE__ */ jsx3(
+          "line",
+          {
+            className: "ds-rule__tick ds-rule__tick--quarter",
+            x1: tick.x,
+            y1: railY - 16,
+            x2: tick.x,
+            y2: railY - 9
+          },
+          `l${tick.station}`
+        )),
+        /* @__PURE__ */ jsxs3(
+          "g",
+          {
+            ref: carriageRef,
+            className: "ds-rule__carriage",
+            transform: `translate(${carriageX},0)`,
+            children: [
+              /* @__PURE__ */ jsx3(
+                "rect",
+                {
+                  className: "ds-rule__pawl-spring",
+                  x: -2,
+                  y: pawlY - 24,
+                  width: 4,
+                  height: 11
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "path",
+                {
+                  className: "ds-rule__pawl",
+                  d: "M-6,-11 L6,-11 L0,2 Z",
+                  transform: `translate(0,${pawlY})`
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "rect",
+                {
+                  className: "ds-rule__glass",
+                  x: -glassW / 2,
+                  y: railY - 2,
+                  width: glassW,
+                  height: railH + 50,
+                  rx: 2
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "rect",
+                {
+                  className: "ds-rule__frame",
+                  x: -glassW / 2,
+                  y: railY - 2,
+                  width: glassW,
+                  height: railH + 50,
+                  rx: 3
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "line",
+                {
+                  className: "ds-rule__hairline",
+                  x1: 0,
+                  y1: railY - 2,
+                  x2: 0,
+                  y2: bot + 48
+                }
+              ),
+              Array.from({ length: 6 }, (_, k) => {
+                const vx = (k - 2.5) * vdiv;
+                const on = k === lit.k && lit.lit;
+                return /* @__PURE__ */ jsxs3("g", { children: [
+                  /* @__PURE__ */ jsx3(
+                    "line",
+                    {
+                      className: "ds-rule__vernier-line" + (on ? " ds-rule__vernier-line--lit" : ""),
+                      x1: vx,
+                      y1: bot + 2,
+                      x2: vx,
+                      y2: bot + 18
+                    }
+                  ),
+                  k < 5 && /* @__PURE__ */ jsx3(
+                    "text",
+                    {
+                      className: "ds-rule__numeral",
+                      x: vx,
+                      y: bot + 28,
+                      textAnchor: "middle",
+                      children: k
+                    }
+                  )
+                ] }, k);
+              }),
+              /* @__PURE__ */ jsx3(
+                "text",
+                {
+                  className: "ds-rule__caption",
+                  x: captionLeft ? -glassW / 2 - 6 : glassW / 2 + 6,
+                  y: bot + 18,
+                  textAnchor: captionLeft ? "end" : "start",
+                  children: "VERNIER"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+
+// src/components/SlideRuleNav/SlideRuleNav.jsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var fixedLayout = (spec, count) => ({
+  stationX: (i) => spec.x0 + i * pitchFor(spec, count),
+  offset: 0
+});
+var slideLayout = (spec, count, pos) => {
+  const stops = logStops(spec, count);
+  return {
+    stationX: (i) => stops[i],
+    offset: spec.index - localAt(stops, pos)
+  };
+};
+var VARIANTS = {
+  cursor: { spec: LINEAR.cursor, render: CursorRule, layout: fixedLayout },
+  slide: { spec: LINEAR.slide, render: SlideStator, layout: slideLayout },
+  vernier: {
+    spec: LINEAR.vernier,
+    render: VernierCarriage,
+    layout: fixedLayout
+  }
+};
+var isDev2 = typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+function ActiveProbe({ isActive, index, onRouteActive, children }) {
+  useEffect3(() => {
+    if (isActive) onRouteActive(index);
+  }, [isActive, index, onRouteActive]);
+  return children;
+}
+function SlideRuleNav({
+  variant = "vernier",
+  items = [],
+  value,
+  defaultValue,
+  onChange,
+  readout = false,
+  label = "Main",
+  className = ""
+}) {
+  const resolved = VARIANTS[variant] ? variant : (isDev2 && console.warn(
+    `[SlideRuleNav] variant "${variant}" is not implemented yet; falling back to "vernier".`
+  ), "vernier");
+  const { spec, render: Chrome, layout } = VARIANTS[resolved];
+  const count = validateStationCount(items.length, "SlideRuleNav");
+  const stations = useMemo4(() => items.slice(0, count), [items, count]);
+  const [vbW, vbH] = spec.viewBox;
+  const indexOfId = useCallback2(
+    (id) => {
+      const i = stations.findIndex((item) => item.id === id);
+      return i < 0 ? null : i;
+    },
+    [stations]
+  );
+  const routerMode = stations.some((item) => item.to);
+  const [routeIndex, setRouteIndex] = useState2(null);
+  const syncedOnce = useRef6(false);
+  const controlledIndex = value != null ? indexOfId(value) : routerMode ? routeIndex : void 0;
+  const chromeRef = useRef6(null);
+  const navRef = useRef6(null);
+  const linkRefs = useRef6([]);
+  const stationRefs = useRef6([]);
+  const reducedMotion = useReducedMotion();
+  const handleCommit = useCallback2(
+    (index) => {
+      const item = stations[index];
+      if (!item) return;
+      if (item.to && linkRefs.current[index]) linkRefs.current[index].click();
+      item.onSelect?.();
+      onChange?.(item.id);
+    },
+    [onChange, stations]
+  );
+  const travel = useDetentTravel({
+    count,
+    value: controlledIndex ?? void 0,
+    defaultValue: indexOfId(defaultValue) ?? 0,
+    onChange: handleCommit,
+    settleMs: spec.settleMs
+  });
+  const { goTo } = travel;
+  const onRouteActive = useCallback2(
+    (index) => {
+      setRouteIndex(index);
+      if (!syncedOnce.current) {
+        syncedOnce.current = true;
+        goTo(index, 0);
+      }
+    },
+    [goTo]
+  );
+  const toViewBoxX = useCallback2(
+    (clientX) => {
+      const box = chromeRef.current?.getBoundingClientRect();
+      if (!box?.width) return null;
+      return (clientX - box.left) / box.width * vbW;
+    },
+    [vbW]
+  );
+  const active = travel.station;
+  useEffect3(() => {
+    const nav = navRef.current;
+    if (!nav) return void 0;
+    const centre = (behavior) => {
+      const station = stationRefs.current[active];
+      if (!station || nav.scrollWidth <= nav.clientWidth) return;
+      nav.scrollTo({
+        left: Math.max(0, station.offsetLeft - nav.clientWidth / 2),
+        behavior
+      });
+    };
+    centre(reducedMotion ? "auto" : "smooth");
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(() => centre("auto"));
+    observer.observe(nav);
+    return () => observer.disconnect();
+  }, [active, reducedMotion]);
+  function onKeyDown(event) {
+    if (event.key === "ArrowRight") travel.step(1);
+    else if (event.key === "ArrowLeft") travel.step(-1);
+    else if (event.key === "Home") travel.goTo(0);
+    else if (event.key === "End") travel.goTo(count - 1);
+    else return;
+    event.preventDefault();
+  }
+  const place = layout(spec, count, travel.pos);
+  const linkClass = (isActive) => "ds-rule__link" + (isActive ? " ds-rule__link--active" : "");
+  return /* @__PURE__ */ jsxs4(
+    "nav",
+    {
+      ref: navRef,
+      className: ["ds-rule", `ds-rule--${resolved}`, className].filter(Boolean).join(" "),
+      "aria-label": label,
+      onKeyDown,
+      children: [
+        /* @__PURE__ */ jsxs4("div", { className: "ds-rule__stage", children: [
+          /* @__PURE__ */ jsx4(
+            Chrome,
+            {
+              ref: chromeRef,
+              spec,
+              count,
+              stations,
+              travel,
+              toViewBoxX
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "ul",
+            {
+              className: "ds-rule__stations",
+              style: { transform: `translateX(${pct(place.offset, vbW)})` },
+              children: stations.map((item, index) => /* @__PURE__ */ jsx4(
+                "li",
+                {
+                  ref: (el) => stationRefs.current[index] = el,
+                  className: "ds-rule__station",
+                  style: {
+                    "--station-x": pct(place.stationX(index), vbW),
+                    "--station-y": pct(spec.labelY, vbH)
+                  },
+                  children: item.to ? /* @__PURE__ */ jsx4(
+                    NavLink,
+                    {
+                      to: item.to,
+                      end: item.end,
+                      ref: (el) => linkRefs.current[index] = el,
+                      className: ({ isActive }) => linkClass(isActive),
+                      children: ({ isActive }) => /* @__PURE__ */ jsx4(
+                        ActiveProbe,
+                        {
+                          isActive,
+                          index,
+                          onRouteActive,
+                          children: item.label
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      type: "button",
+                      className: linkClass(index === active),
+                      "aria-current": index === active ? "true" : void 0,
+                      onClick: () => travel.goTo(index),
+                      children: item.label
+                    }
+                  )
+                },
+                item.id
+              ))
+            }
+          )
+        ] }),
+        readout && /* @__PURE__ */ jsxs4("div", { className: "ds-rule__readout", children: [
+          /* @__PURE__ */ jsxs4("span", { "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx4("span", { className: "ds-rule__readout-key", children: "Carriage" }),
+            " ",
+            /* @__PURE__ */ jsx4("span", { className: "ds-rule__readout-val", children: travel.dragging ? "\u2014\u2014" : stations[active]?.label }),
+            " ",
+            /* @__PURE__ */ jsx4("span", { className: "ds-rule__readout-key", children: "Vernier" }),
+            " ",
+            /* @__PURE__ */ jsx4("span", { className: "ds-rule__readout-num", children: travel.pos.toFixed(2) })
+          ] }),
+          /* @__PURE__ */ jsx4("span", { className: "ds-rule__sr-only", "aria-live": "polite", children: travel.dragging || travel.settling ? "" : `${stations[active]?.label ?? ""} selected` })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  SlideRuleNav
+};
+//# sourceMappingURL=chunk-SUYKOWXJ.js.map