@monimesl/dot-renderer-react 0.1.0-alpha.15 → 0.1.0-alpha.18

package/dist/components/box.js

@@ -0,0 +1,59 @@
+import { CARD_RADIUS_SCALE } from "./tokens.js";
+import { toneBackground } from "./tones.js";
+import { BACKGROUNDS, TONES } 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);
+const TONE_WORDS = new Set(TONES);
+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 !== void 0) {
+		const color = border === "strong" ? theme.colors.subtle : theme.colors.border;
+		style.border = border === "none" ? "none" : `1px solid ${color}`;
+	}
+	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 (TONE_WORDS.has(background)) return toneBackground(theme.colors, background);
+	if (BACKGROUND_WORDS.has(background)) return theme.colors[background];
+	return customColor(background, theme);
+}
+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;
+}
+const unknownColors = /* @__PURE__ */ new Set();
+function cssLength(value) {
+	return value === "fill" ? "100%" : value;
+}
+//#endregion
+export { boxStyle, customColor };

package/dist/components/https.js

@@ -0,0 +1,11 @@
+//#region src/components/https.ts
+function isHttps(href) {
+	if (!href) return false;
+	try {
+		return new URL(href).protocol === "https:";
+	} catch {
+		return false;
+	}
+}
+//#endregion
+export { isHttps };

package/dist/components/index.d.ts

@@ -15,16 +15,20 @@ import { Input } from "./input.js";
 import { Link } from "./link.js";
 import { List, ListItem } from "./list.js";
 import { Option } from "./option.js";
+import { Bullet, BulletList, Prose, Quote } from "./prose.js";
 import { QRCode } from "./qr-code.js";
+import { RichText } from "./rich-text.js";
 import { Scroll } from "./scroll.js";
 import { Select } from "./select.js";
 import { Sheet } from "./sheet.js";
 import { Skeleton } from "./skeleton.js";
+import { Slider } from "./slider.js";
 import { Spinner } from "./spinner.js";
+import { Stack } from "./stack.js";
 import { Tab, Tabs } from "./tabs.js";
 import { Text } from "./text.js";
 import { TextArea } from "./text-area.js";
 import { Toast } from "./toast.js";
 import { Checkbox, Radio, RadioGroup, Switch } from "./toggles.js";
 import { View } from "./view.js";
-export { AmountInput, Badge, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, QRCode, Radio, RadioGroup, Scroll, Select, Sheet, Skeleton, Spinner, Switch, Tab, Tabs, Text, TextArea, Toast, View };
+export { AmountInput, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Switch, Tab, Tabs, Text, TextArea, Toast, View };

package/dist/components/index.js

@@ -17,13 +17,17 @@ import { Input } from "./input.js";
 import { Link } from "./link.js";
 import { List, ListItem } from "./list.js";
 import { Option } from "./option.js";
+import { Bullet, BulletList, Prose, Quote } from "./prose.js";
 import { QRCode } from "./qr-code.js";
+import { Text } from "./text.js";
+import { RichText } from "./rich-text.js";
 import { Scroll } from "./scroll.js";
 import { Sheet } from "./sheet.js";
 import { Select } from "./select.js";
 import { Skeleton } from "./skeleton.js";
+import { Slider } from "./slider.js";
+import { Stack } from "./stack.js";
 import { Tab, Tabs } from "./tabs.js";
-import { Text } from "./text.js";
 import { TextArea } from "./text-area.js";
 import { Toast } from "./toast.js";
 import { Checkbox, Radio, RadioGroup, Switch } from "./toggles.js";
