@boost33/ui 0.8.1 → 0.9.0

package/dist/components/Backdrop/BackdropCharts.js

@@ -0,0 +1,222 @@
+import { jsxs as h, jsx as e, Fragment as _ } from "react/jsx-runtime";
+import l from "./BackdropCharts.module.css.js";
+import q from "./BackdropGlobalPanels.module.css.js";
+import { cx as u } from "./cx.js";
+import { BackdropButton as ll } from "./BackdropButton.js";
+function w(a, n) {
+  return n > 0 ? Math.max(0, Math.min(1, a / n)) : 0;
+}
+function b(a) {
+  return `${Math.round(a * 1e4) / 100}%`;
+}
+function K(a, n, i) {
+  if (i !== void 0 && i > 0) return i;
+  const d = Math.max(0, ...a, ...(n ?? []).map((o) => o.value));
+  return d > 0 ? d : 1;
+}
+function E({ ticks: a, max: n }) {
+  return /* @__PURE__ */ e("div", { className: l.axis, "aria-hidden": "true", children: a.map((i) => /* @__PURE__ */ e("span", { className: l.tick, style: { bottom: b(w(i.value, n)) }, children: i.label }, i.value)) });
+}
+function F({ ticks: a, max: n }) {
+  return /* @__PURE__ */ e(_, { children: a.filter((i) => i.value > 0).map((i) => /* @__PURE__ */ e("span", { className: l.gridline, style: { bottom: b(w(i.value, n)) } }, i.value)) });
+}
+function I({ caption: a, action: n, actionEmphasis: i = "outline", linkComponent: d }) {
+  return a == null && n === void 0 ? null : /* @__PURE__ */ h("div", { className: l.caption, children: [
+    a != null && /* @__PURE__ */ e("p", { className: l.captionText, children: a }),
+    n && /* @__PURE__ */ e(ll, { variant: i, size: "lg", href: n.href, linkComponent: d, onClick: n.onClick, className: l.captionAction, children: n.label })
+  ] });
+}
+function rl({
+  label: a,
+  data: n,
+  categoryHeader: i,
+  valueHeader: d,
+  highlightIndex: o,
+  tone: c = "ink",
+  yTicks: s,
+  gridlines: C = !0,
+  max: y,
+  directLabel: P,
+  directLabelValue: p,
+  directLabelNote: M,
+  caption: A,
+  action: R,
+  actionEmphasis: V,
+  linkComponent: z,
+  className: G
+}) {
+  const S = K(
+    n.map((t) => t.value),
+    s,
+    y
+  ), f = s !== void 0 && s.length > 0, v = o !== void 0 && o >= 0 && o < n.length ? o : void 0, N = v ?? n.length - 1, g = N >= 0 && n[N] ? w(n[N].value, S) : 0, L = P ?? (p != null || M != null ? /* @__PURE__ */ h(_, { children: [
+    p != null && /* @__PURE__ */ e("span", { className: l.directValue, children: p }),
+    M != null && /* @__PURE__ */ e("span", { className: l.directNote, children: M })
+  ] }) : void 0);
+  return /* @__PURE__ */ h("figure", { className: u(l.chart, l[`tone-${c}`], G), "aria-label": a, "data-tone": c, children: [
+    /* @__PURE__ */ h("div", { className: u(l.frame, f && l.withAxis, L !== void 0 && l.withDirect), children: [
+      f && /* @__PURE__ */ e(E, { ticks: s, max: S }),
+      /* @__PURE__ */ h("div", { className: u(l.plot, l.barPlot), "aria-hidden": "true", children: [
+        f && C && /* @__PURE__ */ e(F, { ticks: s, max: S }),
+        /* @__PURE__ */ e("div", { className: l.bars, children: n.map((t, m) => /* @__PURE__ */ e("span", { className: l.slot, children: /* @__PURE__ */ e(
+          "span",
+          {
+            className: u(l.bar, v === void 0 || m === v ? l.barStrong : l.barMuted),
+            "data-highlighted": m === v || void 0,
+            style: { height: b(w(t.value, S)) }
+          }
+        ) }, `${t.label}-${m}`)) }),
+        /* @__PURE__ */ e("span", { className: l.baseline })
+      ] }),
+      L !== void 0 && /* @__PURE__ */ e("div", { className: l.directColumn, children: /* @__PURE__ */ e("div", { className: l.direct, style: { top: b(1 - g) }, children: L }) }),
+      /* @__PURE__ */ e("div", { className: l.xLabels, "aria-hidden": "true", children: n.map((t, m) => /* @__PURE__ */ h("span", { className: u(l.xLabel, m === v && l.xLabelStrong), children: [
+        /* @__PURE__ */ e("span", { className: l.xPrimary, children: t.label }),
+        t.detail != null && /* @__PURE__ */ e("span", { className: l.xDetail, children: t.detail })
+      ] }, `${t.label}-${m}`)) })
+    ] }),
+    /* @__PURE__ */ e("div", { className: l.srOnly, children: /* @__PURE__ */ h("table", { children: [
+      /* @__PURE__ */ e("caption", { children: a }),
+      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ h("tr", { children: [
+        /* @__PURE__ */ e("th", { scope: "col", children: i }),
+        /* @__PURE__ */ e("th", { scope: "col", children: d })
+      ] }) }),
+      /* @__PURE__ */ e("tbody", { children: n.map((t, m) => /* @__PURE__ */ h("tr", { children: [
+        /* @__PURE__ */ e("th", { scope: "row", children: t.detail != null ? `${t.label}, ${t.detail}` : t.label }),
+        /* @__PURE__ */ e("td", { children: t.valueText ?? String(t.value) })
+      ] }, `${t.label}-${m}`)) })
+    ] }) }),
+    /* @__PURE__ */ e(I, { caption: A, action: R, actionEmphasis: V, linkComponent: z })
+  ] });
+}
+function cl({ label: a, items: n, max: i, className: d }) {
+  const o = K(
+    n.map((s) => s.value),
+    void 0,
+    i
+  ), c = n.some((s) => s.leading != null);
+  return /* @__PURE__ */ e("ul", { className: u(l.barList, c && l.barListLeading, d), "aria-label": a, children: n.map((s) => /* @__PURE__ */ h("li", { className: l.barRow, "data-tone": s.tone ?? "ink", children: [
+    c && /* @__PURE__ */ e("span", { className: l.barLeading, "aria-hidden": "true", children: s.leading }),
+    /* @__PURE__ */ e("span", { className: l.barLabel, children: s.label }),
+    s.note != null ? /* @__PURE__ */ e("span", { className: l.barNote, children: s.note }) : /* @__PURE__ */ e("span", { className: u(q.track, l.barTrack, s.tone === "success" && q["tone-success"]), "aria-hidden": "true", children: /* @__PURE__ */ e("span", { className: q.fillBar, style: { width: b(w(s.value, o)) } }) }),
+    /* @__PURE__ */ e("span", { className: u(l.barValue, s.note != null && l.barValueMuted), children: s.valueText ?? String(s.value) })
+  ] }, s.key)) });
+}
+function O(a, n) {
+  return n > 1 ? a / (n - 1) * 100 : 50;
+}
+function J(a, n, i = 0, d = a.length - 1) {
+  const o = [];
+  let c = [];
+  for (let s = i; s <= d; s++) {
+    const C = a[s];
+    if (C == null) {
+      c.length && o.push(c), c = [];
+      continue;
+    }
+    c.push({ x: O(s, a.length), y: 100 - w(C, n) * 100, i: s });
+  }
+  return c.length && o.push(c), o;
+}
+function k(a) {
+  return a.map((n) => n.map((i, d) => `${d === 0 ? "M" : "L"}${D(i.x)} ${D(i.y)}`).join(" ")).join(" ");
+}
+function el(a) {
+  return a.filter((n) => n.length > 1).map((n) => {
+    var o, c;
+    const i = ((o = n[0]) == null ? void 0 : o.x) ?? 0, d = ((c = n[n.length - 1]) == null ? void 0 : c.x) ?? i;
+    return `${k([n])} L${D(d)} 100 L${D(i)} 100 Z`;
+  }).join(" ");
+}
+function D(a) {
+  return Math.round(a * 100) / 100;
+}
+function Y(a) {
+  for (let n = a.length - 1; n >= 0; n--) if (a[n] != null) return n;
+  return -1;
+}
+function ol({
+  label: a,
+  data: n,
+  categoryHeader: i,
+  seriesName: d,
+  comparisonName: o,
+  yTicks: c,
+  gridlines: s = !0,
+  max: C,
+  dashedFrom: y,
+  area: P = !1,
+  marker: p,
+  end: M = "none",
+  comparisonEnd: A = "none",
+  caption: R,
+  action: V,
+  actionEmphasis: z,
+  linkComponent: G,
+  className: S
+}) {
+  const f = n.map((r) => r.value), v = n.map((r) => r.comparison), N = v.some((r) => r != null), g = K(
+    [...f, ...v].filter((r) => r != null),
+    c,
+    C
+  ), L = c !== void 0 && c.length > 0, t = n.length, m = y !== void 0 && y >= 0 && y < t - 1 ? y : void 0, j = J(f, g, 0, m ?? t - 1), Q = m !== void 0 ? J(f, g, m, t - 1) : [], B = Y(f), H = Y(v), x = p && p.index >= 0 && p.index < t ? p.index : void 0, U = x !== void 0 ? f[x] : null, Z = (r, $, W, X, T) => /* @__PURE__ */ e(
+    "span",
+    {
+      className: u(l.point, W === "hollow" && l.pointHollow, X === "comparison" && l.pointComparison),
+      "data-point": W,
+      "data-series": X,
+      style: { left: b(O(r, t) / 100), bottom: b(w($, g)) }
+    },
+    T
+  );
+  return /* @__PURE__ */ h("figure", { className: u(l.chart, S), "aria-label": a, children: [
+    /* @__PURE__ */ h("div", { className: u(l.frame, L && l.withAxis), children: [
+      L && /* @__PURE__ */ e(E, { ticks: c, max: g }),
+      /* @__PURE__ */ h("div", { className: u(l.plot, l.linePlot), "aria-hidden": "true", children: [
+        L && s && /* @__PURE__ */ e(F, { ticks: c, max: g }),
+        /* @__PURE__ */ e("span", { className: l.baseline }),
+        /* @__PURE__ */ h("svg", { className: l.lines, viewBox: "0 0 100 100", preserveAspectRatio: "none", focusable: "false", children: [
+          P && j.length > 0 && /* @__PURE__ */ e("path", { className: l.area, d: el(j) }),
+          N && /* @__PURE__ */ e("path", { className: u(l.line, l.lineComparison), d: k(J(v, g)) }),
+          j.length > 0 && /* @__PURE__ */ e("path", { className: l.line, d: k(j) }),
+          Q.length > 0 && /* @__PURE__ */ e("path", { className: u(l.line, l.lineDashed), d: k(Q) })
+        ] }),
+        x !== void 0 && /* @__PURE__ */ e("span", { className: l.marker, style: { left: b(O(x, t) / 100) }, children: (p == null ? void 0 : p.label) != null && /* @__PURE__ */ e("span", { className: l.markerLabel, children: p.label }) }),
+        x !== void 0 && U != null && x !== B && Z(x, U, "filled", "main", "marker"),
+        N && A !== "none" && H >= 0 && Z(H, v[H], A, "comparison", "comparison-end"),
+        B >= 0 && (M !== "none" || x === B) && Z(B, f[B], M === "hollow" ? "hollow" : "filled", "main", "end")
+      ] }),
+      /* @__PURE__ */ e("div", { className: l.lineLabels, "aria-hidden": "true", children: n.map(
+        (r, $) => r.axisLabel == null ? null : /* @__PURE__ */ e(
+          "span",
+          {
+            className: u(l.lineLabel, r.axisLabelStrong && l.lineLabelStrong),
+            "data-edge": $ === 0 ? "start" : $ === t - 1 ? "end" : void 0,
+            style: { left: b(O($, t) / 100) },
+            children: r.axisLabel
+          },
+          `${r.label}-${$}`
+        )
+      ) })
+    ] }),
+    /* @__PURE__ */ e("div", { className: l.srOnly, children: /* @__PURE__ */ h("table", { children: [
+      /* @__PURE__ */ e("caption", { children: a }),
+      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ h("tr", { children: [
+        /* @__PURE__ */ e("th", { scope: "col", children: i }),
+        /* @__PURE__ */ e("th", { scope: "col", children: d }),
+        N && o !== void 0 && /* @__PURE__ */ e("th", { scope: "col", children: o })
+      ] }) }),
+      /* @__PURE__ */ e("tbody", { children: n.map((r, $) => /* @__PURE__ */ h("tr", { children: [
+        /* @__PURE__ */ e("th", { scope: "row", children: r.label }),
+        /* @__PURE__ */ e("td", { children: r.value == null ? null : r.valueText ?? String(r.value) }),
+        N && o !== void 0 && /* @__PURE__ */ e("td", { children: r.comparison == null ? null : r.comparisonText ?? String(r.comparison) })
+      ] }, `${r.label}-${$}`)) })
+    ] }) }),
+    /* @__PURE__ */ e(I, { caption: R, action: V, actionEmphasis: z, linkComponent: G })
+  ] });
+}
+export {
+  rl as BackdropBarChart,
+  cl as BackdropBarList,
+  ol as BackdropLineChart
+};
+//# sourceMappingURL=BackdropCharts.js.map

