open-index/open-npm huggingface dataset:
npm package: @mizchi/crater
Description: CSS Layout Engine - Box/Flex/Grid layout computation
Author: mizchi
Latest version: 0.1.1

# @mizchi/crater

CSS Layout Engine - Box/Flex/Grid layout computation, compiled from MoonBit.

**Taffy-compatible test pass rate: 83% (212/256 Grid tests)**

## Installation

```bash
npm install @mizchi/crater
```

## Usage

```typescript
import {
  renderHtml,
  renderHtmlToJson,
  renderHtmlToPaintTree,
  Crater
} from '@mizchi/crater';

const html = '<div style="width: 200px; display: flex">...</div>';

// Get layout tree as JSON string
const layoutJson = renderHtmlToJson(html, 800, 600);
const layout = Crater.parseLayout(layoutJson);

// Get paint tree with colors
const paintJson = renderHtmlToPaintTree(html, 800, 600);
const paintTree = Crater.parsePaintTree(paintJson);
```

## API

### `renderHtml(html, width, height): string`
Render HTML to text layout tree representation.

### `renderHtmlToJson(html, width, height): string`
Render HTML to JSON layout tree.

### `renderHtmlToPaintTree(html, width, height): string`
Render HTML to paint tree JSON with colors and visual properties.

### `renderHtmlToSixel(html, width, height): string`
Render HTML to Sixel graphics for terminal display.

### `renderHtmlToSixelWithStyles(html, width, height): string`
Render HTML to Sixel graphics with actual CSS colors.

### `Crater.parseLayout(json): LayoutNode`
Parse layout JSON to typed object.

### `Crater.parsePaintTree(json): PaintNode`
Parse paint tree JSON to typed object.

## CLI

```bash
# Via npx
npx @mizchi/crater input.html
npx @mizchi/crater --json input.html
npx @mizchi/crater --styles input.html

# Or install globally
npm install -g @mizchi/crater
crater input.html
```

## WASM-GC (Experimental)

For browsers with WASM-GC support (Chrome 119+, Firefox 120+):

```typescript
import loadCrater from '@mizchi/crater/wasm';

const crater = await loadCrater();
const layoutJson = crater.renderHtmlToJson(html, 800, 600);
```

Benefits:
- Smaller bundle size (326KB vs 1.4MB)
- Potentially faster execution
- Requires WASM-GC support

## TypeScript

Full TypeScript support with type definitions:

```typescript
import type { LayoutNode, PaintNode, BoxEdges } from '@mizchi/crater';
import type { CraterWasm } from '@mizchi/crater/wasm';
```

## Development

```bash
# Build from MoonBit source
cd js && npm run build

# Run playground
cd js/playground && npm run dev
```

## License

Apache-2.0
npm package: @mizchi/crater-browser
Description: Experimental TUI browser in MoonBit - renders web pages in the terminal
Author: mizchi
Latest version: 0.1.2

# Crater Browser (Experimental)

An highly experimental TUI browser implemented in MoonBit from scratch.

**Warning: This is an experimental implementation and is not intended for production use.**

## Features

- HTML parsing and rendering
- External CSS fetching and application
- [ ] Sixel graphics output (with `--sixel` flag)
- TUI text mode rendering (with `--text` flag)
  - Image placeholders with alt text display
  - Gray background with borders for image areas
- Basic keyboard navigation
- [ ] Link navigation with Tab/Shift+Tab

## Installation

```bash
npm install -g @mizchi/crater-browser
```

## Usage

```bash
npx @mizchi/crater-browser <URL> [--sixel] [--debug]
```

### Usage Example

```bash
npx @mizchi/crater-browser https://www.cnn.co.jp/fringe/35129835.html
```

### Options

- `--text`: TUI text mode (default)
- `--sixel`: Sixel graphics mode (requires sixel-capable terminal)
- `--debug`: Print layout tree for debugging

### Development

```bash
cd browser
moon run src/main --target js -- https://example.com
moon run src/main --target js -- --sixel https://example.com
moon run src/main --target js -- --debug https://example.com
```

## Key Bindings

### Navigation

- `j` / `Down`: Scroll down
- `k` / `Up`: Scroll up
- `Ctrl-D` / `PageDown`: Page down (scroll by one screen)
- `PageUp`: Page up (scroll by one screen)
- `H` / `Backspace` / `Delete`: Go back to previous page
- `L`: Go forward to next page

### Links
- `Tab` / `n`: Next link
- `Shift+Tab` / `N` / `p`: Previous link
- `Enter`: Activate focused link
- `f`: Hit-a-hint mode (shows labels on links, type to navigate)

### General
- `g`: Go to URL (opens prompt)
- `r`: Reload current page
- `q`: Quit
- `Escape`: Exit hint mode

### Hit-a-Hint Mode

Press `f` to enter hint mode. All visible links will be labeled with characters (a-z). Type the label to navigate to that link. Press `Escape` to cancel.

For pages with more than 26 links, two-character labels (aa, ab, etc.) are used.

## Limitations

- JavaScript is not executed
- Only a subset of CSS properties are supported
- Images shown as placeholders (not actual image rendering in TUI mode)
- Some CSS layout features (grid, advanced flexbox) are partial

## TODO

- [ ] Static asset cache
- [ ] Show visited/unvisited link colors
- [ ] Tab text focus and preview
- [ ] Fix j/k scroll layout
- [ ] Access and scroll to content by AOM (Accessibility Object Model)
- [ ] Text search (Ctrl+F)
- [x] Hit-a-hint (implemented)
- [ ] Mouse click link navigation (WIP - hit testing not working correctly)