open-index/open-npm huggingface dataset:
npm package: @protodigital/ssrg-dom-strict
Description: SSRG DOM Strict is responsible for converting vanilla JSX/TSX into HTML.
Author: William Yallop
Latest version: 0.1.2

# Proto SSRG DOM Strict

> Experimental

SSRG DOM Strict is responsible for converting vanilla JSX/TSX into HTML. It supports only a strict subset of HTML elements (no deprecated elements, for example), certain attributes are required, certain elements will have default attributes set, and certain semantic elements will require particular child elements and throw errors if invalid ones are used.

All of this is to ensure users create accessible and performant websites by default.

## Features

- Only a subset of HTML elements are allowed (deprecated elements are disabled).
- Default attributes added to certain elements (e.g., the img element has loading="lazy").
- Disable runtime attribute and element enabled checks when `NODE_ENV` is set to `production`.
- Permitted content checks based on MDN docs (certain elements can only contain specific children). (coming soon)
- Required children elements (forms need a submit button or input). (coming soon)

## Installation

```
npm install @protodigital/ssrg-dom-strict
```

## Setup

> The JS setup hasnt been considered yet, so its recommended to only use this within TS.

After installing the package, add the following to your `tsconfig.json` file.

```json
{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "SSRG.createElement",
    "jsxFragmentFactory": "SSRG.Fragment"
  }
}
```

## Example TSX

```tsx
import * as SSRG from "@protodigital/ssrg-dom-strict";
import Button from "./Button.tsx";

const Hero: SSRG.FC = () => {
  return (
    <section>
      <div class="max-w-2xl w-full mx-auto">
        <h1>Welcome to JSX DOM</h1>
        <Button
          data={{
            foo: "world",
          }}
        >
          Hello
        </Button>
      </div>
    </section>
  );
};
```

> Make sure you `import * as SSRG` at the top of each TSX file.

### Render to string

This is just syntactic sugar, its the same as calling the component directly. Its entirely up to you which way you would prefer to do this.

```typescript
import SSRG from "@protodigital/ssrg-dom-strict";
import Layout from "./components/Layout.jsx";

const html = SSRG.renderToString(Layout, {
  title: "Example prop",
});

const withChildren = SSRG.renderToString(Layout, {
  title: "Example prop",
  children: [
    SSRG.renderToString(Button, {
      data: {
        foo: "bar",
      },
    }),
  ],
});

// The examples above are the same as doing the following:

const noSugar = Layout({
  title: "Example prop",
  children: [
    Button({
      data: {
        foo: "bar",
      },
    }),
  ],
});
```
npm package: @protofire/subgraph-prettier-config
Description: Shared Prettier configuration to use in subgraphs
Author: Sebastián Galiano
Latest version: 0.1.1

# Subgraph Prettier Config

