open-index/open-npm huggingface dataset:
npm package: @are/laser-pointer
Description: Generate outline for laser pointer tool
Author: Are Wojciechowski
Latest version: 1.0.1

# Excalidraw Freehand

## Usage

    import { ExcalidrawFreehand } from '@excalidraw/freehand'

    const stroke = new ExcalidrawFreehand(options)

    stroke.addPoint([100, 200, 1])
    stroke.close()

    const outline = stroke.getStrokeOutline()

## Options

| Property        | Type                                      | Default    | Description                                                  |
| --------------- | ----------------------------------------- | ---------- | ------------------------------------------------------------ |
| `size`          | `number`                                  | `2`        | Radius of the stroke.                                        |
| `streamline`    | `number`                                  | `0.42`     | Interpolate input points to reduce jitter.                   |
| `simplify`      | `number`                                  | `0.1`      | Reduce stroke size by sacrificing precision.                 |
| `simplifyPhase` | `"input" \| "output" \| "tail" `          | `"output"` | Decides when the simplification algorithm should be applied. |
| `sizeMapping`   | `(details: SizeMappingDetails) => number` | `() => 1`  | Maps each point to a value between `0.0` and `1.0`.          |
npm package: @area73/ai-web-key-configurator
Description: A simple functional web component library to configure environment variables for other projects.
Author: Rodrigo Erades
Latest version: 1.0.15

# ai-web-key-configurator

A simple web component library to configure environment keys, built with [Haunted](https://github.com/matthewp/haunted) and TypeScript. Distributed as a native Web Component for easy integration.

## Usage

Install via npm (after publishing):

```sh
npm install @area73/ai-web-key-configurator
```

Import and use in your HTML/JS:

```js
import "@area73/ai-web-key-configurator";
```

Add the component to your HTML:

```html
<key-configurator id="namespace">
  <key-pair>
    <key-name>OPEN-API-KEY</key-name>
    <key-value>aJ44564kdsj.LkkdSS-wshjs</key-value>
  </key-pair>
</key-configurator>
```

- The `id` attribute is required and is used as the localStorage namespace.
- Each `<key-pair>` can have a `<key-name>` (static) and an optional `<key-value>` (editable input).

## Alternative usage: direct import as a native module

If you don't want to use npm, you can copy the `dist/index.js` file from this package and load it directly in your HTML as a native ES module:

```html
<!-- Copy dist/index.js to your project and reference the correct path -->
<script type="module" src="./path/to/index.js"></script>
```

This will globally register the custom elements, and you can use them in your HTML:

```html
<key-configurator id="my-env">
  <key-pair>
    <key-name>API_KEY</key-name>
    <key-value>demo</key-value>
  </key-pair>
</key-configurator>
```
npm package: @aredotna/icons
Description: [@aredotna/icons](https://github.com/aredotna/icons) is the canonical source for icons used at Are.na, and serves as an automatic build pipeline for generating JSX representations of `.svg` sources that can easily be imported into React apps.
Latest version: 0.2.0

# @aredotna/icons

[@aredotna/icons](https://github.com/aredotna/icons) is the canonical source for icons used at Are.na, and serves as an automatic build pipeline for generating JSX representations of `.svg` sources that can easily be imported into React apps.

## Meta

- **State:** production
- **GitHub:** [https://github.com/aredotna/icons](https://github.com/aredotna/icons)
- **CI/Deploys:** Manually published to NPM for the time being
- **Point People:** [@dzucconi](https://github.com/dzucconi)

## Installation and Usage

```bash
yarn add @aredotna/icons
```

And then later, import icons like so:

```tsx
import ArenaLogo from "@aredotna/icons/ArenaLogo"

const MyApp = () => {
  return <ArenaLogo />
}
```

## Adding New Icons

1. Add the SVG file to the `src` directory
2. Bump the version number
3. Run `npm publish`
npm package: @aredotna/tokens
Description: Design tokens for Are.na
Author: Are.na
Latest version: 1.0.0

# @aredotna/tokens

Design tokens for Are.na applications.

## Installation

```bash
yarn add @aredotna/tokens
```

## Usage

```typescript
import {
  COLORS,
  SPACE,
  FONT_SIZES,
  RADII,
  BREAKPOINTS,
  FONTS,
  SHADOWS,
  BLURS,
} from "@aredotna/tokens";

// Use the tokens in your application
const styles = {
  backgroundColor: COLORS.light.background,
  padding: SPACE[4],
  fontSize: FONT_SIZES[3],
  borderRadius: RADII[1],
  fontFamily: FONTS.sans,
  boxShadow: SHADOWS[1],
  backdropFilter: BLURS[1],
};
```

## Available Tokens

- `COLORS`: Color palette with light, dark, dawn, and dusk themes
- `SPACE`: Spacing scale
- `FONT_SIZES`: Typography scale
- `RADII`: Border radius values
- `BREAKPOINTS`: Responsive breakpoints
- `FONTS`: Base font families
- `SHADOWS`: Box shadows
- `BLURS`: Blur effects

## Fonts

Font files are included at the package root under `fonts/` for easy download or direct consumption in your app/build.

- `fonts/areal.woff2`: Areal variable font that you probably want to use
- `fonts/web/**`: specific weights/styles (woff/woff2) for Areal and Areal Mono
- `fonts/web variable/**`: variable webfont (woff/woff2)
- `fonts/otf/**` and `fonts/variable/**`: original sources

### Next.js (next/font/local)

```ts
import localFont from "next/font/local";
import { FONTS } from "@aredotna/tokens";

export const areal = localFont({
  src: "./node_modules/@aredotna/tokens/fonts/areal.woff2",
  variable: "--font-areal",
  display: "swap",
  fallback: ["Arial", "Helvetica", "sans-serif"],
});

export const FONT_STACKS = {
  sans: `${areal.style.fontFamily}, ${FONTS.sans}`,
  mono: `${areal.style.fontFamily}, ${FONTS.mono}`,
};
```

### Stitches helpers

```ts
import { css } from "@stitches/react";
import { FONTS } from "@aredotna/tokens";

export const mono = (value: number) => ({
  fontFamily: "$mono",
  fontVariationSettings: `"MONO" ${value}`,
});

export const italic = () => ({
  fontStyle: "italic",
  fontVariationSettings: `"slnt" -12`,
});
```

## License

MIT