open-index/open-npm huggingface dataset:
npm package: @ryvora/react-use-escape-keydown
Description: ⌨️💨 Listen for Escape keydown in React. Instantly dismiss modals, popovers, and more!
Latest version: 2.0.0

# use-escape-keydown ⌨️💨

Greetings, Escape Route Planner! 🗺️

The `use-escape-keydown` hook is a simple yet effective utility that listens for the "Escape" key being pressed and calls a provided callback function when it happens.

It's your quick exit strategy 🚪 for modals, popovers, dropdowns, or any UI element that should be dismissible with the Esc key!

## Why it's handy:

- **Accessibility:** Pressing Escape to close transient UI elements is a common and expected keyboard interaction pattern.
- **Simplicity:** Abstracts away the `useEffect` and event listener setup for this specific common case.

## Basic Usage:

```tsx
import { useEscapeKeydown } from '@ryvora/react-use-escape-keydown'; // Hook name might vary
import React, { useState } from 'react';

function MyModal({ isOpen, onClose }) {
  useEscapeKeydown(onClose, { disabled: !isOpen }); // Only listen if modal is open

  if (!isOpen) return null;

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <p>Press ESC to close me!</p>
        <button onClick={onClose}>Close Manually</button>
      </div>
    </div>
  );
}

function App() {
  const [modalOpen, setModalOpen] = useState(false);
  return (
    <>
      <button onClick={() => setModalOpen(true)}>Open Modal</button>
      <MyModal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
    </>
  );
}
```

Provide your users with a swift and familiar way to say "Nope, I'm outta here!" 👋💨
npm package: @ryvora/react-use-is-hydrated
Description: 💧✅ Know when your React component is hydrated on the client. SSR mismatch be gone!
Latest version: 2.0.0

# use-is-hydrated 💧✅

Hello Hydration Hero! 🦸‍♀️

The `use-is-hydrated` hook is a utility to determine if your React component has finished "hydrating" on the client after being server-side rendered (SSR).

It's like a little sensor 🌡️ that tells you, "Okay, the JavaScript has fully taken over this part of the page!"

## Why is this useful?

