@bongos/core 1.19.512 → 1.19.513

package/modules/hall-ui/public/hall-kit.js

@@ -607,6 +607,306 @@
       `<img class="ship-visual-thumb" src="${esc(url)}" alt="${esc(alt)}" loading="lazy"></a>`;
   }
 
+  // ---- charts (task 1003445) ------------------------------------------------
+  //
+  // Charts were the one primitive the kit never got, which is exactly why the
+  // hall grew FOUR drawing sites that did not know about each other. Three of
+  // them draw the SAME horizontal bar: the Curve's "kinds of work shipped"
+  // (hall-render.js), Watch's Review-quality trend (watch.js), and the
+  // profile's craft mix (profile-charts.js `mixChart`). The fourth is the
+  // Curve's line chart, `sparkline()`. The module's hard rule names
+  // pager/filter/tab/rail and stops, so nothing failed when a fifth copy was
+  // one paste away.
+  //
+  // Two shapes cover every charted surface the hall has: a LINE (with an
+  // optional running total, which is what a treasury or "works by now" series
+  // wants) and a horizontal BAR SERIES. Pure string builders like the rest of
+  // the kit — no state, no render loop, no measuring pass.
+  //
+  // Colour is the caller's on a line, because the Curve spends four different
+  // accents across its four charts; `color` therefore stays a CSS value rather
+  // than becoming an enum. Bars take a `tone` instead, since the three call
+  // sites differed only in tone (accent vs ink) and geometry — and geometry
+  // rides component custom properties, so a fifth chart needs no new CSS and
+  // no new drawing code.
+
+  const CHART_W = 260;
+  const CHART_H = 46;
+  const CHART_PAD = 3;
+
+  // A CSS length, for a value that lands in a style attribute rather than in
+  // text — so it is WHITELISTED, not escaped: escaping would leave a ';' free
+  // to end the declaration and start another.
+  //
+  // Both halves are load-bearing. The positive charset admits letters and
+  // parentheses (it has to: `minmax(72px, 110px)`, `calc(100% - 4px)`), which
+  // means `url(...)` is spellable within it — so the negative test is what
+  // actually stops a track pulling a remote asset, and is not the redundancy
+  // it looks like. Hoisted to module scope: these ran per option, per render.
+  const CSS_LEN_OK = /^[0-9a-z%.,()\s+*/-]+$/i;
+  const CSS_LEN_BAD = /url|var\s*\(|[;{}:]/i;
+  const CSS_LEN = (v) => {
+    const s = String(v);
+    return CSS_LEN_OK.test(s) && !CSS_LEN_BAD.test(s) ? s : '';
+  };
+
+  // Coerce to finite numbers. A gap-filled feed sends nulls, and a null must
+  // read as zero rather than poisoning a min/max or a running sum.
+  function chartNums(values) {
+    return (values || []).map((v) => (Number.isFinite(Number(v)) ? Number(v) : 0));
+  }
+
+  // Running total, for a series whose question is "how much by now" rather
+  // than "how much that day".
+  function cumulate(values) {
+    let run = 0;
+    return chartNums(values).map((v) => (run += v));
+  }
+
+  // The line geometry, separated from the markup so a chart that needs the
+  // maths without this SVG can take just this. Returns { points, x, y, nums }.
+  //
+  // There is deliberately no `cumulative` option: `cumulate` is exported, so a
+  // running-total line is `sparklineHtml(OTBKit.cumulate(values))` — one way to
+  // do it rather than two, and no option whose only exercise is its own test.
+  function linePoints(values, opts = {}) {
+    const W = opts.width || CHART_W;
+    const H = opts.height || CHART_H;
+    const pad = opts.pad === undefined ? CHART_PAD : opts.pad;
+    const nums = chartNums(values);
+    const n = nums.length;
+    // A flat series has span 0 and would divide by zero; 1 puts it mid-box.
+    const min = n ? Math.min(...nums) : 0;
+    const span = (n ? Math.max(...nums) : 0) - min || 1;
+    const x = (i) => (n === 1 ? W / 2 : pad + (i * (W - 2 * pad)) / (n - 1));
+    const y = (v) => H - pad - ((v - min) / span) * (H - 2 * pad);
+    return {
+      nums, x, y, width: W, height: H, pad,
+      points: nums.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(' '),
+    };
+  }
+
+  // A line + filled area. opts: { width, height, color, ariaLabel }
+  function sparklineHtml(values, opts = {}) {
+    const g = linePoints(values, opts);
+    const color = opts.color || 'var(--accent)';
+    if (!g.nums.length) {
+      return `<svg class="kit-spark" viewBox="0 0 ${g.width} ${g.height}" preserveAspectRatio="none"`
+        + ' role="img" aria-label="no data"></svg>';
+    }
+    const last = g.nums[g.nums.length - 1];
+    const area = `${g.pad},${g.height - g.pad} ${g.points} ${g.width - g.pad},${g.height - g.pad}`;
+    const label = opts.ariaLabel || `trend, latest ${last}`;
+    return `<svg class="kit-spark" viewBox="0 0 ${g.width} ${g.height}" preserveAspectRatio="none"`
+      + ` role="img" aria-label="${esc(label)}">`
+      + `<polyline class="kit-spark__area" points="${area}" fill="${esc(color)}" />`
+      + `<polyline class="kit-spark__line" points="${g.points}" fill="none" stroke="${esc(color)}" />`
+      // One point draws no line, so it gets a dot or the chart reads as empty.
+      + (g.nums.length === 1
+        ? `<circle cx="${g.x(0).toFixed(1)}" cy="${g.y(last).toFixed(1)}" r="2.4" fill="${esc(color)}" />`
+        : '')
+      + '</svg>';
+  }
+
+  // Horizontal labelled bars. rows: [{ label, value, valueLabel }].
+  // opts: { max, tone: 'accent'|'neutral', labelWidth, valueWidth, barHeight,
+  //         pill, ariaLabel, list }
+  //
+  // `max` is the caller's when several series must share one scale; otherwise
+  // the largest value here. It floors at 1 so an all-zero set draws empty
+  // tracks instead of dividing by zero.
+  function barSeriesHtml(rows, opts = {}) {
+    const list = (rows || []).filter((r) => r && r.label !== undefined && r.label !== null);
+    if (!list.length) return '';
+    const vals = list.map((r) => (Number.isFinite(Number(r.value)) ? Number(r.value) : 0));
+    const givenMax = Number(opts.max);
+    const max = Number.isFinite(givenMax) && givenMax > 0 ? givenMax : Math.max(1, ...vals);
+    // Geometry and tone ride custom properties, so a caller differs from the
+    // others by an OPTION and never by a second class family. Values are
+    // CSS-literal, so they are whitelisted rather than escaped — an arbitrary
+    // string in a style attribute is how a caller smuggles in a declaration.
+    const cssLen = CSS_LEN;
+    const radius = opts.pill ? 'var(--radius-pill)' : cssLen(opts.radius);
+    const style = [
+      opts.labelWidth ? `--kit-bars-label-w:${cssLen(opts.labelWidth)}` : '',
+      opts.valueWidth ? `--kit-bars-val-w:${cssLen(opts.valueWidth)}` : '',
+      opts.barHeight ? `--kit-bars-h:${cssLen(opts.barHeight)}` : '',
+      radius ? `--kit-bars-radius:${radius}` : '',
+      opts.track === 'soft' ? '--kit-bars-track:var(--rule-soft)' : '',
+    ].filter((d) => d && !d.endsWith(':')).join(';');
+    // `list` opts in to list semantics — the profile's mix is announced as a
+    // list; the Curve's kinds are decoration beside a figure that already
+    // names them. The track is aria-hidden either way: it carries no
+    // information the value cell does not already say in words.
+    const roleAttr = opts.list ? ' role="list"' : '';
+    const rowRole = opts.list ? ' role="listitem"' : '';
+    return `<div class="kit-bars${opts.tone === 'neutral' ? ' kit-bars--neutral' : ''}"`
+      + (style ? ` style="${esc(style)}"` : '')
+      + roleAttr
+      + (opts.ariaLabel ? ` aria-label="${esc(opts.ariaLabel)}"` : '')
+      + '>'
+      + list.map((r, i) => {
+        const w = Math.round((vals[i] / max) * 100);
+        const val = r.valueLabel === undefined || r.valueLabel === null
+          ? String(vals[i])
+          : String(r.valueLabel);
+        return `<div class="kit-bars__row"${rowRole}>`
+          + `<span class="kit-bars__label">${esc(r.label)}</span>`
+          + `<span class="kit-bars__track" aria-hidden="true">`
+          + `<span class="kit-bars__fill" style="width:${w}%"></span></span>`
+          + `<span class="kit-bars__val">${esc(val)}</span>`
+          + '</div>';
+      }).join('')
+      + '</div>';
+  }
+
+  // ---- plotted charts: the axis frame both of them shared ------------------
+  //
+  // A step LINE over a time axis and a COLUMN series are different shapes from
+  // an index-scaled sparkline, so they are not sparklineHtml with an option.
+  // What they ARE is the same plot: identical viewBox, identical axis rule,
+  // identical hidden crosshair, identical pair of end ticks, identical
+  // role/tabindex/aria contract. That frame was written twice in
+  // profile-charts.js, and the goal's next three charts (the treasury line on
+  // /drachmae, repo-health's trend on /watch) each want it again — which is
+  // what makes it a primitive rather than a shared local.
+  //
+  // The seam is the same one the bars use: the kit draws the SERIES and the
+  // plot, the page owns the SURFACE (figure, caption, live readout, the
+  // <details> table twin) and the wiring. Date semantics stay with the caller
+  // too — it passes x0/x1/yMax already resolved, so the kit never learns what
+  // a week is.
+
+  const PLOT_W = 320;
+  const PLOT_H = 132;
+  // t: the end label's room. b: the axis band.
+  const PLOT_PAD = { l: 6, r: 8, t: 20, b: 24 };
+
+  function plotBox(opts = {}) {
+    const width = opts.width || PLOT_W;
+    const height = opts.height || PLOT_H;
+    const pad = { ...PLOT_PAD, ...(opts.pad || {}) };
+    return { width, height, pad, base: height - pad.b };
+  }
+
+  // A STEP line over a time axis: the value holds until the next recorded
+  // point, then rises — which is what a cumulative "how much by now" series
+  // means, and why this is not a straight polyline between samples.
+  // points: [{ x, value }] in data space, sorted. Returns { d, area, xs }.
+  function timeStepGeometry(points, opts = {}) {
+    const { width, height, pad, base } = plotBox(opts);
+    const list = points || [];
+    if (!list.length) return { d: '', area: '', xs: [], base };
+    const x0 = Number(opts.x0 ?? list[0].x);
+    const x1 = Number(opts.x1 ?? list[list.length - 1].x);
+    const last = list[list.length - 1];
+    // A span of 0 (one point, no window) would divide by zero; yMax 0 likewise.
+    const spanX = (x1 - x0) || 1;
+    const yMax = Number(opts.yMax ?? last.value) || 1;
+    const px = (t) => pad.l + ((t - x0) / spanX) * (width - pad.l - pad.r);
+    const py = (v) => height - pad.b - (v / yMax) * (height - pad.t - pad.b);
+    let d = `M${px(list[0].x).toFixed(1)},${py(list[0].value).toFixed(1)}`;
+    list.forEach((p, i) => {
+      if (i === 0) return;
+      // across at the PREVIOUS height, then up: the step.
+      d += ` L${px(p.x).toFixed(1)},${py(list[i - 1].value).toFixed(1)}`
+        + ` L${px(p.x).toFixed(1)},${py(p.value).toFixed(1)}`;
+    });
+    d += ` L${px(x1).toFixed(1)},${py(last.value).toFixed(1)}`;
+    const area = `${d} L${px(x1).toFixed(1)},${base} L${px(list[0].x).toFixed(1)},${base} Z`;
+    return {
+      d, area, base, px, py,
+      xs: list.map((p) => px(p.x)),
+      endX: px(x1),
+      endY: py(last.value),
+    };
+  }
+
+  // The line + its area + the end dot, ready to drop into plotSvgHtml.
+  function timeStepSeriesHtml(points, opts = {}) {
+    const g = timeStepGeometry(points, opts);
+    if (!g.d) return { body: '', xs: [], geometry: g };
+    return {
+      geometry: g,
+      xs: g.xs,
+      body: `<path class="kit-plot__area" d="${g.area}"></path>`
+        + `<path class="kit-plot__line" d="${g.d}"></path>`
+        + `<circle class="kit-plot__dot" cx="${g.endX.toFixed(1)}" cy="${g.endY.toFixed(1)}" r="4"></circle>`,
+    };
+  }
+
+  // Columns: at most 24px thick, a rounded cap on a square base, a 2px gap
+  // between neighbours. A zero bucket draws a 1px stub on the axis rather than
+  // nothing, so a gap in the series still reads as a week that happened.
+  function columnSeriesHtml(values, opts = {}) {
+    const { width, height, pad, base } = plotBox(opts);
+    const nums = chartNums(values);
+    const n = nums.length;
+    if (!n) return { body: '', xs: [], base, py: () => base };
+    const max = Math.max(1, ...nums);
+    const slot = (width - pad.l - pad.r) / n;
+    const bw = Math.min(24, Math.max(2, slot - 2));
+    const py = (v) => base - (v / max) * (height - pad.t - pad.b);
+    const xs = nums.map((_, i) => pad.l + i * slot + slot / 2);
+    const body = nums.map((v, i) => {
+      const x = xs[i] - bw / 2;
+      const y = py(v);
+      const h = base - y;
+      if (!v) {
+        return `<rect class="kit-plot__col kit-plot__col--empty" x="${x.toFixed(1)}"`
+          + ` y="${base - 1}" width="${bw.toFixed(1)}" height="1"></rect>`;
+      }
+      const r = Math.min(4, h / 2, bw / 2);
+      const d = `M${x.toFixed(1)},${base} V${(y + r).toFixed(1)}`
+        + ` Q${x.toFixed(1)},${y.toFixed(1)} ${(x + r).toFixed(1)},${y.toFixed(1)}`
+        + ` H${(x + bw - r).toFixed(1)}`
+        + ` Q${(x + bw).toFixed(1)},${y.toFixed(1)} ${(x + bw).toFixed(1)},${(y + r).toFixed(1)}`
+        + ` V${base} Z`;
+      return `<path class="kit-plot__col" d="${d}"></path>`;
+    }).join('');
+    return { body, xs, base, py, max };
+  }
+
+  // The plot itself: the series a geometry built, on the axis, with the hidden
+  // crosshair a caller's readout moves and the two end ticks. `tabindex="0"` is
+  // deliberate and paired with the readout — the chart is walkable by arrow
+  // key, so it has to be reachable by tab.
+  function plotSvgHtml(opts = {}) {
+    const { width, height, pad, base } = plotBox(opts);
+    const tick = (x, text, anchor) => (text
+      ? `<text class="kit-plot__tick" x="${x}" y="${height - 6}"`
+        + `${anchor ? ` text-anchor="${anchor}"` : ''}>${esc(text)}</text>`
+      : '');
+    return `<svg class="kit-plot" viewBox="0 0 ${width} ${height}" role="img" tabindex="0"`
+      + ` aria-label="${esc(opts.ariaLabel || '')}">`
+      + (opts.series || '')
+      + `<line class="kit-plot__axis" x1="${pad.l}" y1="${base}" x2="${width - pad.r}" y2="${base}"></line>`
+      + `<line class="kit-plot__hair" x1="0" y1="${pad.t}" x2="0" y2="${base}" style="visibility:hidden"></line>`
+      + (opts.label || '')
+      + tick(pad.l, opts.leftTick)
+      + tick(width - pad.r, opts.rightTick, 'end')
+      + '</svg>';
+  }
+
+  // The one value a plot labels — the endpoint on a line, the peak on columns.
+  // Only ever one: labelling every point is the thing the table twin is for.
+  function plotValueLabelHtml(x, y, text, anchor) {
+    return `<text class="kit-plot__end" x="${Number(x).toFixed(1)}" y="${Number(y).toFixed(1)}"`
+      + `${anchor ? ` text-anchor="${anchor}"` : ''}>${esc(text)}</text>`;
+  }
+
+  // Title + chart + optional foot — the frame all four sites drew by hand.
+  // `inner` is already-built chart HTML, so the frame never needs to know
+  // which shape it holds. That is what makes the fifth chart free.
+  function chartCardHtml(title, inner, foot, emptyMsg) {
+    const body = inner || `<div class="kit-chart__empty">${esc(emptyMsg || 'no data in window')}</div>`;
+    return '<div class="kit-chart">'
+      + (title ? `<div class="kit-chart__title">${esc(title)}</div>` : '')
+      + body
+      + (foot ? `<div class="kit-chart__foot">${esc(foot)}</div>` : '')
+      + '</div>';
+  }
+
   const api = {
     esc,
     // pager (low-level exports so pages can adopt incrementally)
@@ -615,6 +915,15 @@
     pageOffset, renderServerPage,
     // composed primitives
     makeLedger, makeFilterBar, makeTabs, makeSectionRail,
+    // charts (task 1003445) — the ONE place the hall draws a series.
+    // linePoints/cumulate are the maths on their own, for a chart that wants
+    // the geometry without this SVG (the profile's timeChart).
+    sparklineHtml, barSeriesHtml, chartCardHtml, linePoints, cumulate,
+    // plotted charts: the axis frame + the two series shapes that ride it
+    plotSvgHtml, plotValueLabelHtml, timeStepSeriesHtml, timeStepGeometry, columnSeriesHtml,
+    // plotBox is exported so a caller mapping pointer x back into viewBox
+    // space reads the plot's width instead of re-declaring the number.
+    plotBox,
     // states
     emptyStateHtml, skeletonRows, collapsibleCard,
     // ship-time task visual (task 1003109)

package/modules/hall-ui/public/hall-render.js

@@ -1073,30 +1073,12 @@
     `).join('');
   }
   const analyticsState = { builderId: null, isArchon: false, scope: 'self', self: null, eco: null };
+  // The line drawing moved to OTBKit.sparklineHtml (task 1003445) — it was one
+  // of four chart implementations in this surface. This wrapper keeps the
+  // Curve's own default colour, which is NOT the kit's: these four charts each
+  // spend a different accent, and --accent-deep is the first one's.
   function sparkline(values, opts = {}) {
-    const W = opts.width || 260;
-    const H = opts.height || 46;
-    const pad = 3;
-    const color = opts.color || 'var(--accent-deep)';
-    const nums = (values || []).map((v) => (Number.isFinite(Number(v)) ? Number(v) : 0));
-    if (nums.length === 0) {
-      return `<svg class="spark" viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" role="img" aria-label="no data"></svg>`;
-    }
-    const min = Math.min(...nums);
-    const max = Math.max(...nums);
-    const span = max - min || 1;
-    const n = nums.length;
-    const x = (i) => (n === 1 ? W / 2 : pad + (i * (W - 2 * pad)) / (n - 1));
-    const y = (v) => H - pad - ((v - min) / span) * (H - 2 * pad);
-    const pts = nums.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`);
-    const line = pts.join(' ');
-    const area = `${pad},${H - pad} ${line} ${(W - pad)},${H - pad}`;
-    const last = nums[n - 1];
-    return `<svg class="spark" viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" role="img" aria-label="trend, latest ${last}">
-      <polyline class="spark__area" points="${area}" fill="${color}" />
-      <polyline class="spark__line" points="${line}" fill="none" stroke="${color}" />
-      ${n === 1 ? `<circle cx="${x(0).toFixed(1)}" cy="${y(last).toFixed(1)}" r="2.4" fill="${color}" />` : ''}
-    </svg>`;
+    return window.OTBKit.sparklineHtml(values, { color: 'var(--accent-deep)', ...opts });
   }
   function statCard(label, value, sub) {
     return `<div class="curve__stat">
@@ -1107,11 +1089,7 @@
   }
   function chartCard(title, values, color, footer) {
     const has = Array.isArray(values) && values.length > 0;
-    return `<div class="curve__chart">
-      <div class="curve__chart-title">${escapeHtml(title)}</div>
-      ${has ? sparkline(values, { color }) : `<div class="curve__chart-empty">no data in window</div>`}
-      ${footer ? `<div class="curve__chart-foot">${escapeHtml(footer)}</div>` : ''}
-    </div>`;
+    return window.OTBKit.chartCardHtml(title, has ? sparkline(values, { color }) : '', footer);
   }
   function renderCurveBody() {
     const headlineEl = $('#curve-headline');
@@ -1177,17 +1155,11 @@
     // Top kinds — horizontal bars.
     const kinds = (data.top_kinds || []).slice(0, 8);
     if (kinds.length) {
-      const maxN = Math.max(...kinds.map((k) => Number(k.n)));
       kindsEl.innerHTML =
-        `<div class="curve__chart-title">Kinds of work shipped</div>` +
-        kinds.map((k) => {
-          const w = maxN ? Math.round((Number(k.n) / maxN) * 100) : 0;
-          return `<div class="curve__kind">
-            <span class="curve__kind-label">${escapeHtml(k.kind)}</span>
-            <span class="curve__kind-bar"><span class="curve__kind-fill" style="width:${w}%"></span></span>
-            <span class="curve__kind-n">${k.n}</span>
-          </div>`;
-        }).join('');
+        `<div class="kit-chart__title">Kinds of work shipped</div>` +
+        window.OTBKit.barSeriesHtml(
+          kinds.map((k) => ({ label: k.kind, value: k.n })),
+        );
     } else {
       kindsEl.innerHTML = '';
     }

package/modules/hall-ui/public/profile-charts.js

@@ -55,9 +55,11 @@
   const PACE_MAX_DAYS = 365;
   const RANGE_KEY = 'otb.profile.chartRange';
 
-  const W = 320;          // SVG viewBox; the card scales it
-  const H = 132;
-  const PAD = { l: 6, r: 8, t: 20, b: 24 }; // t: the end label's room; b: the axis band
+  // The plot's own viewBox width, read from the kit rather than re-declared
+  // (task 1003445): wireReadout maps a pointer's x back into viewBox space, so
+  // a second copy of this number silently mis-aims the crosshair the day the
+  // kit's plot changes size. Its height and padding are the kit's alone now.
+  const W = window.OTBKit.plotBox().width;
 
   const esc = (s) => window.OTB.escapeHtml(s);
   const $ = (sel) => window.OTB.$(sel);
@@ -107,9 +109,12 @@
       const d = midnight(t);
       byDay.set(d, (byDay.get(d) || 0) + Number(valueOf(r)) || 0);
     }