package/dist/components/Backdrop/BackdropCharts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropCharts.js","sources":["../../../src/components/Backdrop/BackdropCharts.tsx"],"sourcesContent":["import type { ElementType, ReactNode } from 'react'\nimport styles from './BackdropCharts.module.css'\nimport progressStyles from './BackdropGlobalPanels.module.css'\nimport { cx } from './cx'\nimport { BackdropButton } from './BackdropButton'\nimport type { BackdropPageAction } from './BackdropPage'\n\n/*\n * Batch 4 · Charts (N29–N30). A bar chart over time, a list of proportional\n * bars and a line chart, drawn by hand in CSS and inline SVG: the package has\n * no runtime dependencies, so there is no chart library underneath.\n *\n * Stage A: static and presentational. The charts take numbers and words as\n * props and compute geometry only. They fetch nothing, know nothing about\n * dates or what is being counted, and own no event handler: the caption's\n * action takes the package's one action shape ({ label, onClick?, href? }).\n *\n * Accessibility: each chart's drawing is hidden from assistive tech and the\n * same data is given as a visually hidden table named by the chart's label.\n * Colour is never the only signal: the highlighted bar's x label is bold and\n * its value can be labelled directly beside the plot.\n */\n\n/** `ink` (default) or `success`, where the figure itself is good news. Never orange. */\nexport type BackdropChartTone = 'ink' | 'success'\n\n/** The caption action's button. Outline by default; `primary` only when it is the screen's one orange action. */\nexport type BackdropChartActionEmphasis = 'outline' | 'primary'\n\n/** A y-axis tick: where it sits, and its words (\"3,000\", \"€2,000\"). */\nexport interface BackdropChartTick {\n  value: number\n  label: string\n}\n\n/* ── Shared parts ──────────────────────────────────────────────────────── */\n\nfunction share(value: number, max: number): number {\n  return max > 0 ? Math.max(0, Math.min(1, value / max)) : 0\n}\n\nfunction pct(n: number): string {\n  return `${Math.round(n * 10000) / 100}%`\n}\n\nfunction scaleMax(values: number[], ticks: BackdropChartTick[] | undefined, max: number | undefined): number {\n  if (max !== undefined && max > 0) return max\n  const top = Math.max(0, ...values, ...(ticks ?? []).map((t) => t.value))\n  return top > 0 ? top : 1\n}\n\n/** The y-axis labels, right-aligned and centred on their gridlines. Decorative: the table carries the figures. */\nfunction Axis({ ticks, max }: { ticks: BackdropChartTick[]; max: number }) {\n  return (\n    <div className={styles.axis} aria-hidden=\"true\">\n      {ticks.map((t) => (\n        <span key={t.value} className={styles.tick} style={{ bottom: pct(share(t.value, max)) }}>\n          {t.label}\n        </span>\n      ))}\n    </div>\n  )\n}\n\n/** Gridlines at each tick except zero, which the baseline draws. */\nfunction Grid({ ticks, max }: { ticks: BackdropChartTick[]; max: number }) {\n  return (\n    <>\n      {ticks\n        .filter((t) => t.value > 0)\n        .map((t) => (\n          <span key={t.value} className={styles.gridline} style={{ bottom: pct(share(t.value, max)) }} />\n        ))}\n    </>\n  )\n}\n\ninterface CaptionProps {\n  caption?: ReactNode\n  action?: BackdropPageAction\n  actionEmphasis?: BackdropChartActionEmphasis\n  linkComponent?: ElementType\n}\n\n/**\n * A hairline, a plain sentence about the chart and at most one action. The\n * action is the outline button unless `actionEmphasis=\"primary\"`: a screen has\n * one orange button, and a chart is rarely where it belongs (Batch 4 gate).\n */\nfunction ChartCaption({ caption, action, actionEmphasis = 'outline', linkComponent }: CaptionProps) {\n  if (caption == null && action === undefined) return null\n  return (\n    <div className={styles.caption}>\n      {caption != null && <p className={styles.captionText}>{caption}</p>}\n      {action && (\n        <BackdropButton variant={actionEmphasis} size=\"lg\" href={action.href} linkComponent={linkComponent} onClick={action.onClick} className={styles.captionAction}>\n          {action.label}\n        </BackdropButton>\n      )}\n    </div>\n  )\n}\n\n/* ── Bar chart (N29a) ──────────────────────────────────────────────────── */\n\nexport interface BackdropBarChartDatum {\n  /** The x label's first line, and the table's row header: \"Nov\", \"2 Nov\". */\n  label: string\n  /** An optional second line under the x label: \"43 reached\", \"2 posts\". */\n  detail?: string\n  value: number\n  /** The value as written in the table: \"2,280\". Defaults to the number. */\n  valueText?: string\n}\n\nexport interface BackdropBarChartProps {\n  /** The chart's accessible name, and the hidden table's caption: \"Views by week\". */\n  label: string\n  data: BackdropBarChartDatum[]\n  /** The hidden table's column headers: the category (\"Week\") and the figure (\"Views\"). */\n  categoryHeader: string\n  valueHeader: string\n  /**\n   * The bar drawn in the strong colour with a bold x label (usually the\n   * current period). The others are the tone's pale partner. Leave it out and\n   * every bar is the strong colour.\n   */\n  highlightIndex?: number\n  tone?: BackdropChartTone\n  /** Y-axis ticks, labelled in a 48 column at the left. Leave out for no axis. */\n  yTicks?: BackdropChartTick[]\n  /** A gridline at each tick above zero. Default true; needs `yTicks`. */\n  gridlines?: boolean\n  /** The value at the top of the plot. Defaults to the highest tick or value. */\n  max?: number\n  /**\n   * Words beside the plot, level with the top of the highlighted bar: a figure\n   * and a line under it (\"2 meetings\" / \"this month\"). Pass a node; use\n   * `directLabelValue` and `directLabelNote` for the drawn two-line look.\n   */\n  directLabel?: ReactNode\n  /** The direct label's figure, 15/20 semibold, in the tone's text colour. */\n  directLabelValue?: ReactNode\n  /** The direct label's second line, 13/18 muted. */\n  directLabelNote?: ReactNode\n  /** A sentence under the chart, after a hairline. */\n  caption?: ReactNode\n  /** One action at the caption's end. */\n  action?: BackdropPageAction\n  /** The action's button: `outline` (default) or `primary` when it is the screen's one orange action. */\n  actionEmphasis?: BackdropChartActionEmphasis\n  linkComponent?: ElementType\n  className?: string\n}\n\n/**\n * Single-series vertical bars over time. Fluid width; the plot height is fixed\n * (`--backdrop-chart-bar-plot-height`). Bars grow up from a baseline in equal\n * slots, at most 56 wide.\n */\nexport function BackdropBarChart({\n  label,\n  data,\n  categoryHeader,\n  valueHeader,\n  highlightIndex,\n  tone = 'ink',\n  yTicks,\n  gridlines = true,\n  max,\n  directLabel,\n  directLabelValue,\n  directLabelNote,\n  caption,\n  action,\n  actionEmphasis,\n  linkComponent,\n  className,\n}: BackdropBarChartProps) {\n  const top = scaleMax(\n    data.map((d) => d.value),\n    yTicks,\n    max,\n  )\n  const hasAxis = yTicks !== undefined && yTicks.length > 0\n  const highlighted = highlightIndex !== undefined && highlightIndex >= 0 && highlightIndex < data.length ? highlightIndex : undefined\n  const anchor = highlighted ?? data.length - 1\n  const anchorShare = anchor >= 0 && data[anchor] ? share(data[anchor].value, top) : 0\n  const direct =\n    directLabel ??\n    (directLabelValue != null || directLabelNote != null ? (\n      <>\n        {directLabelValue != null && <span className={styles.directValue}>{directLabelValue}</span>}\n        {directLabelNote != null && <span className={styles.directNote}>{directLabelNote}</span>}\n      </>\n    ) : undefined)\n\n  return (\n    <figure className={cx(styles.chart, styles[`tone-${tone}`], className)} aria-label={label} data-tone={tone}>\n      <div className={cx(styles.frame, hasAxis && styles.withAxis, direct !== undefined && styles.withDirect)}>\n        {hasAxis && <Axis ticks={yTicks} max={top} />}\n        <div className={cx(styles.plot, styles.barPlot)} aria-hidden=\"true\">\n          {hasAxis && gridlines && <Grid ticks={yTicks} max={top} />}\n          <div className={styles.bars}>\n            {data.map((d, i) => (\n              <span key={`${d.label}-${i}`} className={styles.slot}>\n                <span\n                  className={cx(styles.bar, highlighted === undefined || i === highlighted ? styles.barStrong : styles.barMuted)}\n                  data-highlighted={i === highlighted || undefined}\n                  style={{ height: pct(share(d.value, top)) }}\n                />\n              </span>\n            ))}\n          </div>\n          <span className={styles.baseline} />\n        </div>\n        {direct !== undefined && (\n          <div className={styles.directColumn}>\n            <div className={styles.direct} style={{ top: pct(1 - anchorShare) }}>\n              {direct}\n            </div>\n          </div>\n        )}\n        <div className={styles.xLabels} aria-hidden=\"true\">\n          {data.map((d, i) => (\n            <span key={`${d.label}-${i}`} className={cx(styles.xLabel, i === highlighted && styles.xLabelStrong)}>\n              <span className={styles.xPrimary}>{d.label}</span>\n              {d.detail != null && <span className={styles.xDetail}>{d.detail}</span>}\n            </span>\n          ))}\n        </div>\n      </div>\n      <div className={styles.srOnly}>\n        <table>\n          <caption>{label}</caption>\n          <thead>\n            <tr>\n              <th scope=\"col\">{categoryHeader}</th>\n              <th scope=\"col\">{valueHeader}</th>\n            </tr>\n          </thead>\n          <tbody>\n            {data.map((d, i) => (\n              <tr key={`${d.label}-${i}`}>\n                <th scope=\"row\">{d.detail != null ? `${d.label}, ${d.detail}` : d.label}</th>\n                <td>{d.valueText ?? String(d.value)}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n      <ChartCaption caption={caption} action={action} actionEmphasis={actionEmphasis} linkComponent={linkComponent} />\n    </figure>\n  )\n}\n\n/* ── Bar list (N29b) ───────────────────────────────────────────────────── */\n\nexport interface BackdropBarListItem {\n  key: string\n  /** The row's name: \"Outbound\", \"Needs found\". */\n  label: ReactNode\n  value: number\n  /** The figure at the row's end: \"1,429\". Defaults to the number. */\n  valueText?: ReactNode\n  /** A 24px mark or icon before the label. Decorative: the label names the row. */\n  leading?: ReactNode\n  /** The fill's tone. `success` for stages that are themselves the good outcome. */\n  tone?: BackdropChartTone\n  /**\n   * Words in place of the bar, for a row with nothing to draw (\"Free\"). The\n   * row's figure turns muted with it.\n   */\n  note?: ReactNode\n}\n\nexport interface BackdropBarListProps {\n  /** The list's accessible name: \"Where it goes\", \"From need to paid\". */\n  label: string\n  items: BackdropBarListItem[]\n  /** The value a full bar stands for. Defaults to the largest item. */\n  max?: number\n  className?: string\n}\n\n/**\n * Rows of label · bar · figure, the bar proportional to the figure. The\n * label and figure columns size to their widest row so every bar starts and\n * ends on one line. The bar is BackdropProgress's track and fill (the same\n * drawing as BackdropMeter `look=\"bar\"`), at the list's 8px height. Each row\n * reads as its label and figure; the bar is decorative.\n */\nexport function BackdropBarList({ label, items, max, className }: BackdropBarListProps) {\n  const top = scaleMax(\n    items.map((i) => i.value),\n    undefined,\n    max,\n  )\n  const hasLeading = items.some((i) => i.leading != null)\n  return (\n    <ul className={cx(styles.barList, hasLeading && styles.barListLeading, className)} aria-label={label}>\n      {items.map((item) => (\n        <li key={item.key} className={styles.barRow} data-tone={item.tone ?? 'ink'}>\n          {hasLeading && (\n            <span className={styles.barLeading} aria-hidden=\"true\">\n              {item.leading}\n            </span>\n          )}\n          <span className={styles.barLabel}>{item.label}</span>\n          {item.note != null ? (\n            <span className={styles.barNote}>{item.note}</span>\n          ) : (\n            <span className={cx(progressStyles.track, styles.barTrack, item.tone === 'success' && progressStyles['tone-success'])} aria-hidden=\"true\">\n              <span className={progressStyles.fillBar} style={{ width: pct(share(item.value, top)) }} />\n            </span>\n          )}\n          <span className={cx(styles.barValue, item.note != null && styles.barValueMuted)}>{item.valueText ?? String(item.value)}</span>\n        </li>\n      ))}\n    </ul>\n  )\n}\n\n/* ── Line chart (N30) ──────────────────────────────────────────────────── */\n\n/** `filled` ink dot, `hollow` ringed dot (a projected or expected end), or `none`. */\nexport type BackdropLineChartEnd = 'filled' | 'hollow' | 'none'\n\nexport interface BackdropLineChartPoint {\n  /** The table's row header: \"25 Aug\", \"14 Nov\". */\n  label: string\n  /** The main series. `null` leaves a gap. */\n  value: number | null\n  /** The value as written in the table. Defaults to the number. */\n  valueText?: string\n  /** The muted comparison series at this point. `null` or absent leaves a gap. */\n  comparison?: number | null\n  comparisonText?: string\n  /** A label under the x axis at this point. Points without one show none. */\n  axisLabel?: ReactNode\n  /** Sets this point's axis label in ink and semibold. */\n  axisLabelStrong?: boolean\n}\n\nexport interface BackdropLineChartMarker {\n  /** The point the vertical rule stands on. A filled dot marks the value there. */\n  index: number\n  /** Words at the top of the rule, to its right: \"Today · 1,240\". */\n  label?: ReactNode\n}\n\nexport interface BackdropLineChartProps {\n  /** The chart's accessible name and the hidden table's caption. */\n  label: string\n  data: BackdropLineChartPoint[]\n  /** The hidden table's headers: the category (\"Week\") and each series' name. */\n  categoryHeader: string\n  seriesName: string\n  /** Name of the comparison series. Required for it to appear in the table. */\n  comparisonName?: string\n  /** Y-axis ticks in a 48 column at the left. Leave out for no axis. */\n  yTicks?: BackdropChartTick[]\n  /** A gridline at each tick above zero. Default true; needs `yTicks`. */\n  gridlines?: boolean\n  max?: number\n  /** From this index on, the main line is dashed (a projection). */\n  dashedFrom?: number\n  /** Fill the area under the solid part of the main line. */\n  area?: boolean\n  marker?: BackdropLineChartMarker\n  /** The main series' last point. Default `none`. */\n  end?: BackdropLineChartEnd\n  /** The comparison series' last point. Default `none`. */\n  comparisonEnd?: BackdropLineChartEnd\n  caption?: ReactNode\n  action?: BackdropPageAction\n  /** The action's button: `outline` (default) or `primary` when it is the screen's one orange action. */\n  actionEmphasis?: BackdropChartActionEmphasis\n  linkComponent?: ElementType\n  className?: string\n}\n\ntype Pt = { x: number; y: number; i: number }\n\n/* The SVG is drawn in a 100x100 box stretched to the plot; strokes keep their\n   width through `vector-effect: non-scaling-stroke`. Points are HTML so they\n   stay round at any width. */\nfunction xOf(i: number, n: number): number {\n  return n > 1 ? (i / (n - 1)) * 100 : 50\n}\n\nfunction runs(values: Array<number | null | undefined>, top: number, from = 0, to = values.length - 1): Pt[][] {\n  const out: Pt[][] = []\n  let run: Pt[] = []\n  for (let i = from; i <= to; i++) {\n    const v = values[i]\n    if (v == null) {\n      if (run.length) out.push(run)\n      run = []\n      continue\n    }\n    run.push({ x: xOf(i, values.length), y: 100 - share(v, top) * 100, i })\n  }\n  if (run.length) out.push(run)\n  return out\n}\n\nfunction pathOf(pts: Pt[][]): string {\n  return pts.map((run) => run.map((p, k) => `${k === 0 ? 'M' : 'L'}${round(p.x)} ${round(p.y)}`).join(' ')).join(' ')\n}\n\nfunction areaOf(pts: Pt[][]): string {\n  return pts\n    .filter((run) => run.length > 1)\n    .map((run) => {\n      const first = run[0]?.x ?? 0\n      const last = run[run.length - 1]?.x ?? first\n      return `${pathOf([run])} L${round(last)} 100 L${round(first)} 100 Z`\n    })\n    .join(' ')\n}\n\nfunction round(n: number): number {\n  return Math.round(n * 100) / 100\n}\n\nfunction lastIndex(values: Array<number | null | undefined>): number {\n  for (let i = values.length - 1; i >= 0; i--) if (values[i] != null) return i\n  return -1\n}\n\n/**\n * A line over time, with up to one muted comparison line. Generic parts only:\n * a dashed segment from an index on, an area under the line, a vertical\n * marker with a label slot, and filled or hollow end points. What the line\n * means, and any zone or event drawn on it, is the product's.\n */\nexport function BackdropLineChart({\n  label,\n  data,\n  categoryHeader,\n  seriesName,\n  comparisonName,\n  yTicks,\n  gridlines = true,\n  max,\n  dashedFrom,\n  area = false,\n  marker,\n  end = 'none',\n  comparisonEnd = 'none',\n  caption,\n  action,\n  actionEmphasis,\n  linkComponent,\n  className,\n}: BackdropLineChartProps) {\n  const values = data.map((d) => d.value)\n  const comparisons = data.map((d) => d.comparison)\n  const hasComparison = comparisons.some((v) => v != null)\n  const top = scaleMax(\n    [...values, ...comparisons].filter((v): v is number => v != null),\n    yTicks,\n    max,\n  )\n  const hasAxis = yTicks !== undefined && yTicks.length > 0\n  const n = data.length\n  const split = dashedFrom !== undefined && dashedFrom >= 0 && dashedFrom < n - 1 ? dashedFrom : undefined\n  const solid = runs(values, top, 0, split ?? n - 1)\n  const dashed = split !== undefined ? runs(values, top, split, n - 1) : []\n  const lastMain = lastIndex(values)\n  const lastComparison = lastIndex(comparisons)\n  const markerAt = marker && marker.index >= 0 && marker.index < n ? marker.index : undefined\n  const markerValue = markerAt !== undefined ? values[markerAt] : null\n\n  const point = (i: number, v: number, look: 'filled' | 'hollow', series: 'main' | 'comparison', key: string) => (\n    <span\n      key={key}\n      className={cx(styles.point, look === 'hollow' && styles.pointHollow, series === 'comparison' && styles.pointComparison)}\n      data-point={look}\n      data-series={series}\n      style={{ left: pct(xOf(i, n) / 100), bottom: pct(share(v, top)) }}\n    />\n  )\n\n  return (\n    <figure className={cx(styles.chart, className)} aria-label={label}>\n      <div className={cx(styles.frame, hasAxis && styles.withAxis)}>\n        {hasAxis && <Axis ticks={yTicks} max={top} />}\n        <div className={cx(styles.plot, styles.linePlot)} aria-hidden=\"true\">\n          {hasAxis && gridlines && <Grid ticks={yTicks} max={top} />}\n          <span className={styles.baseline} />\n          <svg className={styles.lines} viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\" focusable=\"false\">\n            {area && solid.length > 0 && <path className={styles.area} d={areaOf(solid)} />}\n            {hasComparison && <path className={cx(styles.line, styles.lineComparison)} d={pathOf(runs(comparisons, top))} />}\n            {solid.length > 0 && <path className={styles.line} d={pathOf(solid)} />}\n            {dashed.length > 0 && <path className={cx(styles.line, styles.lineDashed)} d={pathOf(dashed)} />}\n          </svg>\n          {markerAt !== undefined && (\n            <span className={styles.marker} style={{ left: pct(xOf(markerAt, n) / 100) }}>\n              {marker?.label != null && <span className={styles.markerLabel}>{marker.label}</span>}\n            </span>\n          )}\n          {markerAt !== undefined && markerValue != null && markerAt !== lastMain && point(markerAt, markerValue, 'filled', 'main', 'marker')}\n          {hasComparison && comparisonEnd !== 'none' && lastComparison >= 0 && point(lastComparison, comparisons[lastComparison] as number, comparisonEnd, 'comparison', 'comparison-end')}\n          {lastMain >= 0 && (end !== 'none' || markerAt === lastMain) && point(lastMain, values[lastMain] as number, end === 'hollow' ? 'hollow' : 'filled', 'main', 'end')}\n        </div>\n        <div className={styles.lineLabels} aria-hidden=\"true\">\n          {data.map((d, i) =>\n            d.axisLabel == null ? null : (\n              <span\n                key={`${d.label}-${i}`}\n                className={cx(styles.lineLabel, d.axisLabelStrong && styles.lineLabelStrong)}\n                data-edge={i === 0 ? 'start' : i === n - 1 ? 'end' : undefined}\n                style={{ left: pct(xOf(i, n) / 100) }}\n              >\n                {d.axisLabel}\n              </span>\n            ),\n          )}\n        </div>\n      </div>\n      <div className={styles.srOnly}>\n        <table>\n          <caption>{label}</caption>\n          <thead>\n            <tr>\n              <th scope=\"col\">{categoryHeader}</th>\n              <th scope=\"col\">{seriesName}</th>\n              {hasComparison && comparisonName !== undefined && <th scope=\"col\">{comparisonName}</th>}\n            </tr>\n          </thead>\n          <tbody>\n            {data.map((d, i) => (\n              <tr key={`${d.label}-${i}`}>\n                <th scope=\"row\">{d.label}</th>\n                <td>{d.value == null ? null : (d.valueText ?? String(d.value))}</td>\n                {hasComparison && comparisonName !== undefined && <td>{d.comparison == null ? null : (d.comparisonText ?? String(d.comparison))}</td>}\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n      <ChartCaption caption={caption} action={action} actionEmphasis={actionEmphasis} linkComponent={linkComponent} />\n    </figure>\n  )\n}\n"],"names":["share","value","max","pct","n","scaleMax","values","ticks","top","t","Axis","jsx","styles","Grid","Fragment","ChartCaption","caption","action","actionEmphasis","linkComponent","jsxs","BackdropButton","BackdropBarChart","label","data","categoryHeader","valueHeader","highlightIndex","tone","yTicks","gridlines","directLabel","directLabelValue","directLabelNote","className","d","hasAxis","highlighted","anchor","anchorShare","direct","cx","i","BackdropBarList","items","hasLeading","item","progressStyles","xOf","runs","from","to","out","run","v","pathOf","pts","p","k","round","areaOf","first","_a","last","_b","lastIndex","BackdropLineChart","seriesName","comparisonName","dashedFrom","area","marker","end","comparisonEnd","comparisons","hasComparison","split","solid","dashed","lastMain","lastComparison","markerAt","markerValue","point","look","series","key"],"mappings":";;;;;AAqCA,SAASA,EAAMC,GAAeC,GAAqB;AACjD,SAAOA,IAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGD,IAAQC,CAAG,CAAC,IAAI;AAC3D;AAEA,SAASC,EAAIC,GAAmB;AAC9B,SAAO,GAAG,KAAK,MAAMA,IAAI,GAAK,IAAI,GAAG;AACvC;AAEA,SAASC,EAASC,GAAkBC,GAAwCL,GAAiC;AAC3G,MAAIA,MAAQ,UAAaA,IAAM,EAAG,QAAOA;AACzC,QAAMM,IAAM,KAAK,IAAI,GAAG,GAAGF,GAAQ,IAAIC,KAAS,CAAA,GAAI,IAAI,CAACE,MAAMA,EAAE,KAAK,CAAC;AACvE,SAAOD,IAAM,IAAIA,IAAM;AACzB;AAGA,SAASE,EAAK,EAAE,OAAAH,GAAO,KAAAL,KAAoD;AACzE,SACE,gBAAAS,EAAC,OAAA,EAAI,WAAWC,EAAO,MAAM,eAAY,QACtC,UAAAL,EAAM,IAAI,CAACE,MACV,gBAAAE,EAAC,QAAA,EAAmB,WAAWC,EAAO,MAAM,OAAO,EAAE,QAAQT,EAAIH,EAAMS,EAAE,OAAOP,CAAG,CAAC,EAAA,GACjF,UAAAO,EAAE,MAAA,GADMA,EAAE,KAEb,CACD,GACH;AAEJ;AAGA,SAASI,EAAK,EAAE,OAAAN,GAAO,KAAAL,KAAoD;AACzE,SACE,gBAAAS,EAAAG,GAAA,EACG,UAAAP,EACE,OAAO,CAACE,MAAMA,EAAE,QAAQ,CAAC,EACzB,IAAI,CAACA,wBACH,QAAA,EAAmB,WAAWG,EAAO,UAAU,OAAO,EAAE,QAAQT,EAAIH,EAAMS,EAAE,OAAOP,CAAG,CAAC,EAAA,EAAE,GAA/EO,EAAE,KAAgF,CAC9F,GACL;AAEJ;AAcA,SAASM,EAAa,EAAE,SAAAC,GAAS,QAAAC,GAAQ,gBAAAC,IAAiB,WAAW,eAAAC,KAA+B;AAClG,SAAIH,KAAW,QAAQC,MAAW,SAAkB,OAElD,gBAAAG,EAAC,OAAA,EAAI,WAAWR,EAAO,SACpB,UAAA;AAAA,IAAAI,KAAW,QAAQ,gBAAAL,EAAC,KAAA,EAAE,WAAWC,EAAO,aAAc,UAAAI,GAAQ;AAAA,IAC9DC,KACC,gBAAAN,EAACU,IAAA,EAAe,SAASH,GAAgB,MAAK,MAAK,MAAMD,EAAO,MAAM,eAAAE,GAA8B,SAASF,EAAO,SAAS,WAAWL,EAAO,eAC5I,YAAO,MAAA,CACV;AAAA,EAAA,GAEJ;AAEJ;AA2DO,SAASU,GAAiB;AAAA,EAC/B,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,KAAA5B;AAAA,EACA,aAAA6B;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,SAAAjB;AAAA,EACA,QAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAe;AACF,GAA0B;AACxB,QAAM1B,IAAMH;AAAA,IACVmB,EAAK,IAAI,CAACW,MAAMA,EAAE,KAAK;AAAA,IACvBN;AAAA,IACA3B;AAAA,EAAA,GAEIkC,IAAUP,MAAW,UAAaA,EAAO,SAAS,GAClDQ,IAAcV,MAAmB,UAAaA,KAAkB,KAAKA,IAAiBH,EAAK,SAASG,IAAiB,QACrHW,IAASD,KAAeb,EAAK,SAAS,GACtCe,IAAcD,KAAU,KAAKd,EAAKc,CAAM,IAAItC,EAAMwB,EAAKc,CAAM,EAAE,OAAO9B,CAAG,IAAI,GAC7EgC,IACJT,MACCC,KAAoB,QAAQC,KAAmB,OAC9C,gBAAAb,EAAAN,GAAA,EACG,UAAA;AAAA,IAAAkB,KAAoB,QAAQ,gBAAArB,EAAC,QAAA,EAAK,WAAWC,EAAO,aAAc,UAAAoB,GAAiB;AAAA,IACnFC,KAAmB,QAAQ,gBAAAtB,EAAC,UAAK,WAAWC,EAAO,YAAa,UAAAqB,EAAA,CAAgB;AAAA,EAAA,EAAA,CACnF,IACE;AAEN,2BACG,UAAA,EAAO,WAAWQ,EAAG7B,EAAO,OAAOA,EAAO,QAAQgB,CAAI,EAAE,GAAGM,CAAS,GAAG,cAAYX,GAAO,aAAWK,GACpG,UAAA;AAAA,IAAA,gBAAAR,EAAC,OAAA,EAAI,WAAWqB,EAAG7B,EAAO,OAAOwB,KAAWxB,EAAO,UAAU4B,MAAW,UAAa5B,EAAO,UAAU,GACnG,UAAA;AAAA,MAAAwB,KAAW,gBAAAzB,EAACD,GAAA,EAAK,OAAOmB,GAAQ,KAAKrB,GAAK;AAAA,MAC3C,gBAAAY,EAAC,OAAA,EAAI,WAAWqB,EAAG7B,EAAO,MAAMA,EAAO,OAAO,GAAG,eAAY,QAC1D,UAAA;AAAA,QAAAwB,KAAWN,KAAa,gBAAAnB,EAACE,GAAA,EAAK,OAAOgB,GAAQ,KAAKrB,GAAK;AAAA,QACxD,gBAAAG,EAAC,OAAA,EAAI,WAAWC,EAAO,MACpB,UAAAY,EAAK,IAAI,CAACW,GAAGO,MACZ,gBAAA/B,EAAC,QAAA,EAA6B,WAAWC,EAAO,MAC9C,UAAA,gBAAAD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW8B,EAAG7B,EAAO,KAAKyB,MAAgB,UAAaK,MAAML,IAAczB,EAAO,YAAYA,EAAO,QAAQ;AAAA,YAC7G,oBAAkB8B,MAAML,KAAe;AAAA,YACvC,OAAO,EAAE,QAAQlC,EAAIH,EAAMmC,EAAE,OAAO3B,CAAG,CAAC,EAAA;AAAA,UAAE;AAAA,QAAA,KAJnC,GAAG2B,EAAE,KAAK,IAAIO,CAAC,EAM1B,CACD,GACH;AAAA,QACA,gBAAA/B,EAAC,QAAA,EAAK,WAAWC,EAAO,SAAA,CAAU;AAAA,MAAA,GACpC;AAAA,MACC4B,MAAW,UACV,gBAAA7B,EAAC,OAAA,EAAI,WAAWC,EAAO,cACrB,4BAAC,OAAA,EAAI,WAAWA,EAAO,QAAQ,OAAO,EAAE,KAAKT,EAAI,IAAIoC,CAAW,KAC7D,UAAAC,EAAA,CACH,EAAA,CACF;AAAA,MAEF,gBAAA7B,EAAC,SAAI,WAAWC,EAAO,SAAS,eAAY,QACzC,UAAAY,EAAK,IAAI,CAACW,GAAGO,MACZ,gBAAAtB,EAAC,QAAA,EAA6B,WAAWqB,EAAG7B,EAAO,QAAQ8B,MAAML,KAAezB,EAAO,YAAY,GACjG,UAAA;AAAA,QAAA,gBAAAD,EAAC,QAAA,EAAK,WAAWC,EAAO,UAAW,YAAE,OAAM;AAAA,QAC1CuB,EAAE,UAAU,QAAQ,gBAAAxB,EAAC,UAAK,WAAWC,EAAO,SAAU,UAAAuB,EAAE,OAAA,CAAO;AAAA,MAAA,EAAA,GAFvD,GAAGA,EAAE,KAAK,IAAIO,CAAC,EAG1B,CACD,EAAA,CACH;AAAA,IAAA,GACF;AAAA,sBACC,OAAA,EAAI,WAAW9B,EAAO,QACrB,4BAAC,SAAA,EACC,UAAA;AAAA,MAAA,gBAAAD,EAAC,aAAS,UAAAY,EAAA,CAAM;AAAA,MAChB,gBAAAZ,EAAC,SAAA,EACC,UAAA,gBAAAS,EAAC,MAAA,EACC,UAAA;AAAA,QAAA,gBAAAT,EAAC,MAAA,EAAG,OAAM,OAAO,UAAAc,GAAe;AAAA,QAChC,gBAAAd,EAAC,MAAA,EAAG,OAAM,OAAO,UAAAe,EAAA,CAAY;AAAA,MAAA,EAAA,CAC/B,EAAA,CACF;AAAA,MACA,gBAAAf,EAAC,WACE,UAAAa,EAAK,IAAI,CAACW,GAAGO,wBACX,MAAA,EACC,UAAA;AAAA,QAAA,gBAAA/B,EAAC,MAAA,EAAG,OAAM,OAAO,UAAAwB,EAAE,UAAU,OAAO,GAAGA,EAAE,KAAK,KAAKA,EAAE,MAAM,KAAKA,EAAE,OAAM;AAAA,0BACvE,MAAA,EAAI,UAAAA,EAAE,aAAa,OAAOA,EAAE,KAAK,EAAA,CAAE;AAAA,MAAA,EAAA,GAF7B,GAAGA,EAAE,KAAK,IAAIO,CAAC,EAGxB,CACD,EAAA,CACH;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,IACA,gBAAA/B,EAACI,GAAA,EAAa,SAAAC,GAAkB,QAAAC,GAAgB,gBAAAC,GAAgC,eAAAC,EAAA,CAA8B;AAAA,EAAA,GAChH;AAEJ;AAsCO,SAASwB,GAAgB,EAAE,OAAApB,GAAO,OAAAqB,GAAO,KAAA1C,GAAK,WAAAgC,KAAmC;AACtF,QAAM1B,IAAMH;AAAA,IACVuC,EAAM,IAAI,CAACF,MAAMA,EAAE,KAAK;AAAA,IACxB;AAAA,IACAxC;AAAA,EAAA,GAEI2C,IAAaD,EAAM,KAAK,CAACF,MAAMA,EAAE,WAAW,IAAI;AACtD,SACE,gBAAA/B,EAAC,MAAA,EAAG,WAAW8B,EAAG7B,EAAO,SAASiC,KAAcjC,EAAO,gBAAgBsB,CAAS,GAAG,cAAYX,GAC5F,UAAAqB,EAAM,IAAI,CAACE,MACV,gBAAA1B,EAAC,MAAA,EAAkB,WAAWR,EAAO,QAAQ,aAAWkC,EAAK,QAAQ,OAClE,UAAA;AAAA,IAAAD,KACC,gBAAAlC,EAAC,UAAK,WAAWC,EAAO,YAAY,eAAY,QAC7C,YAAK,QAAA,CACR;AAAA,sBAED,QAAA,EAAK,WAAWA,EAAO,UAAW,YAAK,OAAM;AAAA,IAC7CkC,EAAK,QAAQ,OACZ,gBAAAnC,EAAC,UAAK,WAAWC,EAAO,SAAU,UAAAkC,EAAK,KAAA,CAAK,IAE5C,gBAAAnC,EAAC,QAAA,EAAK,WAAW8B,EAAGM,EAAe,OAAOnC,EAAO,UAAUkC,EAAK,SAAS,aAAaC,EAAe,cAAc,CAAC,GAAG,eAAY,QACjI,4BAAC,QAAA,EAAK,WAAWA,EAAe,SAAS,OAAO,EAAE,OAAO5C,EAAIH,EAAM8C,EAAK,OAAOtC,CAAG,CAAC,KAAK,GAC1F;AAAA,sBAED,QAAA,EAAK,WAAWiC,EAAG7B,EAAO,UAAUkC,EAAK,QAAQ,QAAQlC,EAAO,aAAa,GAAI,UAAAkC,EAAK,aAAa,OAAOA,EAAK,KAAK,EAAA,CAAE;AAAA,EAAA,EAAA,GAdhHA,EAAK,GAed,CACD,GACH;AAEJ;AAkEA,SAASE,EAAIN,GAAW,GAAmB;AACzC,SAAO,IAAI,IAAKA,KAAK,IAAI,KAAM,MAAM;AACvC;AAEA,SAASO,EAAK3C,GAA0CE,GAAa0C,IAAO,GAAGC,IAAK7C,EAAO,SAAS,GAAW;AAC7G,QAAM8C,IAAc,CAAA;AACpB,MAAIC,IAAY,CAAA;AAChB,WAASX,IAAIQ,GAAMR,KAAKS,GAAIT,KAAK;AAC/B,UAAMY,IAAIhD,EAAOoC,CAAC;AAClB,QAAIY,KAAK,MAAM;AACb,MAAID,EAAI,UAAQD,EAAI,KAAKC,CAAG,GAC5BA,IAAM,CAAA;AACN;AAAA,IACF;AACA,IAAAA,EAAI,KAAK,EAAE,GAAGL,EAAIN,GAAGpC,EAAO,MAAM,GAAG,GAAG,MAAMN,EAAMsD,GAAG9C,CAAG,IAAI,KAAK,GAAAkC,GAAG;AAAA,EACxE;AACA,SAAIW,EAAI,UAAQD,EAAI,KAAKC,CAAG,GACrBD;AACT;AAEA,SAASG,EAAOC,GAAqB;AACnC,SAAOA,EAAI,IAAI,CAACH,MAAQA,EAAI,IAAI,CAACI,GAAGC,MAAM,GAAGA,MAAM,IAAI,MAAM,GAAG,GAAGC,EAAMF,EAAE,CAAC,CAAC,IAAIE,EAAMF,EAAE,CAAC,CAAC,EAAE,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG;AACpH;AAEA,SAASG,GAAOJ,GAAqB;AACnC,SAAOA,EACJ,OAAO,CAACH,MAAQA,EAAI,SAAS,CAAC,EAC9B,IAAI,CAACA,MAAQ;;AACZ,UAAMQ,MAAQC,IAAAT,EAAI,CAAC,MAAL,gBAAAS,EAAQ,MAAK,GACrBC,MAAOC,IAAAX,EAAIA,EAAI,SAAS,CAAC,MAAlB,gBAAAW,EAAqB,MAAKH;AACvC,WAAO,GAAGN,EAAO,CAACF,CAAG,CAAC,CAAC,KAAKM,EAAMI,CAAI,CAAC,SAASJ,EAAME,CAAK,CAAC;AAAA,EAC9D,CAAC,EACA,KAAK,GAAG;AACb;AAEA,SAASF,EAAMvD,GAAmB;AAChC,SAAO,KAAK,MAAMA,IAAI,GAAG,IAAI;AAC/B;AAEA,SAAS6D,EAAU3D,GAAkD;AACnE,WAASoC,IAAIpC,EAAO,SAAS,GAAGoC,KAAK,GAAGA,IAAK,KAAIpC,EAAOoC,CAAC,KAAK,KAAM,QAAOA;AAC3E,SAAO;AACT;AAQO,SAASwB,GAAkB;AAAA,EAChC,OAAA3C;AAAA,EACA,MAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAA0C;AAAA,EACA,gBAAAC;AAAA,EACA,QAAAvC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,KAAA5B;AAAA,EACA,YAAAmE;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,eAAAC,IAAgB;AAAA,EAChB,SAAAzD;AAAA,EACA,QAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAe;AACF,GAA2B;AACzB,QAAM5B,IAASkB,EAAK,IAAI,CAACW,MAAMA,EAAE,KAAK,GAChCuC,IAAclD,EAAK,IAAI,CAACW,MAAMA,EAAE,UAAU,GAC1CwC,IAAgBD,EAAY,KAAK,CAACpB,MAAMA,KAAK,IAAI,GACjD9C,IAAMH;AAAA,IACV,CAAC,GAAGC,GAAQ,GAAGoE,CAAW,EAAE,OAAO,CAACpB,MAAmBA,KAAK,IAAI;AAAA,IAChEzB;AAAA,IACA3B;AAAA,EAAA,GAEIkC,IAAUP,MAAW,UAAaA,EAAO,SAAS,GAClDzB,IAAIoB,EAAK,QACToD,IAAQP,MAAe,UAAaA,KAAc,KAAKA,IAAajE,IAAI,IAAIiE,IAAa,QACzFQ,IAAQ5B,EAAK3C,GAAQE,GAAK,GAAGoE,KAASxE,IAAI,CAAC,GAC3C0E,IAASF,MAAU,SAAY3B,EAAK3C,GAAQE,GAAKoE,GAAOxE,IAAI,CAAC,IAAI,CAAA,GACjE2E,IAAWd,EAAU3D,CAAM,GAC3B0E,IAAiBf,EAAUS,CAAW,GACtCO,IAAWV,KAAUA,EAAO,SAAS,KAAKA,EAAO,QAAQnE,IAAImE,EAAO,QAAQ,QAC5EW,IAAcD,MAAa,SAAY3E,EAAO2E,CAAQ,IAAI,MAE1DE,IAAQ,CAACzC,GAAWY,GAAW8B,GAA2BC,GAA+BC,MAC7F,gBAAA3E;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAW8B,EAAG7B,EAAO,OAAOwE,MAAS,YAAYxE,EAAO,aAAayE,MAAW,gBAAgBzE,EAAO,eAAe;AAAA,MACtH,cAAYwE;AAAA,MACZ,eAAaC;AAAA,MACb,OAAO,EAAE,MAAMlF,EAAI6C,EAAIN,GAAGtC,CAAC,IAAI,GAAG,GAAG,QAAQD,EAAIH,EAAMsD,GAAG9C,CAAG,CAAC,EAAA;AAAA,IAAE;AAAA,IAJ3D8E;AAAA,EAAA;AAQT,SACE,gBAAAlE,EAAC,YAAO,WAAWqB,EAAG7B,EAAO,OAAOsB,CAAS,GAAG,cAAYX,GAC1D,UAAA;AAAA,IAAA,gBAAAH,EAAC,OAAA,EAAI,WAAWqB,EAAG7B,EAAO,OAAOwB,KAAWxB,EAAO,QAAQ,GACxD,UAAA;AAAA,MAAAwB,KAAW,gBAAAzB,EAACD,GAAA,EAAK,OAAOmB,GAAQ,KAAKrB,GAAK;AAAA,MAC3C,gBAAAY,EAAC,OAAA,EAAI,WAAWqB,EAAG7B,EAAO,MAAMA,EAAO,QAAQ,GAAG,eAAY,QAC3D,UAAA;AAAA,QAAAwB,KAAWN,KAAa,gBAAAnB,EAACE,GAAA,EAAK,OAAOgB,GAAQ,KAAKrB,GAAK;AAAA,QACxD,gBAAAG,EAAC,QAAA,EAAK,WAAWC,EAAO,SAAA,CAAU;AAAA,QAClC,gBAAAQ,EAAC,OAAA,EAAI,WAAWR,EAAO,OAAO,SAAQ,eAAc,qBAAoB,QAAO,WAAU,SACtF,UAAA;AAAA,UAAA0D,KAAQO,EAAM,SAAS,KAAK,gBAAAlE,EAAC,QAAA,EAAK,WAAWC,EAAO,MAAM,GAAGgD,GAAOiB,CAAK,EAAA,CAAG;AAAA,UAC5EF,KAAiB,gBAAAhE,EAAC,QAAA,EAAK,WAAW8B,EAAG7B,EAAO,MAAMA,EAAO,cAAc,GAAG,GAAG2C,EAAON,EAAKyB,GAAalE,CAAG,CAAC,GAAG;AAAA,UAC7GqE,EAAM,SAAS,KAAK,gBAAAlE,EAAC,QAAA,EAAK,WAAWC,EAAO,MAAM,GAAG2C,EAAOsB,CAAK,EAAA,CAAG;AAAA,UACpEC,EAAO,SAAS,KAAK,gBAAAnE,EAAC,UAAK,WAAW8B,EAAG7B,EAAO,MAAMA,EAAO,UAAU,GAAG,GAAG2C,EAAOuB,CAAM,EAAA,CAAG;AAAA,QAAA,GAChG;AAAA,QACCG,MAAa,UACZ,gBAAAtE,EAAC,QAAA,EAAK,WAAWC,EAAO,QAAQ,OAAO,EAAE,MAAMT,EAAI6C,EAAIiC,GAAU7E,CAAC,IAAI,GAAG,EAAA,GACtE,WAAAmE,KAAA,gBAAAA,EAAQ,UAAS,QAAQ,gBAAA5D,EAAC,QAAA,EAAK,WAAWC,EAAO,aAAc,UAAA2D,EAAO,MAAA,CAAM,EAAA,CAC/E;AAAA,QAEDU,MAAa,UAAaC,KAAe,QAAQD,MAAaF,KAAYI,EAAMF,GAAUC,GAAa,UAAU,QAAQ,QAAQ;AAAA,QACjIP,KAAiBF,MAAkB,UAAUO,KAAkB,KAAKG,EAAMH,GAAgBN,EAAYM,CAAc,GAAaP,GAAe,cAAc,gBAAgB;AAAA,QAC9KM,KAAY,MAAMP,MAAQ,UAAUS,MAAaF,MAAaI,EAAMJ,GAAUzE,EAAOyE,CAAQ,GAAaP,MAAQ,WAAW,WAAW,UAAU,QAAQ,KAAK;AAAA,MAAA,GAClK;AAAA,wBACC,OAAA,EAAI,WAAW5D,EAAO,YAAY,eAAY,QAC5C,UAAAY,EAAK;AAAA,QAAI,CAACW,GAAGO,MACZP,EAAE,aAAa,OAAO,OACpB,gBAAAxB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAW8B,EAAG7B,EAAO,WAAWuB,EAAE,mBAAmBvB,EAAO,eAAe;AAAA,YAC3E,aAAW8B,MAAM,IAAI,UAAUA,MAAMtC,IAAI,IAAI,QAAQ;AAAA,YACrD,OAAO,EAAE,MAAMD,EAAI6C,EAAIN,GAAGtC,CAAC,IAAI,GAAG,EAAA;AAAA,YAEjC,UAAA+B,EAAE;AAAA,UAAA;AAAA,UALE,GAAGA,EAAE,KAAK,IAAIO,CAAC;AAAA,QAAA;AAAA,MAMtB,EAEJ,CACF;AAAA,IAAA,GACF;AAAA,sBACC,OAAA,EAAI,WAAW9B,EAAO,QACrB,4BAAC,SAAA,EACC,UAAA;AAAA,MAAA,gBAAAD,EAAC,aAAS,UAAAY,EAAA,CAAM;AAAA,MAChB,gBAAAZ,EAAC,SAAA,EACC,UAAA,gBAAAS,EAAC,MAAA,EACC,UAAA;AAAA,QAAA,gBAAAT,EAAC,MAAA,EAAG,OAAM,OAAO,UAAAc,GAAe;AAAA,QAChC,gBAAAd,EAAC,MAAA,EAAG,OAAM,OAAO,UAAAwD,GAAW;AAAA,QAC3BQ,KAAiBP,MAAmB,4BAAc,MAAA,EAAG,OAAM,OAAO,UAAAA,EAAA,CAAe;AAAA,MAAA,EAAA,CACpF,EAAA,CACF;AAAA,MACA,gBAAAzD,EAAC,WACE,UAAAa,EAAK,IAAI,CAACW,GAAGO,wBACX,MAAA,EACC,UAAA;AAAA,QAAA,gBAAA/B,EAAC,MAAA,EAAG,OAAM,OAAO,UAAAwB,EAAE,OAAM;AAAA,QACzB,gBAAAxB,EAAC,MAAA,EAAI,UAAAwB,EAAE,SAAS,OAAO,OAAQA,EAAE,aAAa,OAAOA,EAAE,KAAK,EAAA,CAAG;AAAA,QAC9DwC,KAAiBP,MAAmB,UAAa,gBAAAzD,EAAC,QAAI,UAAAwB,EAAE,cAAc,OAAO,OAAQA,EAAE,kBAAkB,OAAOA,EAAE,UAAU,EAAA,CAAG;AAAA,MAAA,EAAA,GAHzH,GAAGA,EAAE,KAAK,IAAIO,CAAC,EAIxB,CACD,EAAA,CACH;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,IACA,gBAAA/B,EAACI,GAAA,EAAa,SAAAC,GAAkB,QAAAC,GAAgB,gBAAAC,GAAgC,eAAAC,EAAA,CAA8B;AAAA,EAAA,GAChH;AAEJ;"}

