@fieldnotes/react 0.1.2 → 0.2.0

package/README.md

@@ -56,7 +56,7 @@ function App() {
 }
 ```
 
-Embedded React components are fully interactive — clicks, inputs, forms all work normally.
+Embedded components use a **two-mode interaction model**: by default they can be selected, dragged, and resized. **Double-click** to enter interact mode (clicks, inputs, forms work). **Escape** or click outside to exit.
 
 ## Hooks
 
@@ -116,6 +116,25 @@ function CameraInfo() {
 }
 ```
 
+### Changing Tool Options
+
+Use `useViewport()` to access tool instances and change options at runtime:
+
+```tsx
+import { useViewport } from '@fieldnotes/react';
+import type { PencilTool } from '@fieldnotes/core';
+
+function ColorPicker() {
+  const viewport = useViewport();
+
+  const setColor = (color: string) => {
+    viewport.toolManager.getTool<PencilTool>('pencil')?.setOptions({ color });
+  };
+
+  return <input type="color" onChange={(e) => setColor(e.target.value)} />;
+}
+```
+
 ## Component API
 
 ### `<FieldNotesCanvas>`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fieldnotes/react",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "React wrapper for Field Notes canvas SDK",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -16,14 +16,9 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "tsup",
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
   "license": "MIT",
   "dependencies": {
-    "@fieldnotes/core": "workspace:*"
+    "@fieldnotes/core": "0.2.1"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -39,5 +34,10 @@
     "react-dom": "^19.2.4",
     "tsup": "^8.5.1",
     "vitest": "^4.1.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
-}
+}