@monimesl/dot-renderer-react 1.0.0-beta.7 → 1.0.0-beta.9

package/dist/page-root.js

@@ -1,18 +1,24 @@
-import { toList, toText } from "@monimesl/dot-core";
+import { useTheme } from "./theme.js";
+import { toList, toText, withComponentDefaults } from "@monimesl/dot-core";
 import { Fragment, createElement, useMemo, useSyncExternalStore } from "react";
 //#region src/page-root.tsx
 function PageRoot({ page, components }) {
 	const state = useSyncExternalStore(page.subscribe, page.getState);
+	const themeComponents = useTheme().components;
 	const context = useMemo(() => ({
 		h(type, props, ...children) {
 			const component = components[type];
 			if (!component) throw new Error(`The renderer has no component for <${type}>. Check the tag's name, or pass a component for it to the renderer.`);
-			return createElement(component, props, ...children);
+			return createElement(component, withComponentDefaults(type, props, themeComponents), ...children);
 		},
 		text: toText,
 		on: (handler, data) => page.on(handler, data),
 		each: (items, render, key) => createElement(Fragment, null, toList(items).map((item, index) => createElement(Fragment, { key: key ? String(key(item, index)) : index }, ...render(item, index))))
-	}), [page, components]);
+	}), [
+		page,
+		components,
+		themeComponents
+	]);
 	if (!state) return null;
 	return page.viewRenderer(state, context);
 }

package/dist/pull-to-refresh.js

@@ -1,5 +1,5 @@
-import { useTheme } from "./theme.js";
 import { CENTERED } from "./components/tokens.js";
+import { useTheme } from "./theme.js";
 import { LoadingIcon } from "./components/spinner.js";
 import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/root.js

@@ -1,4 +1,4 @@
-import { FONT_FAMILY, ThemeContext, resolveTheme, useTheme } from "./theme.js";
+import { ThemeContext, resolveTheme, useTheme } from "./theme.js";
 import { HOME_INDICATOR } from "./components/padding.js";
 import { PortalContainerContext } from "./portal.js";
 import { PageRoot } from "./page-root.js";
