open-index/open-npm huggingface dataset:
npm package: @framingui/core
Description: Core design system pipeline: Theme -> Blueprint -> Screen (~800 LOC)
Latest version: 0.4.10

# @framingui/core

Core theme, token, and screen-generation utilities for FramingUI.

Use this package when you need the lower-level building blocks behind the MCP workflow or want to integrate FramingUI data structures into custom tooling.

## Install

```bash
pnpm add @framingui/core
```

## Example

```ts
import { loadTheme } from '@framingui/core';

const theme = loadTheme('minimal-workspace');
console.log(theme.id);
```

## Use Cases

- loading FramingUI themes and tokens
- resolving screen definitions
- building internal tools on top of FramingUI contracts
- sharing the same theme and layout primitives used by `@framingui/mcp-server`

## Recommended Path

If your goal is to build production UI with an AI agent, start with `@framingui/mcp-server` rather than using `@framingui/core` directly.

## Docs

- [framingui.com/docs/api/core](https://framingui.com/docs/api/core)
- [framingui.com/docs/layout](https://framingui.com/docs/layout)

## License

MIT
npm package: @framingui/esbuild-plugin
Description: esbuild plugin for build-time token compliance validation
Latest version: 0.3.4

# @tekton/esbuild-plugin

esbuild plugin for build-time token compliance validation.

## Overview

Scans your codebase during build to ensure 100% token compliance. Fails the build if hardcoded CSS values are detected.

## Installation

```bash
pnpm add -D @tekton/esbuild-plugin
```

## Usage

### With esbuild

```javascript
import { build } from 'esbuild';
import { tektonPlugin } from '@tekton/esbuild-plugin';

await build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  plugins: [
    tektonPlugin({
      strict: true, // Fail build on violations (default: true in production)
      threshold: 100, // Required compliance percentage
      verbose: true, // Enable logging
      reportPath: './tekton-report.txt', // Optional report file
    }),
  ],
});
```

### With tsup

```javascript
import { defineConfig } from 'tsup';
import { tektonPlugin } from '@tekton/esbuild-plugin';

export default defineConfig({
  entry: ['src/index.ts'],
  esbuildPlugins: [
    tektonPlugin({
      strict: process.env.NODE_ENV === 'production',
    }),
  ],
});
```

## Options

```typescript
interface TektonPluginOptions {
  strict?: boolean; // Fail build on violations (default: true in prod)
  include?: RegExp[]; // File patterns to include (default: /.tsx?$/)
  exclude?: RegExp[]; // File patterns to exclude (default: node_modules, tests)
  threshold?: number; // Compliance threshold (default: 100)
  reportPath?: string; // Generate report file
  verbose?: boolean; // Enable verbose logging
}
```

## How It Works

1. **AST Analysis**: Uses Babel parser to analyze styled-components templates
2. **Pattern Detection**: Identifies hardcoded colors (hex, rgb, hsl) and spacing (px values)
3. **Violation Reporting**: Generates detailed reports with file, line, and suggestions
4. **Build Enforcement**: Fails build when compliance < threshold (100% by default)

## Development vs Production

- **Development mode** (`strict: false`): Warns about violations but doesn't fail build
- **Production mode** (`strict: true`): Fails build if any violations are found

## Example Violations

```typescript
// ❌ Detected violations:

styled.div`
  background: #ffffff; // Error: hex color "#ffffff"
  // Suggestion: tokens.bg.* or tokens.fg.*

  padding: 16px; // Error: pixel spacing "16px"
  // Suggestion: tokens.spacing[4]
`;
```

## Requirements

- REQ-STY-007: Scan all .tsx/.ts files for hardcoded values
- REQ-STY-008: Report file location, line number, and violation type
- REQ-STY-009: Fail build when compliance < 100%
- REQ-STY-012: Warn in dev, fail in production

## SPEC Reference

- [SPEC-STYLED-001](/.moai/specs/SPEC-STYLED-001/spec.md)
- TAG-006: esbuild Plugin Core
- TAG-007: AST Analysis Logic
- TAG-008: Build Reporting System

## License

MIT
npm package: @framingui/react-native
Description: FramingUI React Native runtime primitives and token consumption helpers
Latest version: 0.1.0

# @framingui/react-native

React Native runtime primitives and token consumption helpers for FramingUI.

This package is intentionally minimal in its first phase. It is designed to support Expo and React Native direct-write workflows with:

- typed token access
- `StyleSheet.create`-friendly helpers
- a small set of generic runtime primitives

Current status:

- package scaffolded
- helper and primitive extraction tracked by `SPEC-RN-001`

This package is not intended to mirror `@framingui/ui` feature-for-feature.
npm package: @framingui/tokens
Description: TypeScript token type definitions with compile-time enforcement
Latest version: 0.3.5

# @framingui/tokens

> TypeScript token type definitions with compile-time enforcement

[![npm](https://img.shields.io/npm/v/@framingui/tokens)](https://www.npmjs.com/package/@framingui/tokens)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](../../LICENSE)

## Installation

```bash
npm install @framingui/tokens
```

## Usage

```typescript
import type { FramingUITokens, TokenReference } from '@framingui/tokens';

// TokenReference ensures only CSS variables are allowed
const background: TokenReference = 'var(--framingui-bg-surface-default)';

// TypeScript error: Type '"#ffffff"' is not assignable to type 'TokenReference'
// const invalid: TokenReference = '#ffffff';
```

## Token Categories

- **BgTokens**: Background colors
- **FgTokens**: Foreground/text colors
- **SpacingTokens**: Spacing scale
- **RadiusTokens**: Border radius
- **TypographyTokens**: Font properties
- **ShadowTokens**: Box shadows

## License

MIT