@monimesl/dot-renderer-react 0.1.0-alpha.2 → 0.1.0-alpha.23

package/dist/vendor/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js

@@ -0,0 +1,74 @@
+import { __commonJSMin } from "../../../../_virtual/_rolldown/runtime.js";
+import { require_builtin_esm_external_require_react } from "../../../../_virtual/builtin_esm-external-require-react.js";
+import { require_shim } from "../../shim/index.js";
+//#region ../../../node_modules/.pnpm/use-sync-external-store@1.7.0_react@19.3.0/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js
+/**
+* @license React
+* use-sync-external-store-shim/with-selector.development.js
+*
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+var require_with_selector_development = /* @__PURE__ */ __commonJSMin(((exports) => {
+	"production" !== process.env.NODE_ENV && (function() {
+		function is(x, y) {
+			return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
+		}
+		"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+		var React = require_builtin_esm_external_require_react(), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore = shim.useSyncExternalStore, useRef = React.useRef, useEffect = React.useEffect, useMemo = React.useMemo, useDebugValue = React.useDebugValue;
+		exports.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
+			var instRef = useRef(null);
+			if (null === instRef.current) {
+				var inst = {
+					hasValue: !1,
+					value: null
+				};
+				instRef.current = inst;
+			} else inst = instRef.current;
+			instRef = useMemo(function() {
+				function memoizedSelector(nextSnapshot) {
+					if (!hasMemo) {
+						hasMemo = !0;
+						memoizedSnapshot = nextSnapshot;
+						nextSnapshot = selector(nextSnapshot);
+						if (void 0 !== isEqual && inst.hasValue) {
+							var currentSelection = inst.value;
+							if (isEqual(currentSelection, nextSnapshot)) return memoizedSelection = currentSelection;
+						}
+						return memoizedSelection = nextSnapshot;
+					}
+					currentSelection = memoizedSelection;
+					if (objectIs(memoizedSnapshot, nextSnapshot)) return currentSelection;
+					var nextSelection = selector(nextSnapshot);
+					if (void 0 !== isEqual && isEqual(currentSelection, nextSelection)) return memoizedSnapshot = nextSnapshot, currentSelection;
+					memoizedSnapshot = nextSnapshot;
+					return memoizedSelection = nextSelection;
+				}
+				var hasMemo = !1, memoizedSnapshot, memoizedSelection, maybeGetServerSnapshot = void 0 === getServerSnapshot ? null : getServerSnapshot;
+				return [function() {
+					return memoizedSelector(getSnapshot());
+				}, null === maybeGetServerSnapshot ? void 0 : function() {
+					return memoizedSelector(maybeGetServerSnapshot());
+				}];
+			}, [
+				getSnapshot,
+				getServerSnapshot,
+				selector,
+				isEqual
+			]);
+			var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
+			useEffect(function() {
+				inst.hasValue = !0;
+				inst.value = value;
+			}, [value]);
+			useDebugValue(value);
+			return value;
+		};
+		"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+	})();
+}));
+//#endregion
+export default require_with_selector_development();
+export { require_with_selector_development };

package/dist/vendor/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.js

@@ -0,0 +1,77 @@
+import { __commonJSMin } from "../../../../_virtual/_rolldown/runtime.js";
+import { require_builtin_esm_external_require_react } from "../../../../_virtual/builtin_esm-external-require-react.js";
+import { require_shim } from "../../shim/index.js";
+//#region ../../../node_modules/.pnpm/use-sync-external-store@1.7.0_react@19.3.0/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.js
+/**
+* @license React
+* use-sync-external-store-shim/with-selector.production.js
+*
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+var require_with_selector_production = /* @__PURE__ */ __commonJSMin(((exports) => {
+	var React = require_builtin_esm_external_require_react();
+	var shim = require_shim();
+	function is(x, y) {
+		return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
+	}
+	var objectIs = "function" === typeof Object.is ? Object.is : is;
+	var useSyncExternalStore = shim.useSyncExternalStore;
+	var useRef = React.useRef;
+	var useEffect = React.useEffect;
+	var useMemo = React.useMemo;
+	var useDebugValue = React.useDebugValue;
+	exports.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
+		var instRef = useRef(null);
+		if (null === instRef.current) {
+			var inst = {
+				hasValue: !1,
+				value: null
+			};
+			instRef.current = inst;
+		} else inst = instRef.current;
+		instRef = useMemo(function() {
+			function memoizedSelector(nextSnapshot) {
+				if (!hasMemo) {
+					hasMemo = !0;
+					memoizedSnapshot = nextSnapshot;
+					nextSnapshot = selector(nextSnapshot);
+					if (void 0 !== isEqual && inst.hasValue) {
+						var currentSelection = inst.value;
+						if (isEqual(currentSelection, nextSnapshot)) return memoizedSelection = currentSelection;
+					}
+					return memoizedSelection = nextSnapshot;
+				}
+				currentSelection = memoizedSelection;
+				if (objectIs(memoizedSnapshot, nextSnapshot)) return currentSelection;
+				var nextSelection = selector(nextSnapshot);
+				if (void 0 !== isEqual && isEqual(currentSelection, nextSelection)) return memoizedSnapshot = nextSnapshot, currentSelection;
+				memoizedSnapshot = nextSnapshot;
+				return memoizedSelection = nextSelection;
+			}
+			var hasMemo = !1, memoizedSnapshot, memoizedSelection, maybeGetServerSnapshot = void 0 === getServerSnapshot ? null : getServerSnapshot;
+			return [function() {
+				return memoizedSelector(getSnapshot());
+			}, null === maybeGetServerSnapshot ? void 0 : function() {
+				return memoizedSelector(maybeGetServerSnapshot());
+			}];
+		}, [
+			getSnapshot,
+			getServerSnapshot,
+			selector,
+			isEqual
+		]);
+		var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
+		useEffect(function() {
+			inst.hasValue = !0;
+			inst.value = value;
+		}, [value]);
+		useDebugValue(value);
+		return value;
+	};
+}));
+//#endregion
+export default require_with_selector_production();
+export { require_with_selector_production };

