@lockin90/ui-native 0.0.0-stage → 1.0.0

package/lib/module/components/Hypnogram.js

@@ -0,0 +1,837 @@
+"use strict";
+
+import { Fragment, useId, useState } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import Svg, { Rect, Line, Defs, FeGaussianBlur, Filter, LinearGradient, Stop } from 'react-native-svg';
+import { colors, fonts, radii } from '@lockin90/tokens';
+
+/** A sleep stage. Ordered top → bottom on the plot: awake, rem, light, deep. */
+
+/** One contiguous stretch of sleep in a single stage. Segment widths are drawn
+ *  proportional to `minutes`. */
+
+/** Catalog sleep-chart variants (`lockin90-design/charts/sleep-charts.html`).
+ *  SL-01 `hypnogram` (default) · SL-04 `efficiency-bars` · SL-05 `sleep-week` ·
+ *  SL-06 `bedtime-drift` · SL-07 `night-coach`. SL-02 stage-summary maps to
+ *  `StackedBar`, SL-03 sleep-score maps to `Ring` (see the Hypnogram SDD). */
+
+/** One time bucket of the night for `variant="efficiency-bars"`: minutes asleep
+ *  draw a violet bar UP from the midline, minutes awake an amber bar DOWN. */
+
+/** One night for `variant="bedtime-drift"` — clock hours; values < 12 are read
+ *  as next-morning (e.g. `bed: 22.5` = 10:30pm, `bed: 0.5` = 12:30am,
+ *  `wake: 6.9` = 6:54am). */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const VB_W = 560;
+/** vertical inset (viewBox units) so the top/bottom bands never touch the edge */
+const PAD_Y = 14;
+/** gap between consecutive segment capsules (viewBox units) */
+const GAP = 4;
+/** capsule bar thickness (viewBox units) */
+const BAR_H = 12;
+/** width (px) of the left gutter reserved for stage labels */
+const STAGE_GUTTER = 48;
+/** extra size of a shine underlay shape (viewBox units each side) — glow = a
+ *  Gaussian-blurred, fainter duplicate behind the mark (Fabric-native SVG
+ *  filters in react-native-svg 15), the native twin of the web
+ *  `drop-shadow(0 0 7px …)` shine. */
+const SHINE_PAD = 4;
+/* the duplicate is blurred, so it runs a touch hotter than the old un-blurred
+ * fake to keep the perceived glow near the web's full-alpha drop-shadow */
+const SHINE_OPACITY = 0.5;
+
+/** Stages top → bottom — the classic hypnogram order (deep at the bottom). */
+const STAGES = ['awake', 'rem', 'light', 'deep'];
+const STAGE_LABELS = {
+  awake: 'Awake',
+  rem: 'REM',
+  light: 'Light',
+  deep: 'Deep'
+};
+const STAGE_COLORS = {
+  awake: colors.warn,
+  rem: colors.violet,
+  light: colors.cyan,
+  deep: colors.indigo
+};
+const DEFAULT_SEGMENTS = [{
+  stage: 'awake',
+  minutes: 8
+}, {
+  stage: 'light',
+  minutes: 42
+}, {
+  stage: 'deep',
+  minutes: 55
+}, {
+  stage: 'light',
+  minutes: 28
+}, {
+  stage: 'rem',
+  minutes: 22
+}, {
+  stage: 'light',
+  minutes: 35
+}, {
+  stage: 'deep',
+  minutes: 30
+}, {
+  stage: 'rem',
+  minutes: 26
+}, {
+  stage: 'light',
+  minutes: 38
+}, {
+  stage: 'awake',
+  minutes: 6
+}, {
+  stage: 'rem',
+  minutes: 34
+}, {
+  stage: 'light',
+  minutes: 30
+}];
+const DEFAULT_AXIS = ['11p', '1a', '3a', '5a', '7a'];
+/** SL-04's clock axis (fractions 0 / 0.5 / 1 of the night). */
+const DEFAULT_CLOCK_AXIS = ['11PM', '3AM', '7AM'];
+const DEFAULT_DAYS = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
+
+/** SL-04 default night — the catalog card's deterministic buckets (32 × ~15min;
+ *  3 brief awakenings). */
+const DEFAULT_INTERVALS = [{
+  asleepMinutes: 0,
+  awakeMinutes: 2
+}, {
+  asleepMinutes: 12,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 10,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 9,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 12,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 9,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 11,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 10,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 11,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 14,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 13,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 8,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 9,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 13,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 0,
+  awakeMinutes: 5
+}, {
+  asleepMinutes: 12,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 14,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 14,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 8,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 10,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 8,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 0,
+  awakeMinutes: 5
+}, {
+  asleepMinutes: 10,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 14,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 12,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 10,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 8,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 10,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 12,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 8,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 14,
+  awakeMinutes: 0
+}, {
+  asleepMinutes: 13,
+  awakeMinutes: 0
+}];
+/** SL-05 default week (hours). */
+const DEFAULT_WEEK = [7.4, 6.1, 7.9, 8.2, 5.8, 8.6, 7.7];
+/** SL-06 default nights — weekday-consistent, Fri/Sat drift late. */
+const DEFAULT_NIGHTS = [{
+  bed: 22.6,
+  wake: 6.9
+}, {
+  bed: 22.9,
+  wake: 6.7
+}, {
+  bed: 22.4,
+  wake: 7.0
+}, {
+  bed: 22.7,
+  wake: 6.8
+}, {
+  bed: 24.5,
+  wake: 7.6
+}, {
+  bed: 25.0,
+  wake: 7.9
+}, {
+  bed: 22.9,
+  wake: 7.0
+}];
+const DEFAULT_WINDOW = [22.3, 23.5];
+
+/** SL-06 column geometry — fractions of the drawable width (catalog: dots run
+ *  x = P.l+34 … plot right − 4; the mint band starts a hair earlier). */
+const DRIFT_X0 = 0.114;
+const DRIFT_X1 = 0.9866;
+const DRIFT_BAND_X = 0.1;
+const DRIFT_BAND_W = 0.87;
+
+/** Round a number for compact attribute values. */
+const r = n => Math.round(n * 100) / 100;
+
+/** y-center (viewBox units) of a stage's band. */
+function bandY(stage, height) {
+  const top = PAD_Y;
+  const bottom = height - PAD_Y;
+  const i = STAGES.indexOf(stage);
+  if (STAGES.length === 1) return (top + bottom) / 2;
+  return top + i / (STAGES.length - 1) * (bottom - top);
+}
+
+/** Clock hour → continuous night-axis hour (values < 12 read as next morning). */
+const nightHour = h => h < 12 ? h + 24 : h;
+
+/** Floating pill tag over the plot (mirrors the catalog's `C.tag` / the web
+ *  `.lk-hyp-tag`). Absolutely positioned via `style`. */
+function HypTag({
+  text,
+  color,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.tag, {
+      borderColor: color
+    }, style],
+    pointerEvents: "none",
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.tagText, {
+        color
+      }],
+      numberOfLines: 1,
+      children: text
+    })
+  });
+}
+
+/**
+ * Hypnogram — the sleep-chart family. The default variant is a sleep-stage
+ * timeline: four horizontal bands (Awake / REM / Light / Deep, top → bottom)
+ * each hold rounded capsule bars whose widths are proportional to each
+ * segment's minutes; thin vertical connectors link consecutive stage
+ * transitions so the eye follows the descent/ascent like a stepped line.
+ * Catalog variants add: `efficiency-bars` (asleep up / awake down from the
+ * midline), `sleep-week` (7 duration bars vs a dashed target rule),
+ * `bedtime-drift` (bed/wake dots per day + consistency band) and `night-coach`
+ * (the hypnogram + wake-window rule + optional recommendation pill). The Svg
+ * stretches to the measured container width via a fixed viewBox + non-uniform
+ * scaling; tags, dots and day letters are RN overlays so they stay crisp.
+ * Shine glow = wider, fainter duplicate shapes behind the marks (no SVG
+ * filters on native).
+ */
+export function Hypnogram({
+  variant = 'hypnogram',
+  segments = DEFAULT_SEGMENTS,
+  height = 160,
+  axis,
+  showStageLabels = true,
+  shine = false,
+  intervals = DEFAULT_INTERVALS,
+  asleepLabel = 'ASLEEP 94%',
+  awakeLabel = 'AWAKE 22 MIN',
+  week = DEFAULT_WEEK,
+  targetHours = 8,
+  days = DEFAULT_DAYS,
+  nights = DEFAULT_NIGHTS,
+  consistencyWindow = DEFAULT_WINDOW,
+  lateBedAfter = 24,
+  windowLabel = 'CONSISTENT WINDOW',
+  wakeWindowAt = 0.62,
+  wakeWindowLabel = 'WAKE WINDOW OPENS',
+  recommendation,
+  style
+}) {
+  const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
+  const [width, setWidth] = useState(0);
+  const onLayout = e => setWidth(e.nativeEvent.layout.width);
+  const staged = variant === 'hypnogram' || variant === 'night-coach';
+  const resolvedAxis = axis ?? (staged ? DEFAULT_AXIS : variant === 'efficiency-bars' ? DEFAULT_CLOCK_AXIS : []);
+
+  /* ---- SL-01 / SL-07 · stage bands + capsules (+ coach overlays) ---- */
+  let bars = [];
+  let connectors = [];
+  if (staged) {
+    const total = segments.reduce((s, seg) => s + Math.max(0, seg.minutes), 0) || 1;
+    const gaps = Math.max(0, segments.length - 1) * GAP;
+    const drawable = Math.max(0, VB_W - gaps);
+    // lay segments left → right, width ∝ minutes, with a GAP between each
+    let x = 0;
+    bars = segments.map((seg, i) => {
+      const w = Math.max(0, seg.minutes) / total * drawable;
+      const y = bandY(seg.stage, height);
+      const bar = {
+        x,
+        w,
+        cy: y,
+        stage: seg.stage,
+        x0: x,
+        x1: x + w,
+        key: i
+      };
+      x += w + GAP;
+      return bar;
+    });
+    // vertical connectors: link the end-y of one segment to the start-y of the next
+    connectors = bars.slice(1).map((b, i) => {
+      const prev = bars[i];
+      const cx = (prev.x1 + b.x0) / 2;
+      return {
+        cx,
+        y1: prev.cy,
+        y2: b.cy,
+        key: i
+      };
+    });
+  }
+  const wwX = Math.max(0, Math.min(1, wakeWindowAt)) * VB_W;
+
+  /* ---- SL-04 · efficiency bars (asleep up / awake down from the midline) ---- */
+  const effMid = height / 2;
+  const effAmp = height / 2 - 10;
+  const effUnit = Math.max(1, ...intervals.map(iv => Math.max(0, iv.asleepMinutes) + Math.max(0, iv.awakeMinutes)));
+  const effStep = VB_W / Math.max(1, intervals.length);
+
+  /* ---- SL-05 · week bars vs target ---- */
+  const weekMax = Math.max(targetHours + 1.5, Math.max(0, ...week) + 0.9);
+  const weekY = v => 4 + (1 - v / weekMax) * (height - 5);
+  const weekStep = VB_W / Math.max(1, week.length);
+  const targetY = weekY(targetHours);
+
+  /* ---- SL-06 · bedtime drift (earlier at the top, later at the bottom) ---- */
+  const winLo = nightHour(Math.min(consistencyWindow[0], consistencyWindow[1]));
+  const winHi = nightHour(Math.max(consistencyWindow[0], consistencyWindow[1]));
+  const driftHours = nights.flatMap(n => [nightHour(n.bed), nightHour(n.wake)]).concat(winLo, winHi);
+  const driftLo = Math.min(...driftHours) - 0.6;
+  const driftSpan = Math.max(...driftHours) + 0.6 - driftLo || 1;
+  // 24px reserved at the top so the window tag sits above the band (catalog P.t)
+  const driftY = h => 24 + (nightHour(h) - driftLo) / driftSpan * (height - 32);
+  const driftX = i => VB_W * (nights.length > 1 ? DRIFT_X0 + i * (DRIFT_X1 - DRIFT_X0) / (nights.length - 1) : 0.5);
+  const bedMeanY = nights.length ? nights.reduce((s, n) => s + driftY(n.bed), 0) / nights.length : 0;
+  const wakeMeanY = nights.length ? nights.reduce((s, n) => s + driftY(n.wake), 0) / nights.length : 0;
+
+  // the drawing area shrinks by the gutter width when the stage labels are on
+  // (staged variants only), so the bars stay clear of the labels.
+  const canvasW = staged && showStageLabels ? Math.max(0, width - STAGE_GUTTER) : width;
+  /** viewBox x-units → rendered px inside the canvas */
+  const px = xUnits => xUnits / VB_W * canvasW;
+
+  /* SVG shapes per variant (drawn only once the container width is known) */
+  let shapes = null;
+  if (canvasW > 0 && staged) {
+    shapes = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Defs, {
+        children: STAGES.map(stage =>
+        /*#__PURE__*/
+        // per-BAR gradient (objectBoundingBox), so every band reads
+        // bright like web — NOT a full-height userSpaceOnUse ramp that
+        // made the lower bands sample the dark/transparent end.
+        _jsxs(LinearGradient, {
+          id: `lk-hyp-${stage}-${uid}`,
+          x1: "0",
+          y1: "0",
+          x2: "0",
+          y2: "1",
+          children: [/*#__PURE__*/_jsx(Stop, {
+            offset: "0",
+            stopColor: STAGE_COLORS[stage],
+            stopOpacity: 0.95
+          }), /*#__PURE__*/_jsx(Stop, {
+            offset: "1",
+            stopColor: STAGE_COLORS[stage],
+            stopOpacity: 0.85
+          })]
+        }, stage))
+      }), connectors.map(c => /*#__PURE__*/_jsx(Line, {
+        x1: r(c.cx),
+        y1: r(c.y1),
+        x2: r(c.cx),
+        y2: r(c.y2),
+        stroke: colors.border2,
+        strokeWidth: 1.5,
+        opacity: 0.8
+      }, c.key)), shine && bars.map(b => /*#__PURE__*/_jsx(Rect, {
+        x: r(b.x - SHINE_PAD),
+        y: r(b.cy - BAR_H / 2 - SHINE_PAD),
+        width: r(Math.max(0, b.w) + SHINE_PAD * 2),
+        height: BAR_H + SHINE_PAD * 2,
+        rx: (BAR_H + SHINE_PAD * 2) / 2,
+        ry: (BAR_H + SHINE_PAD * 2) / 2,
+        fill: STAGE_COLORS[b.stage],
+        opacity: SHINE_OPACITY,
+        filter: `url(#lk-hyp-blur-${uid})`
+      }, `s${b.key}`)), bars.map(b => /*#__PURE__*/_jsx(Rect, {
+        x: r(b.x),
+        y: r(b.cy - BAR_H / 2),
+        width: r(Math.max(0, b.w)),
+        height: BAR_H,
+        rx: BAR_H / 2,
+        ry: BAR_H / 2,
+        fill: `url(#lk-hyp-${b.stage}-${uid})`
+      }, b.key)), variant === 'night-coach' && /*#__PURE__*/_jsx(Line, {
+        x1: r(wwX),
+        y1: 2,
+        x2: r(wwX),
+        y2: height - 2,
+        stroke: colors.zoneMid,
+        strokeWidth: 1,
+        strokeDasharray: "3 4",
+        opacity: 0.7
+      })]
+    });
+  } else if (canvasW > 0 && variant === 'efficiency-bars') {
+    shapes = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Rect, {
+        x: 0.5,
+        y: 0.5,
+        width: VB_W - 1,
+        height: height - 1,
+        rx: 8,
+        fill: colors.violet,
+        opacity: 0.05
+      }), intervals.map((iv, i) => {
+        const x = i * effStep + effStep * 0.18;
+        const w = effStep * 0.64;
+        const up = Math.max(0, iv.asleepMinutes) / effUnit * effAmp;
+        const down = Math.max(0, iv.awakeMinutes) / effUnit * effAmp;
+        return /*#__PURE__*/_jsxs(Fragment, {
+          children: [shine && up > 0 && /*#__PURE__*/_jsx(Rect, {
+            x: r(x - SHINE_PAD / 2),
+            y: r(effMid - up - SHINE_PAD / 2),
+            width: r(w + SHINE_PAD),
+            height: r(up + SHINE_PAD),
+            rx: 3,
+            fill: colors.violet,
+            opacity: SHINE_OPACITY,
+            filter: `url(#lk-hyp-blur-${uid})`
+          }), shine && down > 0 && /*#__PURE__*/_jsx(Rect, {
+            x: r(x - SHINE_PAD / 2),
+            y: r(effMid - SHINE_PAD / 2),
+            width: r(w + SHINE_PAD),
+            height: r(down + SHINE_PAD),
+            rx: 3,
+            fill: colors.zoneMid,
+            opacity: SHINE_OPACITY,
+            filter: `url(#lk-hyp-blur-${uid})`
+          }), up > 0 && /*#__PURE__*/_jsx(Rect, {
+            x: r(x),
+            y: r(effMid - up),
+            width: r(w),
+            height: r(up),
+            rx: 2,
+            fill: colors.violet,
+            opacity: 0.8
+          }), down > 0 && /*#__PURE__*/_jsx(Rect, {
+            x: r(x),
+            y: r(effMid),
+            width: r(w),
+            height: r(down),
+            rx: 2,
+            fill: colors.zoneMid,
+            opacity: 0.95
+          })]
+        }, i);
+      })]
+    });
+  } else if (canvasW > 0 && variant === 'sleep-week') {
+    shapes = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [[0.25, 0.5, 0.75].map(f => /*#__PURE__*/_jsx(Line, {
+        x1: 0,
+        x2: VB_W,
+        y1: r(4 + (height - 5) * f),
+        y2: r(4 + (height - 5) * f),
+        stroke: colors.border,
+        strokeWidth: 1,
+        opacity: 0.55
+      }, f)), /*#__PURE__*/_jsx(Line, {
+        x1: 0,
+        x2: VB_W,
+        y1: height - 1,
+        y2: height - 1,
+        stroke: colors.border,
+        strokeWidth: 1
+      }), week.map((d, i) => {
+        const under = d < targetHours - 0.5;
+        const color = under ? colors.zoneMid : colors.violet;
+        const y = weekY(Math.max(0, d));
+        const x = i * weekStep + weekStep * 0.22;
+        const w = weekStep * 0.56;
+        return /*#__PURE__*/_jsxs(Fragment, {
+          children: [shine && /*#__PURE__*/_jsx(Rect, {
+            x: r(x - SHINE_PAD / 2),
+            y: r(y - SHINE_PAD / 2),
+            width: r(w + SHINE_PAD),
+            height: r(Math.max(0, height - 1 - y) + SHINE_PAD / 2),
+            rx: 5,
+            fill: color,
+            opacity: SHINE_OPACITY,
+            filter: `url(#lk-hyp-blur-${uid})`
+          }), /*#__PURE__*/_jsx(Rect, {
+            x: r(x),
+            y: r(y),
+            width: r(w),
+            height: r(Math.max(0, height - 1 - y)),
+            rx: 4,
+            fill: color,
+            opacity: 0.9
+          })]
+        }, i);
+      }), /*#__PURE__*/_jsx(Line, {
+        x1: 0,
+        x2: VB_W,
+        y1: r(targetY),
+        y2: r(targetY),
+        stroke: colors.mint,
+        strokeWidth: 1,
+        strokeDasharray: "5 4",
+        opacity: 0.85
+      })]
+    });
+  } else if (canvasW > 0 && variant === 'bedtime-drift') {
+    shapes = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Rect, {
+        x: 0.5,
+        y: 0.5,
+        width: VB_W - 1,
+        height: height - 1,
+        rx: 8,
+        fill: colors.violet,
+        opacity: 0.05
+      }), /*#__PURE__*/_jsx(Rect, {
+        x: r(VB_W * DRIFT_BAND_X),
+        y: r(driftY(winLo)),
+        width: r(VB_W * DRIFT_BAND_W),
+        height: r(Math.max(0, driftY(winHi) - driftY(winLo))),
+        rx: 3,
+        fill: colors.mint,
+        opacity: 0.07
+      }), nights.map((n, i) => /*#__PURE__*/_jsx(Line, {
+        x1: r(driftX(i)),
+        x2: r(driftX(i)),
+        y1: r(driftY(n.bed)),
+        y2: r(driftY(n.wake)),
+        stroke: colors.border2,
+        strokeWidth: 2
+      }, i))]
+    });
+  }
+
+  /** a round overlay dot (RN View); shine = a real `boxShadow` glow — the
+   *  native twin of the web `.lk-hyp-dot` box-shadow(0 0 8px) */
+  const dot = (key, xPx, yPx, color) => /*#__PURE__*/_jsx(Fragment, {
+    children: /*#__PURE__*/_jsx(View, {
+      style: [styles.dot, {
+        left: xPx - 4,
+        top: yPx - 4,
+        backgroundColor: color
+      }, shine ? {
+        boxShadow: `0 0 8px ${color}`
+      } : null],
+      pointerEvents: "none"
+    })
+  }, key);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.root, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [styles.plot, {
+        height
+      }],
+      onLayout: onLayout,
+      children: [staged && showStageLabels ? /*#__PURE__*/_jsx(View, {
+        style: styles.stages,
+        pointerEvents: "none",
+        children: STAGES.map(stage => /*#__PURE__*/_jsx(Text, {
+          style: [styles.stage, {
+            top: `${bandY(stage, height) / height * 100}%`
+          }],
+          numberOfLines: 1,
+          children: STAGE_LABELS[stage]
+        }, stage))
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        style: [styles.canvas, {
+          width: canvasW
+        }],
+        children: [canvasW > 0 && /*#__PURE__*/_jsxs(Svg, {
+          width: canvasW,
+          height: height,
+          viewBox: `0 0 ${VB_W} ${height}`,
+          preserveAspectRatio: "none",
+          children: [shine ?
+          /*#__PURE__*/
+          /* real Gaussian blur for the shine (Fabric-native in
+             react-native-svg 15) — the native twin of the web
+             drop-shadow(0 0 7px). Region in user space over the full
+             canvas so flat bars never clip the blur. */
+          _jsx(Defs, {
+            children: /*#__PURE__*/_jsx(Filter, {
+              id: `lk-hyp-blur-${uid}`,
+              filterUnits: "userSpaceOnUse",
+              x: -12,
+              y: -12,
+              width: VB_W + 24,
+              height: height + 24,
+              children: /*#__PURE__*/_jsx(FeGaussianBlur, {
+                stdDeviation: 3.5
+              })
+            })
+          }) : null, shapes]
+        }), canvasW > 0 && variant === 'efficiency-bars' && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(HypTag, {
+            text: asleepLabel,
+            color: colors.violet,
+            style: {
+              top: 4,
+              right: 2
+            }
+          }), /*#__PURE__*/_jsx(HypTag, {
+            text: awakeLabel,
+            color: colors.zoneMid,
+            style: {
+              bottom: 4,
+              right: 2
+            }
+          })]
+        }), canvasW > 0 && variant === 'sleep-week' && /*#__PURE__*/_jsx(HypTag, {
+          text: `TARGET ${targetHours}H`,
+          color: colors.mint,
+          style: {
+            top: targetY - 21,
+            right: 2
+          }
+        }), canvasW > 0 && variant === 'bedtime-drift' && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(HypTag, {
+            text: windowLabel,
+            color: colors.mint,
+            style: {
+              top: driftY(winLo) - 21,
+              right: 2
+            }
+          }), nights.map((n, i) => {
+            const late = nightHour(n.bed) > nightHour(lateBedAfter);
+            return /*#__PURE__*/_jsxs(Fragment, {
+              children: [dot(`b${i}`, px(driftX(i)), driftY(n.bed), late ? colors.zoneLow : colors.violet), dot(`w${i}`, px(driftX(i)), driftY(n.wake), colors.zoneMid)]
+            }, i);
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.side, {
+              top: bedMeanY - 5,
+              color: colors.violet
+            }],
+            pointerEvents: "none",
+            children: "BED"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.side, {
+              top: wakeMeanY - 5,
+              color: colors.zoneMid
+            }],
+            pointerEvents: "none",
+            children: "WAKE"
+          })]
+        }), canvasW > 0 && variant === 'night-coach' && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.centerRow, {
+              top: 2,
+              transform: [{
+                translateX: px(wwX) - canvasW / 2
+              }]
+            }],
+            pointerEvents: "none",
+            children: /*#__PURE__*/_jsx(HypTag, {
+              text: wakeWindowLabel,
+              color: colors.zoneMid
+            })
+          }), recommendation ? /*#__PURE__*/_jsx(HypTag, {
+            text: recommendation,
+            color: colors.mint,
+            style: {
+              bottom: 2,
+              right: 2
+            }
+          }) : null]
+        })]
+      })]
+    }), (variant === 'sleep-week' || variant === 'bedtime-drift') && days.length > 0 && width > 0 && /*#__PURE__*/_jsx(View, {
+      style: styles.days,
+      pointerEvents: "none",
+      children: days.slice(0, variant === 'bedtime-drift' ? nights.length : week.length).map((d, i) => {
+        const xPx = variant === 'bedtime-drift' ? px(driftX(i)) : px(i * weekStep + weekStep * 0.5);
+        return /*#__PURE__*/_jsx(Text, {
+          style: [styles.day, {
+            left: xPx - 24
+          }],
+          numberOfLines: 1,
+          children: d
+        }, i);
+      })
+    }), resolvedAxis.length > 0 && /*#__PURE__*/_jsx(View, {
+      style: [styles.axis, staged && showStageLabels ? {
+        paddingLeft: STAGE_GUTTER
+      } : null],
+      children: resolvedAxis.map((t, i) => /*#__PURE__*/_jsx(Text, {
+        style: styles.axisText,
+        children: t
+      }, i))
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: 'column',
+    gap: 8,
+    width: '100%'
+  },
+  plot: {
+    position: 'relative',
+    flexDirection: 'row',
+    width: '100%'
+  },
+  // left gutter holding the stage labels
+  stages: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    width: STAGE_GUTTER
+  },
+  stage: {
+    position: 'absolute',
+    left: 0,
+    marginTop: -5,
+    fontFamily: fonts.mono,
+    fontSize: 10,
+    lineHeight: 10,
+    letterSpacing: 0.2,
+    color: colors.textFaint
+  },
+  // drawing area: holds the Svg + overlays; sits to the right of the stage gutter
+  canvas: {
+    position: 'relative',
+    height: '100%',
+    marginLeft: 'auto'
+  },
+  axis: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 1
+  },
+  axisText: {
+    fontFamily: fonts.mono,
+    fontSize: 9.5,
+    color: colors.textFaint
+  },
+  // floating pill tag (mirrors web .lk-hyp-tag) — dark-backed like the
+  // catalog's C.tag so it stays readable over bright bars
+  tag: {
+    position: 'absolute',
+    paddingVertical: 3,
+    paddingHorizontal: 7,
+    borderRadius: radii.pill,
+    borderWidth: 1,
+    backgroundColor: colors.bg1
+  },
+  tagText: {
+    fontFamily: fonts.mono,
+    fontSize: 9,
+    lineHeight: 9,
+    letterSpacing: 0.36
+  },
+  // full-width row that centers a tag; shifted via translateX to the anchor
+  centerRow: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center'
+  },
+  // round bed/wake dots + the fainter, wider shine halo behind them
+  dot: {
+    position: 'absolute',
+    width: 8,
+    height: 8,
+    borderRadius: 4
+  },
+  // BED / WAKE side labels pinned at the series' mean y
+  side: {
+    position: 'absolute',
+    left: 2,
+    fontFamily: fonts.mono,
+    fontSize: 10,
+    lineHeight: 10,
+    letterSpacing: 0.2
+  },
+  // day letters row under the plot (SL-05/06)
+  days: {
+    position: 'relative',
+    height: 12
+  },
+  day: {
+    position: 'absolute',
+    top: 0,
+    width: 48,
+    textAlign: 'center',
+    fontFamily: fonts.mono,
+    fontSize: 9.5,
+    lineHeight: 10,
+    color: colors.textFaint
+  }
+});
+//# sourceMappingURL=Hypnogram.js.map