@@ -32,6 +36,8 @@ import { View } from "./view.js";
 var components_exports = /* @__PURE__ */ __exportAll({
 	AmountInput: () => AmountInput,
 	Badge: () => Badge,
+	Bullet: () => Bullet,
+	BulletList: () => BulletList,
 	Button: () => Button,
 	Carousel: () => Carousel,
 	Checkbox: () => Checkbox,
@@ -52,14 +58,19 @@ var components_exports = /* @__PURE__ */ __exportAll({
 	Notice: () => Notice,
 	Option: () => Option,
 	ProgressBar: () => ProgressBar,
+	Prose: () => Prose,
 	QRCode: () => QRCode,
+	Quote: () => Quote,
 	Radio: () => Radio,
 	RadioGroup: () => RadioGroup,
+	RichText: () => RichText,
 	Scroll: () => Scroll,
 	Select: () => Select,
 	Sheet: () => Sheet,
 	Skeleton: () => Skeleton,
+	Slider: () => Slider,
 	Spinner: () => Spinner,
+	Stack: () => Stack,
 	Switch: () => Switch,
 	Tab: () => Tab,
 	Tabs: () => Tabs,
@@ -69,4 +80,4 @@ var components_exports = /* @__PURE__ */ __exportAll({
 	View: () => View
 });
 //#endregion
-export { AmountInput, Badge, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, QRCode, Radio, RadioGroup, Scroll, Select, Sheet, Skeleton, Spinner, Switch, Tab, Tabs, Text, TextArea, Toast, View, components_exports };
+export { AmountInput, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Switch, Tab, Tabs, Text, TextArea, Toast, View, components_exports };

package/dist/components/link.js

@@ -1,17 +1,10 @@
 import { useTheme } from "../theme.js";
 import { toneColor } from "./tones.js";
 import { pressable } from "./pressable.js";
+import { isHttps } from "./https.js";
 import { createEvent } from "@monimesl/dot-core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/link.tsx
-function isHttps(href) {
-	if (!href) return false;
-	try {
-		return new URL(href).protocol === "https:";
-	} catch {
-		return false;
-	}
-}
 const Link$1 = ({ href, tone, onTap, children }) => {
 	const { colors } = useTheme();
 	const style = {

package/dist/components/prose-context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+//#region src/components/prose-context.ts
+const InsideProse = createContext(false);
+//#endregion
+export { InsideProse };

package/dist/components/prose.d.ts

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

package/dist/components/prose.js

@@ -0,0 +1,67 @@
+import { useTheme } from "../theme.js";
+import { FONT_SIZE, SELECTABLE } from "./tokens.js";
+import { paddingStyle } from "./padding.js";
+import { InsideProse } from "./prose-context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/prose.tsx
+const READING_WIDTH = 680;
+const Prose = ({ children, ...padding }) => /* @__PURE__ */ jsx("div", {
+	className: "dot-prose",
+	style: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 12,
+		width: "100%",
+		maxWidth: READING_WIDTH,
+		marginInline: "auto",
+		...SELECTABLE,
+		...paddingStyle(padding)
+	},
+	children: /* @__PURE__ */ jsx(InsideProse.Provider, {
+		value: true,
+		children
+	})
+});
+const Quote = ({ cite, children }) => {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsxs("blockquote", {
+		className: "dot-quote",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 6,
+			margin: 0,
+			paddingInlineStart: 14,
+			borderInlineStart: `3px solid ${colors.subtle}`,
+			fontStyle: "italic"
+		},
+		children: [children, cite && /* @__PURE__ */ jsxs("span", {
+			style: {
+				fontSize: FONT_SIZE.caption,
+				fontStyle: "normal",
+				color: colors.subtle
+			},
+			children: ["— ", cite]
+		})]
+	});
+};
+const BulletList = ({ ordered, children }) => {
+	return /* @__PURE__ */ jsx(ordered ? "ol" : "ul", {
+		className: "dot-bullets",
+		style: {
+			display: "grid",
+			gap: 6,
+			margin: 0,
+			paddingInlineStart: 22,
+			listStyleType: ordered ? "decimal" : "disc"
+		},
+		children
+	});
+};
+const Bullet = ({ children }) => /* @__PURE__ */ jsx("li", {
+	className: "dot-bullet",
+	style: { display: "list-item" },
+	children
+});
+//#endregion
+export { Bullet, BulletList, Prose, Quote };

package/dist/components/rich-text.d.ts

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

package/dist/components/rich-text.js

@@ -0,0 +1,73 @@
+import { useTheme } from "../theme.js";
+import { Divider } from "./divider.js";
+import { Image } from "./image.js";
+import { isHttps } from "./https.js";
+import { Link } from "./link.js";
+import { Bullet, BulletList, Prose, Quote } from "./prose.js";
+import { parseMarkdown } from "../markdown.js";
+import { Text } from "./text.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/rich-text.tsx
+const HEADING_TEXT = {
+	1: { variant: "title" },
+	2: { variant: "subtitle" },
+	3: { weight: "bold" }
+};
+const RichText = ({ markdown }) => {
+	const blocks = useMemo(() => parseMarkdown(markdown ?? ""), [markdown]);
+	return /* @__PURE__ */ jsx(Prose, { children: blocks.map(renderBlock) });
+};
+function renderBlock(block, key) {
+	switch (block.kind) {
+		case "heading": return /* @__PURE__ */ jsx(Text, {
+			...HEADING_TEXT[block.level],
+			children: block.content.map(renderInline)
+		}, key);
+		case "paragraph": return /* @__PURE__ */ jsx(Text, { children: block.content.map(renderInline) }, key);
+		case "list": return /* @__PURE__ */ jsx(BulletList, {
+			ordered: block.ordered,
+			children: block.items.map((item, itemKey) => /* @__PURE__ */ jsx(Bullet, { children: item.map(renderBlock) }, itemKey))
+		}, key);
+		case "quote": return /* @__PURE__ */ jsx(Quote, { children: block.blocks.map(renderBlock) }, key);
+		case "image": return /* @__PURE__ */ jsx(Image, {
+			src: block.src,
+			alt: block.alt
+		}, key);
+		case "rule": return /* @__PURE__ */ jsx(Divider, {}, key);
+	}
+}
+function renderInline(inline, key) {
+	switch (inline.kind) {
+		case "text": return inline.text;
+		case "strong": return /* @__PURE__ */ jsx(Text, {
+			weight: "bold",
+			children: inline.children.map(renderInline)
+		}, key);
+		case "emphasis": return /* @__PURE__ */ jsx(Text, {
+			italic: true,
+			children: inline.children.map(renderInline)
+		}, key);
+		case "code": return /* @__PURE__ */ jsx(Code, { text: inline.text }, key);
+		case "link": return isHttps(inline.href) ? /* @__PURE__ */ jsx(Link, {
+			href: inline.href,
+			children: inline.children.map(renderInline)
+		}, key) : inline.children.map(renderInline);
+		case "break": return /* @__PURE__ */ jsx("br", {}, key);
+	}
+}
+function Code({ text }) {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsx("code", {
+		style: {
+			padding: "1px 4px",
+			borderRadius: 4,
+			background: colors.muted,
+			fontFamily: "ui-monospace, monospace",
+			fontSize: "0.9em"
+		},
+		children: text
+	});
+}
+//#endregion
+export { RichText };

package/dist/components/slider.d.ts

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

package/dist/components/slider.js

@@ -0,0 +1,57 @@
+import { useTheme } from "../theme.js";
+import { DISABLED_OPACITY, FONT_SIZE } from "./tokens.js";
+import { Field, FieldLabel } from "./field.js";
+import { useFieldNote } from "./field-box.js";
+import { useTypedText } from "./typed-text.js";
+import { createEvent } from "@monimesl/dot-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/slider.tsx
+const Slider$1 = ({ value, min = 0, max = 100, step = 1, showValue, label, hint, disabled, onChange }) => {
+	const { colors } = useTheme();
+	const [position, move] = useTypedText(value === void 0 ? void 0 : String(value), onChange !== void 0);
+	const { noteId, controlAttributes } = useFieldNote(hint, void 0);
+	const shown = position === "" ? String(min) : position;
+	return /* @__PURE__ */ jsxs(Field, {
+		label: void 0,
+		hint,
+		error: void 0,
+		noteId,
+		children: [label || showValue ? /* @__PURE__ */ jsxs("span", {
+			style: {
+				display: "flex",
+				justifyContent: "space-between"
+			},
+			children: [/* @__PURE__ */ jsx(FieldLabel, { children: label }), showValue ? /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: FONT_SIZE.caption,
+					color: colors.subtle,
+					fontVariantNumeric: "tabular-nums"
+				},
+				children: shown
+			}) : null]
+		}) : null, /* @__PURE__ */ jsx("input", {
+			className: "dot-slider",
+			type: "range",
+			min,
+			max,
+			step,
+			value: shown,
+			disabled,
+			"aria-label": label,
+			...controlAttributes,
+			onChange: (event) => {
+				const next = event.currentTarget.value;
+				move(next);
+				onChange?.(createEvent("change", { value: Number(next) }));
+			},
+			style: {
+				width: "100%",
+				margin: 0,
+				accentColor: colors.primary,
+				opacity: disabled ? DISABLED_OPACITY : 1
+			}
+		})]
+	});
+};
+//#endregion
+export { Slider$1 as Slider };

package/dist/components/stack.d.ts

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

package/dist/components/stack.js

@@ -0,0 +1,25 @@
+import { useTheme } from "../theme.js";
+import { boxStyle } from "./box.js";
+import { Children } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/stack.tsx
+const Stack = (props) => {
+	const theme = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-stack",
+		style: {
+			display: "grid",
+			...boxStyle(props, theme)
+		},
+		children: Children.map(props.children, (child) => /* @__PURE__ */ jsx("div", {
+			style: {
+				gridArea: "1 / 1",
+				display: "grid",
+				minWidth: 0
+			},
+			children: child
+		}))
+	});
+};
+//#endregion
+export { Stack };

