@lockin90/ui-native 0.0.0-stage → 1.0.0

package/lib/commonjs/components/VitalsStrip.js

@@ -0,0 +1,766 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VitalsStrip = VitalsStrip;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
+var _tokens = require("@lockin90/tokens");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const AnimatedCircle = _reactNative.Animated.createAnimatedComponent(_reactNativeSvg.Circle);
+const AnimatedRect = _reactNative.Animated.createAnimatedComponent(_reactNativeSvg.Rect);
+
+/* VitalsStrip — the catalog vitals family (VT-01…VT-05,
+   lockin90-design/charts/vitals-charts.html): ECG-style rhythm strips —
+   heartbeat, HRV, the monitor look. Five variants in a fixed 320×150
+   viewBox: sharp PQRST polyline beats on faint ECG-paper verticals with a
+   big mono BPM readout, the uneven-RR HRV explainer with a ms bracket
+   ruler, the bedside monitor (ECG + respiration + stat column), the
+   compressed overnight HR curve, and the one-premature-beat anomaly flag.
+   Native twin of `@lockin90/ui` VitalsStrip — same prop API; glows are real
+   Gaussian-blurred duplicate strokes (Fabric-native SVG filters in
+   react-native-svg 15). */
+
+/* VT-05 — one premature beat coral + dashed ring + pill */
+
+/* ---- catalog geometry (viewBox units — charts/catalog.js + vitals page) ---- */
+const W = 320;
+const H = 150;
+const PAD = {
+  l: 10,
+  r: 12,
+  t: 16,
+  b: 14
+};
+const PLOT_H = H - PAD.t - PAD.b; // 120
+const GRID_ROWS = [0.25, 0.5, 0.75];
+
+/** the catalog's px↔ms scale: 1 viewBox px of RR width = 23.5 ms. */
+const MS_PER_PX = 23.5;
+
+/** PQRST beat template: [fraction of RR, normalized amplitude] — sharp, unsmoothed. */
+const BEAT = [[0, 0], [0.13, 0], [0.18, 0.14], [0.23, 0], [0.33, 0], [0.36, -0.12], [0.4, 1], [0.44, -0.3], [0.48, 0], [0.56, 0], [0.64, 0.24], [0.72, 0], [1, 0]];
+
+/** Round for compact attribute values. */
+const rd = n => Math.round(n * 100) / 100;
+/** A run of PQRST beats: polyline path + the R-peak positions (BEAT index 6). */
+function ecgRun(x0, y0, amp, widths) {
+  let d = '';
+  const peaks = [];
+  const pts = [];
+  let x = x0;
+  for (const w of widths) {
+    BEAT.forEach((q, i) => {
+      const px = x + q[0] * w;
+      const py = y0 - q[1] * amp;
+      d += `${d ? 'L' : 'M'}${rd(px)} ${rd(py)}`;
+      pts.push({
+        x: px,
+        y: py
+      });
+      if (i === 6) peaks.push({
+        x: px,
+        y: py
+      });
+    });
+    x += w;
+  }
+  return {
+    d,
+    peaks,
+    pts
+  };
+}
+
+/** Mono catalog label (8.5px JetBrains Mono, ~.06em tracking). */
+function Label({
+  x,
+  y,
+  fill,
+  anchor = 'middle',
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Text, {
+    x: rd(x),
+    y: rd(y),
+    fill: fill,
+    textAnchor: anchor,
+    fontSize: 8.5,
+    fontFamily: _tokens.fonts.mono,
+    letterSpacing: 0.5,
+    children: children
+  });
+}
+
+/** Chip-pill tag (the catalog `tag()`): dark bg-0 pill + tinted hairline. */
+function Tag({
+  x,
+  y,
+  color,
+  anchor = 'middle',
+  text
+}) {
+  const wpx = text.length * 5.35 + 12;
+  let xa = anchor === 'end' ? x - wpx : anchor === 'start' ? x : x - wpx / 2;
+  xa = Math.max(PAD.l - 4, Math.min(xa, W - PAD.r - wpx + 4));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+      x: rd(xa),
+      y: rd(y - 6.5),
+      width: rd(wpx),
+      height: 13,
+      rx: 6.5,
+      fill: `${_tokens.colors.bg0}C7`,
+      stroke: color,
+      strokeOpacity: 0.35,
+      strokeWidth: 0.8
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Text, {
+      x: rd(xa + wpx / 2),
+      y: rd(y + 2.8),
+      fill: color,
+      textAnchor: "middle",
+      fontSize: 8,
+      fontFamily: _tokens.fonts.mono,
+      letterSpacing: 0.4,
+      children: text
+    })]
+  });
+}
+
+/** Glowing dot + expanding pulse ring — the catalog `pulseDot`. The ring
+ *  animates r 3.6→11 / opacity 0.8→0 over 1.8s (the web SMIL `<animate>`
+ *  twin; SVG props aren't native-drivable so useNativeDriver is false — one
+ *  circle at this rate is cheap). `still` renders the static halo instead. */
+function PulseDot({
+  x,
+  y,
+  color,
+  still = false
+}) {
+  const anim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  (0, _react.useEffect)(() => {
+    if (still) return;
+    const loop = _reactNative.Animated.loop(_reactNative.Animated.timing(anim, {
+      toValue: 1,
+      duration: 1800,
+      easing: _reactNative.Easing.linear,
+      useNativeDriver: false
+    }));
+    loop.start();
+    return () => loop.stop();
+  }, [still, anim]);
+  const r = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [3.6, 11]
+  });
+  const ringOpacity = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.8, 0]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+      cx: rd(x),
+      cy: rd(y),
+      r: 6.6,
+      fill: color,
+      opacity: 0.35
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+      cx: rd(x),
+      cy: rd(y),
+      r: 3.6,
+      fill: color
+    }), still ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+      cx: rd(x),
+      cy: rd(y),
+      r: 7,
+      fill: "none",
+      stroke: color,
+      strokeWidth: 1.4,
+      opacity: 0.4
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedCircle, {
+      cx: rd(x),
+      cy: rd(y),
+      r: r,
+      fill: "none",
+      stroke: color,
+      strokeWidth: 1.4,
+      opacity: ringOpacity
+    })]
+  });
+}
+
+/** Live monitor sweep (VT-01, `still` off) — the trace is revealed left→right
+ *  by a clip rect animated at constant x speed, and the active point rides the
+ *  tip of the line like a bedside monitor's write head. Both the clip width and
+ *  the dot position derive linearly from the same progress value, so the dot
+ *  always sits exactly on the reveal edge. Loops every SWEEP_MS. */
+const SWEEP_MS = 4200;
+function LiveEcgTrace({
+  run,
+  color,
+  shine
+}) {
+  const uid = (0, _react.useId)().replace(/[^a-zA-Z0-9]/g, '');
+  const clipId = `lk-vt-clip-${uid}`;
+  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  (0, _react.useEffect)(() => {
+    const loop = _reactNative.Animated.loop(_reactNative.Animated.timing(progress, {
+      toValue: 1,
+      duration: SWEEP_MS,
+      easing: _reactNative.Easing.linear,
+      useNativeDriver: false
+    }));
+    loop.start();
+    return () => loop.stop();
+  }, [progress]);
+  const xs = run.pts.map(p => p.x);
+  const ys = run.pts.map(p => p.y);
+  const first = xs[0];
+  const span = Math.max(1, xs[xs.length - 1] - first);
+  // strictly-increasing progress fractions — the vertical QRS segments repeat an
+  // x position, and interpolate() rejects a non-increasing inputRange, so equal
+  // fractions get nudged forward by an invisible epsilon.
+  const fr = [];
+  for (let i = 0; i < xs.length; i++) {
+    const f = (xs[i] - first) / span;
+    fr.push(i > 0 && f <= fr[i - 1] ? fr[i - 1] + 1e-4 : f);
+  }
+  const cx = progress.interpolate({
+    inputRange: fr,
+    outputRange: xs
+  });
+  const cy = progress.interpolate({
+    inputRange: fr,
+    outputRange: ys
+  });
+  const clipW = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.01, span + 8]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Defs, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.ClipPath, {
+        id: clipId,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedRect, {
+          x: rd(first - 4),
+          y: 0,
+          width: clipW,
+          height: H
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.G, {
+      clipPath: `url(#${clipId})`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Trace, {
+        d: run.d,
+        color: color,
+        shine: shine
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedCircle, {
+      cx: cx,
+      cy: cy,
+      r: 6.6,
+      fill: color,
+      opacity: 0.35
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedCircle, {
+      cx: cx,
+      cy: cy,
+      r: 3.6,
+      fill: color
+    })]
+  });
+}
+
+/** Faint ECG-paper verticals every 14px (the page's `paper`). */
+function Paper({
+  y0,
+  y1
+}) {
+  const lines = [];
+  for (let x = PAD.l; x <= W - PAD.r; x += 14) lines.push(x);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.G, {
+    children: lines.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Line, {
+      x1: x,
+      x2: x,
+      y1: y0,
+      y2: y1,
+      stroke: _tokens.colors.text,
+      strokeOpacity: 0.04,
+      strokeWidth: 1
+    }, x))
+  });
+}
+
+/** ECG trace + optional glow — a Gaussian-blurred duplicate stroke behind the
+ *  crisp trace: the native twin of the web `.lk-vitals-shine` blur(5px)
+ *  underlay. (Wide un-blurred copies read as hard outlines on device.) */
+function Trace({
+  d,
+  color,
+  shine
+}) {
+  const uid = (0, _react.useId)().replace(/[^a-zA-Z0-9]/g, '');
+  const blurId = `lk-vt-blur-${uid}`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+    children: [shine ?
+    /*#__PURE__*/
+    /* region in user space over the full canvas so the flat trace never
+       clips the blur to its bounding box */
+    (0, _jsxRuntime.jsx)(_reactNativeSvg.Defs, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Filter, {
+        id: blurId,
+        filterUnits: "userSpaceOnUse",
+        x: -10,
+        y: -10,
+        width: W + 20,
+        height: H + 20,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.FeGaussianBlur, {
+          stdDeviation: 2.5
+        })
+      })
+    }) : null, shine ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+      d: d,
+      fill: "none",
+      stroke: color,
+      strokeWidth: 6,
+      opacity: 0.45,
+      strokeLinecap: "round",
+      filter: `url(#${blurId})`
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+      d: d,
+      fill: "none",
+      stroke: color,
+      strokeWidth: 1.8,
+      strokeLinejoin: "round",
+      strokeLinecap: "round"
+    })]
+  });
+}
+
+/* Fritsch–Carlson monotone cubic — the catalog's `smoothPath` (VT-04 only). */
+function monotonePath(pts) {
+  const n = pts.length;
+  if (n < 3) return pts.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${rd(x)},${rd(y)}`).join(' ');
+  const dx = [];
+  const m = [];
+  const tg = [];
+  for (let i = 0; i < n - 1; i++) {
+    dx[i] = pts[i + 1][0] - pts[i][0];
+    m[i] = (pts[i + 1][1] - pts[i][1]) / dx[i];
+  }
+  tg[0] = m[0];
+  tg[n - 1] = m[n - 2];
+  for (let i = 1; i < n - 1; i++) tg[i] = m[i - 1] * m[i] <= 0 ? 0 : (m[i - 1] + m[i]) / 2;
+  for (let i = 0; i < n - 1; i++) {
+    if (m[i] === 0) {
+      tg[i] = 0;
+      tg[i + 1] = 0;
+    } else {
+      const a = tg[i] / m[i];
+      const b = tg[i + 1] / m[i];
+      const s = a * a + b * b;
+      if (s > 9) {
+        const tau = 3 / Math.sqrt(s);
+        tg[i] = tau * a * m[i];
+        tg[i + 1] = tau * b * m[i];
+      }
+    }
+  }
+  let d = `M${rd(pts[0][0])},${rd(pts[0][1])}`;
+  for (let i = 0; i < n - 1; i++) {
+    const h = dx[i] / 3;
+    d += ` C${rd(pts[i][0] + h)},${rd(pts[i][1] + h * tg[i])} ${rd(pts[i + 1][0] - h)},${rd(pts[i + 1][1] - h * tg[i + 1])} ${rd(pts[i + 1][0])},${rd(pts[i + 1][1])}`;
+  }
+  return d;
+}
+
+/* catalog default RRs, in ms (page px × 23.5) */
+const RR_ECG = [987, 1034, 940, 1058, 964, 1034];
+const RR_HRV = [964, 1034, 893, 1081, 846, 1058, 940];
+const RR_MONITOR = [893, 940, 870, 964, 893, 940];
+const RR_ANOMALY = [987, 1034, 564, 1363, 1011, 1034];
+const DEFAULT_NIGHT = [62, 58, 54, 50, 46, 44, 45, 48, 44, 46, 52, 58, 64];
+
+/* per-variant frame constants (page draw() branches) */
+const FRAMES = {
+  'ecg-strip': {
+    paper: [30, 118],
+    y0: 82,
+    amp: 36
+  },
+  'hrv-rhythm': {
+    paper: [26, 104],
+    y0: 70,
+    amp: 30
+  },
+  monitor: {
+    paper: [26, 122],
+    y0: 56,
+    amp: 24
+  },
+  'anomaly-beat': {
+    paper: [30, 118],
+    y0: 82,
+    amp: 34
+  }
+};
+
+/**
+ * VitalsStrip — the vitals rhythm-strip family (catalog VT-01…VT-05): sharp
+ * PQRST polyline beats (never smoothed — the sharpness is the ECG look) on
+ * faint paper verticals. RR intervals are real milliseconds; the strip
+ * renders them at the catalog's 23.5 ms/px so uneven spacing reads exactly
+ * like the design page. `night-hr` swaps the beats for the compressed
+ * overnight HR curve.
+ */
+function VitalsStrip({
+  variant = 'ecg-strip',
+  rr,
+  bpm,
+  hrv = 84,
+  resp = 14,
+  nightBpm = DEFAULT_NIGHT,
+  lowLabel,
+  wakeIndex = 9,
+  wakeLabel = 'WAKE',
+  anomalyIndex,
+  anomalyLabel = 'IRREGULAR · 1 BEAT',
+  caption,
+  ticks = ['11PM', '3AM', '7AM'],
+  color,
+  title,
+  shine = false,
+  still = false,
+  ariaLabel = 'Vitals rhythm strip',
+  style
+}) {
+  const uid = (0, _react.useId)().replace(/[^a-zA-Z0-9]/g, '');
+  const blurId = `lk-vt-night-blur-${uid}`;
+  let body = null;
+  if (variant === 'night-hr') {
+    /* VT-04 — compressed overnight HR curve in a shaded sleep window */
+    const c = color ?? _tokens.colors.indigo;
+    const x0 = PAD.l + 8;
+    const x1 = W - PAD.r - 8;
+    const pts = nightBpm.map((v, i) => [x0 + (x1 - x0) * i / Math.max(1, nightBpm.length - 1), 128 - (v - 40) * 2.6]);
+    let minI = 0;
+    nightBpm.forEach((v, i) => {
+      if (v < nightBpm[minI]) minI = i;
+    });
+    const min = pts.length > 0 ? pts[minI] : null;
+    const wake = wakeIndex != null && wakeIndex >= 0 && wakeIndex < pts.length ? pts[wakeIndex] : null;
+    body = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+      children: [GRID_ROWS.map(f => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Line, {
+        x1: PAD.l,
+        x2: W - PAD.r,
+        y1: rd(PAD.t + PLOT_H * f),
+        y2: rd(PAD.t + PLOT_H * f),
+        stroke: _tokens.colors.border,
+        strokeOpacity: 0.55,
+        strokeWidth: 1
+      }, f)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Line, {
+        x1: PAD.l,
+        x2: W - PAD.r,
+        y1: H - PAD.b,
+        y2: H - PAD.b,
+        stroke: _tokens.colors.border,
+        strokeWidth: 1
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+        x: x0,
+        y: PAD.t + 4,
+        width: x1 - x0,
+        height: 108,
+        fill: c,
+        opacity: 0.07
+      }), shine ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Defs, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Filter, {
+            id: blurId,
+            filterUnits: "userSpaceOnUse",
+            x: -10,
+            y: -10,
+            width: W + 20,
+            height: H + 20,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.FeGaussianBlur, {
+              stdDeviation: 2.5
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+          d: monotonePath(pts),
+          fill: "none",
+          stroke: c,
+          strokeWidth: 7,
+          strokeLinecap: "round",
+          opacity: 0.45,
+          filter: `url(#${blurId})`
+        })]
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+        d: monotonePath(pts),
+        fill: "none",
+        stroke: c,
+        strokeWidth: 2.2,
+        strokeLinecap: "round"
+      }), min ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+          cx: rd(min[0]),
+          cy: rd(min[1]),
+          r: 3.2,
+          fill: _tokens.colors.mint
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, {
+          x: min[0],
+          y: min[1] + 14,
+          color: _tokens.colors.mint,
+          text: lowLabel ?? `LOW ${nightBpm[minI]}`
+        })]
+      }) : null, wake ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+          cx: rd(wake[0]),
+          cy: rd(wake[1]),
+          r: 3.2,
+          fill: _tokens.colors.zoneMid
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, {
+          x: wake[0] + 4,
+          y: wake[1] - 12,
+          color: _tokens.colors.zoneMid,
+          anchor: "start",
+          text: wakeLabel
+        })]
+      }) : null, ticks.map((t, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+        x: x0 + (x1 - x0) * i / Math.max(1, ticks.length - 1),
+        y: H - 3,
+        fill: _tokens.colors.textFaint,
+        children: t
+      }, t))]
+    });
+  } else {
+    const frame = FRAMES[variant];
+    const rrMs = rr ?? (variant === 'hrv-rhythm' ? RR_HRV : variant === 'monitor' ? RR_MONITOR : variant === 'anomaly-beat' ? RR_ANOMALY : RR_ECG);
+    const widths = rrMs.map(ms => ms / MS_PER_PX);
+    const run = ecgRun(PAD.l + 4, frame.y0, frame.amp, widths);
+    const traceColor = color ?? (variant === 'hrv-rhythm' ? _tokens.colors.cyan : _tokens.colors.mint);
+    if (variant === 'ecg-strip') {
+      /* VT-01 — the heartbeat strip + big BPM */
+      const last = run.peaks[run.peaks.length - 1];
+      body = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Paper, {
+          y0: frame.paper[0],
+          y1: frame.paper[1]
+        }), still ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Trace, {
+            d: run.d,
+            color: traceColor,
+            shine: shine
+          }), last ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PulseDot, {
+            x: last.x,
+            y: last.y,
+            color: traceColor,
+            still: true
+          }) : null]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(LiveEcgTrace, {
+          run: run,
+          color: traceColor,
+          shine: shine
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Text, {
+          x: W - PAD.r - 4,
+          y: 46,
+          fill: traceColor,
+          textAnchor: "end",
+          fontSize: 24,
+          fontFamily: _tokens.fonts.display,
+          fontWeight: "700",
+          children: String(bpm ?? 62)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+          x: W - PAD.r - 4,
+          y: 58,
+          fill: _tokens.colors.textFaint,
+          anchor: "end",
+          children: "BPM"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+          x: PAD.l + 2,
+          y: 132,
+          fill: _tokens.colors.textFaint,
+          anchor: "start",
+          children: caption ?? 'RESTING · SINUS RHYTHM'
+        })]
+      });
+    } else if (variant === 'hrv-rhythm') {
+      /* VT-02 — uneven RR spacing + ms bracket ruler */
+      const brackets = [];
+      for (let i = 0; i < run.peaks.length - 1; i++) {
+        const a = run.peaks[i].x;
+        const b = run.peaks[i + 1].x;
+        brackets.push(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Line, {
+            x1: rd(a),
+            x2: rd(b),
+            y1: 112,
+            y2: 112,
+            stroke: _tokens.colors.text,
+            strokeOpacity: 0.25,
+            strokeWidth: 1
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Line, {
+            x1: rd(a),
+            x2: rd(a),
+            y1: 108,
+            y2: 116,
+            stroke: _tokens.colors.text,
+            strokeOpacity: 0.25,
+            strokeWidth: 1
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Line, {
+            x1: rd(b),
+            x2: rd(b),
+            y1: 108,
+            y2: 116,
+            stroke: _tokens.colors.text,
+            strokeOpacity: 0.25,
+            strokeWidth: 1
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+            x: (a + b) / 2,
+            y: 126,
+            fill: _tokens.colors.textDim,
+            children: String(Math.round(rrMs[i + 1]))
+          })]
+        }, i));
+      }
+      body = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Paper, {
+          y0: frame.paper[0],
+          y1: frame.paper[1]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Trace, {
+          d: run.d,
+          color: traceColor,
+          shine: shine
+        }), brackets, /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+          x: PAD.l + 2,
+          y: 140,
+          fill: _tokens.colors.textFaint,
+          anchor: "start",
+          children: caption ?? 'RR INTERVALS · MS'
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, {
+          x: W - PAD.r - 6,
+          y: 22,
+          color: traceColor,
+          anchor: "end",
+          text: `HRV ${hrv}MS`
+        })]
+      });
+    } else if (variant === 'monitor') {
+      /* VT-03 — ECG + slow respiration + stat column */
+      let respD = '';
+      for (let x = PAD.l + 4; x <= 240; x += 4) respD += `${respD ? 'L' : 'M'}${x} ${rd(104 - Math.sin((x - PAD.l) / 26) * 9)}`;
+      const stats = [[String(bpm ?? 58), 'HR', _tokens.colors.mint, 56], [String(hrv), 'HRV', _tokens.colors.cyan, 92], [String(resp), 'RESP', _tokens.colors.violet, 128]];
+      body = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Paper, {
+          y0: frame.paper[0],
+          y1: frame.paper[1]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Trace, {
+          d: run.d,
+          color: traceColor,
+          shine: shine
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+          d: respD,
+          fill: "none",
+          stroke: _tokens.colors.cyan,
+          strokeWidth: 1.6,
+          strokeLinecap: "round"
+        }), stats.map(([num, unit, c, y]) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Text, {
+            x: W - PAD.r - 4,
+            y: y,
+            fill: c,
+            textAnchor: "end",
+            fontSize: 17,
+            fontFamily: _tokens.fonts.display,
+            fontWeight: "700",
+            children: num
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+            x: W - PAD.r - 4,
+            y: y + 10,
+            fill: _tokens.colors.textFaint,
+            anchor: "end",
+            children: unit
+          })]
+        }, unit))]
+      });
+    } else {
+      /* VT-05 — one premature beat re-drawn coral + dashed ring */
+      let aIdx = anomalyIndex ?? 0;
+      if (anomalyIndex == null) {
+        rrMs.forEach((ms, i) => {
+          if (ms < rrMs[aIdx]) aIdx = i;
+        });
+      }
+      aIdx = Math.max(0, Math.min(widths.length - 1, aIdx));
+      let ax = PAD.l + 4;
+      for (let i = 0; i < aIdx; i++) ax += widths[i];
+      const ab = widths.length > 0 ? ecgRun(ax, frame.y0, frame.amp, [widths[aIdx]]) : null;
+      const peak = ab?.peaks[0];
+      body = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Paper, {
+          y0: frame.paper[0],
+          y1: frame.paper[1]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Trace, {
+          d: run.d,
+          color: traceColor,
+          shine: shine
+        }), ab ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+          d: ab.d,
+          fill: "none",
+          stroke: _tokens.colors.zoneLow,
+          strokeWidth: 2,
+          strokeLinejoin: "round"
+        }) : null, peak ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+            cx: rd(peak.x),
+            cy: frame.y0 - 8,
+            r: 17,
+            fill: "none",
+            stroke: _tokens.colors.zoneLow,
+            strokeWidth: 1,
+            strokeDasharray: [3, 3],
+            opacity: 0.8
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, {
+            x: peak.x + 22,
+            y: 34,
+            color: _tokens.colors.zoneLow,
+            anchor: "start",
+            text: anomalyLabel
+          })]
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+          x: PAD.l + 2,
+          y: 132,
+          fill: _tokens.colors.textFaint,
+          anchor: "start",
+          children: caption ?? 'PREMATURE BEAT + COMPENSATORY PAUSE'
+        })]
+      });
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    accessibilityRole: "image",
+    accessibilityLabel: ariaLabel,
+    style: [styles.root, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+      width: "100%",
+      height: "100%",
+      viewBox: `0 0 ${W} ${H}`,
+      children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+        x: PAD.l + 2,
+        y: 11,
+        fill: _tokens.colors.textFaint,
+        anchor: "start",
+        children: title
+      }) : null, body]
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  /* fixed catalog aspect (320×150); the Svg scales the viewBox to fit */
+  root: {
+    width: '100%',
+    aspectRatio: W / H
+  }
+});
+//# sourceMappingURL=VitalsStrip.js.map