npm package: @intuition-bends/crisp-blocks
Description: Core components and community blocks for the Crisp prediction market dashboard
Latest version: 1.0.1

# Crisp Blocks

Community-built data blocks for the [Crisp](https://crisp.trade) prediction market terminal.

[![npm version](https://img.shields.io/npm/v/@intuition-bends/crisp-blocks.svg)](https://www.npmjs.com/package/@intuition-bends/crisp-blocks)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](.github/CONTRIBUTING.md)

---

## What is this?

Crisp has a modular dashboard with drag-and-drop data blocks. This repo lets you:

- **Build** custom blocks using our SDK
- **Test** blocks locally in the playground
- **Share** blocks with the Crisp community

---

## Installation

```bash
npm install @intuition-bends/crisp-blocks
```

---

## Quick Start

```tsx
import {
  Block,
  CrispProvider,
  FederalStatusBlock
} from "@intuition-bends/crisp-blocks";

// Wrap your app with CrispProvider
function App() {
  return (
    <CrispProvider config={{
      navigation: {
        openMarket: (id, name) => console.log('Open market:', name),
        openTrader: (id, name) => console.log('Open trader:', name),
      }
    }}>
      <FederalStatusBlock onRemove={() => {}} />
    </CrispProvider>
  );
}
```

---

## What's Included

### Core Components

- **`Block`** - Base block wrapper with header, fullscreen toggle, and drag handle
- **`CrispProvider`** - React context for block configuration
- **`useCrisp`** / **`useCrispOptional`** - Hooks to access context

### Community Blocks

- **`FederalStatusBlock`** - Live federal government operating status from OPM.gov

### Types

```tsx
import type {
  BlockMetadata,
  BlockProps,
  BlockComponent,
  Market,
  Position,
  Order,
  Trade,
  Trader,
} from "@intuition-bends/crisp-blocks";
```

### Utilities

```tsx
import { matchBlockToEvent, getBlocksForEvent } from "@intuition-bends/crisp-blocks";
```

---

## Creating a Block

```tsx
import { Block, BlockComponent, BlockProps } from "@intuition-bends/crisp-blocks";
import { Star } from "lucide-react";

interface MyBlockProps extends BlockProps {
  title?: string;
}

export const MyBlock: BlockComponent<MyBlockProps> = ({ onRemove, title = "Hello" }) => {
  return (
    <Block title="My Block" icon={<Star size={14} />} onRemove={onRemove}>
      <div className="p-4 rounded-lg bg-surface-secondary text-primary">
        {title}
      </div>
    </Block>
  );
};

MyBlock.metadata = {
  id: "my-block",
  name: "My Block",
  description: "Does something cool",
  author: "your-username",
  version: "1.0.0",
  category: "community",
  tags: ["example"],
  dependencies: { dataProviders: [], features: [] },
  layout: { minWidth: 2, minHeight: 2, defaultWidth: 4, defaultHeight: 3 },
};
```

---

## Tailwind v4 Setup

This package uses Tailwind v4 semantic color classes. Add the package to your Tailwind sources:

```css
/* In your global.css or tailwind entry file */
@import "tailwindcss";

/* Scan the package for class names */
@source "../node_modules/@intuition-bends/crisp-blocks/dist/*.mjs";

/* Define semantic colors */
@theme inline {
  --color-accent-red: #f87171;
  --color-accent-green: #4ade80;
  --color-accent-yellow: #facc15;
  --color-accent-cyan: #22d3ee;
  --color-accent-pink: #f472b6;
  --color-accent-blue: #3b82f6;

  --color-primary: var(--crisp-text-primary, #ffffff);
  --color-secondary: var(--crisp-text-secondary, #a0a0a0);
  --color-muted: var(--crisp-text-muted, #666666);

  --color-surface-primary: var(--crisp-surface-primary, #0a0a0a);
  --color-surface-secondary: var(--crisp-surface-secondary, #141414);
  --color-surface-hover: var(--crisp-surface-hover, #1a1a1a);

  --color-border-primary: var(--crisp-border-primary, #262626);
  --color-border-secondary: var(--crisp-border-secondary, #333333);
}
```

### Semantic Color Classes

| Class                   | Use                      |
| ----------------------- | ------------------------ |
| `bg-surface-primary`    | Block background         |
| `bg-surface-secondary`  | Nested sections          |
| `bg-surface-hover`      | Hover states             |
| `text-primary`          | Headings, important text |
| `text-secondary`        | Body text                |
| `text-muted`            | Labels, hints            |
| `border-border-primary` | Borders                  |
| `text-accent-green`     | Success, positive values |
| `text-accent-red`       | Errors, negative values  |
| `text-accent-cyan`      | Links, primary actions   |
| `text-accent-yellow`    | Warnings                 |
| `text-accent-pink`      | Highlights               |

### Opacity Modifiers

```tsx
<div className="bg-accent-green/10 text-accent-green">Success</div>
<div className="bg-accent-red/10 text-accent-red">Error</div>
```

---

## Contributing

```bash
# Clone and setup
git clone https://github.com/crisp-markets/crisp-blocks.git
cd crisp-blocks
pnpm install
pnpm build

# Start the playground
pnpm playground
```

Open http://localhost:3333 to preview blocks with theme switching.

**See the full guide:** [CONTRIBUTING.md](.github/CONTRIBUTING.md)

---

## Links

- [Crisp App](https://crisp.trade)
- [Contributing Guide](.github/CONTRIBUTING.md)
- [Issues](https://github.com/crisp-markets/crisp-blocks/issues)

---

MIT License