open-index/open-npm huggingface dataset:
npm package: @genetik/content
Description: Types, validation, and normalization for the Genetik content model: flat node map, entry id, validation against a schema, and inline → flat + id generation.
Latest version: 0.0.3

# @genetik/content

Types, validation, and normalization for the Genetik content model: flat node map, entry id, validation against a schema, and inline → flat + id generation.

## Installation

```bash
pnpm add @genetik/content
```

## Usage

- **Types**: `GenetikContent`, `ContentNode`, `SlotValue`, `GenetikContentInput`, `InlineNode` — canonical and input shapes.
- **Validation**: `validateContent(schema, content)` — validates content against a schema (block types, config, slots, link integrity).
- **Normalization**: `normalizeContent(schema, input, options?)` — flattens inline nodes (when schema allows) and assigns ids.

See the [docs](/docs/packages/content) for full API and examples.
npm package: @genetik/context-events
Description: Framework-agnostic **contract and utilities** for page context and events in the Genetik render tree. Context is namespaced state (e.g. `context.forms`, `context.auth`) that blocks can read and update; events are emitted to the host with a payload (e.g. `
Latest version: 0.0.2

# @genetik/context-events

Framework-agnostic **contract and utilities** for page context and events in the Genetik render tree. Context is namespaced state (e.g. `context.forms`, `context.auth`) that blocks can read and update; events are emitted to the host with a payload (e.g. `forms:submit`). **React integration** (providing context via React context, consuming in blocks) lives in **@genetik/renderer-react** and **@genetik/editor-react**; this package defines only types and utilities.

## Installation

```bash
pnpm add @genetik/context-events
```

## API summary

**Types**

- `PageContext` — Namespaced context object (`Record<string, unknown>`).
- `PageEventPayload` — Event payload (`unknown`).
- `PageEventCallback` — `(eventName: string, payload: PageEventPayload) => void`.
- `PageRuntimeOptions` — `{ context?: PageContext; onEvent?: PageEventCallback }` (passed to renderer/editor).

**Utilities**

- `getContextValue(context, path)` — Read value at dot-separated path (e.g. `"forms.values.email"`). Returns `undefined` if missing or path empty.
- `setContextValue(context, path, value)` — Set value at path; creates nested objects. Mutates context. No-op if path empty.
- `hasContextValue(context, path)` — True if value at path is not `undefined`.
- `createEventEmitter(onEvent)` — Returns `(eventName, payload) => void` that calls `onEvent` or no-ops if `onEvent` is undefined.

## Minimal example

```ts
import {
  getContextValue,
  setContextValue,
  createEventEmitter,
  type PageContext,
  type PageRuntimeOptions,
} from "@genetik/context-events";

const context: PageContext = { forms: { values: {} } };

setContextValue(context, "forms.values.email", "a@b.com");
getContextValue(context, "forms.values.email"); // "a@b.com"

const onEvent = (name: string, payload: unknown) => {
  console.log(name, payload);
};
const emit = createEventEmitter(onEvent);
emit("forms:submit", context);

const options: PageRuntimeOptions = { context, onEvent };
// Pass options to the renderer (e.g. renderer-react) so the tree can use context and emit events.
```

## Conventions

- **Context** is namespaced (e.g. `context.forms`, `context.auth`) so plugins don't collide.
- **Events** are prefixed (e.g. `forms:submit`). The host can route by prefix.

## See also

- Architecture and implementation plans are in the repo under `docs/` (context-and-events-plan.md, context-events-implementation-plan.md).
- Docs site: [@genetik/context-events](/docs/packages/context-events) — concepts and integration with the renderer.
npm package: @genetik/editor
Description: Core utilities for the Genetik content editor: node id generation, schema helpers, and patch creation. Framework-agnostic; consumed by **@genetik/editor-react** (or other editor UIs).
Latest version: 0.0.2

# @genetik/editor

Core utilities for the Genetik content editor: node id generation, schema helpers, and patch creation. Framework-agnostic; consumed by **@genetik/editor-react** (or other editor UIs).

## API

- **`generateNodeId()`** — returns a unique id for new nodes (nanoid).
- **`getAllowedBlockTypes(schema)`** — returns block type names from the schema.
- **`getDefaultConfig(schema, blockType)`** — returns default config for a new block from the block’s `configSchema`: each property’s `default` (JSON Schema) or `defaultValue` is used when adding a block.
- **`createAddToSlotPatch(content, schema, parentId, slotName, blockType, options?)`** — patch to add a node and insert into a slot. Options: `{ position?: number }`.
- **`createRemovePatch(content, nodeId)`** — patch to remove a node.
- **`createReorderPatch(content, parentId, slotName, order)`** — patch to set a slot’s order.

The host applies patches with `applyPatch` from `@genetik/patches`.
npm package: @genetik/editor-react
Description: React UI for the Genetik content editor: drag blocks from a palette, drop into slots, click to add block via popover, remove and reorder. Uses **@atlaskit/pragmatic-drag-and-drop** and **@genetik/editor** for mutations. Editor chrome (config panel, block 
Latest version: 0.0.2

# @genetik/editor-react

React UI for the Genetik content editor: drag blocks from a palette, drop into slots, click to add block via popover, remove and reorder. Uses **@atlaskit/pragmatic-drag-and-drop** and **@genetik/editor** for mutations. Editor chrome (config panel, block toolbar, add-block popover, drop placeholder) is built with **@genetik/ui-react** (shadcn-style components); ensure the host app imports `@genetik/ui-react/dist/styles.css` (and theme if needed) so the editor UI is styled correctly.

## Usage

```tsx
import {
  EditorProvider,
  EditorDndProvider,
  BlockPalette,
  EditorCanvas,
} from "@genetik/editor-react";

<EditorProvider schema={schema} content={content} onChange={setContent}>
  <EditorDndProvider>
    <div style={{ display: "flex" }}>
      <aside>
        <BlockPalette />
      </aside>
      <main>
        <EditorCanvas />
      </main>
    </div>
  </EditorDndProvider>
</EditorProvider>
```

- **EditorProvider**: pass `schema`, `content`, `onChange(content)`.
- **EditorDndProvider**: wraps DnD context; required for drag-from-palette and (future) reorder.
- **BlockPalette**: list of block types (draggable).
- **EditorCanvas**: tree of slots (drop targets) and blocks (with remove); click "+ Add block" to open **SlotPopover** and pick a block type. Click the edit icon on a block to open the **config side panel**: if the block's `configSchema` defines **editorInput** on properties (`"text"` | `"number"` | `"textarea"` | `"checkbox"`), the panel shows form fields; otherwise it infers from JSON Schema **type**. A "Raw JSON" tab is available when the schema has properties.

## Exports

- `EditorProvider`, `EditorContext`, `useEditor`
- `EditorDndProvider`
- `BlockPalette`, `EditorCanvas`, `SlotDropTarget`, `SlotPopover`
npm package: @genetik/patches
Description: Structured mutations over Genetik content: add node, remove node, update config, reorder slot. Used by revisions (drafts/published, history), undo/redo, and LLM edit-in-place.
Latest version: 0.0.3

# @genetik/patches

Structured mutations over Genetik content: add node, remove node, update config, reorder slot. Used by revisions (drafts/published, history), undo/redo, and LLM edit-in-place.

## Installation

```bash
pnpm add @genetik/patches
```

## Usage

- **applyPatch(content, patch)** — Apply one or more operations and return new content. Does not mutate input. Does not validate the result.

See the [docs](/docs/packages/patches) for API and examples.
npm package: @genetik/renderer
Description: Framework-agnostic core: resolves content + schema into a **resolved tree** (ResolvedNode). No UI framework; use @genetik/renderer-react (or another binding) to map the tree to components.
Latest version: 0.0.3

# @genetik/renderer

Framework-agnostic core: resolves content + schema into a **resolved tree** (ResolvedNode). No UI framework; use @genetik/renderer-react (or another binding) to map the tree to components.

## Installation

```bash
pnpm add @genetik/renderer
```

## Usage

- **resolve(content, schema)** — Returns the root ResolvedNode, or null if the entry node is missing. Each node has `block`, `config`, and `slots` (slot name → ordered array of ResolvedNode).

See the [docs](/docs/packages/renderer) for API and examples.
npm package: @genetik/renderer-react
Description: React binding for **@genetik/renderer**: renders resolved content with a map of block type → React component. Consumes flat content and a schema from @genetik/content and @genetik/schema.
Latest version: 0.0.3

# @genetik/renderer-react

React binding for **@genetik/renderer**: renders resolved content with a map of block type → React component. Consumes flat content and a schema from @genetik/content and @genetik/schema.

## Installation

```bash
pnpm add @genetik/renderer-react
```

Peer dependency: `react` (>=18.0.0).

## Usage

- **renderContent(content, schema, componentMap)** — Resolves content with the schema and renders the root. Returns a React node or null if the entry is missing.
- **renderNode(node, componentMap)** — Renders a single resolved node (and its slots recursively). Unknown block types render as null.

Block components receive **BlockProps**: `config` (block config) and `slots` (record of slot name → `ReactNode[]`).

See the [docs](/docs/packages/renderer-react) for API and examples.
npm package: @genetik/schema
Description: Block types, config (JSON Schema), slots, and reference modes for the Genetik JSON-driven UI ecosystem.
Latest version: 0.0.3

# @genetik/schema

Block types, config (JSON Schema), slots, and reference modes for the Genetik JSON-driven UI ecosystem.

## Install

```bash
pnpm add @genetik/schema
```

## Usage

```ts
import {
  createSchema,
  registerBlockType,
  getBlockType,
  validateConfig,
} from "@genetik/schema";

const schema = createSchema({ version: "1.0.0" });
registerBlockType(schema, {
  id: "text",
  configSchema: { type: "object", properties: { content: { type: "string" } }, required: ["content"] },
  slots: [],
});

const result = validateConfig(schema, "text", { content: "Hello" });
// result.valid === true
```

See the [docs](https://github.com/...) or `apps/docs/docs/packages/schema.md` in the repo for full API and concepts.

## Scripts

- `pnpm build` - Build with tsdown (ESM + CJS + types)
- `pnpm test` - Run tests
- `pnpm check-types` - TypeScript check
- `pnpm lint` - ESLint
npm package: @genetik/ui-react
Description: React design system for the Genetik ecosystem: Base UI + Tailwind v4 + shadcn-style components. Used by the page builder / CMS UI and by preconfigured Genetik blocks.
Latest version: 0.0.2

# @genetik/ui-react

React design system for the Genetik ecosystem: Base UI + Tailwind v4 + shadcn-style components. Used by the page builder / CMS UI and by preconfigured Genetik blocks.

## Install

```bash
pnpm add @genetik/ui-react
```

## Usage

1. **Import the bundled CSS** (one-time in your app root, e.g. `main.tsx` or `_app.tsx`):

   ```ts
   import "@genetik/ui-react/dist/styles.css";
   ```

2. **Import components**:

   ```tsx
   import { Button, Card, Input, Label } from "@genetik/ui-react";

   export function MyForm() {
     return (
       <Card>
         <CardHeader>
           <CardTitle>Sign in</CardTitle>
         </CardHeader>
         <CardContent>
           <Label htmlFor="email">Email</Label>
           <Input id="email" type="email" />
           <Button>Submit</Button>
         </CardContent>
       </Card>
     );
   }
   ```

## Theme-only (Tailwind v4 in your app)

If you run Tailwind v4 in your own app and want to use our design tokens:

```css
@import "tailwindcss";
@import "@genetik/ui-react/dist/theme.css";
```

Then use our components as above; your Tailwind build will need to scan `node_modules/@genetik/ui-react/dist/**/*.js` (or the package source) for class names.

## Components

- **Button**, **Input**, **Label**, **Textarea** — forms
- **Card** (CardHeader, CardTitle, CardDescription, CardContent, CardFooter, etc.)
- **Select** (SelectTrigger, SelectContent, SelectItem, etc.)
- **Dialog** (DialogTrigger, DialogContent, DialogHeader, etc.)
- **Tabs** (TabsList, TabsTrigger, TabsContent)
- **Badge**

Plus the `cn()` utility for merging class names.

## Development

From the repo root:

```bash
pnpm --filter @genetik/ui-react build
pnpm --filter @genetik/ui-react dev   # watch JS
```

The CSS is built with the JS (`pnpm build` runs both). To add more components, from `packages/ui-react` run:

```bash
pnpm dlx shadcn@latest add <component-name>
```

Then re-export from `src/index.ts`.
npm package: @geneui/icons
Description: Gene UI icons distributed as SVG React components.
Author: SoftConstruct
Latest version: 1.4.8

# @geneui/icons

> The icons library created for the Gene UI design system.

[![NPM registry](https://img.shields.io/npm/v/@geneui/icons?style=for-the-badge&color=red)](https://www.npmjs.com/package/@geneui/icons)
[![License](https://img.shields.io/badge/license-mit-green.svg?style=for-the-badge)](https://github.com/softconstruct/gene-ui-icons/blob/main/LICENSE)

## Getting Started

The icons in this package are now available as full React components, making it easy to integrate
them directly into your project.

## ⚙️ Installation

1. Install `@geneui/icons` as a dependency:

    Using [NPM](https://www.npmjs.com/):

    ```bash
    npm install @geneui/icons --save
    ```

    Or, using [Yarn](https://yarnpkg.com/en/):

    ```bash
    yarn add @geneui/icons
    ```

## 👨‍💻 Usage

To utilize the icons from the Gene UI icons collection as React components with customizable size
and color, follow these steps:

1. **Import an Icon:**

    Import the desired icon directly from the Gene UI icons collection. For example, to import the
    `Check` icon:

    ```tsx
    import { Check } from '@geneui/icons';
    ```

2. **Use the Icon as a Component:**

    Use the imported icon directly in your JSX and customize it with `size` and `color` props:

    ```tsx
    <Check size={24} color="red" />
    ```

### Icon Props

The icons accept the following props:

-   **`size`** (optional): Defines the size of the icon. Can be one of `12`, `16`, `20`, `24`, `28`, `32`,
    `48`.
-   **`color`** (optional): Defines the color of the icon. Accepts any valid CSS color value.

This allows you to seamlessly integrate and customize icons from the Gene UI icons collection as
React components in your project.

## 👍 Contributing

We welcome contributions from the community! Here's how you can get involved to add, remove, or
rename icons:

> 👉 See the
> [contributing docs](https://github.com/softconstruct/gene-ui-icons/blob/main/CONTRIBUTING.md).

## ⚖️ License

The Gene UI design system's icons are licensed under the
[MIT License](https://github.com/softconstruct/gene-ui-icons/blob/main/LICENSE).
npm package: @genexus/chameleon
Description: chameleon - A library of white-label, highly-customizable and reusable web components
Latest version: 0.6.1

![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

# chameleon web components

A library of white-label, highly-customizable and reusable web components

## Getting Started

```bash
npm install
npm start
```

## Running the tests

To run the unit tests for the custom elements, run:

```bash
npm test
```

## Building for production

To build the design for production, run:

```bash
npm run build
```

## Using this library

There are three strategies we recommend for using these web components.

### Script tag

- Put a script tag similar to this `<script src='https://unpkg.com/@genexus/chameleon@0.0.1/dist/chameleon/chameleon.esm.js'></script>` in the head of your index.html
- Then you can use the web components anywhere in your template, JSX, html etc

### Node Modules

- Run `npm install @genexus/chameleon --save`
- Put a script tag similar to this `<script src='node_modules/@genexus/chameleon/dist/chameleon/chameleon.esm.js'></script>` in the head of your index.html
- Then you can use the web components anywhere in your template, JSX, html etc

### In a Stencil project

- Run `npm install @genexus/chameleon --save`
- Add an import to the library inside `src/index.ts`: `import "@genexus/chameleon";`
- Then you can use the web components anywhere in your template, JSX, html etc