@@ -27,6 +27,7 @@ function Root({ page, dotContext, components, wrapper: Wrapper }) {
 			ref: setRootElement,
 			className: "dot-theme-root",
 			"data-dot-scheme": resolvedTheme.scheme,
+			style: { overflow: "clip" },
 			children: /* @__PURE__ */ jsx(PortalContainerContext.Provider, {
 				value: rootElement,
 				children: /* @__PURE__ */ jsx(PullToRefresh, {
@@ -51,7 +52,7 @@ function withPageColors(theme, scheme, pageColors) {
 	};
 }
 function DefaultSurface({ children }) {
-	const { colors } = useTheme();
+	const { colors, fontFamily } = useTheme();
 	return /* @__PURE__ */ jsx("div", {
 		className: "dot-surface",
 		style: {
@@ -62,7 +63,7 @@ function DefaultSurface({ children }) {
 			flexDirection: "column",
 			background: colors.background,
 			color: colors.text,
-			fontFamily: FONT_FAMILY
+			fontFamily
 		},
 		children
 	});

package/dist/styles.css

@@ -1 +1 @@
-@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-disclosure>summary{list-style:none}.dot-disclosure>summary::-webkit-details-marker{display:none}.dot-steps>.dot-step:last-child .dot-step-line{display: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}
+@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::-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-bar-top:not(:not(.dot-toast)~*){margin-top:calc(-1 * var(--dot-view-top,0px))}.dot-bar-bottom:not(:has(~:not(.dot-toast))){margin-bottom:calc(-1 * var(--dot-view-bottom,0px) - env(safe-area-inset-bottom,0px))}.dot-disclosure>summary{list-style:none}.dot-disclosure>summary::-webkit-details-marker{display:none}.dot-steps>.dot-step:last-child .dot-step-line{display: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

@@ -1,8 +1,10 @@
-import { ColorScheme, PageColors, Theme, ThemeShape } from "@monimesl/dot-core";
+import { FONT_SIZE, SPACE } from "./components/tokens.js";
+import { ColorScheme, PageColors, Theme, ThemeComponents, ThemeElevation, ThemeShape, ThemeWeight } from "@monimesl/dot-core";
 //#region src/theme.d.ts
 export interface ResolvedColors {
   primary: string;
   onPrimary: string;
+  primaryText: string;
   background: string;
   surface: string;
   text: string;
@@ -20,6 +22,15 @@ export interface ResolvedTheme {
   customColors: Readonly<Record<string, string>>;
   shape: ThemeShape;
   radius: number;
+  fontFamily: string;
+  headingFontFamily: string;
+  headingWeight: ThemeWeight | undefined;
+  fontSize: Readonly<Record<keyof typeof FONT_SIZE, number>>;
+  components: ThemeComponents;
+  icons: Readonly<Record<string, string>>;
+  gradients: Readonly<Record<string, string>>;
+  space: Readonly<Record<keyof typeof SPACE, number>>;
+  elevation: ThemeElevation;
 }
 export declare function resolveTheme(theme: Theme, systemScheme: ColorScheme, pageColors?: PageColors): ResolvedTheme;
 export declare function useTheme(): ResolvedTheme;

package/dist/theme.js

@@ -1,8 +1,29 @@
+import { FONT_SIZE, SPACE } from "./components/tokens.js";
 import { darken, mix } from "./color.js";
 import { DEFAULT_BACKGROUND, READABLE_CONTRAST, contrast, isDark, pageBackground, textOn, themeScheme } from "@monimesl/dot-core";
 import { createContext, useContext } from "react";
 //#region src/theme.ts
-const FONT_FAMILY = "system-ui, sans-serif";
+const DENSITY_SCALE = {
+	compact: .75,
+	regular: 1,
+	comfortable: 1.25
+};
+const TEXT_SCALE = {
+	small: .9,
+	regular: 1,
+	large: 1.1
+};
+const GRADIENT_DIRECTIONS = {
+	down: "to bottom",
+	right: "to right",
+	diagonal: "to bottom right"
+};
+const FONT_FAMILIES = {
+	system: "system-ui, sans-serif",
+	rounded: "ui-rounded, \"SF Pro Rounded\", system-ui, sans-serif",
+	serif: "ui-serif, \"New York\", Georgia, serif",
+	mono: "ui-monospace, \"SF Mono\", Menlo, monospace"
+};
 const SHAPE_RADIUS = {
 	square: 0,
 	subtle: 4,
@@ -51,22 +72,71 @@ function resolveTheme(theme, systemScheme, pageColors = {}) {
 	const text = ownColor("text") ?? readableText(defaults.text, background);
 	let subtle = defaults.subtle;
 	if (!onDashBackground) subtle = quieterText(text, background, surface);
-	const primary = ownColor("primary") ?? defaults.primary;
+	const { primary, onPrimary } = primaryAndOnPrimary(ownColor("primary") ?? defaults.primary, surface, text, scheme);
+	const primaryReads = contrast(primary, background) >= READABLE_CONTRAST && contrast(primary, surface) >= READABLE_CONTRAST;
+	const colors = {
+		...defaults,
+		primary,
+		onPrimary,
+		primaryText: primaryReads ? primary : text,
+		background,
+		surface,
+		text,
+		muted: ownColor("muted") ?? surfaces.muted,
+		border: ownColor("border") ?? surfaces.border,
+		subtle: ownColor("subtle") ?? subtle,
+		info: ownColor("info") ?? defaults.info,
+		success: ownColor("success") ?? defaults.success,
+		warning: ownColor("warning") ?? defaults.warning,
+		danger: ownColor("danger") ?? defaults.danger
+	};
+	const customColors = resolveCustomColors(themeColors.custom ?? {}, scheme);
+	const fontFamily = FONT_FAMILIES[theme.font ?? "system"] ?? FONT_FAMILIES.system;
+	let headingFontFamily = fontFamily;
+	if (theme.headingFont) headingFontFamily = FONT_FAMILIES[theme.headingFont] ?? fontFamily;
 	return {
 		scheme,
-		colors: {
-			...defaults,
-			...primaryAndOnPrimary(primary, surface, text, scheme),
-			background,
-			surface,
-			text,
-			muted: ownColor("muted") ?? surfaces.muted,
-			border: ownColor("border") ?? surfaces.border,
-			subtle: ownColor("subtle") ?? subtle
-		},
-		customColors: resolveCustomColors(themeColors.custom ?? {}, scheme),
+		colors,
+		customColors,
 		shape,
-		radius: SHAPE_RADIUS[shape]
+		radius: SHAPE_RADIUS[shape],
+		fontFamily,
+		headingFontFamily,
+		headingWeight: theme.headingWeight,
+		fontSize: scaledFontSize(TEXT_SCALE[theme.textSize ?? "regular"] ?? 1),
+		components: theme.components ?? {},
+		icons: theme.icons ?? {},
+		gradients: resolveGradients(theme.gradients ?? {}, colors, customColors),
+		space: scaledSpace(DENSITY_SCALE[theme.density ?? "regular"] ?? 1),
+		elevation: theme.elevation === "raised" ? "raised" : "flat"
+	};
+}
+function scaledFontSize(scale) {
+	const sizes = { ...FONT_SIZE };
+	for (const variant of Object.keys(sizes)) sizes[variant] = Math.round(FONT_SIZE[variant] * scale);
+	return sizes;
+}
+function resolveGradients(gradients, colors, customColors) {
+	const resolved = {};
+	for (const [name, gradient] of Object.entries(gradients)) {
+		if (!gradient) continue;
+		const from = themeColor(gradient.from, colors, customColors);
+		const to = themeColor(gradient.to, colors, customColors);
+		const direction = GRADIENT_DIRECTIONS[gradient.direction ?? "down"] ?? GRADIENT_DIRECTIONS.down;
+		if (from && to) resolved[name] = `linear-gradient(${direction}, ${from}, ${to})`;
+	}
+	return resolved;
+}
+function themeColor(name, colors, customColors) {
+	if (Object.hasOwn(colors, name)) return colors[name];
+	if (Object.hasOwn(customColors, name)) return customColors[name];
+}
+function scaledSpace(scale) {
+	return {
+		none: SPACE.none,
+		small: Math.round(SPACE.small * scale),
+		medium: Math.round(SPACE.medium * scale),
+		large: Math.round(SPACE.large * scale)
 	};
 }
 function surfacesOn(background) {
@@ -126,4 +196,4 @@ function useTheme() {
 	return useContext(ThemeContext);
 }
 //#endregion
-export { FONT_FAMILY, ThemeContext, resolveTheme, useTheme };
+export { ThemeContext, resolveTheme, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monimesl/dot-renderer-react",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.9",
   "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": "1.0.0-beta.7",
-    "@monimesl/dot-webview": "1.0.0-beta.7"
+    "@monimesl/dot-core": "1.0.0-beta.9",
+    "@monimesl/dot-webview": "1.0.0-beta.9"
   },
   "devDependencies": {
     "@base-ui/react": "1.8.0",
@@ -46,7 +46,7 @@
     "tsdown": "^0.23.0",
     "typescript": "^5.9.3",
     "vitest": "^5.0.1",
-    "@monimesl/dot-service": "1.0.0-beta.7"
+    "@monimesl/dot-service": "1.0.0-beta.9"
   },
   "publishConfig": {
     "access": "public"