@siyahi/ui 0.1.9-next.23 → 0.1.9-next.25

package/dist/lib/fit-text.d.ts

@@ -0,0 +1,6 @@
+//#region src/lib/fit-text.d.ts
+/** About how wide a text-xs label draws, in pixels. */
+export declare const textWidth: (text: string) => number;
+/** The label, cut with an ellipsis when it would draw wider than `width` pixels at text-xs. */
+export declare function fit(text: string, width: number): string;
+//#endregion

package/dist/lib/fit-text.js

@@ -0,0 +1,11 @@
+//#region src/lib/fit-text.ts
+const CHAR_PX = 6.6;
+/** About how wide a text-xs label draws, in pixels. */
+const textWidth = (text) => text.length * CHAR_PX;
+/** The label, cut with an ellipsis when it would draw wider than `width` pixels at text-xs. */
+function fit(text, width) {
+	const room = Math.floor(width / CHAR_PX);
+	return text.length <= room ? text : `${text.slice(0, Math.max(room - 1, 1)).trimEnd()}…`;
+}
+//#endregion
+export { fit, textWidth };

package/dist/lib/heat.d.ts

@@ -0,0 +1,7 @@
+//#region src/lib/heat.d.ts
+export declare const HEAT_STEPS = 5;
+/** The range the heat scale uses: one that is not a positive number falls back to ±5%. */
+export declare const heatRange: (range?: number) => number;
+export declare const heatFill: (side: "positive" | "negative", step: number) => string;
+export declare function heat(change: number | null, range?: number): string;
+//#endregion

package/dist/lib/heat.js

@@ -0,0 +1,14 @@
+//#region src/lib/heat.ts
+/** The signed heat scale a Treemap tile and a ChangeGrid cell share: five steps of gain or loss mixed into the card. */
+const DEFAULT_RANGE = .05;
+const HEAT_STEPS = 5;
+/** The range the heat scale uses: one that is not a positive number falls back to ±5%. */
+const heatRange = (range = DEFAULT_RANGE) => Number.isFinite(range) && range > 0 ? range : DEFAULT_RANGE;
+const heatFill = (side, step) => `color-mix(in oklab, var(--${side}) var(--heat-${step}), var(--card))`;
+function heat(change, range) {
+	if (!change || !Number.isFinite(change)) return "var(--muted)";
+	const step = Math.min(5, Math.ceil(Math.abs(change) / heatRange(range) * 5));
+	return heatFill(change > 0 ? "positive" : "negative", step);
+}
+//#endregion
+export { HEAT_STEPS, heat, heatFill, heatRange };

package/dist/lib/scatter.d.ts