Sometimes, you want to render something _only_ on the client-side, or behave differently after hydration to avoid SSR mismatches or to enable client-specific functionality (like browser APIs that aren't available during SSR).

- **Avoiding Mismatches:** Ensure UI consistency between server and client.
- **Client-Only Components:** Delay rendering of components that rely on browser environment.
- **Performance:** Defer non-critical client-side logic until after hydration.

## Basic Usage:

```tsx
import { useIsHydrated } from '@ryvora/react-use-is-hydrated'; // Hook name might vary
import React from 'react';

function MyComponent() {
  const isHydrated = useIsHydrated();

  if (!isHydrated) {
    // Render a placeholder or nothing during SSR and initial client render before hydration
    return <div>Loading client-specific content...</div>;
  }

  // This will only render after hydration on the client
  return (
    <div>
      <p>Welcome! The time is: {new Date().toLocaleTimeString()}</p>
      {/* Other client-side only components or logic */}
    </div>
  );
}

// Example of a component that should only render on the client
function ClientOnlyComponent() {
  const isHydrated = useIsHydrated();
  if (!isHydrated) return null;
  return <div>I only appear on the client! ✨</div>;
}
```

Keep your SSR smooth and your client-side enhancements well-timed! 🕰️🚀
npm package: @ryvora/react-use-layout-effect
Description: 📏📐 Synchronous layout effect hook for React. Measure and update before paint!
Latest version: 2.0.0

# use-layout-effect 📏📐

Hey DOM Measurer! 🧐

The `use-layout-effect` hook is a version of `useEffect` that fires **synchronously** after all DOM mutations. This is crucial when you need to read layout from the DOM (like getting an element's size or position) and then synchronously re-render based on that information before the browser has a chance to paint.

It's like `useEffect`, but it gets to cut in line 🚶‍♀️➡️🚶‍♂️ to do its work _before_ the user sees any visual updates!

## `useEffect` vs `useLayoutEffect`

- **`useEffect`**: Runs _asynchronously_ after render and after the browser has painted. Good for most side effects (data fetching, subscriptions).
- **`useLayoutEffect`**: Runs _synchronously_ after render but _before_ the browser paints. Good for DOM measurements that need to trigger a synchronous re-render.

**Warning:** Because `useLayoutEffect` is synchronous, it can block visual updates if you do too much work in it. Prefer `useEffect` when possible!

## When to Use It:

- Measuring DOM elements (e.g., getting `getBoundingClientRect()`).
- Manually changing the DOM (though this should be rare in React) and needing to ensure it's done before paint.
- Animating based on layout changes.

## Basic Usage:

```tsx
import React, { useState, useLayoutEffect, useRef } from 'react';

function MyComponent() {
  const [width, setWidth] = useState(0);
  const myDivRef = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    // This runs after the div is rendered but before the browser paints
    if (myDivRef.current) {
      console.log('Measuring width in useLayoutEffect');
      setWidth(myDivRef.current.offsetWidth);
    }
    // If setWidth here causes a re-render, it happens synchronously
  }, []); // Empty array means it runs once after initial layout

  return (
    <div>
      <div ref={myDivRef} style={{ width: '50%', border: '1px solid black' }}>
        I am a div!
      </div>
      <p>The div's calculated width is: {width}px</p>
    </div>
  );
}
```

Use it wisely to keep your UI snappy and avoid visual flickers! ✨💨
npm package: @ryvora/react-use-previous
Description: ⏪🕰️ Get the previous value of a prop or state in React. Time travel for your components!
Latest version: 2.0.0

# use-previous ⏪🕰️

Hello Time Traveler! ⏳

The `use-previous` hook is a handy little utility that lets you get the value of a prop or state from the _previous_ render.

It's like having a little rearview mirror 🚗🔍 for your component's data, allowing you to see what it _just was_.

## Why would you need this?

- Comparing current props/state to previous props/state to trigger effects or derive new state.
- Running cleanup logic in `useEffect` based on a previous value.
- Displaying changes or deltas.

## How it Works (Typically):

It uses a `useRef` to store the value after each render, and returns the ref's _current_ value (which is the value from the previous render cycle) _before_ updating the ref with the new current value.

## Basic Usage

```tsx
import { usePrevious } from '@ryvora/react-use-previous'; // Hook name might vary
import React, { useState, useEffect } from 'react';

function CountTracker() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);

  useEffect(() => {
    if (prevCount !== undefined && count > prevCount) {
      console.log(`Count increased from ${prevCount} to ${count}!`);
    } else if (prevCount !== undefined && count < prevCount) {
      console.log(`Count decreased from ${prevCount} to ${count}!`);
    }
  }, [count, prevCount]);

  return (
    <div>
      <p>Current Count: {count}</p>
      <p>Previous Count: {prevCount === undefined ? 'N/A' : prevCount}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}
```

Look back (but not in anger 😉) and make your components even smarter! ✨🧠
npm package: @ryvora/react-use-rect
Description: 📏🖼️ Get the bounding rect of a DOM element in React. Perfect for tooltips, popovers, and more!
Latest version: 2.0.0

# use-rect 📏🖼️

Hey there, Measurement Master! 📐

The `use-rect` hook is a convenient utility for getting the bounding rectangle (size and position) of a DOM element. It typically uses `ResizeObserver` (or a similar mechanism) to update the rectangle information whenever the element's size changes.

It's like having a live measuring tape 📏 and level for your components, always giving you their precise dimensions and location!

## Why is it useful?

- **Dynamic Layouts:** Adjust component behavior or style based on its current size or position.
- **Tooltips/Popovers:** Help position floating elements relative to their anchor.
- **Virtualization:** Calculate item sizes for virtualized lists.
- **Visualizations:** Get dimensions for drawing on a canvas or SVG.

## Basic Usage (Conceptual):

```tsx
import { useRect } from '@ryvora/react-use-rect'; // Hook name might vary
import React, { useRef } from 'react';

function MySizedComponent() {
  const myRef = useRef<HTMLDivElement>(null);
  const rect = useRect(myRef); // Pass the ref to the element you want to measure

  return (
    <div>
      <div
        ref={myRef}
        style={{
          width: '50%',
          padding: '20px',
          border: '1px solid blue',
          resize: 'both', // Make it resizable for demo
          overflow: 'auto',
        }}
      >
        Resize me!
      </div>
      {rect && (
        <pre>
          My Current Rect: Width: {rect.width}px Height: {rect.height}px Top: {rect.top}px Left:{' '}
          {rect.left}px
        </pre>
      )}
    </div>
  );
}
```

Get the exact measure of your components and build responsive UIs! ✨📊
npm package: @ryvora/react-use-size
Description: 📐✨ Get the width and height of a DOM element in React. Lightweight and efficient!
Latest version: 2.0.0

# use-size 📐✨

Hello, Dimension Detective! 🕵️‍♂️

The `use-size` hook is a specialized hook, often simpler than `use-rect`, focused specifically on getting the `width` and `height` of a DOM element. It usually employs a `ResizeObserver` to efficiently update these dimensions whenever the element resizes.

It's like having a dedicated width and height sensor for your HTML elements! 📏↔️↕️

## Why `use-size`?

- **Performance:** If you _only_ need width and height, `use-size` can be more lightweight than a full `use-rect` which might track position too.
- **Simplicity:** A more focused API for a common use case.
- **Responsive Components:** Easily make components adapt to their own size rather than just the viewport.

## Basic Usage:

```tsx
import { useSize } from '@ryvora/react-use-size'; // Hook name might vary
import React, { useRef } from 'react';

function MyResponsiveBox() {
  const boxRef = useRef<HTMLDivElement>(null);
  const size = useSize(boxRef);

  return (
    <div>
      <div
        ref={boxRef}
        style={{
          width: '75%',
          minHeight: '100px',
          border: '2px solid green',
          padding: '10px',
          resize: 'horizontal', // Make it resizable for demo
          overflow: 'auto',
        }}
      >
        Try resizing me horizontally!
        {size && (
          <p>
            Current Width: {size.width}px, Current Height: {size.height}px
          </p>
        )}
        {size && size.width < 300 && <p style={{ color: 'red' }}>I'm getting pretty small!</p>}
      </div>
    </div>
  );
}
```

Know the dimensions, rule the layout! 👑🖼️
npm package: @ryvora/react-visually-hidden
Description: 🙈👂 Visually hide content but keep it accessible to screen readers in React.
Latest version: 2.0.0

# Visually Hidden 🙈👂

Hey Accessibility Advocate! 🦸‍♂️

The `visually-hidden` module provides a component or styles to make content visually hidden but still accessible to screen readers and other assistive technologies.

It's like giving your content an invisibility cloak 🧥 that only screen readers can see through! This is crucial for providing context or labels that are not needed visually but are vital for non-visual users.

## Why Use It?

- **Accessibility (a11y):** Provide extra information for screen reader users without cluttering the visual UI.
  - Example: A "Close" button that is just an "X" icon visually can have visually hidden text like "Close dialog".
  - Example: Skip links for keyboard users.
- **SEO (Sometimes):** While not its primary purpose, hiding text this way is generally better than `display: none;` if the content is relevant.

## How It Works (Common CSS Techniques):

It applies a specific set of CSS properties to an element, such as:

```css
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px; /* To deal with borders when an element is focused */
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* For single line text */
  border: 0;
}
```

## Basic Usage:

```tsx
import { VisuallyHidden } from '@ryvora/react-visually-hidden'; // Component name might vary

function MyIconButton({ icon, label }) {
  return (
    <button>
      <span aria-hidden="true">{icon}</span>{' '}
      {/* Icon is hidden from screen readers if label is present */}
      <VisuallyHidden>{label}</VisuallyHidden>
    </button>
  );
}

function App() {
  return <MyIconButton icon="❌" label="Close notification" />;
}
```

Make your UIs inclusive and accessible to everyone! 🌍❤️
npm package: @ryvora/rect
Description: A utility library for rectangle and bounding box calculations in JavaScript/TypeScript.
Latest version: 2.0.0

# @ryvora/rect 📐

Hello Layout Enthusiast! 🖼️

The `@ryvora/rect` package provides utilities for observing and working with rectangles (DOMRects) in the browser. It's perfect for UI libraries, overlays, and any scenario where you need to track element positions and sizes.

It's like having a live measuring tape for your DOM elements!

## Why would you need this?

- Track element position and size for overlays, tooltips, or popups
- React to layout changes in real time
- Build custom UI components that depend on geometry

## How it Works (Typically):

It provides a function to observe an element's bounding rectangle and notifies you when it changes.

## Basic Usage

```ts
import { observeElementRect } from '@ryvora/rect';

const stopObserving = observeElementRect(element, (rect) => {
  console.log('Element rect changed:', rect);
});

// Later, to stop observing:
stopObserving();
```

Look at your UI from every angle and build smarter layouts! ✨

## License

MIT
npm package: @ryxel-ai/findata
Description: TypeScript SDK for the Ryxel Data B2B API
Latest version: 1.0.4

# 🚀 @ryxel-ai/findata

The official TypeScript SDK for the **Ryxel Data API** 📊.

## 🌟 Introduction

**Ryxel Data** provides institutional-grade financial datasets through a simple, RESTful API. This SDK is auto-generated from the OpenAPI specification and designed to give you programmatic access to high-quality financial data, including:

- 📑 **Insider Transactions**: Direct access to SEC Form 4 and Form 3 filings.
- 📦 **ETF Holdings**: Comprehensive visibility into exchange-traded fund portfolios.
- 💰 **Earnings & IPOs**: Up-to-date calendars and historical data.
- 🏛️ **Institutional Data**: Standardized datasets for large-scale analysis.

All data is sourced directly from official filings and standardized for easy consumption, allowing you to focus on building your application instead of cleaning data.

## 📚 Documentation

For detailed guides, endpoint references, and API documentation, please visit: **[https://data.ryxel.ai/docs](https://data.ryxel.ai/docs)**

## 📦 Installation

```bash
# Core SDK
npm install @ryxel-ai/findata @hey-api/client-fetch

# Optional: React Query support
npm install @tanstack/react-query
```

## ⚙️ Setup

Configure the API client with your API key (don't have one? [create an account at data.ryxel.ai](https://data.ryxel.ai)):

```typescript
import { client } from "@ryxel-ai/findata/client";

client.setConfig({
  baseUrl: "https://data.ryxel.ai/api",
  headers: {
    "x-api-key": "YOUR_API_KEY",
  },
});
```

## ⚛️ Usage with React Query

> **Warning:** Do not use the React Query integration (or any part of this SDK that embeds your API key) in public-facing frontends. Configuring the client with `x-api-key` in browser code exposes your key to anyone who inspects network requests or the page source. Use this SDK on the server side only (e.g. Next.js API routes, a backend proxy, or a server component), and keep your API key out of any bundle shipped to end users.

This requires `@tanstack/react-query` to be installed.

```tsx
import { useQuery } from "@tanstack/react-query";
import { getInsiderTransactionsOptions } from "@ryxel-ai/findata/react-query";

function InsiderTransactions() {
  const { data, isLoading } = useQuery(
    getInsiderTransactionsOptions({
      query: { ticker: "AAPL", limit: 100 },
    }),
  );

  if (isLoading) return <div>Loading...</div>;

  return (
    <ul>
      {data?.transactions.map((tx, i) => (
        <li key={i}>
          {tx.ownerName} — {tx.transactionCode} — ${tx.transactionValue}
        </li>
      ))}
    </ul>
  );
}
```

## 🛠️ Direct SDK Usage

```typescript
import { getInsiderTransactions } from "@ryxel-ai/findata/sdk";

const { data } = await getInsiderTransactions({
  query: { ticker: "TSLA", limit: 50 },
});

console.log(data?.transactions);
```
npm package: @ryxon/icons
Description: ryxon icons
Author: PeterPanY
Latest version: 1.6.0

# Ryxon Icons

## Install

```shell
# with npm
npm i @ryxon/icons

# with yarn
yarn add @ryxon/icons

# with pnpm
pnpm add @ryxon/icons

# with bun
bun add @ryxon/icons
```

## Document

- [Usage in Vue](https://peterpany.github.io/ryxon/zh/component/icon.html)
npm package: @ryxon/popperjs
Description: Pre-compiled popperjs core
Author: PeterPanY
Latest version: 1.0.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @ryxon/popperjs

@popperjs/core in commonjs format, added Object.assign polyfill.

## Install

```shell
# with npm
npm i @ryxon/popperjs

# with yarn
yarn add @ryxon/popperjs

# with pnpm
pnpm add @ryxon/popperjs
```

## Usage

see: https://popper.js.org/

## Refer

issue: https://github.com/PeterPanY/ryxon/issues/7626
npm package: @ryxon/touch-emulator
Description: Ryxon touch emulator
Author: PeterPanY
Latest version: 1.0.1

# Ryxon Touch Emulator

在桌面端上模拟移动端 touch 事件，实现方式来自于 [hammerjs/touchemulator](https://github.com/hammerjs/touchemulator).

## Install

```shell
# with npm
npm i @ryxon/touch-emulator

# with yarn
yarn add @ryxon/touch-emulator

# with pnpm
pnpm add @ryxon/touch-emulator
```

## 使用指南

直接在代码中引入模块即可，模块会自动完成初始化并生效

```js
import '@ryxon/touch-emulator';
```

## CDN 引入

```html
<script src="https://fastly.jsdelivr.net/npm/@ryxon/touch-emulator"></script>
```

## 禁用 touch 模拟

在标签上添加 `data-no-touch-simulate` 属性后，可以使这个标签（以及它的子元素）不触发 `touch` 模拟事件。

```html
<div data-no-touch-simulate />
```
npm package: @ryxon/use
Description: Ryxon Composition API
Author: PeterPanY
Latest version: 1.2.1

# Ryxon Use

Built-in composition APIs of Ryxon.

## Install

```shell
# with npm
npm i @ryxon/use

# with yarn
yarn add @ryxon/use

# with pnpm
pnpm add @ryxon/use

# with bun
bun add @ryxon/use
```
npm package: @ryze-digital/eslint-config-website
Description: Enforces a consistent JavaScript code style for our website projects
Author: RYZE Digital GmbH
Latest version: 1.0.1

# RYZE Digital ESLint Rules

## Install

```bash
npm i @ryze-digital/eslint-config-website --save-dev
```

## Usage

Add the following to your `eslint.config.js`:

```js
import config from '@ryze-digital/eslint-config-website';

export default config;
```

### Add custom rules for your project

If you are using jQuery (for example), you might want to allow `$` to be global.

```js
import config from '@ryze-digital/eslint-config-website';

export default [
    ...config,
    {
        languageOptions: {
            globals: {
                $: 'readonly'
            }
        }
    }
];
```
npm package: @ryze-digital/js-utilities
Description: Contains several helpers and utilities for JavaScript
Author: RYZE Digital GmbH
Latest version: 1.2.0

# RYZE Digital JavaScript Utilities

![Run linter(s) workflow status](https://github.com/ryze-digital/js-utilities/actions/workflows/run-lint.yml/badge.svg)

## Install

```sh
npm i @ryze-digital/js-utilities --save
```

## Usage

```js
import * as utils from '@ryze-digital/js-utilities';
```

## Example

```js
this.breakpointProvider = new utils.BreakpointProvider();

window.matchMedia(`(min-width: ${this.breakpointProvider.breakpoints.large})`).addListener(() => {
    // Code gets executed when the viewport is at least "large"
});

if (window.matchMedia(`(max-width: ${this.breakpointProvider.breakpoints.medium})`).matches) {
    // Condition evaluates to true, if the viewport is at most "medium"
}
```
npm package: @ryze-digital/prettier-config-website
Description: Enforces a consistent code style for our website projects
Author: RYZE Digital GmbH
Latest version: 1.0.1

# RYZE Digital Prettier Rules

## Install

```bash
npm i @ryze-digital/prettier-config-website --save-dev
```

## Usage

Add the following to your `prettier.config.js`:

```js
import config from '@ryze-digital/prettier-config-website';

export default config;
```
npm package: @ryze-digital/scss-utilities
Description: Contains several helpers and utilities for our Sass projects 
Author: RYZE Digital GmbH
Latest version: 1.0.1

# RYZE Digital Scss Utilities

![Run linter(s) workflow status](https://github.com/ryze-digital/scss-utilities/actions/workflows/run-lint.yml/badge.svg)

## Install

```sh
npm i @ryze-digital/scss-utilities --save
```

## Usage

```scss
@use "@ryze-digital/scss-utilities";
```
Use provided configuration mixin to configure your global project defaults.

```scss
@include scss-utilities.configure(...);
```

See [/src/_config.scss](src/_config.scss) for all possible configuration options.

## Example

Let's say you want your blockquotes to always use the quotation marks associated with the current language.

```scss
blockquote {
    @include scss-utilities.quotes();
}
```
npm package: @ryze-digital/simple-dropdown
Description: Creates a very basic CSS-only dropdown panel
Author: RYZE Digital GmbH
Latest version: 1.0.0

# RYZE Digital Simple Dropdown

![Run linter(s) workflow status](https://github.com/ryze-digital/simple-dropdown/actions/workflows/run-lint.yml/badge.svg)

## Install

```sh
npm i @ryze-digital/simple-dropdown --save
```

## Usage

### HTML

You can change the HTML to your needs if necessary, as long as you include the mixins (see Scss) correctly.

```html
<div class="simple-dropdown" tabindex="0">
    <button type="button">
        <span>Your button label</span>
    </button>
    <div class="panel">
        Your dropdown content
    </div>
</div>
```

### Scss

```scss
@use "@ryze-digital/simple-dropdown";
```

Use the provided `configure` mixin to define your dropdown defaults.

```scss
@include simple-dropdown.configure(...);
```

<details>
<summary>List of available configure options</summary>

| Option         | Type            | Default  | Description                                                               |
|----------------|-----------------|----------|---------------------------------------------------------------------------|
| icon           | Map             |          | Configure which icons from your icon font should be used                  |
| icon.indicator | String (Quoted) | `null`   | The UTF-8 character of the icon to help understand the button label       |
| icon.closed    | String (Quoted) | `null`   | The UTF-8 character of the icon to use when the dropdown panel is hidden  |
| icon.opened    | String (Quoted) | `null`   | The UTF-8 character of the icon to use when the dropdown panel is visible |
| icon.spacing   | Number          | `null`   | The gap between icons and button label                                    |
| direction      | String (Quoted) | `"down"` | Should the panel drop `"up"` or `"down"`                                  |

Check out [the actual configure mixin](src/styles/_config.scss) for better understanding.
</details>

There is a separate mixin for each element of simple dropdown so styles can be applied to any markup.

```scss
.simple-dropdown {
    @include simple-dropdown.container();
    .panel {
        @include simple-dropdown.panel();
    }
    button {
        @include simple-dropdown.button();
    }
}
```

## Demos

Checkout this repository and use the [/demos](/demos) folder as document root to see a running demo in the browser.

- [Basic use case](/demos/basic.html)
npm package: @ryze-digital/stylelint-config-website
Description: Enforces a consistent Sass code style for our website projects 
Author: RYZE Digital GmbH
Latest version: 1.0.0

# RYZE Digital Stylelint Rules

## Install

```bash
npm i @ryze-digital/stylelint-config-website --save-dev
```

## Usage

Add the following to your `stylelint.config.js`:

```js
import config from '@ryze-digital/stylelint-config-website';

export default config;
```
npm package: @ryzome-ai/ryzome-claude-plugin
Description: Ryzome plugin for Claude Code — canvas tools, context resources, skills, and agents
Latest version: 0.2.0

# @ryzome-ai/ryzome-claude-plugin

[Ryzome](https://ryzome.ai) plugin for [Claude Code](https://docs.anthropic.com/en/docs/claude-code). Adds canvas tools, context resources, skills, and a context retrieval agent.

## Install

In Claude Code:

```
/install-plugin @ryzome-ai/ryzome-claude-plugin
```

You'll be prompted for your Ryzome API key (stored securely in your system keychain). Get one at [ryzome.ai/api-key](https://ryzome.ai/api-key).

## What's Included

### MCP Tools (6)

| Tool | Description |
|------|-------------|
| `create_ryzome_canvas` | Create a canvas with explicitly defined nodes and edges |
| `create_ryzome_plan` | Create a canvas from sequential steps (auto-chained) |
| `create_ryzome_research` | Create a canvas with research findings branching from a topic |
| `get_ryzome_canvas` | Retrieve a canvas by ID with all nodes and edges |
| `list_ryzome_canvases` | List all accessible canvases |
| `upload_ryzome_image` | Upload an image from a URL to an existing canvas |

### MCP Resources

| URI | Description |
|-----|-------------|
| `ryzome://canvases` | JSON list of all canvas summaries |
| `ryzome://canvas/{id}` | Single canvas rendered as structured markdown |

### Skills

| Skill | Args | Description |
|-------|------|-------------|
| `/plan` | `goal` (required) | Break a goal into steps and create a plan canvas |
| `/research` | `topic` (required) | Organize findings on a topic into a research canvas |
| `/ryzome-status` | — | Check API connection and list recent canvases |

### Agent

**`ryzome-context`** — A lightweight (Haiku-powered) context retrieval agent that finds and summarizes canvas content. It has access to `list_ryzome_canvases` and `get_ryzome_canvas`.

### Hooks

**`SessionStart`** — Displays a status message confirming the Ryzome plugin is active and listing available skills.

## Configuration

The plugin uses Claude Code's `userConfig` system:

1. On install, you're prompted for `api_key` (marked as sensitive, stored in keychain)
2. Claude Code sets `PLUGIN_USER_CONFIG_API_KEY` in the MCP server's environment
3. The bundled MCP server (`@ryzome-ai/ryzome-mcp`) reads it via `RYZOME_API_KEY`

```
userConfig.api_key → PLUGIN_USER_CONFIG_API_KEY env var → ryzome-mcp server
```

## Architecture

This package ships no code — it's a static configuration bundle:

```
.claude-plugin/plugin.json   # Plugin manifest (name, scopes, userConfig)
.mcp.json                    # Bundled MCP server config (npx @ryzome-ai/ryzome-mcp)
skills/                      # /plan, /research, /ryzome-status
agents/                      # ryzome-context retrieval agent
hooks/                       # SessionStart greeting
```

The actual tool logic lives in [`@ryzome-ai/ryzome-mcp`](../ryzome-mcp), which is run via `npx` when Claude Code starts the MCP server.

## License

MIT
npm package: @ryzome-ai/ryzome-core
Description: Ryzome core library — shared client, graph builder, and tools
Latest version: 0.1.0

# @ryzome-ai/ryzome-core

Shared logic for Ryzome canvas integrations: API client, 6 canvas tools, graph builder, layout engine, and markdown formatter.

This package powers [`@ryzome-ai/ryzome-mcp`](../ryzome-mcp) and [`@ryzome-ai/openclaw-ryzome`](../openclaw-ryzome).

## Install

```bash
npm install @ryzome-ai/ryzome-core
```

## Exports

| Entry point | What it provides |
|-------------|-----------------|
| `@ryzome-ai/ryzome-core` | `parseConfig`, `RyzomeClient`, `RyzomeApiError`, `formatCanvasAsMarkdown`, `toolRegistry` |
| `@ryzome-ai/ryzome-core/config` | Config types and constants (`DEFAULT_RYZOME_API_URL`, `RYZOME_API_KEY_ENV_VARS`) |
| `@ryzome-ai/ryzome-core/tools` | Individual tool exports (names, schemas, execute functions) |
| `@ryzome-ai/ryzome-core/lib/ryzome-client` | `RyzomeClient` class and `RyzomeClientConfig` type |

## Tools

The `toolRegistry` array contains 6 ready-to-register tools:

| Tool name | Description |
|-----------|-------------|
| `create_ryzome_canvas` | Create a canvas with explicitly defined nodes and edges |
| `create_ryzome_plan` | Create a canvas from a plan — steps auto-chain in order, with optional branching via `dependsOn` |
| `create_ryzome_research` | Create a canvas displaying research findings branching from a root topic |
| `get_ryzome_canvas` | Retrieve a canvas by ID, including all nodes and edges |
| `list_ryzome_canvases` | List all canvases accessible to the current user |
| `upload_ryzome_image` | Upload an image from a URL to an existing canvas as an image node |

Each tool entry has `name`, `description`, `paramsSchema` (Zod), and an `execute` function.

## Usage

```typescript
import { parseConfig, RyzomeClient, toolRegistry } from "@ryzome-ai/ryzome-core";

// Resolve config from env vars
const config = parseConfig({});

// Use tools directly
const result = await toolRegistry[0].execute(
  { title: "My canvas", nodes: [], edges: [] },
  { apiKey: config.apiKey!, apiUrl: config.apiUrl, appUrl: config.appUrl }
);

// Or use the client directly
const client = new RyzomeClient({
  apiKey: config.apiKey!,
  apiUrl: config.apiUrl,
  appUrl: config.appUrl,
});
const canvases = await client.listCanvases();
```

## Configuration

Config is resolved from a config object or environment variables:

| Environment variable | Purpose |
|---------------------|---------|
| `RYZOME_OPENCLAW_API_KEY` | API key (highest priority) |
| `RYZOME_API_KEY` | API key (fallback) |
| `PLUGIN_USER_CONFIG_API_KEY` | API key (used by Claude Code plugin) |

Config values support `${ENV_VAR}` syntax for environment variable interpolation.

## License

MIT
npm package: @ryzome-ai/ryzome-mcp
Description: Ryzome MCP server — expose Ryzome canvas tools to Claude Code and other MCP clients
Latest version: 0.1.0

# @ryzome-ai/ryzome-mcp

MCP server that exposes [Ryzome](https://ryzome.ai) canvas tools and resources to Claude Code, Claude Desktop, and any MCP-compatible client.

## Quick Start

```bash
RYZOME_API_KEY=rz_... npx @ryzome-ai/ryzome-mcp
```

Get your API key at [ryzome.ai/api-key](https://ryzome.ai/api-key).

## MCP Client Configuration

Add to your `.mcp.json` or MCP client config:

```json
{
  "mcpServers": {
    "ryzome": {
      "command": "npx",
      "args": ["-y", "@ryzome-ai/ryzome-mcp"],
      "env": {
        "RYZOME_API_KEY": "rz_..."
      }
    }
  }
}
```

## Tools

| Tool | Description |
|------|-------------|
| `create_ryzome_canvas` | Create a canvas with explicitly defined nodes and edges |
| `create_ryzome_plan` | Create a canvas from sequential steps (auto-chained, with optional branching) |
| `create_ryzome_research` | Create a canvas with research findings branching from a root topic |
| `get_ryzome_canvas` | Retrieve a canvas by ID with all nodes and edges |
| `list_ryzome_canvases` | List all canvases accessible to the current user |
| `upload_ryzome_image` | Upload an image from a URL to an existing canvas |

## Resources

| URI | Type | Description |
|-----|------|-------------|
| `ryzome://canvases` | Static | JSON list of all canvas summaries (ID, name, description, URL) |
| `ryzome://canvas/{id}` | Dynamic | Single canvas rendered as structured markdown with nodes and connections |

The dynamic resource supports `list` — MCP clients can enumerate all available canvases.

## Environment Variables

| Variable | Purpose |
|----------|---------|
| `RYZOME_API_KEY` | API key (required) |
| `RYZOME_OPENCLAW_API_KEY` | API key (alternative) |
| `PLUGIN_USER_CONFIG_API_KEY` | API key (set automatically by Claude Code plugin) |

## Claude Code Plugin

For the full Claude Code experience (skills, agents, hooks, and this MCP server bundled together), install [`@ryzome-ai/ryzome-claude-plugin`](../ryzome-claude-plugin) instead.

## License

MIT
npm package: @rz0/static-map
Description: Render map tiles in a canvas, given a slippy map tile URL.
Author: Roman Zoller
Latest version: 0.1.1

# static-map

Render map tiles in a canvas, given a [slippy map tile URL](https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames).

## Demo

The [demo](https://rzoller.ch/static-map) renders 512x512px of [OpenStreetMap](https://www.openstreetmap.org/).

## Install

```
$ npm install @rz0/static-map
```

## Usage

```javascript
var canvas = document.createElement('canvas');
document.body.appendChild(canvas)
canvas.width = 512;
canvas.height = 512;

var url = 'https://example.com/{z}/{x}/{y}.png';
var lon = 7.438639;
var lat = 46.951083;
var zoom = 15;
var staticMap = StaticMap(url);
staticMap.getMap(canvas, lon, lat, zoom);
```

## See also

- [BigMap 2](http://bigmap.osmz.ru/)
- [leaflet-image](https://github.com/mapbox/leaflet-image)
npm package: @rzane/round-slider
Description: This is a circular range input implemented as a web component.
Latest version: 0.3.1

# @rzane/round-slider

This is a circular range input implemented as a web component.

[View the demo](https://rzane.github.io/round-slider/)

## Properties

- `value` - The value of the slider
- `min` - Lower limit of values
- `max` - Higher limit of values
- `step` - Step size of slider
- `arc` - Length in degrees of slider bar (default: 270)
- `rotate` - Rotate the slider by a number of degrees (default: 135)
- `disabled` - Boolean property disabling the slider (default: false)
- `aria-label` - Provides an accessible label

## Events

The slider dispatches two events

- `input` - Emitted as the value is changing
- `change` Emitted when the value changes

You can get the slider's value from the `event.target.value`.

## CSS styles

The following css variables can be used to change the styles:

- `--color` - color of the foreground
- `--bg-color` - color of background
- `--track-size` - controls the size of the track
- `--thumb-size` - controls the size of the thumb
- `--slop-size` - controls the size of the hit area
- `--clearance` - controls the spacing between the arc and the surrounding box

Custom styles can be applied to some of the elements within the slider using the `::part()` pseudo-element.

```css
round-slider::part(track) {
}
round-slider::part(progress) {
}
round-slider::part(thumb) {
}
```

## Prior Art

This package is a fork of [thomasloven/round-slider](https://github.com/thomasloven/round-slider), with a few differences.

- Clicking on the slider's progress immediately moves the handle to that point.
- It was difficult to select the min/max values, so I added some custom snapping logic.
- The slider should remain focused after dragging the slider.
- I wanted more flexibility with regard to styling.
- I removed support for functionality that I don't personally need.
npm package: @rzaniboni/gatsby-source-pluralsight
Description: A Gatsby source plugin for pulling data from your Pluralsight profile page.
Author: Osmond van Hemert
Latest version: 1.0.5

# gatsby-source-pluralsight

[![Travis](https://img.shields.io/travis/com/ovhemert/gatsby-source-pluralsight.svg?branch=master&logo=travis)](https://travis-ci.com/ovhemert/gatsby-source-pluralsight)
[![Codacy Badge](https://api.codacy.com/project/badge/Grade/5d55562b469f4d1086ac348a9986d203)](https://www.codacy.com/app/ovhemert/gatsby-source-pluralsight?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=ovhemert/gatsby-source-pluralsight&amp;utm_campaign=Badge_Grade)
[![Known Vulnerabilities](https://snyk.io/test/npm/gatsby-source-pluralsight/badge.svg)](https://snyk.io/test/npm/gatsby-source-pluralsight)
[![Coverage Status](https://coveralls.io/repos/github/ovhemert/gatsby-source-pluralsight/badge.svg)](https://coveralls.io/github/ovhemert/gatsby-source-pluralsight)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](http://standardjs.com/)

A Gatsby source plugin for pulling data from your Pluralsight profile page.

## Installation

With npm:

```bash
npm install --save gatsby-source-pluralsight
```

Or with Yarn:

```bash
yarn add gatsby-source-pluralsight
```

## Usage

In your `gatsby-config.js` file add:

```javascript
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-pluralsight',
      options: {
        username: 'your pluralsight username'
      }
    }
  ]
}
```

Then run `gatsby build && gatsby serve` or `gatsby develop` to create the source nodes.

If your project successfully created the nodes. You should be able to query them in the GraphiQL endpoint (`http://localhost:8000/___graphql`) of you site.

### Completed Courses

```javascript
{
  allPluralsightCourse {
    edges {
      node {
        courseId,
        courseName,
        title,
        duration,
        level,
        timeCompleted,
        authors {
          firstName
          lastName
          handle
          displayName
        }
      }
    }
  }
}
```

### Skills

```javascript
{
  allPluralsightSkill {
    edges {
      node {
        code
        type
        title
        score
        level
        percentile
        dateCompleted
        url
        thumbnailUrl
      }
    }
  }
}
```

## Maintainers

Osmond van Hemert
[![Github](https://img.shields.io/badge/-website.svg?style=social&logoColor=333&logo=github)](https://github.com/ovhemert)
[![Web](https://img.shields.io/badge/-website.svg?style=social&logoColor=333&logo=nextdoor)](https://ovhemert.dev)

## Contributing

If you would like to help out with some code, check the [details](./docs/CONTRIBUTING.md).

Not a coder, but still want to support? Have a look at the options available to [donate](https://ovhemert.dev/donate).

## License

Licensed under [MIT](./LICENSE).
npm package: @rzaniboni/starwars-names
Description: Manage list star-wars names
Author: Roberto Zaniboni
Latest version: 1.2.0

# starwars-names

Manage list star-wars names

[![Build Status](https://travis-ci.org/rzaniboni/starwars-names.svg?branch=master)](https://travis-ci.org/rzaniboni/starwars-names)

## Install

```sh
npm install rzaniboni/starwars-names --save
```

<a name="api"></a>

## API

- <a href="#random"><code>assets.<b>put()</b></code></a>
- <a href="#get"><code>assets.<b>get()</b></code></a>
- <a href="#createSchema"><code>assets.<b>createSchema()</b></code></a>
- <a href="#dropSchema"><code>assets.<b>dropSchema()</b></code></a>

---

<a name="assets"></a>

### buildAssets(connectionString)

The factory for the assets module, you can just pass through a
[pg](http:/npm.im/pg) connection string.

Example:

```js
var connString = "postgres://localhost/assets_tests";
var assets = require("@matteo.collina/assets-pg")(connString);
```