@crvouga/mockingbird-notifications 0.0.0-stage → 0.1.0

package/dist/ui.js

@@ -0,0 +1,1923 @@
+import {
+  TEST_IDS,
+  selectors
+} from "./chunk-LM7R7AR7.js";
+import {
+  ROOT_CLASS,
+  STYLES
+} from "./chunk-QE3TRUI6.js";
+
+// src/ui/icons.ts
+var svg = (w, h, body, extra = "") => `<svg width="${w}" height="${h}" viewBox="0 0 ${w} ${h}" fill="none" aria-hidden="true" ${extra}>${body}</svg>`;
+var material = (d, size = 20) => `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="${d}"/></svg>`;
+var icons = {
+  signal: (c = "currentColor") => svg(
+    18,
+    12,
+    `<rect x="0" y="8" width="3" height="4" rx="1" fill="${c}"/><rect x="5" y="5.5" width="3" height="6.5" rx="1" fill="${c}"/><rect x="10" y="3" width="3" height="9" rx="1" fill="${c}"/><rect x="15" y="0" width="3" height="12" rx="1" fill="${c}"/>`
+  ),
+  wifi: (c = "currentColor") => svg(
+    16,
+    12,
+    `<path d="M8 2.6c2.3 0 4.4.9 6 2.4l1.1-1.1A10 10 0 0 0 8 1 10 10 0 0 0 .9 3.9L2 5c1.6-1.5 3.7-2.4 6-2.4Z" fill="${c}"/><path d="M8 5.9c1.4 0 2.6.5 3.6 1.4l1.1-1.1A6.7 6.7 0 0 0 8 4.3c-1.8 0-3.5.7-4.7 1.9l1.1 1.1c1-.9 2.2-1.4 3.6-1.4Z" fill="${c}"/><path d="M10.3 8.6 8 11 5.7 8.6A3.3 3.3 0 0 1 8 7.6c.9 0 1.7.4 2.3 1Z" fill="${c}"/>`
+  ),
+  battery: (c = "currentColor") => svg(
+    27,
+    13,
+    `<rect x=".5" y=".5" width="23" height="12" rx="3.8" stroke="${c}" stroke-opacity=".4"/><rect x="2" y="2" width="20" height="9" rx="2.5" fill="${c}"/><path d="M25 4.5v4c.8-.3 1.3-1.1 1.3-2s-.5-1.7-1.3-2Z" fill="${c}" fill-opacity=".45"/>`
+  ),
+  compose: () => svg(
+    24,
+    24,
+    `<path d="M19 13v6.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 3 19.5v-13A1.5 1.5 0 0 1 4.5 5H11" stroke="#007aff" stroke-width="1.8" stroke-linecap="round"/><path d="m9.5 14.5.6-3.1 8.8-8.8a1.5 1.5 0 0 1 2.1 0l.9.9a1.5 1.5 0 0 1 0 2.1l-8.8 8.8-3.6.1Z" stroke="#007aff" stroke-width="1.8" stroke-linejoin="round"/>`
+  ),
+  search: (c = "currentColor", s = 16) => svg(
+    s,
+    s,
+    `<circle cx="${s * 0.43}" cy="${s * 0.43}" r="${s * 0.3}" stroke="${c}" stroke-width="${s / 9}"/><path d="m${s * 0.65} ${s * 0.65} ${s * 0.27} ${s * 0.27}" stroke="${c}" stroke-width="${s / 9}" stroke-linecap="round"/>`
+  ),
+  mic: (c = "#8e8e93") => svg(
+    14,
+    20,
+    `<rect x="4" y="1" width="6" height="11" rx="3" fill="${c}"/><path d="M1.5 9a5.5 5.5 0 0 0 11 0M7 14.5V18" stroke="${c}" stroke-width="1.6" stroke-linecap="round"/>`
+  ),
+  chevronRight: (c = "#c4c4c6") => svg(
+    8,
+    13,
+    `<path d="m1.5 1.5 5 5-5 5" stroke="${c}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>`
+  ),
+  chevronBack: () => svg(
+    13,
+    21,
+    `<path d="M11 2 2.5 10.5 11 19" stroke="#007aff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>`
+  ),
+  plus: () => svg(
+    16,
+    16,
+    `<path d="M8 2v12M2 8h12" stroke="#8e8e93" stroke-width="2.2" stroke-linecap="round"/>`
+  ),
+  person: () => svg(
+    26,
+    26,
+    `<circle cx="13" cy="9" r="5" fill="#fff"/><path d="M3 24c0-5.5 4.5-9 10-9s10 3.5 10 9" fill="#fff"/>`
+  ),
+  padlock: () => svg(
+    16,
+    21,
+    `<rect x="1" y="9" width="14" height="11" rx="2.5" fill="#fff"/><path d="M4 9V6a4 4 0 0 1 8 0v3" stroke="#fff" stroke-width="2"/>`
+  ),
+  flashlight: () => svg(
+    14,
+    22,
+    `<path d="M2 1h10v4L9.5 9v11a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V9L2 5V1Z" fill="#fff"/>`
+  ),
+  camera: () => svg(
+    22,
+    18,
+    `<path d="M2 5.5A1.5 1.5 0 0 1 3.5 4h3l1.6-2.2h5.8L15.5 4h3A1.5 1.5 0 0 1 20 5.5v10a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 2 15.5v-10Z" fill="#fff"/><circle cx="11" cy="10.3" r="3.6" fill="#555"/>`
+  ),
+  bell: () => material(
+    "M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2Zm6-6V11a6 6 0 0 0-5-5.9V4a1 1 0 0 0-2 0v1.1A6 6 0 0 0 6 11v5l-2 2v1h16v-1l-2-2Z",
+    18
+  ),
+  expand: () => material("M7.4 8.6 12 13.2l4.6-4.6L18 10l-6 6-6-6z", 16),
+  collapse: () => material("M7.4 15.4 12 10.8l4.6 4.6L18 14l-6-6-6 6z", 16),
+  androidWifi: () => material("M12 21 23.6 6.5A17.6 17.6 0 0 0 12 2.5 17.6 17.6 0 0 0 .4 6.5Z", 15),
+  androidSignal: () => material("M2 22h20V2Z", 14),
+  androidBattery: () => material(
+    "M16 4h-2V2h-4v2H8a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1Z",
+    15
+  ),
+  menu: () => material("M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z", 24),
+  tune: () => material(
+    "M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z",
+    24
+  ),
+  help: () => material(
+    "M11 18h2v-2h-2v2zm1-16a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm0-14a4 4 0 0 0-4 4h2a2 2 0 1 1 4 0c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5a4 4 0 0 0-4-4z",
+    24
+  ),
+  gear: () => material(
+    "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.48.48 0 0 0-.48-.41h-3.84a.48.48 0 0 0-.48.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.48.48 0 0 0-.59.22L2.74 8.87a.47.47 0 0 0 .12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.47.47 0 0 0-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z",
+    24
+  ),
+  apps: () => material(
+    "M6 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0-6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm4-8a2 2 0 1 0 4 0 2 2 0 0 0-4 0zm-4 2a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4z",
+    24
+  ),
+  pencil: () => material(
+    "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z",
+    24
+  ),
+  inbox: () => material(
+    "M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 12h-4a3 3 0 0 1-6 0H5V5h14v10z",
+    20
+  ),
+  star: () => material(
+    "M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z",
+    20
+  ),
+  clock: () => material(
+    "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z",
+    20
+  ),
+  send: () => material(
+    "M3.4 20.4l17.45-7.48a1 1 0 0 0 0-1.84L3.4 3.6a.99.99 0 0 0-1.39.91L2 9.12c0 .5.37.93.87.99L17 12 2.87 13.88c-.5.07-.87.5-.87 1l.01 4.61c0 .71.73 1.2 1.39.91z",
+    20
+  ),
+  draft: () => material(
+    "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM6 20V4h7v5h5v11H6z",
+    20
+  ),
+  more: () => material(
+    "M12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4z",
+    20
+  ),
+  refresh: () => material(
+    "M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 1 0 7.73 10h-2.08A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z",
+    20
+  ),
+  checkbox: () => material(
+    "M19 5v14H5V5h14m0-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z",
+    18
+  ),
+  back: () => material("M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z", 20),
+  archive: () => material(
+    "M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5 6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z",
+    20
+  ),
+  report: () => material(
+    "M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM19 14.9 14.9 19H9.1L5 14.9V9.1L9.1 5h5.8L19 9.1v5.8zM11 7h2v6h-2zm0 8h2v2h-2z",
+    20
+  ),
+  trash: () => material(
+    "M15 4V3H9v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5zm2 15H7V6h10v13zM9 8h2v9H9zm4 0h2v9h-2z",
+    20
+  ),
+  reply: () => material("M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z", 20),
+  forward: () => material("M14 9V5l7 7-7 7v-4.1c-5 0-8.5 1.6-11 5.1 1-5 4-10 11-11z", 20),
+  clip: () => material(
+    "M16.5 6v11.5a4 4 0 0 1-8 0V5a2.5 2.5 0 0 1 5 0v10.5a1 1 0 0 1-2 0V6H10v9.5a2.5 2.5 0 0 0 5 0V5a4 4 0 0 0-8 0v12.5a5.5 5.5 0 0 0 11 0V6h-1.5z",
+    16
+  ),
+  file: () => material(
+    "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm4 18H6V4h7v5h5v11z",
+    28
+  ),
+  dropdown: () => material("M7 10l5 5 5-5z", 18),
+  lock: () => material(
+    "M18 8h-1V6A5 5 0 0 0 7 6v2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2zM9 6a3 3 0 0 1 6 0v2H9V6z",
+    14
+  ),
+  envelope: () => svg(
+    30,
+    24,
+    `<path d="M3 4h24v16a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4Z" fill="#e8eaed"/><path d="M3 4l12 9 12-9" stroke="#5f6368" stroke-width="2.2" stroke-linejoin="round"/><path d="M3 4h24" stroke="#5f6368" stroke-width="2.2"/>`
+  ),
+  pin: (size = 16) => material(
+    "M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z",
+    size
+  ),
+  bellSlash: (size = 16) => material(
+    "M20 18.69 7.84 6.14 5.27 3.49 4 4.76l2.8 2.8v.01c-.52.99-.8 2.16-.8 3.42v5l-2 2v1h13.73l2 2L21 19.72l-1-1.03zM12 22c1.11 0 2-.89 2-2h-4c0 1.11.89 2 2 2zm6-7.32V11c0-3.08-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68c-.15.03-.29.08-.42.12-.1.03-.2.07-.3.11-.23.09-.46.2-.68.31L18 14.68z",
+    size
+  ),
+  volumeOn: (size = 16) => material(
+    "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z",
+    size
+  ),
+  volumeOff: (size = 16) => material(
+    "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z",
+    size
+  ),
+  markUnread: (size = 20) => material(
+    "M22 8.98V18c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h10.1c-.06.32-.1.66-.1 1 0 1.48.65 2.79 1.67 3.71L12 11 4 6v2l8 5 5.3-3.32c.54.2 1.1.32 1.7.32 1.13 0 2.16-.39 3-1.02zM16 5c0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3-3 1.34-3 3z",
+    size
+  ),
+  markRead: (size = 20) => material(
+    "M21.99 8c0-.72-.37-1.35-.94-1.7L12 1 2.95 6.3C2.38 6.65 2 7.28 2 8v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2l-.01-10zM12 13 3.74 7.84 12 3l8.26 4.84L12 13z",
+    size
+  ),
+  close: (size = 16) => material(
+    "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",
+    size
+  ),
+  starFilled: (size = 20) => material(
+    "M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z",
+    size
+  )
+};
+
+// src/ui/sounds.ts
+var bell = (ctx, out, at, freq, length, level = 1) => {
+  for (const [ratio, gain] of [
+    [1, 1],
+    [2.76, 0.18],
+    [5.4, 0.06]
+  ]) {
+    const osc = ctx.createOscillator();
+    const env = ctx.createGain();
+    osc.type = "sine";
+    osc.frequency.value = freq * ratio;
+    env.gain.setValueAtTime(0, at);
+    env.gain.linearRampToValueAtTime(0.32 * gain * level, at + 6e-3);
+    env.gain.exponentialRampToValueAtTime(1e-4, at + length / ratio ** 0.35);
+    osc.connect(env).connect(out);
+    osc.start(at);
+    osc.stop(at + length + 0.05);
+  }
+};
+var mallet = (ctx, out, at, freq, length) => {
+  const osc = ctx.createOscillator();
+  const filter = ctx.createBiquadFilter();
+  const env = ctx.createGain();
+  osc.type = "triangle";
+  osc.frequency.value = freq;
+  filter.type = "lowpass";
+  filter.frequency.setValueAtTime(freq * 6, at);
+  filter.frequency.exponentialRampToValueAtTime(freq * 1.5, at + length);
+  env.gain.setValueAtTime(0, at);
+  env.gain.linearRampToValueAtTime(0.42, at + 4e-3);
+  env.gain.exponentialRampToValueAtTime(1e-4, at + length);
+  osc.connect(filter).connect(env).connect(out);
+  osc.start(at);
+  osc.stop(at + length + 0.05);
+};
+var VOICES = {
+  sms: (ctx, out, t) => {
+    bell(ctx, out, t, 1318.5, 0.5);
+    bell(ctx, out, t + 0.12, 1661.2, 0.5);
+    bell(ctx, out, t + 0.24, 1975.5, 0.8);
+  },
+  "push-ios": (ctx, out, t) => {
+    bell(ctx, out, t, 1760, 0.35, 0.8);
+    bell(ctx, out, t + 0.09, 2349.3, 0.9, 0.9);
+  },
+  "push-android": (ctx, out, t) => {
+    mallet(ctx, out, t, 1046.5, 0.22);
+    mallet(ctx, out, t + 0.1, 1568, 0.22);
+    mallet(ctx, out, t + 0.2, 2093, 0.45);
+  },
+  email: (ctx, out, t) => {
+    bell(ctx, out, t, 987.8, 0.45, 0.7);
+    bell(ctx, out, t + 0.16, 1318.5, 0.9, 0.7);
+  }
+};
+var VIBRATION = {
+  sms: [180, 90, 180],
+  "push-ios": [120],
+  "push-android": [60, 80, 60]
+};
+var createSoundPlayer = (initial = false) => {
+  let ctx = null;
+  let master = null;
+  const lastPlayed = /* @__PURE__ */ new Map();
+  const ensure = () => {
+    if (ctx) return ctx;
+    const Ctor = globalThis.AudioContext ?? globalThis.webkitAudioContext;
+    if (!Ctor) return null;
+    try {
+      ctx = new Ctor();
+      master = ctx.createGain();
+      master.gain.value = 0.6;
+      master.connect(ctx.destination);
+    } catch {
+      ctx = null;
+    }
+    return ctx;
+  };
+  const player = {
+    enabled: initial,
+    unlock() {
+      if (!player.enabled) return;
+      const c = ensure();
+      if (c?.state === "suspended") void c.resume().catch(() => {
+      });
+    },
+    play(kind) {
+      if (!player.enabled) return;
+      const now = Date.now();
+      if (now - (lastPlayed.get(kind) ?? 0) < 600) return;
+      lastPlayed.set(kind, now);
+      const pattern = VIBRATION[kind];
+      if (pattern) {
+        try {
+          navigator.vibrate?.(pattern);
+        } catch {
+        }
+      }
+      const c = ensure();
+      if (!c || !master) return;
+      if (c.state === "suspended") void c.resume().catch(() => {
+      });
+      VOICES[kind](c, master, c.currentTime + 0.02);
+    },
+    close() {
+      void ctx?.close().catch(() => {
+      });
+      ctx = null;
+    }
+  };
+  return player;
+};
+
+// src/ui/app.ts
+var TAPBACKS = [
+  { id: "heart", glyph: "\u2665", label: "Heart" },
+  { id: "like", glyph: "\u{1F44D}", label: "Like" },
+  { id: "dislike", glyph: "\u{1F44E}", label: "Dislike" },
+  { id: "laugh", glyph: "HA<br>HA", label: "Laugh" },
+  { id: "emphasize", glyph: "\u203C", label: "Emphasize" },
+  { id: "question", glyph: "?", label: "Question" }
+];
+var CHANNELS = ["sms", "push", "email"];
+function createApp(root, options = {}) {
+  const live = options.live ?? true;
+  const syncUrl = options.syncUrl ?? (live && !options.fetch && !options.baseUrl);
+  const storage = options.storage ?? live;
+  const fixedNow = options.now;
+  const nowMs = () => fixedNow ?? Date.now();
+  const base = options.baseUrl ?? (options.fetch || typeof location === "undefined" ? "http://harness.local/" : location.href);
+  const send = (path, init2) => {
+    const request = new Request(new URL(path, base), init2);
+    return options.fetch ? options.fetch(request) : fetch(request);
+  };
+  const listeners = new AbortController();
+  const on = (type, handler, capture = false) => root.addEventListener(type, handler, { signal: listeners.signal, capture });
+  const timers = /* @__PURE__ */ new Set();
+  const later = (ms, fn) => {
+    const t = setTimeout(() => {
+      timers.delete(t);
+      fn();
+    }, ms);
+    timers.add(t);
+  };
+  let destroyed = false;
+  const params = new URLSearchParams(
+    options.search ?? (syncUrl && typeof location !== "undefined" ? location.search : "")
+  );
+  const initialView = params.get("view");
+  const init = options.initial ?? {};
+  const state = {
+    namespace: params.get("namespace") ?? options.namespace ?? "default",
+    namespaces: [],
+    items: [],
+    sources: [],
+    discoveryError: null,
+    version: 0,
+    view: initialView === "timeline" ? "timeline" : "devices",
+    only: initialView === "sms" || initialView === "email" || initialView === "push" ? initialView : null,
+    search: "",
+    follow: params.get("follow") !== "0",
+    connected: false,
+    sms: {
+      to: null,
+      thread: null,
+      menu: null,
+      transition: null
+    },
+    push: {
+      to: null,
+      skin: "auto",
+      expanded: null,
+      preview: null,
+      settings: null,
+      wake: false
+    },
+    email: { to: null, open: null, transition: false },
+    inspect: null,
+    toast: null,
+    arrived: new Set(options.arrived ?? [])
+  };
+  Object.assign(state, {
+    ...init,
+    sms: { ...state.sms, ...init.sms },
+    push: { ...state.push, ...init.push },
+    email: { ...state.email, ...init.email },
+    toast: init.toast ? { text: init.toast } : null
+  });
+  if (initialView === "timeline") state.view = "timeline";
+  delete state.local;
+  delete state.push.openGroups;
+  const local = {
+    dismissed: new Set(init.local?.dismissed ?? []),
+    pinned: new Set(init.local?.pinned ?? []),
+    muted: new Set(init.local?.muted ?? []),
+    starred: new Set(init.local?.starred ?? []),
+    silent: new Set(init.local?.silent ?? []),
+    checked: /* @__PURE__ */ new Set(),
+    tapbacks: new Map(Object.entries(init.local?.tapbacks ?? {})),
+    openGroups: new Set(init.push?.openGroups ?? [])
+  };
+  let mailDetailsOpen = init.mailDetailsOpen ?? false;
+  const pinnedTo = params.get("to");
+  const pinnedFrom = params.get("from");
+  const pinnedId = params.get("id");
+  const pinned = pinnedTo && state.only ? { channel: state.only, to: pinnedTo } : null;
+  if (params.get("follow") === null && pinned) state.follow = false;
+  const reducedMotion = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const motion = () => (options.motion ?? "auto") === "auto" ? reducedMotion() ? "reduce" : "full" : options.motion;
+  const animate = () => motion() === "full";
+  const soundKey = "mockingbird-notifications:sound";
+  const storedSound = () => {
+    if (!storage) return null;
+    try {
+      const v = localStorage.getItem(soundKey);
+      return v === null ? null : v === "1";
+    } catch {
+      return null;
+    }
+  };
+  const sound = createSoundPlayer(
+    params.get("sound") !== null ? params.get("sound") === "1" : storedSound() ?? options.sound ?? false
+  );
+  const seenKey = () => `mockingbird-notifications:seen:${state.namespace}`;
+  let seen = new Set(options.seen ?? []);
+  const loadSeen = () => {
+    if (!storage) return;
+    try {
+      seen = new Set(JSON.parse(localStorage.getItem(seenKey()) ?? "[]"));
+    } catch {
+      seen = /* @__PURE__ */ new Set();
+    }
+  };
+  const saveSeen = () => {
+    if (!storage) return;
+    try {
+      localStorage.setItem(seenKey(), JSON.stringify([...seen].slice(-5e3)));
+    } catch {
+    }
+  };
+  const markSeen = (ids) => {
+    let changed = false;
+    for (const id of ids)
+      if (!seen.has(id)) {
+        seen.add(id);
+        changed = true;
+      }
+    if (changed) saveSeen();
+  };
+  const markUnseen = (ids) => {
+    for (const id of ids) seen.delete(id);
+    saveSeen();
+  };
+  const esc = (value) => String(value ?? "").replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
+  const tid = (id) => `data-testid="${id}"`;
+  const nAttrs = (n) => `data-notification-id="${esc(n.id)}" data-channel="${n.channel}" data-service="${esc(n.service)}" data-source="${esc(n.source)}" data-to="${esc(n.to)}" data-from="${esc(n.from.address)}" data-status="${esc(n.status ?? "")}" data-created-at="${esc(n.createdAt)}" data-unread="${!seen.has(n.id)}"`;
+  const linkify = (escaped) => escaped.replace(
+    /\bhttps?:\/\/[^\s<]+[^\s<.,;:!?)'"]/g,
+    (url) => `<a href="${url}" target="_blank" rel="noreferrer">${url}</a>`
+  );
+  const formatPhone = (value) => {
+    const us = /^\+1(\d{3})(\d{3})(\d{4})$/.exec(value);
+    if (us) return `+1 (${us[1]}) ${us[2]}-${us[3]}`;
+    return value;
+  };
+  const isPhone = (value) => /^\+?\d[\d\s()-]{5,}$/.test(value);
+  const displaySender = (n) => n.from.name ?? (isPhone(n.from.address) ? formatPhone(n.from.address) : n.from.address);
+  const initials = (value) => {
+    const words = value.replace(/[^\p{L}\p{N}\s]/gu, " ").trim().split(/\s+/).filter(Boolean);
+    if (!words.length) return "?";
+    return ((words[0]?.[0] ?? "") + (words[1]?.[0] ?? "")).toUpperCase();
+  };
+  const AVATAR = [
+    "#1a73e8",
+    "#e8710a",
+    "#188038",
+    "#d93025",
+    "#9334e6",
+    "#12b5cb",
+    "#e52592",
+    "#f9ab00",
+    "#5f6368",
+    "#a142f4"
+  ];
+  const APP = [
+    "#ff9500",
+    "#34c759",
+    "#5856d6",
+    "#ff2d55",
+    "#007aff",
+    "#af52de",
+    "#ff3b30",
+    "#30b0c7"
+  ];
+  const hash = (value) => [...value].reduce((h, c) => h * 31 + c.charCodeAt(0) >>> 0, 7);
+  const colorFor = (value, palette = AVATAR) => palette[hash(value) % palette.length] ?? "#5f6368";
+  const sameDay = (a, b) => a.toDateString() === b.toDateString();
+  const clock = (d) => d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+  const iosListTime = (iso) => {
+    const d = new Date(iso);
+    const now = new Date(nowMs());
+    if (sameDay(d, now)) return clock(d);
+    const y = new Date(now);
+    y.setDate(now.getDate() - 1);
+    if (sameDay(d, y)) return "Yesterday";
+    if (now.getTime() - d.getTime() < 6 * 864e5)
+      return d.toLocaleDateString([], { weekday: "long" });
+    return d.toLocaleDateString([], { year: "2-digit", month: "numeric", day: "numeric" });
+  };
+  const iosStamp = (iso) => {
+    const d = new Date(iso);
+    const now = new Date(nowMs());
+    if (sameDay(d, now)) return `<b>Today</b> ${clock(d)}`;
+    return `<b>${esc(d.toLocaleDateString([], { weekday: "short", month: "short", day: "numeric" }))}</b> at ${clock(d)}`;
+  };
+  const ago = (iso) => {
+    const s = Math.max(0, (nowMs() - Date.parse(iso)) / 1e3);
+    if (s < 60) return "now";
+    if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+    if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
+    return `${Math.floor(s / 86400)}d ago`;
+  };
+  const androidAgo = (iso) => {
+    const s = Math.max(0, (nowMs() - Date.parse(iso)) / 1e3);
+    if (s < 60) return "now";
+    if (s < 3600) return `${Math.floor(s / 60)}m`;
+    if (s < 86400) return `${Math.floor(s / 3600)}h`;
+    return `${Math.floor(s / 86400)}d`;
+  };
+  const timelineTime = (iso) => {
+    const d = new Date(iso);
+    if (sameDay(d, new Date(nowMs()))) return d.toLocaleTimeString();
+    return d.toLocaleString([], {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      ...d.getFullYear() === new Date(nowMs()).getFullYear() ? {} : { year: "numeric" }
+    });
+  };
+  const mailDate = (iso) => {
+    const d = new Date(iso);
+    const now = new Date(nowMs());
+    if (sameDay(d, now)) return clock(d);
+    if (d.getFullYear() === now.getFullYear())
+      return d.toLocaleDateString([], { month: "short", day: "numeric" });
+    return d.toLocaleDateString([], { year: "2-digit", month: "numeric", day: "numeric" });
+  };
+  const mailLongDate = (iso) => {
+    const d = new Date(iso);
+    const full = d.toLocaleString([], {
+      weekday: "short",
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "2-digit"
+    });
+    return `${full} (${ago(iso) === "now" ? "0 minutes ago" : ago(iso)})`;
+  };
+  const SERVICE_LABEL = {
+    twilio: "Twilio",
+    resend: "Resend",
+    fcm: "FCM",
+    ses: "SES",
+    sns: "SNS",
+    customerio: "Customer.io",
+    mailosaur: "Mailosaur"
+  };
+  const matchesSearch = (n) => {
+    const q = state.search.trim().toLowerCase();
+    if (!q) return true;
+    return [
+      n.to,
+      n.from.address,
+      n.from.name ?? "",
+      n.preview,
+      n.email?.subject ?? "",
+      n.push?.title ?? "",
+      n.source,
+      n.service
+    ].join("\n").toLowerCase().includes(q);
+  };
+  const visible = () => state.items.filter(matchesSearch);
+  const byChannel = (channel) => visible().filter((n) => n.channel === channel && !local.dismissed.has(n.id));
+  const recipients = (channel) => {
+    const map = /* @__PURE__ */ new Map();
+    for (const n of byChannel(channel)) {
+      const entry = map.get(n.to) ?? { to: n.to, count: 0, unread: 0, latest: n.createdAt };
+      entry.count++;
+      if (!seen.has(n.id)) entry.unread++;
+      if (n.createdAt > entry.latest) entry.latest = n.createdAt;
+      if (n.push) entry.platform = n.push.platform;
+      map.set(n.to, entry);
+    }
+    return [...map.values()].sort((a, b) => a.latest < b.latest ? 1 : -1);
+  };
+  const ensureSelection = () => {
+    for (const channel of CHANNELS) {
+      const list = recipients(channel);
+      const slot = state[channel];
+      if (pinned?.channel === channel) {
+        slot.to = pinned.to;
+        continue;
+      }
+      if (!slot.to || !list.some((r) => r.to === slot.to)) slot.to = list[0]?.to ?? null;
+    }
+  };
+  const api = async (path) => {
+    const response = await send(path);
+    if (!response.ok) throw new Error(`${path}: HTTP ${response.status}`);
+    return await response.json();
+  };
+  const refresh = async () => {
+    const q = new URLSearchParams({ namespace: state.namespace, order: "newest" });
+    const body = await api(
+      `./api/notifications?${q}`
+    );
+    if (destroyed) return;
+    state.items = body.notifications;
+    state.version = body.version ?? state.version;
+    ensureSelection();
+    render();
+  };
+  const refreshSources = async () => {
+    try {
+      const body = await api(
+        "./api/sources"
+      );
+      state.sources = body.sources;
+      state.discoveryError = body.discoveryError;
+      const ns = await api("./api/namespaces");
+      state.namespaces = ns.namespaces;
+      if (!destroyed) renderTopbar();
+    } catch {
+    }
+  };
+  const threadKey = (to, from) => `${to}|${from}`;
+  const groupKey = (to, app) => `${to}|${app}`;
+  const alertFor = (n) => {
+    if (n.channel === "sms") return local.muted.has(threadKey(n.to, n.from.address)) ? null : "sms";
+    if (n.channel === "email") return "email";
+    const platform = state.push.skin === "auto" ? n.push?.platform === "android" ? "android" : "ios" : state.push.skin;
+    if (platform === "android" && local.silent.has(n.push?.app ?? "App")) return null;
+    return platform === "android" ? "push-android" : "push-ios";
+  };
+  const onAdded = (added) => {
+    for (const n of added) state.arrived.add(n.id);
+    const newest = [...added].sort((a, b) => a.createdAt < b.createdAt ? 1 : -1);
+    for (const channel of CHANNELS) {
+      const mine = newest.filter((n) => n.channel === channel);
+      const latest = pinned?.channel === channel ? mine.find((n) => n.to === pinned.to) : mine[0];
+      if (!latest) continue;
+      if (pinned?.channel === channel) {
+        if (channel === "sms" && !state.sms.thread) state.sms.thread = latest.from.address;
+      } else if (state.follow) {
+        state[channel].to = latest.to;
+        if (channel === "sms" && state.sms.thread !== null) state.sms.thread = latest.from.address;
+      }
+      if (channel === "push" && state.push.to === latest.to) state.push.wake = true;
+    }
+    const kinds = new Set(added.map(alertFor).filter((k) => k !== null));
+    for (const kind of kinds) sound.play(kind);
+    options.onArrive?.(added);
+    later(1800, () => {
+      for (const n of added) state.arrived.delete(n.id);
+    });
+  };
+  let stream = null;
+  const connect = () => {
+    stream?.abort();
+    const controller = new AbortController();
+    stream = controller;
+    const namespace = state.namespace;
+    const dispatch = (event, data) => {
+      if (controller.signal.aborted) return;
+      if (event === "sources") {
+        state.sources = JSON.parse(data);
+        renderTopbar();
+      } else if (event === "change") {
+        const { added, version } = JSON.parse(data);
+        state.version = version;
+        onAdded(added);
+        void refresh().catch(() => {
+        });
+      }
+    };
+    const run = async () => {
+      while (!controller.signal.aborted) {
+        try {
+          const response = await send(`./api/events?namespace=${encodeURIComponent(namespace)}`, {
+            signal: controller.signal,
+            headers: { accept: "text/event-stream" }
+          });
+          if (!response.ok || !response.body) throw new Error(`events: HTTP ${response.status}`);
+          state.connected = true;
+          renderTopbar();
+          const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
+          let buffer = "";
+          for (; ; ) {
+            const { value, done } = await reader.read();
+            if (done) break;
+            buffer += value.replace(/\r\n/g, "\n");
+            let end = buffer.indexOf("\n\n");
+            while (end >= 0) {
+              const chunk = buffer.slice(0, end);
+              buffer = buffer.slice(end + 2);
+              let event = "message";
+              const data = [];
+              for (const line of chunk.split("\n")) {
+                if (line.startsWith("event:")) event = line.slice(6).trim();
+                else if (line.startsWith("data:")) data.push(line.slice(5).trimStart());
+              }
+              if (data.length) dispatch(event, data.join("\n"));
+              end = buffer.indexOf("\n\n");
+            }
+          }
+        } catch {
+        }
+        if (controller.signal.aborted) return;
+        state.connected = false;
+        renderTopbar();
+        await new Promise((resolve) => later(1e3, () => resolve(null)));
+      }
+    };
+    void run();
+  };
+  root.classList.add(ROOT_CLASS);
+  if (options.embedded) root.classList.add("embedded");
+  root.dataset.testid = TEST_IDS.app;
+  root.dataset.ready = "false";
+  root.innerHTML = `
+<header class="topbar" data-region="topbar" ${tid(TEST_IDS.topbar)}></header>
+<div data-region="notice"></div>
+<div class="mbn-scroll" data-region="scroll">
+<section class="devices" data-region="devices">
+  <div class="device-col" data-region="col-sms"></div>
+  <div class="device-col" data-region="col-push"></div>
+  <div class="device-col wide" data-region="col-email"></div>
+</section>
+<section class="timeline" data-region="timeline" hidden></section>
+</div>
+<aside class="inspector" data-region="inspector" ${tid(TEST_IDS.inspector)} hidden></aside>`;
+  const $ = (region) => root.querySelector(`[data-region="${region}"]`);
+  const byTestId = (id) => root.querySelector(`[data-testid="${id}"]`);
+  const title = () => options.title ?? root.dataset.title ?? "Notifications";
+  const updateRootAttrs = () => {
+    Object.assign(root.dataset, {
+      view: state.view,
+      namespace: state.namespace,
+      count: String(state.items.length),
+      version: String(state.version),
+      connected: String(state.connected),
+      sound: String(sound.enabled),
+      motion: motion()
+    });
+  };
+  const renderTopbar = () => {
+    updateRootAttrs();
+    const bar = $("topbar");
+    bar.hidden = options.chrome === false;
+    if (options.chrome === false) return;
+    const namespaces = [.../* @__PURE__ */ new Set([...state.namespaces, state.namespace])].sort();
+    const searchFocused = document.activeElement === byTestId(TEST_IDS.search);
+    bar.innerHTML = `
+    <div class="brand"><span class="brand-mark">${icons.bell()}</span><span>${esc(title())} <small>Mockingbird</small></span></div>
+    <label class="field">Namespace <select data-action="namespace" ${tid(TEST_IDS.namespace)} aria-label="Namespace">${namespaces.map((ns) => `<option ${ns === state.namespace ? "selected" : ""}>${esc(ns)}</option>`).join("")}</select></label>
+    <div class="field search">${icons.search("#9aa1b1", 14)}<input type="search" data-action="search" ${tid(TEST_IDS.search)} aria-label="Filter notifications" placeholder="Filter by recipient, sender, text\u2026" value="${esc(state.search)}"></div>
+    <div class="tabs" role="group" aria-label="View">
+      <button data-action="view" data-value="devices" ${tid(TEST_IDS.viewDevices)} aria-pressed="${state.view === "devices"}">Devices</button>
+      <button data-action="view" data-value="timeline" ${tid(TEST_IDS.viewTimeline)} aria-pressed="${state.view === "timeline"}">Timeline <span style="opacity:.6">${state.items.length}</span></button>
+    </div>
+    <label class="toggle" title="Jump each device to the newest arrival"><input type="checkbox" data-action="follow" ${tid(TEST_IDS.follow)} ${state.follow ? "checked" : ""}> Follow new</label>
+    <button class="icon-toggle" data-action="sound" ${tid(TEST_IDS.sound)} aria-pressed="${sound.enabled}" title="Play alert sounds on arrivals">${sound.enabled ? icons.volumeOn() : icons.volumeOff()}<span>Sound</span></button>
+    <span class="live" ${tid(TEST_IDS.connection)} data-state="${state.connected ? "live" : "reconnecting"}" role="status"><span class="dot ${state.connected ? "ok" : "bad"}"></span>${state.connected ? "Live" : "Reconnecting"}</span>
+    <div class="sources">${state.sources.map(
+      (s) => `<span class="pill" title="${esc(s.error ?? s.url)}" ${tid(TEST_IDS.source)} data-name="${esc(s.name)}" data-service="${esc(s.service ?? "")}" data-ok="${s.ok}" data-count="${s.count}"><span class="dot ${s.ok ? "ok" : s.error ? "bad" : ""}"></span>${esc(
+        s.service && s.name !== s.service ? `${s.name} \xB7 ${SERVICE_LABEL[s.service] ?? s.service}` : SERVICE_LABEL[s.name] ?? s.name
+      )} <b>${s.count}</b></span>`
+    ).join("")}</div>`;
+    if (searchFocused) {
+      const input = byTestId(TEST_IDS.search);
+      input?.focus();
+      input?.setSelectionRange(input.value.length, input.value.length);
+    }
+    const failing = state.sources.filter((s) => s.error);
+    $("notice").innerHTML = state.discoveryError || failing.length ? `<div class="notice" ${tid(TEST_IDS.notice)} data-kind="error" role="alert">${state.discoveryError ? `Fleet discovery failed: ${esc(state.discoveryError)}. ` : ""}${failing.map((s) => `<b>${esc(s.name)}</b>: ${esc(s.error)}`).join(" \xB7 ")}</div>` : !state.sources.length ? `<div class="notice" ${tid(TEST_IDS.notice)} data-kind="empty" style="border-color:#3a3f4b;background:#171a21;color:#9aa1b1">No messaging emulators found yet. Start the fleet with twilio, resend, fcm, ses, sns, customerio or mailosaur.</div>` : "";
+  };
+  const recipientSelect = (channel, label, testId, format) => {
+    const list = recipients(channel);
+    const current = state[channel].to;
+    return `<label class="field">${label}<select data-action="recipient" data-channel="${channel}" ${tid(testId)} aria-label="${label}" ${list.length ? "" : "disabled"}>${list.length ? list.map(
+      (r) => `<option value="${esc(r.to)}" ${r.to === current ? "selected" : ""}>${r.unread ? "\u25CF " : ""}${esc(format(r.to))} \xB7 ${r.count}</option>`
+    ).join("") : "<option>No recipients yet</option>"}</select></label>`;
+  };
+  const countBadge = (n, testId) => n ? `<span class="count" ${tid(testId)} data-count="${n}">${n}</span>` : "";
+  const statusBar = (light = false) => `
+  <div class="statusbar ${light ? "light" : ""}"><span>${clock(new Date(nowMs())).replace(/\s?[AP]M$/i, "")}</span>
+  <span class="icons">${icons.signal()}${icons.wifi()}${icons.battery()}</span></div>`;
+  const flip = (container, mutate) => {
+    if (!animate() || typeof container.animate !== "function") return mutate();
+    const before = /* @__PURE__ */ new Map();
+    for (const el of container.querySelectorAll("[data-flip]"))
+      before.set(el.dataset.flip ?? "", el.getBoundingClientRect().top);
+    mutate();
+    for (const el of container.querySelectorAll("[data-flip]")) {
+      const top = before.get(el.dataset.flip ?? "");
+      if (top === void 0) continue;
+      const dy = top - el.getBoundingClientRect().top;
+      if (Math.abs(dy) < 1) continue;
+      el.animate([{ transform: `translateY(${dy}px)` }, { transform: "none" }], {
+        duration: 380,
+        easing: "cubic-bezier(.2,.9,.25,1)"
+      });
+    }
+  };
+  const smsThreads = (to) => {
+    const map = /* @__PURE__ */ new Map();
+    for (const n of byChannel("sms").filter((n2) => n2.to === to)) {
+      const key = n.from.address;
+      map.set(key, [...map.get(key) ?? [], n]);
+    }
+    return [...map.entries()].map(([from, items]) => ({
+      from,
+      items: items.sort((a, b) => a.createdAt < b.createdAt ? -1 : 1),
+      pinned: local.pinned.has(threadKey(to, from))
+    })).sort(
+      (a, b) => a.pinned !== b.pinned ? a.pinned ? -1 : 1 : (a.items.at(-1)?.createdAt ?? "") < (b.items.at(-1)?.createdAt ?? "") ? 1 : -1
+    );
+  };
+  const avatarFor = (n) => {
+    const name = n ? displaySender(n) : "";
+    return isPhone(n?.from.address ?? "") && !n?.from.name ? icons.person() : esc(initials(name));
+  };
+  const otpOf = (n) => n.sms?.code ?? (/\b(code|otp|passcode|pin|verif)/i.test(n.sms?.body ?? "") ? /\b(\d{4,8})\b/.exec(n.sms?.body ?? "")?.[1] ?? null : null);
+  const highlightCode = (escaped, code) => code ? escaped.replace(new RegExp(`\\b${code}\\b`), `<span class="code">${code}</span>`) : escaped;
+  const tapbackBadge = (id) => {
+    const t = local.tapbacks.get(id);
+    const def = TAPBACKS.find((x) => x.id === t);
+    return def ? `<span class="tapback" ${tid(TEST_IDS.smsTapback)} data-tapback="${def.id}" aria-label="${def.label}">${def.glyph}</span>` : "";
+  };
+  const bubbleBody = (n) => {
+    const body = highlightCode(linkify(esc(n.sms?.body ?? "")), otpOf(n));
+    const media = (n.sms?.media ?? []).map((src) => `<img class="media" src="${esc(src)}" alt="" ${tid(TEST_IDS.smsBubbleMedia)}>`).join("");
+    return media + body;
+  };
+  const renderSms = () => {
+    const to = state.sms.to;
+    const threads = to ? smsThreads(to) : [];
+    const unreadTotal = byChannel("sms").filter((n) => !seen.has(n.id)).length;
+    let screen;
+    const thread = threads.find((t) => t.from === state.sms.thread);
+    const transition = state.sms.transition;
+    state.sms.transition = null;
+    if (thread && to) {
+      markSeen(thread.items.map((n) => n.id));
+      const first = thread.items[0];
+      const otherUnread = threads.filter((t) => t !== thread).reduce((s, t) => s + t.items.filter((n) => !seen.has(n.id)).length, 0);
+      let last = 0;
+      let prevTail = true;
+      const rows = thread.items.map((n, i) => {
+        const at = Date.parse(n.createdAt);
+        const stamp = i === 0 || at - last > 15 * 6e4 ? `<div class="stamp" ${tid(TEST_IDS.smsTimestamp)}>${i === 0 ? "Text Message<br>" : ""}${iosStamp(n.createdAt)}</div>` : "";
+        const next = thread.items[i + 1];
+        const tail = !next || Date.parse(next.createdAt) - at > 6e4;
+        const gap = !stamp && prevTail && i > 0;
+        last = at;
+        prevTail = tail;
+        const code2 = otpOf(n);
+        return `${stamp}<div class="bubble-row ${gap ? "gap" : ""}"><div class="bubble ${tail ? "tail" : ""} ${state.arrived.has(n.id) ? "arrive" : ""}" ${nAttrs(n)} ${tid(TEST_IDS.smsBubble)} ${code2 ? `data-code="${esc(code2)}"` : ""} data-longpress="sms-bubble" tabindex="0" aria-haspopup="menu">${bubbleBody(n)}${tapbackBadge(n.id)}</div><span class="bubble-time" ${tid(TEST_IDS.smsBubbleTime)} aria-hidden="true">${esc(clock(new Date(at)))}</span></div>`;
+      }).join("");
+      const latest = thread.items.at(-1);
+      const code = latest ? otpOf(latest) : null;
+      const menuFor = state.sms.menu ? thread.items.find((n) => n.id === state.sms.menu) : null;
+      const muted = local.muted.has(threadKey(to, thread.from));
+      screen = `<div class="convo ${transition === "push" && animate() ? "enter" : ""}" ${tid(TEST_IDS.smsConversation)} data-from="${esc(thread.from)}">
+      <div class="convo-nav"><div class="bar">
+        <button class="back" data-action="sms-back" ${tid(TEST_IDS.smsBack)} aria-label="Back to Messages">${icons.chevronBack()}${otherUnread ? `<span class="badge">${otherUnread}</span>` : ""}</button>
+        <div class="avatar">${avatarFor(first)}</div>
+        <div class="who" ${tid(TEST_IDS.smsConversationTitle)}>${esc(first ? displaySender(first) : thread.from)}${muted ? ` <span class="flag">${icons.bellSlash(12)}</span>` : ""} ${icons.chevronRight("#8e8e93")}</div>
+      </div></div>
+      <div class="convo-body" data-swipe="sms-convo">${rows}</div>
+      ${code && latest && nowMs() - Date.parse(latest.createdAt) < 10 * 6e4 ? `<button class="qt" data-action="sms-copy-code" data-code="${esc(code)}" ${tid(TEST_IDS.smsCode)}><small>From Messages</small>${esc(code)}</button>` : ""}
+      <div class="convo-input"><span class="plus">${icons.plus()}</span><span class="field-ios">Text Message<span>${icons.mic()}</span></span></div>
+      ${menuFor ? smsMenu(menuFor) : ""}
+    </div>`;
+    } else {
+      state.sms.thread = null;
+      state.sms.menu = null;
+      screen = `<div class="msgs ${transition === "back" && animate() ? "enter" : ""}">
+      <div class="msgs-nav"><div class="row"><span>Edit</span>${icons.compose()}</div><h1>Messages</h1>
+      <div class="ios-search">${icons.search("rgba(60,60,67,.6)", 15)}<span>Search</span>${icons.mic("rgba(60,60,67,.6)")}</div></div>
+      ${threads.length && to ? `<div class="threads" role="list">${threads.map((t) => {
+        const latest = t.items.at(-1);
+        const unread = t.items.some((n) => !seen.has(n.id));
+        const key = threadKey(to, t.from);
+        const muted = local.muted.has(key);
+        const name = latest ? displaySender(latest) : t.from;
+        return `<div class="swipe thread-swipe" data-swipe="sms-thread" data-from="${esc(t.from)}" data-flip="thread:${esc(t.from)}" role="listitem">
+            <div class="swipe-actions">
+              <div class="side"><button class="act-unread" data-action="thread-unread" data-from="${esc(t.from)}" ${tid(TEST_IDS.smsThreadToggleUnread)}>${unread ? icons.markRead(22) : icons.markUnread(22)}${unread ? "Read" : "Unread"}</button><button class="act-pin" data-action="thread-pin" data-from="${esc(t.from)}" ${tid(TEST_IDS.smsThreadPin)}>${icons.pin(22)}${t.pinned ? "Unpin" : "Pin"}</button></div>
+              <div class="side"><button class="act-mute" data-action="thread-mute" data-from="${esc(t.from)}" ${tid(TEST_IDS.smsThreadMute)}>${icons.bellSlash(22)}${muted ? "Show Alerts" : "Hide Alerts"}</button><button class="act-delete" data-action="thread-delete" data-from="${esc(t.from)}" ${tid(TEST_IDS.smsThreadDelete)}>${icons.trash()}Delete</button></div>
+            </div>
+            <div class="thread swipe-card" data-action="sms-open" data-from="${esc(t.from)}" ${tid(TEST_IDS.smsThread)} ${latest ? nAttrs(latest) : ""} data-unread="${unread}" data-pinned="${t.pinned}" data-muted="${muted}" role="button" tabindex="0" aria-label="${esc(name)}${unread ? ", unread" : ""}">
+            ${unread ? `<span class="unread" ${tid(TEST_IDS.smsThreadUnread)}></span>` : ""}<div class="avatar">${avatarFor(latest)}</div>
+            <div class="text"><div class="top"><span class="name-line"><span class="name" ${tid(TEST_IDS.smsThreadName)}>${esc(name)}</span>${t.pinned ? `<span class="flag">${icons.pin(13)}</span>` : ""}${muted ? `<span class="flag">${icons.bellSlash(13)}</span>` : ""}</span><span class="when" ${tid(TEST_IDS.smsThreadTime)}>${esc(iosListTime(latest?.createdAt ?? ""))} ${icons.chevronRight()}</span></div>
+            <div class="preview" ${tid(TEST_IDS.smsThreadPreview)}>${esc(latest?.sms?.body ?? "")}</div></div></div></div>`;
+      }).join("")}</div>` : `<div class="empty-ios" ${tid(TEST_IDS.smsEmpty)}>${to ? "No Messages" : "No text messages yet.<br><br>SMS sent through Twilio, SNS, Customer.io or Mailosaur shows up here."}</div>`}
+    </div>`;
+    }
+    const col = $("col-sms");
+    flip(col, () => {
+      col.innerHTML = `
+    <div class="device-head"><h2>Text messages ${countBadge(unreadTotal, TEST_IDS.smsUnreadCount)}</h2>${recipientSelect("sms", "Phone", TEST_IDS.smsRecipient, formatPhone)}</div>
+    <div class="iphone" ${tid(TEST_IDS.smsDevice)} data-screen="${thread ? "conversation" : "threads"}" data-recipient="${esc(to ?? "")}" data-thread="${esc(thread?.from ?? "")}"><div class="screen"><div class="island"></div>${statusBar()}${screen}<div class="home-indicator"></div></div></div>`;
+    });
+    const body = col.querySelector(".convo-body");
+    const toBottom = () => {
+      if (body) body.scrollTop = body.scrollHeight;
+    };
+    toBottom();
+    requestAnimationFrame(toBottom);
+  };
+  const smsMenu = (n) => {
+    const current = local.tapbacks.get(n.id);
+    return `<div class="ios-overlay" data-action="close-overlay" ${tid(TEST_IDS.smsMenu)} data-notification-id="${esc(n.id)}" role="dialog" aria-label="Message actions">
+      <div class="tapback-bar" role="toolbar" aria-label="Tapback">${TAPBACKS.map(
+      (t) => `<button data-action="tapback" data-id="${esc(n.id)}" data-value="${t.id}" ${tid(TEST_IDS.smsMenuTapback)} data-tapback="${t.id}" aria-label="${t.label}" aria-pressed="${current === t.id}">${t.glyph}</button>`
+    ).join("")}</div>
+      <div class="bubble tail">${bubbleBody(n)}</div>
+      <div class="ios-menu" role="menu">
+        <button role="menuitem" data-action="close-overlay">Reply</button>
+        <button role="menuitem" data-action="sms-copy" data-id="${esc(n.id)}" ${tid(TEST_IDS.smsMenuCopy)}>Copy</button>
+        <button role="menuitem" data-action="close-overlay">Translate</button>
+        <button role="menuitem" data-action="close-overlay">More\u2026</button>
+      </div></div>`;
+  };
+  const pushData = (n) => {
+    const data = n.push?.data ?? {};
+    const keys = Object.keys(data);
+    return keys.length ? `<div class="note-data" ${tid(TEST_IDS.pushNotificationData)}>${esc(JSON.stringify(data, null, 2))}</div>` : "";
+  };
+  const pushMeta = (n) => `<div class="note-meta" ${tid(TEST_IDS.pushNotificationMeta)}>${esc(SERVICE_LABEL[n.service] ?? n.service)} \xB7 ${esc(n.status ?? "accepted")}${n.push?.badge !== null && n.push?.badge !== void 0 ? ` \xB7 badge ${n.push.badge}` : ""}${n.push?.sound ? ` \xB7 sound ${esc(n.push.sound)}` : ""}</div>`;
+  const pushAttrs = (n, extra = {}) => `${nAttrs(n)} ${tid(TEST_IDS.pushNotification)} data-platform="${esc(n.push?.platform ?? "unknown")}" data-app="${esc(n.push?.app ?? "App")}" ${Object.entries(
+    extra
+  ).map(([k, v]) => `data-${k}="${esc(v)}"`).join(" ")}`;
+  const iosCard = (n, opts) => {
+    const p = n.push;
+    const app = p?.app ?? "App";
+    const expanded = opts.expanded;
+    return `<div class="ios-note swipe-card ${expanded ? "expanded" : ""} ${state.arrived.has(n.id) ? "arrive" : ""}" data-action="push-toggle" data-id="${esc(n.id)}" ${pushAttrs(n, { expanded, stacked: opts.stacked ?? false })} ${opts.extra ?? ""} role="button" tabindex="0" aria-expanded="${expanded}" data-longpress="ios-note">
+    <span class="app-icon" style="background:${colorFor(app, APP)}" ${tid(TEST_IDS.pushNotificationApp)} aria-label="${esc(app)}">${esc(initials(app).slice(0, 1))}</span>
+    <div class="content">
+      <div class="line1"><span class="title" ${tid(TEST_IDS.pushNotificationTitle)}>${esc(p?.title ?? app)}</span><span class="time" ${tid(TEST_IDS.pushNotificationTime)}>${esc(ago(n.createdAt))}</span></div>
+      <div class="body" ${tid(TEST_IDS.pushNotificationBody)}>${esc(p?.body ?? "")}</div>
+      ${expanded && p?.imageUrl ? `<img class="hero" src="${esc(p.imageUrl)}" alt="" ${tid(TEST_IDS.pushNotificationImage)}>` : ""}
+      ${expanded ? pushData(n) + pushMeta(n) : ""}
+    </div>
+    ${!expanded && p?.imageUrl ? `<img class="thumb" src="${esc(p.imageUrl)}" alt="" ${tid(TEST_IDS.pushNotificationImage)}>` : ""}
+  </div>`;
+  };
+  const iosNote = (n, opts = {}) => `<div class="swipe ios-swipe" data-swipe="ios-note" data-id="${esc(n.id)}" data-flip="note:${esc(n.id)}" ${opts.hidden ? "hidden" : ""}>
+      <div class="swipe-actions"><button data-action="push-options" data-id="${esc(n.id)}" ${tid(TEST_IDS.pushOptions)}>Options</button><button data-action="push-clear" data-id="${esc(n.id)}" ${tid(TEST_IDS.pushClear)}>Clear</button></div>
+      ${iosCard(n, { expanded: state.push.expanded === n.id, stacked: opts.stacked ?? false, extra: opts.top ? 'data-group-top="true"' : "" })}
+    </div>`;
+  const androidNote = (n) => {
+    const p = n.push;
+    const expanded = state.push.expanded === n.id;
+    const app = p?.app ?? "App";
+    const settings = state.push.settings === n.id;
+    const silent = local.silent.has(app);
+    return `<div class="a-note ${expanded ? "expanded" : ""} ${state.arrived.has(n.id) ? "arrive" : ""}" data-action="push-toggle" data-id="${esc(n.id)}" ${pushAttrs(n, { expanded })} data-swipe="a-note" data-longpress="a-note" data-flip="note:${esc(n.id)}" role="button" tabindex="0" aria-expanded="${expanded}">
+    <span class="a-icon" style="background:${colorFor(app, APP)}" aria-hidden="true">${esc(initials(app).slice(0, 1))}</span>
+    <div class="a-main">
+      <div class="a-head"><span ${tid(TEST_IDS.pushNotificationApp)}>${esc(app)}</span><span>\u2022</span><span ${tid(TEST_IDS.pushNotificationTime)}>${esc(androidAgo(n.createdAt))}</span>${silent ? `<span>${icons.bellSlash(12)}</span>` : ""}<span class="chev">${expanded ? icons.collapse() : icons.expand()}</span></div>
+      ${p?.title ? `<div class="a-title" ${tid(TEST_IDS.pushNotificationTitle)}>${esc(p.title)}</div>` : ""}
+      <div class="a-body" ${tid(TEST_IDS.pushNotificationBody)}>${esc(p?.body ?? "")}</div>
+      ${expanded && p?.imageUrl ? `<img class="big-picture" src="${esc(p.imageUrl)}" alt="" ${tid(TEST_IDS.pushNotificationImage)}>` : ""}
+      ${expanded ? pushData(n) + pushMeta(n) : ""}
+      ${settings ? `<div class="a-settings" ${tid(TEST_IDS.pushSettings)} data-app="${esc(app)}">
+        <button class="opt" data-action="push-alerting" data-app="${esc(app)}" data-value="alerting" aria-pressed="${!silent}">${icons.bell()}<span>Default<small>May ring or vibrate based on device settings</small></span></button>
+        <button class="opt" data-action="push-alerting" data-app="${esc(app)}" data-value="silent" aria-pressed="${silent}">${icons.bellSlash(18)}<span>Silent<small>No sound or vibration</small></span></button>
+        <div class="row"><button data-action="close-overlay">Turn off notifications</button><button data-action="close-overlay">Done</button></div></div>` : ""}
+    </div>
+    ${!expanded && p?.imageUrl ? `<img class="large-icon" src="${esc(p.imageUrl)}" alt="" ${tid(TEST_IDS.pushNotificationImage)}>` : ""}
+  </div>`;
+  };
+  const iosGroups = (to, items) => {
+    const order = [];
+    const groups = /* @__PURE__ */ new Map();
+    for (const n of items) {
+      const app = n.push?.app ?? "App";
+      if (!groups.has(app)) order.push(app);
+      groups.set(app, [...groups.get(app) ?? [], n]);
+    }
+    return order.map((app) => {
+      const list = groups.get(app) ?? [];
+      const first = list[0];
+      if (!first) return "";
+      if (list.length === 1) return iosNote(first);
+      const key = groupKey(to, app);
+      const open = local.openGroups.has(key);
+      const rest = list.length - 1;
+      if (open)
+        return `<div class="push-group" ${tid(TEST_IDS.pushGroup)} data-app="${esc(app)}" data-count="${list.length}" data-open="true" data-flip="group:${esc(app)}">
+          <div class="group-head"><h3>${esc(app)}</h3><button data-action="group-collapse" data-key="${esc(key)}" ${tid(TEST_IDS.pushGroupCollapse)}>Show less</button><button class="x" data-action="group-clear" data-key="${esc(key)}" data-app="${esc(app)}" aria-label="Clear ${esc(app)} notifications">${icons.close(14)}</button></div>
+          ${list.map((n) => iosNote(n)).join("")}</div>`;
+      return `<div class="push-group" ${tid(TEST_IDS.pushGroup)} data-app="${esc(app)}" data-count="${list.length}" data-open="false" data-flip="group:${esc(app)}">
+          ${iosNote(first, { top: true })}
+          <button class="stack-layers" data-action="group-open" data-key="${esc(key)}" ${tid(TEST_IDS.pushGroupMore)} data-count="${rest}" aria-label="Show ${rest} more notification${rest === 1 ? "" : "s"}"><div class="ios-stack-more"></div>${rest > 1 ? '<div class="ios-stack-more"></div>' : ""}<div class="center-label" style="font-size:13px;margin-top:6px">${rest} more notification${rest === 1 ? "" : "s"}</div></button>
+          ${list.slice(1).map((n) => iosNote(n, { stacked: true, hidden: true })).join("")}</div>`;
+    }).join("");
+  };
+  const renderPush = () => {
+    const to = state.push.to;
+    const items = to ? byChannel("push").filter((n) => n.to === to) : [];
+    markSeen(items.map((n) => n.id));
+    const platform = items[0]?.push?.platform ?? "unknown";
+    const skin = state.push.skin === "auto" ? platform === "android" ? "android" : "ios" : state.push.skin;
+    const now = new Date(nowMs());
+    const unread = byChannel("push").filter((n) => !seen.has(n.id)).length;
+    const wake = state.push.wake && animate();
+    state.push.wake = false;
+    let device;
+    const deviceAttrs = `${tid(TEST_IDS.pushDevice)} data-skin="${skin}" data-recipient="${esc(to ?? "")}" data-platform="${esc(platform)}"`;
+    if (skin === "android") {
+      device = `<div class="pixel" ${deviceAttrs}><div class="screen"><div class="punch"></div><div class="shade">
+      <div class="sb"><span>${clock(now).replace(/\s?[AP]M$/i, "")}</span><span class="icons">${icons.androidWifi()}${icons.androidSignal()}${icons.androidBattery()}</span></div>
+      <div class="qs-head"><span>${esc(now.toLocaleDateString([], { weekday: "short", month: "short", day: "numeric" }))}</span>${icons.gear()}</div>
+      <div class="qs"><div class="tile on">${icons.androidWifi()}<div>Internet<small>Mockingbird</small></div></div><div class="tile">${icons.bell()}<div>Do Not Disturb<small>Off</small></div></div>
+      <div class="tile">${icons.androidBattery()}<div>Battery Saver<small>Off</small></div></div><div class="tile">${icons.lock()}<div>Screen lock<small>On</small></div></div></div>
+      <div class="qs-bright"></div>
+      <div class="shade-list" role="list">${items.length ? items.map(androidNote).join("") : `<div class="shade-empty" ${tid(TEST_IDS.pushEmpty)}>No notifications</div>`}</div>
+      ${items.length ? `<div class="shade-actions"><button data-action="close-overlay">Manage</button><button data-action="push-clear-all" ${tid(TEST_IDS.pushClearAll)}>Clear all</button></div>` : ""}
+      <div class="gesture"></div></div></div></div>`;
+    } else {
+      const preview = state.push.preview ? items.find((n) => n.id === state.push.preview) : null;
+      device = `<div class="iphone" ${deviceAttrs}><div class="screen"><div class="island"></div>${statusBar(true)}<div class="lock ${wake ? "wake" : ""}">
+      <div class="padlock">${icons.padlock()}</div>
+      <div class="date">${esc(now.toLocaleDateString([], { weekday: "long", month: "long", day: "numeric" }))}</div>
+      <div class="clock">${esc(clock(now).replace(/\s?[AP]M$/i, ""))}</div>
+      <div class="lock-stack" role="list">${items.length && to ? `<div class="center-label">Notification Center</div>${iosGroups(to, items)}` : `<div class="lock-empty" ${tid(TEST_IDS.pushEmpty)}>${to ? "No Older Notifications" : "No push notifications yet"}</div>`}</div>
+      <div class="lock-buttons"><span>${icons.flashlight()}</span><span>${icons.camera()}</span></div>
+      ${preview ? `<div class="ios-overlay dark" data-action="close-overlay" ${tid(TEST_IDS.pushPreview)} data-notification-id="${esc(preview.id)}" role="dialog" aria-label="Notification preview">${iosCard(preview, { expanded: true })}
+        <div class="ios-menu" role="menu"><button role="menuitem" data-action="push-clear" data-id="${esc(preview.id)}">Clear</button><button role="menuitem" data-action="close-overlay">Options</button></div></div>` : ""}
+    </div><div class="home-indicator light"></div></div></div>`;
+    }
+    const tokenLabel = (t) => {
+      const r = recipients("push").find((x) => x.to === t);
+      const short = t.length > 22 ? `${t.slice(0, 10)}\u2026${t.slice(-8)}` : t;
+      return `${short}${r?.platform && r.platform !== "unknown" ? ` \xB7 ${r.platform}` : ""}`;
+    };
+    const col = $("col-push");
+    flip(col, () => {
+      col.innerHTML = `
+    <div class="device-head"><h2>Push ${countBadge(unread, TEST_IDS.pushUnreadCount)}</h2>
+      <div class="controls">${recipientSelect("push", "Device", TEST_IDS.pushRecipient, tokenLabel)}
+      <div class="seg" role="group" aria-label="Phone">${["auto", "ios", "android"].map(
+        (s) => `<button data-action="skin" data-value="${s}" ${tid(TEST_IDS.pushSkin)} aria-pressed="${state.push.skin === s}">${s === "auto" ? "Auto" : s === "ios" ? "iOS" : "Android"}</button>`
+      ).join("")}</div></div></div>${device}`;
+    });
+  };
+  const mailHtml = (n) => {
+    const html = n.email?.html ?? "";
+    return `<!doctype html><html><head><meta charset="utf-8"><base target="_blank"><style>body{margin:0;font:14px/1.5 Arial,Helvetica,sans-serif;color:#222;overflow-wrap:anywhere}img{max-width:100%;height:auto}</style></head><body>${html}</body></html>`;
+  };
+  const toast = (text, undo) => {
+    state.toast = undo ? { text, undo } : { text };
+    renderEmail();
+    const current = state.toast;
+    later(6e3, () => {
+      if (state.toast === current) {
+        state.toast = null;
+        renderEmail();
+      }
+    });
+  };
+  const archiveEmail = (id, verb) => {
+    local.dismissed.add(id);
+    if (state.email.open === id) {
+      state.email.open = null;
+      state.email.transition = true;
+    }
+    toast(verb === "archived" ? "Conversation archived." : "Conversation moved to Trash.", () => {
+      local.dismissed.delete(id);
+      state.toast = null;
+      renderEmail();
+    });
+  };
+  const renderEmail = () => {
+    const to = state.email.to;
+    const items = to ? byChannel("email").filter((n) => n.to === to) : [];
+    const unread = items.filter((n) => !seen.has(n.id)).length;
+    const unreadAll = byChannel("email").filter((n) => !seen.has(n.id)).length;
+    const open = items.find((n) => n.id === state.email.open);
+    if (!open) state.email.open = null;
+    const transition = state.email.transition && animate();
+    state.email.transition = false;
+    const me = to ?? "you@example.test";
+    let main;
+    if (open) {
+      markSeen([open.id]);
+      const e = open.email;
+      const sender = open.from.name ?? open.from.address;
+      const toLine = open.to.toLowerCase() === me.toLowerCase() ? "me" : open.to;
+      const detail = (field, label, value) => `<span>${label}:</span><span ${tid(TEST_IDS.emailDetail)} data-field="${field}">${esc(value)}</span>`;
+      main = `<div class="mail-toolbar">
+        <button class="icon-btn" data-action="mail-back" ${tid(TEST_IDS.emailBack)} title="Back to Inbox" aria-label="Back to Inbox">${icons.back()}</button>
+        <button class="icon-btn" data-action="mail-archive" data-id="${esc(open.id)}" ${tid(TEST_IDS.emailArchive)} title="Archive" aria-label="Archive">${icons.archive()}</button><span class="icon-btn">${icons.report()}</span><button class="icon-btn" data-action="mail-delete" data-id="${esc(open.id)}" ${tid(TEST_IDS.emailDelete)} title="Delete" aria-label="Delete">${icons.trash()}</button>
+        <button class="icon-btn" data-action="mail-unread" data-id="${esc(open.id)}" ${tid(TEST_IDS.emailMarkUnread)} title="Mark as unread" aria-label="Mark as unread">${icons.markUnread()}</button><span class="icon-btn">${icons.clock()}</span><span class="icon-btn">${icons.more()}</span>
+        <span class="range">${items.indexOf(open) + 1} of ${items.length}</span></div>
+      <div class="reader ${transition ? "enter" : ""}" ${nAttrs(open)} ${tid(TEST_IDS.emailOpen)}>
+        <div class="subject-row"><h1 ${tid(TEST_IDS.emailSubject)}>${esc(e?.subject || "(no subject)")}</h1><span class="label-chip">Inbox</span></div>
+        <div class="sender-row">
+          <span class="mail-avatar" style="background:${colorFor(open.from.address)}">${esc(initials(sender).slice(0, 1))}</span>
+          <div class="who"><b ${tid(TEST_IDS.emailFromName)}>${esc(sender)}</b> <span class="addr">&lt;<span ${tid(TEST_IDS.emailFromAddress)}>${esc(open.from.address)}</span>&gt;</span>
+            <div class="to" data-action="mail-details" ${tid(TEST_IDS.emailTo)} role="button" tabindex="0" aria-expanded="${mailDetailsOpen}">to ${esc(toLine)}${e?.cc.length ? `, ${esc(e.cc.join(", "))}` : ""} ${icons.dropdown()}</div></div>
+          <div class="meta"><span ${tid(TEST_IDS.emailDate)}>${esc(mailLongDate(open.createdAt))}</span> <span class="icon-btn">${icons.star()}</span><span class="icon-btn">${icons.reply()}</span><span class="icon-btn">${icons.more()}</span></div>
+        </div>
+        ${mailDetailsOpen ? `<div class="details" ${tid(TEST_IDS.emailDetails)}>
+          ${detail("from", "from", open.from.name ? `${open.from.name} <${open.from.address}>` : open.from.address)}
+          ${detail("to", "to", open.to)}
+          ${e?.cc.length ? detail("cc", "cc", e.cc.join(", ")) : ""}
+          ${e?.bcc.length ? detail("bcc", "bcc", e.bcc.join(", ")) : ""}
+          ${e?.replyTo.length ? detail("reply-to", "reply-to", e.replyTo.join(", ")) : ""}
+          ${detail("date", "date", new Date(open.createdAt).toLocaleString())}
+          ${detail("subject", "subject", e?.subject ?? "")}
+          ${detail("mailed-by", "mailed-by", `${SERVICE_LABEL[open.service] ?? open.service} (${open.source})`)}
+          ${detail("message-id", "message id", open.providerId)}
+        </div>` : ""}
+        ${e?.html ? `<iframe class="mail-frame" name="email-body" ${tid(TEST_IDS.emailBody)} data-format="html" sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox" title="Email body"></iframe>` : `<div class="mail-text" ${tid(TEST_IDS.emailText)} data-format="text">${linkify(esc(e?.text ?? ""))}</div>`}
+        ${e?.attachments.length ? `<div class="attachments" ${tid(TEST_IDS.emailAttachments)} data-count="${e.attachments.length}"><h3>${e.attachments.length} attachment${e.attachments.length === 1 ? "" : "s"}</h3><div class="att-grid">${e.attachments.map(
+        (a) => `<div class="att" ${tid(TEST_IDS.emailAttachment)} data-filename="${esc(a.filename)}" data-content-type="${esc(a.contentType ?? "")}" data-size="${a.size ?? ""}"><div class="att-top">${icons.file()}</div><div class="att-name">${icons.clip()} ${esc(a.filename)}${a.size ? ` <span style="color:#5f6368;font-weight:400">${Math.max(1, Math.round(a.size / 1024))} KB</span>` : ""}</div></div>`
+      ).join("")}</div></div>` : ""}
+        <div class="reply-row"><span>${icons.reply()} Reply</span><span>${icons.forward()} Forward</span></div>
+      </div>`;
+    } else {
+      main = `<div class="mail-toolbar"><span class="icon-btn">${icons.checkbox()}</span><button class="icon-btn" data-action="refresh" ${tid(TEST_IDS.emailRefresh)} title="Refresh" aria-label="Refresh">${icons.refresh()}</button><span class="icon-btn">${icons.more()}</span>
+        <span class="range">${items.length ? `1\u2013${items.length} of ${items.length}` : ""}</span></div>
+      <div class="cat-tabs"><div class="on">${icons.inbox()} Primary</div><div>${icons.star()} Promotions</div><div>${icons.send()} Updates</div></div>
+      <div class="mail-list ${transition ? "enter" : ""}" role="list">${items.length ? items.map((n) => {
+        const isUnread = !seen.has(n.id);
+        const sender = n.from.name ?? n.from.address;
+        const starred = local.starred.has(n.id);
+        return `<div class="swipe mrow-swipe" data-swipe="mrow" data-id="${esc(n.id)}" data-flip="row:${esc(n.id)}" role="listitem">
+            <div class="swipe-actions">${icons.archive()}${icons.archive()}</div>
+            <div class="mrow swipe-card ${isUnread ? "unread" : ""} ${state.arrived.has(n.id) ? "arrive" : ""}" data-action="mail-open" data-id="${esc(n.id)}" ${nAttrs(n)} ${tid(TEST_IDS.emailRow)} data-starred="${starred}" role="button" tabindex="0">
+            <span class="chk" data-action="mail-check" data-id="${esc(n.id)}" role="checkbox" aria-checked="${local.checked.has(n.id)}" aria-label="Select">${icons.checkbox()}</span><span class="star" data-action="mail-star" data-id="${esc(n.id)}" ${tid(TEST_IDS.emailRowStar)} role="button" aria-pressed="${starred}" aria-label="${starred ? "Starred" : "Not starred"}">${starred ? icons.starFilled() : icons.star()}</span>
+            <span class="from" ${tid(TEST_IDS.emailRowFrom)}>${esc(sender)}</span>
+            <span class="subj"><span ${tid(TEST_IDS.emailRowSubject)}>${esc(n.email?.subject || "(no subject)")}</span> <span class="snippet">- <span ${tid(TEST_IDS.emailRowSnippet)}>${esc(n.preview)}</span></span></span>
+            ${n.email?.attachments.length ? `<span class="clip" ${tid(TEST_IDS.emailRowAttachment)}>${icons.clip()}</span>` : ""}<span class="svc" ${tid(TEST_IDS.emailRowService)}>${esc(SERVICE_LABEL[n.service] ?? n.service)}</span>
+            <span class="date" ${tid(TEST_IDS.emailRowDate)}>${esc(mailDate(n.createdAt))}</span>
+            <span class="hover-actions"><button class="icon-btn" data-action="mail-archive" data-id="${esc(n.id)}" ${tid(TEST_IDS.emailRowArchive)} title="Archive" aria-label="Archive">${icons.archive()}</button><button class="icon-btn" data-action="mail-delete" data-id="${esc(n.id)}" ${tid(TEST_IDS.emailRowDelete)} title="Delete" aria-label="Delete">${icons.trash()}</button><button class="icon-btn" data-action="mail-toggle-read" data-id="${esc(n.id)}" ${tid(TEST_IDS.emailRowToggleRead)} title="${isUnread ? "Mark as read" : "Mark as unread"}" aria-label="${isUnread ? "Mark as read" : "Mark as unread"}">${isUnread ? icons.markRead() : icons.markUnread()}</button><span class="icon-btn">${icons.clock()}</span></span></div></div>`;
+      }).join("") : `<div class="mail-empty" ${tid(TEST_IDS.emailEmpty)}>${icons.envelope()}<b>${to ? "Your Primary tab is empty." : "No email yet"}</b>${to ? "" : "Email sent through Resend, SES, SNS, Customer.io or Mailosaur lands here."}</div>`}</div>`;
+    }
+    const col = $("col-email");
+    flip(col, () => {
+      col.innerHTML = `
+    <div class="device-head"><h2>Email ${countBadge(unreadAll, TEST_IDS.emailUnreadCount)}</h2>${recipientSelect("email", "Mailbox", TEST_IDS.emailRecipient, (t) => t)}</div>
+    <div class="window" ${tid(TEST_IDS.emailDevice)} data-screen="${open ? "message" : "inbox"}" data-recipient="${esc(to ?? "")}">
+      <div class="chrome"><span class="lights"><i></i><i></i><i></i></span><span class="omnibox">${icons.lock()} mail.example.test/#inbox${open ? `/${esc(open.providerId)}` : ""}</span></div>
+      <div class="mail-top"><span class="icon-btn">${icons.menu()}</span><span class="mail-logo">${icons.envelope()}<span class="lbl">Mail</span></span>
+        <div class="mail-search"><span class="icon-btn">${icons.search("#444746", 20)}</span><span class="placeholder">Search mail</span><span class="icon-btn">${icons.tune()}</span></div>
+        <div class="right"><span class="icon-btn">${icons.help()}</span><span class="icon-btn">${icons.gear()}</span><span class="icon-btn">${icons.apps()}</span>
+        <span class="mail-avatar" title="${esc(me)}" style="background:${colorFor(me)}">${esc(me.slice(0, 1).toUpperCase())}</span></div></div>
+      <div class="mail-body">
+        <nav class="mail-nav"><button class="compose">${icons.pencil()}<span class="lbl">Compose</span></button>
+          <div class="nav-item active">${icons.inbox()}<span class="lbl">Inbox</span><span class="n">${unread || ""}</span></div>
+          <div class="nav-item">${icons.star()}<span class="lbl">Starred</span></div>
+          <div class="nav-item">${icons.clock()}<span class="lbl">Snoozed</span></div>
+          <div class="nav-item">${icons.send()}<span class="lbl">Sent</span></div>
+          <div class="nav-item">${icons.draft()}<span class="lbl">Drafts</span></div>
+          <div class="nav-item">${icons.expand()}<span class="lbl">More</span></div></nav>
+        <main class="mail-main">${main}</main>
+      </div>
+      ${state.toast ? `<div class="toast" ${tid(TEST_IDS.toast)} role="status"><span>${esc(state.toast.text)}</span>${state.toast.undo ? `<button data-action="toast-undo" ${tid(TEST_IDS.toastUndo)}>Undo</button>` : ""}<button data-action="toast-close" aria-label="Dismiss">${icons.close(16)}</button></div>` : ""}
+    </div>`;
+    });
+    const frame = col.querySelector(".mail-frame");
+    if (frame && open) {
+      frame.addEventListener("load", () => {
+        const doc = frame.contentDocument;
+        if (doc) frame.style.height = `${Math.max(120, doc.documentElement.scrollHeight + 8)}px`;
+      });
+      frame.srcdoc = mailHtml(open);
+    }
+    if (syncUrl && live) {
+      const total = CHANNELS.reduce(
+        (sum, c) => sum + byChannel(c).filter((n) => !seen.has(n.id)).length,
+        0
+      );
+      document.title = `${total ? `(${total}) ` : ""}${title()} \xB7 Mockingbird`;
+    }
+  };
+  const renderTimeline = () => {
+    const items = visible();
+    $("timeline").innerHTML = items.length ? `<table class="tl" ${tid(TEST_IDS.timeline)}><thead><tr><th>Time</th><th>Channel</th><th>Source</th><th>To</th><th>From</th><th>Content</th><th>Status</th></tr></thead><tbody>${items.map(
+      (n) => `<tr data-action="inspect" data-id="${esc(n.id)}" ${nAttrs(n)} ${tid(TEST_IDS.timelineRow)} tabindex="0">
+            <td class="mono" data-col="time">${esc(timelineTime(n.createdAt))}</td>
+            <td data-col="channel"><span class="chan ${n.channel}">${n.channel === "sms" ? "SMS" : n.channel === "email" ? "Email" : "Push"}</span></td>
+            <td data-col="source"><span class="svc-tag">${esc(SERVICE_LABEL[n.service] ?? n.service)}${n.source !== n.service ? ` \xB7 ${esc(n.source)}` : ""}</span></td>
+            <td class="mono" data-col="to">${esc(n.channel === "sms" ? formatPhone(n.to) : n.to.length > 28 ? `${n.to.slice(0, 26)}\u2026` : n.to)}</td>
+            <td data-col="from">${esc(displaySender(n))}</td>
+            <td class="content" data-col="content">${n.email ? `<b>${esc(n.email.subject)}</b> \u2014 ` : n.push?.title ? `<b>${esc(n.push.title)}</b> \u2014 ` : ""}${esc(n.channel === "email" ? n.preview.slice(0, 120) : n.sms?.body ?? n.push?.body ?? n.preview)}</td>
+            <td class="svc-tag" data-col="status">${esc(n.status ?? "")}</td></tr>`
+    ).join("")}</tbody></table>` : `<div class="empty-tl" ${tid(TEST_IDS.timelineEmpty)}>Nothing sent in namespace <b>${esc(state.namespace)}</b> yet.</div>`;
+  };
+  const renderInspector = () => {
+    const n = state.items.find((x) => x.id === state.inspect);
+    const el = $("inspector");
+    if (!n) {
+      el.hidden = true;
+      el.innerHTML = "";
+      for (const k of Object.keys(el.dataset))
+        if (k !== "region" && k !== "testid") delete el.dataset[k];
+      return;
+    }
+    el.hidden = false;
+    Object.assign(el.dataset, {
+      notificationId: n.id,
+      channel: n.channel,
+      service: n.service,
+      source: n.source,
+      to: n.to,
+      from: n.from.address,
+      status: n.status ?? "",
+      createdAt: n.createdAt
+    });
+    const { raw, ...normalized } = n;
+    const field = (key, label, value) => `<span>${label}</span><span ${tid(TEST_IDS.inspectorField)} data-field="${key}">${esc(value)}</span>`;
+    el.innerHTML = `<header><h3 ${tid(TEST_IDS.inspectorTitle)}>${esc(n.channel.toUpperCase())} \xB7 ${esc(n.email?.subject ?? n.push?.title ?? n.preview.slice(0, 60))}</h3>
+      <button class="btn" data-action="show-on-device" data-id="${esc(n.id)}" ${tid(TEST_IDS.inspectorShowOnDevice)}>Show on device</button><button class="btn" data-action="close-inspector" ${tid(TEST_IDS.inspectorClose)}>Close</button></header>
+    <div class="kv">${field("id", "Id", n.id)}${field("providerId", "Provider id", n.providerId)}${field("service", "Service", `${n.service} (${n.source})`)}
+      ${field("namespace", "Namespace", n.namespace)}${field("to", "To", n.to)}${field("from", "From", n.from.name ? `${n.from.name} <${n.from.address}>` : n.from.address)}
+      ${field("createdAt", "Created", n.createdAt)}${field("status", "Status", n.status ?? "\u2014")}</div>
+    <pre ${tid(TEST_IDS.inspectorJson)}>${esc(JSON.stringify({ ...normalized, raw }, null, 2))}</pre>`;
+  };
+  const shown = (channel) => (state.only === null || state.only === channel) && (options.channels === void 0 || options.channels.includes(channel));
+  const render = () => {
+    if (destroyed) return;
+    renderTopbar();
+    $("devices").hidden = state.view !== "devices";
+    $("timeline").hidden = state.view !== "timeline";
+    for (const channel of CHANNELS) $(`col-${channel}`).hidden = !shown(channel);
+    $("devices").classList.toggle("solo", CHANNELS.filter(shown).length === 1);
+    if (state.view === "devices") {
+      if (shown("sms")) renderSms();
+      if (shown("push")) renderPush();
+      if (shown("email")) renderEmail();
+    } else renderTimeline();
+    renderInspector();
+  };
+  const showOnDevice = (n) => {
+    state.view = "devices";
+    state[n.channel].to = n.to;
+    if (n.channel === "sms") state.sms.thread = n.from.address;
+    if (n.channel === "email") state.email.open = n.id;
+    if (n.channel === "push") {
+      state.push.expanded = n.id;
+      local.openGroups.add(groupKey(n.to, n.push?.app ?? "App"));
+    }
+    local.dismissed.delete(n.id);
+    state.inspect = null;
+    render();
+    root.querySelector(`.devices [data-notification-id="${CSS.escape(n.id)}"]`)?.scrollIntoView({ block: "nearest" });
+  };
+  const collapse = (el, then) => {
+    if (!animate()) return then();
+    el.style.height = `${el.offsetHeight}px`;
+    el.classList.add("collapsing");
+    void el.offsetHeight;
+    Object.assign(el.style, {
+      height: "0px",
+      marginTop: "0px",
+      marginBottom: "0px",
+      paddingTop: "0px",
+      paddingBottom: "0px",
+      opacity: "0"
+    });
+    later(270, then);
+  };
+  const flyOut = (row, card, direction, then) => {
+    if (!animate()) return then();
+    row.classList.add("settling");
+    card.classList.add("settling");
+    card.style.transform = `translateX(${direction * (row.offsetWidth + 40)}px)`;
+    card.style.opacity = "0";
+    later(230, () => collapse(row, then));
+  };
+  const rowFor = (selector) => root.querySelector(selector);
+  const cardIn = (row) => row.querySelector(".swipe-card") ?? row;
+  const dismissPush = (id, direction = -1) => {
+    const row = rowFor(`.ios-swipe[data-id="${CSS.escape(id)}"]`) ?? rowFor(`.a-note[data-id="${CSS.escape(id)}"]`);
+    const done = () => {
+      local.dismissed.add(id);
+      if (state.push.preview === id) state.push.preview = null;
+      renderPush();
+    };
+    if (!row) return done();
+    flyOut(row, cardIn(row), direction, done);
+  };
+  const deleteThread = (from) => {
+    const to = state.sms.to;
+    if (!to) return;
+    const ids = byChannel("sms").filter((n) => n.to === to && n.from.address === from).map((n) => n.id);
+    const row = rowFor(`.thread-swipe[data-from="${CSS.escape(from)}"]`);
+    const done = () => {
+      for (const id of ids) local.dismissed.add(id);
+      renderSms();
+    };
+    if (!row) return done();
+    flyOut(row, cardIn(row), -1, done);
+  };
+  const removeEmail = (id, verb, direction = -1) => {
+    const row = rowFor(`.mrow-swipe[data-id="${CSS.escape(id)}"]`);
+    if (!row) return archiveEmail(id, verb);
+    flyOut(row, cardIn(row), direction, () => archiveEmail(id, verb));
+  };
+  let drag = null;
+  let suppressClick = false;
+  const IOS_OPEN = 160;
+  const THREAD_OPEN = 148;
+  const setOffset = (row, x) => {
+    const card = cardIn(row);
+    card.style.transform = x ? `translateX(${x}px)` : "";
+    if (row.dataset.swipe === "a-note")
+      card.style.opacity = String(1 - Math.min(0.9, Math.abs(x) / row.offsetWidth));
+  };
+  const settle = (row, x, open) => {
+    row.classList.add("settling");
+    row.classList.toggle("open", open);
+    if (row.dataset.swipe === "a-note") row.classList.add("settling");
+    setOffset(row, x);
+    later(340, () => {
+      row.classList.remove("settling", "swiping");
+      row.dataset.offset = String(x);
+    });
+  };
+  const longPress = (el) => {
+    const kind = el.dataset.longpress;
+    const id = el.dataset.notificationId ?? el.dataset.id ?? "";
+    if (kind === "sms-bubble") {
+      state.sms.menu = id;
+      renderSms();
+      try {
+        navigator.vibrate?.(10);
+      } catch {
+      }
+    } else if (kind === "ios-note") {
+      state.push.preview = id;
+      renderPush();
+    } else if (kind === "a-note") {
+      state.push.settings = state.push.settings === id ? null : id;
+      renderPush();
+    }
+  };
+  on("pointerdown", (event) => {
+    sound.unlock();
+    suppressClick = false;
+    if (event.button !== 0 || !event.isPrimary) return;
+    const target = event.target;
+    if (target.closest("select, input, .swipe-actions button, .ios-overlay")) return;
+    const swipe = target.closest("[data-swipe]");
+    const press = target.closest("[data-longpress]");
+    if (!swipe && !press) return;
+    drag = {
+      pointerId: event.pointerId,
+      x0: event.clientX,
+      y0: event.clientY,
+      t0: performance.now(),
+      dx: 0,
+      axis: null,
+      swipe,
+      press,
+      base: Number(swipe?.dataset.offset ?? 0),
+      timer: null
+    };
+    if (press) {
+      const current = drag;
+      current.timer = setTimeout(() => {
+        if (drag !== current || current.axis) return;
+        suppressClick = true;
+        drag = null;
+        longPress(press);
+      }, 480);
+    }
+  });
+  on("pointermove", (event) => {
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    const dx = event.clientX - drag.x0;
+    const dy = event.clientY - drag.y0;
+    if (!drag.axis) {
+      if (Math.hypot(dx, dy) < 8) return;
+      drag.axis = Math.abs(dx) > Math.abs(dy) ? "x" : "y";
+      if (drag.timer) clearTimeout(drag.timer);
+      if (drag.axis === "x" && drag.swipe) {
+        drag.swipe.classList.add("swiping");
+        drag.swipe.classList.remove("settling");
+        cardIn(drag.swipe).classList.remove("settling");
+        try {
+          drag.swipe.setPointerCapture(event.pointerId);
+        } catch {
+        }
+      }
+    }
+    if (drag.axis !== "x" || !drag.swipe) return;
+    event.preventDefault();
+    drag.dx = dx;
+    const kind = drag.swipe.dataset.swipe;
+    let x = drag.base + dx;
+    if (kind === "sms-convo") {
+      const reveal = Math.max(0, Math.min(72, -dx));
+      drag.swipe.style.setProperty("--reveal", `${reveal}px`);
+      return;
+    }
+    if (kind === "ios-note" && x > 0) x = x * 0.35;
+    if (kind === "mrow" || kind === "a-note") x = dx;
+    setOffset(drag.swipe, x);
+  });
+  const endDrag = (event) => {
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    const d = drag;
+    drag = null;
+    if (d.timer) clearTimeout(d.timer);
+    if (d.axis !== "x" || !d.swipe) return;
+    suppressClick = true;
+    const row = d.swipe;
+    const kind = row.dataset.swipe;
+    const width = row.offsetWidth || 1;
+    const velocity = d.dx / Math.max(1, performance.now() - d.t0);
+    const x = d.base + d.dx;
+    if (kind === "sms-convo") {
+      row.classList.add("settling");
+      row.style.setProperty("--reveal", "0px");
+      later(320, () => row.classList.remove("settling"));
+    } else if (kind === "ios-note") {
+      const id = row.dataset.id ?? "";
+      if (x < -width * 0.7 || velocity < -1.1 && x < -60) dismissPush(id);
+      else if (x < -60) settle(row, -IOS_OPEN, true);
+      else if (x > 70) {
+        settle(row, 0, false);
+        state.push.expanded = id;
+        renderPush();
+      } else settle(row, 0, false);
+    } else if (kind === "a-note") {
+      if (Math.abs(x) > width * 0.4 || Math.abs(velocity) > 0.7)
+        dismissPush(row.dataset.id ?? "", Math.sign(x) || 1);
+      else settle(row, 0, false);
+    } else if (kind === "sms-thread") {
+      const from = row.dataset.from ?? "";
+      if (x < -width * 0.6) deleteThread(from);
+      else if (x < -50) settle(row, -THREAD_OPEN, true);
+      else if (x > 50) settle(row, THREAD_OPEN, true);
+      else settle(row, 0, false);
+    } else if (kind === "mrow") {
+      if (Math.abs(x) > width * 0.35 || Math.abs(velocity) > 0.8)
+        removeEmail(row.dataset.id ?? "", "archived", Math.sign(x) || 1);
+      else settle(row, 0, false);
+    }
+  };
+  on("pointerup", endDrag);
+  on("pointercancel", endDrag);
+  on("contextmenu", (event) => {
+    const press = event.target.closest("[data-longpress]");
+    if (!press) return;
+    event.preventDefault();
+    longPress(press);
+  });
+  on(
+    "click",
+    (event) => {
+      if (!suppressClick) return;
+      suppressClick = false;
+      event.stopPropagation();
+      event.preventDefault();
+    },
+    true
+  );
+  const closeOverlays = () => {
+    const had = state.sms.menu || state.push.preview || state.push.settings;
+    state.sms.menu = null;
+    state.push.preview = null;
+    state.push.settings = null;
+    if (had) {
+      renderSms();
+      renderPush();
+    }
+    return Boolean(had);
+  };
+  const copy = (text) => {
+    try {
+      void navigator.clipboard?.writeText(text).catch(() => {
+      });
+    } catch {
+    }
+  };
+  on("click", (event) => {
+    const target = event.target.closest("[data-action]");
+    if (!target) return;
+    const openRow = target.closest(".swipe.open");
+    if (openRow && target.classList.contains("swipe-card")) {
+      settle(openRow, 0, false);
+      return;
+    }
+    const action = target.dataset.action;
+    const id = target.dataset.id ?? "";
+    const from = target.dataset.from ?? "";
+    const smsTo = state.sms.to ?? "";
+    switch (action) {
+      case "view":
+        state.view = target.dataset.value === "timeline" ? "timeline" : "devices";
+        render();
+        break;
+      case "sound":
+        handle.setSound(!sound.enabled);
+        break;
+      case "sms-open":
+        state.sms.thread = from || null;
+        state.sms.transition = "push";
+        renderSms();
+        break;
+      case "sms-back":
+        state.sms.thread = null;
+        state.sms.transition = "back";
+        renderSms();
+        break;
+      case "thread-delete":
+        deleteThread(from);
+        break;
+      case "thread-pin": {
+        const key = threadKey(smsTo, from);
+        if (!local.pinned.delete(key)) local.pinned.add(key);
+        renderSms();
+        break;
+      }
+      case "thread-mute": {
+        const key = threadKey(smsTo, from);
+        if (!local.muted.delete(key)) local.muted.add(key);
+        renderSms();
+        break;
+      }
+      case "thread-unread": {
+        const items = byChannel("sms").filter((n) => n.to === smsTo && n.from.address === from);
+        if (items.some((n) => !seen.has(n.id))) markSeen(items.map((n) => n.id));
+        else {
+          const latest = items.at(-1);
+          if (latest) markUnseen([latest.id]);
+        }
+        renderSms();
+        break;
+      }
+      case "tapback": {
+        const value = target.dataset.value;
+        if (local.tapbacks.get(id) === value) local.tapbacks.delete(id);
+        else local.tapbacks.set(id, value);
+        state.sms.menu = null;
+        renderSms();
+        break;
+      }
+      case "sms-copy": {
+        const n = state.items.find((x) => x.id === id);
+        if (n) copy(n.sms?.body ?? "");
+        state.sms.menu = null;
+        renderSms();
+        break;
+      }
+      case "sms-copy-code":
+        copy(target.dataset.code ?? "");
+        break;
+      case "close-overlay":
+        closeOverlays();
+        break;
+      case "push-toggle": {
+        if (target.dataset.groupTop === "true") {
+          const n = state.items.find((x) => x.id === id);
+          if (n) {
+            local.openGroups.add(groupKey(n.to, n.push?.app ?? "App"));
+            renderPush();
+          }
+          break;
+        }
+        state.push.expanded = state.push.expanded === id ? null : id;
+        renderPush();
+        break;
+      }
+      case "push-clear":
+        state.push.preview = null;
+        dismissPush(id);
+        break;
+      case "push-options":
+        state.push.preview = id;
+        renderPush();
+        break;
+      case "push-alerting": {
+        const app = target.dataset.app ?? "App";
+        if (target.dataset.value === "silent") local.silent.add(app);
+        else local.silent.delete(app);
+        renderPush();
+        break;
+      }
+      case "push-clear-all": {
+        const rows = [...root.querySelectorAll(".shade-list .a-note")];
+        const ids = rows.map((r) => r.dataset.id ?? "");
+        const done = () => {
+          for (const x of ids) local.dismissed.add(x);
+          renderPush();
+        };
+        if (!animate()) return done();
+        rows.forEach((row, i) => {
+          later(i * 60, () => {
+            row.classList.add("settling");
+            row.style.transform = `translateX(${row.offsetWidth + 40}px)`;
+            row.style.opacity = "0";
+          });
+        });
+        later(rows.length * 60 + 300, done);
+        break;
+      }
+      case "group-open":
+        local.openGroups.add(target.dataset.key ?? "");
+        renderPush();
+        break;
+      case "group-collapse":
+        local.openGroups.delete(target.dataset.key ?? "");
+        renderPush();
+        break;
+      case "group-clear": {
+        const app = target.dataset.app ?? "App";
+        for (const n of byChannel("push"))
+          if (n.to === state.push.to && (n.push?.app ?? "App") === app) local.dismissed.add(n.id);
+        local.openGroups.delete(target.dataset.key ?? "");
+        renderPush();
+        break;
+      }
+      case "skin":
+        state.push.skin = target.dataset.value ?? "auto";
+        renderPush();
+        break;
+      case "mail-open":
+        state.email.open = id;
+        state.email.transition = true;
+        mailDetailsOpen = false;
+        renderEmail();
+        break;
+      case "mail-back":
+        state.email.open = null;
+        state.email.transition = true;
+        renderEmail();
+        break;
+      case "mail-details":
+        mailDetailsOpen = !mailDetailsOpen;
+        renderEmail();
+        break;
+      case "mail-archive":
+        removeEmail(id, "archived");
+        break;
+      case "mail-delete":
+        removeEmail(id, "deleted");
+        break;
+      case "mail-unread":
+        markUnseen([id]);
+        state.email.open = null;
+        state.email.transition = true;
+        renderEmail();
+        break;
+      case "mail-toggle-read":
+        if (seen.has(id)) markUnseen([id]);
+        else markSeen([id]);
+        renderEmail();
+        break;
+      case "mail-star":
+        if (!local.starred.delete(id)) local.starred.add(id);
+        renderEmail();
+        break;
+      case "mail-check":
+        if (!local.checked.delete(id)) local.checked.add(id);
+        renderEmail();
+        break;
+      case "toast-undo":
+        state.toast?.undo?.();
+        break;
+      case "toast-close":
+        state.toast = null;
+        renderEmail();
+        break;
+      case "refresh":
+        void refresh().catch(() => {
+        });
+        break;
+      case "inspect":
+        state.inspect = id;
+        renderInspector();
+        break;
+      case "close-inspector":
+        state.inspect = null;
+        renderInspector();
+        break;
+      case "show-on-device": {
+        const n = state.items.find((x) => x.id === id);
+        if (n) showOnDevice(n);
+        break;
+      }
+    }
+  });
+  on("dblclick", (event) => {
+    const target = event.target.closest("[data-notification-id]");
+    if (!target || target.closest("[data-region=inspector]")) return;
+    state.inspect = target.dataset.notificationId ?? null;
+    renderInspector();
+  });
+  on("change", (event) => {
+    const target = event.target;
+    const action = target.dataset.action;
+    if (action === "namespace") handle.setNamespace(target.value);
+    else if (action === "follow") state.follow = target.checked;
+    else if (action === "recipient") {
+      const channel = target.dataset.channel;
+      state[channel].to = target.value;
+      if (channel === "sms") state.sms.thread = null;
+      if (channel === "email") state.email.open = null;
+      render();
+    }
+  });
+  on("input", (event) => {
+    const target = event.target;
+    if (target.dataset.action !== "search") return;
+    state.search = target.value;
+    ensureSelection();
+    render();
+  });
+  on("keydown", (event) => {
+    sound.unlock();
+    const target = event.target;
+    if (event.key === "Escape") {
+      if (closeOverlays()) return;
+      if (state.inspect) {
+        state.inspect = null;
+        renderInspector();
+      }
+      return;
+    }
+    if (target.matches("input, select, textarea")) return;
+    if (event.key === "ContextMenu" || event.shiftKey && event.key === "F10") {
+      const press = target.closest("[data-longpress]");
+      if (press) {
+        event.preventDefault();
+        longPress(press);
+      }
+      return;
+    }
+    if (event.key === "Delete" || event.key === "Backspace" || event.key === "#" || event.key === "e") {
+      const id = target.dataset.id ?? "";
+      if (target.matches("[data-testid=push-notification]") && event.key !== "e") {
+        event.preventDefault();
+        dismissPush(id);
+      } else if (target.matches("[data-testid=sms-thread]") && event.key !== "e") {
+        event.preventDefault();
+        deleteThread(target.dataset.from ?? "");
+      } else if (target.matches("[data-testid=email-row]")) {
+        event.preventDefault();
+        removeEmail(id, event.key === "e" ? "archived" : "deleted");
+      }
+      return;
+    }
+    if ((event.key === "Enter" || event.key === " ") && target.matches("[role=button]:not(button)")) {
+      event.preventDefault();
+      target.click();
+    }
+  });
+  const applyPins = () => {
+    if (pinned) {
+      state[pinned.channel].to = pinned.to;
+      if (pinned.channel === "sms")
+        state.sms.thread = pinnedFrom ?? smsThreads(pinned.to)[0]?.from ?? null;
+    }
+    if (pinnedId) {
+      const n = state.items.find((x) => x.id === pinnedId);
+      if (n) return showOnDevice(n);
+    }
+    render();
+  };
+  let markReady = () => {
+  };
+  const ready = new Promise((resolve) => {
+    markReady = () => {
+      root.dataset.ready = "true";
+      resolve();
+    };
+  });
+  const handle = {
+    render,
+    state,
+    ready,
+    show(target) {
+      const n = target.id ? state.items.find((x) => x.id === target.id) : void 0;
+      if (n) return showOnDevice(n);
+      if (target.channel) {
+        state.view = "devices";
+        if (target.to) state[target.channel].to = target.to;
+        if (target.channel === "sms" && target.to)
+          state.sms.thread = smsThreads(target.to)[0]?.from ?? null;
+        render();
+      }
+    },
+    setNamespace(namespace) {
+      if (namespace === state.namespace) return;
+      state.namespace = namespace;
+      state.items = [];
+      state.sms = { ...state.sms, to: null, thread: null, menu: null };
+      state.email = { ...state.email, to: null, open: null };
+      state.push.to = null;
+      loadSeen();
+      if (syncUrl) {
+        const url = new URL(location.href);
+        url.searchParams.set("namespace", namespace);
+        history.replaceState(null, "", url);
+      }
+      if (live) {
+        connect();
+        void refresh().catch(() => {
+        });
+      } else render();
+    },
+    setSound(enabled) {
+      sound.enabled = enabled;
+      if (enabled) sound.unlock();
+      if (storage)
+        try {
+          localStorage.setItem(soundKey, enabled ? "1" : "0");
+        } catch {
+        }
+      renderTopbar();
+    },
+    destroy() {
+      destroyed = true;
+      listeners.abort();
+      stream?.abort();
+      for (const t of timers) clearTimeout(t);
+      timers.clear();
+      for (const t of intervals) clearInterval(t);
+      sound.close();
+      root.innerHTML = "";
+      root.classList.remove(ROOT_CLASS, "embedded");
+    }
+  };
+  const intervals = [];
+  if (!live) {
+    state.items = [...options.items ?? []].sort((a, b) => a.createdAt < b.createdAt ? 1 : -1);
+    state.sources = options.sources ?? [];
+    state.namespaces = options.namespaces ?? [];
+    state.discoveryError = options.discoveryError ?? null;
+    state.connected = options.connected ?? true;
+    ensureSelection();
+    applyPins();
+    markReady();
+    return handle;
+  }
+  intervals.push(
+    setInterval(() => {
+      if (drag || state.sms.menu || state.push.preview || state.push.settings) return;
+      if (state.view === "devices" && !root.querySelector(".mail-frame")) render();
+      else renderTopbar();
+    }, 3e4),
+    setInterval(() => void refreshSources(), 5e3)
+  );
+  loadSeen();
+  render();
+  connect();
+  void refreshSources();
+  const boot = async () => {
+    for (let attempt = 0; !destroyed; attempt++) {
+      try {
+        await refresh();
+        applyPins();
+        markReady();
+        return;
+      } catch {
+        await new Promise(
+          (resolve) => later(Math.min(5e3, 500 * 2 ** attempt), () => resolve(null))
+        );
+      }
+    }
+  };
+  void boot();
+  return handle;
+}
+
+// src/ui.ts
+var STYLE_ID = "mockingbird-notifications-styles";
+var installStyles = (host) => {
+  const rootNode = host.getRootNode();
+  const target = rootNode instanceof ShadowRoot ? rootNode : document.head;
+  if (target.querySelector(`#${STYLE_ID}`)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = STYLES;
+  target.append(style);
+};
+var mountNotifications = (host, options = {}) => {
+  const { harness, injectStyles = true, ...rest } = options;
+  if (injectStyles) installStyles(host);
+  if (harness) rest.fetch = (request) => harness.fetch(request);
+  return createApp(host, { embedded: true, syncUrl: false, ...rest });
+};
+export {
+  ROOT_CLASS,
+  STYLES,
+  TEST_IDS,
+  createApp,
+  mountNotifications,
+  selectors
+};
+//# sourceMappingURL=ui.js.map