open-index/open-npm huggingface dataset:
npm package: @rotten-games/rotten-uitk
Description: RottenUITK - HTML + Tailwind to Unity UI Toolkit converter. Build game UIs with web-native tools.
Author: Rotten Games
Latest version: 1.0.5

# RottenUITK

Convert HTML + Tailwind to Unity UI Toolkit (UXML/USS/C#).

Design game UI in HTML, preview in browser, compile to Unity with one click.

## Installation

```bash
npm install -g @rotten-games/rotten-uitk
```

## Quick Start

```bash
# Start the visual editor
rotten-uitk preview ./my-ui-folder --open

# Or compile directly
rotten-uitk convert MainMenu.html -o Assets/UI
```

## Web Preview Features

The preview server gives you a complete UI development environment:

- **File Browser** - See all HTML files in your project
- **Live Preview** - See your UI instantly as you edit
- **Size Presets** - Mobile, Tablet, Desktop, Full
- **Code View** - See generated UXML, USS, C# side by side
- **Compile File** - One click to generate Unity files (Ctrl+S)
- **Compile All** - Generate all files at once (Ctrl+Shift+S)
- **Watch Mode** - Auto-compile on file changes
- **Output Folder** - Set your Unity output path (e.g., `Assets/UI/Generated`)

## Workflow

1. **Create HTML files** with Tailwind classes
2. **Run** `rotten-uitk preview . --open`
3. **Set output folder** (e.g., `Assets/UI/Generated`)
4. **Edit HTML** in your favorite editor
5. **Preview** changes in browser
6. **Click "Compile"** or press Ctrl+S
7. **See files** in Unity

## Example

**Input:** `MainMenu.html`

```html
<div class="flex flex-col items-center justify-center h-full bg-zinc-900">
  <div class="text-4xl font-bold text-amber-500 mb-8">MY GAME</div>
  <button class="w-64 py-4 bg-amber-600 text-zinc-900 font-bold rounded">
    PLAY
  </button>
</div>
```

**Output:**

- `MainMenu.uxml` - Unity visual tree
- `MainMenu.uss` - Unity styles
- `MainMenu.cs` - C# bindings

## HTML Guidelines

For best Unity compatibility:

```html
<!-- Use flex for layout -->
<div class="flex flex-col w-full h-full">
  <!-- Use w-full h-full for root -->
  <div class="w-full h-full bg-zinc-900">
    <!-- Avoid complex CSS that Unity doesn't support -->
    <!-- Good: flex, padding, margin, colors, borders -->
    <!-- Avoid: grid, transforms, complex animations -->
  </div>
</div>
```

## Supported Tailwind

**Layout:** `flex`, `flex-col`, `flex-row`, `flex-1`, `items-*`, `justify-*`, `gap-*`
**Sizing:** `w-*`, `h-*`, `w-full`, `h-full`
**Spacing:** `p-*`, `m-*`, `px-*`, `py-*`
**Colors:** `bg-*`, `text-*`, `border-*`
**Typography:** `text-xs/sm/base/lg/xl/2xl/3xl/4xl`, `font-bold`
**Borders:** `rounded`, `border`, `border-*`
**States:** `hover:*`

## CLI Commands

```bash
# Visual development
rotten-uitk preview <folder> [--open] [-o output]

# Direct conversion
rotten-uitk convert <file> [-o output]

# Watch mode (CLI)
rotten-uitk watch <folder> -o output

# Templates
rotten-uitk templates [list|copy]
```

## Requirements

- Node.js 18+
- Unity 2021.3+ with UI Toolkit

## License

MIT
npm package: @rottencandy/esbuild-plugin-glslx
Description: A plugin for esbuild that enables importing *.glslx files.
Latest version: 0.0.3

Differences from https://github.com/evanw/esbuild-plugin-glslx :
- Support glslx build options
- Update glslx vertion to 0.2.13

# esbuild-plugin-glslx

A plugin for [esbuild](https://github.com/evanw/esbuild) that adds support for `*.glslx` file imports including shader type checking at build time. [GLSLX](https://github.com/evanw/glslx) is a language extension for GLSL that lets you write multiple WebGL 1.0 shaders in the same file using the `export` keyword. It comes with a [GLSLX Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=evanw.glslx-vscode) that enables standard IDE features for GLSLX including type checking, go-to-definition, symbol renaming, and format-on-save. GLSLX code looks something like this:

```glsl
uniform sampler2D tex;
attribute vec3 pos;
varying vec2 coord;

export void yourVertexShader() {
  coord = pos.xy;
  gl_Position = vec4(pos, 1);
}

export void yourFragmentShader() {
  gl_FragColor = texture2D(tex, coord);
}
```

## Basic Usage

1. Install this plugin in your project:

    ```sh
    npm install --save-dev esbuild-plugin-glslx
    ```

2. Add this plugin to your esbuild build script:

    ```diff
    +const glslxPlugin = require('esbuild-plugin-glslx')
     ...
     esbuild.build({
       ...
       plugins: [
    +    glslxPlugin(),
       ],
     })
    ```

3. Import your `*.glslx` file from JavaScript:

    ```js
    import { yourVertexShader, yourFragmentShader } from './shaders.glslx'

    // Each shader is a string that you can pass to your WebGL 1.0 rendering engine of choice
    const material = THREE.RawShaderMaterial({
      vertexShader: yourVertexShader,
      fragmentShader: yourFragmentShader,
    })
    ```

## Usage with TypeScript

If you would like to use GLSLX with TypeScript, you'll have to tell the TypeScript compiler how to interpret imports from `*.glslx` files. You have two options:

* One way to do this is to add a blanket type declaration for all `*.glslx` files such that every import is considered to be a string:

    ```ts
    // Save this as the file "glslx.d.ts" alongside your source code
    declare module "*.glslx" {
      var values: Record<string, string>;
      export = values;
    }
    ```

    This means you can't use named imports anymore, but you can still use namespace imports like this:

    ```js
    import * as shaders from './shaders.glslx'
    console.log(shaders.yourVertexShader, shaders.yourFragmentShader)
    ```

* Another way to do this is to generate a `*.glslx.d.ts` file for each `*.glslx` file with a type declaration for each exported shader. This plugin can do that for you if you enable the `writeTypeDeclarations` option:

    ```diff
     const glslxPlugin = require('esbuild-plugin-glslx')

     esbuild.build({
       ...
       plugins: [
         glslxPlugin({
    +      writeTypeDeclarations: true,
         }),
       ],
     })
    ```

    Then you can use any kind of imports in TypeScript including named imports.
npm package: @rottitime/react-address-autocomplete
Description: Address lookup component made in React. You can search via anything from postcodes, towns, countries and this component will try to retrieve a list of possibilities
Latest version: 0.0.5

# React Address Autocomplete

Address lookup component made in React. You can search via anything from postcodes, towns, countries and this component will try to retrieve a list of possibilities

Also provides events like `onSelected` to useful information such as:

- lattitude
- longitude
- country code
- postal code
- state
- zip code

The field has been minimum styling applied so you can utilise your own colors, fonts and ui.

---

## Demo

Full working example: https://rottitime.github.io/react-address-autocomplete/?path=/story/addressautocomplete--default

[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/trusting-blackburn-riq4i1?file=/src/App.js)

<img src="https://rottitime.github.io/react-address-autocomplete/img/screenshot.png" alt="screenhshot" />

---

## Installation

### React Address Autocomplete

React Address Autocomplete is available as an [npm package](https://www.npmjs.com/package/@rottitime/react-address-autocomplete).

**npm:**

```sh
npm install @rottitime/react-address-autocomplete
```

---

## Getting started with React Address Autocomplete

Here is an example of a basic app using Material UI's `AddressAutocomplete` component:

```jsx
import { AddressAutocomplete } from '@rottitime/react-address-autocomplete'

function App() {
  return <AddressAutocomplete />
}
```

---

## Props

- `onSelected`: Triggers once an address has been selected from the list
- `onChange`: as input field changes
- `countrycodes`: Limit search results to one or more countries. must be the ISO 3166-1alpha2 e.g. gb for the United Kingdom, de for Germany.
- `label`: input field label
- `disableStyles`: Remove all styles, Useful if you want to apply your own designs
- all other props for `input` can also be passed

---

## Donations

Your support means so much to me! If you want to treat me you can do so here, but non-financial support is appreciated as much. I’d love it if you’d tell your friends about [my app](https://apimock.net/) or about my work.
On the bottom of the page you can find how your donation is used.

<a href="https://www.buymeacoffee.com/rottitime" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
npm package: @rotundasoftware/baseline
Description: Share code and data between the client and the server in full stack JavaScript applications.
Author: Rotunda Software
Latest version: 14.3.1

# baseline

baseline is a minimalist framework to share domain-specific logic between the client and the server in full stack JavaScript applications.

Use baseline in the browser to enable client-side applications to execute domain-specific logic at blazing speeds, and in the backend as the domain layer of an [onion style architecture](https://www.codeguru.com/csharp/understanding-onion-architecture/).

Interested in pushing boundaries with isomorphic JavaScript? At Rotunda Software, baseline [is a centerpiece](https://www.rotundasoftware.com/blog/rotunda/baseline?r=1) of applications that support over a million users, and we're actively looking to join forces with like-minded adventurers. If that sounds up your alley please get in touch by applying for an [open position](https://www.rotundasoftware.com/careers).
npm package: @rotzbua/ngx-filesize
Description: A filesize.js pipe for Angular
Latest version: 16.0.0

# ngx-filesize

A [filesize.js](https://filesizejs.com) pipe for Angular.

## Preparing

### Install

Install both packages with:

```shell
npm install ngx-filesize filesize
```

### Dependency

The `filesize.js` is not compiled into the `ngx-filesize` rather than has a peer dependency.
So you can maintain the `filesize` dependency by your own.

### Disable warning

> app.component.ts depends on 'filesize'. CommonJS or AMD dependencies can cause optimization bailouts.

Warning can be disabled by [allowing common js](https://angular.io/guide/build#configuring-commonjs-dependencies).

## Usage

### Usage in your module

Required for every module where you use it in your component.

```typescript
import {NgxFilesizeModule} from 'ngx-filesize';

// ...

@NgModule({
  // ...
  imports: [
    // ...
    NgxFilesizeModule,
    // ...
  ]
  // ...
})
```

#### Usage in your component template

Without any option:

```html
{{bytes | filesize}}
```

With an option:

```html
{{bytes | filesize: {base: 10} }
```

More options and documentation at https://filesizejs.com/.

## Versioning

The package version should match used angular version to build the library.
Nevertheless, the peer dependency to angular allows higher angular versions to avoid strict versioning problems.

## Source project

https://github.com/amitdahan/ngx-filesize
npm package: @roublez/statement-parser
Description: Statement file parser for roublez accounts and portfolios
Author: Dennis Prudlo
Latest version: 2.1.0

## Add a new converter
1.  Create a new converter file:

The new converter file must be located at the following path, where **entityType** is either `bank-statement` or `portfolio-activity` and **fileType** is one of the supported file types (currently `csv` or `pdf`). The converter must have a descriptive and unique name, such as *AcmeBankConverter.ts*.
`src/converters/{entityType}/{fileType}/{name}Converter.ts`

An institution can have multiple converters if the institution has for example different account statement exports. Each converter will check against the file and will be used, if it is the only converter that matches.

2. Add the converter to the list of supported ones.

In `src/converters/index.ts` is a list of supported converters. Add the name to the correct list.

3. Prepare the contents of the file

The converter must implement a specified set of functions to handle the file. A converter has a readonly property `parsable` to access the parsed file. This is an example for a CSV bank statement converter (A PDF bank statement converter would user the `PDFParsableFile` as the first generic type). The the second generic tyoe `Context` must be the type we expect and item to be. In a CSV file this is usually an array of strings (list of column values per row).
```ts
export default class GenericConverter extends BankStatementConverter<CSVParsableFile, Context> {

    // Determines if the converter can convert the parsed file
    public canConvert () : boolean

    // Prepares the parsed file and cleans up headers, footers and other verbose data
    public prepareToConvert () : Array<Context>

    // Use the context to retrieve the value for the column
    public getBookedAt (context: Context) : string|null
    public getAmount (context: Context) : string
    public getName (context: Context) : string
    public getDescription (context: Context) : string|null
    // ...
}
```
npm package: @rouby/dicelang
Description: A language parsing and execution tool for dice roll.
Author: Jonathan Burke
Latest version: 1.2.0
Deprecated: transfered to organization @aiacta/dicelang

# dicelang

## Installation

```bash
yarn add @rouby/dicelang
```

## Usage

```ts
import Program from '@rouby/dicelang';

...

const [resolution] = await new Program('1d20').run();
resolution.value //? 7
```

Alternatively you can provide a custom implementation for rolling dice:

```ts
import Program from '@rouby/dicelang';

...

const [resolution] = await new Program('1d20').run({
  async roll(faces: number) {
    return 19; // always so close...
  },
});
resolution.value //? 19
```

## Features
npm package: @rouby/event-sourcing
Description: This is an event sourcing library designed to provide a simple and efficient way to handle event sourcing in your applications.
Author: Jonathan Burke
Latest version: 0.59.0

# @rouby/event-sourcing

This is an event sourcing library designed to provide a simple and efficient way to handle event sourcing in your applications.

## Installation

```bash
npm install @rouby/event-sourcing
```

## Usage

The idea is to define models that represent your domain and then apply events to them. The events are then stored in an event store and can be replayed to rebuild the model.

### Events

To declare events you simply create functions that return an object with the event data.

```typescript
export function createEntity(id: string) {
  return {
    type: 'createEntity' as const,
    version: 1,
    payload: {
      id,
      name: 'New Entity',
    },
  };
}

// to add typescript support, we can declare the event type
declare module '@rouby/event-sourcing' {
  interface RegisterEvents {
    createEntity: ReturnType<typeof createEntity>;
  }
}
```

### Models

To declare models you can extend the `Model` class and implement the `applyEvent` method. You can also use the `@applyEvent` decorator to define event handlers.

```typescript
import { Model, applyEvent } from '@rouby/event-sourcing';

export class Entity extends Model {
  kind = 'Entity' as const;

  // This decorator will automatically apply the event to the model
  @applyEvent('createEntity', 'name', matchesId)
  name = '';

  // The constructor should specify the keys needed to uniquely identify an instance of this model
  constructor(public id: string) {
    super();
  }

  applyEvent(event: SourcingEvent) {
    // This is an alternative to using the @applyEvent decorator
    if (event.type === 'createEntity' && event.payload.id === this.id) {
      this.name = event.payload.name;
    }
  }
}

function matchesId(this: Entity, e: { payload: { id: string } }) {
  return e.payload.id === this.id;
}
```

### Bringing it together

```typescript
import { EventSourcing } from '@rouby/event-sourcing';
import { createEntity } from '../events';
import * as models from '../models';

const source = new EventSourcing({ models });

await source.publishEvent({ event: createEntity('1') });

console.log('instance', source.getInstance(models.Entity, '1').name); //? New Entity
```

### Examples

For basic examples on how to use this library see the [examples](./examples) directory.

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

```

```