neba 1.15.0 → 1.16.0

package/dist/tailwind.css

@@ -2254,6 +2254,21 @@
   }
 }
 
+/*
+ * And out again while the reader is typing at it.
+ *
+ * `internal/glow.ts` writes the mark on a keystroke and takes it off on the
+ * next `pointermove`, which is the whole rule: a pointer resting on a field is
+ * where the hand left it — over the text — so the one moment the bloom is least
+ * wanted is the one moment it cannot move out of the way on its own.
+ *
+ * After the hover rule and not before it: the two selectors are the same
+ * specificity, so the one written second is the one that decides.
+ */
+.neba-glow[data-typing]::before {
+  opacity: 0;
+}
+
 /*
  * Release afterglow. The asymmetry is the whole trick: 0ms in, ~900ms out, so
  * the flash lands on the frame of the press and is still visibly draining a

package/dist/types.d.ts

@@ -467,6 +467,21 @@ export interface NebaChartSeries {
      * @default false
      */
     hidden?: boolean;
+    /**
+     * Which value axis this series is measured against.
+     *
+     * `secondary` is for the series whose units are not the others' — revenue
+     * beside a conversion rate, a count beside a duration. It is read only when
+     * the chart was given a `secondaryAxis`, and never on a stacked chart: a
+     * stack is a total, and a total across two units is not a number.
+     *
+     * Reach for it rarely. Two scales on one plot let a caller make any two
+     * series look like they move together by choosing the ranges, and a reader
+     * has no way to see that it was done — which is why the second axis is drawn
+     * on the far edge and labelled rather than merely implied.
+     * @default 'primary'
+     */
+    axis?: 'primary' | 'secondary';
 }
 /**
  * One span on a [TimelineChart] — a stretch of time with two ends.
@@ -510,6 +525,24 @@ export interface NebaTimelineSeries {
 }
 /** How a line gets from one point to the next. */
 export type NebaChartCurve = 'linear' | 'smooth' | 'step';
+/**
+ * What a line or a band does where a value is missing.
+ *
+ * - `gap` — breaks. The default, and the honest one: a `null` is a month that
+ *   has not closed or a sensor that was offline, and a chart that draws over
+ *   the hole has stated a number nobody measured.
+ * - `connect` — joins the two sides with a straight segment. For a gap that is
+ *   an artefact of how the data was collected rather than a fact about the
+ *   world — a reading that failed to arrive for something that never stopped.
+ * - `zero` — reads the gap as a nought, everywhere: the line goes to the
+ *   baseline, the axis takes the nought into its range, and the tooltip and the
+ *   table say `0` rather than nothing. That last part is the point of it being
+ *   here rather than a change to the drawing alone — a picture that touches
+ *   zero over a table that says "no reading" is two answers to one question.
+ *   Reach for it when a missing row genuinely means none happened, which is
+ *   what an event count usually means and what a rate never does.
+ */
+export type NebaChartNulls = 'gap' | 'connect' | 'zero';
 /**
  * Which values are written onto the marks themselves.
  *
@@ -560,6 +593,86 @@ export interface NebaChartTooltip {
     /** Draws the panel. Without it the chart draws its own. */
     render?: (context: NebaChartTooltipContext) => React.ReactNode;
 }