package/dist/components/Backdrop/BackdropCharts.module.css.js

@@ -0,0 +1,109 @@
+const n = "_srOnly_mn7dx_29", _ = "_chart_mn7dx_40", t = "_frame_mn7dx_60", a = "_withAxis_mn7dx_72", e = "_withDirect_mn7dx_80", o = "_axis_mn7dx_95", r = "_tick_mn7dx_100", i = "_plot_mn7dx_110", s = "_barPlot_mn7dx_115", c = "_linePlot_mn7dx_119", l = "_gridline_mn7dx_123", d = "_baseline_mn7dx_124", x = "_bars_mn7dx_144", m = "_slot_mn7dx_150", b = "_bar_mn7dx_115", L = "_barStrong_mn7dx_164", p = "_barMuted_mn7dx_168", u = "_xLabels_mn7dx_172", g = "_xLabel_mn7dx_172", h = "_xPrimary_mn7dx_188", k = "_xDetail_mn7dx_193", w = "_xLabelStrong_mn7dx_198", C = "_directColumn_mn7dx_211", D = "_direct_mn7dx_211", P = "_directValue_mn7dx_227", S = "_directNote_mn7dx_234", V = "_caption_mn7dx_242", y = "_captionText_mn7dx_251", A = "_captionAction_mn7dx_259", M = "_lines_mn7dx_265", N = "_line_mn7dx_119", T = "_lineComparison_mn7dx_282", f = "_lineDashed_mn7dx_286", H = "_area_mn7dx_290", O = "_point_mn7dx_295", R = "_pointComparison_mn7dx_304", j = "_pointHollow_mn7dx_308", q = "_marker_mn7dx_313", v = "_markerLabel_mn7dx_321", z = "_lineLabels_mn7dx_332", B = "_lineLabel_mn7dx_332", E = "_lineLabelStrong_mn7dx_356", F = "_barList_mn7dx_365", G = "_barListLeading_mn7dx_377", I = "_barRow_mn7dx_381", J = "_barLeading_mn7dx_389", K = "_barLabel_mn7dx_397", Q = "_barTrack_mn7dx_405", U = "_barNote_mn7dx_409", W = "_barValue_mn7dx_415", X = "_barValueMuted_mn7dx_423", Y = {
+  srOnly: n,
+  chart: _,
+  "tone-success": "_tone-success_mn7dx_54",
+  frame: t,
+  withAxis: a,
+  withDirect: e,
+  axis: o,
+  tick: r,
+  plot: i,
+  barPlot: s,
+  linePlot: c,
+  gridline: l,
+  baseline: d,
+  bars: x,
+  slot: m,
+  bar: b,
+  barStrong: L,
+  barMuted: p,
+  xLabels: u,
+  xLabel: g,
+  xPrimary: h,
+  xDetail: k,
+  xLabelStrong: w,
+  directColumn: C,
+  direct: D,
+  directValue: P,
+  directNote: S,
+  caption: V,
+  captionText: y,
+  captionAction: A,
+  lines: M,
+  line: N,
+  lineComparison: T,
+  lineDashed: f,
+  area: H,
+  point: O,
+  pointComparison: R,
+  pointHollow: j,
+  marker: q,
+  markerLabel: v,
+  lineLabels: z,
+  lineLabel: B,
+  lineLabelStrong: E,
+  barList: F,
+  barListLeading: G,
+  barRow: I,
+  barLeading: J,
+  barLabel: K,
+  barTrack: Q,
+  barNote: U,
+  barValue: W,
+  barValueMuted: X
+};
+export {
+  H as area,
+  o as axis,
+  b as bar,
+  K as barLabel,
+  J as barLeading,
+  F as barList,
+  G as barListLeading,
+  p as barMuted,
+  U as barNote,
+  s as barPlot,
+  I as barRow,
+  L as barStrong,
+  Q as barTrack,
+  W as barValue,
+  X as barValueMuted,
+  x as bars,
+  d as baseline,
+  V as caption,
+  A as captionAction,
+  y as captionText,
+  _ as chart,
+  Y as default,
+  D as direct,
+  C as directColumn,
+  S as directNote,
+  P as directValue,
+  t as frame,
+  l as gridline,
+  N as line,
+  T as lineComparison,
+  f as lineDashed,
+  B as lineLabel,
+  E as lineLabelStrong,
+  z as lineLabels,
+  c as linePlot,
+  M as lines,
+  q as marker,
+  v as markerLabel,
+  i as plot,
+  O as point,
+  R as pointComparison,
+  j as pointHollow,
+  m as slot,
+  n as srOnly,
+  r as tick,
+  a as withAxis,
+  e as withDirect,
+  k as xDetail,
+  g as xLabel,
+  w as xLabelStrong,
+  u as xLabels,
+  h as xPrimary
+};
+//# sourceMappingURL=BackdropCharts.module.css.js.map

