@5voltfx/design-system 0.2.0 → 0.3.0

package/dist/chunk-NJ2SBQYA.js

@@ -0,0 +1,1208 @@
+import {
+  useDetentTravel,
+  usePointerDrag,
+  useReducedMotion,
+  validateStationCount
+} from "./chunk-UZW4E2UH.js";
+
+// src/components/DialNav/DialNav.jsx
+import { useCallback, useEffect, useMemo as useMemo4, useRef as useRef4, useState } from "react";
+import { NavLink } from "react-router-dom";
+
+// src/components/DialNav/geometry.js
+var DIAL = Object.freeze({
+  /** C-I — a disc that swings out of the edge and spins to an index. */
+  volvelle: Object.freeze({
+    viewBox: Object.freeze([440, 420]),
+    cx: 210,
+    cy: 210,
+    /** Disc face, and the hairline circle just inside it. */
+    r: 200,
+    rInner: 193,
+    /** Decorative rim ticks run inward from rInner. */
+    rRing: 179,
+    /** Station band: quarter-detent ticks run inward from rBand. */
+    rBand: 177,
+    /** Radial centre of a station label — the pivot its flip turns about. */
+    labelR: 129,
+    /** Logarithmic ring at the hub, for the same reason the original had one. */
+    rLogInner: 62,
+    rLogOuter: 76,
+    rLogPlate: 78,
+    rLogNumeral: 52,
+    rHub: 34,
+    /** Total sweep the stations are spread across. */
+    arc: 216,
+    /** Fixed cursor arm, due east. */
+    arm: Object.freeze({ x: 38, w: 166, h: 38, hairline: 208, index: 218 }),
+    /**
+     * Half the width of the widest station label, including its padding.
+     * Labels are HTML, so this cannot be derived from the SVG — it is
+     * measured, and it is what the extraction distance has to clear.
+     */
+    labelClearance: 60,
+    rest: -376,
+    /*
+     * Far enough out that the hub sits at labelR + labelClearance from the
+     * stage edge, so a label swung to due west still fits. The artboards used
+     * -110, but their labels were SVG text with no padding; HTML labels run
+     * off the edge at that distance.
+     */
+    out: -10,
+    settleMs: 520
+  }),
+  /** C-II — two concentric rings and a swept arm, after the E6B. */
+  concentric: Object.freeze({
+    /* Wider than tall: the fixed index chevron reaches cx + 232. */
+    viewBox: Object.freeze([460, 440]),
+    cx: 220,
+    cy: 220,
+    r: 208,
+    /** Outer ring: sections, spread over a full turn. */
+    rOuter: 200,
+    rOuterInner: 146,
+    labelR: 164,
+    /* Measured: the widest section label renders 85px across at this ring's
+       reduced size, so half of it is 43. */
+    labelClearance: 44,
+    /** Inner ring: the pages of whichever section is indexed. */
+    rInnerPlate: 132,
+    rHubPlate: 58,
+    innerLabelR: 122,
+    innerArc: 135,
+    innerCount: 4,
+    arm: Object.freeze({ x: 50, w: 106, h: 30, tip: 156, point: 172 }),
+    index: Object.freeze({ from: 198, to: 226, chevron: 232, back: 214 }),
+    rest: -396,
+    /* cx - labelR - labelClearance leaves 12px; -6 keeps 6px of margin for a
+       section label swung due west by the ring's full turn. */
+    out: -6,
+    settleMs: 480,
+    innerSettleMs: 380
+  }),
+  /** C-III — a quadrant that blooms out of the edge on a ratchet. */
+  fan: Object.freeze({
+    viewBox: Object.freeze([400, 420]),
+    /** The pivot sits hard against the left edge. */
+    cx: 46,
+    cy: 210,
+    /** Spoke length. With halfAngle 80°, ro·sin(80°) ≈ 193 — the most a
+        420-tall viewBox will take. Do not raise without re-measuring. */
+    r: 192,
+    labelR: 130,
+    labelClearance: 60,
+    arc: 150,
+    wedge: Object.freeze({ halfAngle: 80, ri: 64, ro: 196 }),
+    hub: Object.freeze({ outer: 64, inner: 52 }),
+    /** Ratchet teeth ride just outside the spoke ends. */
+    tooth: Object.freeze({ from: 3, to: 10, lead: 3.4 }),
+    /** How far the clip is held closed at rest, hiding all but the hub. */
+    restClip: 328,
+    bloomStaggerMs: 34,
+    settleMs: 440
+  })
+});
+var polar = (cx, cy, r, deg) => [
+  cx + r * Math.cos(deg * Math.PI / 180),
+  cy + r * Math.sin(deg * Math.PI / 180)
+];
+function uprightFlip(absDeg) {
+  const a = (absDeg % 360 + 360) % 360;
+  return a > 90 && a < 270;
+}
+var pitchFor = (spec, count) => spec.arc / Math.max(1, count - 1);
+var startAngle = (spec) => -spec.arc / 2;
+var stationAngle = (spec, count, pos) => startAngle(spec) + pos * pitchFor(spec, count);
+var rotationFor = (spec, count, pos) => -stationAngle(spec, count, pos);
+function angleDelta(to, from) {
+  let d = to - from;
+  while (d > 180) d -= 360;
+  while (d <= -180) d += 360;
+  return d;
+}
+function logRingTicks() {
+  const bands = [
+    [1, 2, 0.05],
+    [2, 5, 0.1],
+    [5, 10, 0.2]
+  ];
+  const out = [];
+  for (const [from, to, step] of bands) {
+    const steps = Math.round((to - from) / step);
+    for (let k = 0; k < steps; k++) {
+      const v = Math.round((from + k * step) * 100) / 100;
+      out.push({
+        v,
+        angle: Math.log10(v) * 360 - 90,
+        major: Number.isInteger(v)
+      });
+    }
+  }
+  return out;
+}
+var innerPitchFor = (spec, count) => spec.innerArc / Math.max(1, count - 1);
+var innerStartAngle = (spec) => -spec.innerArc / 2;
+var innerAngle = (spec, count, pos) => innerStartAngle(spec) + pos * innerPitchFor(spec, count);
+var toothLead = (spec, detent) => Math.min(spec.tooth.lead, detent * 0.45);
+function wedgePath(spec) {
+  const { cx, cy } = spec;
+  const { halfAngle, ri, ro } = spec.wedge;
+  const [ax, ay] = polar(cx, cy, ri, -halfAngle);
+  const [bx, by] = polar(cx, cy, ro, -halfAngle);
+  const [dx, dy] = polar(cx, cy, ro, halfAngle);
+  const [ex, ey] = polar(cx, cy, ri, halfAngle);
+  return `M${ax},${ay} L${bx},${by} A${ro},${ro} 0 0 1 ${dx},${dy} L${ex},${ey} A${ri},${ri} 0 0 0 ${ax},${ay} Z`;
+}
+
+// src/components/DialNav/variants/Volvelle.jsx
+import { forwardRef, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Volvelle = forwardRef(function Volvelle2({ spec, count, travel, theta, pitch, onDragStateChange }, ref) {
+  const [vbW, vbH] = spec.viewBox;
+  const { cx, cy, arm } = spec;
+  const a0 = startAngle(spec);
+  const discRef = useRef(null);
+  const grab = useRef({ angle: 0, pos: 0 });
+  const angleAt = (event) => {
+    const box = ref.current?.getBoundingClientRect();
+    if (!box?.width) return null;
+    const scale = vbW / box.width;
+    const x = (event.clientX - box.left) * scale - cx;
+    const y = (event.clientY - box.top) * scale - cy;
+    return Math.atan2(y, x) * 180 / Math.PI;
+  };
+  usePointerDrag(discRef, {
+    onBegin: (event) => {
+      const a = angleAt(event);
+      if (a == null) return;
+      grab.current = { angle: a, pos: travel.pos };
+      travel.begin();
+      onDragStateChange?.(true);
+    },
+    onMove: (event) => {
+      const a = angleAt(event);
+      if (a == null) return;
+      travel.track(grab.current.pos - angleDelta(a, grab.current.angle) / pitch);
+    },
+    onEnd: (_event, wasTap) => {
+      if (!wasTap) travel.release();
+      onDragStateChange?.(false);
+    }
+  });
+  const rim = useMemo(() => {
+    const out = [];
+    for (let a = 0; a < 360; a += 2) {
+      const len = a % 10 === 0 ? 14 : a % 5 === 0 ? 9 : 5;
+      out.push({
+        a,
+        len,
+        faint: a % 10 !== 0
+      });
+    }
+    return out;
+  }, []);
+  const band = useMemo(() => {
+    const out = [];
+    for (let q = 0; q <= (count - 1) * 4; q++) {
+      const major = q % 4 === 0;
+      const half = q % 2 === 0;
+      out.push({
+        a: a0 + q / 4 * pitch,
+        len: major ? 22 : half ? 12 : 7,
+        faint: !major,
+        station: major
+      });
+    }
+    return out;
+  }, [a0, count, pitch]);
+  const logTicks = useMemo(logRingTicks, []);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      className: "ds-dial__chrome",
+      viewBox: `0 0 ${vbW} ${vbH}`,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx("circle", { className: "ds-dial__face", cx, cy, r: spec.r }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: "ds-dial__hairline-ring",
+            cx,
+            cy,
+            r: spec.rInner
+          }
+        ),
+        /* @__PURE__ */ jsxs("g", { ref: discRef, className: "ds-dial__disc", children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: "ds-dial__grab",
+              cx,
+              cy,
+              r: spec.rInner
+            }
+          ),
+          /* @__PURE__ */ jsxs("g", { transform: `rotate(${theta} ${cx} ${cy})`, children: [
+            rim.map((tick, i) => {
+              const [x1, y1] = polar(cx, cy, spec.rInner, tick.a);
+              const [x2, y2] = polar(cx, cy, spec.rInner - tick.len, tick.a);
+              return /* @__PURE__ */ jsx(
+                "line",
+                {
+                  className: "ds-dial__tick" + (tick.faint ? " ds-dial__tick--faint" : ""),
+                  x1,
+                  y1,
+                  x2,
+                  y2
+                },
+                i
+              );
+            }),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: "ds-dial__hairline-ring",
+                cx,
+                cy,
+                r: spec.rRing
+              }
+            ),
+            band.map((tick, i) => {
+              const [x1, y1] = polar(cx, cy, spec.rBand, tick.a);
+              const [x2, y2] = polar(cx, cy, spec.rBand - tick.len, tick.a);
+              return /* @__PURE__ */ jsx(
+                "line",
+                {
+                  className: "ds-dial__tick" + (tick.faint ? " ds-dial__tick--faint" : "") + (tick.station ? " ds-dial__tick--station" : ""),
+                  x1,
+                  y1,
+                  x2,
+                  y2
+                },
+                `b${i}`
+              );
+            }),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: "ds-dial__log-plate",
+                cx,
+                cy,
+                r: spec.rLogPlate
+              }
+            ),
+            logTicks.map((tick, i) => {
+              const outer = spec.rLogInner + (tick.major ? 14 : 6);
+              const [x1, y1] = polar(cx, cy, spec.rLogInner, tick.angle);
+              const [x2, y2] = polar(cx, cy, outer, tick.angle);
+              const [tx, ty] = polar(cx, cy, spec.rLogNumeral, tick.angle);
+              return /* @__PURE__ */ jsxs("g", { children: [
+                /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    className: "ds-dial__tick" + (tick.major ? "" : " ds-dial__tick--faint"),
+                    x1,
+                    y1,
+                    x2,
+                    y2
+                  }
+                ),
+                tick.major && /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    className: "ds-dial__numeral",
+                    x: tx,
+                    y: ty + 3,
+                    textAnchor: "middle",
+                    transform: `rotate(${tick.angle + 90 + (uprightFlip(tick.angle + 90) ? 180 : 0)} ${tx} ${ty})`,
+                    children: Math.round(tick.v)
+                  }
+                )
+              ] }, `l${i}`);
+            })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("circle", { className: "ds-dial__hub", cx, cy, r: spec.rHub }),
+        /* @__PURE__ */ jsx("circle", { className: "ds-dial__rivet", cx, cy, r: 9 }),
+        /* @__PURE__ */ jsx("circle", { className: "ds-dial__rivet-hi", cx, cy, r: 4 }),
+        /* @__PURE__ */ jsxs("g", { className: "ds-dial__arm", children: [
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              className: "ds-dial__glass",
+              x: cx + arm.x,
+              y: cy - arm.h / 2,
+              width: arm.w,
+              height: arm.h,
+              rx: 2
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              className: "ds-dial__frame-line",
+              x: cx + arm.x,
+              y: cy - arm.h / 2,
+              width: arm.w,
+              height: arm.h,
+              rx: 3
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              className: "ds-dial__hairline",
+              x1: cx + arm.x,
+              y1: cy,
+              x2: cx + arm.hairline,
+              y2: cy
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: "ds-dial__index",
+              d: `M${cx + arm.index},${cy - 11} L${cx + arm.index},${cy + 11} L${cx + arm.index - 18},${cy} Z`
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+
+// src/components/DialNav/variants/Concentric.jsx
+import { forwardRef as forwardRef2, useMemo as useMemo2, useRef as useRef2 } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Concentric = forwardRef2(function Concentric2({
+  spec,
+  count,
+  travel,
+  theta,
+  pitch,
+  onDragStateChange,
+  pages,
+  innerTravel,
+  renderStation,
+  renderPage
+}, ref) {
+  const [vbW, vbH] = spec.viewBox;
+  const { cx, cy, arm, index } = spec;
+  const ringRef = useRef2(null);
+  const armRef = useRef2(null);
+  const grabRing = useRef2({ angle: 0, pos: 0 });
+  const grabArm = useRef2({ angle: 0, pos: 0 });
+  const angleAt = (event) => {
+    const box = ref.current?.getBoundingClientRect();
+    if (!box?.width) return null;
+    const scale = vbW / box.width;
+    const x = (event.clientX - box.left) * scale - cx;
+    const y = (event.clientY - box.top) * scale - cy;
+    return Math.atan2(y, x) * 180 / Math.PI;
+  };
+  usePointerDrag(ringRef, {
+    onBegin: (event) => {
+      const a = angleAt(event);
+      if (a == null) return;
+      grabRing.current = { angle: a, pos: travel.pos };
+      travel.begin();
+      onDragStateChange?.(true);
+    },
+    onMove: (event) => {
+      const a = angleAt(event);
+      if (a == null) return;
+      travel.track(
+        grabRing.current.pos - angleDelta(a, grabRing.current.angle) / pitch
+      );
+    },
+    onEnd: (_e, wasTap) => {
+      if (!wasTap) travel.release();
+      onDragStateChange?.(false);
+    }
+  });
+  const innerPitch = innerPitchFor(spec, pages.length);
+  usePointerDrag(armRef, {
+    onBegin: (event) => {
+      const a = angleAt(event);
+      if (a == null) return;
+      grabArm.current = { angle: a, pos: innerTravel.pos };
+      innerTravel.begin();
+      onDragStateChange?.(true);
+    },
+    onMove: (event) => {
+      const a = angleAt(event);
+      if (a == null) return;
+      innerTravel.track(
+        grabArm.current.pos + angleDelta(a, grabArm.current.angle) / innerPitch
+      );
+    },
+    onEnd: (_e, wasTap) => {
+      if (!wasTap) innerTravel.release();
+      onDragStateChange?.(false);
+    }
+  });
+  const ringTicks = useMemo2(() => {
+    const out = [];
+    for (let q = 0; q < 96; q++) {
+      const a = q * 3.75;
+      out.push({
+        a,
+        len: q % 16 === 0 ? 18 : q % 4 === 0 ? 10 : 5,
+        faint: q % 16 !== 0
+      });
+    }
+    return out;
+  }, []);
+  const innerTicks = useMemo2(() => {
+    const out = [];
+    for (let q = 0; q <= (pages.length - 1) * 4; q++) {
+      const major = q % 4 === 0;
+      out.push({
+        a: innerAngle(spec, pages.length, q / 4),
+        len: major ? 16 : q % 2 === 0 ? 9 : 5,
+        major
+      });
+    }
+    return out;
+  }, [pages.length, spec]);
+  const armAngle = innerAngle(spec, pages.length, innerTravel.pos);
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(
+      "svg",
+      {
+        ref,
+        className: "ds-dial__chrome",
+        viewBox: `0 0 ${vbW} ${vbH}`,
+        "aria-hidden": "true",
+        focusable: "false",
+        children: [
+          /* @__PURE__ */ jsx2("circle", { className: "ds-dial__face", cx, cy, r: spec.r }),
+          /* @__PURE__ */ jsxs2("g", { ref: ringRef, className: "ds-dial__disc", children: [
+            /* @__PURE__ */ jsx2(
+              "circle",
+              {
+                className: "ds-dial__grab",
+                cx,
+                cy,
+                r: spec.rOuter
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "circle",
+              {
+                className: "ds-dial__grab-hole",
+                cx,
+                cy,
+                r: spec.rOuterInner
+              }
+            ),
+            /* @__PURE__ */ jsxs2("g", { transform: `rotate(${theta} ${cx} ${cy})`, children: [
+              /* @__PURE__ */ jsx2(
+                "circle",
+                {
+                  className: "ds-dial__hairline-ring",
+                  cx,
+                  cy,
+                  r: spec.rOuter
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "circle",
+                {
+                  className: "ds-dial__hairline-ring",
+                  cx,
+                  cy,
+                  r: spec.rOuterInner
+                }
+              ),
+              ringTicks.map((tick, i) => {
+                const [x1, y1] = polar(cx, cy, spec.rOuter, tick.a);
+                const [x2, y2] = polar(cx, cy, spec.rOuter - tick.len, tick.a);
+                return /* @__PURE__ */ jsx2(
+                  "line",
+                  {
+                    className: "ds-dial__tick" + (tick.faint ? " ds-dial__tick--faint" : ""),
+                    x1,
+                    y1,
+                    x2,
+                    y2
+                  },
+                  i
+                );
+              })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx2(
+            "circle",
+            {
+              className: "ds-dial__log-plate",
+              cx,
+              cy,
+              r: spec.rInnerPlate
+            }
+          ),
+          innerTicks.map((tick, i) => {
+            const [x1, y1] = polar(cx, cy, spec.rInnerPlate, tick.a);
+            const [x2, y2] = polar(cx, cy, spec.rInnerPlate - tick.len, tick.a);
+            return /* @__PURE__ */ jsx2(
+              "line",
+              {
+                className: "ds-dial__tick" + (tick.major ? " ds-dial__tick--station" : " ds-dial__tick--faint"),
+                x1,
+                y1,
+                x2,
+                y2
+              },
+              `i${i}`
+            );
+          }),
+          /* @__PURE__ */ jsx2(
+            "circle",
+            {
+              className: "ds-dial__hub",
+              cx,
+              cy,
+              r: spec.rHubPlate
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            "g",
+            {
+              ref: armRef,
+              className: "ds-dial__arm-sweep",
+              transform: `rotate(${armAngle} ${cx} ${cy})`,
+              children: [
+                /* @__PURE__ */ jsx2(
+                  "rect",
+                  {
+                    className: "ds-dial__glass",
+                    x: cx + arm.x,
+                    y: cy - arm.h / 2,
+                    width: arm.w,
+                    height: arm.h,
+                    rx: 2
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "line",
+                  {
+                    className: "ds-dial__brass-rail",
+                    x1: cx + arm.x,
+                    y1: cy - arm.h / 2,
+                    x2: cx + arm.tip,
+                    y2: cy - arm.h / 2
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "line",
+                  {
+                    className: "ds-dial__brass-rail",
+                    x1: cx + arm.x,
+                    y1: cy + arm.h / 2,
+                    x2: cx + arm.tip,
+                    y2: cy + arm.h / 2
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "line",
+                  {
+                    className: "ds-dial__hairline",
+                    x1: cx + arm.x,
+                    y1: cy,
+                    x2: cx + arm.tip,
+                    y2: cy
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "path",
+                  {
+                    className: "ds-dial__brass-point",
+                    d: `M${cx + arm.tip},${cy - 9} L${cx + arm.point},${cy} L${cx + arm.tip},${cy + 9} Z`
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx2("circle", { className: "ds-dial__rivet", cx, cy, r: 11 }),
+          /* @__PURE__ */ jsx2("circle", { className: "ds-dial__rivet-hi", cx, cy, r: 5 }),
+          /* @__PURE__ */ jsxs2("g", { className: "ds-dial__arm", children: [
+            /* @__PURE__ */ jsx2(
+              "line",
+              {
+                className: "ds-dial__hairline",
+                x1: cx + index.from,
+                y1: cy,
+                x2: cx + index.to,
+                y2: cy
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "path",
+              {
+                className: "ds-dial__index",
+                d: `M${cx + index.chevron},${cy - 12} L${cx + index.chevron},${cy + 12} L${cx + index.back},${cy} Z`
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2("ul", { className: "ds-dial__stations", style: { transform: `rotate(${theta}deg)` }, children: Array.from({ length: count }, (_, i) => {
+      const a = i * pitch;
+      return /* @__PURE__ */ jsx2(
+        "li",
+        {
+          className: "ds-dial__station ds-dial__station--outer",
+          style: {
+            "--a": `${a}deg`,
+            "--r": `${spec.labelR}px`,
+            "--flip": uprightFlip(a + theta) ? "180deg" : "0deg"
+          },
+          children: renderStation(i)
+        },
+        i
+      );
+    }) }),
+    /* @__PURE__ */ jsx2("ul", { className: "ds-dial__stations ds-dial__stations--inner", children: pages.map((page, k) => {
+      const a = innerAngle(spec, pages.length, k);
+      return /* @__PURE__ */ jsx2(
+        "li",
+        {
+          className: "ds-dial__station",
+          style: {
+            "--a": `${a}deg`,
+            "--r": `${spec.innerLabelR}px`,
+            "--flip": "0deg"
+          },
+          children: renderPage(page, k)
+        },
+        page.id
+      );
+    }) })
+  ] });
+});
+
+// src/components/DialNav/variants/RatchetFan.jsx
+import { forwardRef as forwardRef3, useMemo as useMemo3, useRef as useRef3 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var RatchetFan = forwardRef3(function RatchetFan2({ spec, count, travel, pitch, onDragStateChange }, ref) {
+  const [vbW, vbH] = spec.viewBox;
+  const { cx, cy, r, hub } = spec;
+  const a0 = startAngle(spec);
+  const detent = pitch / 4;
+  const lead = toothLead(spec, detent);
+  const pawlRef = useRef3(null);
+  const grab = useRef3({ angle: 0, pos: 0 });
+  const angleAt = (event) => {
+    const box = ref.current?.getBoundingClientRect();
+    if (!box?.width) return null;
+    const scale = vbW / box.width;
+    const x = (event.clientX - box.left) * scale - cx;
+    const y = (event.clientY - box.top) * scale - cy;
+    return Math.atan2(y, x) * 180 / Math.PI;
+  };
+  usePointerDrag(pawlRef, {
+    onBegin: (event) => {
+      const a = angleAt(event);
+      if (a == null) return;
+      grab.current = { angle: a, pos: travel.pos };
+      travel.begin();
+      onDragStateChange?.(true);
+    },
+    onMove: (event) => {
+      const a = angleAt(event);
+      if (a == null) return;
+      travel.track(grab.current.pos + angleDelta(a, grab.current.angle) / pitch);
+    },
+    onEnd: (_event, wasTap) => {
+      if (!wasTap) travel.release();
+      onDragStateChange?.(false);
+    }
+  });
+  const ratchet = useMemo3(() => {
+    let d = "";
+    for (let q = 0; q <= (count - 1) * 4; q++) {
+      const a = a0 + q / 4 * pitch;
+      const [x1, y1] = polar(cx, cy, r + spec.tooth.from, a);
+      const [x2, y2] = polar(cx, cy, r + spec.tooth.to, a + lead);
+      d += `${q ? "L" : "M"}${x1},${y1} L${x2},${y2} `;
+    }
+    return d;
+  }, [a0, count, cx, cy, lead, pitch, r, spec.tooth.from, spec.tooth.to]);
+  const detents = useMemo3(() => {
+    const out = [];
+    for (let q = 0; q <= (count - 1) * 4; q++) {
+      const major = q % 4 === 0;
+      const half = q % 2 === 0;
+      out.push({
+        a: a0 + q / 4 * pitch,
+        len: major ? 22 : half ? 11 : 6,
+        major
+      });
+    }
+    return out;
+  }, [a0, count, pitch]);
+  const [arcX0, arcY0] = polar(cx, cy, r, a0);
+  const [arcX1, arcY1] = polar(cx, cy, r, stationAngle(spec, count, count - 1));
+  const pawlAngle = stationAngle(spec, count, travel.pos);
+  const frac = Math.abs(travel.pos * 4 - Math.round(travel.pos * 4));
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      ref,
+      className: "ds-dial__chrome",
+      viewBox: `0 0 ${vbW} ${vbH}`,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx3("circle", { className: "ds-dial__log-plate", cx, cy, r: hub.outer }),
+        /* @__PURE__ */ jsx3("circle", { className: "ds-dial__hub", cx, cy, r: hub.inner }),
+        /* @__PURE__ */ jsxs3("g", { className: "ds-dial__fanchrome", children: [
+          /* @__PURE__ */ jsx3("path", { className: "ds-dial__wedge", d: wedgePath(spec) }),
+          /* @__PURE__ */ jsx3("path", { className: "ds-dial__ratchet", d: ratchet }),
+          /* @__PURE__ */ jsx3(
+            "path",
+            {
+              className: "ds-dial__hairline-ring",
+              d: `M${arcX0},${arcY0} A${r},${r} 0 0 1 ${arcX1},${arcY1}`
+            }
+          ),
+          detents.map((tick, i) => {
+            const [x1, y1] = polar(cx, cy, r - tick.len, tick.a);
+            const [x2, y2] = polar(cx, cy, r, tick.a);
+            return /* @__PURE__ */ jsx3(
+              "line",
+              {
+                className: "ds-dial__tick" + (tick.major ? " ds-dial__tick--station" : " ds-dial__tick--faint"),
+                x1,
+                y1,
+                x2,
+                y2
+              },
+              i
+            );
+          })
+        ] }),
+        Array.from({ length: count }, (_, i) => {
+          const a = stationAngle(spec, count, i);
+          return /* @__PURE__ */ jsx3("g", { transform: `rotate(${a} ${cx} ${cy})`, children: /* @__PURE__ */ jsx3(
+            "g",
+            {
+              className: "ds-dial__spoke",
+              style: {
+                transformOrigin: `${cx}px ${cy}px`,
+                transitionDelay: `${i * spec.bloomStaggerMs}ms`
+              },
+              children: /* @__PURE__ */ jsx3(
+                "line",
+                {
+                  className: "ds-dial__tick ds-dial__tick--faint",
+                  x1: cx + hub.outer - 6,
+                  y1: cy,
+                  x2: cx + r - 8,
+                  y2: cy
+                }
+              )
+            }
+          ) }, i);
+        }),
+        /* @__PURE__ */ jsxs3(
+          "g",
+          {
+            ref: pawlRef,
+            className: "ds-dial__pawl",
+            transform: `rotate(${pawlAngle} ${cx} ${cy})`,
+            children: [
+              /* @__PURE__ */ jsx3(
+                "rect",
+                {
+                  className: "ds-dial__glass",
+                  x: cx + 50,
+                  y: cy - 16,
+                  width: r - 38,
+                  height: 32,
+                  rx: 2
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "rect",
+                {
+                  className: "ds-dial__frame-line",
+                  x: cx + 50,
+                  y: cy - 16,
+                  width: r - 38,
+                  height: 32,
+                  rx: 3
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "line",
+                {
+                  className: "ds-dial__hairline",
+                  x1: cx + 50,
+                  y1: cy,
+                  x2: cx + r + 2,
+                  y2: cy
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "path",
+                {
+                  className: "ds-dial__index",
+                  d: `M${cx + r + 2},${cy - 8} L${cx + r + 16},${cy} L${cx + r + 2},${cy + 8} Z`,
+                  transform: `translate(${-frac * 5} 0)`
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3("circle", { className: "ds-dial__rivet", cx, cy, r: 9 }),
+        /* @__PURE__ */ jsx3(
+          "text",
+          {
+            className: "ds-dial__caption",
+            x: cx,
+            y: cy + 30,
+            textAnchor: "middle",
+            children: "PIVOT"
+          }
+        )
+      ]
+    }
+  );
+});
+
+// src/components/DialNav/DialNav.jsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var VARIANTS = {
+  volvelle: {
+    spec: DIAL.volvelle,
+    render: Volvelle,
+    layout: (spec, count, pos) => {
+      const theta = rotationFor(spec, count, pos);
+      return {
+        railRotation: theta,
+        angleOf: (i) => stationAngle(spec, count, i),
+        flipOf: (i) => uprightFlip(stationAngle(spec, count, i) + theta) ? 180 : 0
+      };
+    }
+  },
+  concentric: {
+    spec: DIAL.concentric,
+    render: Concentric,
+    ownsStations: true,
+    twoLevel: true,
+    layout: (spec, count, pos) => ({
+      railRotation: -(pos * (360 / Math.max(1, count))),
+      angleOf: () => 0,
+      flipOf: () => 0
+    })
+  },
+  fan: {
+    spec: DIAL.fan,
+    render: RatchetFan,
+    layout: (spec, count, pos, station) => ({
+      railRotation: 0,
+      angleOf: (i) => stationAngle(spec, count, i),
+      // The indexed spoke's label rights itself; the rest stay radial.
+      flipOf: (i) => i === station ? -stationAngle(spec, count, i) : 0,
+      bloom: true
+    })
+  }
+};
+var isDev = typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+function ActiveProbe({ isActive, index, onRouteActive, children }) {
+  useEffect(() => {
+    if (isActive) onRouteActive(index);
+  }, [isActive, index, onRouteActive]);
+  return children;
+}
+function DialNav({
+  variant = "volvelle",
+  items = [],
+  value,
+  defaultValue,
+  onChange,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  label = "Sections",
+  className = ""
+}) {
+  const resolved = VARIANTS[variant] ? variant : (isDev && console.warn(
+    `[DialNav] variant "${variant}" is not implemented yet; falling back to "volvelle".`
+  ), "volvelle");
+  const { spec, render: Chrome, layout, ownsStations, twoLevel } = VARIANTS[resolved];
+  const count = validateStationCount(items.length, "DialNav");
+  const stations = useMemo4(() => items.slice(0, count), [items, count]);
+  const [vbW, vbH] = spec.viewBox;
+  const indexOfId = useCallback(
+    (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] = useState(null);
+  const syncedOnce = useRef4(false);
+  const controlledIndex = value != null ? indexOfId(value) : routerMode ? routeIndex : void 0;
+  const stageRef = useRef4(null);
+  const chromeRef = useRef4(null);
+  const linkRefs = useRef4([]);
+  const pageRefs = useRef4([]);
+  const draggingRef = useRef4(false);
+  const leftDuringDragRef = useRef4(false);
+  const handleCommit = useCallback(
+    (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 pages = twoLevel ? stations[travel.station]?.pages ?? [] : [];
+  const pageCount = Math.max(1, pages.length);
+  const [pageIndex, setPageIndex] = useState(0);
+  const handlePageCommit = useCallback(
+    (k) => {
+      const page = pages[k];
+      if (!page) return;
+      setPageIndex(k);
+      if (page.to && pageRefs.current[k]) pageRefs.current[k].click();
+      page.onSelect?.();
+      onChange?.(page.id);
+    },
+    [onChange, pages]
+  );
+  const innerTravel = useDetentTravel({
+    count: pageCount,
+    defaultValue: 0,
+    onChange: handlePageCommit,
+    settleMs: spec.innerSettleMs ?? spec.settleMs
+  });
+  const { goTo: innerGoTo } = innerTravel;
+  const sectionKey = twoLevel ? stations[travel.station]?.id : null;
+  useEffect(() => {
+    if (twoLevel) innerGoTo(0, 0);
+  }, [sectionKey, twoLevel, innerGoTo]);
+  const { goTo } = travel;
+  const onRouteActive = useCallback(
+    (index) => {
+      setRouteIndex(index);
+      if (!syncedOnce.current) {
+        syncedOnce.current = true;
+        goTo(index, 0);
+      }
+    },
+    [goTo]
+  );
+  const isControlledOpen = expanded != null;
+  const [internalOpen, setInternalOpen] = useState(defaultExpanded);
+  const open = isControlledOpen ? expanded : internalOpen;
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlledOpen) setInternalOpen(next);
+      onExpandedChange?.(next);
+    },
+    [isControlledOpen, onExpandedChange]
+  );
+  const closeIfIdle = useCallback(() => {
+    const stage = stageRef.current;
+    if (stage && stage.contains(document.activeElement)) return;
+    if (draggingRef.current) {
+      leftDuringDragRef.current = true;
+      return;
+    }
+    setOpen(false);
+  }, [setOpen]);
+  const onDragStateChange = useCallback(
+    (isDragging) => {
+      draggingRef.current = isDragging;
+      if (isDragging) {
+        leftDuringDragRef.current = false;
+        return;
+      }
+      if (leftDuringDragRef.current) {
+        leftDuringDragRef.current = false;
+        closeIfIdle();
+      }
+    },
+    [closeIfIdle]
+  );
+  const reducedMotion = useReducedMotion();
+  const pitch = twoLevel ? 360 / Math.max(1, count) : pitchFor(spec, count);
+  const active = twoLevel ? (travel.station % count + count) % count : travel.station;
+  const place = layout(spec, count, travel.pos, active);
+  const theta = place.railRotation;
+  function onKeyDown(event) {
+    const { key } = event;
+    if (key === "ArrowDown" || key === "ArrowRight") travel.step(1);
+    else if (key === "ArrowUp" || key === "ArrowLeft") travel.step(-1);
+    else if (key === "Home") travel.goTo(0);
+    else if (key === "End") travel.goTo(count - 1);
+    else if (key === "Escape") {
+      setOpen(false);
+      return;
+    } else return;
+    event.preventDefault();
+  }
+  const linkClass = (isActive) => "ds-dial__link" + (isActive ? " ds-dial__link--active" : "");
+  const station = (item, i, { refs, isActive, onPick, extraClass = "" }) => item.to ? /* @__PURE__ */ jsx4(
+    NavLink,
+    {
+      to: item.to,
+      end: item.end,
+      ref: (el) => refs.current[i] = el,
+      className: ({ isActive: routerActive }) => linkClass(routerActive) + extraClass,
+      children: ({ isActive: routerActive }) => /* @__PURE__ */ jsx4(
+        ActiveProbe,
+        {
+          isActive: routerActive,
+          index: i,
+          onRouteActive,
+          children: item.label
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsx4(
+    "button",
+    {
+      type: "button",
+      className: linkClass(isActive) + extraClass,
+      "aria-current": isActive ? "true" : void 0,
+      onClick: onPick,
+      children: item.label
+    }
+  );
+  const renderStation = (i) => station(stations[i], i, {
+    refs: linkRefs,
+    isActive: i === active,
+    onPick: () => travel.goTo(i)
+  });
+  const renderPage = (page, k) => station(page, k, {
+    refs: pageRefs,
+    isActive: k === pageIndex,
+    onPick: () => innerTravel.goTo(k),
+    extraClass: " ds-dial__link--page"
+  });
+  return /* @__PURE__ */ jsx4(
+    "nav",
+    {
+      className: [
+        "ds-dial",
+        `ds-dial--${resolved}`,
+        open ? "is-out" : "",
+        className
+      ].filter(Boolean).join(" "),
+      "aria-label": label,
+      onKeyDown,
+      children: /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: "ds-dial__stage",
+          ref: stageRef,
+          onPointerLeave: closeIfIdle,
+          onFocus: () => setOpen(true),
+          style: {
+            "--dial-w": `${vbW}px`,
+            "--dial-h": `${vbH}px`,
+            "--dial-cx": `${spec.cx}px`,
+            "--dial-cy": `${spec.cy}px`
+          },
+          children: [
+            /* @__PURE__ */ jsx4("span", { className: "ds-dial__peek", "aria-hidden": "true", children: stations[active]?.label }),
+            /* @__PURE__ */ jsx4("div", { className: "ds-dial__frame", children: /* @__PURE__ */ jsxs4(
+              "div",
+              {
+                className: "ds-dial__dock",
+                style: spec.restClip != null ? {
+                  // C-III pivots at the edge, so it is unveiled by opening a
+                  // clip rather than by sliding sideways.
+                  clipPath: open ? "inset(0 0 0 0)" : `inset(0 ${spec.restClip}px 0 0)`
+                } : {
+                  transform: `translateX(${open ? spec.out : spec.rest}px)`
+                },
+                children: [
+                  /* @__PURE__ */ jsx4(
+                    Chrome,
+                    {
+                      ref: chromeRef,
+                      spec,
+                      count,
+                      travel,
+                      theta,
+                      pitch,
+                      onDragStateChange,
+                      reducedMotion,
+                      pages,
+                      innerTravel,
+                      renderStation,
+                      renderPage
+                    }
+                  ),
+                  !ownsStations && /* @__PURE__ */ jsx4(
+                    "ul",
+                    {
+                      className: "ds-dial__stations",
+                      style: { transform: `rotate(${theta}deg)` },
+                      children: stations.map((item, index) => /* @__PURE__ */ jsx4(
+                        "li",
+                        {
+                          className: "ds-dial__station",
+                          style: {
+                            "--a": `${place.angleOf(index)}deg`,
+                            "--r": `${spec.labelR}px`,
+                            "--flip": `${place.flipOf(index)}deg`,
+                            "--bloom-delay": place.bloom ? `${index * spec.bloomStaggerMs}ms` : "0ms"
+                          },
+                          children: renderStation(index)
+                        },
+                        item.id
+                      ))
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                className: "ds-dial__hotzone",
+                "aria-expanded": open,
+                "aria-label": open ? `Close ${label}` : `Open ${label}`,
+                onPointerEnter: (e) => {
+                  if (e.pointerType === "mouse") setOpen(true);
+                },
+                onPointerDown: (e) => {
+                  if (e.pointerType !== "mouse") setOpen(!open);
+                },
+                onClick: (e) => {
+                  if (!e.detail) setOpen(!open);
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  DialNav
+};
+//# sourceMappingURL=chunk-NJ2SBQYA.js.map