@50arms/ui 0.0.0-stage → 35.2.0

package/dist/components/card-face/vocabulary.js

@@ -0,0 +1,102 @@
+const e = {
+  /* A priority tier: a longer arrow outranks a chevron in each direction, `minus` is the level middle, and `critical` is its own mark. */
+  "priority.lowest": "arrow-down",
+  "priority.low": "chevron-down",
+  "priority.medium": "minus",
+  "priority.high": "chevron-up",
+  "priority.very_high": "arrow-up",
+  "priority.critical": "flame",
+  /* The indicators a card face can carry. */
+  "indicator.needsHuman": "hand",
+  "indicator.snoozed": "alarm-clock",
+  "indicator.effort": "cpu",
+  "indicator.planGates": "clipboard-check",
+  "indicator.codeGates": "file-code",
+  "indicator.acceptanceCriteria": "list-checks",
+  "indicator.comments": "message-square",
+  "indicator.parent": "corner-left-up",
+  "indicator.children": "git-branch",
+  "indicator.retro": "scroll-text",
+  "indicator.gateReviewer": "search-check",
+  /* DX-4559: a card whose work is open as a pull request. */
+  "indicator.pullRequest": "git-pull-request-arrow",
+  /* An outcome: a gate's verdict, a criterion's state. */
+  "outcome.passed": "circle-check",
+  "outcome.failed": "circle-x",
+  "outcome.pending": "circle-dashed",
+  "outcome.skipped": "skip-forward",
+  "outcome.deferred": "clock",
+  "outcome.withdrawn": "circle-minus",
+  /* DX-5428: the marks a candidate solution (SolutionChoice) draws - its recommendation badge and its choose / note / reject buttons. */
+  "solution.recommended": "star",
+  "action.confirm": "check",
+  "action.edit": "pencil",
+  "action.dismiss": "x"
+}, c = ["lowest", "low", "medium", "high", "very_high", "critical"], d = {
+  lowest: { icon: e["priority.lowest"], colorClass: "text-tertiary" },
+  low: { icon: e["priority.low"], colorClass: "text-success-text" },
+  medium: { icon: e["priority.medium"], colorClass: "text-warning-text" },
+  high: { icon: e["priority.high"], colorClass: "text-warning" },
+  very_high: { icon: e["priority.very_high"], colorClass: "text-danger-text" },
+  critical: { icon: e["priority.critical"], colorClass: "text-danger" }
+}, l = ["pass", "fail", "pending", "skipped"], s = {
+  pass: { tone: "success", icon: e["outcome.passed"] },
+  fail: { tone: "danger", icon: e["outcome.failed"] },
+  pending: { tone: "neutral", icon: e["outcome.pending"] },
+  skipped: { tone: "info", icon: e["outcome.skipped"] }
+}, g = ["failing", "incomplete", "passing", "deferred", "cancelled"], v = {
+  failing: { tone: "danger", icon: e["outcome.failed"] },
+  incomplete: { tone: "neutral", icon: e["outcome.pending"] },
+  passing: { tone: "success", icon: e["outcome.passed"] },
+  deferred: { tone: "info", icon: e["outcome.deferred"] },
+  cancelled: { tone: "info", icon: e["outcome.withdrawn"] }
+}, u = ["min", "very_low", "low", "medium", "high", "very_high", "max"], a = {
+  min: "muted",
+  very_low: "info",
+  low: "accent",
+  medium: "success",
+  high: "warning",
+  very_high: "orange",
+  max: "danger"
+};
+function m(t) {
+  const r = a[t];
+  return { background: `var(--${r}-subtle)`, borderColor: `var(--${r}-border)`, color: `var(--${r}-text)` };
+}
+const o = {
+  iris: { fill: "bg-[var(--event-iris-fill)]", edge: "border-[var(--event-iris-edge)]", text: "text-[var(--event-iris-edge)]", badgeText: "text-[var(--event-iris-edge)]" },
+  aqua: { fill: "bg-[var(--event-aqua-fill)]", edge: "border-[var(--event-aqua-edge)]", text: "text-[var(--event-aqua-edge)]", badgeText: "text-[var(--event-aqua-edge)]" },
+  mint: { fill: "bg-[var(--event-mint-fill)]", edge: "border-[var(--event-mint-edge)]", text: "text-[var(--event-mint-edge)]", badgeText: "text-[var(--event-mint-edge)]" },
+  amber: { fill: "bg-[var(--event-amber-fill)]", edge: "border-[var(--event-amber-edge)]", text: "text-[var(--event-amber-edge)]", badgeText: "text-[var(--event-amber-edge)]" },
+  rose: { fill: "bg-[var(--event-rose-fill)]", edge: "border-[var(--event-rose-edge)]", text: "text-[var(--event-rose-edge)]", badgeText: "text-[var(--event-rose-edge)]" },
+  azure: { fill: "bg-[var(--event-azure-fill)]", edge: "border-[var(--event-azure-edge)]", text: "text-[var(--event-azure-edge)]", badgeText: "text-[var(--event-azure-edge)]" },
+  orchid: { fill: "bg-[var(--event-orchid-fill)]", edge: "border-[var(--event-orchid-edge)]", text: "text-[var(--event-orchid-edge)]", badgeText: "text-[var(--event-orchid-edge)]" },
+  /* DX-5428: only slate's BADGE text is lifted so far, to its -text token: the dark edge (slate-400) on the dark fill measured 4.44:1, under 4.5:1. The other hues' badge text pairs are not yet held to 4.5:1. `text` (a standalone icon) stays the edge for every hue. */
+  slate: { fill: "bg-[var(--event-slate-fill)]", edge: "border-[var(--event-slate-edge)]", text: "text-[var(--event-slate-edge)]", badgeText: "text-[var(--event-slate-text)]" }
+};
+function x(t) {
+  const { fill: r, edge: i, badgeText: n } = o[t];
+  return `${r} ${i} ${n}`;
+}
+function p(t) {
+  const { fill: r, edge: i } = o[t];
+  return `${r} ${i}`;
+}
+function f(t) {
+  return o[t].text;
+}
+export {
+  e as CARD_FACE_ICONS,
+  g as CRITERION_STATES,
+  v as CRITERION_STATE_VISUALS,
+  u as EFFORT_RUNGS,
+  l as GATE_VERDICTS,
+  s as GATE_VERDICT_VISUALS,
+  c as PRIORITY_TIERS,
+  d as PRIORITY_TIER_VISUALS,
+  m as effortColors,
+  x as paletteBadgeClassName,
+  p as paletteBoxClassName,
+  f as paletteTextClassName
+};
+//# sourceMappingURL=vocabulary.js.map

