How jasonkneen/pixelprovenance works
PixelProvenance embeds component identity and optional source locations in visual patterns, then turns a selected UI element or crop into a package containing identity metadata and a PNG. Its main drop-in workflow is toolbar selection/cropping → identity and capture → package delivery; a separate decoder workflow scans PNGs against a supplied registry. React tags, Cluso integration, and the demo provide additional product surfaces. The README documents capabilities whose implementation was not sampled; links to those are limited to supported paths and evidence.
Main entry points: mount.ts Drop-in mount · index.ts Cluso plugin · decode.ts PNG decoder · demo.tsx Interactive demo
Components 21
Tagging and capture
- Drop-in mount
src/dropin/mount.ts - Selection toolbar
src/dropin/toolbar.ts - Element picker
src/dropin/picker.ts - Crop gesture
src/dropin/crop.ts - Identity mapping
src/dropin/identity.ts - Visual signals
src/dropin/signal.ts - Screenshot capture
src/dropin/capture.ts
Decode and analysis
- PNG decoder
decoder/decode.ts - Pattern engine
src/pattern.ts - Spectral analysis
src/spectral.ts - Screenshot analysis
src/demo-analysis.ts
Integrations
- React tags
src/DevTag.tsx - Cluso plugin
src/cluso/index.ts - Interactive demo
src/demo.tsx
Package delivery
- Selection package
src/dropin/package.ts - Package transport
src/dropin/transport.ts - Reference receiver
server/receive.ts - Package files
Other components
- Website user
- PNG and registry
- Model worker
Connections 26
- Website user → Selection toolbar: uses
- Drop-in mount → Selection toolbar: renders
- Drop-in mount → Visual signals: applies
- Selection toolbar → Drop-in mount: dispatches modes
- Drop-in mount → Element picker: starts selection
- Drop-in mount → Crop gesture: starts cropping
- Drop-in mount → Identity mapping: resolves identity
- Drop-in mount → Screenshot capture: captures region
- Drop-in mount → Screenshot analysis: verifies crop
- Drop-in mount → Selection package: creates package
- Drop-in mount → Package transport: delivers package
- Package transport → Reference receiver: POSTs package
- Reference receiver → Package files: writes files
- Reference receiver → Package transport: returns status
- PNG and registry → PNG decoder: provides PNG and registry
- PNG decoder → Pattern engine: generates patterns
- PNG decoder → Spectral analysis: detects carriers
- PNG decoder → PNG and registry: returns matches
- React tags → Pattern engine: generates signals
- Cluso plugin → Identity mapping: builds codebook
- Cluso plugin → Visual signals: applies signals
- Cluso plugin → Screenshot capture: captures screenshots
- Cluso plugin → Screenshot analysis: analyzes screenshots
- Interactive demo → React tags: renders tags
- Interactive demo → Screenshot analysis: analyzes crop
- Interactive demo → Model worker: demonstrates package use