open-index/open-npm huggingface dataset:
npm package: @razorlabs/wallet-sdk
Description: <p align="center">   <a href="https://razorwallet.xyz">     <img width="480" src="/assets/logo.png"/>   </a> </p>
Latest version: 1.1.2

<p align="center">
  <a href="https://razorwallet.xyz">
    <img width="480" src="/assets/logo.png"/>
  </a>
</p>

# Razor Wallet SDK

<a href="https://github.com/aptos-labs/wallet-standard">
  <img src="https://badgen.net/badge/wallet-standard/supported/green" />
</a>

This repo aims at providing easy-to-use utilities for wallet interaction, which is designed in javascript OOP and platform / framework agnostic.
npm package: @razorloaf/constellation
Description: Making design systems pop since 2025—Constellation converts HEX colors to Alpha, OKLCH, and P3 spaces.
Author: Josh Hoy
Latest version: 1.0.3

# Constellation

**Making design systems pop since 2025—Constellation converts HEX colors to Alpha, OKLCH, and P3 spaces.**

## Installation

Learn how to install, import, and use at [mid.engineering/docs/constellation](https://mid.engineering/docs/constellation)


## Author

- Josh Hoy ([j-o.sh](https://j-o.sh))

### License

Licensed under the MIT License, Copyright (c) 2025 Josh Hoy

See [LICENSE](./LICENSE) for more information.
npm package: @razorloaf/tayer-icons
Description: Developer-friendly icons with accessibility and change-safe features.
Author: Josh Hoy, https://j-o.sh
Latest version: 0.1.1

# Tayer Icons

**Developer-friendly icons with accessibility and change-safe features built-in.**

## Installation

View our icons and how to install, import, and use them at [tayer-icons.com/installation](https://tayer-icons/installation).

## Author

- Josh Hoy ([j-o.sh](https://j-o.sh))

### License

Licensed under the MIT License, Copyright (c) 2025 Josh Hoy

See [LICENSE](./LICENSE) for more information.
npm package: @razorpay/blade
Description: The Design System that powers Razorpay
Latest version: 12.98.1

<br/>
<p align="center">
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/razorpay/blade/refs/heads/master/branding/blade-original-dark-mode.min.svg">
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/razorpay/blade/refs/heads/master/branding/blade-original.min.svg">
  <img width="450px" alt="Blade Design System Logo" src="https://raw.githubusercontent.com/razorpay/blade/refs/heads/master/branding/blade-original.min.svg">
</picture>
</p>

<br/>

<p align="center">
  <a href="https://npmjs.org/package/@razorpay/blade"><img alt="Blade Latest Version" src="https://img.shields.io/github/package-json/v/razorpay/blade?style=for-the-badge&labelColor=322&logo=npm&label=@razorpay/Blade&color=darkred&filename=packages%2Fblade%2Fpackage.json"></a> &nbsp;<a href="https://blade.razorpay.com/"><img alt="Documentation blade.razorpay.com" src="https://img.shields.io/badge/Documentation-blade.razorpay.com-0648EF?style=for-the-badge&labelColor=0012AD&logo=readthedocs&logoColor=eee"/></a> &nbsp;<a href="https://github.com/razorpay/blade/tree/master/CONTRIBUTING.md"><img alt="Discord Join Chat" src="https://img.shields.io/badge/Contributions-Open-333333?style=for-the-badge&logo=github&logoColor=ffffff&labelColor=111111"/></a></p>

<h1 aria-hidden="true"></h1>

<br/>

Blade is the Design System that powers [Razorpay](https://razorpay.com/).

## 🔗 Links

- [Docs](https://blade.razorpay.com)
- [Installation](https://blade.razorpay.com/?path=/docs/guides-installation--docs)
- [@razorpay/blade-old](https://github.com/razorpay/blade-old) (Deprecated, Private)

## ✨ Features

- Cross-Platform (Works Natively on [React Web and React Native](https://blade.razorpay.com/?path=/docs/guides-installation--docs))
- [White Labelling](https://blade.razorpay.com/?path=/docs/guides-theming-theme-playground--docs)
- [Accessible](https://github.com/razorpay/blade/blob/master/rfcs/2022-04-09-accessibility.md#manual-testing)
- Documented [RFCs](https://github.com/razorpay/blade/tree/master/rfcs) and [API Decisions](https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Alert/_decisions/decisions.md)

## 📝 License

Licensed under the [MIT License](https://github.com/razorpay/blade/blob/master/LICENSE.md).

<h1 aria-hidden="true"></h1>

<p align="center">Interested in working with us? Checkout our <a href="https://razorpay.com/jobs">Jobs Page</a> for open roles 🤗</p>
npm package: @razorpay/i18nify-react
Description: Welcome to i18nify-react, your new best friend for seamlessly managing i18n state in React applications! 🎉 The i18nify-react Context Provider is a simple and flexible solution for managing internationalization (i18n) state in React applications. This pro
Author: tarun khanna
Latest version: 4.0.12

# i18nify-react

Welcome to i18nify-react, your new best friend for seamlessly managing i18n state in React applications! 🎉 The i18nify-react Context Provider is a simple and flexible solution for managing internationalization (i18n) state in React applications. This provider utilizes the @razorpay/i18nify-js library to handle i18n state and exposes a React Context for efficient state management across the application.

## Features

- **I18nProvider:** A custom React Context provider that effortlessly spreads i18n state updates across your component tree.
- **useI18nContext Hook:** Fetch values exposed by the `I18nProvider` using this handy custom React hook.
- **Easy Integration:** Integrate i18n state management into your React app with style and ease.
- **Consistent State:** Ensure a single instance of `I18nProvider` at the topmost parent component for consistent i18n state handling.

## Installation

1. Install the `@razorpay/i18nify-js` package:

   ```bash
   npm install @razorpay/i18nify-js
   ```

2. Install the `@razorpay/i18nify-react` package:

   ```bash
   npm install @razorpay/i18nify-react
   ```

3. Import the `I18nProvider` and `useI18nContext` components into your project:

   ```javascript
   import { I18nProvider, useI18nContext } from '@razorpay/i18nify-react';
   ```

## Usage

### I18nProvider

Add the `I18nProvider` to the topmost parent component in your application to kickstart the i18n magic!🪄

#### Example:

```jsx
import React from 'react';
import { I18nProvider } from '@razorpay/i18nify-react';

const App = ({ data }) => {
  return (
    <I18nProvider initData={data}>
      <div>
        <h1>Server-Side Rendering</h1>
        {/* Your components go here */}
      </div>
    </I18nProvider>
  );
};

export default App;
```

### useI18nContext Hook

Leverage the `useI18nContext` hook to fetch values exposed by the `I18nProvider` deep down in your component tree. 🌳

#### Example:

```jsx
import React from 'react';
import { useI18nContext } from '@razorpay/i18nify-react';

const MyComponent = () => {
  const { i18nState, setI18nState } = useI18nContext();

  // Access and update i18n state as needed

  return <div>{/* Your component content */}</div>;
};

export default MyComponent;
```

## API Reference

### I18nProvider Props

- **children (required):** The components wrapped by the `I18nProvider`.
- **initData (optional):** Initial data to merge with the i18n state during initialization.

### useI18nContext Hook

- **Returns:** An object with properties `i18nState` and `setI18nState` for accessing and updating the i18n state.

Happy coding! 🚀🌈
npm package: @razorrisk/react-runtime-component-builder
Description: CLI tool to bundle React components into a runtime‐pluggable library using Vite
Latest version: 1.0.9

# @razor-webui/react-runtime-component-builder

> CLI tool to bundle React components into a runtime-pluggable library using Vite

## Features

- **Automatic discovery** of component entry files (`*.tsx`/`*.jsx`) in a folder
- **Vite-powered** library build for each component
- Outputs an ES module per component for runtime loading
- Configurable via CLI arguments

## Installation

Install globally to use the CLI anywhere:

```bash
npm install --location=global @razorrisk/react-runtime-component-builder
```

Or use via npx without installing:
```bash
npx @razorrisk/react-runtime-component-builder <components-folder> <output-folder>
```

## Usage
```bash
react-runtime-component-builder componentsRootFolder outputFolder
```
where componentsRootFolder is the path to your components directory (e.g. ./src/components) and outputFolder is the path to where you want to place the build components (e.g. ./dist/externals)

## Example

Assuming you have:

```css
my-app/
└── src/
    └── components/
        ├── Button.tsx
        └── Modal.jsx
```

Run:

```bash
npx @razorrisk/react-runtime-component-builder ./src/components ./dist/externals
```

Output will be placed in ./externals-dist (by default), containing:
```matematica
externals-dist/
├── Button.js
└── Modal.js

```
npm package: @razors/babel-plugin-vue-next-unwrap-ref
Description: Auto unwrap vue-next's ref variables to ref.value in both SFC and JSX!
Author: liujia02
Latest version: 0.0.3

# babel-plugin-vue-next-unwrap-ref

Auto unwrap vue-next's ref variables to ref.value in both SFC and JSX!

Example:

```typescript jsx
import {ref} from 'vue'
export default () {
  const isShow = ref(false)
  return (
    <div v-show={isShow}></div>
  )
}
```

You don't need to write isShow.value anymore!

## Install

install in npm

```javascript
npm install @razors/babel-plugin-vue-next-unwrap-ref
```
or in yarn

```javascript
yarn add @razors/babel-plugin-vue-next-unwrap-ref
```

change your babel config
```javascript
{
    "presets": [
      ["@babel/preset-env"],
    ],
    "plugins": [
      ["@razors/babel-plugin-vue-next-unwrap-ref"]
    ]
}
```

## Tips

* Ref values which are not in current .vue file will not be transformed.
npm package: @razors/create-hash
Description: create hashes for browserify
Latest version: 1.2.3

a forked package that support md4 for browser 

# create-hash

[![Build Status](https://travis-ci.org/crypto-browserify/createHash.svg)](https://travis-ci.org/crypto-browserify/createHash)


Node style hashes for use in the browser, with native hash functions in node.

API is the same as hashes in node:
```js
var createHash = require('create-hash')
var hash = createHash('sha224')
hash.update('synchronous write') // optional encoding parameter
hash.digest() // synchronously get result with optional encoding parameter

hash.write('write to it as a stream')
hash.end() // remember it's a stream
hash.read() // only if you ended it as a stream though
```

To get the JavaScript version even in node do `require('create-hash/browser')`
npm package: @razorsim/commit-companion
Description: AI commit messages from AI models
Author: Simone Colabufalo
Latest version: 1.1.1

# Commit Companion
![Showcase](showcase.gif)

This is a simple CLI tool that gets the git diff of the staged files and generates a commit message through one of the [supported models from Perplexity AI](https://docs.perplexity.ai/docs/model-cards).

Highly inspired by [AI Commits](https://github.com/Nutlope/aicommits), where I get the prompt for the commit message and the diff of the staged files.

## Installation
```bash
npm install -g @razorsim/commit-companion
```

## Usage
After the installation, you can use the command `commit-companion` inside a git repository with staged files.

Before the first usage, you need to run the `setup` command to configure your options. You'll be able to set a provider, the API key (if needed) and the model name.

As of now, every provider that implements the OpenAI API should work.

### Models

Example setup:
```bash
# Guided setup
commit-companion setup
# Using arguments
commit-companion setup -u <your endpoint URL> -k <your API KEY> -m <model name>
```

To generate the commit message:
```bash
commit-companion generate
```

Optionally, you can use the `--semantic` flag if you want to use the semantic commit message format.

```bash
# 
commit-companion generate --semantic
```

## Pitfalls
- The commit message is generated based on the diff of the staged files. If you have a lot of changes, the commit message might not be the best. I'm working on a better way to generate the commit message.


## Contributing
If you want to contribute, please open an issue or a pull request. I'm open to suggestions and improvements.

First of all, clone the repository and install the dependencies. The `.nvmrc` file points to the latest correct Node.js version:

```bash
nvm use # or fnm use
corepack install
pnpm install
```

Then, you can run the app in `watch` mode:
```bash
pnpm build:watch
```

You can use biome to lint/check/format the code:
```bash
pnpm biome:check
pnpm biome:format
pnpm biome:lint
```
npm package: @razorweb/razorwebcomponents
Description: A collection of Web Components built with Stencil.js
Latest version: 0.0.18

![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

[![](https://data.jsdelivr.com/v1/package/npm/@razorweb/razorwebcomponents/badge)](https://www.jsdelivr.com/package/npm/@razorweb/razorwebcomponents)

# A collection of Web Components
npm package: @razr9/steamwebapi
Description: > A simplified wrapper for the steam web api
Latest version: 1.2.0

# steamwebapi

> A simplified wrapper for the steam web api

This is a simple and lightweight wrapper for the steam web api. Created because the other options weren't simple enough for me.

## Documentation

### Installation

```
npm install https://github.com/DevNvll/steamwebapi.git
```

or

```
yarn add https://github.com/DevNvll/steamwebapi.git
```

### Usage

```javascript
const Steam = require('steamwebapi')
const api = new Steam(API_KEY_HERE)

const id = 76561198052893297 || 'cmdline' // You can use steamID64 or the vanity url

api.getPlayerSummary(id).then(data => {
  console.log(data)
})
```

### Methods

```javascript
resolveId(id) // resolves vanity url to steamID64
getNewsForApp(appid[,count = 3, maxLength = 300])
getGlobalAchievementPercentagesForApp(appid)
getGlobalStatsForGame(appid[,count = 1, achievements = []])
getPlayerSummary(id)
getOwnedGames(id [,include_free_games=false, include_appinfo=false])
getUserLevel(id)
getUserBadges(id)
getRecentlyPlayedGames(id)
getPlayerBans(id)
getPlayerAchievements(id, appid)
getUserStatsForGame(id, appid)
getFriendList(id)
isPlayingSharedGame(id, appid)
getSchemaForGame(appid)
getAppList()
getAppInfo(appid)
getNumberOfCurrentPlayers(appid)
```

More info: https://partner.steamgames.com/doc/webapi/

## License

MIT
npm package: @razroo/agents-extensions
Description: Extensions for the OpenAI Agents SDK
Author: OpenAI
Latest version: 0.0.13

# OpenAI Agents SDK Extensions

This package contains a collection of extension features for the OpenAI Agents SDK and is intended to be used alongside it.

## Installation

```bash
npm install @openai/agents @openai/agents-extensions
```

## License

MIT
npm package: @razroo/agents-openai
Description: The OpenAI Agents SDK is a lightweight yet powerful framework for building multi-agent workflows.
Author: OpenAI
Latest version: 0.0.13

# OpenAI Agents SDK

The OpenAI Agents SDK is a lightweight yet powerful framework for building multi-agent workflows.

## Installation

```bash
npm install @openai/agents
```

## License

MIT
npm package: @razroo/agents-realtime
Description: The OpenAI Agents SDK is a lightweight yet powerful framework for building multi-agent workflows. This package contains the logic for building realtime voice agents on the server or in the browser.
Author: OpenAI
Latest version: 0.0.13

# OpenAI Agents SDK

The OpenAI Agents SDK is a lightweight yet powerful framework for building multi-agent workflows.

## Installation

```bash
npm install @openai/agents
```

## License

MIT
npm package: @razroo/razroo-markdown-engine
Description: <p align="center">   <a href="https://www.razroo.com">     <img alt="Razroo Logo" src="https://assets.razroo.com/razroo_logo_8f8785be23.svg" width="200" />   </a> </p>
Author: Charlie Greenman
Latest version: 1.4.7

<p align="center">
  <a href="https://www.razroo.com">
    <img alt="Razroo Logo" src="https://assets.razroo.com/razroo_logo_8f8785be23.svg" width="200" />
  </a>
</p>

# Razroo Markdown Engine #
The Razroo Markdown Engine is Razroo's attempt towards making markdown something that is more automated 
and has more sophisticated features available by type setting languages such as LaTeX. We wanted it to be written in 
Markdown, and-also compile to Markdown. This makes it, so it can be used on multiple platforms. In addition, the 
Markdown Engine is sophisticated enough to where we can pull in data, similar to how data is pulled in using an API. 
This allows us to have a very sophisticated, pseudo-autonomous content engine.

## How It Came To Be ##
First and foremost, we worked with LaTeX for the, at the time, standalone Angular: The Full Gamut book. 

1. What we found is that LaTeX had an issue compiling at times. 
2. For certain technical folk who never used LaTeX before, we found that there was a tremendous learning curve. 
3. Adding LaTeX didn't allow us to modify anything. For Razroo which as an organization is very content heavy, 
it is important that we can modify the content ourselves. LaTeX uses C++, and we wanted to be able to use 
Typescript/Node.
4. LaTeX to web formats seemed like a real challenge, there had to be an easier way to do this. 

## Features of the Razroo Markdown Engine ##

### Inject Github Links ###
Allows Markdown to pull in github links from both internal and external repos. The Github links are then built into the 
`build` folder. 

For instance:
```
Sample content before. 

!()[https://github.com/facebook/react/blob/ad6f3d5c55a79e8a44798aad36118e73de3a64f8/packages/create-subscription/index.ts#L10-L12]

Sample content after.
```
turns into:

```
Sample content before. 

'use strict';

export * from './src/createSubscription';

Sample content after.
``` 

### Variables ###
```
In this {{format}}
```

will be 
```
In this chapter
```
For book builds, and
```
In this article
```
for article builds.

## Razroo Markdown Engine is an internal NPM repo 

Razroo uses Github Packages for internal NPM packages. In order to use Razroo's Github Packages/internal NPm repos you will have to run `npm login` and generate a personal access token. This will hook up your github username to the Razroo npm repo. If you have access to the respective npm repo, you 

https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-with-a-personal-access-token
npm package: @razroo/razroo-remark-embed-code
Description: Razroo Remark plugin for embedding code snippets from github permalinks.
Author: Charlie Greenman
Latest version: 2.0.1

# remark-embedded-code-snippets

[Remark](https://remark.js.org/) plugin for [embedding code snippets from github permalinks](https://github.blog/2017-08-15-introducing-embedded-code-snippets/).

## Usage

```sh
yarn add --dev @razroo/razroo-remark-embed-code
```

```javascript
import remark from 'remark';
import embeddedCodeSnippets from '@razroo/razroo-remark-embed-code';
import report from 'vfile-reporter';

remark()
  .use(embeddedCodeSnippets)
  .process(markdown, (err, file) => {
    console.log(String(file));
    console.error(report(err || file));
  });
```

### Example

#### Input

```markdown
![](https://github.com/jomaxx/remark-embedded-code-snippets/blob/78d8ec567422a9776beb2d48dd826189aed58267/prettier.config.js#L1)
```

#### Output

```js
module.exports = require('@spotify/web-scripts/config/prettier.config.js');
```
npm package: @razroo/razroo-remark-netlify
Description: Razroo Remark Netlify plugin
Author: Charlie Greenman
Latest version: 1.2.3

# razroo-remark-netlify
[Remark](https://remark.js.org/) plugin for [embedding code snippets from github permalinks](https://github.blog/2017-08-15-introducing-embedded-code-snippets/).

## Usage

```sh
yarn add --dev @razroo/razroo-remark-embed-code
```

```javascript
import remark from 'remark';
import embeddedCodeSnippets from '@razroo/razroo-remark-embed-code';
import report from 'vfile-reporter';

remark()
  .use(embeddedCodeSnippets)
  .process(markdown, (err, file) => {
    console.log(String(file));
    console.error(report(err || file));
  });
```

### Example

#### Input

```markdown
![](https://github.com/jomaxx/remark-embedded-code-snippets/blob/78d8ec567422a9776beb2d48dd826189aed58267/prettier.config.js#L1)
```

#### Output

```js
module.exports = require('@spotify/web-scripts/config/prettier.config.js');
```
npm package: @razroo/rz-cli
Description: `Razroo CLI` is a CLI that use natural language only to generate code
Author: Charlie Greenman
Latest version: 1.3.0

# Razroo RZ CLI

A powerful command-line interface (CLI) for accelerating your development workflow with Razroo. Built with TypeScript and Node.js, the RZ CLI provides a robust set of tools for managing Razroo projects, generating code, and streamlining your development process.

## Features

The RZ CLI comes packed with essential tools and features:

- **Project Generation**: Quickly scaffold new projects with best practices and configurations
- **Code Generation**: Generate components, services, and other code artifacts following Razroo standards
- **Project Management**: Easily manage your Razroo projects and dependencies
- **Interactive Experience**: User-friendly prompts and colorful terminal output
- **TypeScript Support**: Full TypeScript support for type-safe development
- **Modern Tooling**: Built with industry-standard tools and libraries

## Prerequisites

Before getting started, make sure you have:

- [Node.js](https://nodejs.org/) (v14 or higher)
- [npm](https://www.npmjs.com/) or [pnpm](https://pnpm.io/)

## Installation

Install the RZ CLI globally using npm: `npm install -g @razroo/rz-cli`
npm package: @razroo/textura-mcp
Description: MCP server for Textura — AI-powered layout analysis, validation, and auto-fix
Latest version: 0.2.1

# @razroo/textura-mcp

MCP server for Textura — gives AI agents layout vision. Compute exact pixel geometry, detect layout issues, validate responsive breakpoints, and auto-fix problems, all without a browser.

Works with **any framework** (React, Vue, Svelte, React Router, Tailwind, plain HTML). The AI agent translates component code into a framework-agnostic layout tree.

## Tools

### `compute_layout`
Compute exact pixel positions and sizes for a layout tree.

### `analyze_layout`
Find layout issues: text overflow, element overlap, small touch targets, cramped line heights, tight spacing.

### `validate_responsive`
Check a layout at multiple breakpoints (mobile/tablet/desktop/wide) in a single call. Returns per-breakpoint issues and pass/fail.

### `fix_layout`
Automatically fix detected issues: expand touch targets to 44px, increase cramped line heights, widen tight gaps, add flexShrink/flexWrap for overflow.

## Setup

### Claude Code

Add to your project's `.mcp.json` (or `~/.claude/settings.json` for global):

```json
{
  "mcpServers": {
    "textura": {
      "command": "npx",
      "args": ["-y", "@razroo/textura-mcp"]
    }
  }
}
```

### Codex (OpenAI)

```json
{
  "mcpServers": {
    "textura": {
      "command": "npx",
      "args": ["-y", "@razroo/textura-mcp"]
    }
  }
}
```

## How the AI Agent Uses It

The agent reads your component code (React, Vue, Tailwind, etc.) and translates the layout structure into a Textura tree:

```
// Your React component:
<div className="flex flex-col gap-4 p-6">
  <h1 className="text-2xl font-bold">Dashboard</h1>
  <p className="text-base">Welcome back</p>
</div>

// AI translates to Textura tree:
{
  "flexDirection": "column",
  "gap": 16,
  "padding": 24,
  "children": [
    { "text": "Dashboard", "font": "700 24px Inter", "lineHeight": 32 },
    { "text": "Welcome back", "font": "16px Inter", "lineHeight": 24 }
  ]
}
```

The MCP computes exact layout geometry and checks for issues — the AI agent then applies fixes back to your actual code.

## Building from Source

```sh
cd mcp
npm install
npm run build
```
npm package: @razroo/tyson
Description: TysonStarter
Author: Razroo
Latest version: 1.0.2

# tyson - Use Typescript in JSON

Tyson allows you to use TypeScript interfaces for JSON with enhanced features:

## Benefits
1. Re-use Typescript interfaces for JSON schemas.
2. Allows comments in JSON 
3. No need for key values to be strings 
4. Can use variables for JSON
5. Import all configs into a singular config

## Installation

```bash
# Install globally
npm install -g @razroo/tyson

# Or install locally in your project
npm install --save @razroo/tyson
```

## Usage

### Define a TypeScript interface

```typescript
// test.interface.ts
export interface TsonTest {
  title: string;
  position: number;
  type: string;
}
```

### Create a tyson file

```typescript
// test.tyson or test.tson
import { TsonTest } from './test.interface';

// Comments are allowed!
{: TsonTest
  title: "sample title",
  position: 0,
  type: "sample type", // Inline comments work too
} 
```

### Compile to JSON

```bash
# CLI usage
tyson test.tyson test.json

# With options
tyson --input test.tyson --output test.json --interface test.interface.ts --interface-name TsonTest
```

### Programmatic Usage

```typescript
import { compileTyson, parseTyson } from 'tyson';

// Compile a tyson file to JSON
compileTyson({
  inputFile: 'test.tyson',
  outputFile: 'test.json',
  interfaceFile: 'test.interface.ts',
  interfaceName: 'TsonTest'
});

// Or parse a tyson file and get the data
const data = parseTyson({
  inputFile: 'test.tyson',
  interfaceFile: 'test.interface.ts',
  interfaceName: 'TsonTest'
});
```

### Result

The compiled JSON will look like:

```json
{
  "title": "sample title",
  "position": 0,
  "type": "sample type"
}
```

## Features

- **Type Checking**: Validates your JSON against TypeScript interfaces
- **Comments**: Include comments in your JSON files that won't appear in the output
- **Unquoted Keys**: No need to quote object keys
- **TypeScript Integration**: Seamlessly work with your existing TypeScript codebase

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.