open-index/open-npm huggingface dataset:
npm package: @scaife-viewer/common
Description: This package contains common components reused throughout Scaife Viewer.
Author: Eldarion
Latest version: 0.6.2

# Scaife Viewer Common

This package contains common components reused throughout Scaife Viewer.


## Theming

### `<Attribution />`

* `--sv-attribution-font-size` (`14px`)
* `--sv-attribution-text-color` (`#868e96` ![#868e96](https://via.placeholder.com/50x12/868e96/000000?text=+))

### `<EmptyMessage />`

* `--sv-empty-message-font-size` (`14px`)
* `--sv-empty-message-text-color` (`#495057` ![#495057](https://via.placeholder.com/50x12/495057/000000?text=+))

### `<ErrorMessage />`

* `--sv-error-message-text-color` (`#9b4436` ![#9b4436](https://via.placeholder.com/50x12/9b4436/000000?text=+))
* `--sv-error-message-border-color` (`#9b4436` ![#9b4436](https://via.placeholder.com/50x12/9b4436/000000?text=+))
* `--sv-error-message-background-color` (`#f0ccc6` ![#9b4436](https://via.placeholder.com/50x12/f0ccc6/000000?text=+))


### `<LoaderBall />`

* `--sv-loader-ball-color` (`#9b4436` ![#343a40](https://via.placeholder.com/50x12/343a40/000000?text=+))

### `<Paginator />`

* `--sv-paginator-link-text-color` (`#adb5bd` ![#adb5bd](https://via.placeholder.com/50x12/adb5bd/000000?text=+))
* `--sv-paginator-link-hover-text-color` (`#343a40` ![#343a40](https://via.placeholder.com/50x12/343a40/000000?text=+))
* `--sv-paginator-link-hover-background-color` (`#f8f9fa` ![#f8f9fa](https://via.placeholder.com/50x12/f8f9fa/000000?text=+))
* `--sv-paginator-disabled-text-color` (`#dee2e6` ![#dee2e6](https://via.placeholder.com/50x12/dee2e6/000000?text=+))

### `<CustomSelect />`

* `--sv-custom-select-options-border-color` (`#dee2e6` ![#dee2e6](https://via.placeholder.com/50x12/dee2e6/000000?text=+)
* `--sv-custom-select-options-background-color` (`#fff` ![#fff](https://via.placeholder.com/50x12/fff/000000?text=+)
* `--sv-custom-select-selected-border-color` (`#dee2e6` ![#dee2e6](https://via.placeholder.com/50x12/dee2e6/000000?text=+)
* `--sv-custom-select-selected-hover-chevron-text-color` (`#343a40` ![#343a40](https://via.placeholder.com/50x12/343a40/000000?text=+)
* `--sv-custom-select-selected-hover-chevron-text-color` (`#adb5bd` ![#adb5bd](https://via.placeholder.com/50x12/adb5bd/000000?text=+)
* `--sv-custom-select-option-hover-background-color` (`#f8f9fa` ![#f8f9fa](https://via.placeholder.com/50x12/f8f9fa/000000?text=+)
npm package: @scaife-viewer/vue-treant
Description: This is a wrapper around [Treant](http://fperucic.github.io/treant-js/) to make it easier to use within a Vue project.
Author: Eldarion
Latest version: 0.6.1

# vue-treant

This is a wrapper around [Treant](http://fperucic.github.io/treant-js/) to make
it easier to use within a Vue project.
npm package: @scaife-viewer/widget-commentary
Description: A widget that displays commentary annotations
Author: Eldarion
Latest version: 0.6.2

# widget-commentary

A widget that displays commentary annotations

## Configuration options

`$scaife.config.commentaryCollectionUrn`

Default value is `undefined`.

If set, the widget only queries for commentary annotations
within the specified collection.

`$scaife.config.commentaryWidgetLabel`

Default value is `'Commentary'`.
npm package: @scaife-viewer/widget-dictionary-entries
Description: A widget that displays dictionary entries.
Author: Eldarion
Latest version: 0.6.2

# widget-dictionary-entries

A widget that displays dictionary entries.

## Configuration options

`$scaife.config.dictionaryEntries.showCitationResolutionHint`:

Set to `false` to hide tooltip showing citation resolution message.

`$scaife.config.dictionaryEntries.resolveUsingNormalizedLemmas`:

Set to `true` to include `normalizeLemmas: true` when resolving entries by lemma.

`$scaife.config.dictionaryEntries.selectDictionaries`:

Set to `false` to disable selection of dictionaries.
npm package: @scaife-viewer/widget-metadata
Description: A widget that displays workpart metadata
Author: Eldarion
Latest version: 0.6.0

# widget-metadata

A widget that displays workpart metadata

## Configuration options

`$scaife.config.metadata.showEditor`:

Toggle if editor information is shown in the widget. Defaults to `true`.

`$scaife.config.metadata.showRepository`:

Toggle if repository information is shown in the widget. Defaults to `true`.
npm package: @scaife-viewer/widget-morphology
Description: A widget that queries the Morpheus API for morphology information
Author: Eldarion
Latest version: 0.6.2

# widget-morphology-

A widget that queries the Morpheus API for morphology information

## Configuration options

`this.$scaife.config.sv1`:

If set to `true`, displays instructions that text mode must be set to `highlight` to enable token selection.
npm package: @scaife-viewer/widget-passage-citation-toc
Description: A widget that shows the highest citable nodes for the current passage.
Author: Eldarion
Latest version: 0.6.2

# widget-passage-citation-toc

A widget that shows the highest citable nodes for the current passage.

## Configuration options

`$scaife.config.citationSchemeMap`:

Maps `PassageTextPart.kind` as returned from ATLAS to a human-friendly label.

e.g.

```
# default
book --> Book List

# with map
citationSchemeMap: {
    book: 'Books'
}
book --> Books
```
npm package: @scaife-viewer/widget-reader
Description: ## Configuration options
Author: Eldarion
Latest version: 0.6.2

# `widget-reader`

## Configuration options

`this.$scaife.config.rtlLanguages`:

A `Set` object containing languages to be displayed as right-to-left.

## Fonts

`--sv-widget-reader-text-font-family-rtl`

Assumes that [Amiri](https://fonts.google.com/specimen/Amiri?query=amiri) has been loaded into the
application

e.g. [55d43dc](https://github.com/scaife-viewer/frontend/commit/55d43dc764da76873b64a7b4050dd99ca9861048)
npm package: @scaife-viewer/widget-toc
Description: The tables of contents (TOC) widget displays TOC entries.
Author: Eldarion
Latest version: 0.6.2

# `widget-toc`

The tables of contents (TOC) widget displays TOC entries.

Each entry has a label and a URI.

The URI can resolve to:

- Another TOC (e.g., a list of lists)
- The URN of a CTS passage

Possible implementations include:
- Browse folios from the Venetus A using the canonical book / line references (e.g. [urn:cite:scaife-viewer:toc.iliad-folio-ref-root](https://github.com/scaife-viewer/beyond-translation-site/blob/main/backend/data/tocs/toc.demo-root.json))
- Browse CTS versions using card / para milestones extracted from TEI XML (e.g. [PerseusDL](https://github.com/scaife-viewer/beyond-translation-site/tree/feature/antigone-toc/backend/data/annotations/tocs/PerseusDL))
- Navigate between a commentary and edition in differing text groups (e.g. [Eustathius’ Commentary on the Odyssey](https://scholarlyeditions.brill.com/eooc/) and [Odyssey](https://beyond-translation.perseus.org/reader/urn:cts:greekLit:tlg0012.tlg002.perseus-grc2:1.1-1.10))

## Configuration options

`$scaife.config.showRelevantTOCs`

Default value is `true`.

If `true`, only show TOCs relevant to the current passage.

Set to `false` to show all TOCs.
npm package: @scalable/reactgen
Description: Code Generator for React components
Author: Tianzhen Lin
Latest version: 0.4.1

# @scalable/reactgen

TypeScript Code Generator for React components, Redux and more done right.

## Installation

* `npm install @scalable/reactgen --save-optional`

## Usage

Most of the commands should be executed in the folder where the target should be created.

### Stateless Functional Components

```bash
npx schematics @scalable/reactgen:sfc <ComponentName> [parameter]
```

#### Parameters
| Type | Name | Description | Default |
|------|:----:|------------:|--------:|
| *required* {string} | name | The name of the component. | none |
| {string} | path | The path to create the component | none |
| {boolean} | subfolder | Flag to indicate if a dir is created | true |


### Credit

This project is inspired by [schematics-react](https://www.npmjs.com/package/schematics-react)
npm package: @scalableminds/simple-chatroom
Description: ``` var chatroom = window.SimpleChatroom({     host: "http://localhost:5002",     title: "Chat with Mike",     container: document.querySelector(".container"),     welcomeMessage: "Hi, I am Mike. How may I help you?" }); ```
Latest version: 0.6.0
Deprecated: Please use @scalableminds/chatroom instead

# A Simple Chatroom component

```
var chatroom = window.SimpleChatroom({
    host: "http://localhost:5002",
    title: "Chat with Mike",
    container: document.querySelector(".container"),
    welcomeMessage: "Hi, I am Mike. How may I help you?"
});
```


## Development
Install Dependencies
```
yarn install
```

Build the Simple Chatroom
```
yarn build
// or
yarn watch
```

Open `index.html` in your browser.
npm package: @scalang/checksum
Description: Checksum-based caching and generation state management for Scalang
Latest version: 0.0.5

# @scalang/checksum

Checksum-based caching and generation state management for [Scalang](https://github.com/Code-Parth/scalang).

Provides SHA-256 checksums for files and content, tracks generation state to enable smart skipping of unchanged specs, and manages retranslation caches.

## Installation

```bash
npm install @scalang/checksum
```

## Usage

### Compute Checksums

```ts
import { contentChecksum, fileChecksum } from "@scalang/checksum";

const hash = contentChecksum("some content");
// "a1b2c3d4..."

const fileHash = fileChecksum("./openapi.json");
// "e5f6a7b8..." or "" if file doesn't exist
```

### Smart Generation Skipping

```ts
import {
  fileChecksum,
  loadState,
  canSkipGeneration,
  saveState,
} from "@scalang/checksum";

const sourceChecksum = fileChecksum("./openapi.json");
const configChecksum = fileChecksum("./.scalang-config");
const previousState = loadState("./public/specs");

const canSkip = canSkipGeneration(
  sourceChecksum,
  configChecksum,
  ["en", "fr", "de"],
  previousState,
  true // allSpecsExist
);

if (!canSkip) {
  // Run generation...

  saveState("./public/specs", {
    sourceChecksum,
    configChecksum,
    locales: ["en", "fr", "de"],
    fieldCount: 42,
    generatedAt: new Date().toISOString(),
  });
}
```

### Locale Checksums

```ts
import { computeLocaleChecksums } from "@scalang/checksum";

const checksums = computeLocaleChecksums("./public/specs", ["en", "fr", "de"]);
// { en: "a1b2...", fr: "c3d4...", de: "e5f6..." }
```

### Retranslation Cache

```ts
import { loadRetranslateCache, saveRetranslateCache } from "@scalang/checksum";

const cache = loadRetranslateCache("./public/specs");
// { "fr": ["info.title", "info.description"], ... }

cache["fr"].push("paths./pets.get.summary");
saveRetranslateCache("./public/specs", cache);
```

## API

### `contentChecksum(content: string): string`

Computes a SHA-256 hash. Normalizes JSON content for stable hashing across formatting changes.

### `fileChecksum(filePath: string): string`

Computes a SHA-256 hash of a file's content. Returns `""` if the file doesn't exist.

### `deepSortKeys(obj: unknown): unknown`

Recursively sorts object keys for stable JSON serialization.

### `computeLocaleChecksums(outputDir, locales): Record<string, string>`

Computes checksums for all locale spec files in the output directory.

### `loadState(outputDir): GenerationState | null`

Loads `.generation-state.json` from the output directory. Returns `null` if missing or corrupted.

### `saveState(outputDir, state): void`

Saves generation state to `.generation-state.json`.

### `canSkipGeneration(sourceChecksum, configChecksum, locales, previousState, allSpecsExist): boolean`

Returns `true` if all checksums match the previous state and all spec files exist.

### `loadRetranslateCache(outputDir): RetranslateCache`

Loads `.retranslate-cache.json` — maps locale codes to arrays of field paths confirmed identical to source.

### `saveRetranslateCache(outputDir, cache): void`

Saves the retranslation cache.

## License

MIT
npm package: @scalang/cli
Description: CLI for generating multilingual OpenAPI documentation with Scalang using Lingo.dev and Scalar
Latest version: 0.0.9

# @scalang/cli

CLI for generating multilingual OpenAPI specs and Scalar API reference sites with [Scalang](https://github.com/Code-Parth/scalang).

## Installation

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

Or use directly with `npx` / `bunx`:

```bash
npx @scalang/cli create
```

## Commands

### `create`

Scaffolds a new Scalang project with interactive prompts.

```bash
scalang create
```

Prompts for:

- Project name
- Source OpenAPI spec (file path or URL)
- Source locale
- Target locales
- Lingo.dev API key

Generates:

- `.scalang-config` configuration file
- Copies the source spec into the project
- Initializes a Next.js app from the Scalang template

### `generate`

Translates the source spec into all configured locales.

```bash
scalang generate
```

Options:
| Flag | Description |
|------|-------------|
| `--force` | Skip checksum cache and regenerate all specs |
| `--retranslate` | Re-translate fields detected as identical to source |

Features:

- **Smart caching** — Skips generation when source spec and config haven't changed
- **Retranslation detection** — Identifies translated values that are identical to the source (e.g., proper nouns) and optionally re-translates them
- **Progress logging** — Shows per-locale translation progress with field counts

### `verify`

Validates translated specs for completeness and correctness.

```bash
scalang verify
```

Checks:

- Structural integrity against source spec
- Tag names preserved (not translated)
- Operation IDs preserved
- `$ref` paths preserved
- English content detection in non-English specs

## Configuration

The CLI reads from `.scalang-config` (JSON) in the project root:

```json
{
  "spec": "./petstore.json",
  "sourceLocale": "en",
  "locales": ["fr", "de", "ja"],
  "outputDir": "./public/specs",
  "scalarConfig": {
    "theme": "default",
    "layout": "modern"
  },
  "lingoConfig": {
    "batchSize": 50
  },
  "translatableFields": [
    {
      "name": "info",
      "enabled": true,
      "fields": ["info.title", "info.description"]
    },
    {
      "name": "operations",
      "enabled": true,
      "fields": ["paths.*.*.summary", "paths.*.*.description"]
    }
  ]
}
```

See [`@scalang/schema`](https://www.npmjs.com/package/@scalang/schema) for the full configuration schema.

## Environment Variables

| Variable              | Description                                   |
| --------------------- | --------------------------------------------- |
| `LINGODOTDEV_API_KEY` | API key for the Lingo.dev translation service |

## License

MIT
npm package: @scalang/lingo
Description: Lingo.dev translation engine wrapper for Scalang
Latest version: 0.0.3

# @scalang/lingo

[Lingo.dev](https://lingo.dev) translation engine wrapper for [Scalang](https://github.com/Code-Parth/scalang).

Provides batch translation of key-value maps, single string translation, and API key validation using the Lingo.dev SDK.

## Installation

```bash
npm install @scalang/lingo
```

## Usage

### Translate a Map of Strings

```ts
import { translateMap } from "@scalang/lingo";

const translations = {
  "info.title": "Pet Store API",
  "info.description": "A sample API for managing pets",
  "paths./pets.get.summary": "List all pets",
};

const translated = await translateMap(translations, "en", "fr");
// {
//   "info.title": "API de la boutique pour animaux",
//   "info.description": "Un exemple d'API pour gérer les animaux",
//   "paths./pets.get.summary": "Lister tous les animaux"
// }
```

### Translate a Single String

```ts
import { translateText } from "@scalang/lingo";

const text = await translateText("Hello world", "en", "fr");
// "Bonjour le monde"
```

### Validate API Key

```ts
import { validateApiKey } from "@scalang/lingo";

const isValid = await validateApiKey("your-api-key");
```

### Batch Size Control

```ts
const translated = await translateMap(translations, "en", "fr", 100);
// Processes in batches of 100 key-value pairs
```

## Environment Variables

| Variable              | Description                                   |
| --------------------- | --------------------------------------------- |
| `LINGODOTDEV_API_KEY` | API key for the Lingo.dev translation service |

The API key can also be passed directly to `getEngine(apiKey)`.

## API

### `translateMap(translations, sourceLocale, targetLocale, batchSize?): Promise<Record<string, string>>`

Translates a key-value map in batches. Default batch size is 50. Logs progress for each batch.

### `translateText(text, sourceLocale, targetLocale): Promise<string>`

Translates a single text string.

### `getEngine(apiKey?): LingoDotDevEngine`

Gets or creates a Lingo.dev SDK engine instance. Uses the provided API key or falls back to `LINGODOTDEV_API_KEY` env var.

### `validateApiKey(apiKey): Promise<boolean>`

Tests if an API key is valid by performing a test translation.

## License

MIT
npm package: @scalang/schema
Description: Configuration schema, types, and validation for Scalang with Lingo.dev and Scalar support
Latest version: 0.0.5

# @scalang/schema

Configuration schema and types for Scalang CLI — template generation, verification, and localization.

## Installation

```bash
bun add @scalang/schema
# or
npm install @scalang/schema
```

## Usage

### TypeScript types

```ts
import type { ScalangConfig, TranslatableFieldGroup } from "@scalang/schema";
```

### Validation

```ts
import { validateConfig, assertValidConfig } from "@scalang/schema";

const result = validateConfig(config);
if (result.valid) {
  console.log(result.data);
} else {
  console.error(result.errors);
}

// Or throw on invalid
assertValidConfig(config);
```

### Constants

```ts
import {
  SUPPORTED_LOCALES,
  LINGO_LOCALE_CODES_SHORT,
  LINGO_LOCALE_CODES_FULL,
  SCALAR_THEMES,
  SCALAR_LAYOUTS,
  SCALAR_DOCUMENT_DOWNLOAD_TYPES,
  SCALAR_OPERATION_TITLE_SOURCES,
  SCALAR_SHOW_DEVELOPER_TOOLS,
  DEFAULT_TRANSLATABLE_FIELDS,
  DEFAULT_LINGO_CONFIG,
} from "@scalang/schema";
```

### Scalar types

```ts
import type {
  ApiReferenceConfiguration,
  ApiReferenceConfigurationWithSource,
  ApiReferenceConfigurationWithMultipleSources,
  AnyApiReferenceConfiguration,
} from "@scalang/schema";
```

### Lingo.dev compatibility

Locale fields (`sourceLocale`, `targetLocales`, `defaultLocale`) use BCP 47 format and are validated via `@lingo.dev/_locales`. The schema aligns with `@lingo.dev/_spec`:

- **Locale codes**: Use `LINGO_LOCALE_CODES_SHORT` or `LINGO_LOCALE_CODES_FULL` from `@lingo.dev/_spec`
- **Validation**: `validateConfig` uses `isValidLocale` from `@lingo.dev/_locales`
- **LingoLocaleConfig**: Maps to `localeSchema` (`source` + `targets`) for interoperability

```ts
import {
  LINGO_LOCALE_CODES_SHORT,
  LINGO_LOCALE_CODES_FULL,
  SUPPORTED_LOCALES,
} from "@scalang/schema";
import type {
  LocaleCode,
  LocaleCodeShort,
  LingoLocaleConfig,
} from "@scalang/schema";
```

## Schema reference

To enable editor intellisense and validation for your config file, add `$schema`:

**Hosted (when deployed):**

```json
{
  "$schema": "https://scalang.codeparth.dev/api/schema",
  "source": "./specs/openapi.json",
  "sourceLocale": "en",
  "targetLocales": ["fr", "de"],
  "defaultLocale": "en",
  "translatableFields": [
    { "name": "info", "enabled": true, "fields": ["info.title"] }
  ]
}
```

**Local package:**

```json
"$schema": "./node_modules/@scalang/schema/schema.json"
```

**Programmatic:**

```ts
import { schema } from "@scalang/schema";
```

## Testing

```bash
bun test  # from repo root, runs all tests including API tests
```

API tests hit `https://scalang.codeparth.dev` by default. To run against localhost:

```bash
SCALANG_API_URL=http://localhost:3000 bun test
```
npm package: @scalar-lab/bitcoin-vault
Description: ``` bun i && bun link ```
Latest version: 0.0.35

# How to install this package

```
bun i && bun link
```

Then add `@scalar/bitcoin-vault` to your project's dependencies.
```json
"dependencies": {
  "@scalar/bitcoin-vault": "link:@scalar/bitcoin-vault"
}
```

## References

1. https://dev.to/eunovo/a-guide-to-creating-taproot-scripts-with-bitcoinjs-lib-4oph
2. https://github.com/Eunovo/taproot-with-bitcoinjs
3. https://dev.to/eunovo/unlocking-the-power-of-p2wsh-a-step-by-step-guide-to-creating-and-spending-coins-with-bitcoin-scripts-using-bitcoinjs-lib-a7o
4. https://bitcoin.stackexchange.com/questions/119901/witness-program-hash-mismatch-code-26-when-broadcasting-a-transaction
npm package: @scalar/agent
Description: Scalar Agent SDK
Author: Scalar
Latest version: 0.3.1

# Scalar Agent SDK

Connect your AI agent to Scalar's OpenAPI MCP servers. Provides native integrations for the Vercel AI SDK, OpenAI Agents SDK, and Anthropic Claude Agent SDK.

## Installation

```bash
npm i @scalar/agent
```

```bash
pnpm i @scalar/agent
```

```bash
bun i @scalar/agent
```

## Setup

```ts
import { agentScalar } from '@scalar/agent'

const scalar = agentScalar({
  token: 'your-personal-token',
})

const installation = await scalar.installation('your-installation-id')
```

## Providers

### Vercel AI SDK

Uses `@ai-sdk/mcp` natively. Returns a tool set ready for `generateText` / `streamText`.

```ts
import { agentScalar } from '@scalar/agent'
import { generateText, stepCountIs } from 'ai'

const scalar = agentScalar({
  token: 'your-personal-token',
})

const installation = await scalar.installation('your-installation-id')

const tools = await installation.createVercelAITools()

const { text } = await generateText({
  model,
  tools,
  stopWhen: stepCountIs(5),
  prompt: 'How do I create a planet?',
})
```

### OpenAI Agents SDK

Returns options for `MCPServerStreamableHttp` from `@openai/agents`. The agent runtime handles tool discovery and execution natively.

```ts
import { agentScalar } from '@scalar/agent'
import { Agent, MCPServerStreamableHttp, run } from '@openai/agents'

const scalar = agentScalar({
  token: 'your-token',
})

const installation = await scalar.installation('your-installation-id')

const server = new MCPServerStreamableHttp(installation.createOpenAIMCP())
await server.connect()

const agent = new Agent({
  name: 'api-agent',
  mcpServers: [server],
})

const result = await run(
  agent,
  'Which APIs are available that let me create a planet?',
)

await server.close()
```

### Anthropic Claude Agent SDK

Returns an MCP server configuration for `@anthropic-ai/claude-agent-sdk`.

```ts
import { agentScalar } from '@scalar/agent'
import { query } from '@anthropic-ai/claude-agent-sdk'

const scalar = agentScalar({
  token: 'your-token',
})

const installation = await scalar.installation('your-installation-id')

for await (const message of query({
  prompt: 'Which APIs are available that let me create a planet?',
  options: {
    mcpServers: {
      scalar: installation.createAnthropicMCP(),
    },
    allowedTools: ['mcp__scalar__*'],
  },
})) {
  if ('result' in message) console.log(message.result)
}
```

## Configuration

| Option    | Type     | Description                                                           |
| --------- | -------- | --------------------------------------------------------------------- |
| `token`   | `string` | Your Scalar Personal Token used to authenticate requests to your MCP  |
| `baseUrl` | `string` | Base URL of the Scalar MCP server. Defaults to the Scalar environment |
npm package: @scalar/api-client-modal
Description: A modal wrapper around the API Client
Author: Scalar
Latest version: 0.0.16

# Scalar Draggable component

[![Version](https://img.shields.io/npm/v/%40scalar/api-client-modal)](https://www.npmjs.com/package/@scalar/api-client-modal)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/api-client-modal)](https://www.npmjs.com/package/@scalar/api-client-modal)
[![License](https://img.shields.io/npm/l/%40scalar%2Fapi-client-modal)](https://www.npmjs.com/package/@scalar/api-client-modal)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/scalar)

## Installation

```bash
npm install @scalar/api-client-modal
```

## Usage

```ts
import { createScalarApiClient } from '@/api-client-modal'

// Initialize
const { open } = await createScalarApiClient(document.getElementById('root'), {
  spec: {
    url: 'https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/latest.json',
  },
})

// Open the API client right-away
open()

// Or: Open a specific operation
// open({
//   method: 'GET',
//   path: '/me',
// })
```

You can find this example in the [playground folder](https://github.com/scalar/scalar/tree/main/packages/api-client-modal/playground).
npm package: @scalar/api-client-proxy
Description: an api request proxy based on express
Author: Scalar
Latest version: 0.7.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Scalar API Client Proxy

[![Version](https://img.shields.io/npm/v/%40scalar/api-client-proxy)](https://www.npmjs.com/package/@scalar/api-client-proxy)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/api-client-proxy)](https://www.npmjs.com/package/@scalar/api-client-proxy)
[![License](https://img.shields.io/npm/l/%40scalar%2Fapi-client-proxy)](https://www.npmjs.com/package/@scalar/api-client-proxy)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/scalar)

> Deprecated! [We’re using a Go proxy now.](https://github.com/scalar/scalar/tree/main/examples/proxy-server)

The Scalar API Client Proxy redirects requests to another server to avoid CORS issues. Works well with the Scalar API Client.

## Installation

```bash
npm install @scalar/api-client-proxy
```

## Usage

Create a new Node.js project and run the following code to run your own instance:

```ts
import { createApiClientProxy } from '@scalar/api-client-proxy'

const { listen } = createApiClientProxy()

listen(5051, () => {
  console.log(`🥤 API Client Proxy listening on http://localhost:5051`)
})
```
npm package: @scalar/api-client-react
Description: the open source API testing client for react
Author: Scalar
Latest version: 2.0.1

# Scalar API Client React

[![Version](https://img.shields.io/npm/v/%40scalar/api-client-react)](https://www.npmjs.com/package/@scalar/api-client-react)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/api-client-react)](https://www.npmjs.com/package/@scalar/api-client-react)
[![License](https://img.shields.io/npm/l/%40scalar%2Fapi-client-react)](https://www.npmjs.com/package/@scalar/api-client-react)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/scalar)

## Installation

```bash
npm install @scalar/api-client-react
```

## ⚠️ Breaking Changes

We have updated the API for the client! Please see the new hook based usage below.

## Usage

Call `useApiClient()` from any component. No provider is needed.

The Vue app is created once and appended to `document.body` where it lives for the lifetime of the
page — it survives client-side navigation without losing state.

The code is ESM lazy loaded with the dynamic import function to make the smallest possible initial bundle size. We also
handle de-duplication of documents so as long as the URL is the same you will only get one.

```tsx
import { useApiClient } from '@scalar/api-client-react'
import '@scalar/api-client-react/style.css'

export const OpenButton = () => {
  const client = useApiClient({
    configuration: {
      url: 'https://registry.scalar.com/@scalar/apis/galaxy?format=json',
    },
  })

  return (
    <button onClick={() => client?.open({ path: '/planets', method: 'get' })}>
      Open API Client
    </button>
  )
}
```

### Options

| Option | Type | Description |
|---|---|---|
| `configuration.url` | `string` | URL of an OpenAPI document to load |
| `configuration.content` | `Record<string, unknown>` | Inline OpenAPI document object |

### Routing to a specific request

Pass a `RoutePayload` to `client.open()` to navigate directly to a specific endpoint:

```tsx
const client = useApiClient({
  configuration: { url: '...' },
})

// Open to a specific request
client?.open({ path: '/auth/token', method: 'post' })
```

Check out the playground for a working example.

## Community

We are API nerds. You too? Let's chat on Discord: <https://discord.gg/scalar>

## License

The source code in this repository is licensed under [MIT](https://github.com/scalar/scalar/blob/main/LICENSE).
npm package: @scalar/api-reference
Description: Generate beautiful API references from OpenAPI documents
Author: Scalar
Latest version: 1.52.1

# Scalar API Reference

[![Version](https://img.shields.io/npm/v/%40scalar/api-reference)](https://www.npmjs.com/package/@scalar/api-reference)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/api-reference)](https://www.npmjs.com/package/@scalar/api-reference)
[![Hits on jsdelivr](https://img.shields.io/jsdelivr/npm/hm/%40scalar%2Fapi-reference)](https://www.jsdelivr.com/package/npm/@scalar/api-reference)
[![License](https://img.shields.io/npm/l/%40scalar%2Fapi-reference)](https://www.npmjs.com/package/@scalar/api-reference)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/scalar)

Interactive API Reference from OpenAPI/Swagger Documents [Try our Demo](https://docs.scalar.com/swagger-editor)

[![Screenshot of an API Reference](https://github.com/scalar/scalar/assets/6201407/d8beb5e1-bf64-4589-8cb0-992ba79215a8)](https://docs.scalar.com/swagger-editor)

### CDN

```html
<!doctype html>
<html>
  <head>
    <title>Scalar API Reference</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1" />
  </head>

  <body>
    <div id="app"></div>

    <!-- Load the Script -->
    <script src="https://cdn.jsdelivr.net/npm/@scalar/api-reference"></script>

    <!-- Initialize the Scalar API Reference -->
    <script>
      Scalar.createApiReference('#app', {
        // The URL of the OpenAPI/Swagger document
        url: 'https://registry.scalar.com/@scalar/apis/galaxy?format=json',
        // Avoid CORS issues
        proxyUrl: 'https://proxy.scalar.com',
      })
    </script>
  </body>
</html>
```

## Documentation

[Read the documentation here](https://scalar.com/products/api-references/integrations/html-js)

## Community

We are API nerds. You too? Let's chat on Discord: <https://discord.gg/scalar>

## License

The source code in this repository is licensed under [MIT](https://github.com/scalar/scalar/blob/main/LICENSE).
npm package: @scalar/api-reference-editor
Description: Editer interface for OpenAPI specs
Author: Scalar
Latest version: 0.2.31

# API Reference Editor

Scalar API references with an integrated editor. The editor can be used in two ways:

## Internal State Management

You (optionally) provide an initial value and the editor will manage any changes internally.

```html
<!doctype html>
<html>
  <head>
    <title>API Reference Editor</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1" />
    <!-- TODO: Update import script -->
    <script src="https://cdn.jsdelivr.net/npm/@scalar/api-reference-editor"></script>
  </head>
  <body>
    <div id="scalar-api-reference" />
    <script>
      import { mountApiReferenceEditable } from '@scalar/api-reference-editor'

      mountApiReferenceEditable('#scalar-api-reference')
    </script>
  </body>
</html>
```

## External State Management

To have additional control over when the references are updated you can provide a `configuration.spec.content` value and then handle the custom event that is emitted from the Editor component. A handler can be passed directly to the mountApiReferenceEditable function or you can attach an event listener for `scalar-update` to the mounted div.

If you wish to have external UI that updates the spec then `updateSpecValue` can be used to force update the content.

```html
<!doctype html>
<html>
  <head>
    <title>API Reference Editor</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1" />
    <!-- TODO: Update import script -->
    <script src="https://cdn.jsdelivr.net/npm/@scalar/api-reference-editor"></script>
  </head>
  <body>
    <div id="scalar-api-reference" />
    <script>
      import { mountApiReferenceEditable } from '@scalar/api-reference-editor'

      const externalState = {
        value: ''
      }

      const { updateSpecValue} = mountApiReferenceEditable(
        '#scalar-api-reference',
        { content: '' },
        (v: string) => {
          console.log('The value is updated!')
          updateSpecValue(v) // Updates the rendered spec
          externalState.value = v
        }
      )
    </script>
  </body>
</html>
```
npm package: @scalar/api-reference-react
Description: The react client only integration for api references
Author: Scalar
Latest version: 0.9.22

# Scalar API Reference Component for React

[![Version](https://img.shields.io/npm/v/%40scalar/api-reference-react)](https://www.npmjs.com/package/@scalar/api-reference-react)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/api-reference-react)](https://www.npmjs.com/package/@scalar/api-reference-react)
[![License](https://img.shields.io/npm/l/%40scalar%2Fapi-reference-react)](https://www.npmjs.com/package/@scalar/api-reference-react)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/scalar)

## Documentation

[Read the documentation here](https://scalar.com/products/api-references/integrations/react)

## Community

We are API nerds. You too? Let's chat on Discord: <https://discord.gg/scalar>

## License

The source code in this repository is licensed under [MIT](https://github.com/scalar/scalar/blob/main/LICENSE).
npm package: @scalar/client-side-rendering
Description: Client-side rendering for the Scalar API Reference using the CDN
Author: Scalar
Latest version: 0.1.0

# Scalar Client-Side Rendering

[![Version](https://img.shields.io/npm/v/%40scalar/client-side-rendering)](https://www.npmjs.com/package/@scalar/client-side-rendering)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/client-side-rendering)](https://www.npmjs.com/package/@scalar/client-side-rendering)
[![License](https://img.shields.io/npm/l/%40scalar%2Fclient-side-rendering)](https://www.npmjs.com/package/@scalar/client-side-rendering)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/scalar)

Render the Scalar API Reference as static HTML using the CDN. No server-side dependencies required.

## Installation

```bash
npm install @scalar/client-side-rendering
```

## Usage

```ts
import { renderApiReference } from '@scalar/client-side-rendering'

const html = renderApiReference({
  pageTitle: 'My API Reference',
  config: {
    url: 'https://registry.scalar.com/@scalar/apis/galaxy?format=json',
  },
})
```

## Community

We are API nerds. You too? Let's chat on Discord: <https://discord.gg/scalar>

## License

The source code in this repository is licensed under [MIT](https://github.com/scalar/scalar/blob/main/LICENSE).
npm package: @scalar/config
Description: Define and validate Scalar Configuration files
Author: Scalar
Latest version: 0.2.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Scalar Configuration

[![Version](https://img.shields.io/npm/v/%40scalar/config)](https://www.npmjs.com/package/@scalar/config)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/config)](https://www.npmjs.com/package/@scalar/config)
[![License](https://img.shields.io/npm/l/%40scalar%2Fconfig)](https://www.npmjs.com/package/@scalar/config)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/scalar)

Defining types and functions for validating Scalar Configuration files (`scalar.config.json`) to be used with the Scalar.

## Development

We are using [TypeBox](https://github.com/sinclairzx81/typebox) for JSON schema validation.

## Community

We are API nerds. You too? Let's chat on Discord: <https://discord.gg/scalar>

## License

The source code in this repository is licensed under [MIT](https://github.com/scalar/scalar/blob/main/LICENSE).
npm package: @scalar/core
Description: Shared libraries for our packages
Author: Scalar
Latest version: 0.5.0

# Scalar Core

[![Version](https://img.shields.io/npm/v/%40scalar/core)](https://www.npmjs.com/package/@scalar/core)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/core)](https://www.npmjs.com/package/@scalar/core)
[![License](https://img.shields.io/npm/l/%40scalar%2Fcore)](https://www.npmjs.com/package/@scalar/core)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/scalar)

Shared libraries for our packages, specifically [@scalar/api-reference](https://www.npmjs.com/pacupdatekage/@scalar/api-reference) and [@scalar/api-client](https://www.npmjs.com/package/@scalar/api-client).


## Installation

```bash
npm install @scalar/core
```

## Usage

```ts
import { getHtmlDocument } from '@scalar/core/libs/html-rendering'

const html = getHtmlDocument({
  url: 'https://registry.scalar.com/@scalar/apis/galaxy?format=json',
})
```

## Community

We are API nerds. You too? Let's chat on Discord: <https://discord.gg/scalar>

## License

The source code in this repository is licensed under [MIT](https://github.com/scalar/scalar/blob/main/LICENSE).
npm package: @scalar/draggable
Description: A simple vue wrapper around html drag and drop
Author: Scalar
Latest version: 0.4.1

# Scalar Draggable component

[![Version](https://img.shields.io/npm/v/%40scalar/draggable)](https://www.npmjs.com/package/@scalar/draggable)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/draggable)](https://www.npmjs.com/package/@scalar/draggable)
[![License](https://img.shields.io/npm/l/%40scalar%2Fdraggable)](https://www.npmjs.com/package/@scalar/draggable)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/scalar)

## Installation

```bash
npm install @scalar/draggable
```

## Usage

A complete example can be found the [playground](https://github.com/scalar/scalar/tree/main/packages/draggable/playground), but basically you need a data structure like:

```ts
const sidebar = ref({
  // Master list of all items
  items: {
    '1': {
      id: '1',
      name: 'Rangers',
      children: ['2', '4', '5', '6', '7'],
    },
    '2': {
      id: '2',
      name: 'Stars',
      children: ['3'],
    },
    '3': { id: '3', name: 'Bruins', children: [] },
    '4': { id: '4', name: 'Canucks', children: [] },
    '5': { id: '5', name: 'Panthers', children: [] },
    '6': { id: '6', name: 'Avalanche', children: [] },
    '7': { id: '7', name: 'Hurricanes', children: [] },
    '8': { id: '8', name: 'Jets', children: [] },
    '9': { id: '9', name: 'Oilers', children: [] },
    '10': { id: '10', name: 'Predators', children: [] },
    '11': { id: '11', name: 'Maple Leafs', children: [] },
    '12': { id: '12', name: 'Kings', children: [] },
  } satisfies Items,
  // Root level children (the top level of the sidebar)
  children: ['1', '8', '9', '10', '11', '12'],
})
```

Then you will need a recursive component that wraps Draggable like:

```vue
<template>
  <Draggable
    :id="id"
    :ceiling="0.8"
    :floor="0.2"
    :height="30"
    :parentIds="[...parentIds, id]">
    <div
      class="sidebar-item"
      :class="{ 'sidebar-folder': items[id].children.length }">
      {{ items[id].name }}
      <SidebarItem
        v-for="childId in items[id].children"
        :id="childId"
        :key="childId"
        :items="items"
        :parentIds="[...parentIds, id]" />
    </div>
  </Draggable>
</template>
```

Then manage the data manipluation on drop using the emitted events!

### Example

You can find an example in this repo under the [playground](https://github.com/scalar/scalar/tree/main/packages/draggable/playground)
npm package: @scalar/echo-server
Description: an express server which replies with the request data
Author: Scalar
Latest version: 0.7.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Scalar Echo Server

[![Version](https://img.shields.io/npm/v/%40scalar/echo-server)](https://www.npmjs.com/package/@scalar/echo-server)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/echo-server)](https://www.npmjs.com/package/@scalar/echo-server)
[![License](https://img.shields.io/npm/l/%40scalar%2Fecho-server)](https://www.npmjs.com/package/@scalar/echo-server)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/scalar)

The Scalar Echo Server is an Express server, which replies with the request data. Works well with the Scalar API Client.

## Installation

```bash
npm install @scalar/echo-server
```

## Usage

Create a new Node.js project and run the following code to run your own instance:

```ts
import { createEchoServer } from '@scalar/echo-server'

const { listen } = createEchoServer()

listen(5052, () => {
  console.log(`🔁 Echo Server listening on http://localhost:5052`)
})
```

## Example

No matter which route you hit, the response contains all the request data and looks like that:

```json
{
  "headers": {
    "host": "localhost:5052",
    "connection": "keep-alive",
    "accept": "*/*",
    "accept-language": "*",
    "sec-fetch-mode": "no-cors",
    "user-agent": "undici",
    "cache-control": "max-age=0",
    "accept-encoding": "gzip, deflate",
    "content-length": "0"
  },
  "cookies": {},
  "method": "GET",
  "path": "/foo",
  "query": {
    "foo": "bar"
  },
  "body": {}
}
```
npm package: @scalar/fetch
Description: Light wrapper around fetch HTTP client
Author: Scalar
Latest version: 0.1.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Scalar Fetch

A lightweight, fetch-based wrapper over an HTTP client that returns standardized and typesafe response formats.

Define your response data schema using zod.

## Installation

```bash
npm install @scalar/fetch
```

## Usage

```bash
import { request } from '@scalar/fetch'
```

### Validate your return data

```ts
const result = await request({
  disableAuth: true,
  url: 'https://galaxy.scalar.com/planets/1',
  method: 'get',
  schema: z.object({
    id: z.number(),
    name: z.string(),
    description: z.string(),
    image: z.string(),
    creator: z.object({
      id: z.number(),
      name: z.string(),
      email: z.string().z.email(),
    }),
  }),
})
```

### Define your request body data

```ts
const result = await request({
  disableAuth: true,
  baseUrl: 'https://galaxy.scalar.com',
  url: '/user/signup',
  method: 'post',
  data: {
    name: 'Marc',
    email: 'marc@scalar.com',
    passowrd: 'i-love-scalar',
  },
  schema: z.object({
    id: z.number(),
    name: z.string(),
    email: z.string().z.email(),
  }),
})
```

### Make an authenticated request

```ts
const result = await request({
  accessToken: 'MY_SECRET_TOKEN',
  baseUrl: 'https://galaxy.scalar.com',
  url: '/me',
  method: 'get',
  schema: z.object({
    id: z.number(),
    name: z.string(),
    email: z.string().z.email(),
  }),
})
```

### Pass your accessToken as a getAccessToken function

```ts
const result = await request({
  accessToken: () => 'MY_SECRET_TOKEN',
  baseUrl: 'https://galaxy.scalar.com',
  url: '/me',
  method: 'get',
  schema: z.object({
    id: z.number(),
    name: z.string(),
    email: z.string().z.email(),
  }),
})
```

## Return Types

Successful requests will have the following shape and your data will have the type you defined in the schema

```ts
export type ApiResponse<T> = {
  status: number
  data: T
  error: false
}
```

And errors will look like

```ts
export type ApiError = {
  status: number
  message: string
  error: true
  originalError: any
}
```

## Community

We are API nerds. You too? Let’s chat on Discord: <https://discord.gg/scalar>

## License

The source code in this repository is licensed under [MIT](https://github.com/scalar/scalar/blob/main/LICENSE).
npm package: @scalar/galaxy
Description: OpenAPI example specification in YAML and JSON
Author: Scalar
Latest version: 0.6.2

# Scalar Galaxy Example

[![Version](https://img.shields.io/npm/v/%40scalar/galaxy)](https://www.npmjs.com/package/@scalar/galaxy)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/galaxy)](https://www.npmjs.com/package/@scalar/galaxy)
[![License](https://img.shields.io/npm/l/%40scalar%2Fgalaxy)](https://www.npmjs.com/package/@scalar/galaxy)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/scalar)

OpenAPI and AsyncAPI example documents in YAML and JSON to test OpenAPI and AsyncAPI tooling, run test suites or learn about OpenAPI and AsyncAPI.

## Installation

```bash
npm install @scalar/galaxy
```

## Usage

### Scalar Registry

| Version | Format  | URL                                                         |
| ------- | ------- | ----------------------------------------------------------- |
| Latest  | Preview | https://registry.scalar.com/@scalar/apis/galaxy             |
| Latest  | JSON    | https://registry.scalar.com/@scalar/apis/galaxy?format=json |
| Latest  | YAML    | https://registry.scalar.com/@scalar/apis/galaxy?format=yaml |

### CDN

| Version         | Format | URL                                                                   |
| --------------- | ------ | --------------------------------------------------------------------- |
| OpenAPI Latest  | JSON   | https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/latest.json          |
| OpenAPI Latest  | YAML   | https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/latest.yaml          |
| OpenAPI 3.1     | JSON   | https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/3.1.json             |
| OpenAPI 3.1     | YAML   | https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/3.1.yaml             |
| AsyncAPI Latest | JSON   | https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/asyncapi/latest.json |
| AsyncAPI Latest | YAML   | https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/asyncapi/latest.yaml |
| AsyncAPI 3.0    | JSON   | https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/asyncapi/3.0.json    |
| AsyncAPI 3.0    | YAML   | https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/asyncapi/3.0.yaml    |

### Import as object

```ts
import ScalarGalaxy from '@scalar/galaxy/latest.json'
```

### Import as JSON string

```ts
import ScalarGalaxy from '@scalar/galaxy/latest.json?raw'
```

### Import as YAML string

```ts
import ScalarGalaxy from '@scalar/galaxy/latest.yaml?raw'
```

### Import specific OpenAPI version

```ts
import ScalarGalaxy from '@scalar/galaxy/3.1.json'
```

### Serve the OpenAPI document using the CLI

```bash
npx @scalar/cli document serve ./src/documents/3.1.yaml --watch
```

## Community

We are API nerds. You too? Let's chat on Discord: <https://discord.gg/scalar>

## License

The source code in this repository is licensed under [MIT](https://github.com/scalar/scalar/blob/main/LICENSE).