package/dist/components/Backdrop/BackdropCharts.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropCharts.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Backdrop/BackdropChrome.d.ts

@@ -0,0 +1,26 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+interface ChromeState {
+    openKey: string | null;
+    setOpenKey: Dispatch<SetStateAction<string | null>>;
+}
+/** The chrome's one open panel. Put it around the frame; its children may be Server Components. */
+export declare function BackdropChrome({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface BackdropPanelControl {
+    /** True while this key is the chrome's open panel. */
+    open: boolean;
+    /** Opening closes whatever else was open, in the same update. Closing closes only this key. */
+    setOpen: (open: boolean) => void;
+}
+/**
+ * A control that opens a chrome panel it does not draw: the Hub's "All apps"
+ * card, a ⌘K shortcut. Throws outside a BackdropChrome, because an opener that
+ * silently does nothing survives every screenshot review.
+ */
+export declare function useBackdropPanel(key: string): BackdropPanelControl;
+/** For the overlays themselves: null outside a BackdropChrome, or with no key, so they keep their own state. */
+export declare function useChromePanel(key: string | undefined): BackdropPanelControl | null;
+/** For a modal dialog, which claims the chrome while it is mounted (see BackdropDialog). */
+export declare function useChromeState(): ChromeState | null;
+export {};

package/dist/components/Backdrop/BackdropChrome.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as c } from "react/jsx-runtime";
+import { useState as i, useMemo as l, useContext as u, createContext as a, useCallback as p } from "react";
+const r = a(null);
+function d({ children: n }) {
+  const [e, t] = i(null), o = l(() => ({ openKey: e, setOpenKey: t }), [e]);
+  return /* @__PURE__ */ c(r.Provider, { value: o, children: n });
+}
+function s(n, e) {
+  return p(
+    (t) => {
+      !n || e === void 0 || n((o) => t ? e : o === e ? null : o);
+    },
+    [n, e]
+  );
+}
+function m(n) {
+  const e = u(r), t = s(e == null ? void 0 : e.setOpenKey, n);
+  if (!e) throw new Error(`useBackdropPanel('${n}') is outside a BackdropChrome`);
+  return { open: e.openKey === n, setOpen: t };
+}
+function x(n) {
+  const e = u(r), t = s(e == null ? void 0 : e.setOpenKey, n);
+  return !e || n === void 0 ? null : { open: e.openKey === n, setOpen: t };
+}
+function P() {
+  return u(r);
+}
+export {
+  d as BackdropChrome,
+  m as useBackdropPanel,
+  x as useChromePanel,
+  P as useChromeState
+};
+//# sourceMappingURL=BackdropChrome.js.map

package/dist/components/Backdrop/BackdropChrome.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropChrome.js","sources":["../../../src/components/Backdrop/BackdropChrome.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useCallback, useContext, useMemo, useState, type Dispatch, type ReactNode, type SetStateAction } from 'react'\n\n/*\n * Which one chrome panel is open (Batch 7, ADR-0009 addendum, 12 Nov 2026).\n *\n * The strip's popovers, the rail's All apps panel and the search dialog are\n * separate client islands in a host that streams its page, so none can hold\n * another's state. Each overlay's own dismissal (Escape, an outside press,\n * focus leaving) is enough while a person only opens panels by pressing them,\n * and not otherwise: ⌘K is a keystroke, so an open popover hears no outside\n * press and stays up behind the search dialog; and a control in the page (the\n * Hub's \"All apps\" card) can open a panel the chrome draws.\n *\n * So one key for the whole chrome, held here. Wrapping server-rendered\n * children costs them nothing: they stay Server Components. An overlay joins\n * by naming its key (`panel`); one that names none keeps its own state exactly\n * as before, which is why no approved story moves.\n */\n\ninterface ChromeState {\n  openKey: string | null\n  setOpenKey: Dispatch<SetStateAction<string | null>>\n}\n\nconst ChromeContext = createContext<ChromeState | null>(null)\n\n/** The chrome's one open panel. Put it around the frame; its children may be Server Components. */\nexport function BackdropChrome({ children }: { children: ReactNode }) {\n  const [openKey, setOpenKey] = useState<string | null>(null)\n  const value = useMemo(() => ({ openKey, setOpenKey }), [openKey])\n  return <ChromeContext.Provider value={value}>{children}</ChromeContext.Provider>\n}\n\nexport interface BackdropPanelControl {\n  /** True while this key is the chrome's open panel. */\n  open: boolean\n  /** Opening closes whatever else was open, in the same update. Closing closes only this key. */\n  setOpen: (open: boolean) => void\n}\n\n/*\n * Both rules are applied to the current key, not the one this render saw: a\n * close from a panel that is already shut must not shut the panel that\n * replaced it, and an open must not wait for an effect, or two panels paint\n * together for a frame.\n */\nfunction usePanelSetter(setOpenKey: Dispatch<SetStateAction<string | null>> | undefined, key: string | undefined) {\n  return useCallback(\n    (next: boolean) => {\n      if (!setOpenKey || key === undefined) return\n      setOpenKey((current) => (next ? key : current === key ? null : current))\n    },\n    [setOpenKey, key],\n  )\n}\n\n/**\n * A control that opens a chrome panel it does not draw: the Hub's \"All apps\"\n * card, a ⌘K shortcut. Throws outside a BackdropChrome, because an opener that\n * silently does nothing survives every screenshot review.\n */\nexport function useBackdropPanel(key: string): BackdropPanelControl {\n  const chrome = useContext(ChromeContext)\n  const setOpen = usePanelSetter(chrome?.setOpenKey, key)\n  if (!chrome) throw new Error(`useBackdropPanel('${key}') is outside a BackdropChrome`)\n  return { open: chrome.openKey === key, setOpen }\n}\n\n/** For the overlays themselves: null outside a BackdropChrome, or with no key, so they keep their own state. */\nexport function useChromePanel(key: string | undefined): BackdropPanelControl | null {\n  const chrome = useContext(ChromeContext)\n  const setOpen = usePanelSetter(chrome?.setOpenKey, key)\n  if (!chrome || key === undefined) return null\n  return { open: chrome.openKey === key, setOpen }\n}\n\n/** For a modal dialog, which claims the chrome while it is mounted (see BackdropDialog). */\nexport function useChromeState(): ChromeState | null {\n  return useContext(ChromeContext)\n}\n"],"names":["ChromeContext","createContext","BackdropChrome","children","openKey","setOpenKey","useState","value","useMemo","jsx","usePanelSetter","key","useCallback","next","current","useBackdropPanel","chrome","useContext","setOpen","useChromePanel","useChromeState"],"mappings":";;;AA0BA,MAAMA,IAAgBC,EAAkC,IAAI;AAGrD,SAASC,EAAe,EAAE,UAAAC,KAAqC;AACpE,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAwB,IAAI,GACpDC,IAAQC,EAAQ,OAAO,EAAE,SAAAJ,GAAS,YAAAC,MAAe,CAACD,CAAO,CAAC;AAChE,SAAO,gBAAAK,EAACT,EAAc,UAAd,EAAuB,OAAAO,GAAe,UAAAJ,EAAA,CAAS;AACzD;AAeA,SAASO,EAAeL,GAAiEM,GAAyB;AAChH,SAAOC;AAAA,IACL,CAACC,MAAkB;AACjB,MAAI,CAACR,KAAcM,MAAQ,UAC3BN,EAAW,CAACS,MAAaD,IAAOF,IAAMG,MAAYH,IAAM,OAAOG,CAAQ;AAAA,IACzE;AAAA,IACA,CAACT,GAAYM,CAAG;AAAA,EAAA;AAEpB;AAOO,SAASI,EAAiBJ,GAAmC;AAClE,QAAMK,IAASC,EAAWjB,CAAa,GACjCkB,IAAUR,EAAeM,KAAA,gBAAAA,EAAQ,YAAYL,CAAG;AACtD,MAAI,CAACK,EAAQ,OAAM,IAAI,MAAM,qBAAqBL,CAAG,gCAAgC;AACrF,SAAO,EAAE,MAAMK,EAAO,YAAYL,GAAK,SAAAO,EAAA;AACzC;AAGO,SAASC,EAAeR,GAAsD;AACnF,QAAMK,IAASC,EAAWjB,CAAa,GACjCkB,IAAUR,EAAeM,KAAA,gBAAAA,EAAQ,YAAYL,CAAG;AACtD,SAAI,CAACK,KAAUL,MAAQ,SAAkB,OAClC,EAAE,MAAMK,EAAO,YAAYL,GAAK,SAAAO,EAAA;AACzC;AAGO,SAASE,IAAqC;AACnD,SAAOH,EAAWjB,CAAa;AACjC;"}

