open-index/open-npm huggingface dataset:
npm package: @keyloom/ui
Description: Keyloom UI component library: auth flows, org management, primitives, and theme
Latest version: 3.1.4

# @keyloom/ui

Keyloom’s UI library for authentication flows, organization management, and reusable primitives. It ships:

- Design tokens, Tailwind preset, and CSS variables (light/dark)
- Headless primitives (forms, OTP, provider button, data table)
- Styled components (Tailwind + Radix UI)
- Auth components (SignIn, SignUp, MagicLink, ResetPassword, 2FA)
- Org & RBAC components (OrgSwitcher, MembersTable, RoleGate)

## Install

pnpm add @keyloom/ui clsx lucide-react tailwindcss @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-checkbox @radix-ui/react-avatar

## Tailwind preset

In tailwind.config.cjs:

```js
const keyloom = require('@keyloom/ui/theme/tailwind-preset.cjs');
module.exports = { presets: [keyloom], content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'] };
```

Global CSS:

```css
@import '@keyloom/ui/theme/css-vars.css';
```

## Usage

```tsx
import { SignInForm, Providers } from '@keyloom/ui/auth';
import { Card } from '@keyloom/ui/components/card';

export default function Page() {
  return (
    <div className="min-h-dvh grid place-items-center p-6">
      <Card className="w-full max-w-md p-6 space-y-6">
        <h1 className="text-2xl font-semibold">Welcome back</h1>
        <Providers callbackUrl="/dashboard" />
        <SignInForm redirectTo="/dashboard" />
      </Card>
    </div>
  );
}
```

See source for more components and props.
npm package: @keymanapp/lexical-model-compiler
Description: Keyman Developer lexical model compiler
Author: Marc Durdin
Latest version: 16.0.147
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

Keyman Developer
================

This package provides the following Keyman **command line tools**:

 - `kmlmc` — takes **lexical model sources** and compiles them in to
   a **.js** file.
 - `kmlmp` — uses a `.model.kmp` file to generate a redistributable
   **lexical model package**.
 - `kmlmi` — merges Keyman lexical model `.model_info` files.

`kmlmc` is intended to be used standalone, or as part of a build system.
`kmlmp` is used only by command line tools. `kmlmi` is used exclusively
in the [lexical-models repository][lexical models].

In order to build [lexical models][], these tools must be built and
compiled.

[lexical models]: https://github.com/keymanapp/lexical-models


Install
-------

Install `kmlmc`, `kmlmp`, and `kmlmi` globally:

    npm install -g @keymanapp/lexical-model-compiler

Usage
-----

To compile a lexical model from its `.model.ts` source, use `kmlmc`:

    kmlmc my-lexical-model.model.ts --outFile my-lexical-model.js

To see more command line options by using the `--help` option:

    kmlmc --help
    kmlmp --help
    kmlmi --help

How to build from source
------------------------

Run `build.sh`:

    ./build.sh


How to run the tests
--------------------

    ./build.sh -test
npm package: @keymanapp/lexical-model-types
Description: Type definitions in used in the LMLayer (lexical model/predictive text) component of Keyman.
Author: Marc Durdin
Latest version: 13.0.111
Deprecated: Please use @keymanapp/models-types instead

Lexical Model Types
===================

Declares TypeScript types and interfaces required to define **Lexical
Models**, **Word breaking functions**, and all things in between.

Install
-------

> (see below if you are working in the keymanapp/keyman repo!)

    npm install --save-dev @keymanapp/lexical-model-types

Usage
-----

Say you are creating a **custom lexical model**. Then import this module
in your lexical model file!

```Typescript
// my-nifty-model.ts

import "@keymanapp/lexical-model-types";

export class MyNiftyClass implements LexicalModel {
  configure(capabilities: Capabilities): Configuration {
    // TODO: implement me!
    throw new Error("Method not implemented.");
  }
  predict(transform: Transform, context: Context): ProbabilityMass<Suggestion>[] {
    // TODO: implement me!
    throw new Error("Method not implemented.");
  }
  wordbreak(context: Context): string {
    // TODO: implement me!
    throw new Error("Method not implemented.");
  }
  punctuation?: LexicalModelPunctuation;
}
```

If your are creating a **custom word breaker**, you would do the same:

```typescript
import "@keymanapp/lexical-model-types";

export let myShinyWordBreaker: WordBreakingFunction;
myShinyWordBreaker = function (phrase: string): Span[] {
  // TODO: implement me!
  throw new Error("Function not implemented")
}
```

Look at [index.d.ts](./index.d.ts) for documentation on each and every
type!


Usage within keymanapp/keyman repo
----------------------------------

To use it in other subprojects within keymanapp/keyman, ensure that this
package is linked using:

    npm link .

