@rotorjs/react 0.8.0 → 0.10.0

package/dist/Dashboard.d.ts

@@ -2,7 +2,7 @@ import { DashboardAction, DashboardEventTarget, DashboardFact, DashboardLayoutNo
 import { ReactNode } from 'react';
 import { DashboardLayoutMap, DashboardTileMap } from './DashboardContext';
 export type DashboardProps = {
-    engine: DashboardEventTarget;
+    target: DashboardEventTarget;
     initialVars?: {
         [name: string]: DashboardVar;
     };
@@ -20,4 +20,4 @@ export type DashboardProps = {
     };
     children?: ReactNode;
 };
-export declare function Dashboard({ engine, initialVars: rawInitialVars, initialFacts: rawInitialFacts, layouts, defaultLayout, tiles, layout, content, onAction, allowedNavigateOrigins: rawAllowedNavigateOrigins, children, }: DashboardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dashboard({ target, initialVars, initialFacts, layouts, defaultLayout, tiles, layout, content, onAction, allowedNavigateOrigins: rawAllowedNavigateOrigins, children, }: DashboardProps): import("react").JSX.Element;

package/dist/DashboardContext.d.ts

@@ -3,7 +3,7 @@ import { ComponentType, PropsWithChildren } from 'react';
 export type DashboardLayoutMap = Record<string, ComponentType<PropsWithChildren<DashboardLayoutNode>>>;
 export type DashboardTileMap = Record<string, ComponentType<DashboardTileNode>>;
 export type DashboardContextValue = {
-    engine: DashboardEventTarget;
+    target: DashboardEventTarget;
     vars: {
         [name: string]: DashboardVar;
     };

package/dist/DashboardLayout.d.ts

@@ -4,4 +4,4 @@ export type DashboardLayoutProps = {
     layout?: DashboardLayoutNode;
     children: ReactNode;
 };
-export declare function DashboardLayout({ layout, children }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function DashboardLayout({ layout, children }: DashboardLayoutProps): import("react").JSX.Element | null;

package/dist/DashboardLayoutError.d.ts

@@ -3,4 +3,4 @@ export declare function DashboardLayoutError({ id, error, children, }: PropsWith
     type?: 'error';
     id?: string;
     error: unknown;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;

package/dist/DashboardTileContainer.d.ts

@@ -7,4 +7,4 @@ export type DashboardTileContainerProps = {
         style?: CSSProperties;
     }) => ReactNode;
 };
-export declare function DashboardTileContainer({ layout, children, }: DashboardTileContainerProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function DashboardTileContainer({ layout, children, }: DashboardTileContainerProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;

package/dist/DashboardTileError.d.ts

@@ -2,4 +2,4 @@ export declare function DashboardTileError({ id, error, }: {
     type?: 'error';
     id?: string;
     error: unknown;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/DashboardTiles.d.ts

@@ -2,4 +2,4 @@ import { DashboardTileNode } from '@rotorjs/dashboard';
 export type DashboardTilesProps = {
     content: DashboardTileNode[];
 };
-export declare function DashboardTiles({ content }: DashboardTilesProps): import("react/jsx-runtime").JSX.Element;
+export declare function DashboardTiles({ content }: DashboardTilesProps): import("react").JSX.Element;

package/dist/main.d.ts

@@ -9,3 +9,4 @@ export * from './DashboardTileError';
 export * from './DashboardTiles';
 export * from './getNodeKey';
 export * from './useDashboardState';
+export * from './useNumberFormatter';

package/dist/main.js

@@ -1,148 +1,128 @@
-import { ActionEvent as e } from "@rotorjs/state";
-import t from "fast-deep-equal";
-import { createContext as n, createElement as r, useContext as i, useEffect as a, useMemo as o, useState as s } from "react";
-import { v7 as c } from "uuid";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
-import { DashboardStateConsumer as f } from "@rotorjs/dashboard";
+import { DashboardEnvironment as e, DashboardStateConsumer as t, NumberFormatter as n, dashboardLocaleFact as r } from "@rotorjs/dashboard";
+import i from "fast-deep-equal";
+import { createContext as a, createElement as o, useCallback as s, useContext as c, useEffect as l, useMemo as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region lib/DashboardContext.ts
-var p = n(void 0);
+var h = a(void 0);
 //#endregion
 //#region lib/DashboardError.tsx
-function m({ error: e }) {
+function g({ error: e }) {
 	throw e;
 }
 //#endregion
 //#region lib/DashboardLayoutContext.ts
-var h = n(void 0);
+var _ = a(void 0);
 //#endregion
 //#region lib/getNodeKey.ts
-function g(e, t = 0) {
+function v(e, t = 0) {
 	return `${encodeURIComponent(e.type)}:${e.id ? `id:${encodeURIComponent(e.id)}` : `idx:${t}`}`;
 }
 //#endregion
 //#region lib/DashboardLayoutError.tsx
-var _ = { type: "error" };
-function v({ id: e, error: t, children: n }) {
-	let { layouts: a } = i(p), o = a.error ?? m, s = {
+var y = { type: "error" };
+function b({ id: e, error: t, children: n }) {
+	let { layouts: r } = c(h), i = r.error ?? g, a = {
 		type: "error",
 		id: e,
 		error: t
 	};
-	return /* @__PURE__ */ u(h.Provider, {
-		value: _,
-		children: /* @__PURE__ */ r(o, {
-			...s,
-			key: g(s)
+	return /* @__PURE__ */ p(_.Provider, {
+		value: y,
+		children: /* @__PURE__ */ o(i, {
+			...a,
+			key: v(a)
 		}, n)
 	});
 }
 //#endregion
 //#region lib/DashboardLayout.tsx
-function y({ layout: e, children: t }) {
-	let { layouts: n, defaultLayout: a } = i(p), s = o(() => ({
-		error: m,
+function x({ layout: e, children: t }) {
+	let { layouts: n, defaultLayout: r } = c(h), i = u(() => ({
+		error: g,
 		...n
-	}), [n]), c = e ?? a, l = c?.type, d = o(() => ({ type: l }), [l]);
-	if (!c?.type) return null;
-	let f = s[c.type];
-	return f ? /* @__PURE__ */ u(h.Provider, {
-		value: d,
-		children: /* @__PURE__ */ r(f, {
-			...c,
-			key: g(c)
+	}), [n]), a = e ?? r, s = a?.type, l = u(() => ({ type: s }), [s]);
+	if (!a?.type) return null;
+	let d = i[a.type];
+	return d ? /* @__PURE__ */ p(_.Provider, {
+		value: l,
+		children: /* @__PURE__ */ o(d, {
+			...a,
+			key: v(a)
 		}, t)
-	}) : /* @__PURE__ */ u(v, {
-		error: `Invalid layout type "${c.type}"`,
+	}) : /* @__PURE__ */ p(b, {
+		error: `Invalid layout type "${a.type}"`,
 		children: t
 	});
 }
 //#endregion
 //#region lib/DashboardTileError.tsx
-function b({ id: e, error: t }) {
-	let { tiles: n } = i(p), a = n.error ?? m, o = {
+function S({ id: e, error: t }) {
+	let { tiles: n } = c(h), r = n.error ?? g, i = {
 		type: "error",
 		id: e,
 		error: t
 	};
-	return /* @__PURE__ */ r(a, {
-		...o,
-		key: g(o)
+	return /* @__PURE__ */ o(r, {
+		...i,
+		key: v(i)
 	});
 }
 //#endregion
 //#region lib/DashboardTiles.tsx
-function x({ content: e }) {
-	let { tiles: t } = i(p), n = o(() => ({
-		error: m,
+function C({ content: e }) {
+	let { tiles: t } = c(h), n = u(() => ({
+		error: g,
 		...t
 	}), [t]);
-	return /* @__PURE__ */ u(l, { children: e.map((e, t) => {
+	return /* @__PURE__ */ p(f, { children: e.map((e, t) => {
 		if (!e?.type) return null;
-		let i = n[e.type];
-		return i ? /* @__PURE__ */ r(i, {
+		let r = n[e.type];
+		return r ? /* @__PURE__ */ o(r, {
 			...e,
-			key: g(e, t)
-		}) : /* @__PURE__ */ u(b, { error: `Invalid tile type "${e.type}"` }, g({ type: "error" }, t));
+			key: v(e, t)
+		}) : /* @__PURE__ */ p(S, { error: `Invalid tile type "${e.type}"` }, v({ type: "error" }, t));
 	}) });
 }
 //#endregion
 //#region lib/Dashboard.tsx
-var S = { [window.location.origin]: !0 };
-function C({ engine: n, initialVars: r, initialFacts: i, layouts: l, defaultLayout: f, tiles: m, layout: h, content: g, onAction: _, allowedNavigateOrigins: v = S, children: b }) {
-	let [C] = s(() => c()), [w] = s(r ?? {}), [T] = s(i ?? {}), [E, D] = s(v), [O, k] = s(w), [A, j] = s(T);
-	t(E, v) || D(v), a(() => {
-		Object.entries(w).forEach(([t, { value: r, exposed: i }]) => {
-			let a = new e({
-				type: "var",
-				name: t,
-				value: r,
-				exposed: i
+var w = { [window.location.origin]: !0 };
+function T({ target: t, initialVars: n, initialFacts: r, layouts: a, defaultLayout: o, tiles: s, layout: c, content: f, onAction: g, allowedNavigateOrigins: _ = w, children: v }) {
+	let [y, b] = d(_), [S, T] = d(n ?? {}), [E, D] = d(r ?? {});
+	i(y, _) || b(_), l(() => {
+		let n = new e(t, {
+			vars: S,
+			facts: E
+		});
+		return n.addEventListener("var", (e) => {
+			T((t) => {
+				let n = t[e.name], r = {
+					value: e.value,
+					exposed: e.exposed
+				};
+				return Object.hasOwn(t, e.name) && i(n, r) ? t : {
+					...t,
+					[e.name]: r
+				};
 			});
-			a.emitter = C, n.dispatchEvent(a);
-		}), Object.entries(T).forEach(([t, { value: r }]) => {
-			let i = new e({
-				type: "fact",
-				name: t,
-				value: r
+		}), n.addEventListener("fact", (e) => {
+			D((t) => {
+				let n = t[e.name], r = { value: e.value };
+				return Object.hasOwn(t, e.name) && i(n, r) ? t : {
+					...t,
+					[e.name]: r
+				};
 			});
-			i.emitter = C, n.dispatchEvent(i);
-		});
-	}, [
-		C,
-		n,
-		w,
-		T
-	]), a(() => {
-		let e = new AbortController(), t = e.signal;
-		return n.addEventListener("action", (e) => {
+		}), () => {
+			n.stop();
+		};
+	}, [t]), l(() => {
+		let e = new AbortController(), n = e.signal;
+		return t.addEventListener("action", (e) => {
 			let t = e.action;
-			if (e.emitter !== C) switch (t.type) {
-				case "var":
-					k((e) => {
-						let n = e[t.name];
-						return Object.hasOwn(e, t.name) && n.value === t.value && n.exposed === (t.exposed ?? !1) ? e : {
-							...e,
-							[t.name]: {
-								value: t.value,
-								exposed: t.exposed ?? !1
-							}
-						};
-					});
-					break;
-				case "fact":
-					j((e) => {
-						let n = e[t.name];
-						return Object.hasOwn(e, t.name) && n.value === t.value ? e : {
-							...e,
-							[t.name]: { value: t.value }
-						};
-					});
-					break;
-			}
-			if (!_?.(e.action)) switch (t.type) {
+			if (!g?.(e.action)) switch (t.type) {
 				case "navigate": {
 					let e = new URL(t.href, window.location.href).origin;
-					if (!E["*"] && (!Object.hasOwn(E, e) || !E[e])) {
+					if (!y["*"] && (!Object.hasOwn(y, e) || !y[e])) {
 						console.warn(`Dashboard navigation blocked: origin "${e}" is not allowed`);
 						break;
 					}
@@ -150,59 +130,64 @@ function C({ engine: n, initialVars: r, initialFacts: i, layouts: l, defaultLayo
 					break;
 				}
 			}
-		}, { signal: t }), () => {
+		}, { signal: n }), () => {
 			e.abort();
 		};
 	}, [
-		C,
-		n,
-		_,
-		E
+		t,
+		g,
+		y
 	]);
-	let M = o(() => ({
-		engine: n,
-		vars: O,
-		facts: A,
-		layouts: l,
-		defaultLayout: f,
-		tiles: m
+	let O = u(() => ({
+		target: t,
+		vars: S,
+		facts: E,
+		layouts: a,
+		defaultLayout: o,
+		tiles: s
 	}), [
-		n,
-		O,
-		A,
-		l,
-		f,
-		m
+		t,
+		S,
+		E,
+		a,
+		o,
+		s
 	]);
-	return /* @__PURE__ */ u(p.Provider, {
-		value: M,
-		children: /* @__PURE__ */ d(y, {
-			layout: h,
-			children: [/* @__PURE__ */ u(x, { content: g }), b]
+	return /* @__PURE__ */ p(h.Provider, {
+		value: O,
+		children: /* @__PURE__ */ m(x, {
+			layout: c,
+			children: [/* @__PURE__ */ p(C, { content: f }), v]
 		})
 	});
 }
 //#endregion
 //#region lib/DashboardTileContainer.tsx
-function w({ layout: e, children: t }) {
-	let { tileContainer: n } = i(h);
-	return n ? /* @__PURE__ */ u(n, {
+function E({ layout: e, children: t }) {
+	let { tileContainer: n } = c(_);
+	return n ? /* @__PURE__ */ p(n, {
 		layout: e,
 		children: t
 	}) : t({});
 }
 //#endregion
 //#region lib/useDashboardState.ts
-function T(e, n = []) {
-	let { engine: r } = i(p), [o, c] = s(e), [l, u] = s(n);
-	return t(o, e) || c(e), a(() => {
-		let e = new f(r, o, (e) => {
-			u((n) => t(e, n) ? n : e);
+function D(e, n = []) {
+	let { target: r } = c(h), [a, o] = d(e), [s, u] = d(n);
+	return i(a, e) || o(e), l(() => {
+		let e = new t(r, a, (e) => {
+			u((t) => i(e, t) ? t : e);
 		});
 		return () => {
 			e.stop();
 		};
-	}, [r, o]), l;
+	}, [r, a]), s;
+}
+//#endregion
+//#region lib/useNumberFormatter.ts
+function O(e) {
+	let { facts: t } = c(h), i = t[r], a = e?.locale || (typeof i == "string" && i ? i : void 0), o = u(() => new n({ locale: a }), [a]);
+	return s((e, t) => o.format(e, t), [o]);
 }
 //#endregion
-export { C as Dashboard, p as DashboardContext, m as DashboardError, y as DashboardLayout, h as DashboardLayoutContext, v as DashboardLayoutError, w as DashboardTileContainer, b as DashboardTileError, x as DashboardTiles, g as getNodeKey, T as useDashboardState };
+export { T as Dashboard, h as DashboardContext, g as DashboardError, x as DashboardLayout, _ as DashboardLayoutContext, b as DashboardLayoutError, E as DashboardTileContainer, S as DashboardTileError, C as DashboardTiles, v as getNodeKey, D as useDashboardState, O as useNumberFormatter };

package/dist/useNumberFormatter.d.ts

@@ -0,0 +1,5 @@
+import { NumberFormat } from '@rotorjs/dashboard';
+export type NumberFormatterOptions = {
+    locale?: Intl.UnicodeBCP47LocaleIdentifier;
+};
+export declare function useNumberFormatter(init?: NumberFormatterOptions): (value: number, format?: NumberFormat) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rotorjs/react",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Rotor",
   "author": {
     "name": "Aaron Burmeister"
@@ -44,32 +44,32 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@rotorjs/dashboard": "^0.2.0",
-    "@types/react": "^19.1.12",
+    "@rotorjs/dashboard": "^0.5.2",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^6.0.2",
-    "eslint": "^10.4.0",
+    "eslint": "^10.4.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-import-resolver-typescript": "^4.4.5",
     "eslint-plugin-import-x": "^4.16.2",
-    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.6.0",
-    "prettier": "^3.8.3",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
+    "prettier": "^3.8.4",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.59.4",
-    "unplugin-dts": "^1.0.1",
-    "vite": "^8.0.13"
+    "typescript-eslint": "^8.61.0",
+    "unplugin-dts": "^1.0.2",
+    "vite": "^8.0.16"
   },
   "peerDependencies": {
-    "@rotorjs/dashboard": "^0.2.0",
+    "@rotorjs/dashboard": "^0.5.0",
     "react": "^19.0.0"
   },
   "dependencies": {
-    "@rotorjs/state": "^0.6.0",
+    "@rotorjs/state": "^0.7.0",
     "fast-deep-equal": "^3.1.3",
     "uuid": "^14.0.0"
   }