@monimesl/dot-renderer-react 0.1.0-alpha.9 → 1.0.0-beta.1

package/README.md

@@ -1,41 +1,45 @@
 # @monimesl/dot-renderer-react
 
-Renders Dot pages with React. It is the renderer every dot runs with: dots depend on
-`@monimesl/dot-runtime`, which brings it in, and never import it themselves.
+Renders Dot pages with React. Every dot runs with this renderer. Dots get it through
+`@monimesl/dot-runtime` and never import it themselves.
 
 ## How it draws
 
-Each built-in component is a React component that draws plain elements with Dot's own inline
-styles, in the colors and shape of the dot's theme. A small stylesheet, `dist/styles.css`, holds
-what inline styles can't say, such as keyframes and scroll bars; the compiler copies it into each
-dot as `dot.css`.
+Each built-in component is a React component that draws plain elements with inline styles, in
+the colors and shape of the dot's theme. A small stylesheet, `dist/styles.css`, covers what inline
+styles can't do, such as keyframes and scroll bars. The compiler copies it into each dot as
+`dot.css`.
 
-[Base UI](https://base-ui.com)'s headless parts give five components the focus, keyboard and
+Five components use [Base UI](https://base-ui.com)'s headless parts for the focus, keyboard and
 screen-reader behaviour that is hard to get right: `Sheet` (and the sheet a `Select` opens), `Tabs`,
 `Switch`, `Checkbox` and `RadioGroup`. A sheet keeps focus inside it, closes on Escape and stops the
 page behind from scrolling. Fields link their hint or error to the control they describe.
 
-Icons are [Phosphor](https://phosphoricons.com)'s bold artwork, generated into the source at build
-time from `@phosphor-icons/core`.
+Icons are [Phosphor](https://phosphoricons.com)'s bold artwork. A script generates them into the
+source at build time, from `@phosphor-icons/core`.
 
 ## The theme
 
-A dot sets `scheme`, its `colors` (`primary`, `background`, `surface` and `text`, each for light
-and dark) and `shape` in `defineDot`. The renderer fills in the rest of its palette, the neutrals
-and the status colors, from Dash's own look. `useTheme()` gives a component the resolved theme.
+A dot sets `scheme`, `colors` and `shape` in `defineDot`. The colors are `primary`, `background`,
+`surface`, `text`, `muted`, `border` and `subtle`, each for light and dark, and `custom` for the
+dot's own named colors. A page can set its own colors over the theme's, with `configs.colors` or
+`setColors`. The renderer fills in the rest of the palette from Dash's own look. On a background
+that isn't Dash's, it works out surfaces and quieter text that sit well on it. `useTheme()` gives a
+component the resolved theme.
 
 ## Only the components a dot uses
 
 A dot's production build carries only the components its pages use. The compiler lists them from
-the pages and makes the webview with `createReactRenderer({ components })`, importing each one by
-name. The renderer is built as a file per module, with the libraries it bundles under
-`dist/vendor/`, so a dot's bundle leaves out a component, and what only it imports, entirely. A
-development build has every component, since a hot reload keeps the renderer a page runs with.
+the pages, imports each one by name and makes the webview with
+`createReactRenderer({ components })`. The renderer is built as one file per module, with the
+libraries it bundles under `dist/vendor/`. So a dot's bundle can leave out a component, and
+anything only that component imports. A development build has every component, because a hot reload
+keeps the renderer the page already runs with.
 
-`reactRenderer()`, the default export, makes a renderer with every built-in component, and takes
-`components` to add or replace some, and a `wrapper` around each page.
+`reactRenderer()`, the default export, makes a renderer with every built-in component. Pass
+`components` to add or replace some, and `wrapper` to wrap each page.
 
 ## React
 
-Hosts serve React, so dots don't bundle it. The build makes the React that hosts ship, in
-`dist/react-host/<version>/`, and a dot's page imports it through an import map.
+Hosts serve React, so dots don't bundle it. This package's build makes the React that hosts ship,
+in `dist/react-host/<version>/`. A dot's page imports it through an import map.

package/dist/color.js

@@ -1,20 +1,12 @@
 //#region src/color.ts
-const READABLE_CONTRAST = 4.5;
-function contrast(first, second) {
-	const [lighter, darker] = [luminance(first), luminance(second)].sort((a, b) => b - a);
-	return (lighter + .05) / (darker + .05);
+function mix(from, to, amount) {
+	const end = channels(to);
+	return toHex(channels(from).map((start, index) => start + (end[index] - start) * amount));
 }
 function darken(color, points) {
 	const [hue, saturation, lightness] = toHsl(channels(color));
 	return toHex(fromHsl(hue, saturation, Math.max(0, lightness - points / 100)));
 }
-function luminance(color) {
-	const [red, green, blue] = channels(color).map((channel) => {
-		const share = channel / 255;
-		return share <= .03928 ? share / 12.92 : ((share + .055) / 1.055) ** 2.4;
-	});
-	return .2126 * red + .7152 * green + .0722 * blue;
-}
 function channels(color) {
 	let hex = color.slice(1);
 	if (hex.length === 3 || hex.length === 4) hex = [...hex].map((digit) => digit + digit).join("");
@@ -22,7 +14,7 @@ function channels(color) {
 		0,
 		2,
 		4
-	].map((start) => parseInt(hex.slice(start, start + 2), 16));
+	].map((offset) => parseInt(hex.slice(offset, offset + 2), 16));
 	return [
 		red,
 		green,
@@ -33,13 +25,11 @@ function toHex(rgb) {
 	return `#${rgb.map((channel) => Math.round(channel).toString(16).padStart(2, "0")).join("")}`;
 }
 function toHsl([red, green, blue]) {
-	const [r, g, b] = [
-		red / 255,
-		green / 255,
-		blue / 255
-	];
-	const max = Math.max(r, g, b);
-	const min = Math.min(r, g, b);
+	const redShare = red / 255;
+	const greenShare = green / 255;
+	const blueShare = blue / 255;
+	const max = Math.max(redShare, greenShare, blueShare);
+	const min = Math.min(redShare, greenShare, blueShare);
 	const lightness = (max + min) / 2;
 	const chroma = max - min;
 	if (chroma === 0) return [
@@ -49,9 +39,9 @@ function toHsl([red, green, blue]) {
 	];
 	const saturation = chroma / (1 - Math.abs(2 * lightness - 1));
 	let hue;
-	if (max === r) hue = (g - b) / chroma % 6;
-	else if (max === g) hue = (b - r) / chroma + 2;
-	else hue = (r - g) / chroma + 4;
+	if (max === redShare) hue = (greenShare - blueShare) / chroma % 6;
+	else if (max === greenShare) hue = (blueShare - redShare) / chroma + 2;
+	else hue = (redShare - greenShare) / chroma + 4;
 	return [
 		(hue * 60 + 360) % 360,
 		saturation,
@@ -60,46 +50,45 @@ function toHsl([red, green, blue]) {
 }
 function fromHsl(hue, saturation, lightness) {
 	const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
-	const second = chroma * (1 - Math.abs(hue / 60 % 2 - 1));
-	const sector = Math.floor(hue / 60) % 6;
-	const [r, g, b] = [
+	const middle = chroma * (1 - Math.abs(hue / 60 % 2 - 1));
+	const [red, green, blue] = [
 		[
 			chroma,
-			second,
+			middle,
 			0
 		],
 		[
-			second,
+			middle,
 			chroma,
 			0
 		],
 		[
 			0,
 			chroma,
-			second
+			middle
 		],
 		[
 			0,
-			second,
+			middle,
 			chroma
 		],
 		[
-			second,
+			middle,
 			0,
 			chroma
 		],
 		[
 			chroma,
 			0,
-			second
+			middle
 		]
-	][sector];
+	][Math.floor(hue / 60) % 6];
 	const lift = lightness - chroma / 2;
 	return [
-		(r + lift) * 255,
-		(g + lift) * 255,
-		(b + lift) * 255
+		(red + lift) * 255,
+		(green + lift) * 255,
+		(blue + lift) * 255
 	];
 }
 //#endregion
-export { READABLE_CONTRAST, contrast, darken };
+export { darken, mix };

package/dist/components/amount-input.js

@@ -10,10 +10,10 @@ const AMOUNT_FONT_SIZE = 28;
 const DEFAULT_CURRENCY = "SLE";
 const AmountInput$1 = ({ value, currency = DEFAULT_CURRENCY, minorUnits, unit = "minor", label, placeholder, hint, error, disabled, onChange }) => {
 	const { colors } = useTheme();
-	const places = minorUnits === void 0 ? currencyMinorUnits(currency) : Math.max(0, Math.round(minorUnits));
-	const scale = unit === "major" ? 10 ** places : 1;
-	const show = (minor) => formatMinorUnits(minor, places);
-	const [text, typeText, reshowText] = useTypedText(amountText(value, scale), onChange !== void 0, (sent) => sent === "" ? "" : show(Number(sent)));
+	const decimalPlaces = minorUnits === void 0 ? currencyMinorUnits(currency) : Math.max(0, Math.round(minorUnits));
+	const scale = unit === "major" ? 10 ** decimalPlaces : 1;
+	const formatAmount = (minor) => formatMinorUnits(minor, decimalPlaces);
+	const [text, typeText, reshowText] = useTypedText(amountText(value, scale), onChange !== void 0, (sent) => sent === "" ? "" : formatAmount(Number(sent)));
 	const box = useFieldBox(error, disabled);
 	const { noteId, controlAttributes } = useFieldNote(hint, error);
 	return /* @__PURE__ */ jsx(Field, {
@@ -39,19 +39,19 @@ const AmountInput$1 = ({ value, currency = DEFAULT_CURRENCY, minorUnits, unit =
 				children: currency
 			}) : null, /* @__PURE__ */ jsx("input", {
 				value: text,
-				placeholder: placeholder ?? show(0),
-				inputMode: places > 0 ? "decimal" : "numeric",
+				placeholder: placeholder ?? formatAmount(0),
+				inputMode: decimalPlaces > 0 ? "decimal" : "numeric",
 				disabled,
 				...controlAttributes,
 				onFocus: box.onFocus,
 				onBlur: () => {
 					box.onBlur();
-					const amount = toMinorUnits(text, places);
-					if (amount !== null) reshowText(show(amount));
+					const amount = toMinorUnits(text, decimalPlaces);
+					if (amount !== null) reshowText(formatAmount(amount));
 				},
 				onChange: (event) => {
-					const typed = cleanAmount(event.currentTarget.value, places);
-					const amount = toMinorUnits(typed, places);
+					const typed = cleanAmount(event.currentTarget.value, decimalPlaces);
+					const amount = toMinorUnits(typed, decimalPlaces);
 					typeText(typed, amount === null ? "" : String(amount));
 					onChange?.(createEvent("change", { value: amount === null ? null : amount / scale }));
 				},
@@ -79,23 +79,28 @@ function amountText(value, scale) {
 	if (value === void 0) return;
 	return Number.isFinite(value) ? String(Math.round(value * scale)) : "";
 }
-function cleanAmount(typed, places) {
+function cleanAmount(typed, decimalPlaces) {
 	const [whole = "", ...fractions] = typed.replace(/[^\d.]/g, "").split(".");
-	const digits = whole.replace(/^0+/, "") || whole.slice(0, 1);
-	if (places === 0 || fractions.length === 0) return groupThousands(digits);
-	const fraction = fractions.join("").slice(0, places);
-	return `${groupThousands(digits) || "0"}.${fraction}`;
+	let wholeDigits = whole.replace(/^0+/, "");
+	if (wholeDigits === "" && whole !== "") wholeDigits = "0";
+	if (decimalPlaces === 0 || fractions.length === 0) return groupThousands(wholeDigits);
+	if (wholeDigits === "") wholeDigits = "0";
+	const fraction = fractions.join("").slice(0, decimalPlaces);
+	return `${groupThousands(wholeDigits)}.${fraction}`;
 }
-function toMinorUnits(text, places) {
+function toMinorUnits(text, decimalPlaces) {
 	const plain = text.replaceAll(",", "");
 	if (plain === "") return null;
 	const [whole = "", fraction = ""] = plain.split(".");
-	return Number(`${whole}${fraction.padEnd(places, "0").slice(0, places)}`);
+	const fractionDigits = fraction.padEnd(decimalPlaces, "0").slice(0, decimalPlaces);
+	return Number(`${whole}${fractionDigits}`);
 }
-function formatMinorUnits(minorUnits, places) {
-	const digits = String(Math.abs(minorUnits)).padStart(places + 1, "0");
-	const grouped = groupThousands(digits.slice(0, digits.length - places));
-	return places === 0 ? grouped : `${grouped}.${digits.slice(digits.length - places)}`;
+function formatMinorUnits(minorUnits, decimalPlaces) {
+	const digits = String(Math.abs(minorUnits)).padStart(decimalPlaces + 1, "0");
+	const wholeEnd = digits.length - decimalPlaces;
+	const grouped = groupThousands(digits.slice(0, wholeEnd));
+	if (decimalPlaces === 0) return grouped;
+	return `${grouped}.${digits.slice(wholeEnd)}`;
 }
 function groupThousands(digits) {
 	const groups = [];

package/dist/components/avatar.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { Avatar } from "@monimesl/dot-core";
+//#region src/components/avatar.d.ts
+declare const Avatar$1: ReactComponent<typeof Avatar>;
+//#endregion
+export { Avatar$1 as Avatar };

package/dist/components/avatar.js

@@ -0,0 +1,68 @@
+import { useTheme } from "../theme.js";
+import { WEIGHTS } from "./tokens.js";
+import { USER_ARTWORK } from "./icon-artwork.js";
+import { IconSvg } from "./icon-svg.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/avatar.tsx
+const AVATAR_SIZE = {
+	small: 32,
+	medium: 40,
+	large: 56
+};
+function initials(name) {
+	const words = name.trim().split(/\s+/).filter(Boolean);
+	if (words.length === 0) return "";
+	const firstInitial = initialOf(words[0]);
+	if (words.length === 1) return firstInitial;
+	return firstInitial + initialOf(words[words.length - 1]);
+}
+function initialOf(word) {
+	return word.charAt(0).toUpperCase();
+}
+const Avatar = ({ name = "", image, size = "medium" }) => {
+	const { colors } = useTheme();
+	const [failedImage, setFailedImage] = useState();
+	const pixels = AVATAR_SIZE[size];
+	const letters = initials(name);
+	let content;
+	if (image && failedImage !== image) content = /* @__PURE__ */ jsx("img", {
+		src: image,
+		alt: "",
+		onError: () => setFailedImage(image),
+		style: {
+			width: "100%",
+			height: "100%",
+			objectFit: "cover"
+		}
+	});
+	else if (letters) content = letters;
+	else content = /* @__PURE__ */ jsx(IconSvg, {
+		artwork: USER_ARTWORK,
+		size: Math.round(pixels * .55),
+		color: "currentColor"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "dot-avatar",
+		role: "img",
+		"aria-label": name || void 0,
+		style: {
+			display: "inline-flex",
+			flexShrink: 0,
+			alignItems: "center",
+			justifyContent: "center",
+			width: pixels,
+			height: pixels,
+			borderRadius: "50%",
+			overflow: "hidden",
+			background: colors.muted,
+			color: colors.subtle,
+			fontSize: Math.round(pixels * .4),
+			fontWeight: WEIGHTS.bold,
+			lineHeight: 1
+		},
+		children: content
+	});
+};
+//#endregion
+export { Avatar };

package/dist/components/box.js

@@ -0,0 +1,56 @@
+import { CARD_RADIUS_SCALE } from "./tokens.js";
+import { isTone, toneBackground } from "./tones.js";
+import { BACKGROUNDS } from "@monimesl/dot-core";
+//#region src/components/box.ts
+const RADIUS_SCALE = {
+	none: 0,
+	small: .5,
+	medium: 1,
+	large: CARD_RADIUS_SCALE
+};
+const FULL_RADIUS = 9999;
+const BACKGROUND_WORDS = new Set(BACKGROUNDS.words);
+function boxStyle(props, theme, look = {}) {
+	const background = props.background ?? look.background;
+	const border = props.border ?? look.border;
+	const radius = props.radius ?? look.radius;
+	const style = {};
+	if (background !== void 0) style.background = backgroundColor(background, theme);
+	if (border === "none") style.border = "none";
+	else if (border !== void 0) style.border = `1px solid ${border === "strong" ? theme.colors.subtle : theme.colors.border}`;
+	if (radius !== void 0) {
+		style.borderRadius = radius === "full" ? FULL_RADIUS : theme.radius * RADIUS_SCALE[radius];
+		style.overflow = "hidden";
+	}
+	if (props.width !== void 0) {
+		style.width = cssLength(props.width);
+		style.flexShrink = 0;
+	}
+	if (props.aspect !== void 0) style.aspectRatio = props.aspect.replace(":", " / ");
+	else if (props.height !== void 0) {
+		style.height = cssLength(props.height);
+		style.flexShrink = 0;
+	}
+	if (props.minHeight !== void 0) style.minHeight = props.minHeight;
+	if (props.maxWidth !== void 0) style.maxWidth = props.maxWidth;
+	return style;
+}
+function backgroundColor(background, theme) {
+	if (isTone(background)) return toneBackground(theme.colors, background);
+	if (BACKGROUND_WORDS.has(background)) return theme.colors[background];
+	return customColor(background, theme);
+}
+const unknownColors = /* @__PURE__ */ new Set();
+function customColor(name, theme) {
+	const color = theme.customColors[name];
+	if (color === void 0 && !unknownColors.has(name)) {
+		unknownColors.add(name);
+		console.warn(`The theme has no colour named "${name}". Add it to colors.custom in dot.ts.`);
+	}
+	return color;
+}
+function cssLength(value) {
+	return value === "fill" ? "100%" : value;
+}
+//#endregion
+export { boxStyle, customColor };