The following subprojects already perform `npm link .` as part of their `build.sh`:

    common/predictive-text/
    developer/js/
npm package: @keymanapp/models-types
Description: Type definitions in used in the modeling (lexical model/predictive text) component of Keyman.
Author: Marc Durdin
Latest version: 17.0.335

`@keymanapp/models-types`
=========================

Declares TypeScript types and interfaces required to define **Lexical
Models**, **Word breaking functions**, and all things in between.

Install
-------

> (see below if you are working in the keymanapp/keyman repo!)

    npm install --save-dev @keymanapp/models-types

Usage
-----

Say you are creating a **custom lexical model**. Then import this module
in your lexical model file!

```Typescript
// my-nifty-model.ts

import "@keymanapp/models-types";

export class MyNiftyClass implements LexicalModel {
  configure(capabilities: Capabilities): Configuration {
    // TODO: implement me!
    throw new Error("Method not implemented.");
  }
  predict(transform: Transform, context: Context): ProbabilityMass<Suggestion>[] {
    // TODO: implement me!
    throw new Error("Method not implemented.");
  }
  wordbreak(context: Context): string {
    // TODO: implement me!
    throw new Error("Method not implemented.");
  }
  punctuation?: LexicalModelPunctuation;
}
```

If your are creating a **custom word breaker**, you would do the same:

```typescript
import "@keymanapp/models-types";

export let myShinyWordBreaker: WordBreakingFunction;
myShinyWordBreaker = function (phrase: string): Span[] {
  // TODO: implement me!
  throw new Error("Function not implemented")
}
```

Look at [index.d.ts](./index.d.ts) for documentation on each and every
type!


Usage within keymanapp/keyman repo
----------------------------------

To use it in other subprojects within keymanapp/keyman, ensure that this package
is linked using `"*"`. Add this dependency to your subproject like so:

```json
  "dependencies": {
    "@keymanapp/models-types": "*",
  }
```
npm package: @keymapkit/cli
Description: CLI tools for KeymapKit
Author: Micah R Ledbetter
Latest version: 1.0.7

# @keymapkit/cli

CLI tools for KeymapKit keyboard layouts.

## Installation

```bash
npm install @keymapkit/cli
```

## Usage

### Generate a blank keymap

Generate a blank keymap layout for a specific keyboard model:

```bash
npx @keymapkit/cli blank <package> <model>
```

**Arguments:**

- `package`: NPM package name (e.g., `@keymapkit/keyboard.ergodox`)
- `model`: Keyboard model name exported by the package (e.g., `KeyboardModelErgodox`)

**Examples:**

Generate a blank ErgoDox layout:

```bash
npx @keymapkit/cli blank @keymapkit/keyboard.ergodox KeyboardModelErgodox
```

Generate a blank Planck 48 layout:

```bash
npx @keymapkit/cli blank @keymapkit/keyboard.planck48 KeyboardModelPlanck48
```

The command outputs valid JavaScript that you can save to a file and use in your KeymapKit project:

```bash
npx @keymapkit/cli blank @keymapkit/keyboard.planck48 KeyboardModelPlanck48 > my-blank-layout.js
```

## Output

The generated layout includes:

- All physical keys from the keyboard model
- Empty key names and info fields
- A basic guide with welcome text
- Proper imports for KeymapKit components

You can then customize the generated layout by adding key names, descriptions, and additional layers as needed.
npm package: @keymapkit/keyboard.advantage360
Description: The Kinesis Advantage360 keyboard model for KeymapKit
Author: Micah R Ledbetter
Latest version: 1.0.6

# @keymapkit/keyboard.advantage360