+    // The grouping is this function's; the running total is the kit's
+    // (task 1003445), so the hall has ONE accumulator rather than two that
+    // could disagree about what a hole in the series means.
     const days = [...byDay.keys()].sort((a, b) => a - b);
-    let acc = 0;
-    return days.map((d) => ({ day: d, value: (acc += byDay.get(d)) }));
+    const totals = window.OTBKit.cumulate(days.map((d) => byDay.get(d)));
+    return days.map((d, i) => ({ day: d, value: totals[i] }));
   }
 
   // Clip a cumulative series to [windowStart, ∞) for drawing. The line must
@@ -165,7 +170,7 @@
   function wireReadout(fig, xs, textAt) {
     const svg = fig.querySelector('svg');
     const read = fig.querySelector('.pchart__read');
-    const hair = fig.querySelector('.pchart__hair');
+    const hair = fig.querySelector('.kit-plot__hair');
     if (!svg || !read || !xs.length) return;
     let idx = xs.length - 1;
     const show = (i) => {
@@ -226,39 +231,28 @@
         wire() {},
       };
     }
+    // task 1003445: the geometry and the plot are OTBKit's; the time semantics
+    // stay here, because the kit must not learn what a week or midnight is.
     const today = midnight(now);
     const x0 = windowStart != null ? windowStart : points[0].day;
     const x1 = Math.max(today, x0 + WEEK);
     const last = points[points.length - 1];