package/dist/components/text.js

@@ -1,26 +1,83 @@
 import { useTheme } from "../theme.js";
-import { FONT_SIZE, WEIGHTS } from "./tokens.js";
+import { FONT_SIZE, SELECTABLE, WEIGHTS } from "./tokens.js";
 import { paddingStyle } from "./padding.js";
 import { toneColor } from "./tones.js";
+import { InsideProse } from "./prose-context.js";
+import { customColor } from "./box.js";
+import { TONES } from "@monimesl/dot-core";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/text.tsx
 const InsideText = createContext(false);
-const Text = ({ variant = "body", tone, weight, align, maxLines, children, ...padding }) => {
-	const { colors } = useTheme();
+const VARIANTS = {
+	display: {
+		weight: "bold",
+		lineHeight: 1.15,
+		heading: true
+	},
+	title: {
+		weight: "bold",
+		lineHeight: 1.25,
+		heading: true
+	},
+	subtitle: {
+		weight: "medium",
+		lineHeight: 1.35,
+		heading: true
+	},
+	lead: {
+		weight: "regular",
+		lineHeight: 1.5,
+		heading: false
+	},
+	body: {
+		weight: "regular",
+		lineHeight: 1.5,
+		heading: false
+	},
+	caption: {
+		weight: "regular",
+		lineHeight: 1.4,
+		heading: false
+	}
+};
+const LEADING_CHANGE = {
+	tight: -.1,
+	normal: 0,
+	relaxed: .2
+};
+const DECORATION = {
+	none: "none",
+	underline: "underline",
+	strikethrough: "line-through"
+};
+const Text$1 = ({ variant = "body", tone, weight, align, maxLines, decoration, numeric, leading, italic, selectable, children, ...padding }) => {
+	const theme = useTheme();
 	const nested = useContext(InsideText);
-	const defaultWeight = variant === "title" ? "bold" : "regular";
+	const inProse = useContext(InsideProse);
+	const { heading, lineHeight, weight: defaultWeight } = VARIANTS[variant];
+	const defaultLeading = inProse && !heading ? "relaxed" : "normal";
 	const style = {
 		display: nested ? "inline" : "block",
-		margin: 0,
+		marginInline: 0,
+		marginBlockEnd: 0,
+		marginBlockStart: inProse && heading ? void 0 : 0,
 		fontSize: FONT_SIZE[variant],
-		lineHeight: "normal",
 		fontWeight: WEIGHTS[weight ?? defaultWeight],
-		letterSpacing: "normal",
-		color: tone ? toneColor(colors, tone) : "inherit",
+		fontStyle: italic ? "italic" : void 0,
+		letterSpacing: variant === "display" ? "-0.02em" : "normal",
+		color: tone ? textColor(tone, theme) : "inherit",
 		textAlign: align,
+		textDecorationLine: decoration ? DECORATION[decoration] : void 0,
+		fontVariantNumeric: numeric ? "tabular-nums" : void 0,
+		...selectable ? SELECTABLE : void 0,
 		...paddingStyle(padding)
 	};
+	if (!nested) {
+		style.lineHeight = lineHeight + LEADING_CHANGE[leading ?? defaultLeading];
+		style.textWrap = heading ? "balance" : "pretty";
+		style.overflowWrap = "anywhere";
+	}
 	if (maxLines) {
 		style.display = "-webkit-box";
 		style.WebkitLineClamp = maxLines;
@@ -31,8 +88,8 @@ const Text = ({ variant = "body", tone, weight, align, maxLines, children, ...pa
 		value: true,
 		children
 	});
-	if (variant === "title" && !nested) return /* @__PURE__ */ jsx("h2", {
-		className: "dot-text",
+	if ((variant === "title" || variant === "subtitle") && !nested) return /* @__PURE__ */ jsx(variant === "title" ? "h2" : "h3", {
+		className: "dot-text dot-heading",
 		style,
 		children: content
 	});
@@ -42,5 +99,10 @@ const Text = ({ variant = "body", tone, weight, align, maxLines, children, ...pa
 		children: content
 	});
 };
+const THEME_TONES = new Set(TONES);
+function textColor(tone, theme) {
+	if (THEME_TONES.has(tone)) return toneColor(theme.colors, tone);
+	return tone === "onPrimary" ? theme.colors.onPrimary : customColor(tone, theme);
+}
 //#endregion
-export { Text };
+export { Text$1 as Text };

package/dist/components/tokens.js

@@ -8,7 +8,10 @@ const SPACE = {
 const FONT_SIZE = {
 	caption: 13,
 	body: 15,
-	title: 20
+	lead: 17,
+	subtitle: 17,
+	title: 20,
+	display: 32
 };
 const WEIGHTS = {
 	regular: 400,
@@ -33,5 +36,9 @@ const PILL_STYLE = {
 	lineHeight: "16px",
 	textAlign: "center"
 };
+const SELECTABLE = {
+	userSelect: "text",
+	WebkitUserSelect: "text"
+};
 //#endregion
-export { CARD_RADIUS_SCALE, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, PILL_STYLE, SPACE, WEIGHTS };
+export { CARD_RADIUS_SCALE, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, PILL_STYLE, SELECTABLE, SPACE, WEIGHTS };

package/dist/components/view.js

@@ -1,7 +1,8 @@
 import { useTheme } from "../theme.js";
-import { CARD_RADIUS_SCALE, SPACE } from "./tokens.js";
+import { SPACE } from "./tokens.js";
 import { insets, paddingStyle } from "./padding.js";
 import { pressable } from "./pressable.js";
+import { boxStyle } from "./box.js";
 import { createEvent } from "@monimesl/dot-core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/view.tsx
@@ -17,8 +18,14 @@ const JUSTIFY = {
 	end: "flex-end",
 	between: "space-between"
 };
-const View$1 = ({ direction = "column", gap = "medium", align = "stretch", justify = "start", wrap = false, grow = false, variant = "plain", onTap, children, ...padding }) => {
-	const { colors, radius } = useTheme();
+const CARD_LOOK = {
+	background: "surface",
+	border: "subtle",
+	radius: "large"
+};
+const View$1 = (props) => {
+	const { direction = "column", gap = "medium", align = "stretch", justify = "start", wrap = false, grow = false, variant = "plain", onTap, children } = props;
+	const theme = useTheme();
 	const card = variant === "card";
 	const style = {
 		display: "flex",
@@ -27,18 +34,14 @@ const View$1 = ({ direction = "column", gap = "medium", align = "stretch", justi
 		justifyContent: JUSTIFY[justify],
 		flexWrap: wrap ? "wrap" : "nowrap",
 		gap: SPACE[gap],
-		...paddingStyle(padding, card ? insets(SPACE.large) : void 0),
+		...paddingStyle(props, card ? insets(SPACE.large) : void 0),
+		...boxStyle(props, theme, card ? CARD_LOOK : void 0),
 		cursor: onTap ? "pointer" : void 0
 	};
 	if (grow) {
 		style.flexGrow = 1;
 		style.minWidth = 0;
 	}
-	if (card) {
-		style.background = colors.surface;
-		style.border = `1px solid ${colors.border}`;
-		style.borderRadius = radius * CARD_RADIUS_SCALE;
-	}
 	const press = onTap ? pressable(() => onTap(createEvent("tap"))) : void 0;
 	return /* @__PURE__ */ jsx("div", {
 		className: "dot-view",

package/dist/index.d.ts

@@ -18,12 +18,16 @@ import { Input } from "./components/input.js";
 import { Link } from "./components/link.js";
 import { List, ListItem } from "./components/list.js";
 import { Option } from "./components/option.js";
+import { Bullet, BulletList, Prose, Quote } from "./components/prose.js";
 import { QRCode } from "./components/qr-code.js";
+import { RichText } from "./components/rich-text.js";
 import { Scroll } from "./components/scroll.js";
 import { Select } from "./components/select.js";
 import { Sheet } from "./components/sheet.js";
 import { Skeleton } from "./components/skeleton.js";
+import { Slider } from "./components/slider.js";
 import { Spinner } from "./components/spinner.js";
+import { Stack } from "./components/stack.js";
 import { Tab, Tabs } from "./components/tabs.js";
 import { Text } from "./components/text.js";
 import { TextArea } from "./components/text-area.js";
@@ -32,4 +36,4 @@ import { Checkbox, Radio, RadioGroup, Switch } from "./components/toggles.js";
 import { View } from "./components/view.js";
 import "./components/index.js";
 import { ResolvedColors, ResolvedTheme, resolveTheme, useTheme } from "./theme.js";
-export { AmountInput, Badge, type BuiltinReactComponents, Button, Carousel, Checkbox, Chip, CodeInput, type CreateReactRendererOptions, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, QRCode, Radio, RadioGroup, type ReactComponent, type ReactComponents, type ReactRendererOptions, type ResolvedColors, type ResolvedTheme, Scroll, Select, Sheet, Skeleton, Spinner, Switch, Tab, Tabs, Text, TextArea, Toast, View, type Wrapper, createReactRenderer, reactRenderer as default, resolveTheme, useTheme };
+export { AmountInput, Badge, type BuiltinReactComponents, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, type CreateReactRendererOptions, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, type ReactComponent, type ReactComponents, type ReactRendererOptions, type ResolvedColors, type ResolvedTheme, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Switch, Tab, Tabs, Text, TextArea, Toast, View, type Wrapper, createReactRenderer, reactRenderer as default, resolveTheme, useTheme };

package/dist/index.js

@@ -17,13 +17,17 @@ import { Input } from "./components/input.js";
 import { Link } from "./components/link.js";
 import { List, ListItem } from "./components/list.js";
 import { Option } from "./components/option.js";
+import { Bullet, BulletList, Prose, Quote } from "./components/prose.js";
 import { QRCode } from "./components/qr-code.js";
+import { Text } from "./components/text.js";
+import { RichText } from "./components/rich-text.js";
 import { Scroll } from "./components/scroll.js";
 import { Sheet } from "./components/sheet.js";
 import { Select } from "./components/select.js";
 import { Skeleton } from "./components/skeleton.js";
+import { Slider } from "./components/slider.js";
+import { Stack } from "./components/stack.js";
 import { Tab, Tabs } from "./components/tabs.js";
-import { Text } from "./components/text.js";
 import { TextArea } from "./components/text-area.js";
 import { Toast } from "./components/toast.js";
 import { Checkbox, Radio, RadioGroup, Switch } from "./components/toggles.js";
@@ -32,4 +36,4 @@ import { createReactRenderer, reactRenderer } from "./renderer.js";
 //#region src/index.ts
 var src_default = reactRenderer;
 //#endregion
-export { AmountInput, Badge, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, QRCode, Radio, RadioGroup, Scroll, Select, Sheet, Skeleton, Spinner, Switch, Tab, Tabs, Text, TextArea, Toast, View, createReactRenderer, src_default as default, resolveTheme, useTheme };
+export { AmountInput, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Switch, Tab, Tabs, Text, TextArea, Toast, View, createReactRenderer, src_default as default, resolveTheme, useTheme };

package/dist/markdown.js

@@ -0,0 +1,226 @@
+//#region src/markdown.ts
+const HEADING = /^(#{1,6})\s+(.*?)\s*#*\s*$/;
+const RULE = /^ {0,3}([-*_])( *\1){2,} *$/;
+const QUOTE = /^ {0,3}> ?/;
+const LIST_ITEM = /^ {0,3}([-*+]|\d{1,9}[.)])\s+/;
+const LINK = /^(!?)\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/;
+const AUTOLINK = /^<(https?:\/\/[^>\s]+)>/;
+const PUNCTUATION = /[!-/:-@[-`{-~]/;
+const ITEM_INDENT = "  ";
+function parseMarkdown(markdown) {
+	return parseBlocks(markdown.replace(/\r\n?/g, "\n").split("\n"));
+}
+function parseBlocks(lines) {
+	const blocks = [];
+	let index = 0;
+	while (index < lines.length) {
+		const line = lines[index];
+		if (line.trim() === "") {
+			index += 1;
+			continue;
+		}
+		const single = oneLineBlock(line);
+		if (single) {
+			blocks.push(single);
+			index += 1;
+		} else if (QUOTE.test(line)) {
+			const quoted = [];
+			while (index < lines.length && QUOTE.test(lines[index])) {
+				quoted.push(lines[index].replace(QUOTE, ""));
+				index += 1;
+			}
+			blocks.push({
+				kind: "quote",
+				blocks: parseBlocks(quoted)
+			});
+		} else if (LIST_ITEM.test(line)) {
+			const { list, next } = parseList(lines, index);
+			blocks.push(list);
+			index = next;
+		} else {
+			const paragraph = [];
+			while (index < lines.length && !endsParagraph(lines[index])) {
+				paragraph.push(lines[index]);
+				index += 1;
+			}
+			blocks.push({
+				kind: "paragraph",
+				content: parseInline(joinLines(paragraph))
+			});
+		}
+	}
+	return blocks;
+}
+function oneLineBlock(line) {
+	const heading = HEADING.exec(line);
+	if (heading) return {
+		kind: "heading",
+		level: Math.min(heading[1].length, 3),
+		content: parseInline(heading[2])
+	};
+	if (RULE.test(line)) return { kind: "rule" };
+	const trimmed = line.trim();
+	const picture = LINK.exec(trimmed);
+	if (picture && picture[1] === "!" && picture[0].length === trimmed.length) return {
+		kind: "image",
+		alt: picture[2],
+		src: picture[3]
+	};
+	return null;
+}
+function endsParagraph(line) {
+	return line.trim() === "" || HEADING.test(line) || RULE.test(line) || QUOTE.test(line) || LIST_ITEM.test(line);
+}
+function joinLines(lines) {
+	let text = "";
+	lines.forEach((line, index) => {
+		text += line.trim().replace(/\\$/, "");
+		if (index < lines.length - 1) text += /( {2,}|\\)$/.test(line) ? "\n" : " ";
+	});
+	return text;
+}
+function parseList(lines, start) {
+	const ordered = isOrdered(LIST_ITEM.exec(lines[start]));
+	const items = [];
+	let index = start;
+	while (index < lines.length) {
+		const marker = LIST_ITEM.exec(lines[index]);
+		if (!marker || isOrdered(marker) !== ordered) break;
+		const indent = marker[0].length;
+		const itemLines = [lines[index].slice(indent)];
+		index += 1;
+		while (index < lines.length) {
+			const line = lines[index];
+			if (line.trim() === "") {
+				if (!lines[index + 1]?.startsWith(ITEM_INDENT)) break;
+				itemLines.push("");
+			} else if (line.startsWith(ITEM_INDENT)) itemLines.push(withoutIndent(line, indent));
+			else if (endsParagraph(line)) break;
+			else itemLines.push(line);
+			index += 1;
+		}
+		items.push(parseBlocks(itemLines));
+	}
+	return {
+		list: {
+			kind: "list",
+			ordered,
+			items
+		},
+		next: index
+	};
+}
+function isOrdered(marker) {
+	return /\d/.test(marker[1]);
+}
+function withoutIndent(line, indent) {
+	const spaces = line.length - line.trimStart().length;
+	return line.slice(Math.min(spaces, indent));
+}
+function parseInline(text) {
+	const inlines = [];
+	let plain = "";
+	let index = 0;
+	const flush = () => {
+		if (plain) {
+			inlines.push({
+				kind: "text",
+				text: plain
+			});
+			plain = "";
+		}
+	};
+	const take = (inline, length) => {
+		flush();
+		inlines.push(inline);
+		index += length;
+	};
+	while (index < text.length) {
+		const char = text[index];
+		const next = text[index + 1];
+		const rest = text.slice(index);
+		if (char === "\\" && next !== void 0 && PUNCTUATION.test(next)) {
+			plain += next;
+			index += 2;
+			continue;
+		}
+		if (char === "\n") {
+			take({ kind: "break" }, 1);
+			continue;
+		}
+		const codeEnd = char === "`" ? text.indexOf("`", index + 1) : -1;
+		if (codeEnd > index + 1) {
+			take({
+				kind: "code",
+				text: text.slice(index + 1, codeEnd)
+			}, codeEnd + 1 - index);
+			continue;
+		}
+		const link = LINK.exec(rest);
+		if (link) {
+			const [whole, picture, label, href] = link;
+			take(picture === "!" ? {
+				kind: "text",
+				text: label
+			} : {
+				kind: "link",
+				href,
+				children: parseInline(label)
+			}, whole.length);
+			continue;
+		}
+		const autolink = AUTOLINK.exec(rest);
+		if (autolink) {
+			const [whole, href] = autolink;
+			take({
+				kind: "link",
+				href,
+				children: [{
+					kind: "text",
+					text: href
+				}]
+			}, whole.length);
+			continue;
+		}
+		const strong = char === "*" || char === "_" ? between(text, index, char + char) : null;
+		if (strong) {
+			take({
+				kind: "strong",
+				children: parseInline(strong.inner)
+			}, strong.length);
+			continue;
+		}
+		const emphasis = char === "*" || char === "_" ? between(text, index, char) : null;
+		if (emphasis) {
+			take({
+				kind: "emphasis",
+				children: parseInline(emphasis.inner)
+			}, emphasis.length);
+			continue;
+		}
+		plain += char;
+		index += 1;
+	}
+	flush();
+	return inlines;
+}
+function between(text, start, delimiter) {
+	const open = start + delimiter.length;
+	if (!text.startsWith(delimiter, start) || open >= text.length || /\s/.test(text[open])) return null;
+	const underscore = delimiter.startsWith("_");
+	if (underscore && /\w/.test(text[start - 1] ?? "")) return null;
+	let close = text.indexOf(delimiter, open + 1);
+	while (close !== -1) {
+		const touchesSpace = /\s/.test(text[close - 1]);
+		const insideWord = underscore && /\w/.test(text[close + delimiter.length] ?? "");
+		const startsPair = delimiter.length === 1 && text[close + 1] === delimiter;
+		if (!touchesSpace && !insideWord && !startsPair) return {
+			inner: text.slice(open, close),
+			length: close + delimiter.length - start
+		};
+		close = text.indexOf(delimiter, close + (startsPair ? 2 : 1));
+	}
+	return null;
+}
+//#endregion
+export { parseInline, parseMarkdown };

package/dist/styles.css

@@ -1,95 +1 @@
-/*
- * Dot's stylesheet, for what inline styles can't do, such as pseudo-elements, keyframes and
- * rules for every element. Global rules sit in the lowest layer, so they never override a
- * component's own styles. Component rules stay outside the layers.
- */
-
-@layer base {
-  .dot-theme-root,
-  .dot-theme-root *,
-  .dot-theme-root ::before,
-  .dot-theme-root ::after {
-    box-sizing: border-box;
-  }
-
-  .dot-theme-root :is(button, input, select, textarea) {
-    font: inherit;
-  }
-
-  [data-dot-scheme='light'] {
-    color-scheme: light;
-  }
-
-  [data-dot-scheme='dark'] {
-    color-scheme: dark;
-  }
-}
-
-/* Skeleton: pulses down to 40% every 1.2s. */
-@keyframes dot-skeleton-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0.4;
-  }
-}
-
-/* Image: no wider than the space it's given, unless a Scroll lets it keep its own width. */
-.dot-image {
-  display: block;
-  max-width: 100%;
-}
-
-/* List: a full-width line under each row but the last, in the color the list passes. */
-.dot-list > .dot-list-item:not(:last-child) {
-  border-bottom: 1px solid var(--dot-list-divider);
-}
-
-/* Scroll: a row that scrolls sideways with the finger, without a scroll bar. */
-.dot-scroll {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  overflow-x: auto;
-  overflow-y: hidden;
-  overscroll-behavior-x: contain;
-  scrollbar-width: none;
-}
-
-.dot-scroll::-webkit-scrollbar {
-  display: none;
-}
-
-/* Each child keeps its own width. A View is as wide as its widest fixed-size child. Children are
-   styled here instead of wrapped, because a For loop's items reach the row as one child. */
-.dot-scroll > * {
-  flex: 0 0 auto;
-  width: min-content;
-  scroll-snap-align: var(--dot-scroll-snap);
-}
-
-/* A picture's own width sets its item's width. With max-width: 100% it would count for nothing. */
-.dot-scroll .dot-image {
-  max-width: none;
-}
-
-/* Sheet: slides up over a dimmed page, and back down when it closes. Base UI marks the first and
-   last frames, and waits for these transitions before it removes the sheet. */
-.dot-sheet-backdrop {
-  transition: opacity 0.2s;
-}
-
-.dot-sheet {
-  transition: transform 0.2s ease-out;
-}
-
-.dot-sheet-backdrop:is([data-starting-style], [data-ending-style]) {
-  opacity: 0;
-}
-
-.dot-sheet:is([data-starting-style], [data-ending-style]) {
-  transform: translateY(100%);
-}
+@layer base{.dot-theme-root,.dot-theme-root *,.dot-theme-root :before,.dot-theme-root :after{box-sizing:border-box}.dot-theme-root :is(button,input,select,textarea){font:inherit}[data-dot-scheme=light]{color-scheme:light}[data-dot-scheme=dark]{color-scheme:dark}.dot-theme-root{-webkit-user-select:none;user-select:none}.dot-theme-root :is(input,textarea){-webkit-user-select:text;user-select:text}}@keyframes dot-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}.dot-image{max-width:100%;display:block}.dot-list>.dot-list-item:not(:last-child){border-bottom:1px solid var(--dot-list-divider)}.dot-scroll{overscroll-behavior-x:contain;scrollbar-width:none;flex-direction:row;display:flex;position:relative;overflow:auto hidden}.dot-scroll::-webkit-scrollbar{display:none}.dot-scroll>*{scroll-snap-align:var(--dot-scroll-snap);flex:none;width:min-content}.dot-scroll .dot-image{max-width:none}.dot-sheet-backdrop{transition:opacity .2s}.dot-sheet{transition:transform .2s ease-out}.dot-sheet-backdrop:is([data-starting-style],[data-ending-style]){opacity:0}.dot-sheet:is([data-starting-style],[data-ending-style]){transform:translateY(100%)}.dot-prose>.dot-heading{margin-block-start:.5em}.dot-prose>.dot-heading:first-child{margin-block-start:0}

package/dist/theme.d.ts

@@ -17,6 +17,7 @@ export interface ResolvedColors {
 export interface ResolvedTheme {
   scheme: ColorScheme;
   colors: ResolvedColors;
+  customColors: Readonly<Record<string, string>>;
   shape: ThemeShape;
   radius: number;
 }

package/dist/theme.js

@@ -55,10 +55,19 @@ function resolveTheme(theme, systemScheme) {
 			surface,
 			text
 		},
+		customColors: resolveCustomColors(colors.custom ?? {}, scheme),
 		shape,
 		radius: SHAPE_RADIUS[shape]
 	};
 }
+function resolveCustomColors(custom, scheme) {
+	const resolved = {};
+	for (const [name, color] of Object.entries(custom)) {
+		const value = color[scheme] ?? color.light ?? color.dark;
+		if (value) resolved[name] = value;
+	}
+	return resolved;
+}
 function primaryAndOnPrimary(primary, surface, text, scheme) {
 	if (contrast(primary, surface) >= 4.5) return {
 		primary,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monimesl/dot-renderer-react",
-  "version": "0.1.0-alpha.15",
+  "version": "0.1.0-alpha.18",
   "description": "React renderer for Dot webviews",
   "type": "module",
   "repository": {
@@ -29,8 +29,8 @@
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "uqr": "^0.1.3",
-    "@monimesl/dot-core": "0.1.0-alpha.15",
-    "@monimesl/dot-webview": "0.1.0-alpha.15"
+    "@monimesl/dot-core": "0.1.0-alpha.18",
+    "@monimesl/dot-webview": "0.1.0-alpha.18"
   },
   "devDependencies": {
     "@base-ui/react": "1.8.0",
@@ -39,19 +39,20 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "jsdom": "^30.1.1",
+    "lightningcss": "1.33.0",
     "publint": "^0.3.24",
     "rimraf": "^6.1.3",
     "rolldown": "^1.2.9",
     "tsdown": "^0.23.0",
     "typescript": "^5.9.3",
     "vitest": "^5.0.1",
-    "@monimesl/dot-service": "0.1.0-alpha.15"
+    "@monimesl/dot-service": "0.1.0-alpha.18"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm icons:generate && tsdown && cp src/styles/base.css dist/styles.css && cp node_modules/@phosphor-icons/core/LICENSE dist/LICENSE-PHOSPHOR && node scripts/build-react-host.mjs",
+    "build": "pnpm icons:generate && tsdown && node scripts/build-styles.mjs && cp node_modules/@phosphor-icons/core/LICENSE dist/LICENSE-PHOSPHOR && node scripts/build-react-host.mjs",
     "icons:generate": "node scripts/generate-icon-artwork.mjs && prettier --write src/components/icon-artwork.ts",
     "dev": "tsdown --watch",
     "typecheck": "tsc --noEmit -p tsconfig.json",