@lockin90/ui-native 0.0.0-stage → 1.0.1

package/lib/module/components/TimelineChart.js

@@ -0,0 +1,1223 @@
+"use strict";
+
+import { useEffect, useId, useRef, useState } from 'react';
+import { Animated, Easing, StyleSheet, Text, View } from 'react-native';
+import Svg, { Defs, FeGaussianBlur, Filter, Line, LinearGradient, Path, Rect, Stop } from 'react-native-svg';
+import { colors, fonts } from '@lockin90/tokens';
+
+/** Catalog variant names — one per timeline form in
+ *  `lockin90-design/charts/timeline-charts.html` (TL-01 … TL-20). */
+
+// TL-20
+
+/** TL-01 SELECT MARKERS: plain dots / icon pins with glow heads / chip pills. */
+
+/** TL-15 SELECT LAYOUT: rail on the left / centered with alternating sides. */
+
+/** A point-in-time event on the rail (or a row of the `feed` variant). */
+
+/** A time range on the rail (`range-blocks` / `gantt-mini` / `duration-brackets`
+ *  and the rows inside a `TimelineLane`). */
+
+/** One named lane of the `multi-lane` variant. */
+
+/** A density bubble of the `cluster-bubbles` variant — sized by `count`. */
+
+/** A milestone ring on the `journey-line` rail. */
+
+/** An x-axis caption at a 0–1 fraction of the rail. */
+
+/** One stop of the `zone-strip` band gradient (energy by hour). */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* ---------------- catalog geometry (timeline-charts.html) ---------------- */
+
+const W = 320;
+const P = {
+  l: 10,
+  r: 12,
+  t: 16,
+  b: 14
+};
+/** rail start x / rail width — the catalog's AX / AW */
+const AX = P.l + 6;
+const AW = W - P.l - P.r - 12;
+const PLOT_W = W - P.l - P.r;
+const MINT = colors.mint;
+/** dark ink for labels ON colored pills (the catalog's `#07080D`) */
+const INK = colors.void;
+
+/** rail fraction → x (viewBox units) */
+const ax = f => AX + AW * f;
+/** round for compact attribute strings */
+const r = n => Math.round(n * 100) / 100;
+
+/* ---------------- deterministic demo data (catalog ports) ---------------- */
+
+/** the catalog's seeded PRNG — defaults reproduce the catalog cards exactly */
+function mulberry32(a) {
+  return () => {
+    a |= 0;
+    a = a + 0x6d2b79f5 | 0;
+    let t = Math.imul(a ^ a >>> 15, 1 | a);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+const clamp01 = v => Math.max(0.03, Math.min(0.97, v));
+
+/** `genData('wave', seed, n)` port — the TL-07 context sparkline. */
+function genWave(seed, n) {
+  const rand = mulberry32(seed);
+  const ph = rand() * 6;
+  const f = 1.15 + rand() * 0.5;
+  const amp = 0.2 + rand() * 0.08;
+  const base = 0.48 + rand() * 0.12;
+  const v = [];
+  for (let i = 0; i < n; i++) {
+    const t = i / (n - 1);
+    v.push(clamp01(base + Math.sin(t * Math.PI * 2 * f + ph) * amp + (rand() - 0.5) * 0.08));
+  }
+  return v;
+}
+
+/** `genData('noisy', seed, n)` port — the TL-08 hourly quality values. */
+function genNoisy(seed, n) {
+  const rand = mulberry32(seed);
+  const base = 0.5 + (rand() - 0.5) * 0.1;
+  const v = [];
+  for (let i = 0; i < n; i++) {
+    const t = i / (n - 1);
+    v.push(clamp01(base + Math.sin(t * Math.PI * 2.2 + rand()) * 0.12 + (rand() - 0.5) * 0.3));
+  }
+  return v;
+}
+
+/** zone verdict for a 0–1 value (the catalog's `zoneOf`). */
+const zoneOf = v => v >= 0.62 ? colors.zoneHigh : v >= 0.38 ? colors.zoneMid : colors.zoneLow;
+const DEFAULT_EVENTS = [{
+  at: 0.08,
+  label: 'WAKE',
+  color: colors.mint
+}, {
+  at: 0.22,
+  label: 'COFFEE',
+  color: colors.zoneMid
+}, {
+  at: 0.38,
+  label: 'TRAINING',
+  color: colors.cyan
+}, {
+  at: 0.55,
+  label: 'LUNCH',
+  color: colors.lime
+}, {
+  at: 0.74,
+  label: 'MEETING',
+  color: colors.violet
+}, {
+  at: 0.9,
+  label: 'WIND-DOWN',
+  color: colors.indigo
+}];
+const DEFAULT_FEED = [{
+  time: '7:10',
+  label: 'WOKE · HRV 62',
+  color: colors.mint
+}, {
+  time: '9:40',
+  label: 'COFFEE LOGGED',
+  color: colors.zoneMid
+}, {
+  time: '13:05',
+  label: 'TRAINING DONE',
+  color: colors.cyan
+}, {
+  time: '22:30',
+  label: 'WIND-DOWN',
+  color: colors.violet
+}];
+const DEFAULT_FLAGS = [{
+  at: 0.12,
+  label: 'FIRST SYNC',
+  color: colors.cyan
+}, {
+  at: 0.45,
+  label: 'DAY 30',
+  color: colors.mint
+}, {
+  at: 0.8,
+  label: 'PR · SQUAT',
+  color: colors.lime
+}];
+const DEFAULT_BLOCKS = [{
+  from: 0.02,
+  to: 0.3,
+  label: 'SLEEP',
+  color: colors.violet
+}, {
+  from: 0.36,
+  to: 0.46,
+  label: 'TRAIN',
+  color: colors.cyan
+}, {
+  from: 0.52,
+  to: 0.72,
+  label: 'DEEP WORK',
+  color: colors.mint
+}, {
+  from: 0.78,
+  to: 0.9,
+  label: 'SOCIAL',
+  color: colors.zoneMid
+}];
+const DEFAULT_GANTT = [{
+  from: 0.05,
+  to: 0.35,
+  label: 'BASELINE',
+  color: colors.mint
+}, {
+  from: 0.3,
+  to: 0.6,
+  label: 'CALIBRATE',
+  color: colors.cyan
+}, {
+  from: 0.55,
+  to: 0.92,
+  label: 'OPTIMIZE',
+  color: colors.violet
+}];
+const DEFAULT_BRACKETS = [{
+  from: 0.1,
+  to: 0.34,
+  label: 'FASTED',
+  color: colors.cyan
+}, {
+  from: 0.42,
+  to: 0.6,
+  label: 'FED · TRAINING WINDOW',
+  color: colors.mint
+}, {
+  from: 0.7,
+  to: 0.94,
+  label: 'CAFFEINE-FREE',
+  color: colors.violet
+}];
+const DEFAULT_LANES = [{
+  name: 'BODY',
+  spans: [{
+    from: 0.02,
+    to: 0.3,
+    color: colors.violet
+  }, {
+    from: 0.36,
+    to: 0.46,
+    color: colors.cyan
+  }]
+}, {
+  name: 'MIND',
+  spans: [{
+    from: 0.5,
+    to: 0.72,
+    color: colors.mint
+  }]
+}, {
+  name: 'LIFE',
+  spans: [{
+    from: 0.32,
+    to: 0.36,
+    color: colors.lime
+  }, {
+    from: 0.76,
+    to: 0.92,
+    color: colors.zoneMid
+  }]
+}];
+const DEFAULT_CLUSTERS = [{
+  at: 0.15,
+  count: 3,
+  color: colors.mint
+}, {
+  at: 0.4,
+  count: 7,
+  color: colors.cyan
+}, {
+  at: 0.62,
+  count: 2,
+  color: colors.violet
+}, {
+  at: 0.85,
+  count: 5,
+  color: colors.zoneMid
+}];
+const DEFAULT_MILESTONES = [{
+  at: 0,
+  label: 'START'
+}, {
+  at: 0.33,
+  label: 'DAY 30'
+}, {
+  at: 0.66,
+  label: 'DAY 60'
+}, {
+  at: 1,
+  label: 'DAY 90'
+}];
+const DEFAULT_ZONE_STOPS = [{
+  offset: 0,
+  color: colors.zoneLow,
+  opacity: 0.25
+}, {
+  offset: 0.3,
+  color: colors.zoneHigh,
+  opacity: 0.25
+}, {
+  offset: 0.65,
+  color: colors.zoneMid,
+  opacity: 0.25
+}, {
+  offset: 1,
+  color: colors.zoneLow,
+  opacity: 0.25
+}];
+const DEFAULT_SPARK = genWave(77, 24);
+const DEFAULT_HEAT = genNoisy(31, 25);
+const HOURS_AXIS = [{
+  at: 0,
+  label: '6AM'
+}, {
+  at: 0.5,
+  label: 'NOON'
+}, {
+  at: 1,
+  label: '11PM'
+}];
+const TICKS24_AXIS = [{
+  at: 0.25,
+  label: '6AM'
+}, {
+  at: 0.5,
+  label: 'NOON'
+}, {
+  at: 0.75,
+  label: '6PM'
+}];
+const DEFAULT_TITLES = {
+  feed: 'TODAY · LOG',
+  'gantt-mini': 'PROGRAM PHASES',
+  'milestone-flags': 'MILESTONES · 90D',
+  'journey-line': '90-DAY PROGRAM'
+};
+
+/** Fritsch–Carlson monotone cubic — the catalog's `smoothPath` (spark only). */
+function monotonePath(pts) {
+  const n = pts.length;
+  if (n < 3) return pts.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${r(x)} ${r(y)}`).join('');
+  const dx = [];
+  const m = [];
+  const tg = [];
+  for (let i = 0; i < n - 1; i++) {
+    dx[i] = pts[i + 1][0] - pts[i][0];
+    m[i] = (pts[i + 1][1] - pts[i][1]) / dx[i];
+  }
+  tg[0] = m[0];
+  tg[n - 1] = m[n - 2];
+  for (let i = 1; i < n - 1; i++) tg[i] = m[i - 1] * m[i] <= 0 ? 0 : (m[i - 1] + m[i]) / 2;
+  for (let i = 0; i < n - 1; i++) {
+    if (m[i] === 0) {
+      tg[i] = 0;
+      tg[i + 1] = 0;
+    } else {
+      const a = tg[i] / m[i];
+      const b = tg[i + 1] / m[i];
+      const s = a * a + b * b;
+      if (s > 9) {
+        const tau = 3 / Math.sqrt(s);
+        tg[i] = tau * a * m[i];
+        tg[i + 1] = tau * b * m[i];
+      }
+    }
+  }
+  let d = `M${r(pts[0][0])} ${r(pts[0][1])}`;
+  for (let i = 0; i < n - 1; i++) {
+    const h = dx[i] / 3;
+    d += `C${r(pts[i][0] + h)} ${r(pts[i][1] + h * tg[i])} ${r(pts[i + 1][0] - h)} ${r(pts[i + 1][1] - h * tg[i + 1])} ${r(pts[i + 1][0])} ${r(pts[i + 1][1])}`;
+  }
+  return d;
+}
+
+/* ---------------- render model (SVG marks + round/text overlays) ---------------- */
+
+/** Expanding + fading ring riding the NOW / journey dot — Animated loop,
+ *  mirroring the web SMIL pulse (1.8s, r 3.6→11, opacity .8→0). */
+function PulseRing({
+  color
+}) {
+  const v = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    const loop = Animated.loop(Animated.timing(v, {
+      toValue: 1,
+      duration: 1800,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true
+    }));
+    loop.start();
+    return () => loop.stop();
+  }, [v]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [styles.pulse, {
+      borderColor: color,
+      opacity: v.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0.8, 0]
+      }),
+      transform: [{
+        scale: v.interpolate({
+          inputRange: [0, 1],
+          outputRange: [1, 3]
+        })
+      }]
+    }]
+  });
+}
+
+/**
+ * TimelineChart — the timeline family: events, spans and journeys through the
+ * day (catalog TL-01…TL-20). One component covers the 16 catalog forms via
+ * `variant`: event rails (dots / glowing icon pins / alternating chip pills,
+ * NOW split, planned-hollow, zone band, context spark, heat ticks), span lanes
+ * (range blocks, BODY/MIND/LIFE lanes, mini gantt with dependency elbows,
+ * duration brackets, cluster bubbles, 24h ticks) and feeds/journeys (vertical
+ * feed, milestone flags, the 90-day journey rail, the full now+zone day
+ * widget). The Svg stretches to the measured container width via a fixed
+ * viewBox + non-uniform scaling; dots, pills, pennants and text render as
+ * absolutely-positioned Views placed by percentage so they stay perfectly
+ * round and legible.
+ */
+export function TimelineChart({
+  variant = 'event-line',
+  events,
+  spans,
+  lanes = DEFAULT_LANES,
+  clusters = DEFAULT_CLUSTERS,
+  markers = 'dots',
+  layout = 'single-side',
+  now,
+  nowLabel = 'NOW',
+  zoneStops = DEFAULT_ZONE_STOPS,
+  spark,
+  heat = DEFAULT_HEAT,
+  progress = 0.62,
+  progressLabel = 'DAY 56 · 62%',
+  milestones = DEFAULT_MILESTONES,
+  title,
+  axisLabels,
+  shine = false,
+  height = 150,
+  ariaLabel,
+  style
+}) {
+  const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
+  const zoneId = `lk-tlc-zone-${uid}`;
+  const railId = `lk-tlc-rail-${uid}`;
+  const blurId = `lk-tlc-blur-${uid}`;
+  const [width, setWidth] = useState(0);
+  const onLayout = e => setWidth(e.nativeEvent.layout.width);
+  const evs = events ?? (variant === 'feed' ? DEFAULT_FEED : variant === 'milestone-flags' ? DEFAULT_FLAGS : variant === 'ticks-24h' ? DEFAULT_EVENTS.slice(1, 5) : DEFAULT_EVENTS);
+  const spanRows = spans ?? (variant === 'gantt-mini' ? DEFAULT_GANTT : variant === 'duration-brackets' ? DEFAULT_BRACKETS : DEFAULT_BLOCKS);
+  const resolvedTitle = title ?? DEFAULT_TITLES[variant] ?? 'TODAY';
+  const nowAt = now ?? (variant === 'now-strip' ? 0.6 : variant === 'now-zone-strip' ? 0.55 : variant === 'planned-hollow' ? 0.5 : undefined);
+  const h = variant === 'feed' ? Math.max(height, 36 + Math.max(0, evs.length - 1) * 26 + 36) : height;
+  const y = h / 2 + 4;
+  const plotH = h - P.t - P.b;
+  const marks = [];
+  const oDots = [];
+  const oRings = [];
+  const oNotes = [];
+  const oChips = [];
+  const oPulses = [];
+  const oBubbles = [];
+  const oFlags = [];
+  const oMilestones = [];
+  let needZoneGrad = false;
+  let needRailGrad = false;
+  let needBlur = false;
+  if (resolvedTitle) oNotes.push({
+    x: P.l + 2,
+    y: 11,
+    text: resolvedTitle,
+    color: colors.textFaint,
+    anchor: 'start'
+  });
+
+  /** the horizontal rail + optional hour captions (the catalog's `axis()`) */
+  const drawAxis = (ay, hours) => {
+    marks.push({
+      k: 'line',
+      x1: AX,
+      y1: ay,
+      x2: AX + AW,
+      y2: ay,
+      stroke: colors.text,
+      w: 1.5,
+      opacity: 0.14,
+      cap: true
+    });
+    if (hours) (axisLabels ?? HOURS_AXIS).forEach(L => oNotes.push({
+      x: ax(L.at),
+      y: ay + 16,
+      text: L.label,
+      color: colors.textFaint,
+      anchor: L.at === 0 ? 'start' : L.at === 1 ? 'end' : 'middle'
+    }));
+  };
+  /** NOW rule + pulse + caption */
+  const drawNow = nf => {
+    const nx = ax(nf);
+    marks.push({
+      k: 'line',
+      x1: nx,
+      y1: y - 26,
+      x2: nx,
+      y2: y + 20,
+      stroke: colors.text,
+      w: 1,
+      opacity: 0.25
+    });
+    oPulses.push({
+      x: nx,
+      y,
+      color: colors.text
+    });
+    oNotes.push({
+      x: nx,
+      y: y - 32,
+      text: nowLabel,
+      color: colors.textDim,
+      anchor: 'middle'
+    });
+  };
+
+  /* ---------- A · event rails ---------- */
+  const railVariant = variant === 'event-line' || variant === 'now-strip' || variant === 'planned-hollow' || variant === 'zone-strip' || variant === 'spark-under' || variant === 'heat-ticks' || variant === 'now-zone-strip';
+  if (railVariant) {
+    const sparkData = spark ?? (variant === 'spark-under' ? DEFAULT_SPARK : undefined);
+    if (sparkData && sparkData.length > 1) {
+      const pts = sparkData.map((v, i) => [P.l + i * PLOT_W / (sparkData.length - 1), P.t + (1 - v) * plotH]);
+      marks.push({
+        k: 'path',
+        d: monotonePath(pts),
+        stroke: colors.text,
+        w: 1.5,
+        opacity: 0.1
+      });
+    }
+    if (variant === 'zone-strip' || variant === 'now-zone-strip') {
+      needZoneGrad = true;
+      marks.push({
+        k: 'rect',
+        x: AX,
+        y: y - 5,
+        w: AW,
+        h: 10,
+        rx: 5,
+        fill: `url(#${zoneId})`
+      });
+    }
+    drawAxis(y, true);
+    if (variant === 'heat-ticks') {
+      heat.forEach((v, i) => {
+        const x = ax(heat.length > 1 ? i / (heat.length - 1) : 0.5);
+        marks.push({
+          k: 'line',
+          x1: x,
+          y1: y - 7,
+          x2: x,
+          y2: y + 7,
+          stroke: zoneOf(v),
+          w: 2.4,
+          cap: true
+        });
+      });
+    } else {
+      const dimFuture = variant === 'now-strip' || variant === 'now-zone-strip';
+      evs.forEach((ev, i) => {
+        const x = ax(ev.at ?? 0);
+        const color = ev.color ?? MINT;
+        const past = nowAt == null || (ev.at ?? 0) <= nowAt;
+        if (markers === 'pins') {
+          marks.push({
+            k: 'line',
+            x1: x,
+            y1: y,
+            x2: x,
+            y2: y - 18,
+            stroke: colors.text,
+            w: 1,
+            opacity: 0.3
+          });
+          oDots.push({
+            x,
+            y: y - 21,
+            d: 6.8,
+            color,
+            glow: true
+          });
+          oDots.push({
+            x,
+            y,
+            d: 4,
+            color: colors.text
+          });
+        } else if (variant === 'planned-hollow' && !past) {
+          oRings.push({
+            x,
+            y,
+            d: 9.5,
+            color
+          });
+        } else {
+          oDots.push({
+            x,
+            y,
+            d: 8,
+            color,
+            opacity: dimFuture && !past ? 0.35 : 1,
+            glow: shine
+          });
+        }
+        if (markers === 'pills' && ev.label) {
+          oChips.push({
+            x,
+            y: i % 2 === 0 ? y - 18 : y + 18,
+            text: ev.label,
+            color,
+            anchor: 'middle'
+          });
+        }
+      });
+    }
+    if (nowAt != null) drawNow(nowAt);
+  }
+
+  /* ---------- B · spans & lanes ---------- */
+  if (variant === 'range-blocks') {
+    drawAxis(y + 14, true);
+    spanRows.forEach(b => {
+      const x0 = ax(b.from);
+      const wpx = ax(b.to) - x0;
+      marks.push({
+        k: 'rect',
+        x: x0,
+        y: y - 10,
+        w: wpx,
+        h: 16,
+        rx: 8,
+        fill: b.color ?? MINT,
+        opacity: 0.8
+      });
+      if (b.label && wpx > 46) oNotes.push({
+        x: x0 + wpx / 2,
+        y: y + 1.5,
+        text: b.label,
+        color: INK,
+        anchor: 'middle'
+      });
+    });
+  }
+  if (variant === 'multi-lane') {
+    lanes.forEach((ln, li) => {
+      const ly = 42 + li * 32;
+      oNotes.push({
+        x: AX,
+        y: ly + 3,
+        text: ln.name,
+        color: colors.textFaint,
+        anchor: 'start'
+      });
+      marks.push({
+        k: 'line',
+        x1: AX + 34,
+        y1: ly,
+        x2: AX + AW,
+        y2: ly,
+        stroke: colors.text,
+        w: 1,
+        opacity: 0.07
+      });
+      ln.spans.forEach(b => {
+        const x0 = AX + 34 + (AW - 34) * b.from;
+        const wpx = Math.max(8, (AW - 34) * (b.to - b.from));
+        marks.push({
+          k: 'rect',
+          x: x0,
+          y: ly - 7,
+          w: wpx,
+          h: 14,
+          rx: 7,
+          fill: b.color ?? MINT,
+          opacity: 0.85
+        });
+      });
+    });
+    drawAxis(42 + lanes.length * 32 - 14, false);
+  }
+  if (variant === 'gantt-mini') {
+    spanRows.forEach((s, ri) => {
+      const ly = 46 + ri * 30;
+      const x0 = ax(s.from);
+      const wpx = ax(s.to) - x0;
+      marks.push({
+        k: 'rect',
+        x: x0,
+        y: ly - 8,
+        w: wpx,
+        h: 16,
+        rx: 4,
+        fill: s.color ?? MINT,
+        opacity: 0.85
+      });
+      if (s.label) oNotes.push({
+        x: x0 + wpx / 2,
+        y: ly + 2,
+        text: s.label,
+        color: INK,
+        anchor: 'middle'
+      });
+      const next = spanRows[ri + 1];
+      if (next) {
+        const nx0 = ax(next.from);
+        marks.push({
+          k: 'path',
+          d: `M${r(x0 + wpx)} ${ly + 8}L${r(x0 + wpx)} ${ly + 15}L${r(nx0)} ${ly + 15}L${r(nx0)} ${ly + 22}`,
+          stroke: colors.text,
+          w: 1,
+          opacity: 0.25,
+          dash: '2 2'
+        });
+      }
+    });
+  }
+  if (variant === 'duration-brackets') {
+    drawAxis(y, true);
+    spanRows.forEach(b => {
+      const x0 = ax(b.from);
+      const x1 = ax(b.to);
+      const color = b.color ?? MINT;
+      marks.push({
+        k: 'path',
+        d: `M${r(x0)} ${y - 12}L${r(x0)} ${y - 18}L${r(x1)} ${y - 18}L${r(x1)} ${y - 12}`,
+        stroke: color,
+        w: 1.4
+      });
+      if (b.label) oChips.push({
+        x: (x0 + x1) / 2,
+        y: y - 28,
+        text: b.label,
+        color,
+        anchor: 'middle'
+      });
+    });
+  }
+  if (variant === 'cluster-bubbles') {
+    drawAxis(y, true);
+    clusters.forEach(cl => oBubbles.push({
+      x: ax(cl.at),
+      y,
+      radius: 6 + cl.count * 1.6,
+      color: cl.color ?? MINT,
+      count: cl.count
+    }));
+  }
+  if (variant === 'ticks-24h') {
+    drawAxis(y, false);
+    for (let i = 0; i <= 24; i++) {
+      const big = i % 6 === 0;
+      marks.push({
+        k: 'line',
+        x1: ax(i / 24),
+        y1: y - (big ? 6 : 3),
+        x2: ax(i / 24),
+        y2: y + (big ? 6 : 3),
+        stroke: colors.text,
+        w: 1,
+        opacity: big ? 0.3 : 0.12
+      });
+    }
+    (axisLabels ?? TICKS24_AXIS).forEach(L => oNotes.push({
+      x: ax(L.at),
+      y: y + 20,
+      text: L.label,
+      color: colors.textFaint,
+      anchor: 'middle'
+    }));
+    evs.forEach(ev => oDots.push({
+      x: ax(ev.at ?? 0),
+      y,
+      d: 6.8,
+      color: ev.color ?? MINT,
+      glow: shine
+    }));
+  }
+
+  /* ---------- C · feeds & journeys ---------- */
+  if (variant === 'feed') {
+    const fx = layout === 'alternating' ? W / 2 : 46;
+    marks.push({
+      k: 'line',
+      x1: fx,
+      y1: 26,
+      x2: fx,
+      y2: h - 18,
+      stroke: colors.text,
+      w: 1.5,
+      opacity: 0.14
+    });
+    evs.forEach((it, i) => {
+      const iy = 36 + i * 26;
+      const color = it.color ?? MINT;
+      oDots.push({
+        x: fx,
+        y: iy,
+        d: 7.2,
+        color,
+        glow: true
+      });
+      if (layout === 'single-side') {
+        if (it.time) oNotes.push({
+          x: fx - 10,
+          y: iy + 3,
+          text: it.time,
+          color: colors.textFaint,
+          anchor: 'end'
+        });
+        if (it.label) oChips.push({
+          x: fx + 12,
+          y: iy,
+          text: it.label,
+          color,
+          anchor: 'start'
+        });
+      } else {
+        const left = i % 2 === 0;
+        if (it.label) oChips.push({
+          x: fx + (left ? -12 : 12),
+          y: iy,
+          text: it.label,
+          color,
+          anchor: left ? 'end' : 'start'
+        });
+        if (it.time) oNotes.push({
+          x: fx + (left ? 10 : -10),
+          y: iy + 3,
+          text: it.time,
+          color: colors.textFaint,
+          anchor: left ? 'start' : 'end'
+        });
+      }
+    });
+  }
+  if (variant === 'milestone-flags') {
+    drawAxis(y + 10, true);
+    evs.forEach(f => {
+      const x = ax(f.at ?? 0);
+      const color = f.color ?? MINT;
+      marks.push({
+        k: 'line',
+        x1: x,
+        y1: y + 10,
+        x2: x,
+        y2: y - 22,
+        stroke: colors.text,
+        w: 1.2,
+        opacity: 0.3
+      });
+      oFlags.push({
+        x,
+        y: y - 22,
+        color
+      });
+      if (f.label) oChips.push({
+        x,
+        y: y + 24,
+        text: f.label,
+        color,
+        anchor: 'middle'
+      });
+    });
+  }
+  if (variant === 'journey-line') {
+    const jy = y + 6;
+    const prog = Math.max(0, Math.min(1, progress));
+    marks.push({
+      k: 'line',
+      x1: AX,
+      y1: jy,
+      x2: AX + AW,
+      y2: jy,
+      stroke: colors.text,
+      w: 6,
+      opacity: 0.1,
+      cap: true
+    });
+    if (shine) {
+      // shine — a Gaussian-blurred duplicate rail behind the crisp one: the
+      // native twin of the web mark's `blur(6px)` underlay
+      needBlur = true;
+      marks.push({
+        k: 'line',
+        x1: AX,
+        y1: jy,
+        x2: ax(prog),
+        y2: jy,
+        stroke: MINT,
+        w: 11,
+        opacity: 0.5,
+        cap: true,
+        filter: `url(#${blurId})`
+      });
+    }
+    needRailGrad = true;
+    marks.push({
+      k: 'line',
+      x1: AX,
+      y1: jy,
+      x2: ax(prog),
+      y2: jy,
+      stroke: `url(#${railId})`,
+      w: 6,
+      cap: true
+    });
+    milestones.forEach(m => {
+      const passed = prog >= m.at;
+      oMilestones.push({
+        x: ax(m.at),
+        y: jy,
+        passed
+      });
+      oNotes.push({
+        x: ax(m.at),
+        y: jy + 20,
+        text: m.label,
+        color: passed ? colors.textDim : colors.textFaint,
+        anchor: 'middle'
+      });
+    });
+    oPulses.push({
+      x: ax(prog),
+      y: jy,
+      color: MINT
+    });
+    if (progressLabel) oChips.push({
+      x: ax(prog),
+      y: jy - 18,
+      text: progressLabel,
+      color: MINT,
+      anchor: 'middle'
+    });
+  }
+
+  /* ---------------- render ---------------- */
+
+  const pctX = x => `${r(x / W * 100)}%`;
+  const anchorAlign = a => a === 'start' ? 'flex-start' : a === 'middle' ? 'center' : 'flex-end';
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.root, style],
+    accessibilityRole: "image",
+    accessibilityLabel: ariaLabel,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        position: 'relative',
+        height: h
+      },
+      onLayout: onLayout,
+      children: [width > 0 && /*#__PURE__*/_jsxs(Svg, {
+        width: width,
+        height: h,
+        viewBox: `0 0 ${W} ${h}`,
+        preserveAspectRatio: "none",
+        children: [/*#__PURE__*/_jsxs(Defs, {
+          children: [needZoneGrad ? /*#__PURE__*/_jsx(LinearGradient, {
+            id: zoneId,
+            x1: "0",
+            y1: "0",
+            x2: "1",
+            y2: "0",
+            children: zoneStops.map((s, i) => /*#__PURE__*/_jsx(Stop, {
+              offset: s.offset,
+              stopColor: s.color,
+              stopOpacity: s.opacity ?? 1
+            }, i))
+          }) : null, needRailGrad ? /*#__PURE__*/_jsxs(LinearGradient, {
+            id: railId,
+            x1: "0",
+            y1: "0",
+            x2: "1",
+            y2: "0",
+            children: [/*#__PURE__*/_jsx(Stop, {
+              offset: "0",
+              stopColor: colors.lime
+            }), /*#__PURE__*/_jsx(Stop, {
+              offset: "1",
+              stopColor: colors.mint
+            })]
+          }) : null, needBlur ?
+          /*#__PURE__*/
+          /* real Gaussian blur for the journey-line shine (Fabric-native in
+             react-native-svg 15) — the native twin of the web `blur(6px)`.
+             Region in user space over the full canvas so the flat rail
+             never clips the blur to its bounding box. */
+          _jsx(Filter, {
+            id: blurId,
+            filterUnits: "userSpaceOnUse",
+            x: -12,
+            y: -12,
+            width: W + 24,
+            height: h + 24,
+            children: /*#__PURE__*/_jsx(FeGaussianBlur, {
+              stdDeviation: 3
+            })
+          }) : null]
+        }), marks.map((mk, i) => mk.k === 'rect' ? /*#__PURE__*/_jsx(Rect, {
+          x: r(mk.x),
+          y: r(mk.y),
+          width: r(Math.max(0, mk.w)),
+          height: mk.h,
+          rx: mk.rx,
+          fill: mk.fill,
+          opacity: mk.opacity
+        }, i) : mk.k === 'line' ? /*#__PURE__*/_jsx(Line, {
+          x1: r(mk.x1),
+          y1: r(mk.y1),
+          x2: r(mk.x2),
+          y2: r(mk.y2),
+          stroke: mk.stroke,
+          strokeWidth: mk.w,
+          strokeOpacity: mk.opacity,
+          strokeDasharray: mk.dash,
+          strokeLinecap: mk.cap ? 'round' : undefined,
+          filter: mk.filter
+        }, i) : /*#__PURE__*/_jsx(Path, {
+          d: mk.d,
+          fill: "none",
+          stroke: mk.stroke,
+          strokeWidth: mk.w,
+          strokeOpacity: mk.opacity,
+          strokeDasharray: mk.dash,
+          strokeLinecap: mk.cap ? 'round' : undefined
+        }, i))]
+      }), oDots.map((d, i) => /*#__PURE__*/_jsx(View, {
+        style: [styles.anchor, {
+          left: pctX(d.x),
+          top: d.y
+        }],
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(View, {
+          style: [{
+            position: 'absolute',
+            width: d.d,
+            height: d.d,
+            borderRadius: d.d / 2,
+            backgroundColor: d.color,
+            opacity: d.opacity
+          }, d.glow ? {
+            shadowColor: d.color,
+            shadowOpacity: 0.8,
+            shadowRadius: 4,
+            shadowOffset: {
+              width: 0,
+              height: 0
+            },
+            elevation: 3
+          } : null]
+        })
+      }, `d-${i}`)), oRings.map((g, i) => /*#__PURE__*/_jsx(View, {
+        style: [styles.anchor, {
+          left: pctX(g.x),
+          top: g.y
+        }],
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            position: 'absolute',
+            width: g.d,
+            height: g.d,
+            borderRadius: g.d / 2,
+            borderWidth: 1.5,
+            borderStyle: 'dashed',
+            borderColor: g.color
+          }
+        })
+      }, `r-${i}`)), oBubbles.map((b, i) => /*#__PURE__*/_jsx(View, {
+        style: [styles.anchor, {
+          left: pctX(b.x),
+          top: b.y
+        }],
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            position: 'absolute',
+            width: b.radius * 2,
+            height: b.radius * 2,
+            borderRadius: b.radius,
+            borderWidth: 1.2,
+            borderColor: b.color,
+            backgroundColor: `${b.color}40`,
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.bubbleText,
+            children: b.count
+          })
+        })
+      }, `b-${i}`)), oMilestones.map((m, i) => /*#__PURE__*/_jsx(View, {
+        style: [styles.anchor, {
+          left: pctX(m.x),
+          top: m.y
+        }],
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            position: 'absolute',
+            width: 11,
+            height: 11,
+            borderRadius: 5.5,
+            backgroundColor: m.passed ? MINT : colors.bg1,
+            borderWidth: 1.6,
+            borderColor: m.passed ? MINT : `${colors.text}40`
+          }
+        })
+      }, `m-${i}`)), oFlags.map((f, i) => /*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          left: pctX(f.x),
+          top: f.y,
+          width: 30,
+          height: 12
+        },
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(Svg, {
+          width: 30,
+          height: 12,
+          viewBox: "0 0 30 12",
+          children: /*#__PURE__*/_jsx(Path, {
+            d: "M0 0L30 6L0 12Z",
+            fill: f.color,
+            opacity: 0.9
+          })
+        })
+      }, `f-${i}`)), oPulses.map((p, i) => /*#__PURE__*/_jsxs(View, {
+        style: [styles.anchor, {
+          left: pctX(p.x),
+          top: p.y
+        }],
+        pointerEvents: "none",
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            position: 'absolute',
+            width: 7.2,
+            height: 7.2,
+            borderRadius: 3.6,
+            backgroundColor: p.color,
+            shadowColor: p.color,
+            shadowOpacity: 0.8,
+            shadowRadius: 5,
+            shadowOffset: {
+              width: 0,
+              height: 0
+            },
+            elevation: 3
+          }
+        }), /*#__PURE__*/_jsx(PulseRing, {
+          color: p.color
+        })]
+      }, `p-${i}`)), oNotes.map((nte, i) => /*#__PURE__*/_jsx(View, {
+        style: [styles.anchor, {
+          left: pctX(nte.x),
+          top: nte.y - 9,
+          alignItems: anchorAlign(nte.anchor)
+        }],
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.note, {
+            color: nte.color
+          }],
+          numberOfLines: 1,
+          children: nte.text
+        })
+      }, `n-${i}`)), oChips.map((c, i) => /*#__PURE__*/_jsx(View, {
+        style: [styles.anchor, {
+          left: pctX(c.x),
+          top: c.y,
+          alignItems: anchorAlign(c.anchor)
+        }],
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(View, {
+          style: [styles.chip, {
+            borderColor: `${c.color}59`
+          }],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.chipText, {
+              color: c.color
+            }],
+            numberOfLines: 1,
+            children: c.text
+          })
+        })
+      }, `c-${i}`))]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    width: '100%'
+  },
+  // zero-size anchor centered on its point: absolutely-positioned children with
+  // no offsets are placed by alignItems/justifyContent (Yoga static position),
+  // so dots/text/chips stay round & legible under the SVG stretch.
+  anchor: {
+    position: 'absolute',
+    width: 0,
+    height: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  // pulse ring riding the NOW / journey dot (mirrors the web SMIL pulse)
+  pulse: {
+    position: 'absolute',
+    width: 9,
+    height: 9,
+    borderRadius: 4.5,
+    borderWidth: 1.4
+  },
+  // tiny mono annotations (title, hour captions, NOW, lane names, inline labels)
+  note: {
+    position: 'absolute',
+    fontFamily: fonts.mono,
+    fontSize: 8.5,
+    lineHeight: 9,
+    letterSpacing: 0.5
+  },
+  // chip-pill labels (dark chip + tinted hairline border — the catalog's tag())
+  chip: {
+    position: 'absolute',
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 999,
+    borderWidth: 1,
+    backgroundColor: `${colors.bg0}C7`
+  },
+  chipText: {
+    fontFamily: fonts.mono,
+    fontSize: 8,
+    lineHeight: 9,
+    letterSpacing: 0.4
+  },
+  bubbleText: {
+    fontFamily: fonts.mono,
+    fontSize: 9,
+    lineHeight: 10,
+    color: colors.text
+  }
+});
+//# sourceMappingURL=TimelineChart.js.map