open-index/open-npm huggingface dataset:
npm package: @maltjoy/css
Description: Malt design system CSS framework for tokens
Author: kevin@malt.com
Latest version: 5.18.0

# @maltjoy/css 

This package contains a set of CSS utilities that implements most of [@maltjoy/themes](https://www.npmjs.com/package/@maltjoy/themes) tokens.

It allows to style more easily your elements without having to deal with stylesheets. 

**Available tokens modules:**

- colors
- fonts
- elevations (box-shadow)
- spacing
- radius


## Naming convention 

Basically, HTML classes have the same naming convention than the CSS custom property it implements: 

```css
.joy-color-neutral-30 {
    color: var(--joy-color-neutral-30);
}
```

```css
.joy-font-size-primary-400 {
    font-size: var(--joy-font-size-primary-400);
}
```
npm package: @maltjoy/icons
Description: Malt design system icons
Author: kevin@malt.com
Latest version: 5.18.0

# @maltjoy/icons 

Fonticon library used by `@maltjoy/core` and `@maltjoy/core-vue`.    

# Installation

Include the CSS file, in the way that better fits your need.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@maltjoy/icons/dist/joy-icons.css" />
```

Or : 

```
npm install @maltjoy/icons
```

```scss
@use '@maltjoy/icons/dist/joy-icons.css';
```
npm package: @maltjoy/themes
Description: Malt design system themes modules based on tokens
Author: kevin@malt.com
Latest version: 5.18.0

# @maltjoy/themes

This package gather all themes for Joy design system.
This includes a set of tokens in the form of css variables applied to `:root`.

## Customization

As each theme is a simple group of CSS custom properties, you can easily override a specific value if needed.

```css
:root {
    // ...
    --joy-color-neutral-60: #000;
}
```

## Tokens

This package includes all "Tokens" defined for Joy design system. 
You can find all of it on our [Zeroheight documentation](https://joy.malt.com/6bf479565/p/027b08-colors/b/266e61).

### Tokens types

- Colors
- Functional colors
- Elevations
- Border radius
- Spacing
- Transition (animation)
- Layers (z-index)
- Forms
- Typography (font-family, font-size, font-weight, line-height)

### Usage

This package is meant to be used with [@maltjoy/themes](https://www.npmjs.com/package/@maltjoy/tokens).

But if you need to fully customize tokens, you can create you own theme: 

```scss
@use './tokens/src/tokens' with (
    $joy-color-neutral-60: #000,
    $joy-font-size-primary-300: 9px,
    $joy-core-spacing-base: 3px,
    // and so on...
);

:root {
  // Call all the mixin in order to generate all CSS custom properties
  @include tokens.getPaletteProperties();
  @include tokens.getContextualPaletteProperties();
  @include tokens.getTextPaletteProperties();
  @include tokens.getFunctionalPaletteProperties();
  @include tokens.getSkeletonProperties();
  @include tokens.getOverlayProperties();
  @include tokens.getElevationsProperties();
  @include tokens.getFontsProperties();
  @include tokens.getRadiusProperties();
  @include tokens.getSpacingProperties();
  @include tokens.getAnimationsProperties();
  @include tokens.getZindexProperties();
  @include tokens.getFormsProperties();
}
```

All original modules are accessible from SCSS source files.
npm package: @maltose/http
Description: Yet another http library based on fetch.
Latest version: 0.2.0

# HTTP

[![Build Status](https://travis-ci.com/maltose-lab/http.svg?branch=master)](https://travis-ci.com/maltose-lab/http)
[![License](https://img.shields.io/github/license/maltose-lab/http.svg)](https://github.com/maltose-lab/http/blob/master/LICENSE)
[![Version](https://img.shields.io/npm/v/@maltose/http.svg)](https://www.npmjs.com/package/@maltose/http)

🔗 Yet another http library based on fetch.

## Installation

```sh
yarn add @maltose/http
```

## Usage

```js
import http, { createHTTPClient } from "@maltose/http";

const result = await http.get("/api/posts");

const api = createHTTPClient({
  middlewares: [
    next => (endpoint, options) =>
      next(process.env.API_ROOT + endpoint, options),
  ],
});
const result = await api.get("/posts");
```
npm package: @maltose/poem
Description: Yet another rich text editor based on React and ProseMirror.
Latest version: 0.2.0

# Poem

[![Build Status](https://travis-ci.com/maltose-lab/poem.svg?branch=master)](https://travis-ci.com/maltose-lab/poem)

📝 Yet another rich text editor based on [React] and [ProseMirror].

## Usage

```js
import { Editor } from "@maltose/poem";

const App = () => {
  return <Editor />;
};
```

## Stability

| Package      | Stability  |
| ------------ | ---------- |
| `core`       | Stable     |
| `plugins`    | Stable     |
| `- react`    | Stable     |
| `- uploader` | Stable     |
| `- basic`    | Stable     |
| `- divider`  | Stable     |
| `- image`    | Developing |
| `editor`     | Developing |

[react]: https://reactjs.org/
[prosemirror]: https://prosemirror.net/
npm package: @maltose/reset
Description: Reset mixins for everything.
Latest version: 0.1.0

# Reset

[![Build Status](https://travis-ci.com/maltose-lab/reset.svg?branch=master)](https://travis-ci.com/maltose-lab/reset)
[![License](https://img.shields.io/github/license/maltose-lab/reset.svg)](https://github.com/maltose-lab/reset/blob/master/LICENSE)
[![Version](https://img.shields.io/npm/v/@maltose/reset.svg)](https://www.npmjs.com/package/@maltose/reset)

🔄 Reset mixins for everything.

## Installation

```sh
yarn add @maltose/reset
```

## Usage

```scss
@import "@maltose/reset";

button {
  @include reset-button;
}
```
npm package: @malv/base
Description: Base framework implementation for Cloudflare Workers (backend).
Author: Ilias Nikolaidis Olsson
Latest version: 1.1.10

# @malv/base

Base framework implementation for Cloudflare Workers (backend).

## Purpose

Provides the core implementation of MALV capabilities for backend services running as Cloudflare Workers.

## Installation

```bash
yarn add @malv/base
```

## Exports

| Export | Description |
|--------|-------------|
| `./` | Main entry point |
| `./create-response` | AI response message creation with streaming |
| `./external-ai` | AI provider abstraction (Claude, OpenAI) |
| `./conversations` | Conversation management operations |
| `./objects` | Object storage CRUD operations |
| `./token` | Token signing implementation |
| `./crypto` | Encryption/decryption utilities |
| `./validate` | JSON schema validation |
| `./log` | Logging utilities |
| `./expression-resolver` | Tool expression resolution |

## Usage

```typescript
// AI provider
import { ExternalAI } from '@malv/base/external-ai';
const ai = new ExternalAI('anthropic', apiKey);

// Token signing
import { TokenReferenceImpl } from '@malv/base/token';
const tokenRef = new TokenReferenceImpl({ tokenServiceUrl, appId, appSecret });
const signedToken = await tokenRef.sign(payload, 'current');

// Conversations
import { Conversations } from '@malv/base/conversations';
const conversations = new Conversations(storage);
const conv = await conversations.create({ title: 'My Chat' });

// Objects
import { Objects } from '@malv/base/objects';
const objects = new Objects(storage, conversationId);
await objects.set('my-object', { type: 'custom', data: {} });
```

## Architecture

```
src/
├── frontware/     # High-level operations (conversations, objects, response creation)
├── middleware/    # Service integrations (AI, crypto, validation)
├── token/         # Token signing implementation
├── log/           # Logging utilities
└── universal/     # Shared logic (expression resolver)
```

## Dependencies

- `@malv/types` - Core type definitions
- `@anthropic-ai/sdk` - Claude AI integration
- `openai` - OpenAI integration

## License

MIT
npm package: @malv/base-web
Description: Browser-compatible implementations of MALV capabilities.
Author: Ilias Nikolaidis Olsson
Latest version: 1.1.10

# @malv/base-web

Browser-compatible implementations of MALV capabilities.

## Purpose

Provides storage implementations for web clients that need to interact with the MALV platform from the browser.

## Installation

```bash
yarn add @malv/base-web
```

## Exports

### Web Storage (`./storage`)
IndexedDB-based local storage for browser persistence:

```typescript
import { WebStorage } from '@malv/base-web/storage';

const storage = new WebStorage('my-db', '/chats/conversation-123/');

await storage.put('data.json', { foo: 'bar' });
const data = await storage.get('data.json');
const files = await storage.list('');
```

### Cloud Storage (`./cloud-storage`)
Proxied storage that calls the MALV storage service:

```typescript
import { CloudStorage } from '@malv/base-web/cloud-storage';

const storage = new CloudStorage({
  storageServiceUrl: 'http://localhost:59459/storage',
  token: signedToken
});

await storage.put('/private/myapp/data.json', { foo: 'bar' });
const data = await storage.get('/private/myapp/data.json');
```

## Key Differences from @malv/base

- No Node.js-specific APIs
- Browser-compatible crypto
- Proxied storage (calls storage service instead of direct R2 access)
- IndexedDB for local persistence

## Dependencies

- `@malv/types` - Core type definitions
- `@anthropic-ai/sdk` - Claude AI (browser build)
- `openai` - OpenAI (browser build)

## License

ISC
npm package: @malv/create-malv
Description: Scaffold new MALV projects
Latest version: 1.0.6

# create-malv

Project scaffolding CLI for MALV.

## Purpose

Bootstrap new MALV projects with best practices built-in, similar to `create-react-app`.

## Usage

```bash
npm create malv@latest my-project
# or
yarn create malv my-project
# or
npx create-malv my-project
```

## What It Does

1. Prompts for project name and location
2. Scaffolds project from templates (root, website, app)
3. Optionally installs dependencies
4. Shows next steps

## Templates

| Template | Description |
|----------|-------------|
| `root/` | Monorepo root with workspace configuration |
| `website/` | Web client with auth, conversations, and object rendering |
| `app/` | MALV app with tools, tokens, and Cloudflare Worker setup |

## After Scaffolding

```bash
cd my-project
yarn install        # if not done during setup
yarn dev:website --project my-project
```

This will:
- Authenticate you with Google OAuth
- Create/select your website
- Let you manage installed apps
- Start the development server

## Dependencies

- `inquirer` - Interactive prompts
- `chalk` - Colored terminal output
- `ora` - Loading spinners
- `fs-extra` - File system utilities

## License

MIT
npm package: @malv/dev
Description: Development tooling for MALV platform
Author: Ilias Nikolaidis Olsson
Latest version: 1.0.3

# @malv/dev

Development tooling for MALV platform

## Installation

```bash
npm install @malv/dev
```

## Usage

```typescript
import { ... } from '@malv/dev';
```

## Documentation

Full documentation: https://malv.dev/docs

API Reference: https://malv.dev/api/dev

## Example Apps

See example applications:
- [Weather App](https://github.com/iliasnolsson/malv-framework/tree/main/apps/weather-app)
- [Todo App](https://github.com/iliasnolsson/malv-framework/tree/main/apps/todo-app)

## Getting Started

```bash
# Install MALV CLI
npm install -g @malv/base-app

# Login to MALV Cloud
malv login

# Create your first app
npx create-malv-app my-app
cd my-app

# Start developing
npm run dev
```

## License

MIT © Ilias Nikolaidis Olsson

## Links

- **Documentation:** https://malv.dev
- **npm:** https://www.npmjs.com/package/@malv/dev
- **GitHub:** https://github.com/iliasnolsson/malv-framework
- **Discord:** https://discord.gg/malv
npm package: @malv/rendering-objects
Description: Provides build-time component generation (Vite plugin)
Author: Ilias Nikolaidis Olsson
Latest version: 1.2.0

# @malv/rendering-objects

Provides build-time component generation (Vite plugin)

## Package Structure

```
src/
├── index.ts                 # Main entry - browser hydration runtime
├── frontware/               # Build-time tooling (runs in Node/Vite)
│   └── components/
│       ├── MalvComponents.ts    # Vite plugin for component generation
│       ├── discoverApps.ts      # Discovers MALV apps from malv.json
│       ├── findObjects.ts       # Finds object definitions in apps
│       ├── generateComponent.ts # Generates web components from objects
│       ├── transformHtml.ts     # Transforms HTML for web components
│       └── index.ts             # Exports for ./components subpath
└── middleware/              # Shared utilities and types
    ├── types/               # TypeScript interfaces
    │   ├── AppInfo.ts
    │   ├── MalvComponentsOptions.ts
    │   ├── MalvConfig.ts
    │   ├── ObjectDefinition.ts
    │   ├── ObjectInfo.ts
    │   └── PrefixMode.ts
    └── utility/             # Helper functions
        ├── disableInteractiveElements.ts
        ├── findMalvJson.ts
        ├── findWorkspaceApp.ts
        ├── getOutputFilename.ts
        ├── injectDataObject.ts
        ├── resolveAppPath.ts
        └── toKebabCase.ts

test/
├── run.ts                   # Test runner
├── malv.json                # Test config
└── mock-app/                # Mock MALV app for testing
    ├── objects.json
    └── src/objects/         # Sample object definitions
```
npm package: @malv/runtime-web
Description: Browser runtime for hydrating MALV objects.
Author: Ilias Nikolaidis Olsson
Latest version: 1.2.0

# @malv/runtime-web

Browser runtime for hydrating MALV objects.

> **Note:** Component generation has been moved to `@malv/rendering-objects`. Use the `ObjectsRendering` plugin from that package for build-time component generation.

## Package Structure

```
src/
├── frontware/
│   └── index.ts             # Main entry - browser hydration runtime
└── middleware/
    ├── types/               # TypeScript interfaces
    │   ├── AppInfo.ts
    │   ├── MalvConfig.ts
    │   ├── ObjectDefinition.ts
    │   ├── ObjectInfo.ts
    │   └── PrefixMode.ts
    └── utility/             # Shared helper functions
        ├── discoverApps.ts
        ├── disableInteractiveElements.ts
        ├── findMalvJson.ts
        ├── findObjects.ts
        ├── findWorkspaceApp.ts
        ├── injectDataObject.ts
        ├── resolveAppPath.ts
        ├── toKebabCase.ts
        └── transformHtml.ts
```

## Usage

```typescript
// In your main JavaScript file
import '@malv/runtime-web';

// Or import specific functions
import { hydrateAll, hydrateObject } from '@malv/runtime-web';
```

## What It Does

1. Finds all `[data-object]` elements in the DOM
2. Loads `web.js` and method files for each object
3. Hydrates elements with live behavior
4. Attaches methods to elements for Alpine `$refs` access

## Related Packages

- `@malv/rendering` - HTML component rendering (Vite plugin)
- `@malv/rendering-objects` - Build-time component generation from MALV objects
npm package: @malven/scroll-position
Description: Tools for finding the relationship of an element to a scrollable viewport.
Author: Chris Malven
Latest version: 1.0.5

# Scroll Position

Tools for finding the relationship of an element to a scrollable viewport.

---

## Install

```sh
npm i @malven/scroll-position
```

## Dominant Element

Returns the element in a collection that is currently occupying the most visible spaces in the viewport.

```js
import { dominantElement } from '@malven/scroll-position';
const els = document.querySelectorAll('.foo');
const dominantEl = dominantElement(els);
```

Use the `minVisible` option to specify a minimum number of pixels that must be visible for an element for it to be considered:

```js
import { dominantElement } from '@malven/scroll-position';
const els = document.querySelectorAll('.foo');
const dominantEl = dominantElement(els, {
  minVisible: 100
});
```

## Closest to Center

Returns the element in a collection whose center is currently the closest to the center of the viewport.

```js
import { closestToCenter } from '@malven/scroll-position';
const els = document.querySelectorAll('.foo');
const closestEl = closestToCenter(els);
```

Use the `minVisible` option to specify a minimum number of pixels that must be visible for an element for it to be considered:

```js
import { closestToCenter } from '@malven/scroll-position';
const els = document.querySelectorAll('.foo');
const closestEl = closestToCenter(els, {
  minVisible: 100
});
```

Use the `maxDistance` option to specify a maximum distance an element can be from the center for it to be considered (defaults to `2000`):

```js
import { closestToCenter } from '@malven/scroll-position';
const els = document.querySelectorAll('.foo');
const closestEl = closestToCenter(els, {
  maxDistance: 1000
});
```

## Release

- Bump `version` in `package.json` appropriately.
- Create a new Github release identifying changes.
- A Github Action will automatically run tests and publish the update.

## Test

```sh
# Run tests once
npm test

# Build and run tests whenever files change
npm run dev
```
npm package: @malven/stylelint-config
Description: Malven Co. shareable config for stylelint
Author: cmalven
Latest version: 3.0.0

# Malven Co. Stylelint Config

> The Malven Co. shareable config for stylelint.

Use it as is or as a foundation for your own config.

## Installation

```bash
npm install stylelint @malven/stylelint-config --save-dev
```

## Usage

If you've installed `@malven/stylelint-config` locally within your project, just set your `stylelint` config to:

```json
{
  "extends": "@malven/stylelint-config"
}
```

### Extending the config

Simply add a `"rules"` key to your config, then add your overrides and additions there.

For example, to change the `at-rule-no-unknown` rule to use its `ignoreAtRules` option, turn off the `block-no-empty` rule, and add the `unit-whitelist` rule:

```json
{
  "extends": "@malven/stylelint-config",
  "rules": {
    "at-rule-no-unknown": [ true, {
      "ignoreAtRules": [
        "extends"
      ]
    }],
    "block-no-empty": null,
    "unit-whitelist": ["em", "rem", "s"]
  }
}
```
npm package: @malven/tailwind-toolkit
Description: ## Included Plugins
Latest version: 0.1.0

# Tailwind Toolkit

## Included Plugins

- [Responsive Type](./plugins/type)
- [Fluid Size](./plugins/fluid-size)
- [Dynamic Fluid](./plugins/fluid)

## Installation

```shell
# install via npm
npm i @malven/tailwind-toolkit -D
```

## Usage

Simply require the plugins or utilities in your `tailwindcss.config.js` file, and follow the usage instructions for each documented in its folder.

```js
// tailwind.config.js
plugins: [
  require('@malven/tailwind-toolkit/type'),
  require('@malven/tailwind-toolkit/fluid-size'),
  require('@malven/tailwind-toolkit/fluid'),
]
```

## Testing

Run tests:
```shell
npm test
```
npm package: @malykhinvi/generator-spa
Description: Yeoman generator for SPA build on top of React and redux using Ducks pattern.
Author: Vasily Malykhin
Latest version: 1.0.0

# generator-spa [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url] [![Coverage percentage][coveralls-image]][coveralls-url]
> Yeoman generator for React [application](https://github.com/malykhinvi/webpack-redux-boilerplate) build with redux, using Ducks pattern.

## Includes
* es6 (slightly modified [Airbnb code style guide](https://github.com/airbnb/javascript))
* react-router
* redux ([Ducks](https://github.com/erikras/ducks-modular-redux) pattern for organizing reducers, action types and action creators)
* redux-form
* stylus
* postcss (for now only autoprefixer)
* webpack config for optimized react application build
* babel 6 + react-transform-hmr

## Installation

First, install [Yeoman](http://yeoman.io) and generator-spa using [npm](https://www.npmjs.com/) (we assume you have pre-installed [node.js](https://nodejs.org/)).

```bash
npm install -g yo
npm install -g @malykhinvi/generator-spa
```

Then generate your new project:

```bash
yo @malykhinvi/spa
```

## Getting To Know Yeoman

Yeoman has a heart of gold. He&#39;s a person with feelings and opinions, but he&#39;s very easy to work with. If you think he&#39;s too opinionated, he can be easily convinced. Feel free to [learn more about him](http://yeoman.io/).

## License

MIT © [Vasily Malykhin]()


[npm-image]: https://badge.fury.io/js/%40malykhinvi%2Fgenerator-spa.svg
[npm-url]: https://www.npmjs.com/package/@malykhinvi/generator-spa
[travis-image]: https://travis-ci.org/malykhinvi/generator-spa.svg?branch=master
[travis-url]: https://travis-ci.org/malykhinvi/generator-spa
[daviddm-image]: https://david-dm.org/malykhinvi/generator-spa.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/malykhinvi/generator-spa
[coveralls-image]: https://coveralls.io/repos/malykhinvi/generator-spa/badge.svg?branch=master&service=github
[coveralls-url]: https://coveralls.io/github/malykhinvi/generator-spa?branch=master
npm package: @malykhinvi/imports-loader
Description: imports loader module for webpack (ok with sourcemaps)
Author: Vasily Malykhin @malykhinvi
Latest version: 0.6.5

# imports loader for webpack

This is the fork of original https://github.com/webpack/imports-loader repository. The only difference is that it fixes https://github.com/webpack/imports-loader/issues/5 issue.

## Installation

```
npm install @malykhinvi/imports-loader
```

## Usage

Given you have this file `example.js`

```javascript
$("img").doSomeAwesomeJqueryPluginStuff();
```

then you can inject the `$` variable into the module by configuring the imports-loader like this:

``` javascript
require("@malykhinvi/imports-loader?$=jquery!./example.js");
```

This simply prepends `var $ = require("jquery");` to `example.js`.

## License

MIT (http://www.opensource.org/licenses/mit-license.php)
npm package: @malynium/yemi
Description: Easily create Yemi articles.
Author: Jason Creviston
Latest version: 1.0.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

## A cli tool exclusively for blogs built on [Yemi](https://yemi.blog)

### Easily create new articles for your blog

#### Method 1 - install globally

`npm i -g @malynium/yemi`

Then from inside your blog's directory, run `yemi article <article-name>` and we'll scaffold out your article's markdown file, including Yemi's metadata.

#### Method 2 - no install

From inside your blog's directory, `npx @malynium/yemi article <article-name>`