open-index/open-npm huggingface dataset:
npm package: @nkstack/refract-next-plugin
Description: Next.js 16 integration for Refract development mode.
Latest version: 0.0.0

# @nkstack/refract-next-plugin

Next.js 16 integration for Refract development mode.

This package provides:

- `withRefract(...)` for Turbopack JSX instrumentation in `next.config.ts`
- `createRefractRouteHandler(...)` for the server bridge route handler

## Install

```bash
pnpm add -D @nkstack/refract-next-plugin
```

## Usage

```ts
// next.config.ts
import { withRefract } from "@nkstack/refract-next-plugin";

export default withRefract()({
  reactStrictMode: true
});
```

```ts
// app/api/refract/plugin/route.ts
import { createRefractRouteHandler } from "@nkstack/refract-next-plugin/server";
import { tailwindEditorServerPlugin } from "@nkstack/refract-tailwind-editor-action/server";

export const runtime = "nodejs";
export const POST = createRefractRouteHandler({
  serverPlugins: [tailwindEditorServerPlugin]
});
```

## Disclaimer

> Most of the code in this repository was generated with AI assistance.
> All generated output was reviewed and supervised by humans.
npm package: @nkstack/refract-runtime-client
Description: Browser runtime UI for Refract.
Latest version: 0.0.0

# @nkstack/refract-runtime-client

Browser runtime UI for Refract.

This package renders selection mode, overlay, and action menu in a runtime ShadowRoot.
Each plugin panel is mounted in its own dedicated ShadowRoot.

## Install

```bash
pnpm add @nkstack/refract-runtime-client
```

## Exports

- `initToolRuntime(...)`
- `RefractBootstrap` React component

## Usage

```tsx
import { RefractBootstrap } from "@nkstack/refract-runtime-client";

<RefractBootstrap
  plugins={runtimePlugins}
  defaultPluginId="tailwind-editor"
  serverEndpoint="/api/refract/plugin"
/>;
```

## Disclaimer

> Most of the code in this repository was generated with AI assistance.
> All generated output was reviewed and supervised by humans.
npm package: @nkstack/refract-tailwind-editor-action
Description: Tailwind class editor action for Refract.
Latest version: 0.0.0

# @nkstack/refract-tailwind-editor-action

Tailwind class editor action for Refract.

Exports split plugin pieces for the unified contract:

- `tailwindEditorRuntimePlugin`
- `tailwindEditorServerPlugin`
- `tailwindEditorPluginBundle`

Use framework-specific entrypoints when you only need one side:

- runtime-only: `@nkstack/refract-tailwind-editor-action/runtime`
- server-only: `@nkstack/refract-tailwind-editor-action/server`

## Install

```bash
pnpm add @nkstack/refract-tailwind-editor-action
```

## Behavior

- Opens a panel on element selection
- Applies optimistic preview (`element.className = next`)
- Debounces persistence calls to server handler
- Updates static JSX `className` via AST transform
- Injects editor CSS into plugin panel ShadowRoot via `panelStyles`
- Mounts Radix portals into runtime-provided `portalContainer`

## Limitation

Dynamic `className` expressions are rejected.

## Disclaimer

> Most of the code in this repository was generated with AI assistance.
> All generated output was reviewed and supervised by humans.
npm package: @nkstack/refract-tool-contracts
Description: Shared Refract contracts for runtime plugins, server plugins, and server bridge payloads.
Latest version: 0.0.0

# @nkstack/refract-tool-contracts

Shared Refract contracts for runtime plugins, server plugins, and server bridge payloads.

## Install

```bash
pnpm add @nkstack/refract-tool-contracts
```

## Main Types

- `RefractRuntimePlugin`
- `RefractServerPlugin`
- `RefractPluginBundle`
- `RefractPluginRegistry`
- `RefractBrowserContext`
- `RefractServerContext`
- `RefractServerResult`

## Runtime Plugin Notes

- `onSelect` controls selection behavior (`"open-panel"` or `"none"`).
- `panelStyles` accepts CSS text strings injected into the plugin panel ShadowRoot.
- Plugin panels receive `portalContainer` and `shadowRoot` in `RefractPanelProps`.

## Registry Helper

```ts
import { createRefractRegistry } from "@nkstack/refract-tool-contracts";

const registry = createRefractRegistry({
  plugins: [
    {
      runtime: runtimePlugin,
      server: serverPlugin
    }
  ],
  defaultPluginId: "my-plugin"
});
```

`createRefractRegistry(...)` validates:

- runtime plugin ids are unique and non-empty
- server plugin ids match runtime ids
- `defaultPluginId` exists in runtime plugins

## Disclaimer

> Most of the code in this repository was generated with AI assistance.
> All generated output was reviewed and supervised by humans.
npm package: @nkstack/refract-vite-plugin
Description: Vite integration for Refract.
Latest version: 0.0.0

# @nkstack/refract-vite-plugin

Vite integration for Refract.

This plugin handles:

- JSX source metadata instrumentation
- dev server bridge endpoint for server plugins

Runtime UI bootstrap is explicit in app code via `@nkstack/refract-runtime-client`.

