diff --git a/README.md b/README.md index 368d45f..af56659 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,24 @@ -# [Cereb](https://cereb.dev) - -**User input handling and orchestration** library, -From low-level events (keyboard, wheel, pointer, touch, ...) to high-level gestures (pan, pinch, ...) +

Cereb logo
Cereb

+

An open source interaction library
for composable gesture and event streams

+

+ npm version + NPM License +

```bash npm install --save cereb ``` -## Getting started - -The example below moves an element by tracking pointer position: +[Learn how to use Cereb in your project](https://cereb.dev). -```typescript -import { singlePointer } from "cereb"; - -// Create a stream from pointer events -singlePointer(canvas) - // Listen to stream events - .on((signal) => { - // Receive signals from the stream - const { phase, cursor } = signal.value; - const [x, y] = cursor; - switch (phase){ - case "move": - element.style.transform = `translate(${x}px, ${y}px)`; - break; - } - }); -``` +## Table of Contents -## High-level gestures packages +1. [Why Cereb?](#why-cereb) +3. [Examples](#-examples) +5. [License](#license) +6. [Contribute](#contributing) -For advanced gestures like pan or pinch, install dedicated packages that build on top of Cereb's core: - -| Package | Description | -|---------|-------------| -| [@cereb/pan](./packages/pan) | Pan/drag gestures with velocity and direction tracking | -| [@cereb/pinch](./packages/pinch) | Pinch-to-zoom with distance and scale calculations | -| [@cereb/tap](./packages/tap) | Tap gesture recognition | - -### Pinch example +### Examples ```bash npm install --save cereb @cereb/pinch @@ -62,31 +41,9 @@ pinch(element) }); ``` -## Documentation - -### Stream API +[See all Examples and Demo →](https://cereb.dev/examples/space-adventure) -Create streams from various input sources: - -| API | Description | -|-----|-------------| -| [pan](https://cereb.dev/stream-api/pan) | Pan gesture with velocity and direction | -| [pinch](https://cereb.dev/stream-api/pinch) | Pinch gesture with distance and center | -| [singlePointer](https://cereb.dev/stream-api/single-pointer) | Unified pointer (mouse/touch/pen) | -| [multiPointer](https://cereb.dev/stream-api/multi-pointer) | Multi-touch tracking | -| [keyboard](https://cereb.dev/stream-api/keyboard) | Keyboard events (keydown + keyup) | -| [keydown](https://cereb.dev/stream-api/keydown) | Keydown events only | -| [keyheld](https://cereb.dev/stream-api/keyheld) | Track if a key is held | -| [wheel](https://cereb.dev/stream-api/wheel) | Wheel/scroll events | -| [domEvent](https://cereb.dev/stream-api/dom-event) | Any DOM event | - -### Operator API - -Transform and compose streams with operators like `filter`, `map`, `merge`, `throttle`, `debounce`, and more. - -[See all operators →](https://cereb.dev/operator-api/compose) - -## The Problems Cereb Solves +## Why Cereb? - **No Abstraction for Event Flow** — DOM events lack structure for state, dependencies, and composition - **Lightweight Bundle** — ~77% smaller than Hammer.js (1.73 KB gzipped for pan gesture) @@ -94,6 +51,20 @@ Transform and compose streams with operators like `filter`, `map`, `merge`, `thr [See detailed examples →](https://cereb.dev/core-concepts/the-problem-solves) +## Documentation + +You can find the Cereb documentation [on the website](https://cereb.dev). + +- **Core Concepts** + - [Key Models](https://cereb.dev/core-concepts/key-models/) + - [Behavior & Event](https://cereb.dev/core-concepts/behavior-and-event/) + - [Creating Operators](https://cereb.dev/core-concepts/creating-operators/) + - [High-Order Operators](https://cereb.dev/core-concepts/higher-order-operators/) + - [The Problem Solves](https://cereb.dev/core-concepts/the-problem-solves/) +- **API Reference** + - [Stream](https://cereb.dev/stream-api/pan/) + - [Operators](https://cereb.dev/operator-api/compose/) + ## Contributing If you find Cereb useful, consider giving it a star — it helps others discover the project! diff --git a/docs/public/logo-square-light.svg b/docs/public/logo-square-light.svg new file mode 100644 index 0000000..959accc --- /dev/null +++ b/docs/public/logo-square-light.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/docs/src/assets/changelogs.svg b/docs/src/assets/changelogs.svg deleted file mode 100644 index 940bb4f..0000000 --- a/docs/src/assets/changelogs.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/docs/src/assets/code-block.svg b/docs/src/assets/code-block.svg deleted file mode 100644 index 46bfb26..0000000 --- a/docs/src/assets/code-block.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/docs/src/assets/content.svg b/docs/src/assets/content.svg deleted file mode 100644 index f94f6cc..0000000 --- a/docs/src/assets/content.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/docs/src/assets/element.svg b/docs/src/assets/element.svg deleted file mode 100644 index ff8bd8b..0000000 --- a/docs/src/assets/element.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/docs/src/assets/hero-star.svg b/docs/src/assets/hero-star.svg deleted file mode 100644 index 1433131..0000000 --- a/docs/src/assets/hero-star.svg +++ /dev/null @@ -1,99 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/src/assets/layouts.svg b/docs/src/assets/layouts.svg deleted file mode 100644 index 3a3ab4b..0000000 --- a/docs/src/assets/layouts.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/docs/src/assets/logo-dark.svg b/docs/src/assets/logo-dark.svg deleted file mode 100644 index af23876..0000000 --- a/docs/src/assets/logo-dark.svg +++ /dev/null @@ -1,60 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/src/assets/logo-light.svg b/docs/src/assets/logo-light.svg deleted file mode 100644 index a6312ac..0000000 --- a/docs/src/assets/logo-light.svg +++ /dev/null @@ -1,60 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/src/styles/global.css b/docs/src/styles/global.css index d4a4519..80e142a 100644 --- a/docs/src/styles/global.css +++ b/docs/src/styles/global.css @@ -9,6 +9,11 @@ @plugin "../tailwind-plugin/tw-theme"; @plugin "../tailwind-plugin/tw-bs-grid"; +body { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + :root { --color-primary: #ffffff; --color-light: #f6f6f6; diff --git a/pr.md b/pr.md deleted file mode 100644 index 0cbebb3..0000000 --- a/pr.md +++ /dev/null @@ -1,47 +0,0 @@ -# feat(tap): add tap gesture recognition with multi-tap support - -## Summary -- Add new `@cereb/tap` package for tap gesture recognition -- Support multi-tap detection (single, double, triple taps, etc.) -- Add double-tap zoom gesture to space adventure example - -## Features - -### Operators -- `tapRecognizer()` - Full lifecycle operator emitting `start`, `end`, and `cancel` phases -- `tapEndOnly()` - Simplified operator that only emits successful tap events -- `tap()` - Convenience function that creates a tap stream from an element - -### Configuration Options -| Option | Default | Description | -|--------|---------|-------------| -| `movementThreshold` | 10px | Max movement allowed during tap | -| `durationThreshold` | 500ms | Max duration for a valid tap | -| `chainMovementThreshold` | movementThreshold | Max distance between consecutive taps | -| `chainIntervalThreshold` | durationThreshold / 2 | Max interval between consecutive taps | - -### TapSignal Value -- `phase`: Tap lifecycle phase (`start`, `end`, `cancel`) -- `x`, `y`: Client coordinates -- `pageX`, `pageY`: Page coordinates -- `tapCount`: Consecutive tap count (1=single, 2=double, etc.) -- `duration`: How long the pointer was pressed (ms) -- `pointerType`: Type of pointer (`mouse`, `touch`, `pen`) - -## Usage Example -```typescript -import { tap } from "@cereb/tap"; - -tap(element, { chainIntervalThreshold: 300 }) - .on((signal) => { - if (signal.value.tapCount === 2) { - console.log("Double tap detected!"); - } - }); -``` - -## Test Plan -- [x] Unit tests for tap recognizer state machine -- [x] Unit tests for geometry calculations -- [x] Unit tests for tap recognition scenarios (single, double, triple taps) -- [x] Integration with docs site (space adventure double-tap zoom)