open-index/open-npm huggingface dataset:
npm package: @ripka/content
Description: Write your content inside your Nuxt app
Latest version: 3.9.2

[![nuxt-content-social-card](./.github/social-card.png)](https://content.nuxt.com)

# Nuxt Content

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
[![Volta][volta-src]][volta-href]

Nuxt Content reads the `content/` directory in your project, parses `.md`, `.yml`, `.csv` or `.json` files and creates a powerful data layer for your application. Bonus, use Vue components in Markdown with the [MDC syntax](https://content.nuxt.com/docs/files/markdown).

- [📖 &nbsp;Read the documentation](https://content.nuxt.com)
- [✨ &nbsp;Intro video](https://www.youtube.com/watch?v=o9e12WbKrd8)
- [✍️ &nbsp;Nuxt Studio](https://content.nuxt.com/docs/studio/setup)

## Features

- [**Nuxt 3**](https://nuxt.com) support
- Work in serverless and edge environments (Cloudflare Workers, etc.)
- Render Vue components in Markdown with the [MDC syntax](https://content.nuxt.com/docs/files/markdown)
- Fully typed collections and queries
- Navigation generation
- Blazing fast hot module replacement in development
- Code highlighting with [**Shiki**](https://github.com/shikijs/shiki)
- Powerful query builder on top of SQLite database
- [... and more](https://content.nuxt.com)

## 💻 Development

- Clone repository
- Install dependencies using `pnpm install`
- Prepare using `pnpm dev:prepare`
- Build using `pnpm prepack`
- Try playground using `pnpm dev`
- Test using `pnpm test`

## License

[MIT](./LICENSE) - Made with 💚

[npm-version-src]: https://img.shields.io/npm/v/@nuxt/content/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@nuxt/content

[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxt/content.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npm.chart.dev/@nuxt/content

[license-src]: https://img.shields.io/github/license/nuxt/content.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://github.com/nuxt/content/blob/main/LICENSE

[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt
[nuxt-href]: https://nuxt.com

[volta-src]: https://user-images.githubusercontent.com/904724/209143798-32345f6c-3cf8-4e06-9659-f4ace4a6acde.svg
[volta-href]: https://volta.net/nuxt/content?utm_source=readme_nuxt_content
npm package: @ripl/3d
Description: 3D rendering for Ripl
Author: Andrew Courtice
Latest version: 1.0.0-beta.2

# @ripl/3d

Experimental 3D rendering for [Ripl](https://www.ripl.rocks) — a unified API for 2D graphics rendering in the browser.

> **Note:** This package is experimental and its API may change between releases.

## Installation

```bash
npm install @ripl/3d
```

## Overview

Extends Ripl's rendering pipeline with 3D capabilities. Projects 3D geometry onto Ripl's 2D canvas context using a virtual camera, depth sorting, and flat shading.

## Features

- **3D math** — Vectors, matrices, and transformations
- **Camera** — Configurable virtual camera with projection
- **Shading** — Flat shading with directional lighting
- **Depth sorting** — Automatic painter's algorithm for correct draw order
- **3D shapes** — Built-in 3D shape primitives
- **Interpolation** — 3D-aware interpolators for smooth animation

## Usage

```typescript
import {
    createContext,
} from '@ripl/web';
import {
    createCamera, createCube,
} from '@ripl/3d';

const context = createContext('.mount-element');
const camera = createCamera({ /* options */ });
const cube = createCube({ /* options */ });
```

## Documentation

Full documentation is available at [ripl.rocks](https://www.ripl.rocks).

## License

[MIT](../../LICENSE)
npm package: @ripl/charts
Description: Pre-built chart components for Ripl
Author: Andrew Courtice
Latest version: 1.0.0-beta.2

# @ripl/charts

Pre-built, animated chart components for [Ripl](https://www.ripl.rocks) — a unified API for 2D graphics rendering in the browser.

## Installation

```bash
npm install @ripl/charts
```

## Chart Types

| Category | Charts |
|----------|--------|
| **Cartesian** | Bar, Line, Area, Scatter, Trend (multi-series bar/line), Stock, Realtime |
| **Radial** | Pie/Donut, Radar, Polar Area, Gauge, Sunburst |
| **Relational** | Sankey, Chord |
| **Distribution** | Heatmap, Treemap, Funnel |
| **Scheduling** | Gantt |

## Usage

```typescript
import {
    BarChart,
} from '@ripl/charts';

const chart = new BarChart('#chart', {
    data: [
        { label: 'A',
            value: 10 },
        { label: 'B',
            value: 25 },
        { label: 'C',
            value: 15 },
    ],
    keyBy: 'label',
    series: [
        { valueBy: item => item.value },
    ],
});
```

## Features

- **Animated transitions** — Smooth entry, update, and exit animations out of the box
- **Interactive** — Tooltips, crosshairs, hover effects, and click events
- **Configurable** — Axes, legends, grids, colors, padding, and more
- **Canvas & SVG** — Renders to either context via Ripl's unified API
- **Tree-shakable** — Import only the chart types you need

## Documentation

Full documentation, options reference, and interactive demos are available at [ripl.rocks](https://www.ripl.rocks).

## License

[MIT](../../LICENSE)
npm package: @ripl/core
Description: Core rendering library for Ripl — elements, scene, renderer, animation, scales, math, color, interpolation
Author: Andrew Courtice
Latest version: 1.0.0-beta.2

# @ripl/core

Core rendering library for [Ripl](https://www.ripl.rocks) — a unified API for 2D graphics rendering (Canvas & SVG) in the browser.

## Installation

```bash
npm install @ripl/core
```

## Features

- **Unified rendering API** — One API surface for both Canvas and SVG contexts
- **Built-in elements** — Arc, circle, rect, line, polyline, polygon, ellipse, path, text, and image
- **Scene management** — Scenegraph with grouping, property inheritance, and element querying
- **Animation** — High-performance async transitions with CSS-like keyframe support and custom interpolators
- **Event system** — Event bubbling, delegation, and stop propagation (mimics the DOM)
- **Scales** — Continuous, discrete, and time scales for data mapping
- **Color** — Color parsing, interpolation, and conversion (RGB, HSL, Hex)
- **Math** — Geometry utilities, vector operations, and easing functions
- **Zero dependencies** — Fully self-contained
- **Tree-shakable** — Only ship what you use

## Usage

```typescript
import {
    createCircle,
    createContext,
    createRenderer,
    createScene,
} from '@ripl/web';

const context = createContext('.mount-element');

const circle = createCircle({
    fill: 'rgb(30, 105, 120)',
    cx: context.width / 2,
    cy: context.height / 2,
    radius: 50,
});

const scene = createScene({
    children: [circle],
});

const renderer = createRenderer(scene, {
    autoStart: true,
    autoStop: true,
});

await renderer.transition(circle, {
    duration: 1000,
    state: {
        radius: 100,
        fill: '#FF0000',
    },
});
```

## Switching to SVG

Replace the `createContext` import with `@ripl/svg` — everything else stays the same:

```typescript
import {
    createContext,
} from '@ripl/svg';
```

## Documentation

Full documentation and interactive demos are available at [ripl.rocks](https://www.ripl.rocks).

## License

[MIT](../../LICENSE)
npm package: @ripl/dom
Description: DOM utilities and context for Ripl
Author: Andrew Courtice
Latest version: 1.0.0-beta.2

# @ripl/dom

DOM utilities for [Ripl](https://www.ripl.rocks) — a unified API for 2D graphics rendering in the browser.

## Installation

```bash
npm install @ripl/dom
```

## Overview

DOM utilities and a lightweight virtual DOM reconciler used internally by browser contexts. This package is primarily an internal dependency — most users won't need to interact with it directly.

## API

### `reconcileNode(domParent, vnode, domCache, options)`

Reconciles a virtual node tree against the real DOM, creating, updating, and removing elements as needed.

### `ensureGroupPath(root, groupIds, defaultTag?)`

Ensures a nested group structure exists within the virtual tree, creating intermediate nodes as needed.

### `getAncestorGroupIds(element)`

Returns the chain of ancestor group IDs for a given element reference.

### `createVNode(id, tag, children?, element?)`

Creates a new virtual node.

## Documentation

Full documentation is available at [ripl.rocks](https://www.ripl.rocks).

## License

[MIT](../../LICENSE)
npm package: @ripl/svg
Description: SVG rendering context for Ripl
Author: Andrew Courtice
Latest version: 1.0.0-beta.2

# @ripl/svg

SVG rendering context for [Ripl](https://www.ripl.rocks) — a unified API for 2D graphics rendering in the browser.

## Installation

```bash
npm install @ripl/svg
```

## Overview

This package provides an SVG implementation of Ripl's `Context` interface. Swap a single import to switch your entire rendering pipeline from Canvas to SVG — all elements, scenes, animations, and events work identically.

## Usage

```typescript
import {
    createContext,
} from '@ripl/svg';
import {
    createCircle,
} from '@ripl/web';

const context = createContext('.mount-element');

const circle = createCircle({
    fill: 'rgb(30, 105, 120)',
    cx: context.width / 2,
    cy: context.height / 2,
    radius: 50,
});

circle.render(context);
```

## Features

- **Drop-in replacement** — Replace `@ripl/web`'s `createContext` with `@ripl/svg`'s and everything just works
- **Efficient DOM updates** — Virtual DOM reconciler minimizes DOM mutations each frame
- **Full API parity** — Paths, text, images, gradients, transforms, clipping, and hit testing
- **Gradient support** — Linear and radial gradients rendered as native SVG gradient elements

## Documentation

Full documentation and interactive demos are available at [ripl.rocks](https://www.ripl.rocks).

## License

[MIT](../../LICENSE)
npm package: @ripl/utilities
Description: Shared typed utility functions for Ripl
Author: Andrew Courtice
Latest version: 1.0.0-beta.1

# @ripl/utilities

Shared typed utility functions for [Ripl](https://www.ripl.rocks) — a unified API for 2D graphics rendering in the browser.

## Installation

```bash
npm install @ripl/utilities
```

## Overview

A collection of strictly-typed utility functions used across the Ripl ecosystem. Zero dependencies, fully tree-shakable.

## API

### Type Guards

```typescript
typeIsArray(value); // value is unknown[]
typeIsFunction(value); // value is AnyFunction
typeIsNil(value); // value is null | undefined
typeIsNumber(value); // value is number
typeIsString(value); // value is string
typeIsObject(value); // value is object
typeIsDate(value); // value is Date
typeIsBoolean(value); // value is boolean
```

### Collection Helpers

```typescript
arrayJoin(left, right, predicate); // left/inner/right join for data diffing (Map-optimized for key predicates)
arrayMapRange(length, callback); // map over a numeric range
arrayGroup(array, key); // group array items by key or function
arrayIntersection(left, right, predicate); // intersection of two arrays
arrayDifference(left, right, predicate); // difference of two arrays
```

> **Note:** Generic array wrappers (`arrayForEach`, `arrayMap`, `arrayFilter`, `arrayReduce`, `arrayFind`, `arrayFlatMap`) have been removed in favour of native array methods for better performance.

### Object Helpers

```typescript
objectForEach(object, callback);
objectMap(object, callback);
objectMerge(target, ...sources);
```

### Common Types

```typescript
OneOrMore<T>; // T | T[]
AnyFunction; // (...args: any[]) => any
AnyObject; // { [key: PropertyKey]: unknown }
Disposable; // { dispose: () => void }
Predicate<L, R>; // (left: L, right: R) => boolean
```

### Value Helpers

```typescript
valueOr(value, fallback); // value ?? fallback with type narrowing
valueOrDefault(value, fallback); // nullish coalescing with defaults
```

## Documentation

Full documentation is available at [ripl.rocks](https://www.ripl.rocks).

## License

[MIT](../../LICENSE)
npm package: @ripl/webgpu
Description: WebGPU 3D rendering context for Ripl
Author: Andrew Courtice
Latest version: 1.0.0-beta.2

# @ripl/webgpu

WebGPU 3D rendering context for [Ripl](https://www.ripl.rocks). Replaces the Canvas 2D painter's algorithm in `@ripl/3d` with a true GPU rasterization pipeline featuring hardware depth testing, WGSL shaders, and Lambertian shading.

## Installation

```bash
npm install @ripl/webgpu
```

## Quick Start

```ts
import {
    createContext,
} from '@ripl/webgpu';
import {
    createCamera,
} from '@ripl/3d';
import {
    createRenderer, createScene,
} from '@ripl/web';
import {
    createCube,
} from '@ripl/3d';

const context = await createContext('#app');
const scene = createScene(context);
const renderer = createRenderer(scene);

const camera = createCamera(scene, {
    position: [0, 2, 5],
    target: [0, 0, 0],
});

const cube = createCube({ size: 1,
    fill: '#4488ff' });
scene.add(cube);
renderer.render();
```

## Features

- **WebGPU rendering** — true GPU rasterization with hardware depth buffer
- **Drop-in replacement** — same `Shape3D` elements work with both Canvas 2D and WebGPU contexts
- **WGSL shaders** — vertex and fragment shaders with Lambertian diffuse lighting
- **MSAA** — 4x multisample anti-aliasing
- **Async initialisation** — `createContext` returns a `Promise` for GPU adapter/device negotiation