open-index/open-npm huggingface dataset:
npm package: @pmu-tech/react-native-piano-analytics
Description: Piano Analytics
Author: PMU Tech
Latest version: 0.7.5

# @pmu-tech/react-native-piano-analytics

React Native Piano Analytics

# Installation in managed Expo projects

For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](#api-documentation). If you follow the link and there is no documentation available then this library is not yet usable within managed projects &mdash; it is likely to be included in an upcoming Expo SDK release.

# Installation in bare React Native projects

For bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.

### Add the package to your npm dependencies

```
npm install @pmu-tech/react-native-piano-analytics
```

### Configure for iOS

Run `npx pod-install` after installing the npm package.

# Usage

You may want to give a try? Run example application in `./example`.

## import react-native-piano-analytics

```javascript
import * as PianoAnalytics from '@pmu-tech/react-native-piano-analytics';
```

## Set a configuration (mandatory)

```javascript
function setConfiguration(collectionName: string, siteId: number): void
```

## Set Privacy consent (mandatory)

By default Piano Analytics will set **"no-consent"** mode.

```javascript
type PrivacyMode = 'optin' | 'exempt' | 'no-storage' | 'no-consent' | 'optout';

// SET:
function privacySetMode(mode: PrivacyMode): void

// GET:
function privacyGetMode(): PrivacyMode
```

## Set User

```javascript
// SET USER:
function setUser(userId: string, category: string, enableStorage: boolean): void
```

## Set Privacy id

```javascript
// SET PRIVACY ID:
function setVisitorId(visitorId: string): void

// GET PRIVACY ID:
function getVisitorId(): string
```

## Set Privacy Property

```javascript
// SET PRIVACY INCLUDE PROPERTY :
function privacyIncludeProperty(property: string, privacyModes?: string[], eventNames?: string[]): void

// SET PRIVACY INCLUDE PROPERTIES:
function privacyIncludeProperties(properties: [string], privacyModes?: string[], eventNames?: string[]): void
```

## Send events

```javascript
export type EventName = string;
function sendEvent(eventName: EventName, params: Record<string, string>): void
```

# Contributing

Contributions are very welcome! Please refer to guidelines described in the [contributing guide](https://github.com/expo/expo#contributing).
npm package: @pmuir-solo/google-docs-mcp
Description: MCP server for Google Docs and Drive integration - read, write, format documents and manage files
Author: Peter Muir
Latest version: 1.0.8

# Ultimate Google Docs & Drive MCP Server

Modified version that just passes through Authorization header

## License

This project is licensed under the MIT License - see the `LICENSE` file for details. (Note: You should add a `LICENSE` file containing the MIT License text to your repository).
npm package: @pmun/utils
Description: Sunpm 的主观个人工具函数库
Author: sunpm
Latest version: 0.6.0

# @pmun/utils

[![npm version](https://img.shields.io/npm/v/@pmun/utils.svg)](https://www.npmjs.com/package/@pmun/utils)
[![license](https://img.shields.io/npm/l/@pmun/utils.svg)](https://github.com/sunpm/@pmun/utils/blob/main/LICENSE)

一个轻量级、模块化的 TypeScript 工具函数库，为日常开发提供便捷实用的工具集合。

[访问全部 API](https://sunpm.github.io/sunpm-utils/globals) 查看全部的 API，包含每个函数的说明、参数、返回值和使用示例。

## 特点

- 🚀 **轻量级**：按需引入，不增加项目体积
- 🧩 **模块化**：合理划分模块，易于使用和维护
- 📦 **零依赖**：除日期处理外无外部依赖
- 🔒 **类型安全**：完全使用 TypeScript 编写，提供完整类型定义
- 💯 **测试全面**：每个函数都有完善的单元测试

## 安装

```bash
# npm
npm install @pmun/utils

# yarn
yarn add @pmun/utils

# pnpm
pnpm add @pmun/utils
```

## 使用

从主入口导入需要的函数：

```typescript
// 导入需要的函数
import { chunk, formatDate, isString, unique } from '@pmun/utils'

// 使用数组工具函数
const arr = [1, 2, 2, 3, 3, 4]
const uniqueArr = unique(arr) // [1, 2, 3, 4]
const chunks = chunk(arr, 2) // [[1, 2], [2, 3], [3, 4]]

// 使用日期格式化
const formattedDate = formatDate(new Date(), 'YYYY-MM-DD') // 例如：'2023-11-10'

// 使用类型检查
console.log(isString('hello')) // true
```

## 功能模块

库中包含以下功能模块的工具函数：

- **数组操作 (array)**：数组去重、分块、查找、过滤、转换等处理函数
- **日期时间 (date)**：日期格式化、计算、比较等函数
- **字符串处理 (string)**：字符串转换、格式化、验证等
- **对象操作 (object)**：对象深拷贝、合并、转换等
- **数字处理 (number)**：数字格式化、四舍五入、范围控制等
- **类型检查 (is)**：各种数据类型的判断函数

## 许可证

[MIT](LICENSE)
npm package: @pmwcs/alert
Description: PMWCS alert component
Latest version: 1.1.0

# Alert (PMWCS Addon)

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

- Module **@pmwcs/alert**
- Import styles:
  - Using CSS Loader
    - import '@pmwcs/alert/styles';
  - Or include stylesheets
    - **'@pmwcs/alert/alert.css'**

```jsx
<>
  <Alert severity='error'>This is an error alert — check it out!</Alert>
  <Alert severity='warning'>This is a warning alert — check it out!</Alert>
  <Alert severity='info'>This is an info alert — check it out!</Alert>
  <Alert severity='success'>This is a success alert — check it out!</Alert>
</>
```

**defaults to a warning alert**
```jsx
<Alert>This is a warning alert — check it out!</Alert>
```

**use with custom icon**
```jsx
<Alert icon='check' severity='success'>This is a success alert — check it out!</Alert>
```

**don't display an icon**
```jsx
<Alert icon={false} severity='success'>This is a success alert — check it out!</Alert>
```

## Variants

### Outlined

```jsx
<>
  <Alert outlined severity='error'>This is an error alert — check it out!</Alert>
  <Alert outlined severity='warning'>This is a warning alert — check it out!</Alert>
  <Alert outlined severity='info'>This is an info alert — check it out!</Alert>
  <Alert outlined severity='success'>This is a success alert — check it out!</Alert>
</>
```

### Filled

```jsx
<>
  <Alert filled severity='error'>This is an error alert — check it out!</Alert>
  <Alert filled severity='warning'>This is a warning alert — check it out!</Alert>
  <Alert filled severity='info'>This is an info alert — check it out!</Alert>
  <Alert filled severity='success'>This is a success alert — check it out!</Alert>
</>
```

## Actions

```jsx
<>
  <Alert onClose={() => {}}>This is a success alert — check it out!</Alert>

  <Alert
    action={
      <Button>
        UNDO
      </Button>
    }
  >
    This is a success alert — check it out!
  </Alert>
</>
```

## Alert
Displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

### Props

| Name | Type | Description |
|------|------|-------------|
| `outlined` | `undefined \| false \| true` | Makes the alert outlined. |
| `filled` | `undefined \| false \| true` | Makes the alert filled. |
| `action` | `AnyComponent` | The action to display. It renders after the message, at the end of the alert. |
| `severity` | `success \| info \| warning \| error` | The size of the avatar |
| `icon` | `AnyComponent` | Override the icon displayed before the children. |
| `onClose` | `(event: Event) => void` | Callback fired when the component requests to be closed. |
npm package: @pmwcs/button
Description: PMWCS button component
Latest version: 1.1.0

# Buttons

Buttons communicate the action that will occur when the user touches them.

- Module **@pmwcs/button**
- Import styles:
  - Using CSS Loader
    - import '@pmwcs/button/styles';
  - Or include stylesheets
    - **'@material/button/dist/mdc.button.css'**
    - **'@pmwcs/@pmwcs/icon/icon.css'**
    - **'@material/ripple/dist/mdc.ripple.css'**
- MDC Docs: [https://material.io/develop/web/components/buttons/](https://material.io/develop/web/components/buttons/)

```jsx
<Button label="Button" />
```

```jsx
<>
  <Button label="Icon" icon="favorite" />
  <Button label="Trailing" trailingIcon="keyboard_arrow_right" />
  <Button label="Loading" icon={<CircularProgress />} />
</>
```

```jsx
<>
  <Button label="Raised" raised />
  <Button label="Unelevated" unelevated />
  <Button label="Outlined" outlined />
  <Button label="Dense" dense />
  <Button label="No Ripple" ripple={false} />
</>
```

```jsx
<>
  <Button label="Danger" danger raised />
  <Button label="Danger" danger outlined />
  <Button label="Danger" danger />
</>
```

```jsx
<>
  <Button
    label="With Theme"
    raised
    theme={['secondaryBg', 'onSecondary']}
  />
  {/**
    This example uses "accent" to control the color of the Ripple.
    See the documentation on Ripples.
  */}
  <Button label="With Theme" theme="secondary" />
</>
```

```jsx
<Button>
  {/** Alternatively pass content as children */}
  As Children
</Button>
```

## Button
The Button component.

### Props

| Name | Type | Description |
|------|------|-------------|
| `children` | `React.ReactNode` | Content specified as children. |
| `danger` | `undefined \| false \| true` | Used to indicate a dangerous action. |
| `dense` | `undefined \| false \| true` | Make the Button dense. |
| `disabled` | `undefined \| false \| true` | Make the button disabled |
| `activated` | `undefined \| false \| true` | Make the button activated |
| `icon` | `PMWCS.IconPropT` | An Icon for the Button |
| `label` | `React.ReactNode \| any` | Content specified as a label prop. |
| `primary` | `undefined \| false \| true` | Make the button primary. |
| `secondary` | `undefined \| false \| true` | Make the button secondary. |
| `outlined` | `undefined \| false \| true` | Make the button outlined. |
| `raised` | `undefined \| false \| true` | Make the Button raised. |
| `ripple` | `RipplePropT` | Adds a ripple effect to the component |
| `trailingIcon` | `PMWCS.IconPropT` | A trailing icon for the Button |
| `unelevated` | `undefined \| false \| true` | Make the button unelevated. |

## References

- https://material-components.github.io/material-components-web-catalog/#/component/button
npm package: @pmwcs/button-group
Description: PMWCS button-group component
Latest version: 1.1.0

# ButtonGroup (PMWCS Addon)

The ButtonGroup component can be used to group related buttons.

- Module **@pmwcs/button-group**
- Import styles:
  - Using CSS Loader
    - import '@pmwcs/button-group/styles';
  - Or include stylesheets
    - **'@pmwcs/button-group/button-group.css'**
- MDC Docs: [https://material.io/develop/web/components/buttons/](https://material.io/develop/web/components/buttons/)

```jsx
<ButtonGroup>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
```

```jsx
<ButtonGroup raised dense>
  <Button><Icon icon='favorite' /></Button>
  <Button><Icon icon='local_pizza' /></Button>
  <Button><Icon icon='mood' /></Button>
</ButtonGroup>
```

## ButtonGroup
The Button component.

### Props

| Name | Type | Description |
|------|------|-------------|
| `children` | `AnyComponent` | Content specified as children. |
| `dense` | `undefined \| false \| true` | Make the Button dense. |
| `disabled` | `undefined \| false \| true` | Make the button disabled |
| `outlined` | `undefined \| false \| true` | Make the button outlined. |
| `raised` | `undefined \| false \| true` | Make the Button raised. |
| `ripple` | `RipplePropT` | Adds a ripple effect to the component |
| `unelevated` | `undefined \| false \| true` | Make the button unelevated. |

## References

- https://material-components.github.io/material-components-web-catalog/#/component/button
npm package: @pmwcs/checkbox
Description: PMWCS checkbox component
Latest version: 1.1.0

# Checkboxes

Checkboxes allow the user to select multiple options from a set.

- Module **@pmwcs/checkbox**
- Import styles:
  - Using CSS Loader
    - import '@pmwcs/checkbox/styles';
  - Or include stylesheets
    - **'@material/checkbox/dist/mdc.checkbox.css'**
    - **'@material/form-field/dist/mdc.form-field.css'**
    - **'@material/ripple/dist/mdc.ripple.css'**
- MDC Docs: [https://material.io/develop/web/components/input-controls/checkboxes/](https://material.io/develop/web/components/input-controls/checkboxes/)

```jsx
function Example() {
  const [checked, setChecked] = React.useState(false);
  return (
    <Checkbox
      label="Cookies"
      checked={checked}
      onChange={evt => setChecked(!!evt.currentTarget.checked)}
    />
  );
}
```

```jsx
<Checkbox label="Pizza" />
```

```jsx
<Checkbox>Icecream</Checkbox>
```

```jsx
<>
  <Checkbox label="Broccoli" indeterminate />

  <Checkbox label="Always On" checked />
  <Checkbox label="Always Off" checked={false} />
</>
```

## Checkbox
A Checkbox component.

### Props

| Name | Type | Description |
|------|------|-------------|
| `checked` | `undefined \| false \| true` | Toggle the control on and off. |
| `disabled` | `undefined \| false \| true` | Disables the control. |
| `foundationRef` | `React.Ref<MDCCheckboxFoundation>` | Advanced: A reference to the MDCFoundation. |
| `id` | `undefined \| string` | A DOM ID for the toggle. |
| `indeterminate` | `undefined \| false \| true` | Make the control indeterminate |
| `inputRef` | `React.Ref<HTMLInputElement>` | A reference to the native input. |
| `label` | `React.ReactNode` | A label for the control. |
| `ripple` | `RipplePropT` | Adds a ripple effect to the component |
| `rootProps` | `React.HTMLProps<any>` | By default, all props except className and style spread to the input. These are additional props for the root of the checkbox. |
| `value` | `string \| number \| string[]` | The value of the control. |
npm package: @pmwcs/circular-progress
Description: PMWCS circular-progress component
Latest version: 1.1.0

# Circular Progress (PMWCS Addon)

> Circular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card.

- Module **@pmwcs/circular-progress**
- Import styles:
  - Using CSS Loader
    - import '@pmwcs/circular-progress/styles';
  - Or include stylesheets
    - **'@pmwcs/circular-progress/circular-progress.css'**


## Basic Usage

```jsx
<CircularProgress />
```

```jsx
<>
  <CircularProgress progress={0.3} />
  <CircularProgress progress={0.6} />
  <CircularProgress progress={0.9} />
</>
```

## Sizing

```jsx
<>
  <CircularProgress size="xsmall" />
  <CircularProgress size="small" />
  <CircularProgress size="medium" />
  <CircularProgress size="large" />
  <CircularProgress size="xlarge" />
  <CircularProgress size={72} />
</>
```

## Usage with other components

```jsx
<>
  <Button
    icon={<CircularProgress theme="secondary" />}
    label="Cookies"
  />

  <List>
    <SimpleListItem graphic={<CircularProgress />} text="Pizza" />
    <SimpleListItem graphic="favorite" text="Icecream" />
  </List>

  <Chip icon={<CircularProgress />} label="Donuts" />
</>
```

## CircularProgress
A Circular Progress indicator.

### Props

| Name | Type | Description |
|------|------|-------------|
| `max` | `undefined \| number` | Max value for determinate progress bars. |
| `min` | `undefined \| number` | Min value for determinate progress bars. |
| `progress` | `undefined \| number` | Value for determinate progress bars. |
| `size` | `"xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| number` | The size of the loader you would like to render. |
| `secondary` | `true \| false \| undefined` | Use secondary theme. |
| `standard` | `true \| false \| undefined` | Use standard theme. |
npm package: @pmwcs/data-table-pagination
Description: PMWCS data-table-pagination component
Latest version: 1.1.0

# Data Table Pagination (PMWCS Addon)

Pagination for data tables.

- Module **@pmwcs/data-table-pagination**
- Import styles:
  - Using CSS Loader
    - import '@pmwcs/data-table-pagination/styles';
  - Or include stylesheets
    - **'@pmwcs/data-table-pagination/data-table-pagination.css'**
    - **'@pmwcs/icon-button/styles'**
    - **'@pmwcs/select/styles'**

## Uncontrolled

```jsx
<DataTablePagination
  defaultPage={1}
  count={12}
  onChangePage={(evt, page) => {}}
  onChangeRowsPerPage={(evt, rowsPerPage) => {}}
/>
```

## Controlled

```jsx
function Controlled ({ page: page_, count = 55 }) {
  const [page, setPage] = useState(page_)
  const rowsPerPageOptions = [
    10, 25, { value: -1, label: 'Todas' }
  ]
  const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageOptions[0])

  return (
    <DataTablePagination
      count={count}
      page={page}
      rowsPerPage={rowsPerPage}
      rowsPerPageOptions={rowsPerPageOptions}
      onChangePage={(_, page) => setPage(page)}
      onChangeRowsPerPage={(_, rowsPerPage) => setRowsPerPage(rowsPerPage)}
      labelRowsPerPage='Filas por página'
      labelDisplayedRows={({ from, to, count }) => `del ${from} a ${to} ${count === -1 ? '' : `de ${count}`}`}
    />
  )
}
```

## DataTablePagination
The DataTablePagination Component.

### Props

| Name | Type | Description |
|------|------|-------------|
| `count` | `number` | The total number of rows. To enable server side pagination for an unknown number of items, provide -1. |
| `page` | `number` | The zero-based index of the current page. |
| `rowsPerPage` | `number` | The number of rows per page. |
| `rowsPerPageOptions` | `Array<number \| { value: number; label: string }>` | Customizes the options of the rows per page select field. <br> If one option is available, no select field will be displayed. <br> `[10, 50, { value: -1, label: 'All' }]` the value and label keys will be used respectively for the value and label of the option. <br> default is `[10, 25, 50, 100]` |
| `onChangePage` | `(event: Event) => void` | Callback fired when the page is changed. |
| `onChangeRowsPerPage` | `(event: Event) => void` | Callback fired when the number of rows per page is changed. |
| `labelRowsPerPage` | `AnyComponent` | Label for rows per page. Default 'Rows per page:' |
| `labelDisplayedRows` | `({ from, to, count }) => string` | Customize the displayed rows label. Default `({ from, to, count }) => ${from}-${to} of ${count !== -1 ? count : more than ${to}}` |
npm package: @pmwcs/elevation
Description: PMWCS elevation component
Latest version: 1.1.0

# Elevation

> Elevation is the relative distance between two surfaces along the z-axis.

- Module **@pmwcs/elevation**
- Import styles:
  - Using CSS Loader
    - import '@pmwcs/elevation/styles';
  - Or include stylesheets
    - **'@material/elevation/dist/mdc.elevation.css'**
- MDC Docs: [https://material.io/develop/web/components/elevation/](https://material.io/develop/web/components/elevation/)

```jsx
<>
  {Array(25)
    .fill(undefined)
    .map((val, i) => (
      <Elevation z={i} key={i}>
        {i}dp
      </Elevation>
    ))}
</>
```

```jsx
function Example() {
  const [elevation, setElevation] = React.useState(0);

  return (
    <Elevation
      z={elevation}
      transition
      onMouseOver={() => setElevation(24)}
      onMouseOut={() => setElevation(0)}
    >
      Hover Me {elevation}dp
    </Elevation>
  );
}
```

## Wrapping Children

You can avoid adding extra DOM nodes by using the `wrap` prop on elevation. This will apply the classes directly to the child component. Additionally, Elevation is simply a `className`, so you can achieve the same effect by adding `className="mdc-elevation--z15"`.

```jsx
<Elevation z={21} wrap>
  <span>Wrapped!</span>
</Elevation>
```

## Elevation
The Elevation Component

### Props

| Name | Type | Description |
|------|------|-------------|
| `transition` | `undefined \| false \| true` | Allows for smooth transitions between elevations when the z value changes. |
| `wrap` | `undefined \| false \| true` | Allows the elevation classes to be merged onto the child component instead of creating an new DOM node. |
| `z` | `number \| string` | A number from 0 - 24 for different levels of elevation |
npm package: @pmwcs/ellipsis
Description: PMWCS ellipsis component
Latest version: 1.1.0

# Ellipsis (PMWCS Addon)

Shortens a text with an ellipsis (...).

- Module **@pmwcs/ellipsis**
- Import styles:
  - Using CSS Loader
    - import '@pmwcs/ellipsis/styles';
  - Or include stylesheets
    - **'@pmwcs/ellipsis/ellipsis.css'**

```jsx
<Ellipsis>This is a long long long long text</Ellipsis>
```

## Ellipsis
Shortens a text with an ellipsis (...).

### Props

| Name | Type | Description |
|------|------|-------------|
| `style` | `object` | additional style. |
| `className` | `string` | additional classname(s). |
| `children` | `AnyComponent` | children components |
npm package: @pmwcs/fab
Description: PMWCS fab component
Latest version: 1.1.0

# Fabs

A floating action button (FAB) represents the primary action of a screen.

- Module **@pmwcs/fab**
- Import styles:
  - Using CSS Loader
    - import '@pmwcs/fab/styles';
  - Or include stylesheets
    - **'@material/fab/dist/mdc.fab.css'**
    - **'@pmwcs/icon/icon.css'**
    - **'@material/ripple/dist/mdc.ripple.css'**
- MDC Docs: [https://material.io/develop/web/components/buttons/floating-action-buttons/](https://material.io/develop/web/components/buttons/floating-action-buttons/)

```jsx
<Fab icon="favorite" />
```

```jsx
<Fab icon="favorite" mini />
```

```jsx
<>
  <Fab icon="add" label="Create" />
  <Fab trailingIcon="add" label="Create" />
  <Fab label="Label only" />
</>
```

```jsx
<>
  <Fab icon="favorite_outline" theme={['primaryBg', 'onPrimary']} />
  <Fab
    icon="delete"
    style={{ backgroundColor: 'var(--mdc-theme-error)' }}
    theme={['onError']}
  />
</>
```

## Fab
A floating action button component

### Props

| Name | Type | Description |
|------|------|-------------|
| `children` | `React.ReactNode` | Content specified as children. |
| `exited` | `undefined \| false \| true` | Animates the FAB out of view. When this class is removed, the FAB will return to view. |
| `icon` | `PMWCS.IconPropT` | The icon for the FAB |
| `label` | `React.ReactNode &amp; any` | Make the Fab extended with a label. |
| `mini` | `undefined \| false \| true` | Make the Fab smaller. |
| `ripple` | `RipplePropT` | Adds a ripple effect to the component |
| `trailingIcon` | `PMWCS.IconPropT` | A trialing icon for the FAB |
npm package: @pmwcs/formfield
Description: PMWCS formfield component
Latest version: 1.1.0

# Form Fields

> MDC Form Field provides an mdc-formfield helper class for easily making theme-aware, RTL-aware form field + label combos. It also provides an MDCFormField class for easily making input ripples respond to label events.

- Module **@pmwcs/formfield**
- Import styles:
  - Using CSS Loader
    - import '@pmwcs/formfield/styles';
  - Or include stylesheets
    - **'@material/form-field/dist/mdc.form-field.css'**
- MDC Docs: [https://material.io/develop/web/components/input-controls/form-fields/](https://material.io/develop/web/components/input-controls/form-fields/)

```jsx
<FormField>
  <input type="checkbox" id="input" />
  <label htmlFor="input">Input Label</label>
</FormField>
```

## FormField
A FormField component.

### Props

| Name | Type | Description |
|------|------|-------------|
| `alignEnd` | `undefined \| false \| true` | Position the input after the label. |
| `foundationRef` | `React.Ref<MDCFormFieldFoundation>` | Advanced: A reference to the MDCFoundation. |
npm package: @pmwcs/grid
Description: PMWCS grid component
Latest version: 1.1.0

# Layout Grid

> Material design’s responsive UI is based on a column-variate grid layout. It has 12 columns on desktop, 8 columns on tablet and 4 columns on phone.

- Module **@pmwcs/grid**
- Import styles:
  - Using CSS Loader
    - import '@pmwcs/grid/styles';
  - Or include stylesheets
    - **'@material/layout-grid/dist/mdc.layout-grid.css'**
- MDC Docs: [https://material.io/develop/web/components/layout-grid/](https://material.io/develop/web/components/layout-grid/)

```jsx
<Grid>
  <GridCell span={4}>1</GridCell>
  <GridCell span={4}>2</GridCell>
  <GridCell span={4}>3</GridCell>
</Grid>
```

```jsx
<Grid>
  {/* If you need additional control over height of your grid, or need to add SubGrids, you can add your own GridRow components. */}
  <GridRow>
    <GridCell span={6}>1</GridCell>
    <GridCell span={6}>
      <GridRow>
        <GridCell span={6}>a</GridCell>
        <GridCell span={6}>b</GridCell>
      </GridRow>
    </GridCell>
  </GridRow>
</Grid>
```

## Grid
A Grid component

### Props

| Name | Type | Description |
|------|------|-------------|
| `align` | `"left" \| "right"` | Specifies the alignment of the whole grid. |
| `children` | `React.ReactNode` | Children for the Grid |
| `fixedColumnWidth` | `undefined \| false \| true` | Specifies the grid should have fixed column width. |


## GridCell
A Grid cell

### Props

| Name | Type | Description |
|------|------|-------------|
| `align` | `"top" \| "middle" \| "bottom"` | Specifies the alignment of cell |
| `desktop` | `undefined \| number` | Number of columns to span on a desktop. |
| `order` | `undefined \| number` | Specifies the order of the cell. |
| `phone` | `undefined \| number` | Number of columns to span on a phone. |
| `span` | `undefined \| number` | Default number of columns to span. |
| `tablet` | `undefined \| number` | Number of columns to span on a tablet. |


## GridRow
By default, an inner grid component is included inside of <Grid>. Use GridRow when doing nested Grids.
npm package: @pmwcs/hooks
Description: PMWCS hooks
Latest version: 1.1.0

# Hooks

Hooks for pmwcs.

- Module **@pmwcs/hooks**

The module contains hooks for

- `unstated` for context provider components (credits to [unstated-next](https://github.com/jamiebuilds/unstated-next))
- `useFetch` data fetching hook
- `fetchRetry`, `fetchTimeout` fetch helpers for retry and timeout

## unstated

State management

```jsx
import { createContainer } from '@pmwcs/hooks'

function useCounter (initialState = 0) {
  const [count, setCount] = useState(initialState)
  const increment = () => setCount(count + 1)
  return { count, increment }
}
// create Counter Container
const Counter = createContainer(useCounter)

function CounterDisplay () {
  // attach to context
  const counter = Counter.useContainer()
  return (
    <div>
      <span>{counter.count}</span>
      <button onClick={() => { counter.increment() }}>+</button>
    </div>
  )
}

function App () {
  return (
    <Counter.Provider initialState={2}>
      <CounterDisplay />
    </Counter.Provider>
  )
}
```

## useFetch

Hook to fetch remote data.

```jsx
import { useFetch } from '@pmwcs/hooks'

function Fetch ({ url, options, reducer }) {
  const { data, error, isLoading } = useFetch(url, options, reducer)

  return isLoading
    ? (<div>Loading ...</div>)
    : error
      ? (<div>{err.message}</div>)
      : (<div>{JSON.stringify(data)}</div>)
}

const reducer = ({body}) => body

function App () {
  return (
    <Fetch
      url='https://jsonplaceholder.typicode.com/posts/1'
      reducer={reducer}
    />
  )
}
```
npm package: @pmwcs/linear-progress
Description: PMWCS linear-progress component
Latest version: 1.1.0

# Linear Progress

> Progress and activity indicators are visual indications of an app loading content.

- Module **@pmwcs/linear-progress**
- Import styles:
  - Using CSS Loader
    - import '@pmwcs/linear-progress/styles';
  - Or include stylesheets
    - **'@material/linear-progress/dist/mdc.linear-progress.css'**
- MDC Docs: [https://material.io/develop/web/components/linear-progress/](https://material.io/develop/web/components/linear-progress/)

```jsx
<LinearProgress progress={0.5} />
```

```jsx
<LinearProgress progress={0.6} buffer={0.8} />
```

```jsx
<LinearProgress />
```

```jsx
<LinearProgress progress={0.2} reversed />
```

## LinearProgress
A component to display linear progress.

### Props

| Name | Type | Description |
|------|------|-------------|
| `buffer` | `undefined \| number` | A Progress buffer float percentage between 0 and 1. |
| `closed` | `undefined \| false \| true` | Hides the progress bar. Adding / removing this prop will trigger an animation in or out. |
| `foundationRef` | `React.Ref<MDCLinearProgressFoundation>` | Advanced: A reference to the MDCFoundation. |
| `progress` | `undefined \| number` | Progress float percentage between 0 and 1. |
| `reversed` | `undefined \| false \| true` | Progress goes from right to left. |
npm package: @pmwcs/provider
Description: PMWCS provider component
Latest version: 1.1.0

# Provider

A component that provides global configuration for PMWCS.

- Module **@pmwcs/provider**


You can wrap your top level App component with PMWCS provider to set global configuration options. Just pass the options in as props.

```jsx

  `
  import { h } from 'preact'
  import * as ReactDOM from 'react-dom';
  import App from './App'; // your main app component
  import { PMWCSProvider } from '@pmwcs/provider';

  // This example disables ripples globally by default
  ReactDOM.render(
    <PMWCSProvider
      // Globally disable ripples
      ripple={false}
      // Global options for icons
      // Takes the same options as the icon component
      icon={{
        basename: 'material-icons'
      }}
      // Global options for typography
      // allows mapping of a defaultTag or specific classes
      // See the Typography docs for more info
      typography={{
        defaultTag: 'div',
        headline1: 'h1'
      }}
      // Global options for tooltips
      // Takes most of the options for tooltips
      // See the Tooltip docs for more info
      tooltip={{
        align: 'right'
      }}
    >
      <App />
    </PMWCSProvider>,
    document.getElementById('root'),
  );
`

```

## PMWCSProvider
A provider for setting global options in PMWCS.

### Props

| Name | Type | Description |
|------|------|-------------|
| `children` | `React.ReactNode` | Children to render |
| `icon` | `Partial<IconOptions>` | Global options for icons |
| `ripple` | `undefined \| false \| true` | Enable / Disable interaction ripples globally |
| `tooltip` | `Partial<TooltipOptions>` | Global tooltip options |
| `typography` | `Partial<TypographyOptions>` | Global typography options |
npm package: @pmwcs/radio
Description: PMWCS radio component
Latest version: 1.1.0

# Radio Buttons

Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.

- Module **@pmwcs/radio**
- Import styles:
  - Using CSS Loader
    - import '@pmwcs/radio/styles';
  - Or include stylesheets
    - **'@material/radio/dist/mdc.radio.css'**
    - **'@material/form-field/dist/mdc.form-field.css'**
    - **'@material/ripple/dist/mdc.ripple.css'**
- MDC Docs: [https://material.io/develop/web/components/input-controls/radio-buttons/](https://material.io/develop/web/components/input-controls/radio-buttons/)

## Controlled Usage

```jsx
function Example() {
  const [value, setValue] = React.useState('cookies');

  return (
    <>
      <Radio
        value="cookies"
        checked={value === 'cookies'}
        onChange={evt => setValue(String(evt.currentTarget.value))}
      >
        Cookies
      </Radio>

      <Radio
        value="pizza"
        checked={value === 'pizza'}
        onChange={evt => setValue(String(evt.currentTarget.value))}
      >
        Pizza
      </Radio>

      <Radio
        value="icecream"
        checked={value === 'icecream'}
        onChange={evt => setValue(String(evt.currentTarget.value))}
      >
        Icecream
      </Radio>
    </>
  );
}
```

## Uncontrolled Usage

You can use Radio Buttons and receive change events without having to manually set the `checked` prop. Just give the Radio components the same `name`. This example also shows using the `label` prop instead of setting the label as a child.

```jsx
<>
  <Radio
    label="Cookies"
    value="cookies"
    name="myRadioGroup"
    onChange={evt => console.log(evt.currentTarget.value)}
  />

  <Radio
    label="Pizza"
    value="pizza"
    name="myRadioGroup"
    onChange={evt => console.log(evt.currentTarget.value)}
  />

  <Radio
    label="Icecream"
    value="icecream"
    name="myRadioGroup"
    onChange={evt => console.log(evt.currentTarget.value)}
  />
</>
```

## Radio
A Radio button component.

### Props

| Name | Type | Description |
|------|------|-------------|
| `checked` | `undefined \| false \| true` | Toggle the control on and off. |
| `disabled` | `undefined \| false \| true` | Disables the control. |
| `foundationRef` | `React.Ref<MDCRadioFoundation>` | Advanced: A reference to the MDCFoundation. |
| `id` | `undefined \| string` | A DOM ID for the toggle. |
| `inputRef` | `React.Ref<HTMLInputElement>` | A reference to the native input. |
| `label` | `React.ReactNode` | A label for the control. |
| `ripple` | `RipplePropT` | Adds a ripple effect to the component |
| `rootProps` | `React.HTMLProps<any>` | By default, all props except className and style spread to the input. These are additional props for the root of the checkbox. |
| `value` | `string \| number \| string[]` | The value of the control. |
npm package: @pmwcs/ripple
Description: PMWCS ripple component
Latest version: 1.1.0

# Ripples

MDC Ripple provides the JavaScript and CSS required to provide components (or any element at all) with a material “ink ripple” interaction effect. It is designed to be efficient, uninvasive, and usable without adding any extra DOM to your elements.

- Module **@pmwcs/ripple**
- Import styles:
  - Using CSS Loader
    - import '@pmwcs/ripple/styles';
  - Or include stylesheets
    - **'@material/ripple/dist/mdc.ripple.css'**
- MDC Docs: [https://material.io/develop/web/components/ripples/](https://material.io/develop/web/components/ripples/)

Ripples will wrap whatever child component you pass it and apply the appropriate classes and styles.

```jsx
<Ripple>
  <p>Standard Ripple</p>
</Ripple>
```

```jsx
<Ripple primary>
  <p>Primary</p>
</Ripple>
```

```jsx
<Ripple accent>
  <p>Accent</p>
</Ripple>
```

```jsx
<Ripple unbounded>
  <p>Unbounded</p>
</Ripple>
```

## Ripple
A component for adding Ripples to other components.

### Props

| Name | Type | Description |
|------|------|-------------|
| `accent` | `undefined \| false \| true` | Makes the ripple an accent color |
| `disabled` | `undefined \| false \| true` | makes the ripple disabled |
| `foundationRef` | `React.Ref<MDCRippleFoundation>` | Advanced: A reference to the MDCFoundation. |
| `primary` | `undefined \| false \| true` | Makes the ripple primary |
| `surface` | `undefined \| false \| true` | For internal use |
| `unbounded` | `undefined \| false \| true` | Makes the ripple unbounded |
npm package: @pmwcs/slider
Description: PMWCS slider component
Latest version: 1.1.0

# Sliders

> Sliders let users select from a range of values by moving the slider thumb.

- Module **@pmwcs/slider**
- Import styles:
  - Using CSS Loader
    - import '@pmwcs/slider/styles';
  - Or include stylesheets
    - **'@material/slider/dist/mdc.slider.css'**
- MDC Docs: [https://material.io/develop/web/components/input-controls/sliders/](https://material.io/develop/web/components/input-controls/sliders/)

Sliders can be both uncontrolled and controlled. When creating a controlled `Slider`, you should be listening to the `onInput` event and use `evt.detail.value` to set your new value.

Sliders will automatically layout themselves on window resize. If you need to manually trigger a layout because the sliders container size changed, the simplest way is to trigger a resize event `window.dispatchEvent(new Event('resize'));`.

**Known Issue** `material-components-web` uses pointer events internally. If you are using something below React 16.4, you will see unknown attribute errors, however the slider should still work.

```jsx
<Slider
  onInput={evt => console.log(evt)}
  onChange={evt => console.log(evt)}
/>
```

```jsx
function Example() {
  const [value, setValue] = React.useState(50);
  // onInput is required and will fire continuously.
  // onChange is optional and fires at the end of the interaction
  return (
    <Slider
      value={value}
      onChange={evt => setValue(evt.detail.value)}
      onInput={evt => setValue(evt.detail.value)}
      discrete
      step={1}
    />
  );
}
```

```jsx
<Slider discrete displayMarkers min={100} max={200} step={5} />
```

## Slider
A Slider component.

### Props

| Name | Type | Description |
|------|------|-------------|
| `disabled` | `undefined \| false \| true` | Disables the control. |
| `discrete` | `undefined \| false \| true` | Displays the exact value of the Slider on the knob. |
| `displayMarkers` | `undefined \| false \| true` | Displays the individual step markers on the Slider track. |
| `foundationRef` | `React.Ref<MDCSliderFoundation>` | Advanced: A reference to the MDCFoundation. |
| `max` | `number \| string` | The maximum value of the Slider. |
| `min` | `number \| string` | The minimum value of the Slider. |
| `onChange` | `undefined \| (evt: SliderOnChangeEventT) => void` | A callback that fires when the Slider stops sliding which takes an event with event.detail.value set to the Slider's value. evt.detail = { value: number;} |
| `onInput` | `undefined \| (evt: SliderOnInputEventT) => void` | A callback that fires continuously while the Slider is sliding that takes an event with event.detail.value set to the Slider's value. evt.detail = { value: number;} |
| `step` | `number \| string` | A step to quantize values by. |
| `value` | `number \| string` | The value of the Slider. |
npm package: @pmwcs/switch
Description: PMWCS switch component
Latest version: 1.1.0

# Switches

On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.

- Module **@pmwcs/switch**
- Import styles:
  - Using CSS Loader
    - import '@pmwcs/switch/styles';
  - Or include stylesheets
    - **'@material/switch/dist/mdc.switch.css'**
    - **'@material/form-field/dist/mdc.form-field.css'**
    - **'@material/ripple/dist/mdc.ripple.css'**
- MDC Docs: [https://material.io/develop/web/components/input-controls/switches/](https://material.io/develop/web/components/input-controls/switches/)

Switches are identical in function to the Checkbox component, they just present a different UI / UX paradigm.

```jsx
<Switch defaultChecked label="Pizza" />
```

```jsx
function Example() {
  const [checked, setChecked] = React.useState(false);

  return (
    <Switch
      checked={checked}
      onChange={evt => setChecked(!!evt.currentTarget.checked)}
      label="Cookies"
    />
  );
}
```

```jsx
<Switch>Icecream</Switch>
```

```jsx
<>
  <Switch disabled label="Disabled" />
  <Switch disabled defaultChecked label="Disabled" />
</>
```

## Switch
A Switch component.

### Props

| Name | Type | Description |
|------|------|-------------|
| `checked` | `undefined \| false \| true` | Toggle the control on and off. |
| `disabled` | `undefined \| false \| true` | Disables the control. |
| `foundationRef` | `React.Ref<MDCSwitchFoundation>` | Advanced: A reference to the MDCFoundation. |
| `id` | `undefined \| string` | A DOM ID for the toggle. |
| `inputRef` | `React.Ref<HTMLInputElement>` | A reference to the native input. |
| `label` | `React.ReactNode` | A label for the control. |
| `ripple` | `RipplePropT` | Adds a ripple effect to the component |
| `rootProps` | `React.HTMLProps<any>` | By default, all props except className and style spread to the input. These are additional props for the root of the checkbox. |
| `value` | `string \| number \| string[]` | The value of the control. |
npm package: @pmwcs/typography
Description: PMWCS typography component
Latest version: 1.1.0

# Typography

Material Design’s text sizes and styles were developed to balance content density and reading comfort under typical usage conditions.

- Module **@pmwcs/typography**
- Import styles:
  - Using CSS Loader
    - import '@pmwcs/typography/styles';
  - Or include stylesheets
    - **'@material/typography/dist/mdc.typography.css'**
- MDC Docs: [https://material.io/develop/web/components/typography/](https://material.io/develop/web/components/typography/)

## Basic Usage

```jsx
<>
  <Typography use="headline1">headline1</Typography>
  <Typography use="headline2">headline2</Typography>
  <Typography use="headline3">headline3</Typography>
  <Typography use="headline4">headline4</Typography>
  <Typography use="headline5">headline5</Typography>
  <Typography use="headline6">headline6</Typography>
  <Typography use="subtitle1">subtitle1</Typography>
  <Typography use="subtitle2">subtitle2</Typography>
  <Typography use="body1">body1</Typography>
  <Typography use="body2">body2</Typography>
  <Typography use="caption">caption</Typography>
  <Typography use="button">button</Typography>
  <Typography use="overline">overline</Typography>
</>
```

```jsx
<Typography use="headline6" tag="h3">
  headline6
</Typography>
```

## Provider Setup

You can globally map specify type classes to HTML tags for semantics, or specify a default to be used instead of `span`.

```jsx
<PMWCSProvider
  typography={{
    /** Make all Typography components default to <div>  */
    defaultTag: 'div',
    /** Make headline5 <h5>  */
    headline5: 'h5',
    /** Make body2 <p>  */
    body2: 'p',
    /** Use your own component  */
    body1: ({ children, ...rest }) => (
      <span>
        <b>{children}!!!</b>
      </span>
    )
  }}
>
  <Typography use="headline6">Rendered default `div`</Typography>
  <Typography use="headline5">Rendered with `h5`</Typography>
  <Typography use="body2">Rendered with `p`</Typography>
  <Typography use="body1">Custom rendering</Typography>
</PMWCSProvider>
```

## Typography
The Typography Component

### Props

| Name | Type | Description |
|------|------|-------------|
| `use` | `TypographyT` | The typography style. |
npm package: @pn-data/ai-translation
Description: Cursor Agent Skill for pn_mid_v2 AI translation service (OpenClaw proxy)
Author: pn
Latest version: 0.0.1

# PN 中台 AI 翻译服务

Cursor Agent Skill — 通过 **OpenClaw** 协议访问 AI 翻译服务（上游 `t1.17995api.net`）：**拉取待翻译条目（next）**与**回写翻译结果（writeback）**。支持**脚本直接请求**（不经过中台）或**经 pn_mid_v2 中台代理**（`SkillManager::aiTranslation`）。

> **Skill 版本**：与 `ai-translation/SKILL.md` 顶部及 `package.json` 的 `version` 一致。  
> **完整约定与示例**见 **`ai-translation/SKILL.md`**。

## 何时使用

- 用户提到：翻译服务、OpenClaw、拉取待翻译、回写翻译、ai-translation、AI 翻译接口
- 需要调用 **next**（拉取一条待翻译）或 **writeback**（回写译文/错误）

## 脚本直接调用（不经过中台）

本 Skill 提供 **`openclaw_cli.py`**，直接请求翻译服务（默认 `https://t1.17995api.net`），不经过 pn_mid_v2，无需 token。

脚本路径：`<SKILL_DIR>/openclaw_cli.py`（本仓库为 `.cursor/skills/ai-translation/ai-translation/openclaw_cli.py`）。

### 命令行概要

```bash
# 拉取一条待翻译（方式 A：project_id + task_id）
python3 <SKILL_DIR>/openclaw_cli.py next --project-id=1001 --task-id=<task_id>

# 拉取（方式 B：完整任务参数 JSON 文件）
python3 <SKILL_DIR>/openclaw_cli.py next --body-file=task.json

# 回写译文
python3 <SKILL_DIR>/openclaw_cli.py writeback --project-id=1001 --task-id=<task_id> \
  --sheet-row-num=18 --original="原文" --job-token=<token> \
  --translations='{"en":"Welcome to Cloudrealm."}'

# 错误回写
python3 <SKILL_DIR>/openclaw_cli.py writeback ... --error="术语冲突，需人工确认。"
```

### 选项

| 选项 | 说明 |
|------|------|
| `--base-url=URL` | 翻译服务根地址；或环境变量 `OPENCLAW_BASE_URL` |
| `--json` | 输出原始 JSON |

## 经中台代理

- **入口**：`POST /service/ai_translation` 或 `POST /service/3037`
- **请求体**：JSON，必传 **`action`**（`next` \| `writeback`），其余字段按 OpenClaw 文档原样透传

| action       | 说明               |
|-------------|--------------------|
| `next`      | 拉取一条待翻译条目 |
| `writeback` | 回写翻译结果或错误 |

## 安装

```bash
npm install @pn-data/ai-translation
# 将 node_modules/@pn-data/ai-translation/ 下 ai-translation/ 复制或链接到 .cursor/skills/ai-translation/
```

安装后 Cursor 会读取 `.cursor/skills/ai-translation/ai-translation/SKILL.md` 作为 Skill 内容。

## 在 Cursor 中触发

- 「调用翻译服务拉取一条待翻译」
- 「用 ai-translation 回写翻译结果」
- 「OpenClaw next / writeback」

## API

- **脚本直连**：默认 `https://t1.17995api.net`，`POST /openclaw/next`、`POST /openclaw/writeback`
- **经中台**：`https://pnv2.17995api.net`（或当前中台域名）+ `/service/ai_translation`，body 含 `action` 及 OpenClaw 约定字段

## 更新 Skill

```bash
npm view @pn-data/ai-translation version --registry https://registry.npmjs.org/
```

若与 `ai-translation/SKILL.md` 顶部版本号不一致，则更新本 Skill 后重新读取 `ai-translation/SKILL.md`。

## 依赖

- Python 3.9+（脚本仅用标准库，无第三方依赖）

## License

MIT
npm package: @pnap/react-native-search-bar
Description: A simple and elegant react-native animated search bar.
Author: Piotr Napierala
Latest version: 1.0.5

# @pnap/react-native-search-bar

Animated search bar built with vanilla React Native.

![showcase](https://media.giphy.com/media/d2tuxEpQb6hOUdUOkM/giphy.gif?cid=790b761166467252d40d678dd8958b1b1b6ea2ccb0d8c7ef&rid=giphy.gif&ct=g)

## Installation

Use npm or yarn to install the package.

```bash
npm install @pnap/react-native-search-bar
```
or

```bash
yarn add @pnap/react-native-search-bar
```

## Usage

```javascript
import {View, StyleSheet} from 'react-native'
import {CustomSearchIcon} from 'components/icons'
import SearchBar from '@pnap/react-native-search-bar'

// Create your component
const MyScreenComponent = () => {

  // Some business logic (functions, variables, etc)

  return (
     <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <SearchBar
          onSubmitSearch={onSubmitSearch}
          onActiveSearch={onActiveSearch}
          onToggleSearchBar={onToggleSearchBar}
          customIcon={CustomSearchIcon}
          inputTextStyle={styles.searchBarInput}
          buttonStyle={styles.searchButton}
          buttonTextStyle={styles.searchButtonText}
          underlineActiveColor={"#9f9ea4"}
          underlineInactiveColor={"#6d28d9"}
        />
     </View>
}

const styles = StyleSheet.create({
    ...
})
```
## Availalable Props

| Name        | Type           | Default  | Description | Required |
| ------------- |:-------------:| -----:| -------------:| ----------:|
| onSubmitSearch      | function | - | Fires when user submits text input.| Yes |
| onActiveSearch      | function | - | Fires when user focus text input.| Yes |
| onToggleSearchBar      | function | - | Fires when user presses on search icon (or custom icon).| Yes |
| customIcon      | JSX component | regular search icon | Svg to be rendered as search button.| No |
| inputTextStyle      | TextStyle | simple style | Style value for TextInput text.| No |
| buttonStyle      | ViewStyle | simple style | Style value for search Pressable.| No |
| buttonTextStyle      | TextStyle | simple style | Style value for search Pressable text.| No |
| underlineActiveColor      | ColorValue | #6d28d9 | Color for bottom border of active TextInput.| No |
| underlineInactiveColor      | ColorValue | #9f9ea4 | Color for bottom border of inactive TextInput.| No |
| animationDuration      | Number | 360 | Time in milliseconds for animations.| No |

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

Please make sure to update tests as appropriate.

## Authors
**Piotr Napierala** - _author_

## License
**@pnap/react-native-search-bar** is released under MIT license.
npm package: @pnavarrc/ramda-repl
Description: Command line REPL for Ramda
Author: Pablo Navarro
Latest version: 0.2.3

# Ramda Repl

<a href="https://zenhub.com"><img src="https://raw.githubusercontent.com/ZenHubIO/support/master/zenhub-badge.png"></a>

Command line REPL for Ramda

## Install

```
$ npm install --global @pnavarrc/ramda-repl
```

## Usage

```
$ ramda-repl
```

## REPL Commands

All the native [Node REPL commands](https://nodejs.org/api/repl.html#repl_commands_and_special_keys) are available.

Command   | Description
----------|---------------------------------------------------------------------------
`.break`  | Cancels the current multi-line expression
`.clear`  | Resets the REPL context and clears multi-line expressions being input
`.exit`   | Exit the REPL
`.help`   | Show this commands
`.save`   | Save the current session to a file (`.save /file/to/save.js`)
`.load`   | Load a file into the current session (`.load /file/to/load.js`)
`.editor` | Enter editor mode (<kbd>ctrl</kbd> + <kbd>d</kbd> to finish, <kbd>ctrl</kbd> + <kbd>c</kbd> to cancel