open-index/open-npm huggingface dataset:
npm package: @fractional-company/analysis
Description: Fractional Collection Analysis
Author: CryptoSamurai
Latest version: 0.5.3

# @fractional-company/analysis

[![npm](https://img.shields.io/npm/v/@fractional-company/analysis)](https://unpkg.com/@solana/spl-token-registry@latest/)

Fractional Analysis is a package that includes analysis of NFT collections that are shown on the [fractional.art](https://fractional.art). 

The analysis include: name, website, slug, description, image,
contract information (address, token ids - if needed) and the analysis with that cover at least 4 topics such as general overview, cultural significance, macro, metrics and risk.

## Adding new analysis

Submit a PR with the added analysis file to `src/analyses/{collection name}` and updated `src/analyses/index.js`.

Please follow the analysis specification found here: `src/analyses/analysis.schema.json` and `src/analyses/example/index.js`
npm package: @fracto/http-client
Description: Customizable React http client library
Author: https://github.com/fracto-team
Latest version: 1.0.3

# http-client

> Customizable React http client library

[![NPM](https://img.shields.io/npm/v/http-client.svg)](https://www.npmjs.com/package/http-client) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save http-client
```

## Usage
```jsx
export default function App() {
	const [todos, setTodos] = useState([]);
	
	const todosAPI = useAPI("GET", "/todos");
	
	const fetchTodos = useCallback(() => {
		todosAPI.call();
	},  [todosAPI, params]);
	
	useEffect(() => {
		fetchTodos();
	}, []);
	
	useEffect(() => {
		if(todosAPI.networkState === 'success' && todosAPI.body) {
			setTodos(todosAPI.body);
		}
	}, [todosAPI.body, todosAPI.networkState]);
	
	return (
		<div>
			{todosAPI.loading && <div>Loading...</div>}
			{
				!todosAPI.loading && todosAPI.networkState === "success" && (
					<div>
						{todos.map((item) => (<div key={item.id}>{item.title}</div>))}
					</div>
				)
			}
			{!todosAPI.loading && todosAPI.networkState === "error" && (<div>Error fetching todos</div>)}
		</div>
	);
}
```

See more advanced demo on [codesandbox](https://codesandbox.io/s/fracto-http-client-sample-kr95m)

## License

MIT © [https://github.com/fracto-team](https://github.com/https://github.com/fracto-team)
npm package: @fractools/fileserver
Description: Fileserver for Fractools Nodes
Author: genratio
Latest version: 0.4.0

# Fileserver

This is a Module for [FractoolsNode](https://github.com/fractools/fractoolsnode)

## Upload a File

> Attention: The fallowing is not finished yet!

Async Method

```javascript
// Define Fileserver
const fileserver = 'http://localhost:8000/'

// Initialize the form data
const formData = new FormData();

let file = {} // File from Form
let dest = '' // Destination Path

// Add the form data we need to submit
formData.append('file', file);
formData.append('dest', dest);

try {
  let res = await axios.post(`${fileserver}upload`, formData)
  console.log('PDF uploaded', res)
} catch (err) {
  console.log('PDF Upload Error: ', err);
}
```

File will now be uploaded in `/uploads/[...]`

### Destination
You can define subfolder like the fallowing example:

`foo/bar`

> this will upload the file into `/uploads/foo/bar/file.suffix`
npm package: @fractulus/cli
Description: CLI tool for Fractulus
Latest version: 1.0.3

# Fractulus CLI
A command line interface for Fractulus

![CLI](/docs/images/cli-install.png "Installation")

# hbf new
The Fractulus CLI makes it easy to create an application that already works, right out of the box. It already follows [fractal](http://fractal.build/guide) best practices!

```bash
# Creates new app "awesome-application" under current working directory
> hbf new "Awesome Application"
# Alias
> hbf n "Awesome Application"
# Skip installation of node modules
> hbf n "Awesome Application" -s
# Help & Options
> hbf new --help
```

# hbf create-component
Generate components with a simple command. The CLI will also create simple test shells for them.

```bash
# Creates a component "hello-world" under "./src/app/components"
> hbf create-component "Hello World"
# Alias
> hbf cc "Hello World"
# Help & Options
> hbf cc --help
```

# hbf create-page
Generate pages with a simple command.

```bash
# Creates a page "homepage" under "./src/app/pages"
> hbf create-page "Homepage"
# Alias
> hbf cp "Homepage"
# Help & Options
> hbf cp --help
```

# hbf serve
Easily test your app locally while developing.

```bash
# Serve locally
> hbf serve
# Serve in production mode
> hbf serve -p
# Watch files
> hbf serve -w
# Generate source maps
> hbf serve -s
# Help & Options
> hbf serve --help
```

# hbf build
Compiles the application into an output directory. The build artifacts will be stored in the dist/ directory

```bash
# Build for deployment
> hbf build
# Build production
> hbf build -p
# Generate source maps
> hbf build -s
# Help & Options
> hbf build --help
```
npm package: @fradev/ng-snotify
Description: Angular 2+ notifications center
Author: fdonzello
Latest version: 4.4.4

# ng-snotify

[![Build Status](https://travis-ci.org/artemsky/ng-snotify.svg?branch=master)](https://travis-ci.org/artemsky/ng-snotify)
[![NPM Version](https://img.shields.io/npm/v/ng-snotify.svg)](https://www.npmjs.com/package/ng-snotify)
[![NPM Downloads](https://img.shields.io/npm/dt/ng-snotify.svg)](https://www.npmjs.com/package/ng-snotify)
[![Dev dependencies status list](https://david-dm.org/artemsky/ng-snotify/dev-status.svg)](https://david-dm.org/artemsky/ng-snotify?type=dev)

## Example
https://artemsky.github.io/ng-snotify/


## Features

- 9 types of toast notifications (async, confirm, prompt and more...)
- Ability to create toasts in different positions at the same time
- Many config options (icons, backdrop, timeout, position and much more)
- Custom fully controlled styling including animations
- Repository includes 3 different styles. So you can use on of them, or create your own.
- Callbacks
- Custom HTML
- 4.3KB minified and gzipped

###### Looking for an Vue.js 2 version? [Here](https://github.com/artemsky/vue-snotify/)

![Snotify Gif](https://thumbs.gfycat.com/SoftGranularDalmatian-size_restricted.gif)

## Installation

###### NPM 5
`npm install ng-snotify`

###### yarn
`yarn add ng-snotify`

## Documentation and Examples

Documentation - [here](https://artemsky.github.io/ng-snotify/documentation)  
Example application source - [here](https://github.com/artemsky/ng-snotify/tree/master/example/app)  
Auto-Documentation (Compodoc) - [here](https://artemsky.github.io/ng-snotify/compodoc/)  
Change Log - [here](https://github.com/artemsky/ng-snotify/blob/master/CHANGELOG.md)

## License

MIT © [artemsky](mailto:mr.artemsky@gmail.com)
npm package: @frag-crypto/frag-core
Description: Core component of a frag ui
Author: irontiga
Latest version: 0.0.6

# Frag UI 
<img src="http://www.browserstack.com/images/layout/browserstack-logo-600x315.png" width="140"/>

See .eslint.rc.json for linting rules. Lint with
```
npm run lint
```

Built with lit-element https://lit-element.polymer-project.org/

Layout helper classes from https://material.io/develop/web/components/layout-grid/

Components ideally from https://github.com/material-components/material-components-web-components
But some aren't...falls back on https://www.webcomponents.org/author/PolymerElements

Using redux for state management

Uses EpmlJS https://github.com/irontiga/epml which is a "v2" of https://irontiga.github.io/wimp-js/

If out of memory...
```
node --max-old-space-size=8192 node_modules/rollup/bin/rollup -c rollup.config.js --watch
```
If network timeouts of google-material-icons
```
yarn install --network-timeout 100000
```

Need to fix `src/styles/app-styles.js`. Currently if I uncomment the import of `styles.scss` it breaks despite having the rollup sass plugin...
npm package: @frag-ment/better-sqlite3-sqlcipher
Description: SQLCipher-enabled better-sqlite3 adapter
Latest version: 0.1.0

# @frag-ment/better-sqlite3-sqlcipher

SQLCipher-enabled adapter around `better-sqlite3`, plus helper scripts to bootstrap a working SQLCipher runtime (notably in Electron contexts).

## Role

- Provides a small typed adapter around `better-sqlite3` + SQLCipher PRAGMAs.
- Keeps native encryption concerns outside app business/UI layers.
- Makes extraction to a dedicated repository straightforward later.

## Public API

- `openEncryptedDatabase(options)`
- `closeDatabase()`
- `runMigrations(migrate)`
- `isCipherAvailable(databaseCtor?)`
- `applySecurityPragmas(db, passphrase, options?)`

## Install

```bash
npm i @frag-ment/better-sqlite3-sqlcipher
```

`postinstall` tries to bootstrap automatically (best effort). If it fails, install still succeeds and you can run strict mode manually.

For deterministic local/CI setup, run strict mode manually:

```bash
npm run sqlcipher:bootstrap:strict
```

Host app resolution:

- Scripts use `FRAGMENT_APP_ROOT` (or `INIT_CWD`) to find the host app root.
- If Electron version is not found in host `package.json`, set `ELECTRON_VERSION` explicitly.

## System dependencies

Linux build dependencies are the same as the desktop app native toolchain: `build-essential`, `python`, OpenSSL dev headers and `node-gyp` compatible environment.

## Runtime versions

- Node.js: `>=22.14.0`
- Electron host app: `35.1.4`
npm package: @fragans/ptl-web-components
Description: pivot the label reusable web components
Latest version: 0.2.1

# Pivot The Label - Web Components

## Getting Started
Run:

```bash
npm install
npm start
```

To build the component for production, run:

```bash
npm run build
```

To run the unit tests for the components, run:

```bash
npm test
```

To publish to NPM
```bash
npm run build
npm login
npm publish --access public --otp=<code>
```

## Todo
default state when search keyword is null
@prop title widget rekomendasi -ok
npm package: @fragment0/tslint-config
Description: TSLint Rules for fragment0
Author: fragment0
Latest version: 0.1.8

# @fragment0/tslint-config

## Installation

```
npm i -D tslint @fragment0/tslint-config
```

Then add to your ~tslint.json~ file:

```json
{
  "extends": "@fragment0/tslint-config"
}
```
npm package: @fragment_ui/blocks
Description: Pre-built screen compositions and blocks for Fragment UI
Latest version: 1.0.1

# @fragment_ui/blocks

Pre-built screen compositions and blocks for Fragment UI.

## Installation

```bash
pnpm add @fragment_ui/blocks @fragment_ui/ui @fragment_ui/tokens
```

## Quick Start

```tsx
import { DashboardLayout, KPIDashboard } from "@fragment_ui/blocks";

export default function Dashboard() {
  return (
    <DashboardLayout>
      <KPIDashboard
        metrics={[
          { id: "users", title: "Users", value: "1,234", trend: "up", trendValue: "+12%" },
        ]}
      />
    </DashboardLayout>
  );
}
```

## Documentation

- **[Blocks Documentation](https://fragment-ui.dev/docs/blocks)** - Complete blocks reference
- **[Examples](https://fragment-ui.dev/docs/examples)** - Real-world usage examples
- **[Dashboard Example](https://fragment-ui.dev/docs/examples/layout/dashboard)** - Complete dashboard example

## Available Blocks

- **Dashboard Layout** - Complete dashboard with sidebar and header
- **KPI Dashboard** - Key performance indicator cards
- **Navigation Header** - Top navigation bar
- **Settings Screen** - Settings page layout
- **Data Table** - Advanced data table with sorting and filtering
- **Form Container** - Form layout components
- **Authentication Block** - Login/signup forms
- **Pricing Table** - Pricing comparison tables
- And more...

## Example Projects

Check out our example applications:

- **[Next.js Dashboard](https://github.com/blazejrzepa/fragment-ui/tree/main/examples/nextjs-dashboard)** - Complete dashboard application
- **[SaaS Settings](https://github.com/blazejrzepa/fragment-ui/tree/main/examples/saas-settings)** - Settings page example

## License

MIT
npm package: @fragment_ui/tokens
Description: Design tokens for Fragment UI Design System
Latest version: 1.0.1

# @fragment_ui/tokens

Design tokens for Fragment UI Design System.

## Installation

```bash
pnpm add @fragment_ui/tokens
```

## Quick Start

Import tokens in your CSS file:

```css
@import "@fragment_ui/tokens";
```

Or import in JavaScript/TypeScript:

```ts
import "@fragment_ui/tokens";
```

## Usage

Tokens are available as CSS variables:

```css
.my-component {
  color: var(--color-fg-base);
  background: var(--color-surface-1);
  padding: var(--spacing-4);
  border-radius: var(--radius-md);
}
```

## Documentation

- **[Design Tokens](https://fragment-ui.dev/docs/foundations/tokens)** - Complete token reference
- **[Theming](https://fragment-ui.dev/docs/foundations/theming)** - Customization guide
- **[Dark Mode](https://fragment-ui.dev/docs/foundations/dark-mode)** - Dark mode configuration

## Token Categories

- **Colors** - Semantic color system with light/dark themes
- **Spacing** - Consistent spacing scale
- **Typography** - Font families, sizes, and weights
- **Elevation** - Shadow and depth tokens
- **Motion** - Animation and transition tokens
- **Density** - Compact and comfortable density modes

## License

MIT
npm package: @fragment_ui/ui
Description: AI-native design system components based on shadcn/ui
Latest version: 1.0.1

# @fragment_ui/ui

React component library for Fragment UI Design System.

## Installation

```bash
pnpm add @fragment_ui/ui @fragment_ui/tokens
```

## Quick Start

```tsx
import { Button } from "@fragment_ui/ui";

export default function MyPage() {
  return <Button>Click me</Button>;
}
```

## Documentation

- **[Full Documentation](https://fragment-ui.dev)** - Complete component library documentation
- **[Components](https://fragment-ui.dev/docs/components)** - Browse all 63+ components
- **[Getting Started](https://fragment-ui.dev/docs/get-started/introduction)** - Quick start guide
- **[Examples](https://fragment-ui.dev/docs/examples)** - Real-world usage examples

## Install Components via Registry

You can install individual components using the registry:

```bash
# Using shadcn CLI
npx shadcn@latest add https://fragment-ui.dev/r/button.json

# Or use the Fragment UI CLI
npx @fragment-ui/cli add button
```

## Features

- **63+ Production-Ready Components** - Built on Radix UI primitives
- **Fully Accessible** - WCAG 2.1 compliant, keyboard navigable
- **Type-Safe** - Full TypeScript support
- **Customizable** - Built with Tailwind CSS and CSS variables
- **Dark Mode** - Built-in dark mode support

## License

MIT
npm package: @fragments-sdk/skills
Description: Agent skills for Fragments — the design governance platform and UI component library
Latest version: 0.1.0

# Fragments Skills

Agent skills for [Fragments](https://fragments.dev) -- the design governance platform and UI component library. Works with Claude Code, Cursor, Copilot, and any agent supporting the [Agent Skills](https://agentskills.io) standard. Listed on the [TanStack Intent registry](https://tanstack.com/intent).

## Install

Via TanStack Intent (auto-discovered from npm):

```bash
npm install @fragments-sdk/skills
npx @tanstack/intent list
```

Via Agent Skills:

```bash
npx skills add fragments-sdk/skills
```

Install a specific skill:

```bash
npx skills add fragments-sdk/skills --skill ui-setup
```

## Skills

### Setup

Two setup paths depending on what you need:

| Skill | Description | Invocation |
|-------|-------------|------------|
| [ui-setup](skills/ui-setup/) | Set up `@fragments-sdk/ui` -- install, theming, provider, MCP server, sample component | `/ui-setup` |
| [cloud-setup](skills/cloud-setup/) | Set up Fragments Cloud governance -- install `@fragments-sdk/govern`, API key, config, first check, CI/CD | `/cloud-setup` |

### Governance

| Skill | Description | Invocation |
|-------|-------------|------------|
| [govern](skills/govern/) | Run governance checks, review staged changes pre-commit, auto-fix violations | `/govern check`, `/govern review --staged` |
| [policy](skills/policy/) | Create custom design policies from natural language | `/policy create "buttons must be 44px min"` |

### Reference (auto-loaded)

These skills load automatically when relevant -- no need to invoke them directly:

| Skill | Description |
|-------|-------------|
| [ui](skills/ui/) | Best practices for `@fragments-sdk/ui` -- component selection, tokens, patterns, accessibility |
| [mcp](skills/mcp/) | Reference for all Fragments MCP tools -- discover, generate, validate, inspect |

## What is Fragments?

**UI Components** (`@fragments-sdk/ui`) -- A complete design system with tokens, components, composition blocks, and MCP tools for AI-assisted development.

**Governance** (`@fragments-sdk/govern`) -- Run checks from CLI or CI, track violations, and enforce design policies. View results in the Fragments Cloud dashboard.

## License

MIT
npm package: @fragno-dev/jsonforms-shadcn-renderers
Description: ```npm pnpm add @fragno-dev/jsonforms-shadcn-renderers \          @jsonforms/react ```
Latest version: 0.0.2

# JSONForms ShadCN Renderer

## Install

```npm
pnpm add @fragno-dev/jsonforms-shadcn-renderers \
         @jsonforms/react
```

Make sure you have all of these shadcn components added to your project:

```bash
pnpm dlx shadcn@latest add button \
        calendar \
        card \
        checkbox \
        field \
        input \
        label \
        popover \
        radio-group \
        select \
        slider \
        switch \
        tabs \
        textarea
```

## Configure

### Vite:

Because you need to bring your own ShadCN components, these imports must be resolvable in Vite.

If you get this error, it means vite cannot find your components.

```
[vite] Internal server error: Failed to resolve import "@/components/ui/slider" from "jsonforms-shadcn-renderers/src/shadcn-controls/ShadcnSlider.tsx". Does the file exist?
```

```ts
import { defineConfig } from "vite";
import path from "path";

const config = defineConfig({
  resolve: {
    alias: {
      "@/components": path.resolve(__dirname, "./src/components"),
      "@/lib": path.resolve(__dirname, "./src/lib"),
    },
  },
  ssr: {
    noExternal: ["@fragno-dev/jsonforms-shadcn-renderers"],
  },
});

export default config;
```

### Tailwind

Be sure to include this library as a tailwind source, otherwise it will not include the classes used
in your final build!

https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources

```css
@source "../node_modules/@fragno-dev/jsonforms-shadcn-renderers";
```

## Usage

```ts
import { JsonForms } from "@jsonforms/react";
import {
  shadcnRenderers,
  shadcnCells,
} from "@fragno-dev/jsonforms-shadcn-renderers";

function MyDynamicForm() {
  return (
    <JsonForms
      schema={schema}
      uischema={uiSchema}
      data={data}
      renderers={shadcnRenderers}
      cells={shadcnCells}
      onChange={({ data }) => setData(data)}
    />
  );
}
```

## Compatibility

See [this page on our docs](https://fragno.dev/docs/forms/shadcn-renderer#supported-features) for
all JSONforms primitives we support.