open-index/open-npm huggingface dataset:
npm package: @protostr/libcli
Description: Command-line argument parsing
Author: Daniel Meszaros
Latest version: 0.1.0

# @protostr/libcli

Command-line argument parsing

# Examples

```js
import { processArgv, stringOpt, booleanOpt } from "@protostr/libcli";

let gPathInstall = null;
let gIsProduction = true;
let gIsWatch = false;

const argHandlers = [
  stringOpt('install', 'Install built files into this directory', p => {
    gPathInstall = path.resolve(p);
  }),
  booleanOpt('dev', 'Disables minification and generates sourcemaps', p => { gIsProduction = !p; }),
  booleanOpt('watch', 'Watch mode', p => { gIsWatch = p; }),
];

const result = processArgv(argHandlers);
```

`stringOpt`, `booleanOpt` and `numberOpt` are shorthand for frequent kinds of parameters; you can write your own handlers if you need any custom functionality:

```js
import { processArgv, checkOrPrintHelp, isMissingParameter } from "@protostr/libcli";
let gPathInstall = null;
let gIsProduction = true;
let gIsWatch = false;

const argHandlers = [
  (arg, arrArgs, idxArg) => {
    if (!checkOrPrintHelp(arg, '--install', 'path', 'Install built files into this directory')) {
      return 'next';
    }

    if (isMissingParameter(idxArg, arrArgs)) return new Error('--install requires a parameter');
    gPathInstall = path.resolve(__dirname, arrArgs[idxArg + 1]);
    return idxArg + 2;
  },
  (arg) => {
      if (!checkOrPrintHelp(arg, '--dev', 'Disables minification and generates sourcemaps')) {
        return 'next';
      }
      gIsProduction = false;
  },
  (arg) => {
    if (!checkOrPrintHelp(arg, '--watch', 'Watch mode')) {
      return 'next';
    }
    gIsWatch = true;
  },
];

const result = processArgv(argHandlers);
```

`processArgv` takes the arguments from `process.argv.slice(2)` which is a Node-specific thing.
You can use any argument vector with `preprocessArgs` and `processArgs`:
```js
const res = processArgs(preprocessArgs(myArgv), argHandlers);
```

