@lockin90/ui-native 0.0.0-stage → 1.0.1

package/lib/module/components/SupplementChart.js

@@ -0,0 +1,997 @@
+"use strict";
+
+import { useId } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Svg, { Circle, ClipPath, Defs, FeGaussianBlur, Filter, G, Line, LinearGradient, Path, Rect, Stop, Text as SvgText } from 'react-native-svg';
+import { colors, fonts } from '@lockin90/tokens';
+
+/* SupplementChart — the catalog supplement-level family (SP-01…SP-10,
+   lockin90-design/charts/supplement-charts.html): saturation, decay and
+   adherence — what's actually in the system. Nine variants drawn in a fixed
+   320×150 viewBox: the creatine saturation story, active-stack rows,
+   half-life decay, dose-vs-level, depletion forecast, adherence strip,
+   multi-supplement kinetics and the liquid battery vessels (glass body +
+   battery cap + wavy two-Q liquid surface + clipped bubbles + zone-colored
+   fill + a % readout that inverts when submerged). Native twin of
+   `@lockin90/ui` SupplementChart — same prop API; glows are Gaussian-blurred
+   duplicate shapes (Fabric-native SVG filters — Ring precedent).
+   (SP-08 does not exist — a numbering gap in the catalog.) */
+
+/* SP-10 — one large 56px vessel + FULL/LOW ticks + stats */
+
+/** One `active-stack` row (SP-02). */
+
+/** One `stack-levels` curve (SP-07). */
+
+/** One liquid vessel (SP-09). */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* ---- catalog geometry (viewBox units — charts/catalog.js) ---- */
+const W = 320;
+const H = 150;
+const PAD = {
+  l: 10,
+  r: 12,
+  t: 16,
+  b: 14
+};
+const PLOT_W = W - PAD.l - PAD.r; // 298
+const PLOT_H = H - PAD.t - PAD.b; // 120
+
+/** Round for compact attribute values. */
+const rd = n => Math.round(n * 100) / 100;
+
+/** y of a 0–1 plot fraction. */
+const yAt = v => PAD.t + (1 - v) * PLOT_H;
+/** the supplement page's inset day x-scale. */
+const dayX = (i, n) => PAD.l + 14 + (PLOT_W - 22) * i / Math.max(1, n - 1);
+/** the supplement page's level y-scale (levels ride 6%…92% of the plot). */
+const lvlY = v => yAt(0.06 + v * 0.86);
+
+/** zone verdict for a 0–1 level (the catalog vessel/zoneOf thresholds). */
+const zoneOf = v => v >= 0.62 ? colors.zoneHigh : v >= 0.38 ? colors.zoneMid : colors.zoneLow;
+
+/** the catalog saturation model: doses build toward 1, missed days decay. */
+function satLevels(taken, kUp, kDown) {
+  let lvl = 0;
+  return taken.map(t => {
+    lvl = t ? lvl + (1 - lvl) * kUp : lvl * (1 - kDown);
+    return lvl;
+  });
+}
+/** Straight polyline through the points. */
+function linePath(pts) {
+  if (pts.length === 0) return '';
+  return pts.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${rd(x)},${rd(y)}`).join(' ');
+}
+
+/** Fritsch–Carlson monotone cubic — the catalog's `smoothPath` (no overshoot). */
+function monotonePath(pts) {
+  const n = pts.length;
+  if (n < 3) return linePath(pts);
+  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;
+}
+
+/** Mono catalog label (8.5px JetBrains Mono, ~.06em tracking). */
+function Label({
+  x,
+  y,
+  fill,
+  anchor = 'middle',
+  children
+}) {
+  return /*#__PURE__*/_jsx(SvgText, {
+    x: rd(x),
+    y: rd(y),
+    fill: fill,
+    textAnchor: anchor,
+    fontSize: 8.5,
+    fontFamily: 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__*/_jsxs(G, {
+    children: [/*#__PURE__*/_jsx(Rect, {
+      x: rd(xa),
+      y: rd(y - 6.5),
+      width: rd(wpx),
+      height: 13,
+      rx: 6.5,
+      fill: `${colors.bg0}C7`,
+      stroke: color,
+      strokeOpacity: 0.35,
+      strokeWidth: 0.8
+    }), /*#__PURE__*/_jsx(SvgText, {
+      x: rd(xa + wpx / 2),
+      y: rd(y + 2.8),
+      fill: color,
+      textAnchor: "middle",
+      fontSize: 8,
+      fontFamily: fonts.mono,
+      letterSpacing: 0.4,
+      children: text
+    })]
+  });
+}
+
+/** Glowing dot + static halo ring — the catalog `pulseDot`. Native draws a
+ *  wider faint duplicate for the glow and a static ring for the pulse (no
+ *  SMIL/JS animation — the Ring precedent). */
+function PulseDot({
+  x,
+  y,
+  color
+}) {
+  return /*#__PURE__*/_jsxs(G, {
+    children: [/*#__PURE__*/_jsx(Circle, {
+      cx: rd(x),
+      cy: rd(y),
+      r: 6.6,
+      fill: color,
+      opacity: 0.35
+    }), /*#__PURE__*/_jsx(Circle, {
+      cx: rd(x),
+      cy: rd(y),
+      r: 3.6,
+      fill: color
+    }), /*#__PURE__*/_jsx(Circle, {
+      cx: rd(x),
+      cy: rd(y),
+      r: 7,
+      fill: "none",
+      stroke: color,
+      strokeWidth: 1.4,
+      opacity: 0.4
+    })]
+  });
+}
+
+/** SATURATED / LOW zone level bands (5% washes + edge band labels — right by
+ *  default; `labelsLeft` moves them to the band's left edge when the right
+ *  edge is occupied, e.g. by SP-07's end-of-line series pills). */
+function LevelBands({
+  labelsLeft = false
+}) {
+  const bands = [[0.72, 1, colors.zoneHigh, 'SATURATED'], [0.35, 0.72, colors.zoneMid, ''], [0, 0.35, colors.zoneLow, 'LOW']];
+  return /*#__PURE__*/_jsx(G, {
+    children: bands.map(([lo, hi, color, text], i) => /*#__PURE__*/_jsxs(G, {
+      children: [/*#__PURE__*/_jsx(Rect, {
+        x: PAD.l,
+        y: rd(lvlY(hi)),
+        width: PLOT_W,
+        height: rd(lvlY(lo) - lvlY(hi)),
+        fill: color,
+        opacity: 0.05
+      }), text ? /*#__PURE__*/_jsx(Label, {
+        x: labelsLeft ? PAD.l + 2 : W - PAD.r - 2,
+        y: lvlY(hi) + 9,
+        fill: color,
+        anchor: labelsLeft ? 'start' : 'end',
+        children: text
+      }) : null]
+    }, i))
+  });
+}
+
+/** Dose dots under the plot — filled mint = taken, dashed coral = missed. */
+function DoseDots({
+  taken,
+  y
+}) {
+  const n = taken.length;
+  return /*#__PURE__*/_jsx(G, {
+    children: taken.map((t, i) => t ? /*#__PURE__*/_jsx(Circle, {
+      cx: rd(dayX(i, n)),
+      cy: y,
+      r: 3,
+      fill: colors.mint
+    }, i) : /*#__PURE__*/_jsx(Circle, {
+      cx: rd(dayX(i, n)),
+      cy: y,
+      r: 3,
+      fill: "none",
+      stroke: colors.zoneLow,
+      strokeWidth: 1.3,
+      strokeDasharray: [1.5, 1.5]
+    }, i))
+  });
+}
+
+/** One liquid battery vessel: cap + glass body + clipped wavy liquid +
+ *  surface highlight + bubbles + a % that inverts when submerged. */
+function VesselGlyph({
+  x,
+  y,
+  w,
+  h,
+  level,
+  vid,
+  bubbles,
+  shine
+}) {
+  const lv = Math.max(0, Math.min(1, level));
+  const col = zoneOf(lv);
+  const lt = y + h - 2 - lv * (h - 6);
+  const amp = 2.6;
+  const xw = x + 1.5;
+  const ww = w - 3;
+  // wavy liquid surface — TWO Q-curves (the signature), then close to the base
+  const surface = `M${rd(xw)} ${rd(lt)}` + `Q${rd(xw + ww * 0.25)} ${rd(lt - amp)} ${rd(xw + ww * 0.5)} ${rd(lt)}` + `Q${rd(xw + ww * 0.75)} ${rd(lt + amp)} ${rd(xw + ww)} ${rd(lt)}`;
+  const wave = `${surface}L${rd(xw + ww)} ${rd(y + h)}L${rd(xw)} ${rd(y + h)}Z`;
+  // % readout placement: centered in the liquid when the fill is tall enough
+  // to hold it (≥ 30%), else riding just above the wavy surface
+  const inLiquid = lv >= 0.3;
+  const pctY = inLiquid ? (lt + y + h) / 2 + 3 : lt - amp - 4;
+  const bubbleSpec = [[0.3, 0.35, 2], [0.62, 0.55, 1.4], [0.45, 0.75, 1.8], [0.72, 0.3, 1.2]];
+  return /*#__PURE__*/_jsxs(G, {
+    children: [/*#__PURE__*/_jsxs(Defs, {
+      children: [/*#__PURE__*/_jsx(ClipPath, {
+        id: `${vid}-c`,
+        children: /*#__PURE__*/_jsx(Rect, {
+          x: rd(x + 1.5),
+          y: rd(y + 1.5),
+          width: rd(w - 3),
+          height: rd(h - 3),
+          rx: 7.5
+        })
+      }), /*#__PURE__*/_jsxs(LinearGradient, {
+        id: `${vid}-l`,
+        x1: "0%",
+        y1: "0%",
+        x2: "0%",
+        y2: "100%",
+        children: [/*#__PURE__*/_jsx(Stop, {
+          offset: "0%",
+          stopColor: col,
+          stopOpacity: 0.9
+        }), /*#__PURE__*/_jsx(Stop, {
+          offset: "100%",
+          stopColor: col,
+          stopOpacity: 0.45
+        })]
+      }), shine ?
+      /*#__PURE__*/
+      /* real Gaussian blur for the liquid shine — the native twin of the
+         web vessel's `.lk-supp-shine-wide` `blur(6px)` fill duplicate */
+      _jsx(Filter, {
+        id: `${vid}-blur`,
+        filterUnits: "userSpaceOnUse",
+        x: x - 12,
+        y: y - 12,
+        width: w + 24,
+        height: h + 24,
+        children: /*#__PURE__*/_jsx(FeGaussianBlur, {
+          stdDeviation: 3
+        })
+      }) : null]
+    }), /*#__PURE__*/_jsx(Rect, {
+      x: rd(x + w / 2 - w * 0.2),
+      y: y - 5,
+      width: rd(w * 0.4),
+      height: 5,
+      rx: 2,
+      fill: colors.text,
+      opacity: 0.28
+    }), /*#__PURE__*/_jsx(Rect, {
+      x: x,
+      y: y,
+      width: w,
+      height: h,
+      rx: 9,
+      fill: colors.glass,
+      stroke: colors.text,
+      strokeOpacity: 0.22,
+      strokeWidth: 1.4
+    }), shine ? /*#__PURE__*/_jsx(Path, {
+      d: wave,
+      fill: col,
+      opacity: 0.5,
+      filter: `url(#${vid}-blur)`
+    }) : null, /*#__PURE__*/_jsx(Path, {
+      d: wave,
+      fill: `url(#${vid}-l)`,
+      clipPath: `url(#${vid}-c)`
+    }), /*#__PURE__*/_jsx(Path, {
+      d: surface,
+      fill: "none",
+      stroke: col,
+      strokeWidth: 1.6,
+      opacity: 0.95,
+      clipPath: `url(#${vid}-c)`
+    }), bubbles ? bubbleSpec.map(([fx, fy, r], i) => /*#__PURE__*/_jsx(Circle, {
+      cx: rd(x + w * fx),
+      cy: rd(y + h - (h - 6) * lv * fy),
+      r: r,
+      fill: "none",
+      stroke: colors.text,
+      strokeOpacity: 0.4,
+      strokeWidth: 0.8,
+      clipPath: `url(#${vid}-c)`
+    }, i)) : null, /*#__PURE__*/_jsx(SvgText, {
+      x: rd(x + w / 2),
+      y: rd(pctY),
+      fill: inLiquid ? colors.bg0 : colors.text,
+      textAnchor: "middle",
+      fontSize: 10.5,
+      fontWeight: "600",
+      fontFamily: fonts.mono,
+      children: String(Math.round(lv * 100))
+    })]
+  });
+}
+
+/* the catalog's creatine story — 5 doses · 3 missed · rebuild */
+const CREATINE_DOSES = [true, true, true, true, true, false, false, false, true, true, true, true, true, true];
+const DEFAULT_ROWS = [{
+  name: 'CREATINE',
+  level: 0.82,
+  color: colors.mint,
+  status: 'SATURATED'
+}, {
+  name: 'MAGNESIUM',
+  level: 0.64,
+  color: colors.cyan,
+  status: 'OK'
+}, {
+  name: 'VITAMIN D',
+  level: 0.31,
+  color: colors.zoneMid,
+  status: 'TAKE TODAY'
+}, {
+  name: 'OMEGA-3',
+  level: 0.12,
+  color: colors.zoneLow,
+  status: 'DEPLETED'
+}];
+const DEFAULT_VESSELS = [{
+  name: 'CREATINE',
+  level: 0.82
+}, {
+  name: 'MAGNES.',
+  level: 0.64
+}, {
+  name: 'VIT D',
+  level: 0.31
+}, {
+  name: 'OMEGA-3',
+  level: 0.12
+}, {
+  name: 'ZINC',
+  level: 0.55
+}];
+const DEFAULT_FORECAST_PAST = [0.2, 0.44, 0.62, 0.75, 0.84, 0.9];
+const DOSE_LEVEL_DOSES = [true, true, false, true, true, true, false, true, true, false, false, true, true, true];
+const ADHERENCE_DOSES = [true, true, true, false, true, true, true, true, false, false, true, true, true, true];
+
+/** derive an SP-02 status pill from the level. */
+const statusOf = v => v >= 0.72 ? 'SATURATED' : v >= 0.38 ? 'OK' : v >= 0.2 ? 'TAKE TODAY' : 'DEPLETED';
+
+/**
+ * SupplementChart — the supplement-level family (catalog SP-01…SP-10):
+ * saturation, decay, adherence and the liquid tank view. Level variants share
+ * the zone level-band frame (SATURATED ≥ 0.72 / LOW < 0.35) and the catalog
+ * saturation model (`kUp`/`kDown`) so real dose logs drive the story; the
+ * battery variants render the signature glass vessels with a wavy clipped
+ * liquid, bubbles and zone-colored fill. All levels are 0–1.
+ */
+export function SupplementChart({
+  variant = 'saturation-story',
+  doses,
+  levels,
+  kUp = 0.32,
+  kDown = 0.18,
+  rows = DEFAULT_ROWS,
+  series,
+  vessels = DEFAULT_VESSELS,
+  level = 0.78,
+  halfLifeH = 5,
+  windowH = 12,
+  nowH = 6.5,
+  doseMg = 200,
+  doseLabel,
+  nowNote,
+  projectDays = 14,
+  decayRate = 0.82,
+  lowThreshold = 0.35,
+  restockNote,
+  note,
+  noteAt,
+  color,
+  heroCaption = 'CREATINE · 5G DAILY',
+  heroStatus = 'SATURATED',
+  heroStatusColor = colors.zoneHigh,
+  heroNote = 'HOLDS ~9 DAYS OFF',
+  lowAt = 0.35,
+  title,
+  stat,
+  statColor = colors.text,
+  bands,
+  startLabel,
+  endLabel,
+  shine = false,
+  ariaLabel = 'Supplement level chart',
+  style
+}) {
+  const uid = useId().replace(/[^a-zA-Z0-9-]/g, '');
+  const blurId = `lk-supp-blur-${uid}`;
+  const lineColor = color ?? (variant === 'depletion-forecast' || variant === 'adherence-level' ? colors.cyan : colors.mint);
+
+  /** level line + optional glow underlay (Gaussian-blurred duplicate on native). */
+  const levelLine = (pts, opts = {}) => {
+    const d = monotonePath(pts);
+    const stroke = opts.stroke ?? lineColor;
+    const sw = opts.w ?? 2.5;
+    return /*#__PURE__*/_jsxs(G, {
+      children: [opts.glow ? /*#__PURE__*/_jsx(Path, {
+        d: d,
+        fill: "none",
+        stroke: stroke,
+        strokeWidth: sw + 5,
+        strokeLinecap: "round",
+        opacity: 0.45,
+        filter: `url(#${blurId})`
+      }) : null, /*#__PURE__*/_jsx(Path, {
+        d: d,
+        fill: "none",
+        stroke: stroke,
+        strokeWidth: sw,
+        strokeLinecap: "round",
+        strokeDasharray: opts.dash,
+        opacity: opts.opacity
+      })]
+    });
+  };
+  let body = null;
+  let showBands = false;
+  let bandLabelsLeft = false;
+  let axis = null;
+  if (variant === 'saturation-story') {
+    /* SP-01 — the creatine story */
+    const taken = doses ?? CREATINE_DOSES;
+    const n = taken.length;
+    const lv = levels ?? satLevels(taken, kUp, kDown);
+    const pts = lv.map((v, i) => [dayX(i, n), lvlY(v)]);
+    showBands = bands ?? true;
+    axis = [startLabel ?? 'DAY 1', endLabel ?? 'TODAY'];
+    // the missed window: first run of ≥2 consecutive misses
+    let m0 = -1;
+    let m1 = -1;
+    for (let i = 0; i < n; i++) {
+      if (!taken[i]) {
+        if (m0 === -1) {
+          m0 = i;
+          m1 = i;
+        } else if (m1 === i - 1) {
+          m1 = i;
+        }
+      } else if (m0 !== -1 && m1 >= m0 + 1) break;else if (m0 !== -1 && m1 === m0) {
+        m0 = -1;
+        m1 = -1;
+      }
+    }
+    const hasMiss = m0 !== -1 && m1 > m0;
+    // SATURATED pill: the peak before the missed window, else first level ≥ 0.72
+    const satIdx = hasMiss ? m0 - 1 : lv.findIndex(v => v >= 0.72);
+    const nAt = noteAt ?? (hasMiss ? m1 : -1);
+    const noteText = note ?? (nAt >= 0 ? `STILL ${Math.round((lv[nAt] ?? 0) * 100)}% · REBUILDING` : undefined);
+    body = n === 0 ? null : /*#__PURE__*/_jsxs(G, {
+      children: [/*#__PURE__*/_jsx(DoseDots, {
+        taken: taken,
+        y: H - PAD.b - 4
+      }), levelLine(pts, {
+        glow: shine
+      }), hasMiss ? /*#__PURE__*/_jsxs(G, {
+        children: [/*#__PURE__*/_jsx(Rect, {
+          x: rd(dayX(m0, n) - 6),
+          y: PAD.t,
+          width: rd(dayX(m1, n) - dayX(m0, n) + 12),
+          height: PLOT_H - 10,
+          rx: 5,
+          fill: colors.zoneLow,
+          opacity: 0.07
+        }), /*#__PURE__*/_jsx(Tag, {
+          x: (dayX(m0, n) + dayX(m1, n)) / 2,
+          y: PAD.t + 8,
+          color: colors.zoneLow,
+          text: `MISSED × ${m1 - m0 + 1}`
+        })]
+      }) : null, satIdx >= 0 && lv[satIdx] >= 0.72 ? /*#__PURE__*/_jsx(Tag, {
+        x: dayX(satIdx, n),
+        y: pts[satIdx][1] - 13,
+        color: colors.mint,
+        text: "SATURATED"
+      }) : null, noteText && nAt >= 0 && nAt < n ? /*#__PURE__*/_jsx(Tag, {
+        x: dayX(nAt, n) + 10,
+        y: pts[nAt][1] + 15,
+        color: colors.zoneMid,
+        anchor: "start",
+        text: noteText
+      }) : null, /*#__PURE__*/_jsx(PulseDot, {
+        x: pts[n - 1][0],
+        y: pts[n - 1][1],
+        color: colors.mint
+      })]
+    });
+  } else if (variant === 'active-stack') {
+    /* SP-02 — 4 rows: name + level bar + % + status pill */
+    const rws = rows.slice(0, 4);
+    const rh = PLOT_H / 4;
+    const barW = PLOT_W - 150;
+    body = /*#__PURE__*/_jsx(G, {
+      children: rws.map((r, ri) => {
+        const y = PAD.t + 8 + ri * rh + rh / 2;
+        const c = r.color ?? zoneOf(r.level);
+        return /*#__PURE__*/_jsxs(G, {
+          children: [/*#__PURE__*/_jsx(Label, {
+            x: PAD.l + 66,
+            y: y - 8,
+            fill: colors.textDim,
+            anchor: "end",
+            children: r.name
+          }), /*#__PURE__*/_jsx(Rect, {
+            x: PAD.l + 74,
+            y: rd(y - 13),
+            width: barW,
+            height: 10,
+            rx: 5,
+            fill: colors.glass2
+          }), /*#__PURE__*/_jsx(Rect, {
+            x: PAD.l + 74,
+            y: rd(y - 13),
+            width: rd(Math.max(10, barW * Math.max(0, Math.min(1, r.level)))),
+            height: 10,
+            rx: 5,
+            fill: c,
+            opacity: 0.92
+          }), /*#__PURE__*/_jsx(Label, {
+            x: PAD.l + 80 + barW,
+            y: y - 5,
+            fill: c,
+            anchor: "start",
+            children: `${Math.round(r.level * 100)}%`
+          }), /*#__PURE__*/_jsx(Tag, {
+            x: PAD.l + 74 + barW,
+            y: y + 6,
+            color: c,
+            anchor: "end",
+            text: r.status ?? statusOf(r.level)
+          })]
+        }, ri);
+      })
+    });
+  } else if (variant === 'half-life') {
+    /* SP-03 — exponential decay from the dose */
+    const n = 25;
+    const pts = [];
+    for (let i = 0; i < n; i++) {
+      const t = i / (n - 1) * windowH;
+      pts.push([dayX(i, n), lvlY(Math.pow(0.5, t / halfLifeH))]);
+    }
+    showBands = bands ?? true;
+    axis = [startLabel ?? '0H', endLabel ?? `+${windowH}H`];
+    const remain = Math.pow(0.5, nowH / halfLifeH);
+    const nowX = PAD.l + 14 + (PLOT_W - 22) * Math.max(0, Math.min(1, nowH / windowH));
+    const nowY = lvlY(remain);
+    body = /*#__PURE__*/_jsxs(G, {
+      children: [levelLine(pts, {
+        stroke: color ?? colors.zoneMid,
+        glow: shine
+      }), /*#__PURE__*/_jsx(Line, {
+        x1: rd(nowX),
+        x2: rd(nowX),
+        y1: PAD.t - 2,
+        y2: H - PAD.b,
+        stroke: colors.text,
+        strokeOpacity: 0.22,
+        strokeWidth: 1
+      }), /*#__PURE__*/_jsx(Label, {
+        x: nowX,
+        y: PAD.t - 5,
+        fill: colors.textDim,
+        children: "NOW"
+      }), /*#__PURE__*/_jsx(PulseDot, {
+        x: nowX,
+        y: nowY,
+        color: colors.zoneMid
+      }), /*#__PURE__*/_jsx(Tag, {
+        x: nowX + 10,
+        y: nowY - 14,
+        color: colors.zoneMid,
+        anchor: "start",
+        text: nowNote ?? `STILL ACTIVE · ${Math.round(doseMg * remain)} MG`
+      }), /*#__PURE__*/_jsx(Tag, {
+        x: dayX(2, n) + 16,
+        y: lvlY(0.97) + 12,
+        color: colors.textDim,
+        anchor: "start",
+        text: doseLabel ?? `DOSE ${doseMg} MG`
+      })]
+    });
+  } else if (variant === 'dose-level') {
+    /* SP-04 — dose dots + faint intake stems + resulting level line */
+    const taken = doses ?? DOSE_LEVEL_DOSES;
+    const n = taken.length;
+    const lv = levels ?? satLevels(taken, kUp, kDown);
+    const pts = lv.map((v, i) => [dayX(i, n), lvlY(v)]);
+    showBands = bands ?? true;
+    body = n === 0 ? null : /*#__PURE__*/_jsxs(G, {
+      children: [taken.map((t, i) => t ? /*#__PURE__*/_jsx(Line, {
+        x1: rd(dayX(i, n)),
+        x2: rd(dayX(i, n)),
+        y1: H - PAD.b,
+        y2: rd(lvlY(lv[i])),
+        stroke: colors.mint,
+        strokeWidth: 3,
+        strokeLinecap: "round",
+        opacity: 0.22
+      }, i) : null), /*#__PURE__*/_jsx(DoseDots, {
+        taken: taken,
+        y: H - PAD.b - 4
+      }), levelLine(pts, {
+        glow: shine
+      }), /*#__PURE__*/_jsx(Tag, {
+        x: W - PAD.r - 4,
+        y: PAD.t + 10,
+        color: colors.textDim,
+        anchor: "end",
+        text: note ?? 'DOTS = DOSES · LINE = LEVEL'
+      })]
+    });
+  } else if (variant === 'depletion-forecast') {
+    /* SP-05 — solid past · dashed decay projection · LOW crossing pulse */
+    const past = levels ?? DEFAULT_FORECAST_PAST;
+    const n = Math.max(projectDays, past.length + 1);
+    const all = past.slice();
+    for (let i = past.length; i < n; i++) all.push(all[i - 1] * decayRate);
+    const pts = all.map((v, i) => [dayX(i, n), lvlY(v)]);
+    showBands = bands ?? true;
+    const nowPt = past.length > 0 ? pts[past.length - 1] : null;
+    let crossI = -1;
+    for (let i = past.length; i < n; i++) if (all[i] < lowThreshold) {
+      crossI = i;
+      break;
+    }
+    body = nowPt == null ? null : /*#__PURE__*/_jsxs(G, {
+      children: [levelLine(pts.slice(0, past.length), {
+        stroke: lineColor,
+        glow: shine
+      }), levelLine(pts.slice(past.length - 1), {
+        stroke: lineColor,
+        dash: [5, 5],
+        opacity: 0.75
+      }), /*#__PURE__*/_jsx(Line, {
+        x1: rd(nowPt[0]),
+        x2: rd(nowPt[0]),
+        y1: PAD.t - 2,
+        y2: H - PAD.b,
+        stroke: colors.text,
+        strokeOpacity: 0.22,
+        strokeWidth: 1
+      }), /*#__PURE__*/_jsx(Label, {
+        x: nowPt[0],
+        y: PAD.t - 5,
+        fill: colors.textDim,
+        children: "NOW"
+      }), crossI >= 0 ? /*#__PURE__*/_jsxs(G, {
+        children: [/*#__PURE__*/_jsx(PulseDot, {
+          x: pts[crossI][0],
+          y: pts[crossI][1],
+          color: colors.zoneLow
+        }), /*#__PURE__*/_jsx(Tag, {
+          x: pts[crossI][0] - 6,
+          y: pts[crossI][1] - 15,
+          color: colors.zoneLow,
+          anchor: "end",
+          text: restockNote ?? `LOW IN ${crossI - past.length + 1} DAYS — RESTOCK`
+        })]
+      }) : null]
+    });
+  } else if (variant === 'adherence-level') {
+    /* SP-06 — taken/missed day cells + the resulting level line under */
+    const taken = doses ?? ADHERENCE_DOSES;
+    const n = taken.length;
+    const lv = levels ?? satLevels(taken, kUp, kDown);
+    // the line rides at 62% of the model level so it clears the cells strip
+    const pts = lv.map((v, i) => [dayX(i, n), lvlY(v * 0.62)]);
+    const cw = (PLOT_W - 26) / Math.max(1, n);
+    body = n === 0 ? null : /*#__PURE__*/_jsxs(G, {
+      children: [taken.map((t, i) => /*#__PURE__*/_jsx(Rect, {
+        x: rd(dayX(i, n) - cw / 2 + 1),
+        y: PAD.t + 4,
+        width: rd(cw - 2),
+        height: 12,
+        rx: 3,
+        fill: t ? colors.mint : 'none',
+        stroke: t ? 'none' : colors.zoneLow,
+        strokeWidth: t ? 0 : 1,
+        strokeDasharray: t ? undefined : [2, 2],
+        opacity: t ? 0.75 : 1
+      }, i)), /*#__PURE__*/_jsx(Label, {
+        x: PAD.l + 14,
+        y: PAD.t + 26,
+        fill: colors.textFaint,
+        anchor: "start",
+        children: "TAKEN / MISSED"
+      }), levelLine(pts, {
+        stroke: lineColor,
+        glow: shine
+      }), /*#__PURE__*/_jsx(Tag, {
+        x: W - PAD.r - 4,
+        y: lvlY(0.62 * lv[n - 1]) - 13,
+        color: lineColor,
+        anchor: "end",
+        text: note ?? `LEVEL ${Math.round(lv[n - 1] * 100)}%`
+      })]
+    });
+  } else if (variant === 'stack-levels') {
+    /* SP-07 — 3 level curves with different kinetics + end-of-line pills */
+    const trio = (series ?? DEFAULT_STACK_SERIES).slice(0, 3);
+    const widths = [2.5, 2, 1.8];
+    const opacities = [1, 0.85, 0.8];
+    const colorsBy = [colors.mint, colors.cyan, colors.zoneMid];
+    showBands = bands ?? true;
+    bandLabelsLeft = true; // the right edge belongs to the series pills
+    // pill y from each series' FINAL level; overlapping pills are pushed apart
+    // (min gap = pill height + 2) top-down, then clamped inside the plot
+    const pillH = 13;
+    const pillYs = trio.map(s => lvlY(s.levels[s.levels.length - 1] ?? 0));
+    const order = pillYs.map((y, si) => ({
+      si,
+      y
+    })).sort((a, b) => a.y - b.y);
+    const yMin = PAD.t + pillH / 2;
+    const yMax = H - PAD.b - pillH / 2;
+    order.forEach((p, i) => {
+      p.y = Math.max(yMin, Math.min(p.y, yMax));
+      if (i > 0) p.y = Math.max(p.y, order[i - 1].y + pillH + 2);
+    });
+    // if the pushed chain ran past the plot bottom, shift it back up whole
+    const over = order.length > 0 ? order[order.length - 1].y - yMax : 0;
+    if (over > 0) order.forEach(p => p.y -= over);
+    order.forEach(p => pillYs[p.si] = p.y);
+    body = /*#__PURE__*/_jsxs(G, {
+      children: [trio.map((s, si) => {
+        const n = s.levels.length;
+        const pts = s.levels.map((v, i) => [dayX(i, n), lvlY(v)]);
+        return /*#__PURE__*/_jsx(G, {
+          children: levelLine(pts, {
+            stroke: s.color ?? colorsBy[si],
+            w: widths[si],
+            dash: s.dash ? [4, 3] : undefined,
+            opacity: opacities[si] === 1 ? undefined : opacities[si],
+            glow: shine && si === 0
+          })
+        }, si);
+      }), trio.map((s, si) => /*#__PURE__*/_jsx(Tag, {
+        x: W - PAD.r - 4,
+        y: pillYs[si],
+        color: s.color ?? colorsBy[si],
+        anchor: "end",
+        text: s.name
+      }, si))]
+    });
+  } else if (variant === 'liquid-batteries') {
+    /* SP-09 — 5 battery vessels in a bar-chart row */
+    const vs = vessels.slice(0, 5);
+    const n = vs.length;
+    const slot = PLOT_W / n;
+    const bw = 34;
+    const bh = PLOT_H - 26;
+    body = /*#__PURE__*/_jsx(G, {
+      children: vs.map((v, i) => {
+        const x = PAD.l + i * slot + (slot - bw) / 2;
+        const y = PAD.t + 10;
+        return /*#__PURE__*/_jsxs(G, {
+          children: [/*#__PURE__*/_jsx(VesselGlyph, {
+            x: x,
+            y: y,
+            w: bw,
+            h: bh,
+            level: v.level,
+            vid: `lk-supp-${uid}-${i}`,
+            bubbles: v.level > 0.3,
+            shine: shine
+          }), /*#__PURE__*/_jsx(Label, {
+            x: x + bw / 2,
+            y: H - 2,
+            fill: zoneOf(v.level),
+            children: v.name
+          })]
+        }, i);
+      })
+    });
+  } else {
+    /* SP-10 — battery-hero: one large 56px vessel + side ticks + stats */
+    const bx = 78;
+    const by = PAD.t + 12;
+    const bw = 56;
+    const bh = PLOT_H - 20;
+    const lowY = by + bh - (bh - 6) * lowAt;
+    body = /*#__PURE__*/_jsxs(G, {
+      children: [/*#__PURE__*/_jsx(VesselGlyph, {
+        x: bx,
+        y: by,
+        w: bw,
+        h: bh,
+        level: level,
+        vid: `lk-supp-${uid}-hero`,
+        bubbles: true,
+        shine: shine
+      }), /*#__PURE__*/_jsx(Line, {
+        x1: bx + bw + 4,
+        x2: bx + bw + 10,
+        y1: by + 4,
+        y2: by + 4,
+        stroke: colors.text,
+        strokeOpacity: 0.35,
+        strokeWidth: 1
+      }), /*#__PURE__*/_jsx(Label, {
+        x: bx + bw + 14,
+        y: by + 7,
+        fill: colors.textFaint,
+        anchor: "start",
+        children: "FULL"
+      }), /*#__PURE__*/_jsx(Line, {
+        x1: bx + bw + 4,
+        x2: bx + bw + 10,
+        y1: rd(lowY),
+        y2: rd(lowY),
+        stroke: colors.zoneLow,
+        strokeWidth: 1
+      }), /*#__PURE__*/_jsx(Label, {
+        x: bx + bw + 14,
+        y: lowY + 3,
+        fill: colors.zoneLow,
+        anchor: "start",
+        children: "LOW"
+      }), /*#__PURE__*/_jsx(SvgText, {
+        x: 196,
+        y: 56,
+        fill: colors.text,
+        fontSize: 24,
+        fontFamily: fonts.display,
+        fontWeight: "700",
+        children: `${Math.round(Math.max(0, Math.min(1, level)) * 100)}%`
+      }), heroCaption ? /*#__PURE__*/_jsx(Label, {
+        x: 196,
+        y: 72,
+        fill: colors.textDim,
+        anchor: "start",
+        children: heroCaption
+      }) : null, heroStatus ? /*#__PURE__*/_jsx(Tag, {
+        x: 196 + 34,
+        y: 92,
+        color: heroStatusColor,
+        text: heroStatus
+      }) : null, heroNote ? /*#__PURE__*/_jsx(Label, {
+        x: 196,
+        y: 112,
+        fill: colors.textFaint,
+        anchor: "start",
+        children: heroNote
+      }) : null]
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    accessibilityRole: "image",
+    accessibilityLabel: ariaLabel,
+    style: [styles.root, style],
+    children: /*#__PURE__*/_jsxs(Svg, {
+      width: "100%",
+      height: "100%",
+      viewBox: `0 0 ${W} ${H}`,
+      children: [/*#__PURE__*/_jsx(Defs, {
+        children: /*#__PURE__*/_jsx(Filter, {
+          id: blurId,
+          filterUnits: "userSpaceOnUse",
+          x: -10,
+          y: -10,
+          width: W + 20,
+          height: H + 20,
+          children: /*#__PURE__*/_jsx(FeGaussianBlur, {
+            stdDeviation: 2.5
+          })
+        })
+      }), title ? /*#__PURE__*/_jsx(Label, {
+        x: PAD.l + 2,
+        y: 11,
+        fill: colors.textFaint,
+        anchor: "start",
+        children: title
+      }) : null, stat ? /*#__PURE__*/_jsx(SvgText, {
+        x: W - PAD.r - 2,
+        y: 12,
+        fill: statColor,
+        textAnchor: "end",
+        fontSize: 12,
+        fontFamily: fonts.display,
+        fontWeight: "700",
+        children: stat
+      }) : null, showBands ? /*#__PURE__*/_jsx(LevelBands, {
+        labelsLeft: bandLabelsLeft
+      }) : null, body, axis ? /*#__PURE__*/_jsxs(G, {
+        children: [/*#__PURE__*/_jsx(Label, {
+          x: PAD.l + 14,
+          y: H - 2,
+          fill: colors.textFaint,
+          anchor: "start",
+          children: axis[0]
+        }), /*#__PURE__*/_jsx(Label, {
+          x: W - PAD.r - 2,
+          y: H - 2,
+          fill: colors.textFaint,
+          anchor: "end",
+          children: axis[1]
+        })]
+      }) : null]
+    })
+  });
+}
+
+/* SP-07 default — the catalog's three kinetics (slow build · mid · sawtooth) */
+const DEFAULT_STACK_SERIES = [{
+  name: 'CREATINE',
+  levels: satLevels(CREATINE_DOSES, 0.3, 0.12),
+  color: colors.mint
+}, {
+  name: 'MAGNESIUM',
+  levels: satLevels([true, false, true, true, false, true, true, false, true, true, true, false, true, true], 0.45, 0.35),
+  color: colors.cyan
+}, {
+  name: 'CAFFEINE',
+  levels: Array.from({
+    length: 14
+  }, (_, i) => 0.15 + 0.5 * Math.abs(Math.sin(i * 1.7)) * Math.pow(0.9, i % 3)),
+  color: colors.zoneMid,
+  dash: true
+}];
+const styles = StyleSheet.create({
+  /* fixed catalog aspect (320×150); the Svg scales the viewBox to fit */
+  root: {
+    width: '100%',
+    aspectRatio: W / H
+  }
+});
+//# sourceMappingURL=SupplementChart.js.map