@vibecook/truffle-react 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { useMesh } from './use-mesh.js';
+export { useSyncedStore } from './use-synced-store.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { useMesh } from './use-mesh.js';
+export { useSyncedStore } from './use-synced-store.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/use-mesh.d.ts

@@ -0,0 +1,19 @@
+import type { BaseDevice, DeviceRole } from '@vibecook/truffle-types';
+import type { MeshNode } from '@vibecook/truffle-mesh';
+export interface UseMeshResult {
+    devices: BaseDevice[];
+    localDevice: BaseDevice | null;
+    isPrimary: boolean;
+    isConnected: boolean;
+    role: DeviceRole;
+    broadcast: (namespace: string, type: string, payload: unknown) => void;
+    sendTo: (deviceId: string, namespace: string, type: string, payload: unknown) => boolean;
+}
+/**
+ * React hook for Truffle mesh networking.
+ *
+ * Subscribes to device changes and provides messaging helpers.
+ * The MeshNode must already be started before using this hook.
+ */
+export declare function useMesh(node: MeshNode | null): UseMeshResult;
+//# sourceMappingURL=use-mesh.d.ts.map

package/dist/use-mesh.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mesh.d.ts","sourceRoot":"","sources":["../src/use-mesh.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEvD,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,WAAW,EAAE,UAAU,GAAG,IAAI,CAAC;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,UAAU,CAAC;IACjB,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvE,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;CAC1F;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,GAAG,aAAa,CA6D5D"}

package/dist/use-mesh.js

@@ -0,0 +1,57 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+/**
+ * React hook for Truffle mesh networking.
+ *
+ * Subscribes to device changes and provides messaging helpers.
+ * The MeshNode must already be started before using this hook.
+ */
+export function useMesh(node) {
+    const [devices, setDevices] = useState([]);
+    const [localDevice, setLocalDevice] = useState(null);
+    const [isPrimary, setIsPrimary] = useState(false);
+    const [isConnected, setIsConnected] = useState(false);
+    const [role, setRole] = useState('secondary');
+    const busRef = useRef(null);
+    useEffect(() => {
+        if (!node)
+            return;
+        busRef.current = node.getMessageBus();
+        setLocalDevice(node.getLocalDevice());
+        setDevices(node.getDevices());
+        setIsConnected(node.isRunning());
+        setIsPrimary(node.isPrimary());
+        setRole(node.getRole());
+        const onDevicesChanged = (devs) => setDevices(devs);
+        const onRoleChanged = (r, primary) => {
+            setRole(r);
+            setIsPrimary(primary);
+        };
+        const onStarted = () => {
+            setIsConnected(true);
+            setLocalDevice(node.getLocalDevice());
+        };
+        const onStopped = () => {
+            setIsConnected(false);
+            setDevices([]);
+        };
+        node.on('devicesChanged', onDevicesChanged);
+        node.on('roleChanged', onRoleChanged);
+        node.on('started', onStarted);
+        node.on('stopped', onStopped);
+        return () => {
+            node.off('devicesChanged', onDevicesChanged);
+            node.off('roleChanged', onRoleChanged);
+            node.off('started', onStarted);
+            node.off('stopped', onStopped);
+            busRef.current = null;
+        };
+    }, [node]);
+    const broadcast = useCallback((namespace, type, payload) => {
+        busRef.current?.broadcast(namespace, type, payload);
+    }, []);
+    const sendTo = useCallback((deviceId, namespace, type, payload) => {
+        return busRef.current?.publish(deviceId, namespace, type, payload) ?? false;
+    }, []);
+    return { devices, localDevice, isPrimary, isConnected, role, broadcast, sendTo };
+}
+//# sourceMappingURL=use-mesh.js.map

package/dist/use-mesh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mesh.js","sourceRoot":"","sources":["../src/use-mesh.ts"],"names":[],"mappings":"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"}

package/dist/use-synced-store.d.ts

@@ -0,0 +1,15 @@
+import type { DeviceSlice } from '@vibecook/truffle-types';
+import type { ISyncableStore } from '@vibecook/truffle-store-sync';
+export interface UseSyncedStoreResult<T> {
+    localSlice: DeviceSlice<T> | null;
+    localData: T | null;
+    version: number;
+}
+/**
+ * React hook for a synced store.
+ *
+ * Subscribes to store changes and returns the current local slice data.
+ * Use with StoreSyncAdapter for cross-device synchronization.
+ */
+export declare function useSyncedStore<T>(store: ISyncableStore<T> | null): UseSyncedStoreResult<T>;
+//# sourceMappingURL=use-synced-store.d.ts.map

package/dist/use-synced-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-synced-store.d.ts","sourceRoot":"","sources":["../src/use-synced-store.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAEnE,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAClC,SAAS,EAAE,CAAC,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,oBAAoB,CAAC,CAAC,CAAC,CA0B1F"}

package/dist/use-synced-store.js

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+/**
+ * React hook for a synced store.
+ *
+ * Subscribes to store changes and returns the current local slice data.
+ * Use with StoreSyncAdapter for cross-device synchronization.
+ */
+export function useSyncedStore(store) {
+    const [localSlice, setLocalSlice] = useState(store?.getLocalSlice() ?? null);
+    useEffect(() => {
+        if (!store)
+            return;
+        setLocalSlice(store.getLocalSlice());
+        const onLocalChanged = (slice) => {
+            setLocalSlice(slice);
+        };
+        store.on('localChanged', onLocalChanged);
+        return () => {
+            store.off('localChanged', onLocalChanged);
+        };
+    }, [store]);
+    return {
+        localSlice,
+        localData: localSlice?.data ?? null,
+        version: localSlice?.version ?? 0,
+    };
+}
+//# sourceMappingURL=use-synced-store.js.map

package/dist/use-synced-store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-synced-store.js","sourceRoot":"","sources":["../src/use-synced-store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAU5C;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAI,KAA+B;IAC/D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAC1C,KAAK,EAAE,aAAa,EAAE,IAAI,IAAI,CAC/B,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK;YAAE,OAAO;QAEnB,aAAa,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC,CAAC;QAErC,MAAM,cAAc,GAAG,CAAC,KAAqB,EAAE,EAAE;YAC/C,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,CAAC;QAEF,KAAK,CAAC,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;QAEzC,OAAO,GAAG,EAAE;YACV,KAAK,CAAC,GAAG,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;QAC5C,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO;QACL,UAAU;QACV,SAAS,EAAE,UAAU,EAAE,IAAI,IAAI,IAAI;QACnC,OAAO,EAAE,UAAU,EAAE,OAAO,IAAI,CAAC;KAClC,CAAC;AACJ,CAAC"}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@vibecook/truffle-react",
+  "version": "0.1.0",
+  "description": "React hooks for Truffle mesh networking",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jamesyong-42/truffle.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/jamesyong-42/truffle#readme",
+  "bugs": {
+    "url": "https://github.com/jamesyong-42/truffle/issues"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@vibecook/truffle-types": "workspace:*",
+    "@vibecook/truffle-mesh": "workspace:*",
+    "@vibecook/truffle-store-sync": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0"
+  }
+}