@react-opencv/fiber 0.1.1 → 0.1.3

package/README.md

@@ -1,5 +1,7 @@
 # react-opencv-fiber
 
+[![npm version](https://img.shields.io/npm/v/@react-opencv/fiber.svg)](https://www.npmjs.com/package/@react-opencv/fiber)
+
 A React renderer for OpenCV.js. Write image-processing pipelines as JSX — each element maps to an OpenCV operation, and the tree executes bottom-up through a custom React reconciler.
 
 [**Live demo**](https://erasta.github.io/react-opencv-fiber/)
@@ -89,6 +91,19 @@ Operations are nested inside-out — the innermost element runs first:
 
 Props map directly to OpenCV function parameters. Array values are coerced to the appropriate OpenCV types (`Size`, `Point`, `Scalar`).
 
+#### `__srcParam` / `__dstParam`
+
+By default, each operation is called as `cv.op(src, dst, ...params)` — matching the OpenCV.js convention of `src` at position 0 and `dst` at position 1. Some functions use a different argument order. Use `__srcParam` and `__dstParam` to override the position:
+
+```tsx
+{/* applyColorMap expects cv.applyColorMap(src, colormap, dst) */}
+<cvApplyColorMap colormap={2} __dstParam={2}>
+  <cvCvtColor code={11}>
+    <cvImage src="photo.jpg" />
+  </cvCvtColor>
+</cvApplyColorMap>
+```
+
 ### `<cvImage>`
 
 Special element that loads an image (URL or data URI) into a `Mat`.
@@ -97,14 +112,28 @@ Special element that loads an image (URL or data URI) into a `Mat`.
 <cvImage src="https://example.com/photo.jpg" />
 ```
 
-## Demo
+## Examples
+
+The `examples/` directory contains interactive demos with different filter combinations. [**Live demo**](https://erasta.github.io/react-opencv-fiber/)
+
+<p>
+  <img src="gifs/canny-gaussian.gif" width="400" />
+  <img src="gifs/adaptive-threshold-blur.gif" width="400" />
+</p>
+<p>
+  <img src="gifs/edge-preserving-canny.gif" width="400" />
+  <img src="gifs/laplacian-blur.gif" width="400" />
+</p>
+<p>
+  <img src="gifs/median-equalize.gif" width="400" />
+</p>
 
-The `demo/` directory contains a small app with a slider-driven pipeline (blur + grayscale + Canny edge detection). To run it:
+To run locally:
 
 ```sh
 npm install
-cd demo && npm install
-npm run dev
+npm run build
+cd examples && npm install && npx vite
 ```
 
 ## Acknowledgements

package/dist/components/OpenCvProvider.d.ts

@@ -0,0 +1,8 @@
+import type { CvDebugConfig, OpenCVContextValue } from "../types";
+export declare function useOpenCv(): OpenCVContextValue;
+export declare const OpenCvProvider: ({ openCvVersion, openCvPath, debug, children, }: {
+    openCvVersion?: string;
+    openCvPath?: string;
+    debug?: CvDebugConfig;
+    children: any;
+}) => import("react/jsx-runtime").JSX.Element;