feat: expose customPalette prop for color customization (#30)

* feat: expose customPalette prop for color customization

- Add customPalette prop to InferenceResult component
- Update predictionsToAnnotations to accept optional custom palette
- Export default palette for users to reference

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* docs: specify yarn as package manager and update CLAUDE.md

- Add packageManager field to enforce yarn@1.22.19 usage
- Update CLAUDE.md to use yarn commands instead of npm
- Document yarn installation commands and workspace management

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* chore: add .claude to gitignore

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: tian-lan-landing

.gitignore

@@ -1,4 +1,6 @@
 node_modules/
 .DS_Store
 **/yarn-error.log
-docs
+docs
+
+.claude

CLAUDE.md

@@ -0,0 +1,78 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Package Manager
+
+**IMPORTANT: This project uses Yarn (v1.22.19) as its package manager. Always use `yarn` commands instead of `npm` for dependency management and script execution.**
+
+## Development Commands
+
+### Build
+```bash
+# Build all packages in the monorepo
+yarn build
+
+# Type check all packages
+yarn tsc
+```
+
+### Testing
+```bash
+# Run tests in core package
+cd packages/core && yarn test
+
+# Run tests in react package
+cd packages/react && yarn test
+
+# Run tests with coverage in react package
+cd packages/react && yarn coverage
+```
+
+### Linting
+```bash
+# Lint all files from root
+yarn lint
+```
+
+### Documentation
+```bash
+# Generate documentation with TypeDoc
+yarn docs
+```
+
+### Installing Dependencies
+```bash
+# Install all dependencies
+yarn install
+
+# Add a new dependency to a specific package
+cd packages/core && yarn add <package-name>
+cd packages/react && yarn add <package-name>
+```
+
+## Architecture
+
+This is a Lerna monorepo containing two main packages:
+
+1. **landingai** (`packages/core/`) - Core JavaScript library for LandingLens API integration
+   - Provides API client for inference endpoints
+   - Contains utility functions for annotations, colors, and math operations
+   - Exports TypeScript types for predictions and API responses
+
+2. **landingai-react** (`packages/react/`) - React components library
+   - Provides React components for image collection and inference visualization
+   - Uses React Context API for API configuration (`InferenceContext`)
+   - Main components: `PhotoCollector`, `InferenceResult`, and annotation visualizers
+
+### Key Dependencies
+- Build tools: esbuild for bundling, TypeScript for type checking
+- Testing: Jest for core package, Vitest for React package
+- Monorepo management: Lerna with Yarn workspaces
+- React versions supported: 16.8.0+ and 17.0.0
+
+### Code Conventions
+- ESLint configuration requires semicolons and single quotes
+- TypeScript strict mode is enabled
+- Component CSS uses CSS modules (`.module.css` files)
+- All public APIs are exported through package index files

package.json

@@ -7,6 +7,7 @@
   "author": "Lan Tian <tian.lan@landing.ai>",
   "license": "MIT",
   "private": true,
+  "packageManager": "yarn@1.22.19",
   "scripts": {
     "build": "npx lerna run build",
     "tsc": "npx lerna run tsc",

packages/core/lib/utils/annotationUtils.ts

@@ -1,13 +1,16 @@
 import { Annotation, InferenceResult, ObjectDetectionPrediction, SegmentationPrediction } from '../types';
-import { hexToRgb, palette } from './colorUtils';
+import { hexToRgb, palette as defaultPalette } from './colorUtils';
 
 /**
  * Convert server format predictions into a list of {@link Annotation} for easy rendering
+ * @param inferenceResult - The inference result from the API
+ * @param customPalette - Optional custom color palette to use instead of the default
  */
-export function predictionsToAnnotations(inferenceResult?: InferenceResult | null) {
+export function predictionsToAnnotations(inferenceResult?: InferenceResult | null, customPalette?: string[]) {
   if (!inferenceResult) {
     return [];
   }
+  const palette = customPalette || defaultPalette;
   const { backbonepredictions, predictions } = inferenceResult;
   const predictionsMap = predictions.bitmaps ?? backbonepredictions?.bitmaps ?? backbonepredictions;
   return Object.entries(predictionsMap || []).map(([id, prediction]) => ({

packages/react/lib/components/InferenceResult.tsx

@@ -15,6 +15,11 @@ export interface InferenceResultProps {
    * Show labels for predicted annotations. Default is false.
    */
   showLabels?: boolean;
+  /**
+   * Custom color palette for annotations. If not provided, uses the default palette.
+   * Should be an array of hex color strings (e.g. ['#FF0000', '#00FF00', '#0000FF']).
+   */
+  customPalette?: string[];
   /**
    * Called when there is predict error.
    */
@@ -29,16 +34,16 @@ export interface InferenceResultProps {
  * Also provides summaries of the results.
  */
 export const InferenceResult: React.FC<InferenceResultProps> = (props) => {
-  const { image, showLabels = false, onPredictError } = props;
+  const { image, showLabels = false, customPalette, onPredictError } = props;
   const apiInfo = useInferenceContext();
 
   const imageRef = useRef<HTMLImageElement>(null);
 
   // inference results
   const [inferenceResult, setInferenceResult] = useState<InferenceResultType>();
   const annotations = useMemo(() => {
-    return predictionsToAnnotations(inferenceResult);
-  }, [inferenceResult]);
+    return predictionsToAnnotations(inferenceResult, customPalette);
+  }, [inferenceResult, customPalette]);
   const className = useMemo(() => {
     return inferenceResult?.predictions?.labelName ?? '';
   }, [inferenceResult]);