A keyboard module for the [KeymapKit](https://github.com/mrled/KeymapKit) project.

![Screenshot](screenshot.png?raw=true "Screenshot")

This module defines a Kinesis Advantage360 keyboard.

- Default key size: 4x4
- Maximum key size: 4x8

The keyboard has four keygrids:

- `l-f`: Left finger grid
- `l-t`: Left thumb grid
- `r-f`: Right finger grid
- `r-t`: Right thumb grid

All key IDs follow the pattern `{keygrid}-{x}-{y}` where keygrid is one of the four grids above, and x and y are the coordinates.

## Left Finger Grid (l-f)

Row 1 (number row):

- l-f-1-1
- l-f-6-1
- l-f-10-1
- l-f-14-1
- l-f-18-1
- l-f-22-1
- l-f-26-1

Row 2 (qwerty row):

- l-f-1-5
- l-f-6-5
- l-f-10-5
- l-f-14-5
- l-f-18-5
- l-f-22-5
- l-f-26-5

Row 3 (asdf row):

- l-f-1-9
- l-f-6-9
- l-f-10-9
- l-f-14-9
- l-f-18-9
- l-f-22-9
- l-f-26-9

Row 4 (zxcv row):

- l-f-1-13
- l-f-6-13
- l-f-10-13
- l-f-14-13
- l-f-18-13
- l-f-22-13

Row 5 (bottom row):

- l-f-1-17
- l-f-6-17
- l-f-10-17
- l-f-14-17
- l-f-18-17

## Left Thumb Grid (l-t)

The left thumb grid uses a special layout,
where keys A, B, E, and F are 4x4-sized keys,
and C and D are 4x8 sized keys.

```text
      1 5 9
    +------+
  1 |   A B
  5 | C D E
  9 | C D F
```

Keys:

- l-t-5-1 (A)
- l-t-9-1 (B)
- l-t-1-5 (C - 4x8 size)
- l-t-5-5 (D - 4x8 size)
- l-t-9-5 (E)
- l-t-9-9 (F)

## Right Finger Grid (r-f)

Row 1 (number row):

- r-f-1-1
- r-f-5-1
- r-f-9-1
- r-f-13-1
- r-f-17-1
- r-f-21-1
- r-f-25-1

Row 2 (qwerty row):

- r-f-1-5
- r-f-5-5
- r-f-9-5
- r-f-13-5
- r-f-17-5
- r-f-21-5
- r-f-25-5

Row 3 (asdf row):

- r-f-1-9
- r-f-5-9
- r-f-9-9
- r-f-13-9
- r-f-17-9
- r-f-21-9
- r-f-25-9

Row 4 (zxcv row):

- r-f-5-13
- r-f-9-13
- r-f-13-13
- r-f-17-13
- r-f-21-13
- r-f-25-13

Row 5 (bottom row):

- r-f-9-17
- r-f-13-17
- r-f-17-17
- r-f-21-17
- r-f-25-17

## Right Thumb Grid (r-t)

The right thumb grid uses a special layout
which is a mirror of the l-t grid,
with the two 4x8-sized keys on the right.

```text
      1 5 9
    +------+
  1 | A B
  5 | C D E
  9 | F D E
```

Keys:

- r-t-1-1 (A)
- r-t-5-1 (B)
- r-t-1-5 (C)
- r-t-5-5 (D - 4x8 size)
- r-t-9-5 (E - 4x8 size)
- r-t-1-9 (F)
npm package: @keymapkit/keyboard.ergodox
Description: The ErgoDox keyboard model for KeymapKit
Author: Micah R Ledbetter
Latest version: 1.0.4

# @keymapkit/keyboard.ergodox

A keyboard module for the [KeymapKit](https://github.com/mrled/KeymapKit) project.

![Screenshot](screenshot.png?raw=true "Screenshot")

This module defines an ErgoDox keyboard.

- Default key size: 2x2
- Maximum key size: 4x3

The keyboard has four keygrids:

- `l-f`: Left finger grid
- `l-t`: Left thumb grid
- `r-f`: Right finger grid
- `r-t`: Right thumb grid

All key IDs follow the pattern `{keygrid}-{x}-{y}` where keygrid is one of the four grids above, and x and y are the coordinates.

## Left Finger Grid (l-f)

Row 1 (number row):

- l-f-1-1
- l-f-4-1
- l-f-6-1
- l-f-8-1
- l-f-10-1
- l-f-12-1
- l-f-14-1

Row 2 (qwerty row):

- l-f-1-3
- l-f-4-3
- l-f-6-3
- l-f-8-3
- l-f-10-3
- l-f-12-3
- l-f-14-3

Row 3 (asdf row):

- l-f-1-5
- l-f-4-5
- l-f-6-5
- l-f-8-5
- l-f-10-5
- l-f-12-5
- l-f-14-6

Row 4 (zxcv row):

- l-f-1-7
- l-f-4-7
- l-f-6-7
- l-f-8-7
- l-f-10-7
- l-f-12-7

Row 5 (bottom row):

- l-f-2-9
- l-f-4-9
- l-f-6-9
- l-f-8-9
- l-f-10-9

## Left Thumb Grid (l-t)

The left thumb grid uses a special layout,
where keys A, B, E, and F are 2x2-sized keys,
and C and D are 2x4 sized keys.

```text
      0 2 4
    +------+
  0 |   A B
  2 | C D E
  4 | C D F
```

Keys:

- l-t-3-1 (A)
- l-t-5-1 (B)
- l-t-1-3 (C - 2x4 size)
- l-t-3-3 (D - 2x4 size)
- l-t-5-3 (E)
- l-t-5-5 (F)

## Right Finger Grid (r-f)

Row 1 (number row):

- r-f-1-1
- r-f-3-1
- r-f-5-1
- r-f-7-1
- r-f-9-1
- r-f-11-1
- r-f-13-1

Row 2 (qwerty row):

- r-f-1-3
- r-f-3-3
- r-f-5-3
- r-f-7-3
- r-f-9-3
- r-f-11-3
- r-f-13-3

Row 3 (asdf row):

- r-f-1-6
- r-f-3-5
- r-f-5-5
- r-f-7-5
- r-f-9-5
- r-f-11-5
- r-f-13-5

Row 4 (zxcv row):

- r-f-3-7
- r-f-5-7
- r-f-7-7
- r-f-9-7
- r-f-11-7
- r-f-13-7

Row 5 (bottom row):

- r-f-5-9
- r-f-7-9
- r-f-9-9
- r-f-11-9
- r-f-13-9

## Right Thumb Grid (r-t)

The right thumb grid uses a special layout
which is a mirror of the l-t grid,
with the two 2x4-sized keys on the right.

```text
      0 2 4
    +------+
  0 | A B
  2 | C D E
  4 | F D E
```

Keys:

- r-t-1-1 (A)
- r-t-3-1 (B)
- r-t-1-3 (C)
- r-t-3-3 (D - 2x4 size)
- r-t-5-3 (E - 2x4 size)
- r-t-1-5 (F)
npm package: @keymapkit/keyboard.planck48
Description: The Planck48 keyboard model for KeymapKit
Author: Micah R Ledbetter
Latest version: 1.0.4

# @keymapkit/keyboard.planck48

A keyboard module for the [KeymapKit](https://github.com/mrled/KeymapKit) project.

![Screenshot](screenshot.png?raw=true "Screenshot")

This module defines a Planck 48 keyboard.

- Default key size: 2x2
- Maximum key size: 4x3

The keyboard has a single keygrid containing 48 keys, arranged in 4 rows of 12 keys.

All key IDs follow the pattern `planck48-{x}-{y}` where x and y are the coordinates. Each key is 2x2 grid units in size.

Row 1:

- planck48-1-1
- planck48-3-1
- planck48-5-1
- planck48-7-1
- planck48-9-1
- planck48-11-1
- planck48-13-1
- planck48-15-1
- planck48-17-1
- planck48-19-1
- planck48-21-1
- planck48-23-1

Row 2:

- planck48-1-3
- planck48-3-3
- planck48-5-3
- planck48-7-3
- planck48-9-3
- planck48-11-3
- planck48-13-3
- planck48-15-3
- planck48-17-3
- planck48-19-3
- planck48-21-3
- planck48-23-3

Row 3:

- planck48-1-5
- planck48-3-5
- planck48-5-5
- planck48-7-5
- planck48-9-5
- planck48-11-5
- planck48-13-5
- planck48-15-5
- planck48-17-5
- planck48-19-5
- planck48-21-5
- planck48-23-5

Row 4:

- planck48-1-7
- planck48-3-7
- planck48-5-7
- planck48-7-7
- planck48-9-7
- planck48-11-7
- planck48-13-7
- planck48-15-7
- planck48-17-7
- planck48-19-7
- planck48-21-7
- planck48-23-7
npm package: @keymastervn/react-org-chart-next
Description: Simple, high-performance react component for d3 org chart
Author: Fouad Matin
Latest version: 0.2.1

# react-org-chart-next

### Note

This repository is an effort to make it work with `es6` `import`.

It can be deprecated or private-used by the owner or the organization owner.

### Usage

```
import * as OrgChart from '@keymastervn/react-org-chart-next'

...

<OrgChart tree={data} lineType="angle" style={{ cursor: move, height: '100%', width: '100%' }} />

```

### Features

- High-performance D3-based SVG rendering
- Lazy-load children with a custom function
- Handle up to 1 million collapsed nodes and 5,000 expanded nodes

### React Props

| **property**      | **type** | **description**                                                       | **example**                                                        |
| ----------------- | -------- | --------------------------------------------------------------------- | ------------------------------------------------------------------ |
| tree              | `Object` | Nested data model with all of the employees in the company (Required) | { "id": 123, "person": { "name": "Fouad Matin" }, "children": [] } |  |
| nodeWidth         | `Number` | Width of the component for each individual (Optional)                 | 180                                                                |
| nodeHeight        | `Number` | Height of the component for each individual (Optional)                | 100                                                                |
| nodeSpacing       | `Number` | Spacing between each of the nodes in the chart (Optional)             | 12                                                                 |
| animationDuration | `Number` | Duration of the animations in milliseconds (Optional)                 | 350                                                                |
| lineType          | `String` | Type of line that connects the nodes to each other (Optional)         | “angle” “curve”                                                    |
| className         | `String` | Define the classes for the root element (Optional)                    | “rc-chart”                                                         |
| style             | `Object` | Define styling for the root element (Optional)                        | { cursor: move, height: "100%", width: "100%" }                    |