@aparte/plugin-cards 0.0.0-stage → 0.29.0

package/dist/stock.js

@@ -0,0 +1,1013 @@
+import { e as el, p as word, d as defineCard, o as str, b as formatNumber, n as num, w as webUrl, c as currencyCode, k as glyph, t as toDate, l as intlTag, a as formatHour, j as formatWhen } from "./format-CchcJRum.js";
+import { s as sparkline } from "./sparkline-C-cA9obz.js";
+import { s as segmented } from "./controls-BVX2u7sK.js";
+const CHART_ROLE = { en: "chart", fr: "graphique", de: "Diagramm", es: "gráfico", it: "grafico", ja: "チャート", ko: "차트", pt: "gráfico", ru: "график", zh: "图表" };
+const SVG = "http://www.w3.org/2000/svg";
+const PAD = 0.2;
+function chartGeometry(values, baseline) {
+  if (values.length < 2) return null;
+  let hi = 0;
+  let lo = 0;
+  values.forEach((v, i) => {
+    if (v > values[hi]) hi = i;
+    if (v < values[lo]) lo = i;
+  });
+  const top = Math.max(values[hi], baseline);
+  const bottom = Math.min(values[lo], baseline);
+  const span = top - bottom;
+  const y = (v) => span === 0 ? 50 : 100 - (PAD * 100 + (v - bottom) / span * (100 - 2 * PAD * 100));
+  const step = 100 / (values.length - 1);
+  const points = values.map((v, i) => [i * step, y(v)]);
+  const at = (p) => `${p[0].toFixed(2)} ${p[1].toFixed(2)}`;
+  const line = `M${points.map(at).join(" L")}`;
+  const baseY = y(baseline);
+  const area = `${line} L100 ${baseY.toFixed(2)} L0 ${baseY.toFixed(2)} Z`;
+  return { line, area, points, baseY, hi, lo };
+}
+function thin(points, max = 240) {
+  if (points.length <= max) return points;
+  const buckets = Math.max(1, Math.floor(max / 2) - 1);
+  const size = points.length / buckets;
+  const out = [points[0]];
+  for (let b = 0; b < buckets; b++) {
+    const slice = points.slice(Math.floor(b * size), Math.floor((b + 1) * size));
+    if (!slice.length) continue;
+    let low = slice[0];
+    let high = slice[0];
+    for (const p of slice) {
+      if (p.value < low.value) low = p;
+      if (p.value > high.value) high = p;
+    }
+    for (const p of slice.indexOf(low) <= slice.indexOf(high) ? [low, high] : [high, low]) {
+      if (out[out.length - 1] !== p) out.push(p);
+    }
+  }
+  const last = points[points.length - 1];
+  if (out[out.length - 1] !== last) out.push(last);
+  return out;
+}
+function groupCandles(candles, max = 80) {
+  if (candles.length <= max) return candles;
+  const size = Math.ceil(candles.length / max);
+  const out = [];
+  for (let i = 0; i < candles.length; i += size) {
+    const group = candles.slice(i, i + size);
+    const first = group[0];
+    const volumes = group.map((c) => c.volume).filter((v) => v !== void 0);
+    out.push({
+      ...first.time ? { time: first.time } : {},
+      open: first.open,
+      close: group[group.length - 1].close,
+      high: Math.max(...group.map((c) => c.high)),
+      low: Math.min(...group.map((c) => c.low)),
+      ...volumes.length ? { volume: volumes.reduce((a, b) => a + b, 0) } : {}
+    });
+  }
+  return out;
+}
+const VOLUME_BAND = 16;
+function candleGeometry(candles) {
+  if (candles.length === 0) return null;
+  let hi = 0;
+  let lo = 0;
+  candles.forEach((c, i) => {
+    if (c.high > candles[hi].high) hi = i;
+    if (c.low < candles[lo].low) lo = i;
+  });
+  const maxVolume = Math.max(0, ...candles.map((c) => c.volume ?? 0));
+  const floor = maxVolume > 0 ? 100 - VOLUME_BAND : 100;
+  const pad = PAD * 80;
+  const top = candles[hi].high;
+  const bottom = candles[lo].low;
+  const span = top - bottom;
+  const y = (v) => span === 0 ? floor / 2 : floor - pad - (v - bottom) / span * (floor - 2 * pad);
+  const slot = 100 / candles.length;
+  const shapes = candles.map((c, i) => {
+    const open = y(c.open);
+    const close = y(c.close);
+    return {
+      x: (i + 0.5) * slot,
+      width: slot * 0.62,
+      top: Math.min(open, close),
+      bottom: Math.max(open, close),
+      high: y(c.high),
+      low: y(c.low),
+      close,
+      direction: c.close > c.open ? "up" : c.close < c.open ? "down" : "flat",
+      volume: maxVolume > 0 ? (c.volume ?? 0) / maxVolume * (VOLUME_BAND - 2) : 0
+    };
+  });
+  return { shapes, hi, lo, volume: maxVolume > 0 };
+}
+let serial = 0;
+function svgNode(tag, attrs) {
+  const node = document.createElementNS(SVG, tag);
+  for (const [name, value] of Object.entries(attrs)) node.setAttribute(name, String(value));
+  return node;
+}
+function stretchedSvg() {
+  const svg = svgNode("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", "aria-hidden": "true", focusable: "false" });
+  svg.setAttribute("class", "aparte-stock__svg");
+  return svg;
+}
+function place(node, x, y) {
+  node.style.setProperty("--aparte-stock-x", `${x.toFixed(2)}%`);
+  node.style.setProperty("--aparte-stock-y", `${y.toFixed(2)}%`);
+}
+const alignOf = (x) => x < 14 ? "start" : x > 86 ? "end" : "center";
+function extreme(ctx, kind, x, y, text) {
+  const label = el("span", { class: `aparte-stock__extreme aparte-stock__extreme--${kind}`, attrs: { "aria-hidden": "true", "data-align": alignOf(x) } });
+  place(label, x, y);
+  ctx.bind(label, text);
+  return label;
+}
+function frame(ctx, options) {
+  const cursor = el("span", { class: "aparte-stock__cursor", attrs: { "aria-hidden": "true" } });
+  const cursorDot = el("span", { class: "aparte-stock__cursor-dot", attrs: { "aria-hidden": "true" } });
+  const plot = el(
+    "div",
+    { class: "aparte-stock__plot", attrs: { tabindex: 0, role: "application", dir: "ltr", "data-kind": options.kind } },
+    options.svg,
+    ...options.under,
+    cursor,
+    cursorDot,
+    ...options.over ?? []
+  );
+  ctx.bind(plot, options.label, "aria-label");
+  ctx.bind(plot, () => word(ctx.config, "cardsStockChartRole", CHART_ROLE), "aria-roledescription");
+  const shown = el("span", { class: "aparte-stock__readout-shown", attrs: { "aria-hidden": "true" } });
+  const spoken = el("span", { class: "aparte-sr-only" });
+  const readout = el("span", { class: "aparte-stock__readout", attrs: { "aria-live": "polite", "aria-atomic": "true" } }, shown, spoken);
+  const info = el("div", { class: "aparte-stock__chart-info" }, ...options.info ?? []);
+  const root = el("div", { class: "aparte-stock__chart" }, plot, el("div", { class: "aparte-stock__chart-foot" }, readout, info));
+  const last = options.count - 1;
+  let current = -1;
+  let byKeyboard = false;
+  function show(index) {
+    current = Math.max(0, Math.min(last, index));
+    const [x, y] = options.at(current);
+    place(cursor, x, y);
+    place(cursorDot, x, y);
+    root.setAttribute("data-scrub", "");
+    const text = options.readout(current);
+    shown.textContent = text.shown;
+    spoken.textContent = text.spoken;
+  }
+  function hide() {
+    current = -1;
+    root.removeAttribute("data-scrub");
+    shown.textContent = "";
+    spoken.textContent = "";
+  }
+  const fromPointer = (event) => {
+    const box = plot.getBoundingClientRect();
+    if (!box.width) return;
+    show(options.indexAt(Math.max(0, Math.min(1, (event.clientX - box.left) / box.width))));
+  };
+  plot.addEventListener("pointermove", fromPointer);
+  plot.addEventListener("pointerdown", (event) => {
+    byKeyboard = false;
+    fromPointer(event);
+  });
+  plot.addEventListener("pointerleave", () => {
+    if (!byKeyboard || document.activeElement !== plot) hide();
+  });
+  plot.addEventListener("pointercancel", hide);
+  plot.addEventListener("focus", () => {
+    if (current >= 0) return;
+    byKeyboard = true;
+    show(last);
+  });
+  plot.addEventListener("blur", hide);
+  plot.addEventListener("keydown", (event) => {
+    const page = Math.max(1, Math.round(options.count / 10));
+    const from = current < 0 ? last : current;
+    const moves = {
+      ArrowLeft: from - (event.shiftKey ? page : 1),
+      ArrowRight: from + (event.shiftKey ? page : 1),
+      PageUp: from - page,
+      PageDown: from + page,
+      Home: 0,
+      End: last
+    };
+    if (event.key === "Escape") {
+      hide();
+      return;
+    }
+    const to = moves[event.key];
+    if (to === void 0) return;
+    event.preventDefault();
+    byKeyboard = true;
+    show(to);
+  });
+  return root;
+}
+function priceChart(ctx, options) {
+  const shown = thin(options.points);
+  const geometry = chartGeometry(shown.map((p) => p.value), options.baseline);
+  if (!geometry) return null;
+  const { points, baseY } = geometry;
+  const id = `aparte-stock-${++serial}`;
+  const svg = stretchedSvg();
+  const band = (name, y, height) => {
+    const clip = svgNode("clipPath", { id: `${id}-${name}`, clipPathUnits: "userSpaceOnUse" });
+    clip.append(svgNode("rect", { x: -5, y: y.toFixed(2), width: 110, height: Math.max(0, height).toFixed(2) }));
+    return clip;
+  };
+  const gradient = (name, from, to) => {
+    const g = svgNode("linearGradient", { id: `${id}-fill-${name}`, gradientUnits: "userSpaceOnUse", x1: 0, x2: 0, y1: from.toFixed(2), y2: to.toFixed(2) });
+    const stop = (offset, opacity) => {
+      const s = svgNode("stop", { offset, "stop-opacity": opacity });
+      s.setAttribute("class", name === "up" ? "aparte-stock__stop aparte-stock__stop--up" : "aparte-stock__stop aparte-stock__stop--down");
+      return s;
+    };
+    g.append(stop(0, name === "up" ? 0.3 : 0.02), stop(1, name === "up" ? 0.02 : 0.3));
+    return g;
+  };
+  const defs = svgNode("defs", {});
+  defs.append(
+    band("up", -10, baseY + 10),
+    band("down", baseY, 110 - baseY),
+    gradient("up", Math.min(...points.map((p) => p[1])), baseY),
+    gradient("down", baseY, Math.max(...points.map((p) => p[1])))
+  );
+  const area = (name) => {
+    const path = svgNode("path", { d: geometry.area, fill: `url(#${id}-fill-${name})`, "clip-path": `url(#${id}-${name})` });
+    path.setAttribute("class", name === "up" ? "aparte-stock__area aparte-stock__area--up" : "aparte-stock__area aparte-stock__area--down");
+    return path;
+  };
+  const stroke = (name) => {
+    const path = svgNode("path", { d: geometry.line, "clip-path": `url(#${id}-${name})`, "vector-effect": "non-scaling-stroke" });
+    path.setAttribute("class", name === "up" ? "aparte-stock__line aparte-stock__line--up" : "aparte-stock__line aparte-stock__line--down");
+    return path;
+  };
+  svg.append(defs, area("up"), area("down"), stroke("up"), stroke("down"));
+  const baseline = el("span", { class: "aparte-stock__baseline", attrs: { "aria-hidden": "true" } });
+  place(baseline, 0, baseY);
+  const end = shown[shown.length - 1].value;
+  const side = end > options.baseline ? "up" : end < options.baseline ? "down" : "flat";
+  const dot = el("span", { class: "aparte-stock__dot", attrs: { "aria-hidden": "true", "data-live": options.live === true, "data-direction": side } });
+  const lastPoint = points[points.length - 1];
+  place(dot, lastPoint[0], lastPoint[1]);
+  const flat = shown[geometry.hi].value === shown[geometry.lo].value;
+  const mark = (kind, i) => extreme(ctx, kind, points[i][0], points[i][1], () => options.value(shown[i].value));
+  return frame(ctx, {
+    kind: "line",
+    svg,
+    under: [baseline, flat ? null : mark("hi", geometry.hi), flat ? null : mark("lo", geometry.lo)],
+    over: [dot],
+    count: points.length,
+    indexAt: (ratio) => Math.round(ratio * (points.length - 1)),
+    at: (i) => points[i],
+    readout: (i) => {
+      const p = shown[i];
+      const text = p.time ? `${options.value(p.value)} · ${options.time(p.time)}` : options.value(p.value);
+      return { shown: text, spoken: text };
+    },
+    label: options.label,
+    info: options.info ?? []
+  });
+}
+function candleChart(ctx, options) {
+  const candles = groupCandles(options.candles);
+  const geometry = candleGeometry(candles);
+  if (!geometry) return null;
+  const { shapes } = geometry;
+  const svg = stretchedSvg();
+  const paths = {};
+  const add = (key, d) => {
+    paths[key] = (paths[key] ?? "") + d;
+  };
+  const n = (v) => v.toFixed(2);
+  for (const s of shapes) {
+    const x0 = s.x - s.width / 2;
+    const x1 = s.x + s.width / 2;
+    const bottom = Math.max(s.bottom, s.top + 0.8);
+    add(`body-${s.direction}`, `M${n(x0)} ${n(s.top)}H${n(x1)}V${n(bottom)}H${n(x0)}Z`);
+    add(`wick-${s.direction}`, `M${n(s.x)} ${n(s.high)}V${n(s.top)}M${n(s.x)} ${n(bottom)}V${n(s.low)}`);
+    if (s.volume > 0) add(`volume-${s.direction}`, `M${n(x0)} 100H${n(x1)}V${n(100 - s.volume)}H${n(x0)}Z`);
+  }
+  for (const kind of ["volume", "wick", "body"]) {
+    for (const direction of ["up", "down", "flat"]) {
+      const d = paths[`${kind}-${direction}`];
+      if (!d) continue;
+      const path = svgNode("path", { d, "vector-effect": "non-scaling-stroke" });
+      const name = `aparte-stock__${kind}`;
+      path.setAttribute("class", [name, `${name}--${direction}`].join(" "));
+      svg.append(path);
+    }
+  }
+  const flat = candles[geometry.hi].high === candles[geometry.lo].low;
+  const hi = shapes[geometry.hi];
+  const lo = shapes[geometry.lo];
+  return frame(ctx, {
+    kind: "candles",
+    svg,
+    under: [
+      flat ? null : extreme(ctx, "hi", hi.x, hi.high, () => options.value(candles[geometry.hi].high)),
+      flat ? null : extreme(ctx, "lo", lo.x, lo.low, () => options.value(candles[geometry.lo].low))
+    ],
+    count: shapes.length,
+    indexAt: (ratio) => Math.min(shapes.length - 1, Math.floor(ratio * shapes.length)),
+    at: (i) => [shapes[i].x, shapes[i].close],
+    readout: (i) => {
+      const c = candles[i];
+      const text = options.ohlc(c);
+      const when = c.time ? ` · ${options.time(c.time)}` : "";
+      return { shown: `${text.shown}${when}`, spoken: `${text.spoken}${when}` };
+    },
+    label: options.label,
+    info: options.info ?? []
+  });
+}
+const UP = '<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M6 2.2l4.3 6.6H1.7z"/></svg>';
+const DOWN = '<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M6 9.8L1.7 3.2h8.6z"/></svg>';
+const CHART = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 4v15.5h17"/><path d="M6.5 15l4-4.5 3 2.5 5.5-6.5"/><path d="M15.8 6.5h3.2v3.2"/></svg>';
+const stockStyles = '/* =========================================\n   The stock card — @aparte/plugin-cards/stock\n   =========================================\n   Four variants of one card, chosen by `data-variant` on its root:\n     chart    one quote at length: the symbol, the price and its change, the chart\n              against the previous close, the day\'s figures and the 52-week range.\n              Several quotes in `chart` are rows, as in `compact`.\n     compact  a row per quote — symbol and name, sparkline, price, change.\n     ticker   a strip of quotes that scrolls sideways, by hand: nothing moves on its own.\n     candles  the chart card with candlesticks in place of the line (the line when the\n              quote has no candles).\n   Up and down are `--aparte-stock-up` / `--aparte-stock-down` (the theme\'s success and\n   error by default): a market that writes a rise in red swaps the two. A change always\n   carries its sign and an arrow too, so the colour is never the only telling.\n   */\n\n.aparte-stock-card {\n  --aparte-stock-up: var(--aparte-success);\n  --aparte-stock-down: var(--aparte-error);\n  --aparte-stock-flat: var(--aparte-text-muted);\n  /* The colours as text on the card: mixed toward the ink, like the theme\'s own `-ink`\n     tokens, and derived from the two above so a swap carries over to the text. */\n  --aparte-stock-up-ink: color-mix(in oklab, var(--aparte-stock-up) 40%, var(--aparte-text));\n  --aparte-stock-down-ink: color-mix(in oklab, var(--aparte-stock-down) 40%, var(--aparte-text));\n  --aparte-stock-chart-height: 8.5rem;\n  --aparte-stock-price-size: calc(var(--aparte-font-size-2xl) * 1.3);\n  --aparte-stock-tone: var(--aparte-stock-flat);\n  --aparte-stock-tone-ink: var(--aparte-text-muted);\n}\n\n.aparte-stock-card [data-direction="up"] {\n  --aparte-stock-tone: var(--aparte-stock-up);\n  --aparte-stock-tone-ink: var(--aparte-stock-up-ink);\n}\n\n.aparte-stock-card [data-direction="down"] {\n  --aparte-stock-tone: var(--aparte-stock-down);\n  --aparte-stock-tone-ink: var(--aparte-stock-down-ink);\n}\n\n.aparte-stock-card [data-direction="flat"] {\n  --aparte-stock-tone: var(--aparte-stock-flat);\n  --aparte-stock-tone-ink: var(--aparte-text-muted);\n}\n\n/* ── Widths: each variant asks for its own; the bubble\'s limit caps them all ── */\n\n.aparte-stock-card[data-variant="chart"],\n.aparte-stock-card[data-variant="candles"] { --aparte-rich-card-max-inline-size: 27rem; }\n.aparte-stock-card[data-variant="compact"],\n.aparte-stock-card:has(> .aparte-stock__list) { --aparte-rich-card-max-inline-size: 26rem; }\n.aparte-stock-card[data-variant="ticker"] { --aparte-rich-card-max-inline-size: 36rem; }\n\n/* ── A quote, whatever its shape ─────────────────────────────────────── */\n\n.aparte-stock {\n  position: relative;\n  min-inline-size: 0;\n  color: var(--aparte-text);\n}\n\n.aparte-stock__heading {\n  padding: var(--aparte-space-5) var(--aparte-rich-card-padding) var(--aparte-space-2);\n  font-size: var(--aparte-font-size-md);\n  font-weight: var(--aparte-font-weight-semibold);\n  overflow-wrap: anywhere;\n}\n\n.aparte-stock__id {\n  display: flex;\n  align-items: baseline;\n  gap: var(--aparte-space-3);\n  min-inline-size: 0;\n}\n\n.aparte-stock__symbol {\n  flex: none;\n  font-weight: var(--aparte-font-weight-bold);\n  letter-spacing: 0.01em;\n  color: inherit;\n  text-decoration: none;\n}\n\na.aparte-stock__symbol:hover {\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-underline-offset: 0.18em;\n}\n\na.aparte-stock__symbol:focus-visible {\n  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);\n  outline-offset: var(--aparte-focus-outline-offset);\n  border-radius: var(--aparte-radius-xs);\n}\n\n.aparte-stock__name {\n  min-inline-size: 0;\n  overflow: hidden;\n  color: var(--aparte-text-muted);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* The change: arrow and signed figures on a wash of its own colour. */\n.aparte-stock__change {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--aparte-space-1);\n  padding: var(--aparte-space-1) var(--aparte-space-3);\n  border-radius: var(--aparte-radius-full);\n  background: color-mix(in oklab, var(--aparte-stock-tone) 14%, transparent);\n  color: var(--aparte-stock-tone-ink);\n  font-size: var(--aparte-font-size-sm);\n  font-weight: var(--aparte-font-weight-semibold);\n  line-height: 1.2;\n  white-space: nowrap;\n  --aparte-rich-card-glyph-size: 0.75em;\n}\n\n.aparte-stock__arrow { color: var(--aparte-stock-tone); }\n\n/* ── chart: the quote at length ──────────────────────────────────────── */\n\n.aparte-stock--chart {\n  display: flex;\n  flex-direction: column;\n  gap: var(--aparte-space-5);\n  padding: var(--aparte-space-7) var(--aparte-rich-card-padding) var(--aparte-space-6);\n  /* A wash of the day\'s colour at the top, gone by the chart: the card says which way\n     before a figure is read, and stays the card\'s surface where the figures are. */\n  background: linear-gradient(\n    to bottom,\n    color-mix(in oklab, var(--aparte-stock-tone) 8%, var(--aparte-surface-1)),\n    var(--aparte-surface-1) 55%\n  );\n}\n\n.aparte-stock--chart .aparte-stock__head {\n  display: flex;\n  flex-direction: column;\n  gap: var(--aparte-space-1);\n}\n\n.aparte-stock--chart .aparte-stock__id { font-size: var(--aparte-font-size-base); }\n\n.aparte-stock__meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: var(--aparte-space-3);\n  row-gap: var(--aparte-space-1);\n  color: var(--aparte-text-muted);\n  font-size: var(--aparte-font-size-sm);\n}\n\n.aparte-stock__meta > * + *::before {\n  content: "·";\n  margin-inline-end: var(--aparte-space-3);\n}\n\n.aparte-stock__market {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--aparte-space-2);\n}\n\n/* The dot is a colour AND a word: open, closed, before or after the session. */\n.aparte-stock__market-dot {\n  display: inline-block;\n  inline-size: 0.45rem;\n  block-size: 0.45rem;\n  border-radius: var(--aparte-radius-full);\n  background: var(--aparte-stock-flat);\n}\n\n.aparte-stock__market[data-market="open"] .aparte-stock__market-dot {\n  background: var(--aparte-success);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--aparte-success) 22%, transparent);\n}\n\n.aparte-stock__market[data-market="pre"] .aparte-stock__market-dot,\n.aparte-stock__market[data-market="post"] .aparte-stock__market-dot {\n  background: var(--aparte-warning);\n}\n\n.aparte-stock__quote {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: var(--aparte-space-5);\n  row-gap: var(--aparte-space-2);\n}\n\n.aparte-stock__amount {\n  display: inline-flex;\n  align-items: baseline;\n  gap: var(--aparte-space-2);\n  min-inline-size: 0;\n}\n\n.aparte-stock__price {\n  font-size: var(--aparte-stock-price-size);\n  font-weight: var(--aparte-font-weight-semibold);\n  letter-spacing: -0.02em;\n  line-height: 1;\n  overflow-wrap: anywhere;\n}\n\n.aparte-stock__currency {\n  color: var(--aparte-text-muted);\n  font-size: var(--aparte-font-size-sm);\n  font-weight: var(--aparte-font-weight-medium);\n}\n\n.aparte-stock__quote .aparte-stock__change {\n  align-self: center;\n  font-size: var(--aparte-font-size-md);\n}\n\n/* ── The chart ───────────────────────────────────────────────────────── */\n\n.aparte-stock__chart {\n  display: flex;\n  flex-direction: column;\n  gap: var(--aparte-space-3);\n}\n\n/* Time runs left to right (the element is `dir="ltr"`), so the spots laid over the\n   plot are placed from its left edge, which is its start. */\n.aparte-stock__plot {\n  position: relative;\n  block-size: var(--aparte-stock-chart-height);\n  border-radius: var(--aparte-radius-sm);\n  cursor: crosshair;\n  /* A finger sliding sideways explores the chart; up and down still scroll the chat. */\n  touch-action: pan-y;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.aparte-stock__plot:focus-visible {\n  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);\n  outline-offset: var(--aparte-focus-outline-offset);\n}\n\n.aparte-stock__svg {\n  position: absolute;\n  inset: 0;\n  display: block;\n  inline-size: 100%;\n  block-size: 100%;\n  overflow: visible;\n}\n\n.aparte-stock__stop--up { stop-color: var(--aparte-stock-up); }\n.aparte-stock__stop--down { stop-color: var(--aparte-stock-down); }\n\n.aparte-stock__line {\n  fill: none;\n  stroke-width: 2;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.aparte-stock__line--up { stroke: var(--aparte-stock-up); }\n.aparte-stock__line--down { stroke: var(--aparte-stock-down); }\n\n/* Everything laid over the plot is placed at `--aparte-stock-x/y`, in percent of it. */\n.aparte-stock__baseline,\n.aparte-stock__extreme,\n.aparte-stock__dot,\n.aparte-stock__cursor,\n.aparte-stock__cursor-dot {\n  position: absolute;\n  inset-inline-start: var(--aparte-stock-x, 0%);\n  inset-block-start: var(--aparte-stock-y, 0%);\n  pointer-events: none;\n}\n\n.aparte-stock__baseline {\n  inset-inline: 0;\n  border-block-start: 1px dashed color-mix(in oklab, var(--aparte-text) 32%, transparent);\n}\n\n.aparte-stock__extreme {\n  --aparte-stock-shift: -50%;\n  translate: var(--aparte-stock-shift) calc(-100% - var(--aparte-space-2));\n  color: var(--aparte-text-muted);\n  font-size: var(--aparte-font-size-2xs);\n  font-weight: var(--aparte-font-weight-medium);\n  line-height: 1;\n  white-space: nowrap;\n}\n\n.aparte-stock__extreme--lo { translate: var(--aparte-stock-shift) var(--aparte-space-2); }\n.aparte-stock__extreme[data-align="start"] { --aparte-stock-shift: 0%; }\n.aparte-stock__extreme[data-align="end"] { --aparte-stock-shift: -100%; }\n\n/* The last point: the line\'s colour on a ring of the card\'s surface. */\n.aparte-stock__dot,\n.aparte-stock__cursor-dot {\n  inline-size: 0.6rem;\n  block-size: 0.6rem;\n  translate: -50% -50%;\n  border: 2px solid var(--aparte-surface-1);\n  border-radius: var(--aparte-radius-full);\n  background: var(--aparte-stock-tone);\n  box-sizing: border-box;\n}\n\n/* Open market: the last point breathes. Under reduced motion the kit stops it. */\n.aparte-stock__dot[data-live]::after {\n  content: "";\n  position: absolute;\n  inset: -2px;\n  border-radius: inherit;\n  background: var(--aparte-stock-tone);\n  opacity: 0.45;\n  animation: aparte-stock-pulse 1.8s ease-out infinite;\n}\n\n@keyframes aparte-stock-pulse {\n  from { scale: 1; opacity: 0.45; }\n  to { scale: 3; opacity: 0; }\n}\n\n.aparte-stock__cursor {\n  inset-block: 0;\n  inline-size: 0;\n  translate: -50% 0;\n  border-inline-start: 1px solid color-mix(in oklab, var(--aparte-text) 45%, transparent);\n  visibility: hidden;\n}\n\n.aparte-stock__cursor-dot {\n  visibility: hidden;\n  background: var(--aparte-text);\n}\n\n.aparte-stock__chart[data-scrub] .aparte-stock__cursor,\n.aparte-stock__chart[data-scrub] .aparte-stock__cursor-dot { visibility: visible; }\n\n.aparte-stock__chart[data-scrub] .aparte-stock__dot { opacity: 0.35; }\n\n/* Under the plot: the range and the legend, or — while the chart is explored — the\n   value and time under the cursor, in the same place. */\n.aparte-stock__chart-foot {\n  display: grid;\n  min-block-size: 1.5rem;\n  font-size: var(--aparte-font-size-sm);\n}\n\n.aparte-stock__chart-foot > * { grid-area: 1 / 1; }\n\n.aparte-stock__chart-info {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--aparte-space-3);\n  color: var(--aparte-text-muted);\n}\n\n.aparte-stock__readout {\n  align-self: center;\n  font-weight: var(--aparte-font-weight-semibold);\n  white-space: nowrap;\n}\n\n.aparte-stock__chart[data-scrub] .aparte-stock__chart-info { visibility: hidden; }\n\n.aparte-stock__range {\n  padding: var(--aparte-space-1) var(--aparte-space-3);\n  border: var(--aparte-border-width) solid var(--aparte-border);\n  border-radius: var(--aparte-radius-full);\n  color: var(--aparte-text);\n  font-size: var(--aparte-font-size-xs);\n  font-weight: var(--aparte-font-weight-medium);\n}\n\n.aparte-stock__legend {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--aparte-space-2);\n  margin-inline-start: auto;\n}\n\n.aparte-stock__legend-line {\n  inline-size: 1rem;\n  border-block-start: 1px dashed color-mix(in oklab, var(--aparte-text) 45%, transparent);\n}\n\n.aparte-stock__change--range {\n  margin-inline-start: auto;\n  font-size: var(--aparte-font-size-xs);\n}\n\n/* ── The range buttons, across the top of the chart ──────────────────── */\n\n.aparte-stock__ranges .aparte-rich-card__segmented {\n  display: flex;\n  inline-size: 100%;\n  box-sizing: border-box;\n}\n\n.aparte-stock__ranges .aparte-rich-card__segment {\n  flex: 1 1 0;\n  min-inline-size: 0;\n  padding-inline: var(--aparte-space-1);\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n\n/* While the app answers a range, the chart it will replace steps back; the buttons stay\n   as they are, so another range can be chosen without waiting. */\n.aparte-stock__chart {\n  transition: opacity var(--aparte-duration-base) ease;\n}\n\n.aparte-stock-card[data-busy] .aparte-stock__chart { opacity: 0.45; }\n\n/* ── Candles: hollow when they rose, filled when they fell ───────────── */\n\n.aparte-stock__body,\n.aparte-stock__wick {\n  stroke-width: 1;\n  stroke-linejoin: miter;\n}\n\n.aparte-stock__body--up {\n  fill: none;\n  stroke: var(--aparte-stock-up);\n}\n\n.aparte-stock__body--down {\n  fill: var(--aparte-stock-down);\n  stroke: var(--aparte-stock-down);\n}\n\n.aparte-stock__body--flat {\n  fill: var(--aparte-stock-flat);\n  stroke: var(--aparte-stock-flat);\n}\n\n.aparte-stock__wick { fill: none; }\n.aparte-stock__wick--up { stroke: var(--aparte-stock-up); }\n.aparte-stock__wick--down { stroke: var(--aparte-stock-down); }\n.aparte-stock__wick--flat { stroke: var(--aparte-stock-flat); }\n\n/* The volume: faint, so it is read after the prices and never instead of them. */\n.aparte-stock__volume {\n  stroke: none;\n  opacity: 0.22;\n}\n\n.aparte-stock__volume--up { fill: var(--aparte-stock-up); }\n.aparte-stock__volume--down { fill: var(--aparte-stock-down); }\n.aparte-stock__volume--flat { fill: var(--aparte-stock-flat); }\n\n.aparte-stock__plot[data-kind="candles"] .aparte-stock__cursor-dot {\n  inline-size: 0.45rem;\n  block-size: 0.45rem;\n}\n\n/* ── The figures ─────────────────────────────────────────────────────── */\n\n.aparte-stock__stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(6.75rem, 1fr));\n  gap: var(--aparte-space-4) var(--aparte-space-5);\n  margin: 0;\n  padding-block-start: var(--aparte-space-5);\n  border-block-start: var(--aparte-border-width) solid var(--aparte-border);\n}\n\n.aparte-stock__stat {\n  display: flex;\n  flex-direction: column;\n  gap: var(--aparte-space-1);\n  min-inline-size: 0;\n}\n\n.aparte-stock__stat--wide { grid-column: 1 / -1; }\n\n.aparte-stock__stat-term {\n  color: var(--aparte-text-muted);\n  font-size: var(--aparte-font-size-xs);\n}\n\n.aparte-stock__stat-value {\n  margin: 0;\n  font-size: var(--aparte-font-size-md);\n  font-weight: var(--aparte-font-weight-medium);\n  overflow-wrap: anywhere;\n}\n\n/* The 52-week range: its two ends, the bar between, the price as a mark on it. */\n.aparte-stock__year {\n  display: flex;\n  align-items: center;\n  gap: var(--aparte-space-4);\n}\n\n.aparte-stock__year-bar {\n  position: relative;\n  flex: 1;\n  block-size: 0.3rem;\n  border-radius: var(--aparte-radius-full);\n  background: linear-gradient(\n    to var(--aparte-stock-year-toward, right),\n    color-mix(in oklab, var(--aparte-stock-down) 40%, var(--aparte-surface-2)),\n    var(--aparte-surface-2) 50%,\n    color-mix(in oklab, var(--aparte-stock-up) 40%, var(--aparte-surface-2))\n  );\n}\n\n.aparte-stock__year-bar:dir(rtl) { --aparte-stock-year-toward: left; }\n\n.aparte-stock__year-mark {\n  position: absolute;\n  inset-block-start: 50%;\n  inset-inline-start: var(--aparte-stock-position, 50%);\n  inline-size: 0.2rem;\n  block-size: 0.85rem;\n  translate: -50% -50%;\n  border-radius: var(--aparte-radius-full);\n  background: var(--aparte-text);\n  box-shadow: 0 0 0 2px var(--aparte-surface-1);\n}\n\n.aparte-stock__year-mark:dir(rtl) { translate: 50% -50%; }\n\n/* ── compact: a row per quote ────────────────────────────────────────── */\n\n.aparte-stock__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.aparte-stock__item + .aparte-stock__item {\n  border-block-start: var(--aparte-border-width) solid var(--aparte-border);\n}\n\n.aparte-stock--row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(3rem, 4.5rem) auto;\n  align-items: center;\n  gap: var(--aparte-space-5);\n  padding: var(--aparte-space-5) var(--aparte-rich-card-padding);\n  transition: background-color var(--aparte-duration-fast) ease;\n}\n\n.aparte-stock--row .aparte-stock__id {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0;\n}\n\n.aparte-stock--row .aparte-stock__name {\n  max-inline-size: 100%;\n  font-size: var(--aparte-font-size-sm);\n}\n\n.aparte-stock--row[data-linked]:hover { background: var(--aparte-surface-2); }\n\n/* The symbol\'s link covers the row or the tick: one link per quote, read once. */\n.aparte-stock__link--stretched { outline: none; }\n\n.aparte-stock__link--stretched::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n}\n\n.aparte-stock--row:has(.aparte-stock__link--stretched:focus-visible),\n.aparte-stock__tick:has(.aparte-stock__link--stretched:focus-visible) {\n  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);\n  outline-offset: calc(var(--aparte-focus-outline-width) * -1);\n}\n\n.aparte-stock__spark {\n  block-size: 2rem;\n  --aparte-rich-card-spark: var(--aparte-stock-tone);\n}\n\n.aparte-stock__spark-base {\n  stroke: color-mix(in oklab, var(--aparte-text) 28%, transparent);\n  stroke-width: 1;\n  stroke-dasharray: 2 3;\n}\n\n.aparte-stock__sparkline .aparte-rich-card__sparkline-line { stroke-width: 1.6; }\n\n.aparte-stock__figures {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: var(--aparte-space-2);\n}\n\n.aparte-stock__row-price {\n  font-weight: var(--aparte-font-weight-semibold);\n  white-space: nowrap;\n}\n\n.aparte-stock__figures .aparte-stock__change {\n  min-inline-size: 4.75rem;\n  justify-content: flex-end;\n}\n\n/* ── ticker: a strip of quotes ───────────────────────────────────────── */\n\n.aparte-stock-card[data-variant="ticker"] > .aparte-stock__heading {\n  padding-block-end: 0;\n}\n\n.aparte-stock__tape {\n  display: flex;\n  gap: var(--aparte-space-2);\n  margin: 0;\n  padding: var(--aparte-space-3);\n  list-style: none;\n  overflow-x: auto;\n  overscroll-behavior-x: contain;\n  scroll-snap-type: x proximity;\n  scroll-padding-inline: var(--aparte-space-3);\n  scrollbar-width: thin;\n  /* Both ends fade, so a strip that runs on says so — the same at the start and the end,\n     whichever way the page reads. */\n  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--aparte-space-4), #000 calc(100% - var(--aparte-space-4)), transparent);\n  mask-image: linear-gradient(to right, transparent, #000 var(--aparte-space-4), #000 calc(100% - var(--aparte-space-4)), transparent);\n}\n\n.aparte-stock__tape:focus-visible {\n  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);\n  outline-offset: calc(var(--aparte-focus-outline-width) * -1);\n  border-radius: inherit;\n}\n\n.aparte-stock__tick {\n  position: relative;\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--aparte-space-3);\n  padding: var(--aparte-space-3) var(--aparte-space-4);\n  border-radius: var(--aparte-radius-md);\n  font-size: var(--aparte-font-size-md);\n  white-space: nowrap;\n  scroll-snap-align: start;\n  transition: background-color var(--aparte-duration-fast) ease;\n}\n\n.aparte-stock__tick + .aparte-stock__tick::before {\n  content: "";\n  position: absolute;\n  inset-block: 25%;\n  inset-inline-start: calc(var(--aparte-space-1) * -1);\n  border-inline-start: var(--aparte-border-width) solid var(--aparte-border);\n}\n\n.aparte-stock__tick[data-linked]:hover { background: var(--aparte-surface-2); }\n\n.aparte-stock__tick-price { color: var(--aparte-text); }\n\n.aparte-stock__tick .aparte-stock__change {\n  padding: 0;\n  background: none;\n}\n\n/* ── Skeletons ───────────────────────────────────────────────────────── */\n\n.aparte-stock--skeleton { pointer-events: none; }\n.aparte-stock-card .aparte-stock__sk-symbol { inline-size: 3.5rem; }\n.aparte-stock-card .aparte-stock__sk-name { inline-size: 7rem; margin: 0; }\n.aparte-stock-card .aparte-stock__sk-price { inline-size: 8rem; block-size: 2rem; }\n.aparte-stock-card .aparte-stock__sk-pill { inline-size: 5rem; block-size: 1.25rem; margin: 0; border-radius: var(--aparte-radius-full); }\n.aparte-stock-card .aparte-stock__sk-chart { block-size: var(--aparte-stock-chart-height); }\n.aparte-stock-card .aparte-stock__sk-term { inline-size: 3.5rem; }\n.aparte-stock-card .aparte-stock__sk-figure { inline-size: 4.5rem; margin: 0; }\n.aparte-stock-card .aparte-stock__sk-spark { block-size: 1.5rem; }\n.aparte-stock--skeleton .aparte-stock__quote { align-items: center; }\n.aparte-stock__tick--skeleton { gap: var(--aparte-space-4); }\n\n/* ── Narrow: a phone\'s width ─────────────────────────────────────────── */\n\n@media (max-width: 380px) {\n  .aparte-stock-card {\n    --aparte-stock-chart-height: 7rem;\n    --aparte-stock-price-size: var(--aparte-font-size-2xl);\n  }\n\n  .aparte-stock--row {\n    grid-template-columns: minmax(0, 1fr) 2.75rem auto;\n    gap: var(--aparte-space-4);\n  }\n\n  .aparte-stock__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .aparte-stock__dot[data-live]::after { animation: none; opacity: 0; }\n}\n';
+const S = {
+  cardsStockTitle: { en: "Market quote", fr: "Cours de bourse", de: "Börsenkurs", es: "Cotización", it: "Quotazione", ja: "株価", ko: "시세", pt: "Cotação", ru: "Котировка", zh: "行情" },
+  cardsStockCount: { en: "{n} quotes", fr: "{n} cours", de: "{n} Kurse", es: "{n} cotizaciones", it: "{n} quotazioni", ja: "{n}件の銘柄", ko: "종목 {n}개", pt: "{n} cotações", ru: "Котировок: {n}", zh: "{n} 个行情" },
+  cardsStockMarketOpen: { en: "Market open", fr: "Marché ouvert", de: "Markt geöffnet", es: "Mercado abierto", it: "Mercato aperto", ja: "取引時間中", ko: "장 운영 중", pt: "Mercado aberto", ru: "Рынок открыт", zh: "交易中" },
+  cardsStockMarketClosed: { en: "Market closed", fr: "Marché fermé", de: "Markt geschlossen", es: "Mercado cerrado", it: "Mercato chiuso", ja: "取引終了", ko: "장 마감", pt: "Mercado fechado", ru: "Рынок закрыт", zh: "已收盘" },
+  cardsStockPreMarket: { en: "Pre-market", fr: "Pré-ouverture", de: "Vorbörslich", es: "Preapertura", it: "Pre-mercato", ja: "プレマーケット", ko: "장전 거래", pt: "Pré-mercado", ru: "Премаркет", zh: "盘前" },
+  cardsStockAfterHours: { en: "After hours", fr: "Après-clôture", de: "Nachbörslich", es: "Poscierre", it: "After hours", ja: "アフターマーケット", ko: "시간외 거래", pt: "After-market", ru: "Постмаркет", zh: "盘后" },
+  cardsStockAsOf: { en: "As of {time}", fr: "À {time}", de: "Stand: {time}", es: "A las {time}", it: "Alle {time}", ja: "{time}時点", ko: "{time} 기준", pt: "Às {time}", ru: "На {time}", zh: "截至 {time}" },
+  cardsStockOpen: { en: "Open", fr: "Ouverture", de: "Eröffnung", es: "Apertura", it: "Apertura", ja: "始値", ko: "시가", pt: "Abertura", ru: "Открытие", zh: "开盘" },
+  cardsStockHigh: { en: "High", fr: "Plus haut", de: "Hoch", es: "Máximo", it: "Massimo", ja: "高値", ko: "고가", pt: "Máxima", ru: "Максимум", zh: "最高" },
+  cardsStockLow: { en: "Low", fr: "Plus bas", de: "Tief", es: "Mínimo", it: "Minimo", ja: "安値", ko: "저가", pt: "Mínima", ru: "Минимум", zh: "最低" },
+  cardsStockPrevClose: { en: "Prev. close", fr: "Clôture veille", de: "Vortag", es: "Cierre anterior", it: "Chiusura prec.", ja: "前日終値", ko: "전일 종가", pt: "Fech. anterior", ru: "Пред. закрытие", zh: "昨收" },
+  cardsStockVolume: { en: "Volume", fr: "Volume", de: "Volumen", es: "Volumen", it: "Volume", ja: "出来高", ko: "거래량", pt: "Volume", ru: "Объём", zh: "成交量" },
+  cardsStockMarketCap: { en: "Market cap", fr: "Capitalisation", de: "Marktkap.", es: "Cap. bursátil", it: "Capitalizzazione", ja: "時価総額", ko: "시가총액", pt: "Valor de mercado", ru: "Капитализация", zh: "市值" },
+  cardsStockYearRange: { en: "52-week range", fr: "Sur 52 semaines", de: "52-Wochen-Spanne", es: "Rango de 52 semanas", it: "Intervallo 52 settimane", ja: "52週レンジ", ko: "52주 범위", pt: "Intervalo de 52 semanas", ru: "Диапазон за 52 недели", zh: "52周范围" },
+  cardsStockChart: {
+    en: "Price chart: low {low}, high {high}, last {last}",
+    fr: "Graphique du cours : plus bas {low}, plus haut {high}, dernier {last}",
+    de: "Kursverlauf: Tief {low}, Hoch {high}, zuletzt {last}",
+    es: "Gráfico de precio: mínimo {low}, máximo {high}, último {last}",
+    it: "Grafico del prezzo: minimo {low}, massimo {high}, ultimo {last}",
+    ja: "価格チャート：安値 {low}、高値 {high}、現在 {last}",
+    ko: "가격 차트: 저가 {low}, 고가 {high}, 현재 {last}",
+    pt: "Gráfico de preço: mínima {low}, máxima {high}, último {last}",
+    ru: "График цены: минимум {low}, максимум {high}, последняя {last}",
+    zh: "价格走势：最低 {low}，最高 {high}，最新 {last}"
+  },
+  cardsStockRange: { en: "Range", fr: "Période", de: "Zeitraum", es: "Periodo", it: "Periodo", ja: "期間", ko: "기간", pt: "Período", ru: "Период", zh: "时间范围" },
+  cardsStockOhlc: {
+    en: "O {open} H {high} L {low} C {close}",
+    fr: "O {open} H {high} B {low} C {close}",
+    de: "E {open} H {high} T {low} S {close}",
+    es: "A {open} Máx {high} Mín {low} C {close}",
+    it: "A {open} Max {high} Min {low} C {close}",
+    ja: "始 {open} 高 {high} 安 {low} 終 {close}",
+    ko: "시 {open} 고 {high} 저 {low} 종 {close}",
+    pt: "A {open} Máx {high} Mín {low} F {close}",
+    ru: "О {open} Макс {high} Мин {low} З {close}",
+    zh: "开 {open} 高 {high} 低 {low} 收 {close}"
+  },
+  cardsStockOhlcSaid: {
+    en: "Open {open}, high {high}, low {low}, close {close}",
+    fr: "Ouverture {open}, plus haut {high}, plus bas {low}, clôture {close}",
+    de: "Eröffnung {open}, Hoch {high}, Tief {low}, Schluss {close}",
+    es: "Apertura {open}, máximo {high}, mínimo {low}, cierre {close}",
+    it: "Apertura {open}, massimo {high}, minimo {low}, chiusura {close}",
+    ja: "始値 {open}、高値 {high}、安値 {low}、終値 {close}",
+    ko: "시가 {open}, 고가 {high}, 저가 {low}, 종가 {close}",
+    pt: "Abertura {open}, máxima {high}, mínima {low}, fechamento {close}",
+    ru: "Открытие {open}, максимум {high}, минимум {low}, закрытие {close}",
+    zh: "开盘 {open}，最高 {high}，最低 {low}，收盘 {close}"
+  },
+  cardsStockChartRange: {
+    en: "Price chart, {range}: low {low}, high {high}, last {last}",
+    fr: "Graphique du cours, {range} : plus bas {low}, plus haut {high}, dernier {last}",
+    de: "Kursverlauf, {range}: Tief {low}, Hoch {high}, zuletzt {last}",
+    es: "Gráfico de precio, {range}: mínimo {low}, máximo {high}, último {last}",
+    it: "Grafico del prezzo, {range}: minimo {low}, massimo {high}, ultimo {last}",
+    ja: "価格チャート（{range}）：安値 {low}、高値 {high}、現在 {last}",
+    ko: "가격 차트({range}): 저가 {low}, 고가 {high}, 현재 {last}",
+    pt: "Gráfico de preço, {range}: mínima {low}, máxima {high}, último {last}",
+    ru: "График цены, {range}: минимум {low}, максимум {high}, последняя {last}",
+    zh: "价格走势（{range}）：最低 {low}，最高 {high}，最新 {last}"
+  }
+};
+const MARKET_WORD = {
+  open: "cardsStockMarketOpen",
+  closed: "cardsStockMarketClosed",
+  pre: "cardsStockPreMarket",
+  post: "cardsStockAfterHours"
+};
+const QUOTES_SHOWN = 12;
+const isObject = (value) => !!value && typeof value === "object" && !Array.isArray(value);
+function pick(r, keys) {
+  if (!r) return void 0;
+  for (const key of keys) if (r[key] !== void 0 && r[key] !== null) return r[key];
+  return void 0;
+}
+function percentOf(value) {
+  return typeof value === "string" ? num(value.replace(/[%\s]/g, "")) : num(value);
+}
+function readTime(value) {
+  if (value === 0) return void 0;
+  if (typeof value === "string") {
+    const day = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value.trim());
+    if (day) return new Date(Number(day[1]), Number(day[2]) - 1, Number(day[3]));
+  }
+  return toDate(value) ?? void 0;
+}
+function readTimes(values) {
+  const ms = values.some((v) => typeof v === "number" && v >= 1e11);
+  return values.map((v) => readTime(ms && typeof v === "number" && v !== 0 ? new Date(v) : v));
+}
+function readMarketState(r) {
+  const value = pick(r, ["marketState", "market_state", "marketStatus", "market_status", "session"]);
+  if (typeof value === "string") {
+    const key = value.toLowerCase().replace(/[^a-z]/g, "");
+    if (["open", "regular", "trading", "live"].includes(key)) return "open";
+    if (["closed", "close", "prepre", "postpost"].includes(key)) return "closed";
+    if (key.startsWith("pre")) return "pre";
+    if (key.startsWith("post") || key.startsWith("after") || key === "extended") return "post";
+    return void 0;
+  }
+  const open = pick(r, ["isOpen", "is_open", "marketOpen", "market_open"]);
+  return typeof open === "boolean" ? open ? "open" : "closed" : void 0;
+}
+const VALUE_KEYS = ["value", "price", "close", "c", "y", "adjClose", "adj_close"];
+const TIME_KEYS = ["time", "t", "date", "timestamp", "datetime", "x"];
+function readSeries(value) {
+  if (!Array.isArray(value)) return [];
+  const points = [];
+  const times = readTimes(value.map((item) => Array.isArray(item) ? item[0] : isObject(item) ? pick(item, TIME_KEYS) : void 0));
+  value.forEach((item, i) => {
+    const v = num(Array.isArray(item) ? item[1] : isObject(item) ? pick(item, VALUE_KEYS) : item);
+    const time = times[i];
+    if (v !== void 0) points.push(time ? { value: v, time } : { value: v });
+  });
+  if (points.length > 1 && points.every((p) => p.time)) points.sort((a, b) => a.time.getTime() - b.time.getTime());
+  return points.slice(-2e3);
+}
+function readCandles(value) {
+  let list = value;
+  if (isObject(value)) {
+    const chart = isObject(value["chart"]) && Array.isArray(value["chart"]["result"]) ? value["chart"]["result"][0] : value;
+    const indicators = isObject(chart) && isObject(chart["indicators"]) && Array.isArray(chart["indicators"]["quote"]) ? chart["indicators"]["quote"][0] : void 0;
+    const times2 = isObject(chart) ? chart["timestamp"] : void 0;
+    if (!Array.isArray(times2) || !isObject(indicators)) return [];
+    const at = (key, i) => Array.isArray(indicators[key]) ? indicators[key][i] : void 0;
+    list = times2.map((t, i) => ({ t, o: at("open", i), h: at("high", i), l: at("low", i), c: at("close", i), v: at("volume", i) }));
+  }
+  if (!Array.isArray(list)) return [];
+  const rows = list.map((item) => Array.isArray(item) ? item : isObject(item) ? [pick(item, ["time", "t", "date", "timestamp", "openTime"]), pick(item, ["open", "o"]), pick(item, ["high", "h"]), pick(item, ["low", "l"]), pick(item, ["close", "c"]), pick(item, ["volume", "v"])] : []);
+  const times = readTimes(rows.map((row2) => row2[0]));
+  const candles = [];
+  rows.forEach(([, o, h, l, c, v], i) => {
+    const open = num(o);
+    const close = num(c);
+    let high = num(h);
+    let low = num(l);
+    if (open === void 0 || close === void 0 || high === void 0 || low === void 0) return;
+    if (high < low) [high, low] = [low, high];
+    const time = times[i];
+    const volume = num(v);
+    candles.push({
+      ...time ? { time } : {},
+      open,
+      high: Math.max(high, open, close),
+      low: Math.min(low, open, close),
+      close,
+      ...volume !== void 0 && volume >= 0 ? { volume } : {}
+    });
+  });
+  if (candles.length > 1 && candles.every((c) => c.time)) candles.sort((a, b) => a.time.getTime() - b.time.getTime());
+  return candles.slice(-2e3);
+}
+const ESTIMATED = Symbol("aparte-stock-estimated");
+const isEstimated = (quote) => quote[ESTIMATED] === true;
+function readQuote(raw) {
+  if (!isObject(raw)) return null;
+  const r = isObject(raw["meta"]) && isObject(raw["indicators"]) ? { ...raw["meta"], candles: raw } : raw;
+  const given = str(pick(r, ["symbol", "ticker", "01. symbol", "code"]));
+  if (!given) return null;
+  const symbol = /[A-Z]/.test(given) ? given : given.toUpperCase();
+  const sparkline7d = isObject(r["sparkline_in_7d"]) ? r["sparkline_in_7d"]["price"] : void 0;
+  const candles = readCandles(pick(r, ["candles", "ohlc", "klines", "bars"]) ?? (isObject(r["chart"]) ? r["chart"] : void 0));
+  let series = readSeries(pick(r, ["series", "prices", "history", "chart", "points", "sparkline"]) ?? sparkline7d);
+  if (!series.length && candles.length) series = candles.map((c) => c.time ? { value: c.close, time: c.time } : { value: c.close });
+  const price = num(pick(r, ["price", "regularMarketPrice", "05. price", "current_price", "lastPrice", "last", "c"])) ?? series[series.length - 1]?.value;
+  if (price === void 0) return null;
+  let change = num(pick(r, ["change", "regularMarketChange", "09. change", "price_change_24h", "d"]));
+  let changePercent = percentOf(pick(r, [
+    "changePercent",
+    "change_percent",
+    "percentChange",
+    "percent_change",
+    "changesPercentage",
+    "regularMarketChangePercent",
+    "10. change percent",
+    "price_change_percentage_24h",
+    "dp"
+  ]));
+  let previousClose = num(pick(r, ["previousClose", "previous_close", "prevClose", "regularMarketPreviousClose", "08. previous close", "pc"]));
+  if (previousClose === void 0 && str(r["range"])?.toLowerCase() === "1d") previousClose = num(r["chartPreviousClose"]);
+  if (price === 0 && !previousClose) return null;
+  if (previousClose === 0) previousClose = void 0;
+  let guessed = false;
+  if (change === void 0 && previousClose !== void 0) change = price - previousClose;
+  if (previousClose === void 0 && change !== void 0 && price - change !== 0) previousClose = price - change;
+  if (previousClose === void 0 && changePercent !== void 0 && changePercent !== -100) {
+    previousClose = price / (1 + changePercent / 100);
+    guessed = true;
+  }
+  if (changePercent === void 0 && change !== void 0 && previousClose) changePercent = change / previousClose * 100;
+  const range = str(pick(r, ["range", "period", "timeframe"])) ?? (sparkline7d && series.length ? "7D" : void 0);
+  const positive = (value) => {
+    const n = num(value);
+    return n !== void 0 && n >= 0 ? n : void 0;
+  };
+  const fields = {
+    name: str(pick(r, ["name", "shortName", "longName", "displayName", "companyName", "company_name"])),
+    exchange: str(pick(r, ["exchange", "fullExchangeName", "exchangeName", "exchange_name"])),
+    currency: currencyCode(pick(r, ["currency", "currency_code", "currencyCode", "financialCurrency"])),
+    change,
+    changePercent,
+    previousClose,
+    open: num(pick(r, ["open", "regularMarketOpen", "02. open", "o"])),
+    high: num(pick(r, ["high", "dayHigh", "regularMarketDayHigh", "03. high", "high_24h", "h"])),
+    low: num(pick(r, ["low", "dayLow", "regularMarketDayLow", "04. low", "low_24h", "l"])),
+    volume: positive(pick(r, ["volume", "regularMarketVolume", "06. volume", "total_volume"])),
+    marketCap: positive(pick(r, ["marketCap", "market_cap", "marketCapitalization", "MarketCapitalization"])),
+    yearHigh: num(pick(r, ["yearHigh", "fiftyTwoWeekHigh", "52WeekHigh", "week52High", "high52", "year_high"])),
+    yearLow: num(pick(r, ["yearLow", "fiftyTwoWeekLow", "52WeekLow", "week52Low", "low52", "year_low"])),
+    range,
+    ranges: Array.isArray(r["ranges"]) ? [...new Set(r["ranges"].map(str).filter((x) => x !== void 0))].slice(0, 8) : void 0,
+    marketState: readMarketState(r),
+    time: readTime(pick(r, ["time", "asOf", "as_of", "timestamp", "updatedAt", "updated_at", "lastUpdated", "last_updated", "regularMarketTime", "07. latest trading day", "t"])),
+    url: webUrl(pick(r, ["url", "link", "href"])) ?? void 0
+  };
+  const quote = { symbol, price, series, candles };
+  for (const [key, value] of Object.entries(fields)) {
+    if (value !== void 0 && !(Array.isArray(value) && value.length === 0)) quote[key] = value;
+  }
+  if (quote.yearHigh === void 0 || quote.yearLow === void 0 || quote.yearHigh <= quote.yearLow) {
+    delete quote.yearHigh;
+    delete quote.yearLow;
+  }
+  if (guessed || r[ESTIMATED] === true) quote[ESTIMATED] = true;
+  return quote;
+}
+function readQuotes(raw) {
+  if (!raw || typeof raw !== "object") return null;
+  let list;
+  let title;
+  if (Array.isArray(raw)) {
+    list = raw;
+  } else {
+    const r = raw;
+    const single = readQuote(r);
+    if (single) return { quotes: [single] };
+    const yahoo = isObject(r["quoteResponse"]) ? r["quoteResponse"]["result"] : void 0;
+    const yahooChart = isObject(r["chart"]) ? r["chart"]["result"] : void 0;
+    const many = [r["quotes"], r["results"], r["items"], r["watchlist"], r["data"], yahoo, yahooChart].find(Array.isArray);
+    if (many) {
+      list = many;
+      title = str(pick(r, ["title", "heading", "name"]));
+    } else {
+      list = [r["Global Quote"]];
+    }
+  }
+  const quotes = list.map(readQuote).filter((q) => q !== null).slice(0, QUOTES_SHOWN);
+  return quotes.length ? { ...title ? { title } : {}, quotes } : null;
+}
+function directionOf(quote) {
+  const moved = quote.change ?? quote.changePercent;
+  if (moved === void 0) return void 0;
+  return moved > 0 ? "up" : moved < 0 ? "down" : "flat";
+}
+function baselineOf(quote) {
+  const intraday = !quote.range || /^(1\s*d(ay)?|today|intraday)$/i.test(quote.range.trim());
+  if (intraday && quote.previousClose !== void 0) return { value: quote.previousClose, kind: "close" };
+  const first = quote.series[0];
+  return first ? { value: first.value, kind: "start" } : void 0;
+}
+const minorCache = /* @__PURE__ */ new Map();
+function minorDigits(currency) {
+  if (!currency) return 2;
+  let digits = minorCache.get(currency);
+  if (digits === void 0) {
+    try {
+      digits = new Intl.NumberFormat("en", { style: "currency", currency }).resolvedOptions().maximumFractionDigits ?? 2;
+    } catch {
+      digits = 2;
+    }
+    minorCache.set(currency, digits);
+  }
+  return digits;
+}
+function decimalsOf(n) {
+  const [mantissa, exponent] = String(Math.abs(n)).split("e");
+  const decimals = (mantissa.split(".")[1] ?? "").length;
+  return Math.max(0, decimals - Number(exponent ?? 0));
+}
+function digitsOf(quote) {
+  const base = minorDigits(quote.currency);
+  const abs = Math.abs(quote.price);
+  const given = decimalsOf(quote.price);
+  if (abs > 0 && abs < 1) return Math.min(Math.max(base, given), Math.floor(-Math.log10(abs)) + 4, 8);
+  if (abs >= 10) return Math.max(base, Math.min(given, 2));
+  if (given <= base) return base;
+  return Math.min(given, 4);
+}
+function plain(config, quote, value) {
+  const d = digitsOf(quote);
+  return formatNumber(config, value, { minimumFractionDigits: d, maximumFractionDigits: d });
+}
+function money(config, quote, value) {
+  if (!quote.currency) return plain(config, quote, value);
+  const d = digitsOf(quote);
+  try {
+    return formatNumber(config, value, { style: "currency", currency: quote.currency, currencyDisplay: "narrowSymbol", minimumFractionDigits: d, maximumFractionDigits: d });
+  } catch {
+    return `${plain(config, quote, value)} ${quote.currency}`;
+  }
+}
+function percentText(config, percent) {
+  return formatNumber(config, percent / 100, { style: "percent", minimumFractionDigits: 2, maximumFractionDigits: 2, signDisplay: "exceptZero" });
+}
+function changeText(config, quote, short) {
+  const absolute = quote.change !== void 0 ? formatNumber(config, quote.change, { minimumFractionDigits: digitsOf(quote), maximumFractionDigits: digitsOf(quote), signDisplay: "exceptZero" }) : void 0;
+  const percent = quote.changePercent !== void 0 ? percentText(config, quote.changePercent) : void 0;
+  if (short) return percent ?? absolute;
+  return absolute && percent ? `${absolute} (${percent})` : absolute ?? percent;
+}
+function compact(config, value, currency) {
+  const options = { notation: "compact", maximumFractionDigits: 2 };
+  if (currency) {
+    try {
+      return formatNumber(config, value, { ...options, style: "currency", currency, currencyDisplay: "narrowSymbol" });
+    } catch {
+    }
+  }
+  return formatNumber(config, value, options);
+}
+const UNITS = { d: "day", w: "week", m: "month", y: "year" };
+function rangeText(config, range) {
+  const match = /^(\d+)\s*(d|days?|w|wks?|weeks?|m|mo|mos|mons?|months?|y|yrs?|years?)$/i.exec(range.trim());
+  if (!match) return range;
+  try {
+    return formatNumber(config, Number(match[1]), { style: "unit", unit: UNITS[match[2].charAt(0).toLowerCase()], unitDisplay: "long" });
+  } catch {
+    return range;
+  }
+}
+function rangeShort(config, range) {
+  const match = /^(\d+)\s*(d|days?|w|wks?|weeks?|m|mo|mos|mons?|months?|y|yrs?|years?)$/i.exec(range.trim());
+  if (!match) return range;
+  let text;
+  try {
+    text = formatNumber(config, Number(match[1]), { style: "unit", unit: UNITS[match[2].charAt(0).toLowerCase()], unitDisplay: "narrow" }).replace(/\.$/, "");
+  } catch {
+    return range;
+  }
+  return /^\d+\s?\p{L}{1,2}$/u.test(text) ? text.replace(/\s/g, "").toLocaleUpperCase(intlTag(config)) : text;
+}
+function whenText(config, date, now = /* @__PURE__ */ new Date()) {
+  const tag = intlTag(config);
+  const dayOnly = !date.getHours() && !date.getMinutes() && !date.getSeconds();
+  const sameYear = date.getFullYear() === now.getFullYear();
+  if (dayOnly) return new Intl.DateTimeFormat(tag, { month: "short", day: "numeric", year: sameYear ? void 0 : "numeric" }).format(date);
+  if (date.toDateString() === now.toDateString()) return formatHour(config, date);
+  return new Intl.DateTimeFormat(tag, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }).format(date);
+}
+function pointTime(config, date, span) {
+  const tag = intlTag(config);
+  if (span <= 36 * 36e5) return formatHour(config, date);
+  if (span <= 8 * 864e5) return formatWhen(config, date);
+  if (span <= 400 * 864e5) return new Intl.DateTimeFormat(tag, { month: "short", day: "numeric" }).format(date);
+  return new Intl.DateTimeFormat(tag, { month: "short", year: "numeric" }).format(date);
+}
+const notNull = (value) => value !== null && value !== void 0 && value !== false;
+function symbolOf(quote, stretched = false) {
+  if (!quote.url) return el("span", { class: "aparte-stock__symbol", text: quote.symbol });
+  return el("a", {
+    class: `aparte-stock__symbol aparte-stock__link${stretched ? " aparte-stock__link--stretched" : ""}`,
+    attrs: { href: quote.url, target: "_blank", rel: "noopener noreferrer" },
+    text: quote.symbol
+  });
+}
+function changePill(ctx, quote, short = false) {
+  const direction = directionOf(quote);
+  if (!direction) return null;
+  const pill = el("span", { class: "aparte-stock__change", attrs: { "data-direction": direction } });
+  if (direction !== "flat") pill.append(glyph(direction === "up" ? UP : DOWN, "aparte-rich-card__glyph aparte-stock__arrow"));
+  const text = el("span", { class: "aparte-stock__change-text" });
+  ctx.bind(text, () => changeText(ctx.config, quote, short));
+  pill.append(text);
+  return pill;
+}
+function marketOf(ctx, quote) {
+  if (!quote.marketState) return null;
+  const text = el("span", { class: "aparte-stock__market-text" });
+  ctx.word(text, MARKET_WORD[quote.marketState], S[MARKET_WORD[quote.marketState]]);
+  return el(
+    "span",
+    { class: "aparte-stock__market", attrs: { "data-market": quote.marketState } },
+    el("span", { class: "aparte-stock__market-dot", attrs: { "aria-hidden": "true" } }),
+    text
+  );
+}
+function asOf(ctx, quote) {
+  if (!quote.time) return null;
+  const time = quote.time;
+  const node = el("time", { class: "aparte-stock__time", attrs: { datetime: time.toISOString() } });
+  ctx.bind(node, () => word(ctx.config, "cardsStockAsOf", S.cardsStockAsOf, { time: whenText(ctx.config, time) }));
+  return node;
+}
+function head(ctx, quote) {
+  const meta = [
+    quote.exchange ? el("span", { class: "aparte-stock__exchange", text: quote.exchange }) : null,
+    marketOf(ctx, quote),
+    asOf(ctx, quote)
+  ].filter(notNull);
+  return el(
+    "div",
+    { class: "aparte-stock__head" },
+    el(
+      "div",
+      { class: "aparte-stock__id" },
+      symbolOf(quote),
+      quote.name ? el("span", { class: "aparte-stock__name", text: quote.name }) : null
+    ),
+    meta.length ? el("div", { class: "aparte-stock__meta" }, ...meta) : null
+  );
+}
+function chartLabel(ctx, quote, low, high, last) {
+  const vars = {
+    low: plain(ctx.config, quote, low),
+    high: plain(ctx.config, quote, high),
+    last: plain(ctx.config, quote, last),
+    range: quote.range ? rangeText(ctx.config, quote.range) : ""
+  };
+  return quote.range ? word(ctx.config, "cardsStockChartRange", S.cardsStockChartRange, vars) : word(ctx.config, "cardsStockChart", S.cardsStockChart, vars);
+}
+function spanOf(times) {
+  const known = times.filter(notNull);
+  return known.length > 1 ? known[known.length - 1].getTime() - known[0].getTime() : 0;
+}
+function rangeChip(ctx, quote) {
+  if (!quote.range || ctx.live && quote.ranges?.length) return null;
+  const range = el("span", { class: "aparte-stock__range" });
+  const value = quote.range;
+  ctx.bind(range, () => rangeText(ctx.config, value));
+  return range;
+}
+function candlesOf(ctx, quote) {
+  const { candles } = quote;
+  const value = (v) => plain(ctx.config, quote, v);
+  const span = spanOf(candles.map((c) => c.time));
+  const low = Math.min(...candles.map((c) => c.low));
+  const high = Math.max(...candles.map((c) => c.high));
+  return candleChart(ctx, {
+    candles,
+    value,
+    time: (d) => pointTime(ctx.config, d, span),
+    ohlc: (c) => {
+      const vars = { open: value(c.open), high: value(c.high), low: value(c.low), close: value(c.close) };
+      return { shown: word(ctx.config, "cardsStockOhlc", S.cardsStockOhlc, vars), spoken: word(ctx.config, "cardsStockOhlcSaid", S.cardsStockOhlcSaid, vars) };
+    },
+    label: () => chartLabel(ctx, quote, low, high, candles[candles.length - 1].close),
+    info: [rangeChip(ctx, quote)].filter(notNull)
+  });
+}
+function chartOf(ctx, quote) {
+  if (ctx.variant === "candles" && quote.candles.length) return candlesOf(ctx, quote);
+  const base = baselineOf(quote);
+  if (!base || quote.series.length < 2) return null;
+  const info = [];
+  const chip = rangeChip(ctx, quote);
+  if (chip) info.push(chip);
+  if (base.kind === "close") {
+    const text = el("span", { class: "aparte-stock__legend-text" });
+    ctx.bind(text, () => `${word(ctx.config, "cardsStockPrevClose", S.cardsStockPrevClose)} ${plain(ctx.config, quote, base.value)}`);
+    info.push(el("span", { class: "aparte-stock__legend" }, el("span", { class: "aparte-stock__legend-line", attrs: { "aria-hidden": "true" } }), text));
+  } else if (base.value !== 0) {
+    const last = quote.series[quote.series.length - 1].value;
+    const moved = (last - base.value) / Math.abs(base.value) * 100;
+    const over = changePill(ctx, { ...quote, change: void 0, changePercent: moved }, true);
+    if (over) {
+      over.classList.add("aparte-stock__change--range");
+      info.push(over);
+    }
+  }
+  const span = spanOf(quote.series.map((p) => p.time));
+  const values = quote.series.map((p) => p.value);
+  return priceChart(ctx, {
+    points: quote.series,
+    baseline: base.value,
+    value: (v) => plain(ctx.config, quote, v),
+    time: (d) => pointTime(ctx.config, d, span),
+    label: () => chartLabel(ctx, quote, Math.min(...values), Math.max(...values), values[values.length - 1]),
+    live: quote.marketState === "open",
+    info
+  });
+}
+function stats(ctx, quote) {
+  const list = el("dl", { class: "aparte-stock__stats" });
+  const stat = (key, compute, extra) => {
+    const term = el("dt", { class: "aparte-stock__stat-term" });
+    ctx.word(term, key, S[key]);
+    const value = el("dd", { class: "aparte-stock__stat-value" });
+    if (extra) value.append(extra);
+    else ctx.bind(value, compute);
+    list.append(el("div", { class: `aparte-stock__stat${extra ? " aparte-stock__stat--wide" : ""}` }, term, value));
+  };
+  const figure = (value) => value === void 0 ? void 0 : () => plain(ctx.config, quote, value);
+  const rows = [
+    ["cardsStockOpen", figure(quote.open)],
+    ["cardsStockHigh", figure(quote.high)],
+    ["cardsStockLow", figure(quote.low)],
+    ["cardsStockPrevClose", isEstimated(quote) ? void 0 : figure(quote.previousClose)],
+    ["cardsStockVolume", quote.volume === void 0 ? void 0 : () => compact(ctx.config, quote.volume)],
+    ["cardsStockMarketCap", quote.marketCap === void 0 ? void 0 : () => compact(ctx.config, quote.marketCap, quote.currency)]
+  ];
+  for (const [key, compute] of rows) if (compute) stat(key, compute);
+  if (quote.yearLow !== void 0 && quote.yearHigh !== void 0) {
+    const { yearLow: low, yearHigh: high } = quote;
+    const position = Math.max(0, Math.min(1, (quote.price - low) / (high - low)));
+    const bar = el(
+      "span",
+      { class: "aparte-stock__year-bar", attrs: { "aria-hidden": "true" } },
+      el("span", { class: "aparte-stock__year-mark" })
+    );
+    bar.style.setProperty("--aparte-stock-position", `${(position * 100).toFixed(1)}%`);
+    const lowText = el("span", { class: "aparte-stock__year-low" });
+    ctx.bind(lowText, () => plain(ctx.config, quote, low));
+    const highText = el("span", { class: "aparte-stock__year-high" });
+    ctx.bind(highText, () => plain(ctx.config, quote, high));
+    stat("cardsStockYearRange", () => "", el("span", { class: "aparte-stock__year" }, lowText, bar, highText));
+  }
+  return list.childNodes.length ? list : null;
+}
+function rangesOf(ctx, quote) {
+  const ranges = quote.ranges ?? [];
+  const pressed = ranges.find((r) => r.toLowerCase() === quote.range?.toLowerCase()) ?? quote.range;
+  const group = segmented(ctx, {
+    name: "range",
+    value: pressed,
+    options: ranges.map((r) => ({ value: r, label: () => rangeShort(ctx.config, r) })),
+    label: () => word(ctx.config, "cardsStockRange", S.cardsStockRange)
+  });
+  if (!group) return null;
+  group.querySelectorAll("button").forEach((button, i) => ctx.bind(button, () => rangeText(ctx.config, ranges[i]), "aria-label"));
+  return el("div", { class: "aparte-stock__ranges" }, group);
+}
+function chartCard(ctx, quote) {
+  const price = el("span", { class: "aparte-stock__price" });
+  ctx.bind(price, () => plain(ctx.config, quote, quote.price));
+  const amount = el(
+    "span",
+    { class: "aparte-stock__amount" },
+    price,
+    quote.currency ? el("span", { class: "aparte-stock__currency", text: quote.currency }) : null
+  );
+  return el(
+    "div",
+    { class: "aparte-stock aparte-stock--chart", attrs: { "data-direction": directionOf(quote) } },
+    head(ctx, quote),
+    el("div", { class: "aparte-stock__quote" }, amount, changePill(ctx, quote)),
+    rangesOf(ctx, quote),
+    chartOf(ctx, quote),
+    stats(ctx, quote)
+  );
+}
+function sparkOf(quote) {
+  const base = baselineOf(quote);
+  if (!base || quote.series.length < 2) return null;
+  const values = thin(quote.series, 64).map((p) => p.value);
+  const lo = Math.min(...values, base.value);
+  const hi = Math.max(...values, base.value);
+  const pad = 0.12;
+  const svg = sparkline(values, { className: "aparte-stock__sparkline", range: [lo, hi], pad });
+  const y = hi === lo ? 20 : 40 - (pad * 40 + (base.value - lo) / (hi - lo) * (40 - 2 * pad * 40));
+  const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+  for (const [name, value] of Object.entries({ x1: 0, x2: 100, y1: y.toFixed(2), y2: y.toFixed(2), "vector-effect": "non-scaling-stroke" })) line.setAttribute(name, String(value));
+  line.setAttribute("class", "aparte-stock__spark-base");
+  svg.prepend(line);
+  return svg;
+}
+function row(ctx, quote) {
+  const price = el("span", { class: "aparte-stock__row-price" });
+  ctx.bind(price, () => money(ctx.config, quote, quote.price));
+  const spark = sparkOf(quote);
+  return el(
+    "div",
+    { class: "aparte-stock aparte-stock--row", attrs: { "data-direction": directionOf(quote), "data-linked": quote.url !== void 0 } },
+    el(
+      "div",
+      { class: "aparte-stock__id" },
+      symbolOf(quote, true),
+      quote.name ? el("span", { class: "aparte-stock__name", text: quote.name }) : null
+    ),
+    el("div", { class: "aparte-stock__spark", attrs: { "data-empty": !spark } }, spark),
+    el("div", { class: "aparte-stock__figures" }, price, changePill(ctx, quote, true))
+  );
+}
+function ticker(ctx, data) {
+  const tape = el("ul", { class: "aparte-stock__tape", attrs: { role: "list", tabindex: 0 } });
+  ctx.bind(tape, () => labelOf(data, ctx), "aria-label");
+  for (const quote of data.quotes) {
+    const price = el("span", { class: "aparte-stock__tick-price" });
+    ctx.bind(price, () => money(ctx.config, quote, quote.price));
+    tape.append(el(
+      "li",
+      { class: "aparte-stock__tick", attrs: { "data-direction": directionOf(quote), "data-linked": quote.url !== void 0 } },
+      symbolOf(quote, true),
+      price,
+      changePill(ctx, quote, true)
+    ));
+  }
+  return el("div", { class: "aparte-stock__ticker" }, tape);
+}
+function heading(data) {
+  return data.title ? el("div", { class: "aparte-stock__heading", text: data.title }) : null;
+}
+function labelOf(data, ctx) {
+  const quotes = data?.quotes ?? [];
+  if (quotes.length === 1) return quotes[0].name ? `${quotes[0].symbol} ${quotes[0].name}` : quotes[0].symbol;
+  if (data?.title) return data.title;
+  if (quotes.length > 1) return word(ctx.config, "cardsStockCount", S.cardsStockCount, { n: formatNumber(ctx.config, quotes.length) });
+  return word(ctx.config, "cardsStockTitle", S.cardsStockTitle);
+}
+function render(data, ctx) {
+  const { quotes } = data;
+  if (ctx.variant === "ticker") return [heading(data), ticker(ctx, data)].filter(notNull);
+  if (quotes.length === 1) return [ctx.variant === "compact" ? row(ctx, quotes[0]) : chartCard(ctx, quotes[0])];
+  const list = el(
+    "ul",
+    { class: "aparte-stock__list", attrs: { role: "list" } },
+    ...quotes.map((q) => el("li", { class: "aparte-stock__item" }, row(ctx, q)))
+  );
+  return [heading(data), list].filter(notNull);
+}
+function skeleton(partial, ctx) {
+  const block = (cls, kind = "text") => el("span", { class: `aparte-skeleton aparte-skeleton--${kind} ${cls}`, attrs: { "aria-hidden": "true" } });
+  const symbols = partial?.title ? partial.title.split(/,\s*/).filter(Boolean) : [];
+  const symbol = (text) => text ? el("span", { class: "aparte-stock__symbol", text }) : block("aparte-stock__sk-symbol");
+  if (ctx.variant === "ticker") {
+    const ticks = Array.from({ length: Math.max(4, symbols.length) }, (_, i) => el("li", { class: "aparte-stock__tick aparte-stock__tick--skeleton" }, symbol(symbols[i]), block("aparte-stock__sk-figure")));
+    return [el("div", { class: "aparte-stock__ticker" }, el("ul", { class: "aparte-stock__tape", attrs: { role: "list" } }, ...ticks))];
+  }
+  if (ctx.variant === "compact" || symbols.length > 1) {
+    const rows = Array.from({ length: Math.max(3, Math.min(symbols.length, QUOTES_SHOWN)) }, (_, i) => el(
+      "li",
+      { class: "aparte-stock__item" },
+      el(
+        "div",
+        { class: "aparte-stock aparte-stock--row aparte-stock--skeleton" },
+        el("div", { class: "aparte-stock__id" }, symbol(symbols[i]), block("aparte-stock__sk-name")),
+        block("aparte-stock__spark aparte-stock__sk-spark", "rect"),
+        el("div", { class: "aparte-stock__figures" }, block("aparte-stock__sk-figure"), block("aparte-stock__sk-pill"))
+      )
+    ));
+    return [el("ul", { class: "aparte-stock__list", attrs: { role: "list" } }, ...rows)];
+  }
+  return [el(
+    "div",
+    { class: "aparte-stock aparte-stock--chart aparte-stock--skeleton" },
+    el("div", { class: "aparte-stock__head" }, el("div", { class: "aparte-stock__id" }, symbol(symbols[0]), block("aparte-stock__sk-name"))),
+    el("div", { class: "aparte-stock__quote" }, block("aparte-stock__sk-price"), block("aparte-stock__sk-pill")),
+    block("aparte-stock__sk-chart", "rect"),
+    el("div", { class: "aparte-stock__stats" }, ...Array.from({ length: 6 }, () => el("div", { class: "aparte-stock__stat" }, block("aparte-stock__sk-term"), block("aparte-stock__sk-figure"))))
+  )];
+}
+const stockCard = defineCard({
+  name: "stock",
+  variants: ["chart", "compact", "ticker", "candles"],
+  styles: stockStyles,
+  icon: CHART,
+  normalize: readQuotes,
+  render,
+  skeleton,
+  label: labelOf,
+  fallback: (data, ctx) => {
+    const lines = data.quotes.map((q) => {
+      const price = `${plain(ctx.config, q, q.price)}${q.currency ? ` ${q.currency}` : ""}`;
+      return directionOf(q) ? `${q.symbol} ${price}, ${changeText(ctx.config, q, false)}` : `${q.symbol} ${price}`;
+    });
+    return [data.quotes.length > 1 ? data.title : void 0, ...lines].filter(notNull).join("\n");
+  },
+  partial: (input) => {
+    const raw = input["symbols"] ?? input["tickers"] ?? input["symbol"] ?? input["ticker"] ?? input["pair"];
+    const list = (Array.isArray(raw) ? raw : typeof raw === "string" ? raw.split(",") : []).map((s) => str(s)).filter((s) => s !== void 0).map((s) => /[A-Z]/.test(s) ? s : s.toUpperCase());
+    return list.length ? { title: list.slice(0, QUOTES_SHOWN).join(", ") } : null;
+  }
+});
+function setupStockCard(options = {}) {
+  return stockCard.setup(options);
+}
+export {
+  baselineOf,
+  digitsOf,
+  directionOf,
+  readQuotes,
+  setupStockCard,
+  stockCard
+};
+//# sourceMappingURL=stock.js.map