open-index/open-npm huggingface dataset:
npm package: @htlkg/components
Description: Vue 3 components with reactive state management for Hotelinking applications.
Latest version: 0.0.15

# @htlkg/components

Vue 3 components with reactive state management for Hotelinking applications.

## Installation

```bash
npm install @htlkg/components
```

## Modules

### [Overlays](src/overlays/overlays.md)
Modal dialogs, notifications, alerts, and drawers.

### [Navigation](src/navigation/navigation.md)
Breadcrumbs, stepper, and tabs components.

### [Data](src/data/data.md)
Table, DataList, SearchableSelect, and Chart components.

### [Forms](src/forms/forms.md)
JsonSchemaForm and DateRange components.

### [Domain](src/domain/domain.md)
Domain-specific components: BrandCard, BrandSelector, ProductBadge, UserAvatar.

### [Composables](src/composables/composables.md)
Vue composables for component state management.

### [Stores](src/stores/stores.md)
Pinia stores for global component state.

## Quick Start

```typescript
// Import individual components
import { Alert, Modal, Table } from '@htlkg/components';

// Import from category
import { Alert, Modal } from '@htlkg/components/overlays';
import { Breadcrumbs, Stepper } from '@htlkg/components/navigation';
import { Table, DataList } from '@htlkg/components/data';
```

## Features

- v-model support for two-way binding
- TypeScript support with full type definitions
- Exposed methods for programmatic control
- Consistent API across all components
- Wraps @hotelinking/ui design system
npm package: @htlkg/core
Description: Core utilities, types, authentication, and constants for Hotelinking applications.
Latest version: 0.0.17

# @htlkg/core

Core utilities, types, authentication, and constants for Hotelinking applications.

## Changelog

### 0.0.16
- Added `ActivityLog` type for the admin activity audit trail (immutable entries tracking create/update/delete actions across all models)

## Installation

```bash
npm install @htlkg/core
```

## Modules

### [Amplify Astro Adapter](src/amplify-astro-adapter/amplify-astro-adapter.md)
Server-side authentication support for Astro with AWS Amplify. Cookie-based auth context for SSR.

### [Auth](src/auth/auth.md)
User authentication functions for server-side and client-side. Cognito integration with role-based access.

### [Constants](src/constants/constants.md)
Centralized constants for routes, products, permissions, and user roles.

### [Errors](src/errors/errors.md)
Standardized error classes: `AppError`, `AuthError`, `ValidationError`, `NotFoundError`.

### [Routes](src/routes/routes.md)
Type-safe route definitions with parameter interpolation. Eliminates string literals.

### [Types](src/types/types.md)
Core TypeScript interfaces: `Brand`, `Account`, `User`, `Product`, `ProductInstance`.

### [Utils](src/utils/utils.md)
Common utilities: `logger`, `formatDate`, `truncateText`, `groupBy`, `debounce`, `throttle`.

## Quick Start

```typescript
// Authentication
import { getUser, hasAccessToBrand } from '@htlkg/core/auth';

// Type-safe routes
import { adminRoutes, buildUrl } from '@htlkg/core/routes';

// Constants
import { PERMISSIONS, USER_ROLES } from '@htlkg/core/constants';

// Error handling
import { NotFoundError, ValidationError } from '@htlkg/core/errors';

// Utilities
import { formatDate, debounce } from '@htlkg/core/utils';
```
npm package: @htmelt/env
Description: Embed .env files in your code
Latest version: 0.1.2

# @htmelt/env

Import environment variables from a file at build time.

This plugin is an alternative to using `import.meta.env` and the
`esbuild.define` config option, which is verbose and clumsy to setup.

## Usage

Add the following to your `tsconfig.json` compiler options:

```json
"types": ["@htmelt/env/client"],
```

Then, anywhere in your project, you can use the `inlinedEnvFile` function to
import environment variables from a file at build time.

```ts
interface Variables {
  FOO: string
}

// The given path is relative to the current module. It can point to a file
// or a folder. If a folder is passed, a mode-specific file (e.g. ".env.development")
// will be used if it exists.
export const env = inlinedEnvFile<Variables>('./')
```

## Install