package/dist/vendor/use-sync-external-store/cjs/use-sync-external-store-shim.development.js

@@ -0,0 +1,69 @@
+import { __commonJSMin } from "../../../_virtual/_rolldown/runtime.js";
+import { require_builtin_esm_external_require_react } from "../../../_virtual/builtin_esm-external-require-react.js";
+//#region ../../../node_modules/.pnpm/use-sync-external-store@1.7.0_react@19.3.0/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
+/**
+* @license React
+* use-sync-external-store-shim.development.js
+*
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+var require_use_sync_external_store_shim_development = /* @__PURE__ */ __commonJSMin(((exports) => {
+	"production" !== process.env.NODE_ENV && (function() {
+		function is(x, y) {
+			return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
+		}
+		function useSyncExternalStore$2(subscribe, getSnapshot) {
+			didWarnOld18Alpha || void 0 === React.startTransition || (didWarnOld18Alpha = !0, console.error("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));
+			var value = getSnapshot();
+			if (!didWarnUncachedGetSnapshot) {
+				var cachedValue = getSnapshot();
+				objectIs(value, cachedValue) || (console.error("The result of getSnapshot should be cached to avoid an infinite loop"), didWarnUncachedGetSnapshot = !0);
+			}
+			cachedValue = useState({ inst: {
+				value,
+				getSnapshot
+			} });
+			var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
+			useLayoutEffect(function() {
+				inst.value = value;
+				inst.getSnapshot = getSnapshot;
+				checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+			}, [
+				subscribe,
+				value,
+				getSnapshot
+			]);
+			useEffect(function() {
+				checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+				return subscribe(function() {
+					checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+				});
+			}, [subscribe]);
+			useDebugValue(value);
+			return value;
+		}
+		function checkIfSnapshotChanged(inst) {
+			var latestGetSnapshot = inst.getSnapshot;
+			inst = inst.value;
+			try {
+				var nextValue = latestGetSnapshot();
+				return !objectIs(inst, nextValue);
+			} catch (error) {
+				return !0;
+			}
+		}
+		function useSyncExternalStore$1(subscribe, getSnapshot) {
+			return getSnapshot();
+		}
+		"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+		var React = require_builtin_esm_external_require_react(), objectIs = "function" === typeof Object.is ? Object.is : is, useState = React.useState, useEffect = React.useEffect, useLayoutEffect = React.useLayoutEffect, useDebugValue = React.useDebugValue, didWarnOld18Alpha = !1, didWarnUncachedGetSnapshot = !1, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+		exports.useSyncExternalStore = void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
+		"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+	})();
+}));
+//#endregion
+export default require_use_sync_external_store_shim_development();
+export { require_use_sync_external_store_shim_development };

package/dist/vendor/use-sync-external-store/cjs/use-sync-external-store-shim.production.js

@@ -0,0 +1,64 @@
+import { __commonJSMin } from "../../../_virtual/_rolldown/runtime.js";
+import { require_builtin_esm_external_require_react } from "../../../_virtual/builtin_esm-external-require-react.js";
+//#region ../../../node_modules/.pnpm/use-sync-external-store@1.7.0_react@19.3.0/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js
+/**
+* @license React
+* use-sync-external-store-shim.production.js
+*
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+var require_use_sync_external_store_shim_production = /* @__PURE__ */ __commonJSMin(((exports) => {
+	var React = require_builtin_esm_external_require_react();
+	function is(x, y) {
+		return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
+	}
+	var objectIs = "function" === typeof Object.is ? Object.is : is;
+	var useState = React.useState;
+	var useEffect = React.useEffect;
+	var useLayoutEffect = React.useLayoutEffect;
+	var useDebugValue = React.useDebugValue;
+	function useSyncExternalStore$2(subscribe, getSnapshot) {
+		var value = getSnapshot(), _useState = useState({ inst: {
+			value,
+			getSnapshot
+		} }), inst = _useState[0].inst, forceUpdate = _useState[1];
+		useLayoutEffect(function() {
+			inst.value = value;
+			inst.getSnapshot = getSnapshot;
+			checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+		}, [
+			subscribe,
+			value,
+			getSnapshot
+		]);
+		useEffect(function() {
+			checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+			return subscribe(function() {
+				checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+			});
+		}, [subscribe]);
+		useDebugValue(value);
+		return value;
+	}
+	function checkIfSnapshotChanged(inst) {
+		var latestGetSnapshot = inst.getSnapshot;
+		inst = inst.value;
+		try {
+			var nextValue = latestGetSnapshot();
+			return !objectIs(inst, nextValue);
+		} catch (error) {
+			return !0;
+		}
+	}
+	function useSyncExternalStore$1(subscribe, getSnapshot) {
+		return getSnapshot();
+	}
+	var shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+	exports.useSyncExternalStore = void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
+}));
+//#endregion
+export default require_use_sync_external_store_shim_production();
+export { require_use_sync_external_store_shim_production };

package/dist/vendor/use-sync-external-store/shim/index.js

@@ -0,0 +1,11 @@
+import { __commonJSMin } from "../../../_virtual/_rolldown/runtime.js";
+import { require_use_sync_external_store_shim_production } from "../cjs/use-sync-external-store-shim.production.js";
+import { require_use_sync_external_store_shim_development } from "../cjs/use-sync-external-store-shim.development.js";
+//#region ../../../node_modules/.pnpm/use-sync-external-store@1.7.0_react@19.3.0/node_modules/use-sync-external-store/shim/index.js
+var require_shim = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	if (process.env.NODE_ENV === "production") module.exports = require_use_sync_external_store_shim_production();
+	else module.exports = require_use_sync_external_store_shim_development();
+}));
+//#endregion
+export default require_shim();
+export { require_shim };

package/dist/vendor/use-sync-external-store/shim/with-selector.js

@@ -0,0 +1,11 @@
+import { __commonJSMin } from "../../../_virtual/_rolldown/runtime.js";
+import { require_with_selector_production } from "../cjs/use-sync-external-store-shim/with-selector.production.js";
+import { require_with_selector_development } from "../cjs/use-sync-external-store-shim/with-selector.development.js";
+//#region ../../../node_modules/.pnpm/use-sync-external-store@1.7.0_react@19.3.0/node_modules/use-sync-external-store/shim/with-selector.js
+var require_with_selector = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	if (process.env.NODE_ENV === "production") module.exports = require_with_selector_production();
+	else module.exports = require_with_selector_development();
+}));
+//#endregion
+export default require_with_selector();
+export { require_with_selector };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monimesl/dot-renderer-react",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.23",
   "description": "React renderer for Dot webviews",
   "type": "module",
   "repository": {
@@ -8,7 +8,9 @@
     "url": "git+https://github.com/monime-lab/dot.git",
     "directory": "packages/renderers/react"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist"
   ],