package/dist/components/Backdrop/BackdropConversation.d.ts

@@ -0,0 +1,67 @@
+import { HTMLAttributes, InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
+export interface BackdropThreadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'> {
+    /** The log's accessible name, translated by the caller: "Conversation with Julien Morel". */
+    label: string;
+    /** BackdropMessage and BackdropDaySeparator elements, oldest first. */
+    children: ReactNode;
+}
+export declare function BackdropThread({ label, children, className, tabIndex, ...rest }: BackdropThreadProps): import("react").JSX.Element;
+/** `incoming`: from the other side, hairline ring, left. `outgoing`: from this person, panel grey, right. */
+export type BackdropMessageDirection = 'incoming' | 'outgoing';
+export interface BackdropMessageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    direction?: BackdropMessageDirection;
+    /** The message: text, or text and a nested block (a next-step card). */
+    children: ReactNode;
+    /** Under the bubble, muted: "Julien · 16:20", "You · 9:40". Names the sender for everyone. */
+    caption?: ReactNode;
+    /** A mark beside the bubble on the sender's side (an assistant's logo, a person's avatar). Decorative. */
+    leading?: ReactNode;
+}
+/** One message. Bubble 340 wide at most, 14/21 text, the 4px tail corner on the sender's side. */
+export declare function BackdropMessage({ direction, children, caption, leading, className, ...rest }: BackdropMessageProps): import("react").JSX.Element;
+export interface BackdropDaySeparatorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** "Monday", "Today", "Monday · Invitation accepted". */
+    children: ReactNode;
+}
+/** A day's label, centred between messages: 13/18 500 muted. Read as plain text in the log. */
+export declare function BackdropDaySeparator({ children, className, ...rest }: BackdropDaySeparatorProps): import("react").JSX.Element;
+/** `reply` (default): the thread's reply box. `ask`: the one-line question bar. */
+export type BackdropComposerLook = 'reply' | 'ask';
+interface BackdropComposerBase {
+    /** The field's accessible name, translated by the caller: "Reply to Julien Morel", "Ask a question". */
+    label: string;
+    /** The send button's words (`reply`) or accessible name (`ask`): "Send". */
+    sendLabel: string;
+    /** The send icon (`send` in src/backdrop-icons.ts), 18px in `reply`, 16px in `ask`. */
+    sendIcon: ReactNode;
+    /**
+     * One-press chips: `reply` shows them under the field (quick inserts),
+     * `ask` above it (suggested questions). BackdropChip `kind="action"`.
+     */
+    suggestions?: ReactNode;
+    /** The chips' group name, translated by the caller: "Quick inserts", "Suggested questions". */
+    suggestionsLabel?: string;
+    /** On the composer's outer box. Every other prop reaches the native field. */
+    className?: string;
+}
+export interface BackdropComposerReplyProps extends BackdropComposerBase, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> {
+    look?: 'reply';
+    /** A line above the field, 13/18 500: "Draft ready". It describes the field. */
+    heading?: ReactNode;
+    /** A 16px icon before the heading. Decorative. */
+    headingIcon?: ReactNode;
+    /** The footer's start: a ghost BackdropButton ("Rewrite · 21 tokens"). */
+    secondaryAction?: ReactNode;
+    /** Muted, before Send: a cost or a channel note ("Uses 9 tokens"). It describes the send button. */
+    note?: ReactNode;
+}
+export interface BackdropComposerAskProps extends BackdropComposerBase, Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type' | 'size'> {
+    look: 'ask';
+    heading?: never;
+    headingIcon?: never;
+    secondaryAction?: never;
+    note?: never;
+}
+export type BackdropComposerProps = BackdropComposerReplyProps | BackdropComposerAskProps;
+export declare function BackdropComposer(props: BackdropComposerProps): import("react").JSX.Element;
+export {};

