@rotorjs/react 0.4.2 → 0.6.0

package/dist/Dashboard.d.ts

@@ -1,4 +1,4 @@
-import { DashboardEventTarget, DashboardFact, DashboardLayoutNode, DashboardTileNode, DashboardVar } from '@rotorjs/dashboards';
+import { DashboardAction, DashboardEventTarget, DashboardFact, DashboardLayoutNode, DashboardTileNode, DashboardVar } from '@rotorjs/dashboard';
 import { ReactNode } from 'react';
 import { DashboardLayoutMap, DashboardTileMap } from './DashboardContext';
 export type DashboardProps = {
@@ -14,6 +14,10 @@ export type DashboardProps = {
     tiles: DashboardTileMap;
     layout?: DashboardLayoutNode;
     content: DashboardTileNode[];
+    onAction?: (action: DashboardAction) => boolean | void;
+    allowedNavigateOrigins?: {
+        [origin: string]: boolean;
+    };
     children?: ReactNode;
 };
-export declare function Dashboard({ engine, initialVars: rawInitialVars, initialFacts: rawInitialFacts, layouts, defaultLayout, tiles, layout, content, children, }: DashboardProps): import("react/jsx-runtime").JSX.Element;
+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;

package/dist/DashboardContext.d.ts

@@ -1,4 +1,4 @@
-import { DashboardEventTarget, DashboardFact, DashboardLayoutNode, DashboardTileNode, DashboardVar } from '@rotorjs/dashboards';
+import { DashboardEventTarget, DashboardFact, DashboardLayoutNode, DashboardTileNode, DashboardVar } from '@rotorjs/dashboard';
 import { ComponentType, PropsWithChildren } from 'react';
 export type DashboardLayoutMap = Record<string, ComponentType<PropsWithChildren<DashboardLayoutNode>>>;
 export type DashboardTileMap = Record<string, ComponentType<DashboardTileNode>>;

package/dist/DashboardError.d.ts

@@ -1,2 +1,2 @@
-import { ErrorDashboardNode } from '@rotorjs/dashboards';
+import { ErrorDashboardNode } from '@rotorjs/dashboard';
 export declare function DashboardError({ error }: ErrorDashboardNode): void;

package/dist/DashboardLayout.d.ts

@@ -1,4 +1,4 @@
-import { DashboardLayoutNode } from '@rotorjs/dashboards';
+import { DashboardLayoutNode } from '@rotorjs/dashboard';
 import { ReactNode } from 'react';
 export type DashboardLayoutProps = {
     layout?: DashboardLayoutNode;

package/dist/DashboardLayoutContext.d.ts

@@ -1,6 +1,7 @@
-import { ComponentType, PropsWithChildren } from 'react';
+import { ComponentType } from 'react';
+import { DashboardTileContainerProps } from './DashboardTileContainer';
 export type DashboardLayoutContextValue = {
     type: string;
-    tileContainer?: ComponentType<PropsWithChildren>;
+    tileContainer?: ComponentType<DashboardTileContainerProps>;
 };
 export declare const DashboardLayoutContext: import('react').Context<DashboardLayoutContextValue>;

package/dist/DashboardTileContainer.d.ts

@@ -0,0 +1,10 @@
+import { DashboardLayoutConfig } from '@rotorjs/dashboard';
+import { CSSProperties, ReactNode } from 'react';
+export type DashboardTileContainerProps = {
+    layout?: DashboardLayoutConfig;
+    children: (layoutProps: {
+        className?: string;
+        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;

package/dist/DashboardTiles.d.ts

@@ -1,4 +1,4 @@
-import { DashboardTileNode } from '@rotorjs/dashboards';
+import { DashboardTileNode } from '@rotorjs/dashboard';
 export type DashboardTilesProps = {
     content: DashboardTileNode[];
 };

package/dist/getNodeKey.d.ts

@@ -0,0 +1,2 @@
+import { DashboardNode } from '@rotorjs/dashboard';
+export declare function getNodeKey(node: DashboardNode, index?: number): string;

package/dist/main.d.ts

@@ -4,7 +4,8 @@ export * from './DashboardError';
 export * from './DashboardLayout';
 export * from './DashboardLayoutContext';
 export * from './DashboardLayoutError';
+export * from './DashboardTileContainer';
 export * from './DashboardTileError';
 export * from './DashboardTiles';
-export * from './getKey';
+export * from './getNodeKey';
 export * from './useDashboardState';

package/dist/main.js

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

package/dist/useDashboardState.d.ts

@@ -1,2 +1,2 @@
-import { DashboardReducerInit, DashboardState } from '@rotorjs/dashboards';
-export declare function useDashboardState(init: DashboardReducerInit, initialState?: DashboardState): DashboardState;
+import { DashboardState, DashboardStateDescriptor } from '@rotorjs/dashboard';
+export declare function useDashboardState(descriptor: DashboardStateDescriptor, initialState?: DashboardState): DashboardState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rotorjs/react",
-  "version": "0.4.2",
+  "version": "0.6.0",
   "description": "Rotor",
   "author": {
     "name": "Aaron Burmeister"
@@ -44,11 +44,11 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@rotorjs/dashboards": "^0.13.3",
+    "@rotorjs/dashboard": "^0.0.0",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^6.0.1",
-    "eslint": "^10.3.0",
+    "@vitejs/plugin-react": "^6.0.2",
+    "eslint": "^10.4.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import-x": "^4.16.2",
@@ -60,16 +60,16 @@
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.59.3",
-    "unplugin-dts": "^1.0.0",
-    "vite": "^8.0.12"
+    "typescript-eslint": "^8.59.4",
+    "unplugin-dts": "^1.0.1",
+    "vite": "^8.0.13"
   },
   "peerDependencies": {
-    "@rotorjs/dashboards": "^0.13.0",
+    "@rotorjs/dashboard": "^0.0.0",
     "react": "^19.0.0"
   },
   "dependencies": {
-    "@rotorjs/core": "^0.5.3",
+    "@rotorjs/state": "^0.2.0",
     "fast-deep-equal": "^3.1.3",
     "uuid": "^14.0.0"
   }

package/dist/getKey.d.ts

@@ -1,2 +0,0 @@
-import { DashboardNode } from '@rotorjs/dashboards';
-export declare function getKey(node: DashboardNode, index?: number): string;