@@ -0,0 +1,98 @@
+//#region src/lib/scatter.d.ts
+/**
+ * Ticks for a log axis at 1, 2 and 5 times a power of ten, from the largest at or under min to the smallest at or
+ * over max, so the axis ends on a tick and every label reads as a round number.
+ */
+export declare function logTicks(min: number, max: number): number[];
+/**
+ * Ticks for a linear axis that just covers min to max, about `count` of them, a step of 1, 2, 2.5 or 5 times a power
+ * of ten: −50% to +75% by 25s, never −50% to +150% because the step had to be 50. Values that differ only by float
+ * noise, such as 0.3 and 0.30000000000000004, count as one value and get that value as their only tick.
+ */
+export declare function linearTicks(min: number, max: number, count?: number): number[];
+export interface Box {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+export interface LabelCandidate {
+  key: string;
+  text: string;
+  /** The dot's centre, in pixels. */
+  cx: number;
+  cy: number;
+  /** The dot's radius, its edge included: a sized dot keeps names off all of itself. */
+  r: number;
+}
+export interface PlacedLabel {
+  key: string;
+  text: string;
+  /** Where the text starts and its baseline, with textAnchor="start". */
+  x: number;
+  y: number;
+}
+/** How labels are set: their type size in pixels and a name's width in that type. */
+export interface LabelType {
+  size: number;
+  measure: (text: string) => number;
+}
+/**
+ * Names beside dots, in the candidates' order, up to `limit`: each tries the right of its dot, then the left, above,
+ * below and the four corners, and takes the first spot inside the plot that covers no other label, no other dot and
+ * nothing `reserved` (such as a quadrant's name). A name that finds no spot is left to the tooltip, so labels never sit
+ * on top of each other.
+ */
+export declare function placeLabels(candidates: readonly LabelCandidate[], plot: Box, limit: number, { size, measure }: LabelType, reserved?: readonly Box[]): PlacedLabel[];
+/**
+ * Splits the plot into four at a value on each axis, such as zero, with an optional name in each corner. On a log
+ * axis x must be above zero, or no split is drawn. A name that does not fit its quadrant in two lines is left out.
+ */
+export interface ScatterQuadrants {
+  x: number;
+  y: number;
+  labels?: {
+    topLeft?: string;
+    topRight?: string;
+    bottomLeft?: string;
+    bottomRight?: string;
+  };
+}
+export type QuadrantLabels = ScatterQuadrants["labels"];
+/** A split a log axis cannot place, at or below zero, or one that is not a number, is no split at all. */
+export declare function quadrantSplit(quadrants: ScatterQuadrants | undefined, xScale: "linear" | "log"): ScatterQuadrants | undefined;
+/** The largest sized dot; the smallest stays big enough to see and to tap. */
+export declare const MAX_RADIUS = 20;
+/**
+ * Each dot's radius. Area, not radius, follows size, so a holding twice as large has twice the ink. A size that weighs
+ * nothing draws the smallest dot, so it cannot shrink or hide the others. Points without sizes all take `plain`.
+ */
+export declare function dotSizes(points: readonly {
+  size?: number;
+}[], plain: number): {
+  radiusOf: (p: {
+    size?: number;
+  }) => number;
+  sized: boolean;
+};
+/**
+ * Each corner's name in the plot's corner, in the band the y axis keeps clear above or below the data, wrapped to its
+ * own quadrant's width so two names on one edge never meet: where its lines are drawn, and the box they take.
+ */
+export declare function corners(plot: Box, names: QuadrantLabels, split: {
+  x: number;
+  y: number;
+} | null, type: LabelType): {
+  key: string;
+  lines: string[];
+  x: number;
+  y: number;
+  line: number;
+  box: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+}[];
+//#endregion

package/dist/lib/scatter.js

@@ -0,0 +1,218 @@
+//#region src/lib/scatter.ts
+/**
+* Ticks for a log axis at 1, 2 and 5 times a power of ten, from the largest at or under min to the smallest at or
+* over max, so the axis ends on a tick and every label reads as a round number.
+*/
+function logTicks(min, max) {
+	if (!(min > 0) || !Number.isFinite(max) || !(max >= min)) return [];
+	const ticks = [];
+	for (let decade = Math.floor(Math.log10(min));; decade++) for (const step of [
+		1,
+		2,
+		5
+	]) {
+		const tick = Number((step * 10 ** decade).toPrecision(12));
+		if (Number(((step === 5 ? 10 : step === 2 ? 5 : 2) * 10 ** decade).toPrecision(12)) <= min) continue;
+		ticks.push(tick);
+		if (tick >= max) return ticks;
+	}
+}
+const clean = (value) => Number(value.toPrecision(12)) || 0;
+/**
+* Ticks for a linear axis that just covers min to max, about `count` of them, a step of 1, 2, 2.5 or 5 times a power
+* of ten: −50% to +75% by 25s, never −50% to +150% because the step had to be 50. Values that differ only by float
+* noise, such as 0.3 and 0.30000000000000004, count as one value and get that value as their only tick.
+*/
+function linearTicks(min, max, count = 5) {
+	if (!Number.isFinite(min) || !Number.isFinite(max) || max < min) return [];
+	if (max - min <= Math.max(Math.abs(min), Math.abs(max)) * 1e-9) return [clean(min)];
+	const rough = (max - min) / (count - 1);
+	const power = 10 ** Math.floor(Math.log10(rough));
+	const step = ([
+		1,
+		2,
+		2.5,
+		5,
+		10
+	].find((m) => m * power >= rough * (1 - 1e-9)) ?? 10) * power;
+	const first = Math.floor(min / step + 1e-9);
+	const last = Math.ceil(max / step - 1e-9);
+	return Array.from({ length: last - first + 1 }, (_, i) => clean((first + i) * step));
+}
+const HALO = 2;
+const GAP = 4;
+const overlaps = (a, b) => a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
+/**
+* Names beside dots, in the candidates' order, up to `limit`: each tries the right of its dot, then the left, above,
+* below and the four corners, and takes the first spot inside the plot that covers no other label, no other dot and
+* nothing `reserved` (such as a quadrant's name). A name that finds no spot is left to the tooltip, so labels never sit
+* on top of each other.
+*/
+function placeLabels(candidates, plot, limit, { size, measure }, reserved = []) {
+	const line = size * 4 / 3;
+	const dots = candidates.map(({ key, cx, cy, r }) => ({
+		key,
+		box: {
+			x: cx - r,
+			y: cy - r,
+			width: r * 2,
+			height: r * 2
+		}
+	}));
+	const taken = [...reserved];
+	const placed = [];
+	for (const { key, text, cx, cy, r: radius } of candidates) {
+		if (placed.length >= limit) break;
+		const width = measure(text) + 4;
+		const spot = [
+			{
+				x: cx + radius + GAP,
+				y: cy - line / 2,
+				width,
+				height: line
+			},
+			{
+				x: cx - radius - GAP - width,
+				y: cy - line / 2,
+				width,
+				height: line
+			},
+			{
+				x: cx - width / 2,
+				y: cy - radius - GAP - line,
+				width,
+				height: line
+			},
+			{
+				x: cx - width / 2,
+				y: cy + radius + GAP,
+				width,
+				height: line
+			},
+			{
+				x: cx + radius,
+				y: cy - radius - line,
+				width,
+				height: line
+			},
+			{
+				x: cx - radius - width,
+				y: cy - radius - line,
+				width,
+				height: line
+			},
+			{
+				x: cx + radius,
+				y: cy + radius,
+				width,
+				height: line
+			},
+			{
+				x: cx - radius - width,
+				y: cy + radius,
+				width,
+				height: line
+			}
+		].find((box) => box.x >= plot.x && box.y >= plot.y && box.x + box.width <= plot.x + plot.width && box.y + box.height <= plot.y + plot.height && !taken.some((other) => overlaps(box, other)) && !dots.some((dot) => dot.key !== key && overlaps(box, dot.box)));
+		if (!spot) continue;
+		taken.push(spot);
+		placed.push({
+			key,
+			text,
+			x: spot.x + HALO,
+			y: spot.y + size
+		});
+	}
+	return placed;
+}
+/** A split a log axis cannot place, at or below zero, or one that is not a number, is no split at all. */
+function quadrantSplit(quadrants, xScale) {
+	if (!quadrants || !Number.isFinite(quadrants.x) || !Number.isFinite(quadrants.y)) return void 0;
+	return xScale === "linear" || quadrants.x > 0 ? quadrants : void 0;
+}
+/** The largest sized dot; the smallest stays big enough to see and to tap. */
+const MAX_RADIUS = 20;
+const MIN_RADIUS = 3;
+/** A size that is not a positive number (NaN, Infinity, a negative) weighs nothing. */
+const weight = (p) => p.size !== void 0 && Number.isFinite(p.size) && p.size > 0 ? p.size : 0;
+/**
+* Each dot's radius. Area, not radius, follows size, so a holding twice as large has twice the ink. A size that weighs
+* nothing draws the smallest dot, so it cannot shrink or hide the others. Points without sizes all take `plain`.
+*/
+function dotSizes(points, plain) {
+	const largest = points.reduce((most, p) => Math.max(most, weight(p)), 0);
+	const sized = points.some((p) => p.size !== void 0);
+	const radiusOf = (p) => {
+		if (!sized || p.size === void 0) return plain;
+		return largest > 0 ? Math.max(MIN_RADIUS, 20 * Math.sqrt(weight(p) / largest)) : MIN_RADIUS;
+	};
+	return {
+		radiusOf,
+		sized
+	};
+}
+/** Words broken into lines no wider than `width`; a word wider than that keeps a line of its own. */
+function wrap(text, width, measure) {
+	const lines = [];
+	for (const word of text.split(" ")) {
+		const last = lines.at(-1);
+		if (last !== void 0 && measure(`${last} ${word}`) <= width) lines[lines.length - 1] = `${last} ${word}`;
+		else lines.push(word);
+	}
+	return lines;
+}
+/**
+* Each corner's name in the plot's corner, in the band the y axis keeps clear above or below the data, wrapped to its
+* own quadrant's width so two names on one edge never meet: where its lines are drawn, and the box they take.
+*/
+function corners(plot, names, split, type) {
+	if (!names || !split) return [];
+	const line = type.size * 4 / 3;
+	const inset = 6;
+	return [
+		[
+			names.topLeft,
+			"left",
+			"top"
+		],
+		[
+			names.topRight,
+			"right",
+			"top"
+		],
+		[
+			names.bottomLeft,
+			"left",
+			"bottom"
+		],
+		[
+			names.bottomRight,
+			"right",
+			"bottom"
+		]
+	].flatMap(([text, side, edge]) => {
+		if (!text) return [];
+		const room = (side === "left" ? split.x - plot.x : plot.x + plot.width - split.x) - 12;
+		const lines = wrap(text, Math.max(room, 0), type.measure);
+		const width = Math.max(...lines.map(type.measure));
+		if (lines.length > 2 || width > room) return [];
+		const height = lines.length * line;
+		const x = side === "left" ? plot.x + inset : plot.x + plot.width - inset - width;
+		const top = edge === "top" ? plot.y + inset : plot.y + plot.height - inset - height;
+		return [{
+			key: `${side}-${edge}`,
+			lines,
+			x,
+			y: top + type.size,
+			line,
+			box: {
+				x,
+				y: top,
+				width,
+				height
+			}
+		}];
+	});
+}
+//#endregion
+export { MAX_RADIUS, corners, dotSizes, linearTicks, logTicks, placeLabels, quadrantSplit };

package/dist/lib/treemap.d.ts

@@ -18,10 +18,5 @@ export declare function layout<T extends {
   weight: number;
   group?: string;
 }>(items: T[], width: number, height: number): Layout<T>;
-export declare const HEAT_STEPS = 5;
-/** The range the heat scale uses: one that is not a positive number falls back to ±5%. */
-export declare const heatRange: (range?: number) => number;
-export declare const heatFill: (side: "positive" | "negative", step: number) => string;
-export declare function heat(change: number | null, range?: number): string;
 //#endregion
 export {};

package/dist/lib/treemap.js

@@ -31,20 +31,5 @@ function layout(items, width, height) {
 		}])
 	};
 }