-    const vMax = last.value || 1;
-    const px = (t) => PAD.l + ((t - x0) / (x1 - x0)) * (W - PAD.l - PAD.r);
-    const py = (v) => H - PAD.b - (v / vMax) * (H - PAD.t - PAD.b);
-    const base = H - PAD.b;
-    let d = `M${px(points[0].day).toFixed(1)},${py(points[0].value).toFixed(1)}`;
-    points.forEach((p, i) => {
-      if (i === 0) return;
-      const prev = points[i - 1].value;
-      d += ` L${px(p.day).toFixed(1)},${py(prev).toFixed(1)} L${px(p.day).toFixed(1)},${py(p.value).toFixed(1)}`;
-    });
-    d += ` L${px(x1).toFixed(1)},${py(last.value).toFixed(1)}`;
-    const area = `${d} L${px(x1).toFixed(1)},${base} L${px(points[0].day).toFixed(1)},${base} Z`;
-    const endX = px(x1);
-    const endY = py(last.value);
-    const xs = points.map((p) => px(p.day));
+    const series = window.OTBKit.timeStepSeriesHtml(
+      points.map((p) => ({ x: p.day, value: p.value })),
+      { x0, x1, yMax: last.value },
+    );
+    const { endX, endY } = series.geometry;
+    const xs = series.xs;
     const html = `<figure class="pchart" id="${esc(id)}">
       <figcaption class="pchart__title">${esc(title)}</figcaption>
       <p class="pchart__read" aria-live="polite"></p>
-      <svg class="pchart__svg" viewBox="0 0 ${W} ${H}" role="img" tabindex="0"
-           aria-label="${esc(title)}: ${esc(valueText(last.value))} as of today; arrow keys walk the days">
-        <path class="pchart__area" d="${area}"></path>
-        <path class="pchart__line" d="${d}"></path>
-        <line class="pchart__axis" x1="${PAD.l}" y1="${base}" x2="${W - PAD.r}" y2="${base}"></line>
-        <line class="pchart__hair" x1="0" y1="${PAD.t}" x2="0" y2="${base}" style="visibility:hidden"></line>
-        <circle class="pchart__dot" cx="${endX.toFixed(1)}" cy="${endY.toFixed(1)}" r="4"></circle>
-        <text class="pchart__end" x="${endX.toFixed(1)}" y="${(endY - 8).toFixed(1)}" text-anchor="end">${esc(valueText(last.value))}</text>
-        <text class="pchart__tick" x="${PAD.l}" y="${H - 6}">${esc(fmtDay(x0))}</text>
-        <text class="pchart__tick" x="${W - PAD.r}" y="${H - 6}" text-anchor="end">today</text>
-      </svg>
+      ${window.OTBKit.plotSvgHtml({
+    series: series.body,
+    ariaLabel: `${title}: ${valueText(last.value)} as of today; arrow keys walk the days`,
+    label: window.OTBKit.plotValueLabelHtml(endX, endY - 8, valueText(last.value), 'end'),
+    leftTick: fmtDay(x0),
+    rightTick: 'today',
+  })}
       ${twinHtml(['Day', title], points.map((p) => [fmtDay(p.day), valueText(p.value)]))}
       <p class="pchart__foot">${esc(footer)}</p>
     </figure>`;