package/dist/components/card-face/vocabulary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vocabulary.js","sources":["../../../src/components/card-face/vocabulary.ts"],"sourcesContent":["import type { CoreIconName } from \"../../icons/data\";\nimport type { PaletteKey } from \"../../lib/calendar/types\";\nimport type { BADGE_TONE_TEXT } from \"../Badge\";\nimport type { ProgressTone } from \"../Progress\";\n\n/* ============================================================================\n   WHAT A CARD FACE DRAWS EACH FACT WITH (DX-5425) — the visuals, never the words.\n   ----------------------------------------------------------------------------\n   A card face shows a card's priority, quality gates, acceptance criteria,\n   effort and type as glyphs. Which icon and which colour each one wears is\n   decided HERE, once, so every app and site that draws a face (the danxbot\n   app's boards, the 50arms.ai homepage) draws the same thing for the same\n   fact. The words (a status's name, a tooltip sentence) are the caller's: it\n   resolves them in its own language and passes them in.\n\n   KEYS ARE MEANINGS, NEVER ICON NAMES (`CARD_FACE_ICONS`): \"a gate passed\"\n   and \"a criterion is passing\" are one meaning, so they share one key and one\n   glyph; an app that keeps a wider meaning-to-icon map spreads this one into\n   it, so the two can never draw one meaning two ways.\n   ========================================================================= */\n\n/** The icon of every meaning a card face draws. */\nexport const CARD_FACE_ICONS = {\n  /* A priority tier: a longer arrow outranks a chevron in each direction, `minus` is the level middle, and `critical` is its own mark. */\n  \"priority.lowest\": \"arrow-down\",\n  \"priority.low\": \"chevron-down\",\n  \"priority.medium\": \"minus\",\n  \"priority.high\": \"chevron-up\",\n  \"priority.very_high\": \"arrow-up\",\n  \"priority.critical\": \"flame\",\n\n  /* The indicators a card face can carry. */\n  \"indicator.needsHuman\": \"hand\",\n  \"indicator.snoozed\": \"alarm-clock\",\n  \"indicator.effort\": \"cpu\",\n  \"indicator.planGates\": \"clipboard-check\",\n  \"indicator.codeGates\": \"file-code\",\n  \"indicator.acceptanceCriteria\": \"list-checks\",\n  \"indicator.comments\": \"message-square\",\n  \"indicator.parent\": \"corner-left-up\",\n  \"indicator.children\": \"git-branch\",\n  \"indicator.retro\": \"scroll-text\",\n  \"indicator.gateReviewer\": \"search-check\",\n  /* DX-4559: a card whose work is open as a pull request. */\n  \"indicator.pullRequest\": \"git-pull-request-arrow\",\n\n  /* An outcome: a gate's verdict, a criterion's state. */\n  \"outcome.passed\": \"circle-check\",\n  \"outcome.failed\": \"circle-x\",\n  \"outcome.pending\": \"circle-dashed\",\n  \"outcome.skipped\": \"skip-forward\",\n  \"outcome.deferred\": \"clock\",\n  \"outcome.withdrawn\": \"circle-minus\",\n\n  /* DX-5428: the marks a candidate solution (SolutionChoice) draws - its recommendation badge and its choose / note / reject buttons. */\n  \"solution.recommended\": \"star\",\n  \"action.confirm\": \"check\",\n  \"action.edit\": \"pencil\",\n  \"action.dismiss\": \"x\",\n} as const satisfies Record<string, CoreIconName>;\n\n/** A tone a card-face mark is coloured by: the library's badge tones. */\nexport type CardFaceTone = keyof typeof BADGE_TONE_TEXT;\n\n/** A priority tier, lowest to highest. */\n// I18N-ALLOW: tier ids, the keys of PRIORITY_TIER_VISUALS\nexport const PRIORITY_TIERS = [\"lowest\", \"low\", \"medium\", \"high\", \"very_high\", \"critical\"] as const;\nexport type PriorityTier = (typeof PRIORITY_TIERS)[number];\n\n/**\n * Tiers rank on a grey → green → yellow → orange → red heat ramp: tertiary, success text, warning text, solid warning (the\n * hotter amber), danger text, solid danger. Colour is never the only channel: the glyph differs per tier and every mark\n * carries the tier's name in its tooltip and accessible name.\n */\nexport const PRIORITY_TIER_VISUALS: Readonly<Record<PriorityTier, { icon: CoreIconName; colorClass: string }>> = {\n  lowest: { icon: CARD_FACE_ICONS[\"priority.lowest\"], colorClass: \"text-tertiary\" },\n  low: { icon: CARD_FACE_ICONS[\"priority.low\"], colorClass: \"text-success-text\" },\n  medium: { icon: CARD_FACE_ICONS[\"priority.medium\"], colorClass: \"text-warning-text\" },\n  high: { icon: CARD_FACE_ICONS[\"priority.high\"], colorClass: \"text-warning\" },\n  very_high: { icon: CARD_FACE_ICONS[\"priority.very_high\"], colorClass: \"text-danger-text\" },\n  critical: { icon: CARD_FACE_ICONS[\"priority.critical\"], colorClass: \"text-danger\" },\n};\n\n/** A quality gate's verdict. */\nexport const GATE_VERDICTS = [\"pass\", \"fail\", \"pending\", \"skipped\"] as const;\nexport type GateVerdict = (typeof GATE_VERDICTS)[number];\n\n/** Same marks as the checklist states for the same meanings: a pass, a failure and a deliberate skip look alike everywhere. */\nexport const GATE_VERDICT_VISUALS: Readonly<Record<GateVerdict, { tone: CardFaceTone & ProgressTone; icon: CoreIconName }>> = {\n  pass: { tone: \"success\", icon: CARD_FACE_ICONS[\"outcome.passed\"] },\n  fail: { tone: \"danger\", icon: CARD_FACE_ICONS[\"outcome.failed\"] },\n  pending: { tone: \"neutral\", icon: CARD_FACE_ICONS[\"outcome.pending\"] },\n  skipped: { tone: \"info\", icon: CARD_FACE_ICONS[\"outcome.skipped\"] },\n};\n\n/**\n * A checklist item's (an acceptance criterion's) state, in SEVERITY order: a summary names a failure first. `cancelled`\n * reads \"Withdrawn\" and `deferred` \"Deferred\", both `info`: each is resolved, and neither may look like a criterion still\n * waiting to be met.\n */\nexport const CRITERION_STATES = [\"failing\", \"incomplete\", \"passing\", \"deferred\", \"cancelled\"] as const;\nexport type CriterionState = (typeof CRITERION_STATES)[number];\n\nexport const CRITERION_STATE_VISUALS: Readonly<Record<CriterionState, { tone: CardFaceTone & ProgressTone; icon: CoreIconName }>> = {\n  failing: { tone: \"danger\", icon: CARD_FACE_ICONS[\"outcome.failed\"] },\n  incomplete: { tone: \"neutral\", icon: CARD_FACE_ICONS[\"outcome.pending\"] },\n  passing: { tone: \"success\", icon: CARD_FACE_ICONS[\"outcome.passed\"] },\n  deferred: { tone: \"info\", icon: CARD_FACE_ICONS[\"outcome.deferred\"] },\n  cancelled: { tone: \"info\", icon: CARD_FACE_ICONS[\"outcome.withdrawn\"] },\n};\n\n/** The reasoning-effort rungs, lowest to highest. */\n// I18N-ALLOW: rung ids, the keys of the effort colour map\nexport const EFFORT_RUNGS = [\"min\", \"very_low\", \"low\", \"medium\", \"high\", \"very_high\", \"max\"] as const;\nexport type EffortRung = (typeof EFFORT_RUNGS)[number];\n\n/**\n * DX-4799 — each effort rung wears its own palette family, cool to hot so a higher rung reads as more: slate → blue →\n * aqua → green → amber → orange → red. Background, border and icon colour all come from that family's theme tokens, so\n * the pill follows the theme.\n */\nconst EFFORT_COLOR_FAMILY: Readonly<Record<EffortRung, \"muted\" | \"info\" | \"accent\" | \"success\" | \"warning\" | \"orange\" | \"danger\">> = {\n  min: \"muted\",\n  very_low: \"info\",\n  low: \"accent\",\n  medium: \"success\",\n  high: \"warning\",\n  very_high: \"orange\",\n  max: \"danger\",\n};\n\n/** A rung's pill colours, as CSS values: the family's subtle fill, its border and its text colour. */\nexport function effortColors(rung: EffortRung): { background: string; borderColor: string; color: string } {\n  const family = EFFORT_COLOR_FAMILY[rung];\n  return { background: `var(--${family}-subtle)`, borderColor: `var(--${family}-border)`, color: `var(--${family}-text)` };\n}\n\n/**\n * DX-2972 / DX-4794 / DX-5422 — a palette hue worn by a card TYPE: its badge (the hue's `fill` behind, its bolder `edge` as\n * border, and its text: the edge, except slate's, which is lifted to the -text token), the box a board lane draws around a parent's cards (fill and edge, no text colour) and a type icon\n * standing alone (the edge as text, for every hue). Only slate's badge text is lifted to 4.5:1 so far; the other hues' badge text pairs are not yet held to it. Every `--event-*` value is redefined per theme by `tokens.css`.\n *\n * FULLY-WRITTEN class strings, never assembled from the key: Tailwind extracts class names by static text match, so a class\n * built from a template literal is never generated.\n */\nconst PALETTE_CLASSES: Readonly<Record<PaletteKey, { fill: string; edge: string; text: string; badgeText: string }>> = {\n  iris: { fill: \"bg-[var(--event-iris-fill)]\", edge: \"border-[var(--event-iris-edge)]\", text: \"text-[var(--event-iris-edge)]\", badgeText: \"text-[var(--event-iris-edge)]\" },\n  aqua: { fill: \"bg-[var(--event-aqua-fill)]\", edge: \"border-[var(--event-aqua-edge)]\", text: \"text-[var(--event-aqua-edge)]\", badgeText: \"text-[var(--event-aqua-edge)]\" },\n  mint: { fill: \"bg-[var(--event-mint-fill)]\", edge: \"border-[var(--event-mint-edge)]\", text: \"text-[var(--event-mint-edge)]\", badgeText: \"text-[var(--event-mint-edge)]\" },\n  amber: { fill: \"bg-[var(--event-amber-fill)]\", edge: \"border-[var(--event-amber-edge)]\", text: \"text-[var(--event-amber-edge)]\", badgeText: \"text-[var(--event-amber-edge)]\" },\n  rose: { fill: \"bg-[var(--event-rose-fill)]\", edge: \"border-[var(--event-rose-edge)]\", text: \"text-[var(--event-rose-edge)]\", badgeText: \"text-[var(--event-rose-edge)]\" },\n  azure: { fill: \"bg-[var(--event-azure-fill)]\", edge: \"border-[var(--event-azure-edge)]\", text: \"text-[var(--event-azure-edge)]\", badgeText: \"text-[var(--event-azure-edge)]\" },\n  orchid: { fill: \"bg-[var(--event-orchid-fill)]\", edge: \"border-[var(--event-orchid-edge)]\", text: \"text-[var(--event-orchid-edge)]\", badgeText: \"text-[var(--event-orchid-edge)]\" },\n  /* DX-5428: only slate's BADGE text is lifted so far, to its -text token: the dark edge (slate-400) on the dark fill measured 4.44:1, under 4.5:1. The other hues' badge text pairs are not yet held to 4.5:1. `text` (a standalone icon) stays the edge for every hue. */\n  slate: { fill: \"bg-[var(--event-slate-fill)]\", edge: \"border-[var(--event-slate-edge)]\", text: \"text-[var(--event-slate-edge)]\", badgeText: \"text-[var(--event-slate-text)]\" },\n};\n\n/** A hue's badge classes: fill, edge as border, `badgeText` as text (the edge, except slate's -text token, the one lifted to 4.5:1 so far). */\nexport function paletteBadgeClassName(hue: PaletteKey): string {\n  const { fill, edge, badgeText } = PALETTE_CLASSES[hue];\n  return `${fill} ${edge} ${badgeText}`;\n}\n\n/** A hue's box classes (a lane's box around a parent's cards): fill and edge, no text colour. */\nexport function paletteBoxClassName(hue: PaletteKey): string {\n  const { fill, edge } = PALETTE_CLASSES[hue];\n  return `${fill} ${edge}`;\n}\n\n/** A hue's text colour, for a `currentColor` icon that wears it: the edge for every hue, slate included. */\nexport function paletteTextClassName(hue: PaletteKey): string {\n  return PALETTE_CLASSES[hue].text;\n}\n"],"names":["CARD_FACE_ICONS","PRIORITY_TIERS","PRIORITY_TIER_VISUALS","GATE_VERDICTS","GATE_VERDICT_VISUALS","CRITERION_STATES","CRITERION_STATE_VISUALS","EFFORT_RUNGS","EFFORT_COLOR_FAMILY","effortColors","rung","family","PALETTE_CLASSES","paletteBadgeClassName","hue","fill","edge","badgeText","paletteBoxClassName","paletteTextClassName"],"mappings":"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"}