package/dist/components/Backdrop/BackdropConversation.js

@@ -0,0 +1,76 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { useId as A } from "react";
+import e from "./BackdropConversation.module.css.js";
+import { cx as c } from "./cx.js";
+import { BackdropIconButton as C, BackdropButton as D } from "./BackdropButton.js";
+import { BackdropTextarea as H } from "./BackdropFields.js";
+function K({ label: n, children: s, className: o, tabIndex: l = 0, ...r }) {
+  return /* @__PURE__ */ a("div", { role: "log", "aria-label": n, tabIndex: l, className: c(e.thread, o), ...r, children: /* @__PURE__ */ a("div", { className: e.threadInner, children: s }) });
+}
+function O({ direction: n = "incoming", children: s, caption: o, leading: l, className: r, ...d }) {
+  return /* @__PURE__ */ i("div", { className: c(e.message, n === "outgoing" ? e.outgoing : e.incoming, r), ...d, children: [
+    l != null && /* @__PURE__ */ a("span", { className: e.messageLeading, "aria-hidden": "true", children: l }),
+    /* @__PURE__ */ i("div", { className: e.messageBody, children: [
+      /* @__PURE__ */ a("div", { className: e.bubble, children: s }),
+      o != null && /* @__PURE__ */ a("p", { className: e.caption, children: o })
+    ] })
+  ] });
+}
+function P({ children: n, className: s, ...o }) {
+  return /* @__PURE__ */ a("div", { className: c(e.day, s), ...o, children: /* @__PURE__ */ a("span", { children: n }) });
+}
+function M(...n) {
+  const s = n.filter(Boolean).join(" ");
+  return s === "" ? void 0 : s;
+}
+function f({ children: n, label: s }) {
+  return /* @__PURE__ */ a("div", { role: s !== void 0 ? "group" : void 0, "aria-label": s, className: e.suggestions, children: n });
+}
+function Q(n) {
+  const s = A();
+  if (n.look === "ask") {
+    const { look: x, label: L, sendLabel: j, sendIcon: S, suggestions: v, suggestionsLabel: T, className: $, ...z } = n;
+    return /* @__PURE__ */ i("div", { "data-look": x, className: c(e.composer, $), children: [
+      v != null && /* @__PURE__ */ a(f, { label: T, children: v }),
+      /* @__PURE__ */ i("div", { className: e.askBox, children: [
+        /* @__PURE__ */ a("input", { type: "text", "aria-label": L, ...z, className: e.askInput }),
+        /* @__PURE__ */ a(C, { type: "submit", variant: "ink", size: "sm", label: j, icon: S })
+      ] })
+    ] });
+  }
+  const {
+    look: o = "reply",
+    label: l,
+    sendLabel: r,
+    sendIcon: d,
+    suggestions: t,
+    suggestionsLabel: y,
+    heading: m,
+    headingIcon: u,
+    secondaryAction: B,
+    note: g,
+    className: I,
+    ...p
+  } = n, h = `${s}-heading`, b = `${s}-note`, N = m != null, k = g != null;
+  return /* @__PURE__ */ i("div", { "data-look": o, className: c(e.composer, I), children: [
+    N && /* @__PURE__ */ i("p", { id: h, className: e.heading, children: [
+      u != null && /* @__PURE__ */ a("span", { className: e.headingIcon, "aria-hidden": "true", children: u }),
+      /* @__PURE__ */ a("span", { children: m })
+    ] }),
+    /* @__PURE__ */ a(H, { "aria-label": l, ...p, "aria-describedby": M(N && h, p["aria-describedby"]) }),
+    t != null && /* @__PURE__ */ a(f, { label: y, children: t }),
+    /* @__PURE__ */ i("div", { className: e.footer, children: [
+      B,
+      /* @__PURE__ */ a("span", { className: e.spacer }),
+      k && /* @__PURE__ */ a("span", { id: b, className: e.note, children: g }),
+      /* @__PURE__ */ a(D, { type: "submit", variant: "primary", icon: d, "aria-describedby": k ? b : void 0, children: r })
+    ] })
+  ] });
+}
+export {
+  Q as BackdropComposer,
+  P as BackdropDaySeparator,
+  O as BackdropMessage,
+  K as BackdropThread
+};
+//# sourceMappingURL=BackdropConversation.js.map