@5voltfx/design-system 0.2.0 → 0.3.0

package/dist/components/DialNav/geometry.d.ts

@@ -0,0 +1,159 @@
+/**
+ * Whether a label riding the rim at this absolute angle would read upside
+ * down, and so must flip about its own radial centre.
+ *
+ * @param {number} absDeg
+ * @returns {boolean}
+ */
+export function uprightFlip(absDeg: number): boolean;
+/**
+ * Shortest signed difference between two angles, in degrees.
+ *
+ * Dragging a disc crosses the ±180° seam constantly; without normalising, a
+ * pointer moving a few degrees past the seam reads as a 350° jump.
+ *
+ * @param {number} to
+ * @param {number} from
+ * @returns {number} Degrees in (-180, 180].
+ */
+export function angleDelta(to: number, from: number): number;
+/**
+ * Ticks for a log10 decade around the hub, at slide-rule gradations.
+ *
+ * Each band is walked with an integer counter rather than by accumulating a
+ * float step: accumulating drifts off the gradations, and because the band
+ * boundaries are themselves tested against the drifting value, the 5–10 band
+ * starts half a step late and never lands on 6, 7, 8 or 9.
+ */
+export function logRingTicks(): {
+    v: number;
+    angle: number;
+    major: boolean;
+}[];
+/**
+ * The fan's backing plate: an annular sector, not a pie slice. Its inner
+ * radius stops at the hub so the rest-state hint survives underneath it.
+ *
+ * @param {object} spec
+ * @returns {string} SVG path data.
+ */
+export function wedgePath(spec: object): string;
+export const DIAL: Readonly<{
+    /** C-I — a disc that swings out of the edge and spins to an index. */
+    volvelle: Readonly<{
+        viewBox: readonly number[];
+        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: Readonly<{
+            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;
+        out: -10;
+        settleMs: 520;
+    }>;
+    /** C-II — two concentric rings and a swept arm, after the E6B. */
+    concentric: Readonly<{
+        viewBox: readonly number[];
+        cx: 220;
+        cy: 220;
+        r: 208;
+        /** Outer ring: sections, spread over a full turn. */
+        rOuter: 200;
+        rOuterInner: 146;
+        labelR: 164;
+        labelClearance: 44;
+        /** Inner ring: the pages of whichever section is indexed. */
+        rInnerPlate: 132;
+        rHubPlate: 58;
+        innerLabelR: 122;
+        innerArc: 135;
+        innerCount: 4;
+        arm: Readonly<{
+            x: 50;
+            w: 106;
+            h: 30;
+            tip: 156;
+            point: 172;
+        }>;
+        index: Readonly<{
+            from: 198;
+            to: 226;
+            chevron: 232;
+            back: 214;
+        }>;
+        rest: -396;
+        out: -6;
+        settleMs: 480;
+        innerSettleMs: 380;
+    }>;
+    /** C-III — a quadrant that blooms out of the edge on a ratchet. */
+    fan: Readonly<{
+        viewBox: readonly number[];
+        /** 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: Readonly<{
+            halfAngle: 80;
+            ri: 64;
+            ro: 196;
+        }>;
+        hub: Readonly<{
+            outer: 64;
+            inner: 52;
+        }>;
+        /** Ratchet teeth ride just outside the spoke ends. */
+        tooth: Readonly<{
+            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;
+    }>;
+}>;
+export function polar(cx: any, cy: any, r: any, deg: any): any[];
+export function pitchFor(spec: any, count: any): number;
+export function startAngle(spec: any): number;
+export function stationAngle(spec: any, count: any, pos: any): number;
+export function rotationFor(spec: object, count: number, pos: number): number;
+export function innerPitchFor(spec: any, count: any): number;
+export function innerStartAngle(spec: any): number;
+export function innerAngle(spec: any, count: any, pos: any): number;
+export function toothLead(spec: object, detent: number): number;
+//# sourceMappingURL=geometry.d.ts.map

package/dist/components/DialNav/geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.d.ts","sourceRoot":"","sources":["../../../src/components/DialNav/geometry.js"],"names":[],"mappings":"AA8GA;;;;;;GAMG;AACH,oCAHW,MAAM,GACJ,OAAO,CAKnB;AAuBD;;;;;;;;;GASG;AACH,+BAJW,MAAM,QACN,MAAM,GACJ,MAAM,CAOlB;AAED;;;;;;;GAOG;AACH;;;;IAmBC;AA2BD;;;;;;GAMG;AACH,gCAHW,MAAM,GACJ,MAAM,CAelB;AAjOD;IACE,sEAAsE;;;;;QAKpE,yDAAyD;;;QAGzD,mDAAmD;;QAEnD,gEAAgE;;QAEhE,yEAAyE;;QAEzE,6EAA6E;;;;;;QAM7E,kDAAkD;;QAElD,kCAAkC;;;;;;;;QAElC;;;;WAIG;;;;;;IAaL,kEAAkE;;;;;;QAOhE,qDAAqD;;;;;QAOrD,6DAA6D;;;;;;;;;;;;;;;;;;;;;;;;IAgB/D,mEAAmE;;;QAGjE,iDAAiD;;;QAGjD;6EACqE;;;;;;;;;;;;;;QAOrE,sDAAsD;;;;;;QAEtD,uEAAuE;;;;;GAKxE;AAGI,iEAGN;AAeM,wDAAmE;AAGnE,8CAA0C;AAG1C,sEACyC;AAUzC,kCALI,MAAM,SACN,MAAM,OACN,MAAM,GACJ,MAAM,CAGc;AAoD1B,6DACiC;AAEjC,mDAAoD;AAEpD,oEACmD;AAYnD,gCAJI,MAAM,UACN,MAAM,GACJ,MAAM,CAGuB"}

package/dist/components/DialNav/index.css

@@ -0,0 +1,321 @@
+/* src/components/DialNav/DialNav.css */
+.ds-dial {
+  position: relative;
+}
+.ds-dial__stage {
+  position: relative;
+  height: var(--ds-dial-stage-height, 460px);
+  min-height: var(--dial-h);
+  overflow: hidden;
+}
+.ds-dial__frame {
+  position: absolute;
+  inset: 0;
+  transform: scale(var(--dial-scale, 1));
+  transform-origin: 0 50%;
+  pointer-events: none;
+  z-index: var(--ds-z-dropdown);
+}
+.ds-dial__dock {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: var(--dial-w);
+  height: var(--dial-h);
+  margin-top: calc(var(--dial-h) / -2);
+  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1);
+}
+.ds-dial__chrome {
+  display: block;
+  width: 100%;
+  height: auto;
+  overflow: visible;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: auto;
+  filter: drop-shadow(3px 2px 9px var(--ds-rule-shadow));
+}
+.ds-dial__face {
+  fill: var(--ds-rule-plate);
+  stroke: var(--ds-rule-edge);
+  stroke-width: 1.5;
+}
+.ds-dial__grab {
+  fill: transparent;
+  cursor: grab;
+}
+.ds-dial__disc:active .ds-dial__grab {
+  cursor: grabbing;
+}
+.ds-dial__hairline-ring,
+.ds-dial__log-plate {
+  fill: none;
+  stroke: var(--ds-rule-edge);
+  stroke-width: 0.5;
+}
+.ds-dial__log-plate {
+  fill: var(--ds-rule-plate-2);
+}
+.ds-dial__tick {
+  stroke: var(--ds-rule-tick);
+  stroke-width: 1;
+}
+.ds-dial__tick--faint {
+  opacity: 0.5;
+}
+.ds-dial__tick--station {
+  stroke: var(--ds-rule-hair);
+  stroke-width: 1.6;
+}
+.ds-dial__numeral,
+.ds-dial__caption {
+  font-family: var(--ds-font-body);
+  font-size: 8px;
+  fill: var(--ds-rule-ink-soft);
+}
+.ds-dial__numeral {
+  font-variant-numeric: tabular-nums;
+  fill: var(--ds-rule-hair);
+}
+.ds-dial__caption {
+  letter-spacing: 0.16em;
+  fill: var(--ds-rule-hair);
+}
+.ds-dial__hub {
+  fill: var(--ds-rule-plate);
+  stroke: var(--ds-rule-edge);
+  stroke-width: 0.5;
+}
+.ds-dial__rivet {
+  fill: var(--ds-rule-brass);
+}
+.ds-dial__rivet-hi {
+  fill: var(--ds-rule-brass);
+  opacity: 0.6;
+}
+.ds-dial__arm {
+  pointer-events: none;
+}
+.ds-dial__arm,
+.ds-dial__stations {
+  opacity: 1;
+  transition: opacity 0.3s ease 0.12s;
+}
+.ds-dial:not(.is-out) .ds-dial__arm,
+.ds-dial:not(.is-out) .ds-dial__stations {
+  opacity: 0;
+  transition-delay: 0s;
+}
+.ds-dial:not(.is-out) .ds-dial__station {
+  pointer-events: none;
+}
+.ds-dial__glass {
+  fill: var(--ds-rule-glass);
+  stroke: var(--ds-rule-glass-edge);
+  stroke-width: 0.75;
+}
+.ds-dial__frame-line {
+  fill: none;
+  stroke: var(--ds-rule-glass-edge);
+  stroke-width: 2.4;
+  stroke-linejoin: round;
+  opacity: 0.7;
+}
+.ds-dial__hairline {
+  stroke: var(--ds-rule-hair);
+  stroke-width: 1.1;
+}
+.ds-dial__index {
+  fill: var(--ds-rule-hair);
+}
+.ds-dial__stations {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  pointer-events: none;
+  transform-origin: var(--dial-cx) var(--dial-cy);
+}
+.ds-dial__station {
+  position: absolute;
+  left: var(--dial-cx);
+  top: var(--dial-cy);
+  transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r)) rotate(var(--flip));
+  pointer-events: auto;
+}
+.ds-dial__link {
+  display: inline-block;
+  padding: var(--ds-space-1) var(--ds-space-2);
+  border: none;
+  border-bottom: 2px solid transparent;
+  border-radius: var(--ds-radius-sm);
+  background: transparent;
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-100);
+  font-weight: var(--ds-font-weight-semibold);
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+  color: var(--ds-rule-ink-soft);
+  cursor: pointer;
+  transition: color var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+.ds-dial__link:hover {
+  color: var(--ds-rule-ink);
+}
+.ds-dial__link:focus-visible {
+  outline: 2px solid var(--ds-color-focus-ring);
+  outline-offset: 2px;
+}
+.ds-dial__link--active {
+  color: var(--ds-rule-ink);
+  border-bottom-color: var(--ds-rule-hair);
+}
+.ds-dial__peek {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%) rotate(180deg);
+  writing-mode: vertical-rl;
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-100);
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--ds-rule-ink-soft);
+  pointer-events: none;
+  transition: opacity 0.25s;
+  z-index: calc(var(--ds-z-dropdown) + 1);
+}
+.ds-dial.is-out .ds-dial__peek {
+  opacity: 0;
+}
+.ds-dial__hotzone {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 92px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: e-resize;
+  z-index: calc(var(--ds-z-dropdown) + 2);
+}
+.ds-dial__hotzone:focus-visible {
+  outline: 2px solid var(--ds-color-focus-ring);
+  outline-offset: -4px;
+}
+.ds-dial.is-out .ds-dial__hotzone {
+  pointer-events: none;
+}
+@media (max-width: 760px) {
+  .ds-dial__stage {
+    height: var(--ds-dial-stage-height, 340px);
+    min-height: 0;
+  }
+  .ds-dial__frame {
+    --dial-scale: 0.72;
+  }
+  .ds-dial__link {
+    font-size: calc(var(--ds-font-size-100) / 0.72);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-dial__dock {
+    transition-duration: 0.01ms;
+  }
+  .ds-dial__link {
+    transition-duration: 0.01ms;
+  }
+}
+.ds-dial--concentric {
+  --dial-cx: 220px;
+  --dial-cy: 220px;
+}
+.ds-dial__grab-hole {
+  fill: transparent;
+  pointer-events: none;
+}
+.ds-dial__arm-sweep {
+  cursor: grab;
+}
+.ds-dial__arm-sweep:active {
+  cursor: grabbing;
+}
+.ds-dial__brass-rail {
+  stroke: var(--ds-rule-brass);
+  stroke-width: 1.6;
+}
+.ds-dial__brass-point {
+  fill: var(--ds-rule-brass);
+}
+.ds-dial__stations--inner {
+  transform: none;
+}
+.ds-dial--concentric .ds-dial__link {
+  font-size: calc(var(--ds-font-size-100) * 0.8);
+  letter-spacing: 0.1em;
+  padding: var(--ds-space-1);
+}
+.ds-dial__link--page {
+  letter-spacing: 0.08em;
+}
+.ds-dial--fan {
+  --dial-cx: 46px;
+  --dial-cy: 210px;
+}
+.ds-dial--fan .ds-dial__dock {
+  transition: clip-path 0.5s cubic-bezier(0.2, 0.9, 0.25, 1);
+}
+.ds-dial__wedge {
+  fill: var(--ds-rule-plate);
+  stroke: var(--ds-rule-edge);
+  stroke-width: 1;
+}
+.ds-dial__ratchet {
+  fill: none;
+  stroke: var(--ds-rule-brass);
+  stroke-width: 1.4;
+  opacity: 0.85;
+}
+.ds-dial__pawl {
+  cursor: grab;
+}
+.ds-dial__pawl:active {
+  cursor: grabbing;
+}
+.ds-dial__fanchrome {
+  opacity: 1;
+  transition: opacity 0.4s ease 0.18s;
+}
+.ds-dial:not(.is-out) .ds-dial__fanchrome,
+.ds-dial:not(.is-out) .ds-dial__pawl {
+  opacity: 0;
+  transition: opacity 0.25s;
+}
+.ds-dial__spoke {
+  transition: transform 0.5s cubic-bezier(0.18, 1.05, 0.3, 1), opacity 0.3s;
+}
+.ds-dial:not(.is-out) .ds-dial__spoke {
+  transform: scaleX(0.04);
+  opacity: 0;
+}
+.ds-dial--fan .ds-dial__station {
+  opacity: 1;
+  transition: opacity 0.3s ease var(--bloom-delay, 0ms);
+}
+.ds-dial--fan:not(.is-out) .ds-dial__station {
+  opacity: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-dial__spoke,
+  .ds-dial__fanchrome,
+  .ds-dial--fan .ds-dial__station {
+    transition-duration: 0.01ms;
+    transition-delay: 0ms;
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/dist/components/DialNav/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DialNav/DialNav.css"],"sourcesContent":["/*\n  Circular slide-rule navigation. As with SlideRuleNav, the engraved chrome is\n  an aria-hidden SVG and the navigation is the HTML list positioned over it.\n\n  The station rail lives *inside* the dock so it carries the same translation\n  the disc does, and rotates by the same angle. Scale and translation sit on\n  two different elements (frame and dock) so they never have to compose in one\n  declaration.\n\n  Component tokens (--ds-rule-*) live in src/tokens/rule.css.\n*/\n\n.ds-dial {\n  position: relative;\n}\n\n/*\n  The dock is as tall as the disc's viewBox, so the stage has to exceed that\n  or the face sits flush against both edges and its shadow is cut off. Sized\n  as a variable: a real sidebar usually wants 100vh or the height of its\n  layout column.\n*/\n.ds-dial__stage {\n  position: relative;\n  height: var(--ds-dial-stage-height, 460px);\n  min-height: var(--dial-h);\n  overflow: hidden;\n}\n\n.ds-dial__frame {\n  position: absolute;\n  inset: 0;\n  transform: scale(var(--dial-scale, 1));\n  transform-origin: 0 50%;\n  /* Only the painted instrument takes pointer events, not its bounding box. */\n  pointer-events: none;\n  z-index: var(--ds-z-dropdown);\n}\n\n.ds-dial__dock {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: var(--dial-w);\n  height: var(--dial-h);\n  margin-top: calc(var(--dial-h) / -2);\n  /* the travel itself is written inline from geometry.js — see DialNav.jsx */\n  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1);\n}\n\n.ds-dial__chrome {\n  display: block;\n  width: 100%;\n  height: auto;\n  overflow: visible;\n  touch-action: none;\n  user-select: none;\n  -webkit-user-select: none;\n  pointer-events: auto;\n  filter: drop-shadow(3px 2px 9px var(--ds-rule-shadow));\n}\n\n/* ── engraved chrome ─────────────────────────────────────────────────── */\n\n.ds-dial__face {\n  fill: var(--ds-rule-plate);\n  stroke: var(--ds-rule-edge);\n  stroke-width: 1.5;\n}\n\n.ds-dial__grab {\n  fill: transparent;\n  cursor: grab;\n}\n.ds-dial__disc:active .ds-dial__grab {\n  cursor: grabbing;\n}\n\n.ds-dial__hairline-ring,\n.ds-dial__log-plate {\n  fill: none;\n  stroke: var(--ds-rule-edge);\n  stroke-width: 0.5;\n}\n\n.ds-dial__log-plate {\n  fill: var(--ds-rule-plate-2);\n}\n\n.ds-dial__tick {\n  stroke: var(--ds-rule-tick);\n  stroke-width: 1;\n}\n.ds-dial__tick--faint {\n  opacity: 0.5;\n}\n\n/* Station marks have to read as a different scale from the decorative rim,\n   or the two tick bands merge into one texture. */\n.ds-dial__tick--station {\n  stroke: var(--ds-rule-hair);\n  stroke-width: 1.6;\n}\n\n.ds-dial__numeral,\n.ds-dial__caption {\n  font-family: var(--ds-font-body);\n  font-size: 8px;\n  fill: var(--ds-rule-ink-soft);\n}\n.ds-dial__numeral {\n  font-variant-numeric: tabular-nums;\n  fill: var(--ds-rule-hair);\n}\n.ds-dial__caption {\n  letter-spacing: 0.16em;\n  fill: var(--ds-rule-hair);\n}\n\n.ds-dial__hub {\n  fill: var(--ds-rule-plate);\n  stroke: var(--ds-rule-edge);\n  stroke-width: 0.5;\n}\n.ds-dial__rivet {\n  fill: var(--ds-rule-brass);\n}\n.ds-dial__rivet-hi {\n  fill: var(--ds-rule-brass);\n  opacity: 0.6;\n}\n\n/* The arm is instrument furniture; drags belong to the disc beneath it. */\n.ds-dial__arm {\n  pointer-events: none;\n}\n\n/*\n  At rest, only the disc face may break the edge. The cursor arm reaches\n  218 units from the hub against the face's 200, so left alone it pokes out\n  further than the instrument it belongs to — a red chevron floating in the\n  margin. The station labels sit proud of the crescent for the same reason.\n  Both fade in with the extraction.\n*/\n.ds-dial__arm,\n.ds-dial__stations {\n  opacity: 1;\n  transition: opacity 0.3s ease 0.12s;\n}\n\n.ds-dial:not(.is-out) .ds-dial__arm,\n.ds-dial:not(.is-out) .ds-dial__stations {\n  opacity: 0;\n  transition-delay: 0s;\n}\n\n.ds-dial:not(.is-out) .ds-dial__station {\n  pointer-events: none;\n}\n\n.ds-dial__glass {\n  fill: var(--ds-rule-glass);\n  stroke: var(--ds-rule-glass-edge);\n  stroke-width: 0.75;\n}\n\n.ds-dial__frame-line {\n  fill: none;\n  stroke: var(--ds-rule-glass-edge);\n  stroke-width: 2.4;\n  stroke-linejoin: round;\n  opacity: 0.7;\n}\n\n.ds-dial__hairline {\n  stroke: var(--ds-rule-hair);\n  stroke-width: 1.1;\n}\n\n.ds-dial__index {\n  fill: var(--ds-rule-hair);\n}\n\n/* ── stations (the actual navigation) ────────────────────────────────── */\n\n.ds-dial__stations {\n  position: absolute;\n  inset: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  pointer-events: none;\n  transform-origin: var(--dial-cx) var(--dial-cy);\n}\n\n.ds-dial__station {\n  position: absolute;\n  left: var(--dial-cx);\n  top: var(--dial-cy);\n  /* Centre on the hub, swing out to the label radius, then flip about the\n     label's own centre if it would otherwise read upside down. */\n  transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r))\n    rotate(var(--flip));\n  pointer-events: auto;\n}\n\n.ds-dial__link {\n  display: inline-block;\n  padding: var(--ds-space-1) var(--ds-space-2);\n  border: none;\n  border-bottom: 2px solid transparent;\n  border-radius: var(--ds-radius-sm);\n  background: transparent;\n  font-family: var(--ds-font-body);\n  font-size: var(--ds-font-size-100);\n  font-weight: var(--ds-font-weight-semibold);\n  letter-spacing: 0.13em;\n  text-transform: uppercase;\n  text-decoration: none;\n  white-space: nowrap;\n  color: var(--ds-rule-ink-soft);\n  cursor: pointer;\n  transition: color var(--ds-motion-duration-base)\n    var(--ds-motion-ease-standard);\n}\n\n.ds-dial__link:hover {\n  color: var(--ds-rule-ink);\n}\n\n.ds-dial__link:focus-visible {\n  outline: 2px solid var(--ds-color-focus-ring);\n  outline-offset: 2px;\n}\n\n.ds-dial__link--active {\n  color: var(--ds-rule-ink);\n  border-bottom-color: var(--ds-rule-hair);\n}\n\n/* ── rail affordances ────────────────────────────────────────────────── */\n\n.ds-dial__peek {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%) rotate(180deg);\n  writing-mode: vertical-rl;\n  font-family: var(--ds-font-body);\n  font-size: var(--ds-font-size-100);\n  letter-spacing: 0.28em;\n  text-transform: uppercase;\n  color: var(--ds-rule-ink-soft);\n  pointer-events: none;\n  transition: opacity 0.25s;\n  z-index: calc(var(--ds-z-dropdown) + 1);\n}\n\n.ds-dial.is-out .ds-dial__peek {\n  opacity: 0;\n}\n\n.ds-dial__hotzone {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 92px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: e-resize;\n  z-index: calc(var(--ds-z-dropdown) + 2);\n}\n\n.ds-dial__hotzone:focus-visible {\n  outline: 2px solid var(--ds-color-focus-ring);\n  outline-offset: -4px;\n}\n\n/* Once extracted the rail must stop intercepting drags aimed at the disc. */\n.ds-dial.is-out .ds-dial__hotzone {\n  pointer-events: none;\n}\n\n@media (max-width: 760px) {\n  .ds-dial__stage {\n    height: var(--ds-dial-stage-height, 340px);\n    /* the frame is scaled, so the dock's own height no longer sets the floor */\n    min-height: 0;\n  }\n  .ds-dial__frame {\n    --dial-scale: 0.72;\n  }\n  /* Counteract the frame scale so labels keep their intended size while the\n     instrument's geometry shrinks. */\n  .ds-dial__link {\n    font-size: calc(var(--ds-font-size-100) / 0.72);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ds-dial__dock {\n    transition-duration: 0.01ms;\n  }\n  .ds-dial__link {\n    transition-duration: 0.01ms;\n  }\n}\n\n/* ── C-II Concentric ─────────────────────────────────────────────────── */\n\n.ds-dial--concentric {\n  --dial-cx: 220px;\n  --dial-cy: 220px;\n}\n\n/* Punch the inner plate out of the outer ring's hit area, so drags landing\n   there belong to the sweeping arm rather than the ring. */\n.ds-dial__grab-hole {\n  fill: transparent;\n  pointer-events: none;\n}\n\n.ds-dial__arm-sweep {\n  cursor: grab;\n}\n.ds-dial__arm-sweep:active {\n  cursor: grabbing;\n}\n\n.ds-dial__brass-rail {\n  stroke: var(--ds-rule-brass);\n  stroke-width: 1.6;\n}\n\n.ds-dial__brass-point {\n  fill: var(--ds-rule-brass);\n}\n\n/* The inner rail is fixed in disc space — the arm sweeps it, it does not\n   turn. */\n.ds-dial__stations--inner {\n  transform: none;\n}\n\n/* The outer ring turns a full circle, so a section label can swing due west.\n   It has to stay inside labelClearance of the hub to clear the stage edge. */\n.ds-dial--concentric .ds-dial__link {\n  font-size: calc(var(--ds-font-size-100) * 0.8);\n  letter-spacing: 0.1em;\n  padding: var(--ds-space-1);\n}\n\n.ds-dial__link--page {\n  letter-spacing: 0.08em;\n}\n\n/* ── C-III Ratchet Fan ───────────────────────────────────────────────── */\n\n.ds-dial--fan {\n  --dial-cx: 46px;\n  --dial-cy: 210px;\n}\n\n/* The fan does not slide out; it is unveiled by opening a clip, so the hub\n   band stays visible at the edge as the rest-state hint. */\n.ds-dial--fan .ds-dial__dock {\n  transition: clip-path 0.5s cubic-bezier(0.2, 0.9, 0.25, 1);\n}\n\n.ds-dial__wedge {\n  fill: var(--ds-rule-plate);\n  stroke: var(--ds-rule-edge);\n  stroke-width: 1;\n}\n\n.ds-dial__ratchet {\n  fill: none;\n  stroke: var(--ds-rule-brass);\n  stroke-width: 1.4;\n  opacity: 0.85;\n}\n\n.ds-dial__pawl {\n  cursor: grab;\n}\n.ds-dial__pawl:active {\n  cursor: grabbing;\n}\n\n.ds-dial__fanchrome {\n  opacity: 1;\n  transition: opacity 0.4s ease 0.18s;\n}\n.ds-dial:not(.is-out) .ds-dial__fanchrome,\n.ds-dial:not(.is-out) .ds-dial__pawl {\n  opacity: 0;\n  transition: opacity 0.25s;\n}\n\n/* Rotation lives on the parent group as an SVG attribute; the retract is a\n   CSS transform here, on an element that carries no transform attribute of\n   its own. Sharing one element would make transform-origin double-apply on\n   top of a rotate() that already encodes its centre. */\n.ds-dial__spoke {\n  transition: transform 0.5s cubic-bezier(0.18, 1.05, 0.3, 1), opacity 0.3s;\n}\n.ds-dial:not(.is-out) .ds-dial__spoke {\n  transform: scaleX(0.04);\n  opacity: 0;\n}\n\n/* Labels bloom outward in the same order the spokes deploy. */\n.ds-dial--fan .ds-dial__station {\n  opacity: 1;\n  transition: opacity 0.3s ease var(--bloom-delay, 0ms);\n}\n.ds-dial--fan:not(.is-out) .ds-dial__station {\n  opacity: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ds-dial__spoke,\n  .ds-dial__fanchrome,\n  .ds-dial--fan .ds-dial__station {\n    transition-duration: 0.01ms;\n    transition-delay: 0ms;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/components/DialNav/index.d.ts

@@ -0,0 +1,2 @@
+export { DialNav } from "./DialNav.jsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DialNav/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DialNav/index.js"],"names":[],"mappings":""}

package/dist/components/DialNav/index.js

@@ -0,0 +1,8 @@
+import {
+  DialNav
+} from "../../chunk-NJ2SBQYA.js";
+import "../../chunk-UZW4E2UH.js";
+export {
+  DialNav
+};
+//# sourceMappingURL=index.js.map

package/dist/components/DialNav/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/DialNav/variants/Concentric.d.ts

@@ -0,0 +1,10 @@
+/**
+ * C-II — Concentric Computer.
+ *
+ * After the E6B. The outer ring carries sections and turns a full circle; the
+ * inner ring re-cuts itself to the pages of whichever section is indexed, and
+ * a brass arm sweeps between them. The only two-level plate, so it renders
+ * both label rails itself rather than using the shell's single rail.
+ */
+export const Concentric: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+//# sourceMappingURL=Concentric.d.ts.map

package/dist/components/DialNav/variants/Concentric.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Concentric.d.ts","sourceRoot":"","sources":["../../../../src/components/DialNav/variants/Concentric.jsx"],"names":[],"mappings":"AAUA;;;;;;;GAOG;AACH,uGA2SG"}

package/dist/components/DialNav/variants/RatchetFan.d.ts

@@ -0,0 +1,12 @@
+/**
+ * C-III — Ratchet Fan.
+ *
+ * The hint is a bare hub band at the edge. On approach the quadrant blooms and
+ * the spokes deploy in sequence, each carrying a station outward. A sprung
+ * pawl rides a real sawtooth, kicking against every quarter-detent it crosses.
+ *
+ * Decorative only — the navigation is the HTML list the parent renders over
+ * this, one label per spoke.
+ */
+export const RatchetFan: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+//# sourceMappingURL=RatchetFan.d.ts.map

package/dist/components/DialNav/variants/RatchetFan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatchetFan.d.ts","sourceRoot":"","sources":["../../../../src/components/DialNav/variants/RatchetFan.jsx"],"names":[],"mappings":"AAWA;;;;;;;;;GASG;AACH,uGA8LG"}

package/dist/components/DialNav/variants/Volvelle.d.ts

@@ -0,0 +1,12 @@
+/**
+ * C-I — Volvelle.
+ *
+ * A disc carrying its stations on a band, read against a fixed glass cursor
+ * arm due east. Spinning it ratchets through quarter-pitch detents; releasing
+ * settles a station onto the index.
+ *
+ * Decorative only — the navigation is the HTML list the parent renders over
+ * this, which rotates by the same angle the disc does.
+ */
+export const Volvelle: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+//# sourceMappingURL=Volvelle.d.ts.map

package/dist/components/DialNav/variants/Volvelle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Volvelle.d.ts","sourceRoot":"","sources":["../../../../src/components/DialNav/variants/Volvelle.jsx"],"names":[],"mappings":"AAUA;;;;;;;;;GASG;AACH,qGAiOG"}

package/dist/components/SlideRuleNav/index.js

@@ -1,6 +1,7 @@
 import {
   SlideRuleNav
-} from "../../chunk-SUYKOWXJ.js";
+} from "../../chunk-YLUQANAI.js";
+import "../../chunk-UZW4E2UH.js";
 export {
   SlideRuleNav
 };