```sh
pnpm install -D @htmelt/env
yarn add -D @htmelt/env
npm install --save-dev @htmelt/env
```
npm package: @htmelt/plugin
Description: [UnoCSS](https://github.com/antfu/unocss) plugin for [HTMelt](https://github.com/alloc/htmelt).
Latest version: 0.5.1

# @htmelt/unocss

[UnoCSS](https://github.com/antfu/unocss) plugin for [HTMelt](https://github.com/alloc/htmelt).

## How It Works

1. It loads your `unocss.config.js` file.
2. It scans your JSX and TSX files for tokens identified by UnoCSS
   plugins/presets.
3. For each JSX and TSX module, it generates a separate CSS file and
   adds it to the document with JavaScript.

## Roadmap

- [ ] Use lightningcss to remove duplicate CSS rules on a per-chunk basis.

## Install

```sh
pnpm install -D @htmelt/unocss
yarn add -D @htmelt/unocss
npm install --save-dev @htmelt/unocss
```

## `import.meta` extensions

The typings of `import.meta` and `import.meta.env` can both be extended
by plugins.

```ts
declare module '@htmelt/plugin/dist/importMeta.mjs' {
  export interface ImportMeta {
    foo: string
  }
  export interface ImportMetaEnv {
    bar: string
  }
}

// Important: Ensure this file is a module
export {}
```

It's recommended to add a `client.d.ts` module to your plugin's root
directory and advise users to include `my-plugin/client` in the `types`
array of their tsconfig (along with `htmelt/client`).

```json
{
  "compilerOptions": {
    "types": ["htmelt/client", "my-plugin/client"]
  }
}
```
npm package: @htmelt/preval
Description: [UnoCSS](https://github.com/antfu/unocss) plugin for [HTMelt](https://github.com/alloc/htmelt).
Latest version: 0.2.0

# @htmelt/unocss

[UnoCSS](https://github.com/antfu/unocss) plugin for [HTMelt](https://github.com/alloc/htmelt).

## How It Works

1. It loads your `unocss.config.js` file.
2. It scans your JSX and TSX files for tokens identified by UnoCSS
   plugins/presets.
3. For each JSX and TSX module, it generates a separate CSS file and
   adds it to the document with JavaScript.

## Roadmap

- [ ] Use lightningcss to remove duplicate CSS rules on a per-chunk basis.

## Install

```sh
pnpm install -D @htmelt/unocss
yarn add -D @htmelt/unocss
npm install --save-dev @htmelt/unocss
```
npm package: @htmelt/unocss
Description: [UnoCSS](https://github.com/antfu/unocss) plugin for [HTMelt](https://github.com/alloc/htmelt).
Latest version: 0.4.0

# @htmelt/unocss

[UnoCSS](https://github.com/antfu/unocss) plugin for [HTMelt](https://github.com/alloc/htmelt).

## How It Works

1. It loads your `unocss.config.js` file.
2. It scans your JSX and TSX files for tokens identified by UnoCSS
   plugins/presets.
3. For each JSX and TSX module, it generates a separate CSS file and
   adds it to the document with JavaScript.

## Roadmap

- [ ] Use lightningcss to remove duplicate CSS rules on a per-chunk basis.

## Install

```sh
pnpm install -D @htmelt/unocss
yarn add -D @htmelt/unocss
npm install --save-dev @htmelt/unocss
```
npm package: @htmelt/webext
Description: Develop web extensions with `htmelt`.
Latest version: 0.3.0

# @htmelt/webext

Develop web extensions with `htmelt`.

&nbsp;

## Features

- Automatic extension reloading
- Support for Chromium and Firefox
- TypeScript definitions for `manifest.json` schema
- Platform-specific logic with `import.meta.platform`

&nbsp;

## Install

```sh
pnpm install -D @htmelt/unocss
yarn add -D @htmelt/unocss
npm install --save-dev @htmelt/unocss
```

&nbsp;

## Quick Start

First, make sure you have `manifest.json` in your gitignore file, because it will be generated automatically.

```sh
echo manifest.json >> .gitignore
```

If you have a manifest in your project already, move it into your `bundle.config.js` file.

```js
// bundle.config.js
import webext from '@htmelt/webext'

export default {
  plugins: [
    webext({
      manifest: { ... },
    })
  ]
}
```

Then, add the following to your `package.json`:

```json
{
  "scripts": {
    "build": "htmelt",
    "build:chrome": "htmelt --platform chrome",
    "build:firefox": "htmelt --platform firefox",
    "dev": "htmelt --watch",
    "dev:chrome": "htmelt --watch --platform chrome",
    "dev:firefox": "htmelt --watch --platform firefox"
  }
}
```

&nbsp;

## Usage

When using the `htmelt` command in your terminal, you should include the
`--platform` flag if you have multiple `targets` defined; otherwise, the
first target will always be used.

```sh
htmelt --platform chromium
```

You can use these platform aliases if you prefer:

- `chrome` is an alias for `chromium`
- `firefox` is an alias for `firefox-desktop`

&nbsp;

### Platform-specific behavior

Use `import.meta.platform` to check if the extension is running in
Chromium or Firefox.

```ts
if (import.meta.platform === 'chromium') {
  // Chromium-specific code
} else {
  // Firefox-specific code
}
```

The condition is evaluated at build time, so the code that is not
relevant to the current platform will be removed from the bundle.

For `import.meta.platform` to be recognized in TypeScript, you need to
include `@htmelt/webext` and `htmelt/client` in the `types` array of
your tsconfig.

```json
{
  "compilerOptions": {
    "types": ["@htmelt/webext"]
  }
}
```

### Conditional manifest

The `manifest` option can be a function that takes the target platform. By default, the returned manifest object allows both MV3 and MV2 properties. If you want strict type safety for either MV2 or MV3, you can declare the return type explicitly.

```ts
// bundle.config.mts
import { defineConfig } from 'htmelt/config.mjs'
import webext, { WebExtension } from '@htmelt/webext'

export default defineConfig({
  plugins: [
    webext({
      manifest: (platform): WebExtension.ManifestV3 => ({
        manifest_version: 2, // Type '2' is not assignable to type '3'. ts(2322)
      }),
    }),
  ],
})
```
npm package: @htmimi/file-upload
Description: 文件上传
Latest version: 1.2.4

# FileUpload

文件上传 0

## Installing

Inside your React project directory, run the following:

```bash
yarn add @htmimi/file-upload -S
```

Or with npm:

```bash
npm install @htmimi/file-upload -S
```

## FileUpload

```javascript
import FileUpload from '@htmimi/file-upload';

() => <FileUpload />;
```
npm package: @htmimi/input-price
Description: 价格输入框
Latest version: 1.2.5

# InputPrice

价格输入框

## Installing

Inside your React project directory, run the following:

```bash
yarn add @htmimi/input-price -S
```

Or with npm:

```bash
npm install @htmimi/input-price -S
```

## InputPrice

```javascript
import InputPrice from '@htmimi/input-price';

() => <InputPrice />;
```
npm package: @htmimi/more-line-input
Description: 多行输入框
Latest version: 1.1.6

# MoreLineInput

多行输入框

## Installing

Inside your React project directory, run the following:

```bash
yarn add @htmimi/more-line-input -S
```

Or with npm:

```bash
npm install @htmimi/more-line-input -S
```

## MoreLineInput

```javascript
import MoreLineInput from '@htmimi/more-line-input';

() => <MoreLineInput />;
```
npm package: @htmimi/request
Description: 网络请求库
Latest version: 1.0.3

# Request

网络请求库

## Installing

Inside your React project directory, run the following:

```bash
yarn add @htmimi/request -S
```

Or with npm:

```bash
npm install @htmimi/request -S
```

## Request

```javascript
import Request from '@htmimi/request';

() => <Request />;
```
npm package: @htmimi/textarea
Description: TextArea
Latest version: 1.0.3

# TextareaShowCount

TextareashowCount

## Installing

Inside your React project directory, run the following:

```bash
yarn add @htmimi/textarea -S
```

Or with npm:

```bash
npm install @htmimi/textarea -S
```

## TextareaShowCount

```javascript
import TextareaShowCount from '@htmimi/textarea';

() => <TextareaShowCount />;
```
npm package: @htmimi/utils
Description: 函数库
Latest version: 1.2.3

# Utils

函数库

## Installing

Inside your React project directory, run the following:

```bash
yarn add @htmimi/utils -S
```

Or with npm:

```bash
npm install @htmimi/utils -S
```

## Utils

```javascript
import Utils from '@htmimi/utils';

() => <Utils />;
```