Opinionated Prettier configuration used by [subgraphs maintained](https://github.com/protofire?q=subgraph) by [ProtoFire](https://protofire.io/)

## Install

```Shell
$ yarn add --dev @protofire/subgraph-prettier-config
```

## Usage

Add reference to configuration module in the `package.json` file:

```JSON with Comments
{
  // ...
  "prettier": "@protofire/subgraph-prettier-config"
}
```

Or, if you don't want to use `package.json`, use instead any of the [supported extensions](https://prettier.io/docs/en/configuration.html)
to export a string, e.g. `.prettierrc.json`:

```JSON
"@protofire/subgraph-prettier-config"
```

To extend the configuration to overwrite some properties from the shared configuration, import the module in a `prettier.config.js`or `.prettierrc.js` file and export the modifications, e.g:

```JavaScript
module.exports = {
  ...require('@protofire/subgraph-prettier-config'),
  semi: false, // override desired properties
}
```

That's it!
npm package: @protohiro/csstokens
Description: CLI to extract design tokens from existing frontend codebases
Latest version: 0.2.0

# csstokens

`csstokens` is a CLI to extract design tokens from existing CSS, SCSS, JS, JSX, TS, and TSX codebases.

It scans frontend repositories and emits deterministic outputs for token migration, design system cleanup, and CSS variable standardization.

## Install

```bash
npm install -g @protohiro/csstokens
```

## Usage

```bash
csstokens
csstokens --profile strict
csstokens analyze
csstokens extract ./src --prefix ct
csstokens refactor ./src --dry-run
```

By default, `csstokens` runs extraction for the current directory and writes output to `./csstokens-out`.

`refactor --dry-run` prints a summary of proposed literal-to-token replacements. Without `--dry-run`, it writes `refactor-plan.md` and `refactor-plan.json`.
npm package: @protohiro/csstokens-core
Description: Core extraction and token grouping engine for csstokens
Latest version: 0.2.0

# @protohiro/csstokens-core

`@protohiro/csstokens-core` provides the extraction, normalization, grouping, and emitter logic behind the `csstokens` design token extractor.

Use it when you need library access to design token extraction from existing frontend codebases.

## Install

```bash
npm install @protohiro/csstokens-core
```

## Usage

```ts
import { buildRefactorPlan, extractFiles } from '@protohiro/csstokens-core';
```

The package is intended for library use. For filesystem scanning and end-user commands, use `csstokens`.

You can also build a dry-run replacement plan from extracted tokens and the raw index:

```ts
const result = extractFiles(files, { prefix: 'pt' });
const plan = buildRefactorPlan(result.rawIndex, result.tokens, 'pt');
```
npm package: @protohiro/effects
Description: React hooks for hard CSS effects like gradient borders, spotlight reveal, and glass highlights without wrappers.
Latest version: 0.3.2

# @protohiro/effects

React hooks for hard CSS effects on existing elements without wrappers.

Best for:

- `react gradient border`
- `react spotlight reveal effect`
- `react glass highlight`
- composable effects in design systems

The library targets effects that are awkward to ship by hand because of pseudo-elements, `border-radius`, Safari fallback behavior, SSR, and ref composition.

## Install

```bash
npm install @protohiro/effects
```

## Quick start

```tsx
import { useGradientBorderEffect } from '@protohiro/effects';

export function Button() {
  const ref = useGradientBorderEffect({ thickness: 2, angle: 90 });
  return <button ref={ref}>Click</button>;
}
```

## Why use it

- no extra DOM nodes
- no layout measurements
- SSR and hydration friendly
- preserves existing refs and class names
- effects compose through namespaced classes and CSS variables

## Hooks

- `useGradientBorderEffect`
- `useGlassHighlightEffect`
- `useGlowEffect`
- `useNoiseEffect`
- `useSpotlightEffect`

## Core effects

### `useGradientBorderEffect(options)`

Gradient border ring on a single existing element with `border-radius` support and graceful fallback behavior.

### `useSpotlightEffect(options)`

Interactive spotlight and reveal overlay for cards, media surfaces, and CTA blocks.

### `useGlassHighlightEffect(options)`

Adds a restrained glass highlight layer with edge light, soft sheen, tint, and optional backdrop blur for dark premium surfaces.

Options:
- `color?: string`
- `edgeOpacity?: number`
- `sheenOpacity?: number`
- `tintOpacity?: number`
- `angle?: string | number`
- `blur?: string | number`
- `radius?: string | number`
- `inset?: string | number`
- `saturate?: number`
- `disabled?: boolean`

Live demo:
[libs.protohiro.com/effects](https://libs.protohiro.com/effects/)

For full docs and demos, see:
[github.com/protohiro-com/effects](https://github.com/protohiro-com/effects)
npm package: @protohiro/effects-core
Description: Core runtime utilities for ProtoEffects CSS-first effects.
Latest version: 0.1.3

# @protohiro/effects-core

Core runtime utilities used by `@protohiro/effects`.

## Install

```bash
npm install @protohiro/effects-core
```

## API

- `ensureGlobalStyle`
- `applyEffectClass`
- `applyCssVars`
- `mergeRefs`
- `toCssLength`
- `toCssAngle`
- `toCssTime`
- `toCssNumber`

Live demo:
https://libs.protohiro.com/effects/

For full project docs and examples, see:
https://github.com/protohiro-com/effects
npm package: @protohiro/state-layers
Description: React hooks for focus rings, invalid states, loading sheens, and other visual state layers on existing elements. Demo: https://libs.protohiro.com/state-layers
Latest version: 0.1.2

# @protohiro/state-layers

React hooks for focus rings, invalid states, loading sheens, and other visual state layers on existing elements.

This package provides CSS-first hooks like `useFocusRingLayer`, `useInvalidStateLayer`, and `useLoadingSheenLayer` without wrapper components or layout measurement.

Live demo: [libs.protohiro.com/state-layers](https://libs.protohiro.com/state-layers)

For workspace docs and demo usage, see the root [`README.md`](../../README.md).
npm package: @protolith/morphic
Description: Node.js Static Site Generator
Author: James Edwards
Latest version: 0.1.3

# morphic

Node.js Static Site Generator

## Usage

```
mkdir morphic-site
```

```
cd morphic-site
```

```
git init
```

```
echo 'node_modules' > .gitignore
```

```
npm i @protolith/morphic@latest
```

```
mkdir public
```

```
mkdir content
```

```
mkdir templates
```

```
cd content
```

```
echo '---
title: Home
---

# <%= model.title %>

home page content' > index.md
```

```
cd ../templates
```

```
echo '<!DOCTYPE html>
<html>
  <head>
    <title><%= model.title %></title>
  </head>
  <body>
    <%- model.content %>
  </body>
</html>' > index.ejs
```

```
cd ..
```

With the default files created, from the morphic-site folder run the command:

```
npx morphic --serve
```

This will create an output folder containing the generated html, and open a browser window to view.

## Build

Clone repo and run:

```
npm run build
```

or

```
npm run build-typecheck
```

These commands will compile the typescript src directory to a new folder named dist, containing the javascript output.

Building without typechecking will not pass source files through the typescript compiler (only babel).

## Notice

Morphic is very much still a work in progress and is not ready for production use.
npm package: @protolus/electron-app
Description: application wrapper for electron using common config with terminal-app
Author: Abbey Hawk Sparrow
Latest version: 0.0.4

@protolus/electron-app
======================
Bringing all the goodness of [@protolus/terminal-app](https://www.npmjs.com/package/@protolus/terminal-app) to GUI desktop apps in electron.

- Common data storage and config between GUI and CLI apps (using [@protolus/terminal-app](https://www.npmjs.com/package/@protolus/terminal-app)).
- Handles data sync between windows.
- Handles OS Specific Menu Configuration


Roadmap
-------
- Test Windows Apps
- Link Menu Binding, CL options and Preferences
- Produce OS X Properties File with appropriate security requests
- Test Harness
- Documentation