+/**
+ * A line, or a band, drawn across a plot at a value the data has none of.
+ *
+ * A target, an SLA, a budget, last year's average, the window a forecast
+ * covers. It is the one thing on a chart that is neither a mark nor chrome: it
+ * carries meaning, so it is drawn heavier than a gridline — and it is not the
+ * reader's data, so it is dashed and neutral rather than taking one of the
+ * eight series hues.
+ *
+ * The scale is widened to hold it. A target drawn off the top of the plot is a
+ * target nobody can see, and moving every mark down a little to make room is
+ * the cheaper of the two costs.
+ */
+export interface NebaChartReference {
+    /** Where it sits, in the units of the axis it is read against. */
+    value: number;
+    /**
+     * Turns the line into a band that runs from `value` to here — a tolerance, a
+     * quarter, the range a forecast covers. Drawn as a wash with an edge at each
+     * end, so what is inside it stays readable.
+     */
+    to?: number;
+    /**
+     * Which axis the numbers are read against.
+     *
+     * - `value` — the one the marks are measured on. A target, a budget, a limit.
+     * - `category` — the one they are placed along, for a rule that says *when*:
+     *   a release, a policy change. On an axis of columns the number is the
+     *   column's index; on one of dates or numbers it is a point on that scale.
+     * @default 'value'
+     */
+    axis?: 'value' | 'category';
+    /**
+     * What it is called, written at the far end of it. SVG text, so a string:
+     * an element has nowhere to go.
+     */
+    label?: string;
+    /**
+     * Its colour. A `NebaColor` family, or any CSS colour.
+     *
+     * Neutral by default, and that is the right answer more often than it looks:
+     * a reference in `danger` says the line is the bad thing, when usually the
+     * bad thing is the data crossing it.
+     * @default the muted ink
+     */
+    color?: NebaColor | (string & {});
+    /**
+     * Draws it as a solid rule. Dashed otherwise, which is what says a line is a
+     * threshold rather than one more gridline.
+     * @default false
+     */
+    solid?: boolean;
+}
+/**
+ * The strip under a plot that says which part of a long series is drawn.
+ *
+ * A chart of two thousand points is a chart with no points on it: every column
+ * is a fraction of a pixel wide and the shape is a smear. The answer is not to
+ * draw fewer of them — that is the caller's data — but to draw a window of
+ * them, and to put the whole series under the plot small so the reader can see
+ * where the window is and move it.
+ *
+ * The window is in **category indices**, inclusive at both ends, because that
+ * is what a category axis is indexed by whether it holds dates, numbers or
+ * columns.
+ */
+export interface NebaChartBrush {
+    /** Which categories the window covers to begin with. Defaults to all of them. */
+    defaultRange?: readonly [number, number];
+    /** The window, for a chart whose range the caller holds. */
+    range?: readonly [number, number];
+    /** Called with the new window whenever the reader moves it. */
+    onRangeChange?: (range: [number, number]) => void;
+    /**
+     * How tall the strip is, in pixels. Drawn **inside** the chart's own height,
+     * like the axis labels, so a card sized to the chart is a card it fits in.
+     * @default 32
+     */
+    height?: number;
+}
 /** One axis of a cartesian chart. */
 export interface NebaChartAxis {
     /** Leaves the axis undrawn — its rule, its ticks and its labels. */
@@ -587,6 +700,26 @@ export interface NebaChartAxis {
      * was written out as `[object Object]`.
      */
     tickFormat?: (value: NebaChartCategory, index: number) => string | number;
+    /**
+     * Turns the labels by this many degrees, between `-90` and `90`. Negative
+     * tilts them up to the right, which is the one most readers have met;
+     * positive tilts them down, and `-90` stands them on end.
+     *
+     * What it buys is **all** of the labels. Flat, a long category name has one
+     * slot to fit in, so the axis either cuts it to an ellipsis or drops every
+     * second one; turned, each label only has to clear its neighbour across its
+     * own height, and a dozen product names fit where three did. What it costs is
+     * a band of the plot and a label nobody can read at a glance, so it is worth
+     * it when the names are what the reader came for and not when the shape is.
+     *
+     * Only the **category** axis reads it, and only on a chart that draws that
+     * axis along the bottom: a horizontal chart already gives each label a row of
+     * its own, and a value tick is a rounded number that was never cut. The band
+     * under the plot grows to hold the turned labels, up to a cap — past that
+     * they are still cut, because a chart that is mostly axis is not a chart.
+     * @default 0
+     */
+    tickAngle?: number;
     /**
      * How much room the axis keeps for its ticks and its label, in pixels.
      * Measured from the ticks themselves otherwise; set it when a long category

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neba",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "A comprehensive React UI component library — buttons, fields, menus, dialogs, tables and much more — accessible and themeable, sharing one prop vocabulary and a translucent acrylic design language. ESM only, types included, dark mode built in.",
   "type": "module",
   "types": "dist/index.d.ts",