AFFiNE is a cross-platform, block-based knowledge management application that combines notes, whiteboards, and databases in a local-first, real-time collaborative environment. Built on the BlockSuite editor framework, it features a modular architecture with extensible components, AI-powered capabilities (Copilot), and support for embedding external content. The application consists of a web client, desktop client (Electron), and mobile clients (iOS/Android), backed by a Node.js/NestJS server with Prisma ORM and Rust performance modules. Data is synchronized via Yjs CRDTs with a custom storage layer (nbstore) for offline-first capabilities.
react-zoom-pan-pinch is a production React library (npm package, zero runtime dependencies beyond React) that adds zoom, pan, and pinch interactions to arbitrary HTML content. In production, TransformWrapper mounts a ZoomPanPinch imperative core instance that registers DOM event listeners (wheel, touch/pointer, keyboard) and shares state via React context; TransformComponent renders children with a CSS transform (translate/scale or configurable matrix) driven by that state. The data flow is: browser events → gesture handlers → state/bounds mutation → CSS transform on the content node, with ResizeObserver-driven recalculation when wrapper or content dimensions change. The package is consumed internally as: TransformWrapper/TransformComponent, auxiliary MiniMap, KeepScale, and Virtualize components, six hooks (useControls, useTransformEffect, useTransformInit, useTransformContext, useTransformComponent, useZoomPanPinch), and an imperative API (zoomIn, zoomOut, setTransform, resetTransform, fitToView, zoomToElement, panBy, clientToContent/contentToClient) exposed via ref, render props, or hooks.