@@ -274,39 +268,27 @@
   // Weekly columns: at most 24px thick, a 4px rounded cap on a square base, a
   // 2px surface gap between neighbours, the tallest column labelled.
   function columnChart({ id, title, buckets, footer }) {
+    // task 1003445: the columns and the plot are OTBKit's. What stays here is
+    // which value gets labelled (the peak) and what the ticks say — the
+    // reading of the chart, not its drawing.
     const n = buckets.length;
-    const max = Math.max(1, ...buckets.map((b) => b.n));
-    const slot = (W - PAD.l - PAD.r) / n;
-    const bw = Math.min(24, Math.max(2, slot - 2));
-    const base = H - PAD.b;
-    const py = (v) => base - (v / max) * (H - PAD.t - PAD.b);
-    const xs = buckets.map((_, i) => PAD.l + i * slot + slot / 2);
+    const cols = window.OTBKit.columnSeriesHtml(buckets.map((b) => b.n));
     const peak = buckets.reduce((best, b, i) => (b.n > buckets[best].n ? i : best), 0);
-    const cols = buckets.map((b, i) => {
-      const x = xs[i] - bw / 2;
-      const y = py(b.n);
-      const h = base - y;
-      if (!b.n) return `<rect class="pchart__col pchart__col--empty" x="${x.toFixed(1)}" y="${base - 1}" width="${bw.toFixed(1)}" height="1"></rect>`;
-      const r = Math.min(4, h / 2, bw / 2);
-      const d = `M${x.toFixed(1)},${base} V${(y + r).toFixed(1)} Q${x.toFixed(1)},${y.toFixed(1)} ${(x + r).toFixed(1)},${y.toFixed(1)} H${(x + bw - r).toFixed(1)} Q${(x + bw).toFixed(1)},${y.toFixed(1)} ${(x + bw).toFixed(1)},${(y + r).toFixed(1)} V${base} Z`;
-      return `<path class="pchart__col" d="${d}"></path>`;
-    }).join('');
+    const xs = cols.xs;
+    const total = buckets.reduce((s, b) => s + b.n, 0);
     const label = buckets[peak].n
-      ? `<text class="pchart__end" x="${xs[peak].toFixed(1)}" y="${(py(buckets[peak].n) - 6).toFixed(1)}" text-anchor="middle">${buckets[peak].n}</text>`
+      ? window.OTBKit.plotValueLabelHtml(xs[peak], cols.py(buckets[peak].n) - 6, buckets[peak].n, 'middle')
       : '';
-    const total = buckets.reduce((s, b) => s + b.n, 0);
     const html = `<figure class="pchart" id="${esc(id)}">
       <figcaption class="pchart__title">${esc(title)}</figcaption>
       <p class="pchart__read" aria-live="polite"></p>
-      <svg class="pchart__svg" viewBox="0 0 ${W} ${H}" role="img" tabindex="0"
-           aria-label="${esc(title)}: ${total} in ${n} weeks; arrow keys walk the weeks">
-        ${cols}
-        <line class="pchart__axis" x1="${PAD.l}" y1="${base}" x2="${W - PAD.r}" y2="${base}"></line>
-        <line class="pchart__hair" x1="0" y1="${PAD.t}" x2="0" y2="${base}" style="visibility:hidden"></line>
-        ${label}
-        <text class="pchart__tick" x="${PAD.l}" y="${H - 6}">${esc(fmtDay(buckets[0].start))}</text>
-        <text class="pchart__tick" x="${W - PAD.r}" y="${H - 6}" text-anchor="end">this week</text>
-      </svg>
+      ${window.OTBKit.plotSvgHtml({
+    series: cols.body,
+    ariaLabel: `${title}: ${total} in ${n} weeks; arrow keys walk the weeks`,
+    label,
+    leftTick: fmtDay(buckets[0].start),
+    rightTick: 'this week',
+  })}
       ${twinHtml(['Week of', 'Works'], buckets.map((b) => [fmtDay(b.start), String(b.n)]))}
       <p class="pchart__foot">${esc(footer)}</p>
     </figure>`;
@@ -321,18 +303,29 @@
 
   // Horizontal bars for the craft mix. Each row is its own table row already —
   // label, bar, count — so it needs no twin; the count at the tip is the value.
+  // task 1003445: the bars are OTBKit.barSeriesHtml — this was the hall's
+  // FOURTH chart drawing site and its third copy of the same horizontal bar
+  // (the Curve's kinds and Watch's trend were the other two). The figure, the
+  // caption and the foot stay here: they are this page's composition, and the
+  // kit deliberately draws a series rather than owning a surface. The list
+  // semantics travel as an option, because the mix IS announced as a list.
   function mixChart({ id, title, mix, footer }) {
-    const max = Math.max(1, ...mix.map((k) => k.n));
-    const rows = mix.map((k) => `<div class="pmix__row" role="listitem">
-        <span class="pmix__label">${esc(k.label)}</span>
-        <span class="pmix__track" aria-hidden="true"><span class="pmix__fill" style="width:${Math.round((k.n / max) * 100)}%"></span></span>
-        <span class="pmix__n">${fmtNum(k.n)}</span>
-      </div>`).join('');
+    const bars = window.OTBKit.barSeriesHtml(
+      mix.map((k) => ({ label: k.label, value: k.n, valueLabel: fmtNum(k.n) })),
+      {
+        list: true,
+        ariaLabel: title,
+        labelWidth: 'minmax(72px, 110px)',
+        // The bar grows FROM the axis, so its left edge stays square.
+        radius: '0 4px 4px 0',
+        track: 'soft',
+      },
+    );
     return {
       id,
       html: `<figure class="pchart" id="${esc(id)}">
         <figcaption class="pchart__title">${esc(title)}</figcaption>
-        <div class="pmix" role="list" aria-label="${esc(title)}">${rows || `<p class="pchart__foot">nothing in this window</p>`}</div>
+        ${bars || `<p class="pchart__foot">nothing in this window</p>`}
         <p class="pchart__foot">${esc(footer)}</p>
       </figure>`,
       wire() {},

package/modules/hall-ui/public/profile.css

@@ -134,17 +134,11 @@
 }
 .pchart__title { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--ink); }
 .pchart__read { margin: 2px 0 var(--sp-hair); font-family: var(--label-face); font-size: var(--label-size); letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-soft); min-height: 1.4em; }