-const DEFAULT_RANGE = .05;
-const HEAT_STEPS = 5;
-/** The range the heat scale uses: one that is not a positive number falls back to ±5%. */
-const heatRange = (range = DEFAULT_RANGE) => Number.isFinite(range) && range > 0 ? range : DEFAULT_RANGE;
-const DARK_FLOOR = 25;
-const heatFill = (side, step) => {
-	const mix = (share) => `color-mix(in oklab, var(--${side}) ${share}%, var(--card))`;
-	const dark = DARK_FLOOR + (step - 1) * 35 / 4;
-	return `light-dark(${mix(step * 12)}, ${mix(dark)})`;
-};
-function heat(change, range) {
-	if (!change) return "var(--muted)";
-	const step = Math.min(5, Math.ceil(Math.abs(change) / heatRange(range) * 5));
-	return heatFill(change > 0 ? "positive" : "negative", step);
-}
 //#endregion
-export { HEAT_STEPS, heat, heatFill, heatRange, layout };
+export { layout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.9-next.23",
+  "version": "0.1.9-next.25",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",

package/report.css

@@ -30,6 +30,11 @@
   --negative-foreground: oklch(0.985 0 0);
   --warning: oklch(0.555 0.149 48.998);
   --warning-foreground: oklch(0.985 0 0);
+  --heat-1: 12%;
+  --heat-2: 24%;
+  --heat-3: 36%;
+  --heat-4: 48%;
+  --heat-5: 60%;
   --link: oklch(0.51 0.2 275);
   --chart-1: oklch(0.4 0.17 275);
   --chart-2: oklch(0.66 0.13 70);
@@ -72,6 +77,10 @@
     --negative-foreground: oklch(0.145 0 0);
     --warning: oklch(0.828 0.169 84.429);
     --warning-foreground: oklch(0.145 0 0);
+    --heat-1: 25%;
+    --heat-2: 33.75%;
+    --heat-3: 42.5%;
+    --heat-4: 51.25%;
     --link: oklch(0.75 0.128 275);
     --chart-1: oklch(0.58 0.2 275);
     --chart-2: oklch(0.88 0.08 75);

package/styles/siyahi.css

@@ -113,6 +113,16 @@
   --negative-foreground: oklch(0.985 0 0);
   --warning: oklch(0.555 0.149 48.998);
   --warning-foreground: oklch(0.985 0 0);
+  /*
+   * Heat steps: how much of --positive or --negative each of five steps mixes
+   * into the card, for Treemap, ChangeGrid and a signed CalendarHeatmap
+   * (lib/heat.ts). The contrast check reads them from here.
+   */
+  --heat-1: 12%;
+  --heat-2: 24%;
+  --heat-3: 36%;
+  --heat-4: 48%;
+  --heat-5: 60%;
   --link: oklch(0.51 0.2 275);
   /*
    * Indigo, amber, plum, sky, teal: no green or red, so no series reads as a
@@ -179,6 +189,12 @@
     --negative-foreground: oklch(0.145 0 0);
     --warning: oklch(0.828 0.169 84.429);
     --warning-foreground: oklch(0.145 0 0);
+    /* A 12% tint of a dark card reads as the card itself, so dark starts at 25%. */
+    --heat-1: 25%;
+    --heat-2: 33.75%;
+    --heat-3: 42.5%;
+    --heat-4: 51.25%;
+    --heat-5: 60%;
     --link: oklch(0.75 0.128 275);
     --chart-1: oklch(0.58 0.2 275);
     --chart-2: oklch(0.88 0.08 75);
@@ -237,9 +253,11 @@
  * --input is the edge of a field, where the reader types or picks. A button,
  * a toggle and a code block are framed by their label or their content, so
  * their outline stays the faint divider colour; scoping the variable keeps
- * the fill each derives from it faint too.
+ * the fill each derives from it faint too. A button is matched by its own
+ * group/button class: rendered as a popover or menu trigger, it takes that
+ * trigger's data-slot instead of "button".
  */
-:is([data-slot="button"], [data-slot="toggle"], [data-slot="toggle-group-item"], [data-slot="code-block"]) {
+:is([class~="group/button"], [data-slot="toggle"], [data-slot="toggle-group-item"], [data-slot="code-block"]) {
   --input: var(--border);
 }
 
@@ -263,7 +281,7 @@
  * hidden range input, so it shows the input's focus.
  */
 :is([data-slot="toggle"], [data-slot="toggle-group-item"], [data-slot="scroll-area-viewport"]):focus-visible,
-[data-slot="button"][data-day]:focus-visible {
+[class~="group/button"][data-day]:focus-visible {
   --tw-ring-color: var(--ring);
 }
 [data-slot="slider-thumb"]:has(input:focus-visible) {
@@ -274,13 +292,13 @@
  * A destructive control focuses, and an invalid field is edged, in the full
  * destructive colour; stock fades both to 40-50%, under 3:1.
  */
-[data-slot="button"][class~="text-destructive"]:focus-visible,
+[class~="group/button"][class~="text-destructive"]:focus-visible,
 [data-slot="code-block"][data-variant="destructive"]:has(> [data-slot="code-block-content"]:focus-visible),
 :is(
   [data-slot="input"],
   [data-slot="textarea"],
   [data-slot="select-trigger"],
-  [data-slot="button"]
+  [class~="group/button"]
 )[aria-invalid="true"],
 [data-slot="input-group"]:has([data-slot][aria-invalid="true"]) {
   border-color: var(--destructive);