wiki-formant 0.44.1 → 0.45.0

package/README.md

@@ -770,10 +770,11 @@ needs installed.
 `TimeChart` (`wiki-formant/chart`) is every time-series chart on the four sites:
 token prices, ledger activity, a caper's price, visitors per day. One area
 series in the box's own `color`, its axis in `--chart-axis` if set, with range
-buttons — 24H, 7D, 30D, 90D, 1Y, All — and, on a range long enough, a day, week
-or month step. A step is offered once it makes four points, and the default is
-the finest that makes 200 or fewer, so a year opens weekly and five years
-monthly.
+buttons — 24H, 7D, 30D, 90D, 1Y, All — then, after a rule, the day, week and
+month steps. The steps show wherever a range is drawn by day, so the buttons
+never shift; one is enabled once it makes four points (none under 24H and 7D,
+which are drawn by the hour and the four hours), and the default is the finest
+that makes 200 or fewer, so a year opens weekly and five years monthly.
 
 ```tsx
 // Daily points: the chart slices and steps them itself; 30D up.
@@ -799,7 +800,8 @@ straight between closes and a count's is curved.
 as a collapse. A single range draws no range buttons and shows every point.
 `bucketChart` and `chartSteps` are exported for a chart drawn elsewhere.
 `base.css` pins the buttons (`.chart-controls button[aria-pressed]`) to the
-canvas's top-left corner; the site's stylesheet gives them and the box a look.
+canvas's top-left corner, rules a line between groups and dims a disabled step;
+the site's stylesheet gives them and the box a look.
 
 ## Base stylesheet
 

package/dist/base.css

@@ -190,11 +190,15 @@ pre:hover > .code-copy-btn,
   gap: 0.5rem;
 }
 .chart-controls > div { display: flex; gap: 2px; }
+/* A rule between groups: ranges, then steps, then the candles switch. */
+.chart-controls > * + * { border-inline-start: 1px solid color-mix(in srgb, currentColor 25%, transparent); padding-inline-start: 0.5rem; }
 .chart-controls :is(button, a) { font: inherit; color: inherit; text-decoration: none; background: none; cursor: pointer; opacity: 0.6; }
 /* An icon sits on the text's line, so an icon button is as tall as a labelled one. */
 .chart-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; }
 /* A button is pressed; a link (a stats page's window) is the page shown. */
 .chart-controls :is(button, a):is([aria-pressed='true'], [aria-current]) { opacity: 1; }
+/* A step the range cannot make stays in its place, and dims. */
+.chart-controls button:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
 
 /* ---- Stats ----------------------------------------------------------------
    `--share` is a row's value over the largest in its list, 0 to 1. Bars take

package/dist/chart.js

@@ -24,12 +24,13 @@ const STEP = {
     week: { label: 'W', span: 7 * DAY },
     month: { label: 'M', span: 30.44 * DAY },
 };
+const STEPS = ['day', 'week', 'month'];
 /** Every range, shortest first. A chart fed daily points offers the ones from 30D up. */
 export const CHART_RANGES = ['24h', '7d', '30d', '90d', '1y', 'all'];
 const DAILY_RANGES = ['30d', '90d', '1y', 'all'];
 /** A step is offered once it makes four points, and the default is the finest that makes 200 or fewer. */
 export function chartSteps(span) {
-    const steps = ['day', 'week', 'month'].filter(s => s === 'day' || span / STEP[s].span >= 4);
+    const steps = STEPS.filter(s => s === 'day' || span / STEP[s].span >= 4);
     return { steps, fallback: steps.find(s => span / STEP[s].span <= 200) ?? steps.at(-1) };
 }
 /** The UTC day, Monday or first of the month a time falls in. */
@@ -260,6 +261,9 @@ export function TimeChart({ series, label, ranges = typeof series === 'function'
         }));
         c.api.timeScale().fitContent();
     }, [ready, source, view, candles]);
+    // The steps always show where a range is drawn by day, so the buttons do not jump about; one
+    // the range cannot make (any, under 24H and 7D) is disabled.
+    const daily = ranges.some(r => RANGE[r].resolution === 'day');
     const status = source && 'error' in source ? source.error : points && !view?.shown.length ? 'No data in this range' : null;
-    return (_jsxs("figure", { className: className ? `chart ${className}` : 'chart', children: [_jsx("div", { ref: box, className: "chart-canvas", role: "img", "aria-label": label, style: height ? { height } : undefined }), (!ready || (!points && !status)) && _jsx("div", { className: "chart-status skeleton", "aria-hidden": true }), status && _jsx("p", { className: "chart-status", children: status }), (controls || ranges.length > 1 || (view && (view.steps.length > 1 || view.ohlc))) && (_jsxs("div", { className: "chart-controls", children: [controls, ranges.length > 1 && (_jsx("div", { role: "group", "aria-label": "Range", children: ranges.map(r => (_jsx("button", { type: "button", "aria-pressed": r === range, onClick: () => { setRange(r); setStep(null); }, children: RANGE[r].label }, r))) })), view && view.steps.length > 1 && (_jsx("div", { role: "group", "aria-label": "Step", children: view.steps.map(s => (_jsx("button", { type: "button", "aria-pressed": s === view.step, onClick: () => setStep(s), title: `One point per ${s}`, children: STEP[s].label }, s))) })), view?.ohlc && (_jsx("div", { children: _jsx("button", { type: "button", "aria-pressed": candles, "aria-label": "Candles", title: "Candles", onClick: () => setCandles(c => !c), children: _jsxs("svg", { className: "chart-icon", viewBox: "0 0 12 12", "aria-hidden": true, children: [_jsx("path", { d: "M3.5 1v2M3.5 9v2M8.5 2v3M8.5 9v1", stroke: "currentColor" }), _jsx("rect", { x: "2", y: "3", width: "3", height: "6", rx: "0.5", fill: "currentColor" }), _jsx("rect", { x: "7", y: "5", width: "3", height: "4", rx: "0.5", fill: "currentColor" })] }) }) }))] }))] }));
+    return (_jsxs("figure", { className: className ? `chart ${className}` : 'chart', children: [_jsx("div", { ref: box, className: "chart-canvas", role: "img", "aria-label": label, style: height ? { height } : undefined }), (!ready || (!points && !status)) && _jsx("div", { className: "chart-status skeleton", "aria-hidden": true }), status && _jsx("p", { className: "chart-status", children: status }), (controls || ranges.length > 1 || daily || view?.ohlc) && (_jsxs("div", { className: "chart-controls", children: [controls, ranges.length > 1 && (_jsx("div", { role: "group", "aria-label": "Range", children: ranges.map(r => (_jsx("button", { type: "button", "aria-pressed": r === range, onClick: () => { setRange(r); setStep(null); }, children: RANGE[r].label }, r))) })), daily && (_jsx("div", { role: "group", "aria-label": "Step", children: STEPS.map(s => (_jsx("button", { type: "button", "aria-pressed": s === view?.step, disabled: !view?.steps.includes(s), onClick: () => setStep(s), title: `One point per ${s}`, children: STEP[s].label }, s))) })), view?.ohlc && (_jsx("div", { children: _jsx("button", { type: "button", "aria-pressed": candles, "aria-label": "Candles", title: "Candles", onClick: () => setCandles(c => !c), children: _jsxs("svg", { className: "chart-icon", viewBox: "0 0 12 12", "aria-hidden": true, children: [_jsx("path", { d: "M3.5 1v2M3.5 9v2M8.5 2v3M8.5 9v1", stroke: "currentColor" }), _jsx("rect", { x: "2", y: "3", width: "3", height: "6", rx: "0.5", fill: "currentColor" }), _jsx("rect", { x: "7", y: "5", width: "3", height: "4", rx: "0.5", fill: "currentColor" })] }) }) }))] }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wiki-formant",
-  "version": "0.44.1",
+  "version": "0.45.0",
   "description": "The portable half of a wiki: derived taxonomy and facet controls, a version-negotiating MCP transport, markdown twins, block rendering, a rich-text editor engine, conditional-GET plumbing, and the headers and CSP every origin sends.",
   "type": "module",
   "license": "MIT",