## Install

```bash
pnpm add -D @nkstack/refract-vite-plugin
```

## Usage

```ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { refract } from "@nkstack/refract-vite-plugin";

export default defineConfig({
  plugins: [
    refract({
      serverPlugins: []
    }),
    react()
  ]
});
```

## API

```ts
interface RefractVitePluginOptions {
  serverPlugins: RefractServerPlugin[];
  endpoint?: string; // default "/api/refract/plugin"
}

function refract(options: RefractVitePluginOptions): Plugin;
```

## Notes

- Dev-only (`apply: "serve"`)
- Default bridge endpoint: `POST /api/refract/plugin`

## Disclaimer

> Most of the code in this repository was generated with AI assistance.
> All generated output was reviewed and supervised by humans.
npm package: @nkstack/tailwind-editor-core
Description: Core Tailwind class parser and serializer for editor tooling
Latest version: 0.2.2

# @nkstack/tailwind-editor-core

Core parser/serializer utilities for Tailwind class strings.

Use this package when you need Tailwind class parsing, state modeling, and deterministic rebuild behavior without the React UI.

## Install

```bash
pnpm add @nkstack/tailwind-editor-core
```

## What it exports

- `parseTailwindClasses`
- `buildClassString`
- `splitTopLevelColons`, `tokenize`, `hasTopLevelVariant`, `clampSize`
- `resolveColorHex`, `COLOR_HEX_MAP`
- Types: `InspectorState`, `ParseResult`, `PreservedClasses`, `DisplayMode`, `SpacingKey`, and related enums

## Example

```ts
import {
  parseTailwindClasses,
  buildClassString,
  type InspectorState,
} from "@nkstack/tailwind-editor-core";

const input = "px-4 py-2 text-sm bg-slate-200 sm:px-6 custom-token";
const parsed = parseTailwindClasses(input);

const nextState: InspectorState = {
  ...parsed.state,
  typography: {
    ...parsed.state.typography,
    fontWeight: "semibold",
  },
};

const nextClassString = buildClassString(nextState, parsed.preserved);
```

## Notes

- This package is framework-agnostic.
- It is versioned in lockstep with `@nkstack/tailwind-editor-react`.

## License

MIT
npm package: @nkstack/tailwind-editor-react
Description: React UI components for editing Tailwind class strings
Latest version: 0.2.2

# @nkstack/tailwind-editor-react

React components for editing Tailwind class strings with structured controls.

## Install

```bash
pnpm add @nkstack/tailwind-editor-react
```

## Peer dependencies

- `react@^19`
- `react-dom@^19`
- `tailwindcss@^4`

## Quick usage

```tsx
import { useState } from "react";
import {
  TailwindInspector,
  TailwindInspectorToolbar,
} from "@nkstack/tailwind-editor-react";
import "@nkstack/tailwind-editor-react/style.css";

export function Demo() {
  const [classes, setClasses] = useState("px-4 py-2 bg-gray-200 text-sm rounded");

  return (
    <div className="space-y-4">
      <TailwindInspectorToolbar value={classes} onChange={setClasses} />
      <TailwindInspector value={classes} onChange={setClasses} />
      <pre>{classes}</pre>
    </div>
  );
}
```

## Exports

- `TailwindInspector`
- `TailwindInspectorToolbar`
- `TailwindInspectorProps`
- `TailwindInspectorToolbarProps`
- stylesheet export: `@nkstack/tailwind-editor-react/style.css`

## Features

- Controlled APIs (`value` + `onChange`)
- Inspector panel + compact toolbar experiences
- Preserves variant and unknown classes
- Deterministic class rebuild behavior via core engine

## License

MIT
npm package: @nkt/why-did-you-update
Description: Patch React to discover unnecessary re-renders
Author: Gabe Scholz
Latest version: 0.1.0

# Why did you update, bruh?

[![Travis][build-badge]][build]
[![npm version](https://badge.fury.io/js/why-did-you-update.svg)](https://badge.fury.io/js/why-did-you-update)

### Wat?

![](http://i.imgur.com/Ui8YUBe.png)

A function that monkey patches React and notifies you in the console when **potentially** unnecessary re-renders occur. Super helpful for easy perf gainzzzzz.

### Install
```js
npm install --save-dev why-did-you-update
```

### How to

```js
import React from 'react'

if (process.env.NODE_ENV !== 'production') {
  const {whyDidYouUpdate} = require('why-did-you-update')
  whyDidYouUpdate(React)
}
```

You can include or exclude components by their displayName with the include and exclude options

```js
whyDidYouUpdate(React, { include: /^pure/, exclude: /^Connect/ })
```

### Credit

I originally read about how Benchling created a mixin to do this on a per component basis ([A deep dive into React perf debugging](http://benchling.engineering/deep-dive-react-perf-debugging/)).
That is really awesome but also tedious AF, so why not just monkey patch React.

[build-badge]: https://img.shields.io/travis/garbles/why-did-you-update/master.svg?style=flat-square
[build]: https://travis-ci.org/garbles/why-did-you-update