If you don't like the default argument format (`--flag` and `--key=value`) then you can write your own `preprocessArgs`-like function.
It only has to return an array of `[string] | [string, string]` values.
npm package: @prototyp-stockholm/nuxt-interpolation
Description: Port to nuxt 3/vue 3 of [nuxt-interpolation](https://github.com/daliborgogic/nuxt-interpolation) module.
Latest version: 1.0.5

# Nuxt 3 Interpolation Module

Port to nuxt 3/vue 3 of [nuxt-interpolation](https://github.com/daliborgogic/nuxt-interpolation) module.

Which is a:

[Nuxt](https://github.com/nuxt/nuxt.js/) module as directive for binding every link to catch the click event, and if
it's a relative link router will push. For improved security `rel="noopener"` will be added automatically if target
is `_blank`.

## Setup

- Add `@prototyp-stockholm/nuxt-interpolation` as dependency
- Add `@prototyp-stockholm/nuxt-interpolation` to modules section of `nuxt.config.js`

```js
{
  modules: [
    ['@prototyp-stockholm/nuxt-interpolation']
  ]
}
```

## Usage

```html
<div v-interpolation v-html="content"></div>
```

## Development

- Run `npm run dev:prepare` to generate type stubs.
- Use `npm run dev` to start [playground](./playground) in development mode.
npm package: @prototyp/react-language-switcher
Description: Set of components for language switching and route localisation
Author: Vlatko Vlahek
Latest version: 0.3.0

# react-language-switcher

`react-language-switcher` is a package that provides a set of components for handling the language switching logic in React applications, based on React >=16.8.0 and React Hooks.

Its main purpose is to provide a flexible and easy way of being able to switch a language inside your application, while staying very lean in terms of external dependencies and as unopinionated as possible in terms of how you should use the library or style its components.

However, this package does not intend to solve other specific localization or internationalization issues. For this purpose we suggest using `react-intl`.

That being said, we are building this as a modular system, and do consider adding integrations with other some other popular libraries like routers, through middleware components.

## Installation

To install the latest stable version:

_yarn_

```
yarn add @prototyp/react-language-switcher
```

_npm_

```
npm install @prototyp/react-language-switcher
```

## Usage

### Gist

The gist of using this plugin consists of two components. A Language provider that provides the language context and the ways of using it, and the Language Switcher component that allows you to style and use this logic.

```jsx
<LanguageProvider config={{ language: 'en', languageList: ['en', 'de', 'fr'] }}>
    <LanguageSwitcher />
</LanguageProvider>
```

### Detailed usage

You can read more about the package and how to use it in more complex scenarios at [our documentation](https://vlaja.github.io/react-language-switcher/?path=/docs/*).

## Reasoning

This package is a result of having to handle language switching logic often, but not being completely comfortable with other similar packages due to the following concerns:

-   lack of TypeScript support
-   default styling which needs to be overriden
-   opinionated thinking how stuff should be styled
-   lack of support for styled components or other CSS-in-JS patterns.
-   dependencies on other localisation libraries

## Dependencies

-   React >=16.8.0

## Key features

-   Very lightweight
-   Requires only React as peer dependency
-   Written in TypeScript
-   Unopinionated in terms of styling
-   Upcoming integrations through middleware
npm package: @prototypeberlin/cordova-plugin-crop
Description: Crop an image in a Cordova app with ratio
Latest version: 1.0.3

# cordova-plugin-crop-with-ratio

> Crop an image in a Cordova app


## Install

```
$ cordova plugin add --save @prototypeberlin/cordova-plugin-crop
```


## Usage

```js

let options = {
          quality: 75,
          widthRatio:1,
          heightRatio:1,          
          targetWidth:600,
          targetHeight:600
};

plugins.crop(function success () {

}, function fail () {

}, '/path/to/image', options)
```

or, if you are running on an environment that supports Promises
(Crosswalk, Android >= KitKat, iOS >= 8)

```js
plugins.crop.promise('/path/to/image', options)
.then(function success (newPath) {

})
.catch(function fail (err) {

})
```

## API

 * quality: Number

The resulting JPEG quality. default: 100

## Ionic / Typescript Example Angular 2 Service

<img src="screenshot-example.png" width="250" height="500">

This is an example service that uses ionic-native's built in camera and the cordova-plugin-crop to create a cropped version of the image and return the file path. 

```js
import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Camera, Crop } from 'ionic-native';

@Injectable()
export class CameraService {

  public options: any = {
        allowEdit: true,
        sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
        mediaType: Camera.MediaType.ALLMEDIA,
        destinationType: Camera.DestinationType.FILE_URI
  }
  
  constructor(public platform: Platform) {}

  // Return a promise to catch errors while loading image
  getMedia(): Promise<any> {
    // Get Image from ionic-native's built in camera plugin
    return Camera.getPicture(this.options)
      .then((fileUri) => {
        // Crop Image, on android this returns something like, '/storage/emulated/0/Android/...'
        // Only giving an android example as ionic-native camera has built in cropping ability
        if (this.platform.is('ios')) {
          return fileUri
        } else if (this.platform.is('android')) {
          // Modify fileUri format, may not always be necessary
          fileUri = 'file://' + fileUri;

          /* Using cordova-plugin-crop starts here */
          return Crop.crop(fileUri, { quality: 100 });
        }
      })
      .then((path) => {
        // path looks like 'file:///storage/emulated/0/Android/data/com.foo.bar/cache/1477008080626-cropped.jpg?1477008106566'
        console.log('Cropped Image Path!: ' + path);
        return path;
      })
  }
  
}  
```



### Libraries used

 * iOS: [PEPhotoCropEditor](https://github.com/kishikawakatsumi/PEPhotoCropEditor)
 * Android: [android-crop](https://github.com/jdamcd/android-crop)

## License

MIT © [Jeduan Cornejo](https://github.com/jeduan)
npm package: @prototypeberlin/passport-accountkit-basic-web
Description: Passport strategy for AccountKit (basic web flow)
Author: prototype.berlin
Latest version: 1.0.8
Deprecated: passport-accountkit-basic-web has been deprecated as Facebook will shut down AccountKit shortly

# passport-accountkit-basic-web

Attention: passport-accountkit-basic-web has been deprecated as Facebook will shut down AccountKit shortly.
npm package: @prototyper/core
Description: [![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT)
Author: fordring
Latest version: 0.1.3

# @prototyper/core

[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT)

prototyper编辑器内核，同时提供渲染功能。
npm package: @prototyperai/tools
Description: High-level tools for Prototyper Sync - React hooks, authentication, media handling, and text editing integrations
Latest version: 0.1.4

# `jazz-tools`

The base implementation for Prototyper Sync (see [prototyper.co](https://prototyper.co)), a framework for distributed state.

Provides a high-level API around the CoJSON protocol.

## Environments and bindings

- `jazz-tools/browser` (Vanilla JavaScript)
    - `jazz-react` (React apps)
- `jazz-tools/worker` (NodeJS or Bun server workers)
npm package: @prototyperco/bridge
Description: Yjs-powered Live Canvas server — real-time AI-to-browser design sessions via Hocuspocus WebSocket + REST API
Author: Protochase, Inc.
Latest version: 0.5.3

# @prototyperco/bridge

Yjs-powered Live Canvas server for real-time AI-to-browser design sessions. Provides a REST API for session management and spec operations, with a Hocuspocus WebSocket layer for live CRDT sync.

## Quick Start

```bash
npm install @prototyperco/bridge

# Run as standalone server
npx prototyper-bridge         # default port 4321
npx prototyper-bridge 8080    # custom port
```

## Programmatic Usage

```typescript
import { BridgeServer } from "@prototyperco/bridge";

const server = new BridgeServer({ port: 4321 });
const port = await server.start();
console.log(`Bridge running on port ${port}`);

// later
server.stop();
```

## API Endpoints

| Method   | Path                         | Description            |
| -------- | ---------------------------- | ---------------------- |
| `GET`    | `/health`                    | Health check           |
| `POST`   | `/api/sessions`              | Create a new session   |
| `GET`    | `/api/sessions`              | List all sessions      |
| `GET`    | `/api/sessions/:id`          | Get session metadata   |
| `GET`    | `/api/sessions/:id/state`    | Get full session state |
| `POST`   | `/api/sessions/:id/ops`      | Apply spec operations  |
| `POST`   | `/api/sessions/:id/presence` | Update agent presence  |
| `DELETE` | `/api/sessions/:id`          | Close/delete a session |
| `WS`     | `/ws`                        | Yjs WebSocket sync     |

## Architecture

The Bridge server runs a single `node:http` server that handles REST requests and upgrades WebSocket connections to a Hocuspocus Yjs backend. Design specs are stored as Yjs documents, enabling conflict-free real-time collaboration between AI agents and browser previews. Sessions are persisted to `~/.prototyper-sessions` by default.

## Exports

- `@prototyperco/bridge` -- `BridgeServer`, Yjs utilities, persistence helpers
- `@prototyperco/bridge/types` -- Type-only export (`Spec`, `UIElement`, `ThemeParams`, `SpecOp`, etc.)

## License

MIT
npm package: @prototyperco/bridge-client
Description: Zero-dependency HTTP client SDK for the Prototyper Live Canvas server
Author: Protochase, Inc.
Latest version: 0.5.3

# @prototyperco/bridge-client

Zero-dependency HTTP client SDK for the Prototyper Live Canvas server. Works in Node.js, Bun, Deno, and any environment with a global `fetch`.

## Install

```bash
npm install @prototyperco/bridge-client
```

## Usage

```typescript
import { createBridgeClient } from "@prototyperco/bridge-client";

const client = createBridgeClient({ baseUrl: "http://localhost:4321" });

// Create a session
const session = await client.createSession({
  name: "My Design",
  spec: {
    root: "card",
    elements: {
      card: { type: "Card", props: { className: "p-6" }, children: ["title"] },
      title: { type: "Heading", props: { level: 2, children: "Hello" } },
    },
  },
});
console.log(session.previewUrl);

// Apply operations
await client.applyOps(session.id, {
  ops: [{ op: "set_prop", key: "title", prop: "children", value: "Updated!" }],
});

// Read state back
const state = await client.getSession(session.id);
console.log(state.spec);

// Clean up
await client.closeSession(session.id);
```

## API Reference

### `createBridgeClient(options)`

Creates a client instance. Options:

- `baseUrl` (string, required) -- Base URL of the Bridge server
- `token` (string, optional) -- Auth token for future use

### Client Methods

| Method                                   | Description                           |
| ---------------------------------------- | ------------------------------------- |
| `createSession(input)`                   | Create a new design session           |
| `listSessions()`                         | List all active sessions              |
| `getSession(id)`                         | Get full session state (spec + theme) |
| `getSessionMeta(id)`                     | Get full session metadata             |
| `applyOps(sessionId, { ops, agentId? })` | Apply spec operations                 |
| `setPresence(sessionId, input)`          | Update agent presence/status          |
| `closeSession(sessionId)`                | Delete a session                      |
| `health()`                               | Server health check                   |

### Types

All types are exported from the package: `Spec`, `UIElement`, `ThemeParams`, `SpecOp`, `BridgeClient`, `BridgeClientOptions`, and all input/result interfaces.

## License

MIT
npm package: @prototyperco/cli
Description: Bun-only CLI for Prototyper UI — adds design tokens, utilities, and CSS to your project
Author: Protochase, Inc.
Latest version: 0.5.0

# @prototyperco/cli

CLI for [Prototyper UI](https://prototyper.ai) -- adds components, design tokens, and utilities to your project.

Requires Bun 1.1 or newer.

## Installation

```bash
bunx @prototyperco/cli
```

## Commands

### `init`

Initialize Prototyper UI in your project. Sets up design tokens, utilities, and Tailwind CSS configuration.

```bash
bunx @prototyperco/cli init
```

### `add <component...>`

Add components to your project by name.

```bash
bunx @prototyperco/cli add button dialog card
```

### `update <component...>`

Update previously installed components to the latest version.

```bash
bunx @prototyperco/cli update button
```

### `doctor`

Check your project configuration for common issues.

```bash
bunx @prototyperco/cli doctor
```

## Documentation

Full documentation at [prototyper.ai](https://prototyper.ai).

## License

MIT
npm package: @prototyperco/compose
Description: Streaming UI engine for AI-generated interfaces powered by Prototyper UI
Author: Protochase, Inc.
Latest version: 0.5.0

# @prototyperco/compose

Streaming UI engine for AI-generated interfaces powered by [Prototyper UI](https://prototyper.ai). Renders component trees from structured JSON, with real-time streaming from LLM providers.

## Installation

```bash
npm install @prototyperco/compose
```

## Quick Start

### Server (API Route)

```typescript
import { createComposeHandler } from "@prototyperco/compose/server";

export const POST = createComposeHandler({
  provider: "anthropic",
});
```

### Client (React)

```tsx
import { Compose } from "@prototyperco/compose/react";

export default function Page() {
  return <Compose endpoint="/api/stream-ui" />;
}
```

## Features

- Real-time streaming from Anthropic and OpenAI
- Component catalog with props validation
- JSON patch-based incremental updates
- Code generation from rendered UI
- Vercel AI SDK integration

## Documentation

Full documentation at [prototyper.ai](https://prototyper.ai).

## License

MIT
npm package: @prototyperco/machine-mode
Description: Installable machine mode runtime for Next.js App Router
Author: Protochase, Inc.
Latest version: 0.5.0

# @prototyperco/machine-mode

Structured JSON interface for LLM-driven UI setup with [Prototyper UI](https://prototyper.ai). Provides a machine-readable API for AI assistants to scaffold and configure projects.

## Installation

```bash
npm install @prototyperco/machine-mode
```

## Quick Start

```typescript
import { MachineMode } from "@prototyperco/machine-mode";

// Server-side: handle structured requests from LLMs
const handler = new MachineMode();
```

### Client Component

```tsx
import { MachineModePanel } from "@prototyperco/machine-mode/client";

export default function Page() {
  return <MachineModePanel />;
}
```

## Features

- Structured JSON interface for LLM interactions
- Next.js App Router compatible (client + server exports)
- Markdown rendering with syntax highlighting
- Installable runtime for any Next.js project

## Documentation

Full documentation at [prototyper.ai](https://prototyper.ai).

## License

MIT
npm package: @prototyperco/ui
Description: Composable, design-first React component library built on Base UI primitives
Author: Protochase, Inc.
Latest version: 0.5.0

# @prototyperco/ui

Composable, design-first React component library built on [Base UI](https://base-ui.com) primitives. 50+ accessible components with OKLCH design tokens, Tailwind CSS v4, and a shadcn-compatible copy-paste model.

## Installation

```bash
npm install @prototyperco/ui
```

Or use the CLI to add individual components:

```bash
bunx @prototyperco/cli init
bunx @prototyperco/cli add button dialog card
```

## Quick Start

```tsx
import { Button } from "@prototyperco/ui";

export function App() {
  return <Button variant="default">Click me</Button>;
}
```

## Features

- 50+ production-ready components
- Built on Base UI primitives (not Radix)
- OKLCH color system with automatic dark mode
- Tailwind CSS v4 with design tokens
- CVA variants for all components
- Compound component patterns
- Full TypeScript support

## Documentation

Full documentation and examples at [prototyper.ai](https://prototyper.ai).

## License

MIT
npm package: @prototypey/cli
Description: CLI tool for generating types from ATProto lexicon schemas
Author: tylersayshi
Latest version: 0.2.1

# @prototypey/cli

CLI tool for generating types from ATProto lexicon schemas.

## Installation

```bash
npm install -g @prototypey/cli
```

Or use directly with npx:

```bash
npx @prototypey/cli
```

## Commands

### `gen-emit`

Emit JSON lexicon schemas from authored TypeScript files.

**Usage:**

```bash
prototypey gen-emit <outdir> <sources...>
```

**Arguments:**

- `outdir` - Output directory for emitted JSON schema files
- `sources...` - One or more glob patterns matching TypeScript source files

**Example:**

```bash
prototypey gen-emit ./lexicons ./src/lexicons/**/*.ts
```

**What it does:**

- Scans TypeScript files for exported lexicon definitions
- Extracts the `.json` property from each lexicon
- Emits properly formatted JSON lexicon schema files
- Names output files by lexicon ID (e.g., `app.bsky.feed.post.json`)

## Workflow

The typical workflow combines both commands for bidirectional type safety:

1. **Author lexicons in TypeScript** using the `prototypey` library
2. **Emit to JSON** with `gen-emit` for runtime validation and API contracts

```bash
# Write your lexicons in TypeScript
# src/lexicons/app.bsky.actor.profile.ts

# Emit JSON schemas
prototypey gen-emit ./schemas ./src/lexicons/**/*.ts
```

## Requirements

- Node.js >= 20.19.0

## License

MIT
npm package: @protoutil/aip
Description: A starter for creating a TypeScript package.
Author: Author Name
Latest version: 0.3.1

# @protoutil/aip

TypeScript SDK for implementing [Google API Improvement Proposals](https://aip.dev/) (AIP). Most of the utilities in this library are TypeScript re-implementations of the [AIP Go](https://github.com/einride/aip-go) library.

## Install

This package has dependencies which require adding Buf as a registry in your package manager.

- For npm: `npm config set @buf:registry https://buf.build/gen/npm/v1/` or add `@buf:registry=https://buf.build/gen/npm/v1/` to your `.npmrc`
- For pnpm: `pnpm config set @buf:registry https://buf.build/gen/npm/v1/`
- For yarn: `yarn config set npmScopes.buf.npmRegistryServer https://buf.build/gen/npm/v1/`

See [here](https://buf.build/docs/bsr/generated-sdks/npm/) for more information.

After adding Buf as a registry, install the package:

```sh
npm install @protoutil/aip
```

## Sub-Modules

Each AIP is implemented as a separate sub-module with its own entry point:

| Sub-Module | Import Path | AIP |
|------------|-------------|-----|
| [Resource Names](src/resourcename/README.md) | `@protoutil/aip/resourcename` | [AIP-122](https://google.aip.dev/122) |
| [Order By](src/orderby/README.md) | `@protoutil/aip/orderby` | [AIP-132](https://google.aip.dev/132) |
| [Resource Freshness (ETag)](src/etag/README.md) | `@protoutil/aip/etag` | [AIP-154](https://google.aip.dev/154) |
| [Pagination](src/pagination/README.md) | `@protoutil/aip/pagination` | [AIP-158](https://google.aip.dev/158) |
| [Filtering](src/filtering/README.md) | `@protoutil/aip/filtering` | [AIP-160](https://google.aip.dev/160) |
| [Errors](src/errors/README.md) | `@protoutil/aip/errors` | [AIP-193](https://google.aip.dev/193) |
| [Field Behavior](src/fieldbehavior/README.md) | `@protoutil/aip/fieldbehavior` | [AIP-203](https://google.aip.dev/203) |

## Quick Examples

### Parsing a filter string

```typescript
import { parse, check, unparse } from "@protoutil/aip/filtering";

const parsed = parse('status = "active" AND rating > 3');
const { checkedExpr } = check(parsed);
const canonical = unparse(checkedExpr.expr!);
```

### Pagination

```typescript
import { parse } from "@protoutil/aip/pagination";

const pageToken = parse(RequestSchema, request);
const nextToken = pageToken.next(request.pageSize).toString();
```

### Resource names

```typescript
import { scan, matches } from "@protoutil/aip/resourcename";

const vars = scan("publishers/foo/books/bar", "publishers/{publisher}/books/{book}");
// { publisher: "foo", book: "bar" }

matches("shippers/{shipper}/sites/{site}", "shippers/1/sites/1"); // true
```

### Error handling

```typescript
import { NotFoundError } from "@protoutil/aip/errors";

throw new NotFoundError({
  message: "Book not found",
  errorInfo: { reason: "BOOK_NOT_FOUND", domain: "library.api" },
});
```