-.pchart__svg { display: block; width: 100%; height: auto; overflow: visible; border-radius: var(--radius-sm); }
-.pchart__svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-.pchart__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
-.pchart__area { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: none; }
-.pchart__axis, .pchart__hair { stroke: var(--rule-soft); stroke-width: 1; }
-.pchart__hair { stroke: var(--ink-faint); }
-.pchart__dot { fill: var(--accent); stroke: var(--bg-card); stroke-width: 2; }
-.pchart__col { fill: var(--accent); }
-.pchart__col--empty { fill: var(--rule-soft); }
-.pchart__end { font-family: var(--font-body); font-size: 11.5px; font-weight: 500; fill: var(--ink); }
-.pchart__tick { font-family: var(--label-face); font-size: 10px; letter-spacing: var(--label-space); text-transform: var(--label-case); fill: var(--ink-faint); }
+/* The plot itself — the svg, the line, the columns, the axis, the crosshair,
+   the ticks — is OTBKit's `.kit-plot*` in style.css (task 1003445). It was
+   written twice in this file's own script, and the goal's next charts want it
+   again. The dataviz spec moved verbatim; what stays below is this page's
+   FIGURE: the caption, the live readout, the table twin and the foot. */
 .pchart__twin { margin-top: var(--sp-hair); }
 .pchart__twin > summary { display: inline-flex; align-items: center; min-height: 24px; padding: 0 4px; margin: 0 -4px; font-family: var(--label-face); font-size: var(--label-size); letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-soft); cursor: pointer; border-radius: var(--radius-sm); }
 .pchart__twin > summary:hover { color: var(--ink); background: var(--glass-strong); }
@@ -153,13 +147,10 @@
 .pchart__foot { margin: var(--sp-hair) 0 0; font-size: 12px; color: var(--ink-faint); }
 .pchart__note { margin: 0; font-size: 14px; color: var(--ink-soft); }
 /* the craft mix: label, bar, count — a row is its own table row */
-.pmix { display: flex; flex-direction: column; gap: 6px; margin: var(--sp-hair) 0; }
-.pmix__row { display: grid; grid-template-columns: minmax(72px, 110px) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; min-height: 24px; }
-.pmix__label { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.pmix__track { display: block; height: 8px; background: var(--rule-soft); border-radius: 0 4px 4px 0; overflow: hidden; }
-.pmix__fill { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
-.pmix__row:hover .pmix__fill { opacity: .8; }
-.pmix__n { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
+/* The craft mix is OTBKit.barSeriesHtml (task 1003445) — the .pmix family was
+   the hall's third copy of one horizontal bar. Only the vertical air around it
+   is this page's; the row, the track and the 24px floor are the kit's. */
+.pchart .kit-bars { margin: var(--sp-hair) 0; }
 @media (max-width: 720px) {
   .pcharts { grid-template-columns: minmax(0, 1fr); }
 }