@lockin90/ui-native 0.0.0-stage → 1.0.0

package/src/components/MetaphorWidget.tsx

@@ -0,0 +1,848 @@
+import { useId, type ReactNode } from 'react';
+import { View, type StyleProp, type ViewStyle } 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`). */
+export type MetaphorWidgetVariant =
+  | 'thermometer' /* MT-01 — glass tube + bulb, liquid column = value */
+  | 'fasting-hourglass' /* MT-03 — sand remaining/elapsed + falling stream */
+  | 'habit-garden' /* MT-05 — plants grow with streaks, wilt when broken */
+  | 'plant-stages' /* MT-06 — the garden legend: 5 growth stages in a row */
+  | 'mountain-route' /* MT-07 — mountain profile + camp flags + YOU pulse */
+  | 'hydration-bottle' /* MT-09 — bottle fills UP: wave + bubbles + glass ticks */
+  | 'meal-plates' /* MT-10 — day strip of mini macro-donut plates */
+  | 'breath-pacer' /* MT-11 — orb shown static mid-breath (web animates) */
+  | 'breath-session'; /* MT-12 — breaths/min curve into the shaded calm zone */
+
+/** One plant in the `habit-garden` (MT-05). */
+export interface MetaphorHabit {
+  /** name under the plant (e.g. 'MEDITATE') */
+  name: string;
+  /** streak length in weeks — growth stage is `min(4, weeks)`; `0` = wilted sprout */
+  weeks: number;
+  /** plant hue (token; wilted/broken habits pass `colors.zoneLow`) */
+  color?: string;
+}
+
+/** One plate on the `meal-plates` day strip (MT-10). */
+export interface MetaphorMeal {
+  /** time caption under the plate (e.g. '12:30') */
+  time: string;
+  /** position along the day strip, 0–1 */
+  at: number;
+  /** macro shares `[protein, carbs, fat]`, fractions summing to 1 */
+  macros: [number, number, number];
+  /** kcal readout above the plate (number or preformatted string) */
+  kcal: string | number;
+}
+
+/** One flag on the `mountain-route` profile (MT-07). */
+export interface MetaphorCamp {
+  /** position along the route, 0–1 */
+  at: number;
+  /** flag chip text (e.g. 'CAMP 1 · D30') */
+  label: string;
+  /** lime summit flag instead of the cyan camp flag */
+  summit?: boolean;
+}
+
+export interface MetaphorWidgetProps {
+  /** chart form (default `'thermometer'`, MT-01) */
+  variant?: MetaphorWidgetVariant;
+  /** `thermometer` liquid 0–1 (default 0.62) · `hydration-bottle` fill 0–1 (default 0.6) */
+  level?: number;
+  /** `fasting-hourglass` — sand remaining 0–1 (default 0.35) */
+  remaining?: number;
+  /** big readout next to the vessel (per-variant catalog default) */
+  reading?: string;
+  /** dim line under the reading (per-variant catalog default) */
+  sub?: string;
+  /** chip-pill text (per-variant catalog default; `''` hides) */
+  pill?: string;
+  /** pill tint (per-variant catalog default) */
+  pillColor?: string;
+  /** `thermometer` — TARGET tick 0–1 on the tube scale (default none) */
+  target?: number | null;
+  /** `thermometer` — label next to the target tick */
+  targetLabel?: string;
+  /** `hydration-bottle` — glass tick count (default 8) */
+  glasses?: number;
+  /** `habit-garden` — the plants (default: the catalog's 6 habits) */
+  habits?: MetaphorHabit[];
+  /** `plant-stages` — stage captions, sprout → bloom (default catalog 5) */
+  stages?: string[];
+  /** `mountain-route` — profile points `[x 0–1, y 0–1]`, left → summit */
+  route?: [number, number][];
+  /** `mountain-route` — camp/summit flags on the profile */
+  camps?: MetaphorCamp[];
+  /** `mountain-route` — YOU position along the route 0–1 (default 0.62) */
+  progress?: number;
+  /** `mountain-route` — YOU chip text (default 'YOU · DAY 56') */
+  progressLabel?: string;
+  /** `meal-plates` — the plates (default: the catalog's 4 meals) */
+  meals?: MetaphorMeal[];
+  /** `meal-plates` — show the FAT/CARB/PRO legend (default true) */
+  legend?: boolean;
+  /** `breath-pacer` — `[inhale, hold, exhale]` seconds (default `[4, 7, 8]`) */
+  pattern?: [number, number, number];
+  /** `breath-pacer` — orb label (default 'BREATHE') */
+  centerLabel?: string;
+  /** `breath-session` — breaths-per-minute series (default: the catalog's 14→7) */
+  bpm?: number[];
+  /** `breath-session` — calm-zone threshold in breaths/min (default 8) */
+  calmThreshold?: number;
+  /** `breath-session` — index of the calm-reached dot (default 7; `null` hides) */
+  markerAt?: number | null;
+  /** `breath-session` — marker chip text (default 'CALM REACHED · 6:40') */
+  markerLabel?: string;
+  /** `breath-session` — x-axis captions, spread evenly (default 0:00/5:00/10:00) */
+  axisLabels?: string[];
+  /** faint note line — garden top-center / pacer bottom / session top-right
+   *  legend (per-variant catalog default, some derived from the data) */
+  caption?: string;
+  /** faint mono caption at the top-left (per-variant catalog default) */
+  title?: string;
+  /** glow underlay — Gaussian-blurred duplicate shapes on native */
+  shine?: boolean;
+  /** rendered width in px — the 320×150 viewBox scales to fit */
+  width?: number;
+  /** rendered height in px */
+  height?: number;
+  /** optional wrapper style */
+  style?: StyleProp<ViewStyle>;
+}
+
+/* --------------------------------------------------------------- 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: number): number {
+  return P.t + (1 - v) * plotH;
+}
+
+/** open arc — 0° at 12 o'clock, clockwise (catalog `arcPath`) */
+function arcPath(cx: number, cy: number, r: number, a0: number, a1: number): string {
+  const pol = (aDeg: number) => {
+    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: { x: number; y: number }[]): string {
+  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: number[] = [];
+  const m: number[] = [];
+  const tg: number[] = [];
+  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: [number, number][], x: number): number {
+  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: string, a: number): string {
+  return `${hex}${Math.round(Math.max(0, Math.min(1, a)) * 255)
+    .toString(16)
+    .padStart(2, '0')}`;
+}
+
+/* ----------------------------------------------------- catalog defaults */
+
+const DEFAULT_HABITS: MetaphorHabit[] = [
+  { 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: [number, number][] = [
+  [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: MetaphorCamp[] = [
+  { at: 0.3, label: 'CAMP 1 · D30' },
+  { at: 0.58, label: 'CAMP 2 · D60' },
+  { at: 1, label: 'SUMMIT · D90', summit: true },
+];
+
+const DEFAULT_MEALS: MetaphorMeal[] = [
+  { 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: Record<MetaphorWidgetVariant, string> = {
+  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: [string, string][] = [
+  ['FAT', colors.violet],
+  ['CARB', colors.cyan],
+  ['PRO', colors.mint],
+];
+
+function Label({
+  x,
+  y,
+  text,
+  color = colors.textFaint,
+  anchor = 'middle',
+}: {
+  x: number;
+  y: number;
+  text: string;
+  color?: string;
+  anchor?: 'start' | 'middle' | 'end';
+}) {
+  return (
+    <SvgText x={x} y={y} fill={color} fontSize={8.5} textAnchor={anchor} fontFamily={fonts.mono} letterSpacing={0.5}>
+      {text}
+    </SvgText>
+  );
+}
+
+/** chip-pill label (dark rect + tinted hairline) — `y` = pill center */
+function Tag({
+  x,
+  y,
+  text,
+  color,
+  anchor = 'middle',
+}: {
+  x: number;
+  y: number;
+  text: string;
+  color: string;
+  anchor?: 'start' | 'middle' | 'end';
+}) {
+  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 (
+    <G>
+      <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}
+      />
+      <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}
+      >
+        {text}
+      </SvgText>
+    </G>
+  );
+}
+
+/** big display readout next to a vessel (thermo 26px / hourglass + bottle 24px) */
+function Reading({ x, y, text, size, color }: { x: number; y: number; text: string; size: number; color: string }) {
+  return (
+    <SvgText x={x} y={y} fill={color} fontSize={size} fontWeight="700" fontFamily={fonts.display}>
+      {text}
+    </SvgText>
+  );
+}
+
+/** 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 }: { x: number; baseY: number; stage: number; color: string }) {
+  const mound = <Path d={`M${x - 9} ${baseY}q9 8 18 0z`} fill="rgba(255,255,255,0.12)" />;
+  if (stage === 0) {
+    return (
+      <G>
+        {mound}
+        <Circle cx={x} cy={baseY - 3} r={2} fill={color} opacity={0.7} />
+      </G>
+    );
+  }
+  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(
+      <Path
+        key={li}
+        d={`M${x} ${ly.toFixed(1)}q${7 * dir} -2 ${9 * dir} -7q${-7 * dir} 0 ${-9 * dir} 7z`}
+        fill={color}
+        opacity={0.85}
+      />,
+    );
+  }
+  return (
+    <G>
+      {mound}
+      <Path d={`M${x} ${baseY}q2 ${-hgt / 2} 0 ${-hgt}`} fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" />
+      {leaves}
+      {stage >= 4 ? (
+        <>
+          <Circle cx={x} cy={baseY - hgt - 3} r={5} fill={colors.lime} opacity={0.35} />
+          <Circle cx={x} cy={baseY - hgt - 3} r={3.2} fill={colors.lime} />
+        </>
+      ) : null}
+    </G>
+  );
+}
+
+/** 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 }: { x: number; y: number; color: string }) {
+  return (
+    <G>
+      <Circle cx={x} cy={y} r={7} fill="none" stroke={color} strokeWidth={1.4} strokeOpacity={0.4} />
+      <Circle cx={x} cy={y} r={3.6} fill={color} />
+    </G>
+  );
+}
+
+/**
+ * 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,
+}: MetaphorWidgetProps) {
+  const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
+  const blurId = `lk-metaphor-blur-${uid}`;
+  let heading = title ?? DEFAULT_TITLES[variant];
+
+  let accessibilityLabel: string;
+  let content: ReactNode;
+
+  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 = (
+      <>
+        <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}
+        />
+        <Circle cx={x} cy={bulbY} r={11} fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.25)" strokeWidth={1.4} />
+        {/* bulb glow — a Gaussian-blurred duplicate circle (the web bulb's
+            `blur(5px)` underlay) */}
+        {shine ? <Circle cx={x} cy={bulbY} r={9} fill={col} opacity={0.6} filter={`url(#${blurId})`} /> : null}
+        <Circle cx={x} cy={bulbY} r={8} fill={col} opacity={0.95} />
+        <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 (
+            <Line
+              key={t}
+              x1={x + tubeW / 2 + 3}
+              x2={x + tubeW / 2 + 8}
+              y1={ty}
+              y2={ty}
+              stroke="rgba(255,255,255,0.25)"
+              strokeWidth={1}
+            />
+          );
+        })}
+        {target != null ? (
+          <G>
+            <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}
+            />
+            <Label x={116} y={P.t + 16 + (hgt - 8) * (1 - target) + 3} text={targetLabel} color={colors.zoneLow} anchor="start" />
+          </G>
+        ) : null}
+        <Reading x={170} y={78} text={read} size={26} color={col} />
+        <Label x={170} y={94} text={sub ?? 'STRAIN · DAY LOAD'} color={colors.textDim} anchor="start" />
+        {pillText ? <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 = (
+      <>
+        <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}
+        />
+        <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}
+        />
+        <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 ? (
+          <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}
+        <Reading x={170} y={74} text={read} size={24} color={colors.text} />
+        <Label x={170} y={90} text={sub ?? 'FAST · 16:8 WINDOW'} color={colors.textDim} anchor="start" />
+        {pillText ? <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 = (
+      <>
+        {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 (
+            <G key={i}>
+              <Plant x={x} baseY={baseY} stage={Math.min(4, hb.weeks)} color={col} />
+              <Label x={x} y={baseY + 12} text={hb.name} color={col} />
+              <Label x={x} y={baseY + 22} text={`${hb.weeks * 7}D`} />
+            </G>
+          );
+        })}
+        {note ? <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 = (
+      <>
+        {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 (
+            <G key={i}>
+              <Plant x={x} baseY={baseY} stage={Math.min(4, i)} color={col} />
+              <Label x={x} y={H - P.b - 10} text={lb} color={last ? colors.mint : colors.textFaint} />
+            </G>
+          );
+        })}
+        {pillText ? <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 = (
+      <>
+        <Defs>
+          <LinearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
+            <Stop offset="0%" stopColor={colors.indigo} stopOpacity={0.35} />
+            <Stop offset="100%" stopColor={colors.indigo} stopOpacity={0.02} />
+          </LinearGradient>
+        </Defs>
+        <Path d={`${d}L${W - P.r} ${H - P.b}L${P.l} ${H - P.b}Z`} fill={`url(#${gradId})`} />
+        {/* line glow — a Gaussian-blurred duplicate stroke (the web route's
+            `blur(5px)` underlay) */}
+        {shine ? (
+          <Path
+            d={d}
+            fill="none"
+            stroke={colors.indigo}
+            strokeWidth={7}
+            strokeLinecap="round"
+            opacity={0.45}
+            filter={`url(#${blurId})`}
+          />
+        ) : null}
+        <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 (
+            <G key={i}>
+              <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} />
+              <Path d={`M${q.x.toFixed(1)} ${(q.y - 14).toFixed(1)}l9 3.5-9 3.5z`} fill={c} />
+              <Tag x={q.x} y={q.y + 13} text={cp.label} color={c} />
+            </G>
+          );
+        })}
+        <PulseDot x={cq.x} y={cq.y} color={colors.mint} />
+        {progressLabel ? <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: [number, number, number][] = [
+      [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 = (
+      <>
+        <Defs>
+          <ClipPath id={clipId}>
+            <Rect x={bx + 1.5} y={by + 1.5} width={bw - 3} height={bh - 3} rx={10.5} />
+          </ClipPath>
+          <LinearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
+            <Stop offset="0%" stopColor={colors.cyan} stopOpacity={0.85} />
+            <Stop offset="100%" stopColor={colors.cyan} stopOpacity={0.4} />
+          </LinearGradient>
+        </Defs>
+        <Rect x={bx + bw / 2 - 7} y={by - 8} width={14} height={10} rx={3} fill="rgba(255,255,255,0.18)" />
+        <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} />
+        <Path d={wave} fill={`url(#${gradId})`} clipPath={`url(#${clipId})`} />
+        {bubbles.map((b, i) => (
+          <Circle
+            key={i}
+            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})`}
+          />
+        ))}
+        {Array.from({ length: glasses }, (_, gi) => {
+          const g = gi + 1;
+          const gy = by + bh - ((bh - 6) * g) / glasses;
+          return (
+            <Line
+              key={g}
+              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}
+            />
+          );
+        })}
+        <Reading x={176} y={70} text={read} size={24} color={colors.cyan} />
+        <Label x={176} y={86} text={sub ?? 'OF 2.6 L · 5 OF 8 GLASSES'} color={colors.textDim} anchor="start" />
+        {pillText ? <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 = (
+      <>
+        <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 (
+            <G key={i}>
+              <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 <Path key={fi} d={d} fill="none" stroke={MACRO_COLORS[fi]} strokeWidth={5} strokeLinecap="butt" />;
+              })}
+              <Line x1={x.toFixed(1)} x2={x.toFixed(1)} y1={y - 9} y2={y} stroke="rgba(255,255,255,0.25)" strokeWidth={1} />
+              <Circle cx={x.toFixed(1)} cy={y} r={2.4} fill={colors.text} />
+              <Label x={x} y={y + 14} text={ml.time} />
+              <Label x={x} y={y - 42} text={`${ml.kcal} KCAL`} color={colors.textDim} />
+            </G>
+          );
+        })}
+        {legend
+          ? MACRO_LEGEND.map(([name, col]) => {
+              const tx = lx;
+              lx -= name.length * 5.6 + 8;
+              const dx = lx;
+              lx -= 8;
+              return (
+                <G key={name}>
+                  <Label x={tx} y={11} text={name} color={colors.textDim} anchor="end" />
+                  <Circle cx={dx} cy={8.2} r={3} fill={col} />
+                </G>
+              );
+            })
+          : 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 = (
+      <>
+        {[24, 34, 44].map((r) => (
+          <Circle key={r} cx={bx} cy={by} r={r} fill="none" stroke="rgba(255,255,255,0.07)" strokeWidth={1} />
+        ))}
+        {/* static mid-breath orb — the web SMIL grow/shrink loop is a
+            documented substrate diff (18 → 44 animated; 31 = mid-size) */}
+        <Circle cx={bx} cy={by} r={31} fill={colors.cyan} opacity={0.22} />
+        <Circle cx={bx} cy={by} r={31} fill="none" stroke={colors.cyan} strokeWidth={2} />
+        <Label x={bx} y={by + 3} text={centerLabel} color={colors.text} />
+        <Label x={236} y={56} text={`IN · ${tIn}S`} color={colors.cyan} anchor="start" />
+        <Label x={236} y={74} text={`HOLD · ${tHold}S`} color={colors.textDim} anchor="start" />
+        <Label x={236} y={92} text={`OUT · ${tOut}S`} color={colors.violet} anchor="start" />
+        {note ? <Label x={bx} y={140} text={note} /> : null}
+      </>
+    );
+  } else {
+    /* ------------------------------------------------ MT-12 breath-session */
+    const norm = (v: number) => (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 = (
+      <>
+        {[0.25, 0.5, 0.75].map((f) => (
+          <Line key={f} 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} />
+        ))}
+        <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} />
+        <Rect x={P.l} y={zoneY} width={plotW} height={Math.max(0, Yv(0) - zoneY)} fill={colors.cyan} opacity={0.07} />
+        <Label x={P.l + 4} y={zoneY + 10} text={`CALM ZONE <${calmThreshold}/MIN`} color={colors.cyan} anchor="start" />
+        {bp.length > 0 ? <Path d={smoothPath(bp)} fill="none" stroke={colors.cyan} strokeWidth={2.2} strokeLinecap="round" /> : null}
+        {cz ? (
+          <G>
+            <Circle cx={cz.x.toFixed(1)} cy={cz.y.toFixed(1)} r={3.4} fill={colors.cyan} />
+            {markerLabel ? <Tag x={cz.x} y={cz.y - 14} text={markerLabel} color={colors.cyan} /> : null}
+          </G>
+        ) : 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 <Label key={i} x={P.l + plotW * f} y={H - 3} text={tk} anchor={anchor} />;
+        })}
+        {legendText ? <Label x={W - P.r - 4} y={26} text={legendText} color={colors.textDim} anchor="end" /> : null}
+      </>
+    );
+  }
+
+  return (
+    <View accessibilityRole="image" accessibilityLabel={accessibilityLabel} style={[{ width, height }, style]}>
+      <Svg width={width} height={height} viewBox={`0 0 ${W} ${H}`}>
+        {shine ? (
+          /* 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. */
+          <Defs>
+            <Filter id={blurId} filterUnits="userSpaceOnUse" x={-10} y={-10} width={W + 20} height={H + 20}>
+              <FeGaussianBlur stdDeviation={2.5} />
+            </Filter>
+          </Defs>
+        ) : null}
+        <Label x={P.l + 2} y={11} text={heading} anchor="start" />
+        {content}
+      </Svg>
+    </View>
+  );
+}