package/dist/components/chart/BarList.js

@@ -0,0 +1,78 @@
+import { jsxs as h, jsx as a, Fragment as R } from "react/jsx-runtime";
+import { cn as p } from "../../lib/cn.js";
+import { CHART_SEQUENTIAL_COLOR as E } from "../../lib/chart-palette.js";
+import { assertChartData as T, TipBody as B, ChartTip as S, ChartTable as F, rowKey as O, OTHER_KEY as V, defaultFormatValue as _ } from "./shared.js";
+import { useUiLocale as j, useUiStrings as A } from "../../lib/i18n/provider.js";
+import { useNumberFormat as U } from "../../lib/i18n/number-format.js";
+function w(l, t, o) {
+  if (t !== void 0 && (!Number.isInteger(t) || t < 1))
+    throw new Error(`BarList: maxItems must be an integer >= 1; got ${t}.`);
+  const s = (t === void 0 ? l : l.slice(0, t)).map((r) => ({ ...r, key: O(r.id), other: !1 }));
+  if (t === void 0 || l.length <= t) return s;
+  const i = l.slice(t);
+  return [
+    ...s,
+    {
+      key: V,
+      id: "other",
+      label: o.label,
+      value: i.reduce((r, f) => r + f.value, 0),
+      secondary: o.more(i.length),
+      other: !0
+    }
+  ];
+}
+const b = "flex w-full min-w-0 flex-col gap-1.5 rounded-md px-2 py-1.5 text-start transition-colors hover:bg-surface-hover";
+function H({ row: l, value: t, fraction: o }) {
+  return /* @__PURE__ */ h(R, { children: [
+    /* @__PURE__ */ h("span", { className: "flex w-full items-baseline justify-between gap-3", children: [
+      /* @__PURE__ */ h("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ a("span", { className: "truncate text-sm text-primary", children: l.label }),
+        l.secondary && /* @__PURE__ */ a("span", { className: "truncate text-2xs text-tertiary", children: l.secondary })
+      ] }),
+      /* @__PURE__ */ a("span", { className: "shrink-0 text-xs font-medium tabular-nums text-secondary", children: t })
+    ] }),
+    /* @__PURE__ */ a("span", { className: "block h-2 w-full overflow-hidden rounded-[4px] bg-surface-inset", children: /* @__PURE__ */ a(
+      "span",
+      {
+        "data-bar": !0,
+        style: { width: `${o * 100}%`, backgroundColor: E },
+        className: "block h-full rounded-[4px]"
+      }
+    ) })
+  ] });
+}
+function Y({ items: l, label: t, maxItems: o, formatValue: s, className: i, ref: r }) {
+  const f = j(), g = U(), n = A().chart, v = s ?? ((e) => _(e, f));
+  T("BarList", l);
+  const c = w(l, o, { label: n.other, more: (e) => n.barList.moreCount(g(e)) }), y = c.reduce((e, d) => Math.max(e, d.value), 0), k = c.some((e) => !e.other && (e.href !== void 0 || e.onSelect !== void 0));
+  return /* @__PURE__ */ h("div", { className: p("flex w-full min-w-0 flex-col", i), children: [
+    /* @__PURE__ */ a(
+      "ul",
+      {
+        ref: r,
+        role: "list",
+        "aria-label": t,
+        "aria-hidden": k ? void 0 : !0,
+        className: "flex flex-col",
+        children: c.map((e) => {
+          const d = v(e.value), L = y > 0 ? e.value / y : 0, m = /* @__PURE__ */ a(H, { row: e, value: d, fraction: L }), C = /* @__PURE__ */ a(B, { label: e.label, lines: [d, ...e.secondary ? [e.secondary] : []] }), x = e.other ? void 0 : e.href, N = e.other ? void 0 : e.onSelect;
+          let u;
+          return x !== void 0 ? u = /* @__PURE__ */ a("a", { href: x, "data-row": e.other ? void 0 : e.id, className: p(b, "no-underline"), children: m }) : N !== void 0 ? u = /* @__PURE__ */ a("button", { type: "button", onClick: N, "data-row": e.other ? void 0 : e.id, className: p(b, "cursor-pointer"), children: m }) : u = /* @__PURE__ */ a("div", { "data-row": e.other ? void 0 : e.id, "data-other": e.other || void 0, className: b, children: m }), /* @__PURE__ */ a("li", { className: "min-w-0", children: /* @__PURE__ */ a(S, { content: C, children: u }) }, e.key);
+        })
+      }
+    ),
+    /* @__PURE__ */ a(
+      F,
+      {
+        caption: t,
+        columns: [n.barList.columnItem, n.barList.columnValue, n.barList.columnNote],
+        rows: c.map((e) => ({ key: e.key, header: e.label, cells: [v(e.value), e.secondary ?? ""] }))
+      }
+    )
+  ] });
+}
+export {
+  Y as BarList
+};
+//# sourceMappingURL=BarList.js.map

