@lockin90/ui-native 0.0.0-stage → 1.0.1

package/lib/module/components/MetaphorWidget.js

@@ -0,0 +1,1048 @@
+"use strict";
+
+import { useId } from 'react';
+import { View } from 'react-native';
+import Svg, { Circle, ClipPath, FeGaussianBlur, Filter, Defs, G, Line, LinearGradient, Path, Rect, Stop, Text as SvgText } from 'react-native-svg';
+import { colors, fonts } from '@lockin90/tokens';
+
+/* MetaphorWidget — the catalog metaphor-widget family (MT-01…MT-12,
+   lockin90-design/charts/metaphor-charts.html): objects that tell the story —
+   thermometers, hourglasses, gardens, mountains, bottles, plates and breath
+   orbs, all drawn in the fixed 320×150 catalog viewBox. Native twin of
+   `@lockin90/ui` MetaphorWidget — same prop API + geometry; SMIL loops (YOU
+   pulse, breath orb) render static mid-states here and every `shine` glow is
+   a real Gaussian-blurred duplicate shape (Fabric-native SVG filters in
+   react-native-svg 15). */
+
+/** Catalog variant names (`lockin90-design/charts/metaphor-charts.html`). */
+
+/* MT-12 — breaths/min curve into the shaded calm zone */
+
+/** One plant in the `habit-garden` (MT-05). */
+
+/** One plate on the `meal-plates` day strip (MT-10). */
+
+/** One flag on the `mountain-route` profile (MT-07). */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* --------------------------------------------------------------- geometry
+ * The catalog canvas: 320×150, pad l10 r12 t16 b14 (catalog.js). */
+const W = 320;
+const H = 150;
+const P = {
+  l: 10,
+  r: 12,
+  t: 16,
+  b: 14
+};
+const plotW = W - P.l - P.r;
+const plotH = H - P.t - P.b;
+
+/** y for a 0–1 value in the plot box (catalog `Y`) */
+function Yv(v) {
+  return P.t + (1 - v) * plotH;
+}
+
+/** open arc — 0° at 12 o'clock, clockwise (catalog `arcPath`) */
+function arcPath(cx, cy, r, a0, a1) {
+  const pol = aDeg => {
+    const a = (aDeg - 90) * Math.PI / 180;
+    return {
+      x: cx + r * Math.cos(a),
+      y: cy + r * Math.sin(a)
+    };
+  };
+  const p0 = pol(a0);
+  const p1 = pol(a1);
+  const lg = (a1 - a0) % 360 > 180 ? 1 : 0;
+  return `M${p0.x.toFixed(1)} ${p0.y.toFixed(1)}A${r} ${r} 0 ${lg} 1 ${p1.x.toFixed(1)} ${p1.y.toFixed(1)}`;
+}
+
+/** Fritsch–Carlson monotone cubic — the catalog's `smoothPath` (no overshoot). */
+function smoothPath(p) {
+  const n = p.length;
+  if (n < 3) return p.map((q, i) => `${i ? 'L' : 'M'}${q.x.toFixed(1)} ${q.y.toFixed(1)}`).join('');
+  const dx = [];
+  const m = [];
+  const tg = [];
+  for (let i = 0; i < n - 1; i++) {
+    dx[i] = p[i + 1].x - p[i].x;
+    m[i] = (p[i + 1].y - p[i].y) / 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${p[0].x.toFixed(1)} ${p[0].y.toFixed(1)}`;
+  for (let i = 0; i < n - 1; i++) {
+    const h = dx[i] / 3;
+    d += `C${(p[i].x + h).toFixed(1)} ${(p[i].y + h * tg[i]).toFixed(1)} ${(p[i + 1].x - h).toFixed(1)} ${(p[i + 1].y - h * tg[i + 1]).toFixed(1)} ${p[i + 1].x.toFixed(1)} ${p[i + 1].y.toFixed(1)}`;
+  }
+  return d;
+}
+
+/** piecewise-linear y (0–1) along the route at x (0–1) */
+function routeY(route, x) {
+  if (route.length === 0) return 0;
+  if (x <= route[0][0]) return route[0][1];
+  for (let i = 1; i < route.length; i++) {
+    if (x <= route[i][0]) {
+      const [x0, y0] = route[i - 1];
+      const [x1, y1] = route[i];
+      const t = x1 === x0 ? 0 : (x - x0) / (x1 - x0);
+      return y0 + t * (y1 - y0);
+    }
+  }
+  return route[route.length - 1][1];
+}
+
+/** hex color + 0–1 alpha → #RRGGBBAA (native's rgba() substitute) */
+function alpha(hex, a) {
+  return `${hex}${Math.round(Math.max(0, Math.min(1, a)) * 255).toString(16).padStart(2, '0')}`;
+}
+
+/* ----------------------------------------------------- catalog defaults */
+
+const DEFAULT_HABITS = [{
+  name: 'MEDITATE',
+  weeks: 4,
+  color: colors.mint
+}, {
+  name: 'LIFT',
+  weeks: 3,
+  color: colors.cyan
+}, {
+  name: 'SUNLIGHT',
+  weeks: 5,
+  color: colors.lime
+}, {
+  name: 'NO-CAFF',
+  weeks: 1,
+  color: colors.zoneMid
+}, {
+  name: 'JOURNAL',
+  weeks: 2,
+  color: colors.violet
+}, {
+  name: 'WALK',
+  weeks: 0,
+  color: colors.zoneLow
+}];
+const DEFAULT_STAGES = ['SPROUT', 'WK 1', 'WK 2', 'WK 4', 'WK 8+'];
+const DEFAULT_ROUTE = [[0, 0.1], [0.14, 0.22], [0.3, 0.34], [0.42, 0.3], [0.58, 0.55], [0.72, 0.68], [0.86, 0.8], [1, 0.95]];
+const DEFAULT_CAMPS = [{
+  at: 0.3,
+  label: 'CAMP 1 · D30'
+}, {
+  at: 0.58,
+  label: 'CAMP 2 · D60'
+}, {
+  at: 1,
+  label: 'SUMMIT · D90',
+  summit: true
+}];
+const DEFAULT_MEALS = [{
+  time: '7:40',
+  at: 0.1,
+  macros: [0.4, 0.35, 0.25],
+  kcal: '420'
+}, {
+  time: '12:30',
+  at: 0.42,
+  macros: [0.45, 0.3, 0.25],
+  kcal: '680'
+}, {
+  time: '16:00',
+  at: 0.62,
+  macros: [0.3, 0.5, 0.2],
+  kcal: '210'
+}, {
+  time: '19:30',
+  at: 0.86,
+  macros: [0.42, 0.3, 0.28],
+  kcal: '740'
+}];
+
+/** the catalog's MT-12 session curve — breaths/min slowing 14 → 7 */
+const DEFAULT_BPM = [14, 13.5, 12.5, 11.5, 10.5, 9.5, 8.5, 8, 7.5, 7.2, 7, 7];
+const DEFAULT_TITLES = {
+  thermometer: 'STRAIN METER',
+  'fasting-hourglass': 'FASTING',
+  'habit-garden': 'YOUR GARDEN · 6 HABITS',
+  'plant-stages': 'HOW PLANTS GROW',
+  'mountain-route': '90-DAY ASCENT',
+  'hydration-bottle': 'WATER · TODAY',
+  'meal-plates': 'MEALS · TODAY',
+  'breath-pacer': 'BREATHE · 4-7-8',
+  'breath-session': 'SESSION · 10 MIN'
+};
+
+/* macro colors — [protein, carbs, fat], catalog `cols` + legend order */
+const MACRO_COLORS = [colors.mint, colors.cyan, colors.violet];
+const MACRO_LEGEND = [['FAT', colors.violet], ['CARB', colors.cyan], ['PRO', colors.mint]];
+function Label({
+  x,
+  y,
+  text,
+  color = colors.textFaint,
+  anchor = 'middle'
+}) {
+  return /*#__PURE__*/_jsx(SvgText, {
+    x: x,
+    y: y,
+    fill: color,
+    fontSize: 8.5,
+    textAnchor: anchor,
+    fontFamily: fonts.mono,
+    letterSpacing: 0.5,
+    children: text
+  });
+}
+
+/** chip-pill label (dark rect + tinted hairline) — `y` = pill center */
+function Tag({
+  x,
+  y,
+  text,
+  color,
+  anchor = 'middle'
+}) {
+  const w = text.length * 5.35 + 12;
+  let xa = anchor === 'end' ? x - w : anchor === 'start' ? x : x - w / 2;
+  xa = Math.max(P.l - 4, Math.min(xa, W - P.r - w + 4));
+  return /*#__PURE__*/_jsxs(G, {
+    children: [/*#__PURE__*/_jsx(Rect, {
+      x: xa.toFixed(1),
+      y: (y - 6.5).toFixed(1),
+      width: w.toFixed(1),
+      height: 13,
+      rx: 6.5,
+      fill: "rgba(8,10,18,0.78)",
+      stroke: color,
+      strokeOpacity: 0.35,
+      strokeWidth: 0.8
+    }), /*#__PURE__*/_jsx(SvgText, {
+      x: (xa + w / 2).toFixed(1),
+      y: (y + 2.8).toFixed(1),
+      fill: color,
+      fontSize: 8,
+      textAnchor: "middle",
+      fontFamily: fonts.mono,
+      letterSpacing: 0.4,
+      children: text
+    })]
+  });
+}
+
+/** big display readout next to a vessel (thermo 26px / hourglass + bottle 24px) */
+function Reading({
+  x,
+  y,
+  text,
+  size,
+  color
+}) {
+  return /*#__PURE__*/_jsx(SvgText, {
+    x: x,
+    y: y,
+    fill: color,
+    fontSize: size,
+    fontWeight: "700",
+    fontFamily: fonts.display,
+    children: text
+  });
+}
+
+/** one garden plant — stage 0 (sprout dot) … 4 (bloom), catalog `plant()`.
+ *  The web bloom `drop-shadow` is a wider faint duplicate circle here. */
+function Plant({
+  x,
+  baseY,
+  stage,
+  color
+}) {
+  const mound = /*#__PURE__*/_jsx(Path, {
+    d: `M${x - 9} ${baseY}q9 8 18 0z`,
+    fill: "rgba(255,255,255,0.12)"
+  });
+  if (stage === 0) {
+    return /*#__PURE__*/_jsxs(G, {
+      children: [mound, /*#__PURE__*/_jsx(Circle, {
+        cx: x,
+        cy: baseY - 3,
+        r: 2,
+        fill: color,
+        opacity: 0.7
+      })]
+    });
+  }
+  const hgt = 8 + stage * 8;
+  const leaves = [];
+  for (let li = 1; li <= Math.min(3, stage); li++) {
+    const ly = baseY - hgt * li / (stage + 1);
+    const dir = li % 2 ? -1 : 1;
+    leaves.push(/*#__PURE__*/_jsx(Path, {
+      d: `M${x} ${ly.toFixed(1)}q${7 * dir} -2 ${9 * dir} -7q${-7 * dir} 0 ${-9 * dir} 7z`,
+      fill: color,
+      opacity: 0.85
+    }, li));
+  }
+  return /*#__PURE__*/_jsxs(G, {
+    children: [mound, /*#__PURE__*/_jsx(Path, {
+      d: `M${x} ${baseY}q2 ${-hgt / 2} 0 ${-hgt}`,
+      fill: "none",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round"
+    }), leaves, stage >= 4 ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Circle, {
+        cx: x,
+        cy: baseY - hgt - 3,
+        r: 5,
+        fill: colors.lime,
+        opacity: 0.35
+      }), /*#__PURE__*/_jsx(Circle, {
+        cx: x,
+        cy: baseY - hgt - 3,
+        r: 3.2,
+        fill: colors.lime
+      })]
+    }) : null]
+  });
+}
+
+/** pulse marker — static dot + faint halo ring (no SMIL/JS animation on
+ *  native; the web expanding ring is a documented substrate diff) */
+function PulseDot({
+  x,
+  y,
+  color
+}) {
+  return /*#__PURE__*/_jsxs(G, {
+    children: [/*#__PURE__*/_jsx(Circle, {
+      cx: x,
+      cy: y,
+      r: 7,
+      fill: "none",
+      stroke: color,
+      strokeWidth: 1.4,
+      strokeOpacity: 0.4
+    }), /*#__PURE__*/_jsx(Circle, {
+      cx: x,
+      cy: y,
+      r: 3.6,
+      fill: color
+    })]
+  });
+}
+
+/**
+ * MetaphorWidget — the kit's object-metaphor widget (catalog family
+ * `metaphor-charts`, MT-01…MT-12): a value drawn as the thing it measures —
+ * thermometer, hourglass, garden, mountain, bottle, plates, breath orb.
+ * Same prop API + geometry as the web twin; the breath-pacer orb renders
+ * static mid-size (no SMIL loop) and the YOU pulse is a static dot + halo.
+ * Values are 0–1; geometry is the catalog's 320×150 canvas; tokens only.
+ */
+export function MetaphorWidget({
+  variant = 'thermometer',
+  level,
+  remaining = 0.35,
+  reading,
+  sub,
+  pill,
+  pillColor,
+  target = null,
+  targetLabel = 'TARGET',
+  glasses = 8,
+  habits = DEFAULT_HABITS,
+  stages = DEFAULT_STAGES,
+  route = DEFAULT_ROUTE,
+  camps = DEFAULT_CAMPS,
+  progress = 0.62,
+  progressLabel = 'YOU · DAY 56',
+  meals = DEFAULT_MEALS,
+  legend = true,
+  pattern = [4, 7, 8],
+  centerLabel = 'BREATHE',
+  bpm = DEFAULT_BPM,
+  calmThreshold = 8,
+  markerAt = 7,
+  markerLabel = 'CALM REACHED · 6:40',
+  axisLabels = ['0:00', '5:00', '10:00'],
+  caption,
+  title,
+  shine = false,
+  width = W,
+  height = H,
+  style
+}) {
+  const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
+  const blurId = `lk-metaphor-blur-${uid}`;
+  let heading = title ?? DEFAULT_TITLES[variant];
+  let accessibilityLabel;
+  let content;
+  if (variant === 'thermometer') {
+    /* ------------------------------------------------- MT-01 thermometer */
+    const lvl = Math.max(0, Math.min(1, level ?? 0.62));
+    const col = lvl >= 0.72 ? colors.zoneLow : lvl >= 0.4 ? colors.zoneMid : colors.cyan;
+    const x = 86;
+    const yTop = P.t + 12;
+    const hgt = 84;
+    const tubeW = 12;
+    const bulbY = yTop + hgt + 10;
+    const lh = lvl * (hgt - 6);
+    const read = reading ?? '14.2';
+    const pillText = pill ?? 'APPROACHING LIMIT';
+    accessibilityLabel = `${heading}: ${read}, level ${Math.round(lvl * 100)}%`;
+    content = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Rect, {
+        x: x - tubeW / 2,
+        y: yTop,
+        width: tubeW,
+        height: hgt + 8,
+        rx: tubeW / 2,
+        fill: "rgba(255,255,255,0.05)",
+        stroke: "rgba(255,255,255,0.25)",
+        strokeWidth: 1.4
+      }), /*#__PURE__*/_jsx(Circle, {
+        cx: x,
+        cy: bulbY,
+        r: 11,
+        fill: "rgba(255,255,255,0.05)",
+        stroke: "rgba(255,255,255,0.25)",
+        strokeWidth: 1.4
+      }), shine ? /*#__PURE__*/_jsx(Circle, {
+        cx: x,
+        cy: bulbY,
+        r: 9,
+        fill: col,
+        opacity: 0.6,
+        filter: `url(#${blurId})`
+      }) : null, /*#__PURE__*/_jsx(Circle, {
+        cx: x,
+        cy: bulbY,
+        r: 8,
+        fill: col,
+        opacity: 0.95
+      }), /*#__PURE__*/_jsx(Rect, {
+        x: x - 3.5,
+        y: (yTop + hgt - lh).toFixed(1),
+        width: 7,
+        height: (lh + 14).toFixed(1),
+        rx: 3.5,
+        fill: col,
+        opacity: 0.95
+      }), Array.from({
+        length: 5
+      }, (_, t) => {
+        const ty = yTop + 4 + (hgt - 8) * t / 4;
+        return /*#__PURE__*/_jsx(Line, {
+          x1: x + tubeW / 2 + 3,
+          x2: x + tubeW / 2 + 8,
+          y1: ty,
+          y2: ty,
+          stroke: "rgba(255,255,255,0.25)",
+          strokeWidth: 1
+        }, t);
+      }), target != null ? /*#__PURE__*/_jsxs(G, {
+        children: [/*#__PURE__*/_jsx(Line, {
+          x1: 100,
+          x2: 112,
+          y1: P.t + 16 + (hgt - 8) * (1 - target),
+          y2: P.t + 16 + (hgt - 8) * (1 - target),
+          stroke: colors.zoneLow,
+          strokeWidth: 1.4
+        }), /*#__PURE__*/_jsx(Label, {
+          x: 116,
+          y: P.t + 16 + (hgt - 8) * (1 - target) + 3,
+          text: targetLabel,
+          color: colors.zoneLow,
+          anchor: "start"
+        })]
+      }) : null, /*#__PURE__*/_jsx(Reading, {
+        x: 170,
+        y: 78,
+        text: read,
+        size: 26,
+        color: col
+      }), /*#__PURE__*/_jsx(Label, {
+        x: 170,
+        y: 94,
+        text: sub ?? 'STRAIN · DAY LOAD',
+        color: colors.textDim,
+        anchor: "start"
+      }), pillText ? /*#__PURE__*/_jsx(Tag, {
+        x: 210,
+        y: 112,
+        text: pillText,
+        color: pillColor ?? colors.zoneMid
+      }) : null]
+    });
+  } else if (variant === 'fasting-hourglass') {
+    /* ------------------------------------------- MT-03 fasting-hourglass */
+    const frac = Math.max(0, Math.min(1, remaining));
+    const cx = 88;
+    const top = P.t + 14;
+    const hgt = 92;
+    const w2 = 46;
+    const topH = (hgt / 2 - 6) * frac;
+    const read = reading ?? '4H 20M';
+    const pillText = pill ?? 'EATING OPENS 12:30';
+    accessibilityLabel = `${heading}: ${read} remaining`;
+    content = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Path, {
+        d: `M${cx - w2 / 2} ${top}h${w2}l${-w2 / 2 + 3} ${hgt / 2 - 4}v8l${w2 / 2 - 3} ${hgt / 2 - 4}h${-w2}l${w2 / 2 - 3} ${-hgt / 2 + 4}v-8z`,
+        fill: "rgba(255,255,255,0.04)",
+        stroke: "rgba(255,255,255,0.25)",
+        strokeWidth: 1.4
+      }), /*#__PURE__*/_jsx(Path, {
+        d: `M${cx - (w2 / 2 - 3) * frac} ${top + hgt / 2 - 4 - topH}L${cx + (w2 / 2 - 3) * frac} ${top + hgt / 2 - 4 - topH}L${cx} ${top + hgt / 2 - 2}Z`,
+        fill: colors.zoneMid,
+        opacity: 0.85
+      }), /*#__PURE__*/_jsx(Path, {
+        d: `M${cx} ${top + hgt / 2 + 4}L${cx - (w2 / 2 - 4) * (1 - frac)} ${top + hgt - 3}H${cx + (w2 / 2 - 4) * (1 - frac)}Z`,
+        fill: colors.zoneMid,
+        opacity: 0.55
+      }), frac > 0.03 ? /*#__PURE__*/_jsx(Line, {
+        x1: cx,
+        x2: cx,
+        y1: top + hgt / 2 - 2,
+        y2: top + hgt - 4,
+        stroke: colors.zoneMid,
+        strokeWidth: 1.2,
+        strokeDasharray: "2 3",
+        opacity: 0.7
+      }) : null, /*#__PURE__*/_jsx(Reading, {
+        x: 170,
+        y: 74,
+        text: read,
+        size: 24,
+        color: colors.text
+      }), /*#__PURE__*/_jsx(Label, {
+        x: 170,
+        y: 90,
+        text: sub ?? 'FAST · 16:8 WINDOW',
+        color: colors.textDim,
+        anchor: "start"
+      }), pillText ? /*#__PURE__*/_jsx(Tag, {
+        x: 212,
+        y: 108,
+        text: pillText,
+        color: pillColor ?? colors.zoneMid
+      }) : null]
+    });
+  } else if (variant === 'habit-garden') {
+    /* ------------------------------------------------ MT-05 habit-garden */
+    const baseY = H - P.b - 22;
+    const note = caption ?? 'EACH PLANT GROWS WITH ITS STREAK · WILTS WHEN SKIPPED';
+    accessibilityLabel = `${heading}: ${habits.length} habit plants`;
+    content = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [habits.map((hb, i) => {
+        const x = P.l + 30 + i * (plotW - 50) / Math.max(1, habits.length - 1);
+        const col = hb.color ?? colors.mint;
+        return /*#__PURE__*/_jsxs(G, {
+          children: [/*#__PURE__*/_jsx(Plant, {
+            x: x,
+            baseY: baseY,
+            stage: Math.min(4, hb.weeks),
+            color: col
+          }), /*#__PURE__*/_jsx(Label, {
+            x: x,
+            y: baseY + 12,
+            text: hb.name,
+            color: col
+          }), /*#__PURE__*/_jsx(Label, {
+            x: x,
+            y: baseY + 22,
+            text: `${hb.weeks * 7}D`
+          })]
+        }, i);
+      }), note ? /*#__PURE__*/_jsx(Label, {
+        x: W / 2,
+        y: P.t + 8,
+        text: note
+      }) : null]
+    });
+  } else if (variant === 'plant-stages') {
+    /* ------------------------------------------------ MT-06 plant-stages */
+    const baseY = H - P.b - 24;
+    const pillText = pill ?? 'YOUR MEDITATE PLANT · WEEK 4';
+    accessibilityLabel = `${heading}: ${stages.length} growth stages`;
+    content = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [stages.map((lb, i) => {
+        const x = P.l + 34 + i * (plotW - 60) / Math.max(1, stages.length - 1);
+        const last = i === stages.length - 1;
+        const col = last ? colors.mint : alpha(colors.mint, 0.4 + i * 0.15);
+        return /*#__PURE__*/_jsxs(G, {
+          children: [/*#__PURE__*/_jsx(Plant, {
+            x: x,
+            baseY: baseY,
+            stage: Math.min(4, i),
+            color: col
+          }), /*#__PURE__*/_jsx(Label, {
+            x: x,
+            y: H - P.b - 10,
+            text: lb,
+            color: last ? colors.mint : colors.textFaint
+          })]
+        }, i);
+      }), pillText ? /*#__PURE__*/_jsx(Tag, {
+        x: W / 2,
+        y: P.t + 12,
+        text: pillText,
+        color: pillColor ?? colors.mint
+      }) : null]
+    });
+  } else if (variant === 'mountain-route') {
+    /* ---------------------------------------------- MT-07 mountain-route */
+    const pts = route.map(([px, py]) => ({
+      x: P.l + 6 + (plotW - 12) * px,
+      y: Yv(py)
+    }));
+    const d = pts.map((q, i) => `${i ? 'L' : 'M'}${q.x.toFixed(1)} ${q.y.toFixed(1)}`).join('');
+    const gradId = `lk-metaphor-m-${uid}`;
+    const cq = {
+      x: P.l + 6 + (plotW - 12) * progress,
+      y: Yv(routeY(route, progress))
+    };
+    accessibilityLabel = `${heading}: ${camps.length} camps, you at ${Math.round(progress * 100)}%`;
+    content = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Defs, {
+        children: /*#__PURE__*/_jsxs(LinearGradient, {
+          id: gradId,
+          x1: "0",
+          y1: "0",
+          x2: "0",
+          y2: "1",
+          children: [/*#__PURE__*/_jsx(Stop, {
+            offset: "0%",
+            stopColor: colors.indigo,
+            stopOpacity: 0.35
+          }), /*#__PURE__*/_jsx(Stop, {
+            offset: "100%",
+            stopColor: colors.indigo,
+            stopOpacity: 0.02
+          })]
+        })
+      }), /*#__PURE__*/_jsx(Path, {
+        d: `${d}L${W - P.r} ${H - P.b}L${P.l} ${H - P.b}Z`,
+        fill: `url(#${gradId})`
+      }), shine ? /*#__PURE__*/_jsx(Path, {
+        d: d,
+        fill: "none",
+        stroke: colors.indigo,
+        strokeWidth: 7,
+        strokeLinecap: "round",
+        opacity: 0.45,
+        filter: `url(#${blurId})`
+      }) : null, /*#__PURE__*/_jsx(Path, {
+        d: d,
+        fill: "none",
+        stroke: colors.indigo,
+        strokeWidth: 2.2,
+        strokeLinecap: "round"
+      }), camps.map((cp, i) => {
+        const q = {
+          x: P.l + 6 + (plotW - 12) * cp.at,
+          y: Yv(routeY(route, cp.at))
+        };
+        const c = cp.summit ? colors.lime : colors.cyan;
+        return /*#__PURE__*/_jsxs(G, {
+          children: [/*#__PURE__*/_jsx(Line, {
+            x1: q.x.toFixed(1),
+            x2: q.x.toFixed(1),
+            y1: q.y.toFixed(1),
+            y2: (q.y - 14).toFixed(1),
+            stroke: "rgba(255,255,255,0.35)",
+            strokeWidth: 1.2
+          }), /*#__PURE__*/_jsx(Path, {
+            d: `M${q.x.toFixed(1)} ${(q.y - 14).toFixed(1)}l9 3.5-9 3.5z`,
+            fill: c
+          }), /*#__PURE__*/_jsx(Tag, {
+            x: q.x,
+            y: q.y + 13,
+            text: cp.label,
+            color: c
+          })]
+        }, i);
+      }), /*#__PURE__*/_jsx(PulseDot, {
+        x: cq.x,
+        y: cq.y,
+        color: colors.mint
+      }), progressLabel ? /*#__PURE__*/_jsx(Tag, {
+        x: cq.x - 8,
+        y: cq.y - 16,
+        text: progressLabel,
+        color: colors.mint,
+        anchor: "end"
+      }) : null]
+    });
+  } else if (variant === 'hydration-bottle') {
+    /* -------------------------------------------- MT-09 hydration-bottle */
+    const lvl = Math.max(0, Math.min(1, level ?? 0.6));
+    const bx = 80;
+    const by = P.t + 10;
+    const bw = 42;
+    const bh = 96;
+    const lt = by + bh - 2 - lvl * (bh - 6);
+    const clipId = `lk-metaphor-b-${uid}`;
+    const gradId = `lk-metaphor-w-${uid}`;
+    const wave = `M${bx + 1.5} ${lt.toFixed(1)}Q${bx + bw * 0.3} ${(lt - 2.6).toFixed(1)} ${bx + bw / 2} ${lt.toFixed(1)}Q${bx + bw * 0.72} ${(lt + 2.6).toFixed(1)} ${bx + bw - 1.5} ${lt.toFixed(1)}L${bx + bw - 1.5} ${by + bh}L${bx + 1.5} ${by + bh}Z`;
+    const read = reading ?? '1.6 L';
+    const pillText = pill ?? 'NEXT GLASS · 15:30';
+    const bubbles = [[0.35, 0.4, 1.6], [0.6, 0.2, 1.2], [0.5, 0.65, 2]];
+    accessibilityLabel = `${heading}: ${read}, ${Math.round(lvl * glasses)} of ${glasses} glasses`;
+    content = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(Defs, {
+        children: [/*#__PURE__*/_jsx(ClipPath, {
+          id: clipId,
+          children: /*#__PURE__*/_jsx(Rect, {
+            x: bx + 1.5,
+            y: by + 1.5,
+            width: bw - 3,
+            height: bh - 3,
+            rx: 10.5
+          })
+        }), /*#__PURE__*/_jsxs(LinearGradient, {
+          id: gradId,
+          x1: "0",
+          y1: "0",
+          x2: "0",
+          y2: "1",
+          children: [/*#__PURE__*/_jsx(Stop, {
+            offset: "0%",
+            stopColor: colors.cyan,
+            stopOpacity: 0.85
+          }), /*#__PURE__*/_jsx(Stop, {
+            offset: "100%",
+            stopColor: colors.cyan,
+            stopOpacity: 0.4
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(Rect, {
+        x: bx + bw / 2 - 7,
+        y: by - 8,
+        width: 14,
+        height: 10,
+        rx: 3,
+        fill: "rgba(255,255,255,0.18)"
+      }), /*#__PURE__*/_jsx(Rect, {
+        x: bx,
+        y: by,
+        width: bw,
+        height: bh,
+        rx: 12,
+        fill: "rgba(255,255,255,0.045)",
+        stroke: "rgba(255,255,255,0.24)",
+        strokeWidth: 1.4
+      }), /*#__PURE__*/_jsx(Path, {
+        d: wave,
+        fill: `url(#${gradId})`,
+        clipPath: `url(#${clipId})`
+      }), bubbles.map((b, i) => /*#__PURE__*/_jsx(Circle, {
+        cx: bx + bw * b[0],
+        cy: by + bh - (bh - 6) * lvl * b[1],
+        r: b[2],
+        fill: "none",
+        stroke: "rgba(255,255,255,0.4)",
+        strokeWidth: 0.8,
+        clipPath: `url(#${clipId})`
+      }, i)), Array.from({
+        length: glasses
+      }, (_, gi) => {
+        const g = gi + 1;
+        const gy = by + bh - (bh - 6) * g / glasses;
+        return /*#__PURE__*/_jsx(Line, {
+          x1: bx + bw + 4,
+          x2: bx + bw + (g % 4 === 0 ? 12 : 8),
+          y1: gy,
+          y2: gy,
+          stroke: g <= Math.round(lvl * glasses) ? colors.cyan : 'rgba(255,255,255,0.2)',
+          strokeWidth: 1.2
+        }, g);
+      }), /*#__PURE__*/_jsx(Reading, {
+        x: 176,
+        y: 70,
+        text: read,
+        size: 24,
+        color: colors.cyan
+      }), /*#__PURE__*/_jsx(Label, {
+        x: 176,
+        y: 86,
+        text: sub ?? 'OF 2.6 L · 5 OF 8 GLASSES',
+        color: colors.textDim,
+        anchor: "start"
+      }), pillText ? /*#__PURE__*/_jsx(Tag, {
+        x: 218,
+        y: 104,
+        text: pillText,
+        color: pillColor ?? colors.cyan
+      }) : null]
+    });
+  } else if (variant === 'meal-plates') {
+    /* --------------------------------------------------- MT-10 meal-plates */
+    const y = H / 2 + 10;
+    let lx = W - P.r - 2;
+    accessibilityLabel = `${heading}: ${meals.length} meals on the day strip`;
+    content = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Line, {
+        x1: P.l + 6,
+        x2: W - P.r - 6,
+        y1: y,
+        y2: y,
+        stroke: "rgba(255,255,255,0.14)",
+        strokeWidth: 1.5,
+        strokeLinecap: "round"
+      }), meals.map((ml, i) => {
+        const x = P.l + 6 + (plotW - 12) * ml.at;
+        let a = 0;
+        return /*#__PURE__*/_jsxs(G, {
+          children: [/*#__PURE__*/_jsx(Circle, {
+            cx: x.toFixed(1),
+            cy: y - 22,
+            r: 13,
+            fill: "rgba(255,255,255,0.05)",
+            stroke: "rgba(255,255,255,0.2)",
+            strokeWidth: 1
+          }), ml.macros.map((f, fi) => {
+            const a1 = a + f * 360;
+            const d = arcPath(x, y - 22, 9, a + 2, a1 - 2);
+            a = a1;
+            return /*#__PURE__*/_jsx(Path, {
+              d: d,
+              fill: "none",
+              stroke: MACRO_COLORS[fi],
+              strokeWidth: 5,
+              strokeLinecap: "butt"
+            }, fi);
+          }), /*#__PURE__*/_jsx(Line, {
+            x1: x.toFixed(1),
+            x2: x.toFixed(1),
+            y1: y - 9,
+            y2: y,
+            stroke: "rgba(255,255,255,0.25)",
+            strokeWidth: 1
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: x.toFixed(1),
+            cy: y,
+            r: 2.4,
+            fill: colors.text
+          }), /*#__PURE__*/_jsx(Label, {
+            x: x,
+            y: y + 14,
+            text: ml.time
+          }), /*#__PURE__*/_jsx(Label, {
+            x: x,
+            y: y - 42,
+            text: `${ml.kcal} KCAL`,
+            color: colors.textDim
+          })]
+        }, i);
+      }), legend ? MACRO_LEGEND.map(([name, col]) => {
+        const tx = lx;
+        lx -= name.length * 5.6 + 8;
+        const dx = lx;
+        lx -= 8;
+        return /*#__PURE__*/_jsxs(G, {
+          children: [/*#__PURE__*/_jsx(Label, {
+            x: tx,
+            y: 11,
+            text: name,
+            color: colors.textDim,
+            anchor: "end"
+          }), /*#__PURE__*/_jsx(Circle, {
+            cx: dx,
+            cy: 8.2,
+            r: 3,
+            fill: col
+          })]
+        }, name);
+      }) : null]
+    });
+  } else if (variant === 'breath-pacer') {
+    /* -------------------------------------------------- MT-11 breath-pacer */
+    const bx = 118;
+    const by = 78;
+    const [tIn, tHold, tOut] = pattern;
+    const note = caption ?? `${tIn}-${tHold}-${tOut} · RING GROWS ON INHALE`;
+    heading = title ?? `BREATHE · ${tIn}-${tHold}-${tOut}`;
+    accessibilityLabel = `${heading}: in ${tIn}s, hold ${tHold}s, out ${tOut}s`;
+    content = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [[24, 34, 44].map(r => /*#__PURE__*/_jsx(Circle, {
+        cx: bx,
+        cy: by,
+        r: r,
+        fill: "none",
+        stroke: "rgba(255,255,255,0.07)",
+        strokeWidth: 1
+      }, r)), /*#__PURE__*/_jsx(Circle, {
+        cx: bx,
+        cy: by,
+        r: 31,
+        fill: colors.cyan,
+        opacity: 0.22
+      }), /*#__PURE__*/_jsx(Circle, {
+        cx: bx,
+        cy: by,
+        r: 31,
+        fill: "none",
+        stroke: colors.cyan,
+        strokeWidth: 2
+      }), /*#__PURE__*/_jsx(Label, {
+        x: bx,
+        y: by + 3,
+        text: centerLabel,
+        color: colors.text
+      }), /*#__PURE__*/_jsx(Label, {
+        x: 236,
+        y: 56,
+        text: `IN · ${tIn}S`,
+        color: colors.cyan,
+        anchor: "start"
+      }), /*#__PURE__*/_jsx(Label, {
+        x: 236,
+        y: 74,
+        text: `HOLD · ${tHold}S`,
+        color: colors.textDim,
+        anchor: "start"
+      }), /*#__PURE__*/_jsx(Label, {
+        x: 236,
+        y: 92,
+        text: `OUT · ${tOut}S`,
+        color: colors.violet,
+        anchor: "start"
+      }), note ? /*#__PURE__*/_jsx(Label, {
+        x: bx,
+        y: 140,
+        text: note
+      }) : null]
+    });
+  } else {
+    /* ------------------------------------------------ MT-12 breath-session */
+    const norm = v => (v - 5) / 11;
+    const bp = bpm.map((v, i) => ({
+      x: P.l + (bpm.length <= 1 ? plotW / 2 : i * plotW / (bpm.length - 1)),
+      y: Yv(Math.max(0, Math.min(1, norm(v))))
+    }));
+    const zoneY = Yv(Math.max(0, Math.min(1, norm(calmThreshold))));
+    const cz = markerAt != null ? bp[Math.max(0, Math.min(bp.length - 1, markerAt))] : undefined;
+    const first = bpm[0] ?? 0;
+    const last = bpm[bpm.length - 1] ?? 0;
+    const legendText = caption ?? `BREATHS/MIN ${Math.round(first)} → ${Math.round(last)}`;
+    accessibilityLabel = `${heading}: breaths per minute ${Math.round(first)} to ${Math.round(last)}`;
+    content = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [[0.25, 0.5, 0.75].map(f => /*#__PURE__*/_jsx(Line, {
+        x1: P.l,
+        x2: W - P.r,
+        y1: P.t + plotH * f,
+        y2: P.t + plotH * f,
+        stroke: "rgba(255,255,255,0.05)",
+        strokeWidth: 1
+      }, f)), /*#__PURE__*/_jsx(Line, {
+        x1: P.l,
+        x2: W - P.r,
+        y1: H - P.b,
+        y2: H - P.b,
+        stroke: "rgba(255,255,255,0.09)",
+        strokeWidth: 1
+      }), /*#__PURE__*/_jsx(Rect, {
+        x: P.l,
+        y: zoneY,
+        width: plotW,
+        height: Math.max(0, Yv(0) - zoneY),
+        fill: colors.cyan,
+        opacity: 0.07
+      }), /*#__PURE__*/_jsx(Label, {
+        x: P.l + 4,
+        y: zoneY + 10,
+        text: `CALM ZONE <${calmThreshold}/MIN`,
+        color: colors.cyan,
+        anchor: "start"
+      }), bp.length > 0 ? /*#__PURE__*/_jsx(Path, {
+        d: smoothPath(bp),
+        fill: "none",
+        stroke: colors.cyan,
+        strokeWidth: 2.2,
+        strokeLinecap: "round"
+      }) : null, cz ? /*#__PURE__*/_jsxs(G, {
+        children: [/*#__PURE__*/_jsx(Circle, {
+          cx: cz.x.toFixed(1),
+          cy: cz.y.toFixed(1),
+          r: 3.4,
+          fill: colors.cyan
+        }), markerLabel ? /*#__PURE__*/_jsx(Tag, {
+          x: cz.x,
+          y: cz.y - 14,
+          text: markerLabel,
+          color: colors.cyan
+        }) : null]
+      }) : null, axisLabels.map((tk, i) => {
+        const f = axisLabels.length <= 1 ? 0.5 : i / (axisLabels.length - 1);
+        const anchor = i === 0 ? 'start' : i === axisLabels.length - 1 ? 'end' : 'middle';
+        return /*#__PURE__*/_jsx(Label, {
+          x: P.l + plotW * f,
+          y: H - 3,
+          text: tk,
+          anchor: anchor
+        }, i);
+      }), legendText ? /*#__PURE__*/_jsx(Label, {
+        x: W - P.r - 4,
+        y: 26,
+        text: legendText,
+        color: colors.textDim,
+        anchor: "end"
+      }) : null]
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    accessibilityRole: "image",
+    accessibilityLabel: accessibilityLabel,
+    style: [{
+      width,
+      height
+    }, style],
+    children: /*#__PURE__*/_jsxs(Svg, {
+      width: width,
+      height: height,
+      viewBox: `0 0 ${W} ${H}`,
+      children: [shine ?
+      /*#__PURE__*/
+      /* real Gaussian blur for the glows (Fabric-native in react-native-svg
+         15) — the native twin of the web `blur(5px)` underlays. Region in
+         user space over the full canvas so flat shapes never clip. */
+      _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
+          })
+        })
+      }) : null, /*#__PURE__*/_jsx(Label, {
+        x: P.l + 2,
+        y: 11,
+        text: heading,
+        anchor: "start"
+      }), content]
+    })
+  });
+}
+//# sourceMappingURL=MetaphorWidget.js.map