@@ -26,27 +28,32 @@
   "dependencies": {
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
-    "@monimesl/dot-core": "0.1.0-alpha.2",
-    "@monimesl/dot-webview": "0.1.0-alpha.2"
+    "uqr": "^0.1.3",
+    "@monimesl/dot-core": "0.1.0-alpha.23",
+    "@monimesl/dot-webview": "0.1.0-alpha.23"
   },
   "devDependencies": {
+    "@base-ui/react": "1.8.0",
+    "@phosphor-icons/core": "^2.1.1",
     "@testing-library/react": "^16.3.3",
     "@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.2"
+    "@monimesl/dot-service": "0.1.0-alpha.23"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsdown && 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",
     "test": "vitest run",

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/root.tsx","../src/types.ts","../src/components/index.ts","../src/renderer.tsx","../src/theme.ts"],"mappings":";;;;KAUY,UAAU;EAAgB,OAAO;EAAO,UAAU;;;;KCPlD,eAAe,UAAU,qBAAqB,cAAc,QAAQ,GAAG;KAEvE,gBAAgB,kBAAkB,eAAe,kCACjD,WAAW,YAAY,eAAe,UAAU;KAGhD,yBAAyB,gBAAgB;;;qBCFxC,UAAU;;;UCGN;EACf,aAAa,QAAQ,0BACnB,SAAS,eAAe;EAC1B,UAAU;;iBAGI,gBAAgB,YAAiB,YAAW,uBAA4B;;;UCbvE;EACf;EACA;EACA;EACA;EACA;EACA;EACA;;UAGe;EACf,QAAQ;EACR,QAAQ;EACR;;wBA6Bc,aAAa,OAAO,OAAO,cAAc,cAAc;wBAsBvD,YAAY"}

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/theme.ts","../src/components/tokens.ts","../src/components/button.tsx","../src/components/image.tsx","../src/components/input.tsx","../src/components/text.tsx","../src/components/view.tsx","../src/components/index.ts","../src/page-root.tsx","../src/root.tsx","../src/renderer.tsx","../src/index.ts"],"sourcesContent":["import type { ColorScheme, SchemeColor, Theme } from '@monimesl/dot-core';\nimport { createContext, useContext } from 'react';\n\nexport interface ResolvedColors {\n  primary: string;\n  background: string;\n  surface: string;\n  text: string;\n  subtle: string;\n  muted: string;\n  border: string;\n}\n\nexport interface ResolvedTheme {\n  scheme: ColorScheme;\n  colors: ResolvedColors;\n  radius: number;\n}\n\nexport const FONT_FAMILY = 'system-ui, sans-serif';\n\nconst DEFAULT_RADIUS = 12;\n\n// Dash's own look: black, white and grays, so a dot feels at home in it.\nconst DEFAULT_COLORS: Record<ColorScheme, ResolvedColors> = {\n  light: {\n    primary: '#1c1c1e',\n    background: '#f2f2f2',\n    surface: '#ffffff',\n    text: '#111111',\n    subtle: '#8e8e93',\n    muted: '#e9e9eb',\n    border: '#e9e9eb',\n  },\n  dark: {\n    primary: '#f5f5f5',\n    background: '#121212',\n    surface: '#1e1e1e',\n    text: '#f5f5f5',\n    subtle: '#8e8e93',\n    muted: '#2c2c2e',\n    border: '#2a2a2c',\n  },\n};\n\nexport function resolveTheme(theme: Theme, systemScheme: ColorScheme): ResolvedTheme {\n  const scheme = !theme.scheme || theme.scheme === 'system' ? systemScheme : theme.scheme;\n  const defaults = DEFAULT_COLORS[scheme];\n  const colors = theme.colors ?? {};\n  const pick = (color: SchemeColor | undefined, fallback: string) => color?.[scheme] ?? fallback;\n  return {\n    scheme,\n    colors: {\n      primary: pick(colors.primary, defaults.primary),\n      background: pick(colors.background, defaults.background),\n      surface: pick(colors.surface, defaults.surface),\n      text: pick(colors.text, defaults.text),\n      subtle: defaults.subtle,\n      muted: defaults.muted,\n      border: defaults.border,\n    },\n    radius: theme.radius ?? DEFAULT_RADIUS,\n  };\n}\n\nexport const ThemeContext = createContext<ResolvedTheme>(resolveTheme({}, 'light'));\n\nexport function useTheme(): ResolvedTheme {\n  return useContext(ThemeContext);\n}\n","export const GAP = { none: 0, small: 4, medium: 8, large: 16 } as const;\n\nexport const FONT_SIZE = { caption: 13, body: 15, title: 20 } as const;\n\n// Between content and the edge of the page or of a card.\nexport const PADDING = 16;\n\n// Cards round a little more than the controls inside them.\nexport const CARD_RADIUS_SCALE = 1.5;\n\nexport const DISABLED_OPACITY = 0.6;\n","import type { Button as ButtonManifest } from '@monimesl/dot-core';\nimport { createEvent } from '@monimesl/dot-core';\n\nimport type { ReactComponent } from '../types';\nimport { useTheme } from '../theme';\nimport { DISABLED_OPACITY, FONT_SIZE } from './tokens';\n\nexport const Button: ReactComponent<typeof ButtonManifest> = ({\n  variant = 'primary',\n  disabled,\n  onClick,\n  children,\n}) => {\n  const { colors, radius } = useTheme();\n  const filled = variant === 'primary' && !disabled;\n  let color = colors.text;\n  if (filled) {\n    color = colors.surface;\n  } else if (disabled) {\n    color = colors.subtle;\n  }\n  const handleClick = onClick ? () => onClick(createEvent('click')) : undefined;\n  return (\n    <button\n      type=\"button\"\n      className=\"dot-button\"\n      data-variant={variant}\n      disabled={disabled}\n      onClick={handleClick}\n      style={{\n        padding: '10px 16px',\n        border: 'none',\n        borderRadius: radius,\n        background: filled ? colors.primary : colors.muted,\n        color,\n        font: 'inherit',\n        fontSize: FONT_SIZE.body,\n        fontWeight: 600,\n        opacity: disabled ? DISABLED_OPACITY : 1,\n        cursor: disabled ? 'default' : 'pointer',\n      }}\n    >\n      {children}\n    </button>\n  );\n};\n","import type { Image as ImageManifest } from '@monimesl/dot-core';\nimport { createEvent } from '@monimesl/dot-core';\nimport type { SyntheticEvent } from 'react';\n\nimport type { ReactComponent } from '../types';\nimport { useTheme } from '../theme';\n\nexport const Image: ReactComponent<typeof ImageManifest> = ({\n  src,\n  alt,\n  width,\n  height,\n  onLoad,\n  onError,\n}) => {\n  const { radius } = useTheme();\n  const handleLoad = onLoad\n    ? (event: SyntheticEvent<HTMLImageElement>) => {\n        const { naturalWidth, naturalHeight } = event.currentTarget;\n        onLoad(createEvent('load', { width: naturalWidth, height: naturalHeight }));\n      }\n    : undefined;\n  const handleError = onError\n    ? () => onError(createEvent('error', { message: `Failed to load ${src}` }))\n    : undefined;\n  return (\n    <img\n      className=\"dot-image\"\n      src={src}\n      alt={alt ?? ''}\n      width={width}\n      height={height}\n      style={{ borderRadius: radius }}\n      onLoad={handleLoad}\n      onError={handleError}\n    />\n  );\n};\n","import type { Input as InputManifest } from '@monimesl/dot-core';\nimport { createEvent } from '@monimesl/dot-core';\nimport { useState } from 'react';\n\nimport type { ReactComponent } from '../types';\nimport { useTheme } from '../theme';\nimport { DISABLED_OPACITY } from './tokens';\n\nconst HTML_TYPES = {\n  text: { type: 'text', inputMode: 'text' },\n  number: { type: 'text', inputMode: 'decimal' },\n  email: { type: 'email', inputMode: 'email' },\n  phone: { type: 'tel', inputMode: 'tel' },\n  password: { type: 'password', inputMode: 'text' },\n} as const;\n\nexport const Input: ReactComponent<typeof InputManifest> = ({\n  value,\n  placeholder,\n  label,\n  type = 'text',\n  maxLength,\n  disabled,\n  onChange,\n  onSubmit,\n}) => {\n  const { colors, radius } = useTheme();\n  const [text, setText] = useState(value ?? '');\n  const [awaitingEcho, setAwaitingEcho] = useState<string[]>([]);\n  const [previousValue, setPreviousValue] = useState(value);\n\n  // `value` is page state, which the service updates a moment after each keystroke. By the time\n  // it sends back \"a\", the user may have typed \"abc\"; showing \"a\" would erase \"bc\". So a value\n  // the user already typed is a late echo and is ignored. A value the user never typed, such as\n  // a reset, was set by the page and replaces the text.\n  if (value !== previousValue) {\n    setPreviousValue(value);\n    const echo = awaitingEcho.indexOf(value ?? '');\n    if (echo >= 0) {\n      setAwaitingEcho(awaitingEcho.slice(echo + 1));\n    } else {\n      setAwaitingEcho([]);\n      setText(value ?? '');\n    }\n  }\n  return (\n    <input\n      className=\"dot-input\"\n      {...HTML_TYPES[type]}\n      value={text}\n      placeholder={placeholder}\n      aria-label={label}\n      maxLength={maxLength}\n      disabled={disabled}\n      onChange={(event) => {\n        const next = event.currentTarget.value;\n        setText(next);\n        if (onChange && value !== undefined) {\n          setAwaitingEcho([...awaitingEcho, next]);\n        }\n        onChange?.(createEvent('change', { value: next }));\n      }}\n      onKeyDown={(event) => {\n        if (event.key === 'Enter' && onSubmit) {\n          onSubmit(createEvent('submit', { value: text }));\n        }\n      }}\n      style={{\n        width: '100%',\n        boxSizing: 'border-box',\n        padding: '12px 14px',\n        border: `1px solid ${colors.border}`,\n        borderRadius: radius,\n        background: colors.surface,\n        color: colors.text,\n        outlineColor: colors.primary,\n        font: 'inherit',\n        // At least 16px, or iOS zooms into the page when the field is focused.\n        fontSize: 16,\n        opacity: disabled ? DISABLED_OPACITY : 1,\n      }}\n    />\n  );\n};\n","import type { Text as TextManifest } from '@monimesl/dot-core';\n\nimport type { ReactComponent } from '../types';\nimport { FONT_SIZE } from './tokens';\n\nconst VARIANTS = {\n  body: { fontSize: FONT_SIZE.body },\n  caption: { fontSize: FONT_SIZE.caption },\n  title: { fontSize: FONT_SIZE.title, fontWeight: 600 },\n} as const;\n\nexport const Text: ReactComponent<typeof TextManifest> = ({ variant = 'body', children }) => (\n  <span className=\"dot-text\" style={VARIANTS[variant]}>\n    {children}\n  </span>\n);\n","import type { View as ViewManifest } from '@monimesl/dot-core';\nimport { createEvent } from '@monimesl/dot-core';\n\nimport type { ReactComponent } from '../types';\nimport { useTheme } from '../theme';\nimport { CARD_RADIUS_SCALE, GAP, PADDING } from './tokens';\n\nconst ALIGN = {\n  stretch: 'stretch',\n  start: 'flex-start',\n  center: 'center',\n  end: 'flex-end',\n} as const;\n\nexport const View: ReactComponent<typeof ViewManifest> = ({\n  direction = 'column',\n  gap = 'medium',\n  align = 'stretch',\n  variant = 'plain',\n  onTap,\n  children,\n}) => {\n  const { colors, radius } = useTheme();\n  const card = variant === 'card';\n  const handleClick = onTap ? () => onTap(createEvent('tap')) : undefined;\n  return (\n    <div\n      className=\"dot-view\"\n      onClick={handleClick}\n      style={{\n        display: 'flex',\n        flexDirection: direction,\n        gap: GAP[gap],\n        alignItems: ALIGN[align],\n        padding: card ? PADDING : undefined,\n        borderRadius: card ? radius * CARD_RADIUS_SCALE : undefined,\n        background: card ? colors.surface : undefined,\n        border: card ? `1px solid ${colors.border}` : undefined,\n        cursor: onTap ? 'pointer' : undefined,\n      }}\n    >\n      {children}\n    </div>\n  );\n};\n","import type { BuiltinReactComponents } from '../types';\nimport { Button } from './button';\nimport { Image } from './image';\nimport { Input } from './input';\nimport { Text } from './text';\nimport { View } from './view';\n\nexport const builtins: BuiltinReactComponents = { Button, Image, Input, Text, View };\n","import type { ComponentType, ReactNode } from 'react';\nimport { createElement, Fragment, useMemo, useSyncExternalStore } from 'react';\nimport type { RenderContext } from '@monimesl/dot-core';\nimport { toList, toText } from '@monimesl/dot-core';\nimport type { PageController } from '@monimesl/dot-webview';\n\nexport type ComponentMap = Readonly<Record<string, ComponentType<Record<string, unknown>>>>;\n\ninterface PageRootProps {\n  page: PageController;\n  components: ComponentMap;\n}\n\nexport function PageRoot({ page, components }: PageRootProps) {\n  const state = useSyncExternalStore(page.subscribe, page.getState);\n  const context = useMemo<RenderContext<ReactNode>>(\n    () => ({\n      h(type, props, ...children) {\n        const component = components[type];\n        if (!component) {\n          throw new Error(`The renderer has no component registered for tag '<${type}>'`);\n        }\n        return createElement(component, props, ...children);\n      },\n      text: toText,\n      on: (handler) => page.on(handler),\n      each: (items, render, key) =>\n        createElement(\n          Fragment,\n          null,\n          toList(items).map((item, index) =>\n            createElement(\n              Fragment,\n              { key: key ? String(key(item, index)) : index },\n              ...render(item, index),\n            ),\n          ),\n        ),\n    }),\n    [page, components],\n  );\n  if (!state) {\n    return null;\n  }\n  return createElement(Fragment, null, ...page.viewRenderer(state, context));\n}\n","import type { Theme } from '@monimesl/dot-core';\nimport type { ComponentType, ReactNode } from 'react';\nimport { useMemo, useSyncExternalStore } from 'react';\nimport type { DotContext, PageController } from '@monimesl/dot-webview';\n\nimport type { ComponentMap } from './page-root';\nimport { PageRoot } from './page-root';\nimport { PADDING } from './components/tokens';\nimport { FONT_FAMILY, resolveTheme, ThemeContext, useTheme } from './theme';\n\nexport type Wrapper = ComponentType<{ theme: Theme; children: ReactNode }>;\n\ninterface RootProps {\n  page: PageController;\n  dotContext: DotContext;\n  components: ComponentMap;\n  wrapper: Wrapper | undefined;\n}\n\nexport function Root({ page, dotContext, components, wrapper: Wrapper }: RootProps) {\n  const theme = useSyncExternalStore(dotContext.theme.subscribe, dotContext.theme.get);\n  const systemContext = useSyncExternalStore(\n    dotContext.systemContext.subscribe,\n    dotContext.systemContext.get,\n  );\n  const resolved = useMemo(\n    () => resolveTheme(theme, systemContext.scheme),\n    [theme, systemContext.scheme],\n  );\n  const content = <PageRoot page={page} components={components} />;\n\n  return (\n    <ThemeContext.Provider value={resolved}>\n      {Wrapper ? (\n        <Wrapper theme={{ ...theme, scheme: resolved.scheme }}>{content}</Wrapper>\n      ) : (\n        <DefaultSurface>{content}</DefaultSurface>\n      )}\n    </ThemeContext.Provider>\n  );\n}\n\nfunction DefaultSurface({ children }: { children: ReactNode }) {\n  const { colors } = useTheme();\n  return (\n    <div\n      className=\"dot-surface\"\n      style={{\n        minHeight: '100vh',\n        boxSizing: 'border-box',\n        padding: PADDING,\n        display: 'flex',\n        flexDirection: 'column',\n        gap: 12,\n        background: colors.background,\n        color: colors.text,\n        fontFamily: FONT_FAMILY,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n","import type { Renderer } from '@monimesl/dot-webview';\nimport type { JSXElementConstructor } from 'react';\nimport { createRoot } from 'react-dom/client';\n\nimport { builtins } from './components';\nimport type { ComponentMap } from './page-root';\nimport type { Wrapper } from './root';\nimport { Root } from './root';\nimport type { BuiltinReactComponents } from './types';\n\nexport interface ReactRendererOptions {\n  components?: Partial<BuiltinReactComponents> &\n    Readonly<Record<string, JSXElementConstructor<never>>>;\n  wrapper?: Wrapper;\n}\n\nexport function reactRenderer({ components = {}, wrapper }: ReactRendererOptions = {}): Renderer {\n  const registry = { ...builtins, ...components } as unknown as ComponentMap;\n\n  return {\n    name: 'react',\n    mount(container, page, dotContext) {\n      const root = createRoot(container);\n      root.render(\n        <Root page={page} dotContext={dotContext} components={registry} wrapper={wrapper} />,\n      );\n      return () => root.unmount();\n    },\n  };\n}\n","export type { Wrapper } from './root';\nexport { builtins } from './components';\nimport { reactRenderer } from './renderer';\n\nexport type { ReactRendererOptions } from './renderer';\n\nexport { resolveTheme, useTheme } from './theme';\nexport type { ResolvedColors, ResolvedTheme } from './theme';\n\nexport type { BuiltinReactComponents, ReactComponent, ReactComponents } from './types';\n\nexport default reactRenderer;\n"],"mappings":"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"}