package/dist/components/chart/BarList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarList.js","sources":["../../../src/components/chart/BarList.tsx"],"sourcesContent":["import type { ReactElement, ReactNode, Ref } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useNumberFormat, useUiLocale, useUiStrings } from \"../../lib/i18n\";\nimport { CHART_SEQUENTIAL_COLOR } from \"../../lib/chart-palette\";\nimport { ChartTable, ChartTip, OTHER_KEY, TipBody, assertChartData, defaultFormatValue, rowKey } from \"./shared\";\n\n/* ============================================================================\n   BAR LIST — ranked horizontal bars: what contributes most (DX-3963).\n\n   THE FORM. One measure across many named things, ranked: a label, a bar and a\n   number per row, so the eye compares lengths down a common left edge and the\n   exact figure is one glance away. A single series, so a single sequential hue\n   and NO legend — the title names the series.\n\n   THE CALLER SORTS. A ranked list is ranked by whoever knows the ranking\n   (largest first, most recent first, alphabetical); this component never\n   reorders, which is also what keeps a row's identity stable when a filter\n   changes. `maxItems` keeps the first N rows and folds the rest into one\n   `Other` row — the sum of the tail, never selectable.\n\n   THE WHOLE ROW IS THE TARGET. Hover or focus anywhere on a row opens a\n   tooltip carrying the full label (a long one truncates in the row), the value\n   and the secondary text. A row with `href` is a real link, one with `onSelect`\n   a real button; a plain row is neither focusable nor interactive and keeps\n   only the hover tooltip, because a keyboard user already has every fact as\n   text in the row and the table.\n\n   TEXT WEARS INK. The label is `text-primary`, the value `text-secondary`, the\n   secondary line `text-tertiary`; the sequential hue colours only the bar.\n   Bar length is value / the LARGEST SHOWN value (the Other row included), so\n   the longest bar always fills the track and nothing overflows it.\n   ========================================================================= */\n\nexport interface BarListItem {\n  /** Unique within the list. */\n  id: string;\n  label: string;\n  /** Finite and >= 0 — anything else throws. */\n  value: number;\n  /** A quieter line under the label — a count, a unit, a note. */\n  secondary?: string;\n  /** Renders the row as a real link. Wins over `onSelect`. */\n  href?: string;\n  /** Renders the row as a button. */\n  onSelect?: () => void;\n}\n\nexport interface BarListProps {\n  /** In the order to show; never re-sorted. */\n  items: readonly BarListItem[];\n  /** What the list measures, e.g. \"What is contributing\". Names the list and captions the table. */\n  label: string;\n  /** Keep this many rows and fold the rest into one `Other` row. @default every row */\n  maxItems?: number;\n  /** How a raw value reads in the row, the tooltip and the table. @default locale-formatted number */\n  formatValue?: (value: number) => string;\n  className?: string;\n  ref?: Ref<HTMLUListElement>;\n}\n\ninterface Row extends BarListItem {\n  key: string;\n  other: boolean;\n}\n\nfunction toRows(items: readonly BarListItem[], maxItems: number | undefined, other: { label: string; more: (count: number) => string }): Row[] {\n  if (maxItems !== undefined && (!Number.isInteger(maxItems) || maxItems < 1)) {\n    throw new Error(`BarList: maxItems must be an integer >= 1; got ${maxItems}.`);\n  }\n  const kept = (maxItems === undefined ? items : items.slice(0, maxItems)).map((i) => ({ ...i, key: rowKey(i.id), other: false }));\n  if (maxItems === undefined || items.length <= maxItems) return kept;\n  const rest = items.slice(maxItems);\n  return [\n    ...kept,\n    {\n      key: OTHER_KEY,\n      id: \"other\",\n      label: other.label,\n      value: rest.reduce((sum, i) => sum + i.value, 0),\n      secondary: other.more(rest.length),\n      other: true,\n    },\n  ];\n}\n\nconst ROW_FRAME =\n  \"flex w-full min-w-0 flex-col gap-1.5 rounded-md px-2 py-1.5 text-start transition-colors hover:bg-surface-hover\";\n\nfunction RowBody({ row, value, fraction }: { row: Row; value: string; fraction: number }): ReactNode {\n  return (\n    <>\n      <span className=\"flex w-full items-baseline justify-between gap-3\">\n        <span className=\"flex min-w-0 flex-1 flex-col\">\n          <span className=\"truncate text-sm text-primary\">{row.label}</span>\n          {row.secondary && <span className=\"truncate text-2xs text-tertiary\">{row.secondary}</span>}\n        </span>\n        <span className=\"shrink-0 text-xs font-medium tabular-nums text-secondary\">{value}</span>\n      </span>\n      <span className=\"block h-2 w-full overflow-hidden rounded-[4px] bg-surface-inset\">\n        <span\n          data-bar\n          style={{ width: `${fraction * 100}%`, backgroundColor: CHART_SEQUENTIAL_COLOR }}\n          className=\"block h-full rounded-[4px]\"\n        />\n      </span>\n    </>\n  );\n}\n\nexport function BarList({ items, label, maxItems, formatValue: formatCaller, className, ref }: BarListProps) {\n  const locale = useUiLocale();\n  const fmt = useNumberFormat();\n  const strings = useUiStrings().chart;\n  const formatValue = formatCaller ?? ((value: number) => defaultFormatValue(value, locale));\n  assertChartData(\"BarList\", items);\n  const rows = toRows(items, maxItems, { label: strings.other, more: (count) => strings.barList.moreCount(fmt(count)) });\n  const max = rows.reduce((m, r) => Math.max(m, r.value), 0);\n  const interactive = rows.some((r) => !r.other && (r.href !== undefined || r.onSelect !== undefined));\n\n  return (\n    <div className={cn(\"flex w-full min-w-0 flex-col\", className)}>\n      {/* Hidden from assistive tech only when it holds nothing focusable: the table below\n          is then the one text-equivalent. An interactive list stays exposed — its links and\n          buttons are the controls — and the table remains alongside it. */}\n      <ul\n        ref={ref}\n        role=\"list\"\n        aria-label={label}\n        aria-hidden={interactive ? undefined : true}\n        className=\"flex flex-col\"\n      >\n        {rows.map((row) => {\n          const value = formatValue(row.value);\n          const fraction = max > 0 ? row.value / max : 0;\n          const body = <RowBody row={row} value={value} fraction={fraction} />;\n          const tip = <TipBody label={row.label} lines={[value, ...(row.secondary ? [row.secondary] : [])]} />;\n          const href = row.other ? undefined : row.href;\n          const onSelect = row.other ? undefined : row.onSelect;\n\n          let target: ReactElement<Record<string, unknown>>;\n          if (href !== undefined) {\n            target = (\n              <a href={href} data-row={row.other ? undefined : row.id} className={cn(ROW_FRAME, \"no-underline\")}>\n                {body}\n              </a>\n            );\n          } else if (onSelect !== undefined) {\n            target = (\n              <button type=\"button\" onClick={onSelect} data-row={row.other ? undefined : row.id} className={cn(ROW_FRAME, \"cursor-pointer\")}>\n                {body}\n              </button>\n            );\n          } else {\n            target = (\n              <div data-row={row.other ? undefined : row.id} data-other={row.other || undefined} className={ROW_FRAME}>\n                {body}\n              </div>\n            );\n          }\n\n          return (\n            <li key={row.key} className=\"min-w-0\">\n              <ChartTip content={tip}>{target}</ChartTip>\n            </li>\n          );\n        })}\n      </ul>\n      <ChartTable\n        caption={label}\n        columns={[strings.barList.columnItem, strings.barList.columnValue, strings.barList.columnNote]}\n        rows={rows.map((r) => ({ key: r.key, header: r.label, cells: [formatValue(r.value), r.secondary ?? \"\"] }))}\n      />\n    </div>\n  );\n}\n"],"names":["toRows","items","maxItems","other","kept","i","rowKey","rest","OTHER_KEY","sum","ROW_FRAME","RowBody","row","value","fraction","jsxs","Fragment","jsx","CHART_SEQUENTIAL_COLOR","BarList","label","formatCaller","className","ref","locale","useUiLocale","fmt","useNumberFormat","strings","useUiStrings","formatValue","defaultFormatValue","assertChartData","rows","count","max","m","r","interactive","cn","body","tip","TipBody","href","onSelect","target","ChartTip","ChartTable"],"mappings":"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"}

package/dist/components/chart/LineChart.js

@@ -0,0 +1,310 @@
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { useRef as Me, useState as j, useMemo as M } from "react";
+import { cn as se } from "../../lib/cn.js";
+import { dateFormat as Ae, numberFormat as Se } from "../../lib/intl-cache.js";
+import { CHART_SERIES_COUNT as oe, chartSeriesColor as Re } from "../../lib/chart-palette.js";
+import { lineSeriesPaint as De } from "./line-series-style.js";
+import { Tooltip as Ie } from "../Popover.js";
+import { ChartEmpty as Fe, useElementWidth as We, useHiddenSeries as _e, plotLayout as Pe, ValueGrid as He, XTickLabel as Oe, TipBody as ae, ChartTip as Ue, LegendList as je, LegendItem as Be, LegendToggle as Ke, LegendSwatch as Ve, ChartTable as Ge, defaultFormatValue as Xe } from "./shared.js";
+import { axisTicks as ze } from "./line-chart-axis.js";
+import { mergeInstants as Ze, timeBounds as qe, summarize as Je, nearestIndex as B, decimate as Qe, valueAt as Ye } from "./line-chart-scale.js";
+import { niceTicks as et } from "./time-series-scale.js";
+import { useUiStrings as de, useUiLocale as tt } from "../../lib/i18n/provider.js";
+const k = { top: 12, right: 12, bottom: 36 }, ie = 2, le = 2.5, rt = 4, nt = 60, ce = 6, st = 12, ot = "6 4", at = 14, it = 10;
+function lt(i) {
+  const { series: a, referenceLines: s = [], markers: d = [] } = i;
+  if (a.length > oe)
+    throw new Error(`LineChart: at most ${oe} series (the categorical hues); got ${a.length}.`);
+  const h = /* @__PURE__ */ new Set();
+  for (const n of a) {
+    if (h.has(n.key)) throw new Error(`LineChart: duplicate series key "${n.key}".`);
+    h.add(n.key), n.points.forEach((l, m) => {
+      if (!Number.isFinite(l.t)) throw new Error(`LineChart: "${n.key}" point ${m} has t ${l.t}; instants are finite epoch ms.`);
+      if (m > 0 && l.t <= n.points[m - 1].t) throw new Error(`LineChart: "${n.key}" instants must be strictly ascending (point ${m}).`);
+      if (!Number.isFinite(l.value) || l.value < 0) throw new Error(`LineChart: "${n.key}" has value ${l.value}; values must be finite and >= 0.`);
+    });
+  }
+  const L = /* @__PURE__ */ new Set();
+  for (const n of s) {
+    if (L.has(n.id)) throw new Error(`LineChart: duplicate reference line id "${n.id}".`);
+    if (L.add(n.id), !Number.isFinite(n.value) || n.value < 0) throw new Error(`LineChart: reference line "${n.id}" has value ${n.value}; values must be finite and >= 0.`);
+  }
+  const $ = /* @__PURE__ */ new Set();
+  for (const n of d) {
+    if ($.has(n.id)) throw new Error(`LineChart: duplicate marker id "${n.id}".`);
+    $.add(n.id);
+    const l = a.find((_) => _.key === n.series);
+    if (!l) throw new Error(`LineChart: marker "${n.id}" names series "${n.series}", which is not in series.`);
+    const m = l.points[0]?.t, A = l.points[l.points.length - 1]?.t;
+    if (m === void 0 || A === void 0 || !Number.isFinite(n.t) || n.t < m || n.t > A)
+      throw new Error(`LineChart: marker "${n.id}" at ${n.t} is outside series "${n.series}" (${m} to ${A}).`);
+  }
+}
+function ct(i, a, s) {
+  return i.map((d, h) => `${h === 0 ? "M" : "L"}${a(d.t).toFixed(2)},${s(d.value).toFixed(2)}`).join("");
+}
+function dt(i, a, s) {
+  return `M${i},${a - s}L${i + s},${a}L${i},${a + s}L${i - s},${a}Z`;
+}
+function ut(i, a) {
+  let s = 0;
+  for (const d of i) for (const h of d.points) s = Math.max(s, h.value);
+  for (const d of a) s = Math.max(s, d.value);
+  return s;
+}
+function Nt(i) {
+  lt(i);
+  const { label: a, series: s, height: d = 240, emptyLabel: h, className: L, ref: $ } = i, n = de().chart.lineChart;
+  return s.every((l) => l.points.length === 0) ? /* @__PURE__ */ r(Fe, { ref: $, label: a, text: h ?? n.empty, height: d, className: L }) : /* @__PURE__ */ r(ht, { ...i });
+}
+function ht(i) {
+  const {
+    label: a,
+    series: s,
+    referenceLines: d = [],
+    markers: h = [],
+    formatValue: L,
+    formatTime: $,
+    formatAxisTime: n,
+    timeZone: l,
+    height: m = 240,
+    className: A,
+    ref: _
+  } = i, S = tt(), c = de().chart.lineChart, N = L ?? ((e) => Xe(e, S)), ue = i.formatAxis ?? N, b = $ ?? ((e) => Ae(S, { dateStyle: "medium", timeStyle: "medium", timeZone: l }).format(e)), K = (e) => Se(S, {}).format(e), V = Me(null), he = We(V), [E, me] = _e(), [u, C] = j(null), [fe, G] = j(!1), [pe, X] = j(0), z = s.map((e, t) => {
+    const o = De(e.style, Re(t));
+    return { series: e, color: o.color, paint: o };
+  }), I = z.filter((e) => !E.has(e.series.key)), f = M(() => Ze(s.filter((e) => !E.has(e.key)).map((e) => e.points)), [s, E]), ke = M(() => qe(s.map((e) => e.points)), [s]), Z = M(() => ut(s.filter((e) => !E.has(e.key)), d), [s, E, d]), ye = M(() => s.map((e) => Je(e.points)), [s]), { min: T, max: P } = ke, F = P - T, ge = Z === 0, q = et(Z), J = ge ? [0] : q.ticks, Q = q.max, Y = J.map(ue), { left: w, W: R, plotW: y, plotH: D } = Pe(he, m, k, Y), x = (e) => F === 0 ? w + y / 2 : w + y * (e - T) / F, v = (e) => k.top + D * (1 - e / Q), ee = v(0), we = M(() => ze(T, P, y, l, S, n), [T, P, y, l, S, n]), xe = (e) => f.length === 0 ? null : f[B(f, e)], H = u === null ? [] : I.flatMap((e) => {
+    if (e.series.points.length === 0) return [];
+    const t = e.series.points[B(e.series.points, u)];
+    return [{ shown: e, point: t, at: t.t === u ? null : b(t.t) }];
+  }), be = u === null ? "" : c.readout(b(u), H.map((e) => c.readoutPart(e.shown.series.label, N(e.point.value), e.at))), te = (e) => {
+    if (f.length === 0) return;
+    const t = e.currentTarget.getBoundingClientRect();
+    C(xe(T + (e.clientX - t.left) / y * F));
+  }, ve = (e) => {
+    if (e.key === "Escape") {
+      C(null);
+      return;
+    }
+    if (f.length === 0) return;
+    const t = u === null ? 0 : B(f, u), o = Math.max(1, Math.ceil(f.length / it)), g = e.key === "ArrowRight" ? t + 1 : e.key === "ArrowLeft" ? t - 1 : e.key === "PageDown" ? t + o : e.key === "PageUp" ? t - o : e.key === "Home" ? 0 : e.key === "End" ? f.length - 1 : null;
+    g !== null && (e.preventDefault(), C(f[Math.min(f.length - 1, Math.max(0, g))]));
+  }, re = M(
+    () => new Map(s.map((e) => [e.key, ct(Qe(e.points, x, y), x, v)])),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- x and y are pure functions of exactly the values listed
+    [s, T, F, w, y, Q, D]
+  ), Le = (e) => e.length > 0 && e.length <= nt, $e = H.map((e) => /* @__PURE__ */ p("span", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ r("span", { "aria-hidden": !0, style: { background: e.shown.paint.swatch }, className: "h-[3px] w-3 shrink-0 rounded-full" }),
+    /* @__PURE__ */ r("span", { children: c.readoutPart(e.shown.series.label, N(e.point.value), e.at) })
+  ] }, e.shown.series.key)), W = h.flatMap((e) => {
+    const t = I.find((o) => o.series.key === e.series);
+    return t ? [{ marker: e, owner: t, value: Ye(t.series.points, e.t) }] : [];
+  }).sort((e, t) => e.marker.t - t.marker.t || e.marker.id.localeCompare(t.marker.id)), Ne = Math.min(pe, Math.max(0, W.length - 1)), Ee = (e, t) => {
+    const o = e.key === "ArrowRight" ? t + 1 : e.key === "ArrowLeft" ? t - 1 : e.key === "Home" ? 0 : e.key === "End" ? W.length - 1 : null;
+    if (o === null) return;
+    e.preventDefault();
+    const g = Math.min(W.length - 1, Math.max(0, o));
+    X(g), e.currentTarget.parentElement?.querySelector(`[data-marker-index="${g}"]`)?.focus();
+  }, Ce = s.length >= 2;
+  return /* @__PURE__ */ p("div", { ref: _, role: "group", "aria-label": a, className: se("relative flex w-full min-w-0 flex-col gap-3 overflow-clip", A), children: [
+    /* @__PURE__ */ r("div", { ref: V, className: "w-full min-w-0", children: /* @__PURE__ */ p("svg", { width: R, height: m, viewBox: `0 0 ${R} ${m}`, "data-line-chart": !0, className: "block max-w-full overflow-visible", children: [
+      /* @__PURE__ */ p("g", { "aria-hidden": !0, children: [
+        /* @__PURE__ */ r(He, { ticks: J, labels: Y, left: w, right: R - k.right, y: v }),
+        we.map((e) => /* @__PURE__ */ r(Oe, { at: e.t, x: x(e.t), y: ee + 14, primary: e.primary, secondary: e.secondary }, e.t))
+      ] }),
+      d.map((e) => {
+        const t = v(e.value), o = t - k.top < at;
+        return /* @__PURE__ */ p("g", { "aria-hidden": !0, children: [
+          /* @__PURE__ */ r(
+            "line",
+            {
+              "data-reference": e.id,
+              x1: w,
+              x2: R - k.right,
+              y1: t,
+              y2: t,
+              strokeWidth: 1.5,
+              strokeDasharray: ot,
+              className: "stroke-border-strong"
+            }
+          ),
+          /* @__PURE__ */ r(
+            "text",
+            {
+              "data-reference-label": e.id,
+              x: R - k.right - 4,
+              y: o ? t + 12 : t - 5,
+              textAnchor: "end",
+              strokeWidth: 3,
+              className: "fill-secondary stroke-surface text-2xs [paint-order:stroke]",
+              children: e.label
+            }
+          )
+        ] }, e.id);
+      }),
+      I.map((e) => /* @__PURE__ */ p("g", { children: [
+        e.series.points.length > 0 && e.paint.underlay !== void 0 && /* @__PURE__ */ r(
+          "path",
+          {
+            "data-line-underlay": e.series.key,
+            d: re.get(e.series.key),
+            fill: "none",
+            stroke: e.paint.underlay,
+            strokeWidth: ie,
+            strokeLinejoin: "round"
+          }
+        ),
+        e.series.points.length > 0 && /* @__PURE__ */ r(
+          "path",
+          {
+            "data-line": e.series.key,
+            d: re.get(e.series.key),
+            fill: "none",
+            stroke: e.color,
+            strokeWidth: ie,
+            strokeDasharray: e.paint.dash,
+            strokeLinejoin: "round",
+            strokeLinecap: e.paint.dash === void 0 ? "round" : "butt"
+          }
+        ),
+        Le(e.series.points) && e.series.points.map((t) => /* @__PURE__ */ r(
+          "circle",
+          {
+            "data-dot": e.series.key,
+            cx: x(t.t),
+            cy: v(t.value),
+            r: e.series.points.length === 1 ? rt : le,
+            fill: e.color,
+            className: "stroke-surface",
+            strokeWidth: 1
+          },
+          t.t
+        ))
+      ] }, e.series.key)),
+      /* @__PURE__ */ p(
+        "g",
+        {
+          "data-plot": !0,
+          role: "img",
+          tabIndex: 0,
+          "aria-label": c.plot(a),
+          onFocus: () => {
+            G(!0), C((e) => e ?? f[0] ?? null);
+          },
+          onBlur: () => {
+            G(!1), C(null);
+          },
+          onKeyDown: ve,
+          className: "outline-none [&:focus-visible>[data-focus-ring]]:stroke-border-interactive",
+          children: [
+            /* @__PURE__ */ r(
+              "rect",
+              {
+                "data-surface": !0,
+                x: w,
+                y: k.top,
+                width: y,
+                height: D,
+                fill: "transparent",
+                style: { touchAction: "pan-y" },
+                onPointerMove: te,
+                onPointerDown: te,
+                onPointerLeave: (e) => {
+                  !fe && e.pointerType !== "touch" && C(null);
+                }
+              }
+            ),
+            u !== null && /* @__PURE__ */ p("g", { "aria-hidden": !0, className: "pointer-events-none", children: [
+              /* @__PURE__ */ r("line", { "data-cursor": u, x1: x(u), x2: x(u), y1: k.top, y2: ee, strokeWidth: 1, className: "stroke-border-strong" }),
+              H.map((e) => /* @__PURE__ */ r(
+                "circle",
+                {
+                  "data-cursor-dot": e.shown.series.key,
+                  cx: x(e.point.t),
+                  cy: v(e.point.value),
+                  r: le + 1.5,
+                  fill: e.shown.color,
+                  className: "stroke-surface",
+                  strokeWidth: 2
+                },
+                e.shown.series.key
+              ))
+            ] }),
+            /* @__PURE__ */ r(
+              "rect",
+              {
+                "data-focus-ring": !0,
+                x: w,
+                y: k.top,
+                width: y,
+                height: D,
+                fill: "none",
+                strokeWidth: 2,
+                rx: 4,
+                stroke: "transparent",
+                className: "pointer-events-none"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ r(Ie, { content: /* @__PURE__ */ r(ae, { label: u === null ? "" : b(u), lines: $e }), open: u !== null, onOpenChange: () => {
+      }, children: /* @__PURE__ */ r("rect", { "data-anchor": !0, x: u === null ? w : x(u), y: k.top, width: 1, height: 1, fill: "transparent", "aria-hidden": !0, className: "pointer-events-none" }) }),
+      I.length === 0 && /* @__PURE__ */ r("text", { "data-all-hidden": !0, x: w + y / 2, y: k.top + D / 2, textAnchor: "middle", dy: "0.32em", className: "fill-tertiary text-sm", children: c.allHidden }),
+      W.map(({ marker: e, owner: t, value: o }, g) => {
+        const O = x(e.t), U = v(o), ne = b(e.t);
+        return /* @__PURE__ */ r(Ue, { content: /* @__PURE__ */ r(ae, { label: e.label, lines: [ne, ...e.content === void 0 ? [] : [e.content]] }), children: /* @__PURE__ */ p(
+          "g",
+          {
+            "data-marker": e.id,
+            "data-marker-index": g,
+            "data-t": e.t,
+            "data-value": o,
+            role: "img",
+            tabIndex: g === Ne ? 0 : -1,
+            "aria-label": c.marker(e.label, t.series.label, ne),
+            onFocusCapture: () => X(g),
+            onKeyDown: (Te) => Ee(Te, g),
+            className: "cursor-pointer outline-none [&:focus-visible>[data-focus-ring]]:stroke-border-interactive",
+            children: [
+              /* @__PURE__ */ r("circle", { cx: O, cy: U, r: st, fill: "transparent" }),
+              /* @__PURE__ */ r("path", { d: dt(O, U, ce), fill: t.color, strokeWidth: 2, strokeLinejoin: "round", className: "stroke-surface" }),
+              /* @__PURE__ */ r("circle", { "data-focus-ring": !0, cx: O, cy: U, r: ce + 4, fill: "none", strokeWidth: 2, stroke: "transparent" })
+            ]
+          }
+        ) }, e.id);
+      })
+    ] }) }),
+    Ce && /* @__PURE__ */ r(je, { label: c.legend, children: z.map((e) => {
+      const t = E.has(e.series.key);
+      return /* @__PURE__ */ r(Be, { id: e.series.key, children: /* @__PURE__ */ p(Ke, { name: c.showSeries(e.series.label), off: t, onToggle: () => me(e.series.key), className: se(t && "line-through"), children: [
+        /* @__PURE__ */ r(Ve, { color: e.color, swatch: e.paint.swatch, off: t, className: "h-[3px] w-4 shrink-0 rounded-full border" }),
+        /* @__PURE__ */ r("span", { className: "truncate", children: e.series.label })
+      ] }) }, e.series.key);
+    }) }),
+    /* @__PURE__ */ r("div", { "data-readout": !0, role: "status", "aria-live": "polite", className: "sr-only", children: be }),
+    /* @__PURE__ */ p("div", { className: "sr-only", children: [
+      /* @__PURE__ */ r(
+        Ge,
+        {
+          caption: a,
+          columns: [c.columnPoints, c.columnFrom, c.columnTo, c.columnLowest, c.columnHighest],
+          rows: s.map((e, t) => {
+            const o = ye[t];
+            return {
+              key: e.key,
+              header: e.label,
+              cells: o.count === 0 ? [K(0), "", "", "", ""] : [K(o.count), b(o.first), b(o.last), N(o.lowest), N(o.highest)]
+            };
+          })
+        }
+      ),
+      d.length > 0 && /* @__PURE__ */ r("ul", { "data-reference-list": !0, "aria-label": c.referenceLines, children: d.map((e) => /* @__PURE__ */ r("li", { children: c.referenceLine(e.label, N(e.value)) }, e.id)) }),
+      h.length > 0 && /* @__PURE__ */ r("ul", { "data-marker-list": !0, "aria-label": c.markers, children: h.map((e) => /* @__PURE__ */ r("li", { children: c.marker(e.label, s.find((t) => t.key === e.series).label, b(e.t)) }, e.id)) })
+    ] })
+  ] });
+}
+export {
+  Nt as LineChart
+};
+//# sourceMappingURL=LineChart.js.map