open-index/open-npm huggingface dataset:
npm package: @kanava/editor
Description: Headless block editor engine built on ProseMirror. Provides document model, commands, pagination, and layout primitives for building rich text editors.
Latest version: 0.1.0-beta.1

# @kanava/editor

Headless block editor engine built directly on ProseMirror. No TipTap, no BlockNote — full control over schema, rendering, and behavior.

## What's Inside

```
src/
├── api/           # Public API types, blockTree serialization, events
├── blocks/        # Block definitions (one per type, via defineBlock())
├── commands/      # ProseMirror commands by domain (text, block, columns, nesting)
├── extensions/    # Extension APIs: defineBlock(), defineMark(), schemaBuilder
├── marks/         # Mark definitions (one per type, via defineMark())
├── nodeViews/     # Custom ProseMirror NodeViews (base class + per-block)
├── plugins/       # ProseMirror plugins (blockId, selection, toolbar state, etc.)
├── schema/        # Structural nodes (doc, blockGroup, blockNode, column)
├── styles/        # CSS with --kanava-* custom properties
├── editor.ts      # KanavaEditor class — main entry point
└── index.ts       # Public exports barrel
```

## Key APIs

| API | Purpose |
|-----|---------|
| `KanavaEditor` | Main editor class — `new KanavaEditor({ element, blocks, marks, mode })` |
| `defineBlock()` | Define a block type — spec, nodeView, commands, toolbar items |
| `defineMark()` | Define an inline mark — spec, keymap, commands |
| `editor.exec(cmd)` | Execute a ProseMirror command |
| `editor.chain()` | Chain multiple commands in one transaction |
| `editor.getDocument()` | Get the document as a `KanavaDocument` JSON tree |

## Build

```bash
pnpm --filter @kanava/editor build    # → dist/ (ESM + DTS)
```

## Documentation

| Guide | What it covers |
|-------|----------------|
| [Initialization & Configuration](../docs/guide-initialization.md) | Constructor, options, density, pagination, API methods |
| [Document Model](../docs/guide-document-model.md) | JSON format, block tree, serialization, built-in types |
| [Custom Blocks](../docs/guide-custom-blocks.md) | defineBlock, NodeView, toolbar items, registration |
| [Theming & Styling](../docs/guide-theming.md) | CSS custom properties, density presets, layout modes |
| [Column Layout Architecture](../docs/architecture-columnLayout.md) | Column resize, drag, separator, nesting |
| [Toolbar Architecture](../docs/architecture-toolbar.md) | Toolbar state plugin, FormatBar, ContextMenu |

## AI Agent Support

This package ships with agent skills for AI coding assistants. The `agents` field in `package.json` points to procedural guides in `skills/`:

- **kanava-core** — Initialize and configure the editor
- **kanava-blocks** — Create custom blocks with `defineBlock()`
- **kanava-security** — Security patterns for user-generated content

## Architecture

See [Architecture Plan](../../docs/plans/Architecture%20Plan.md) for full schema and design details.
npm package: @kanava/editor-react
Description: React UI components for Kanava Editor — toolbar, format bar, block picker, context menu, and editor hooks.
Latest version: 0.1.0-beta.1

# @kanava/editor-react

React UI bindings for the Kanava editor. Pre-built components that work out-of-the-box, plus hooks for building custom UI.

## Components

| Component | Type | Purpose |
|-----------|------|---------|
| `KanavaEditorComponent` | Wrapper | Mounts the editor and provides context |
| `FixedToolbar` | Toolbar | Word-style ribbon — block type, font, alignment, paragraph formatting |
| `FormatBar` | Toolbar | Floating bar — B/I/U/S/code/link on text selection |
| `BlockPicker` | Sidebar | Slash-command block type picker |
| `ContextMenu` | Menu | Right-click with grouped actions and submenus |
| `ParagraphFormatPopover` | Popover | 5-tab paragraph formatting (spacing, indent, borders, typography, page) |
| `ImageEditorModal` | Modal | Image crop & rotate editor |

## Primitives

Reusable atoms for building custom toolbar UI:

| Primitive | Purpose |
|-----------|---------|
| `ToolbarButton` | Standard toolbar button |
| `ToolbarGroup` | Visual grouping of buttons |
| `BlockToolbar` | Auto-renders block-specific toolbar items |
| `NumberStepper` | Compact ± input with min/max/step |
| `SelectDropdown` | Dropdown with active-state highlighting |
| `SegmentedControl` | Mutually exclusive button group |

## Hooks

| Hook | Returns |
|------|---------|
| `useKanavaEditor(options)` | `KanavaEditor` instance |
| `useToolbarState(editor)` | Reactive `ToolbarState` (active marks, block type, etc.) |

## Build

```bash
pnpm --filter @kanava/editor-react build    # → dist/ (ESM + DTS)
```

## Documentation

| Guide | What it covers |
|-------|----------------|
| [React Integration](../docs/guide-react-integration.md) | Quick start, hooks, component props |
| [Theming & Styling](../docs/guide-theming.md) | CSS custom properties, density presets |
| [Toolbar Architecture](../docs/architecture-toolbar.md) | Toolbar state plugin, FormatBar, ContextMenu |

## AI Agent Support

This package ships with agent skills for AI coding assistants. The `agents` field in `package.json` points to procedural guides in `skills/`:

- **kanava-react** — Integrate the editor in a React app
- **kanava-react-custom** — Build custom toolbar and UI components
npm package: @kanbun-skam/skam
Description: Stand-off Kanbun Annotation Model - 漢文アノテーションの意味モデル型定義
Author: berlysia
Latest version: 0.1.0

# @kanbun-skam/skam

**SKAM (Stand-off Kanbun Annotation Model)** の型定義とバリデーター。

漢文本文と訓点・注記・読みを分離して保持する意味モデルの TypeScript 実装。

## インストール

```bash
npm install @kanbun-skam/skam
# or
pnpm add @kanbun-skam/skam
```

## 使い方

### 型定義

```typescript
import type { SKAMDocument, Token, Mark, Reading } from '@kanbun-skam/skam';

const doc: SKAMDocument = {
  format: 'skam@0.1',
  tokens: [
    { id: 't1', text: '学' },
    { id: 't2', text: '而' },
  ],
  marks: [{ type: 'okurigana', anchor: { from: 't1', to: 't1' }, value: 'びて' }],
  readings: [{ kind: 'kakikudashi', text: '学びて' }],
};
```

### バリデーション

```typescript
import { validateSKAMDocument, isSKAMDocument, assertSKAMDocument } from '@kanbun-skam/skam';

// 結果オブジェクトを返す
const result = validateSKAMDocument(input);
if (result.valid) {
  const doc: SKAMDocument = result.document;
} else {
  console.error(result.errors);
}

// 型ガード
if (isSKAMDocument(input)) {
  // input は SKAMDocument 型
}

// アサーション（無効な場合は例外をスロー）
assertSKAMDocument(input);
```

## Mark Types

| type        | 説明                     |
| ----------- | ------------------------ |
| `kaeri`     | 返り点                   |
| `okurigana` | 送り仮名                 |
| `yomigana`  | 読み仮名（ルビ）         |
| `soegana`   | 添え仮名（助詞補完）     |
| `okimoji`   | 置字（訓読時に読まない） |
| `joji`      | 助字（文法ラベル）       |
| `kutoten`   | 句読点                   |
| `emphasis`  | 傍点・圏点               |
| `saidoku`   | 再読文字                 |
| `okototen`  | ヲコト点                 |
| `tateten`   | たて点（熟語境界）       |
| `highlight` | 傍線（ref を参照可）     |
| `ref`       | 参照識別子・注釈         |

## Reading Kinds

| kind          | 説明               |
| ------------- | ------------------ |
| `kundoku`     | 訓読文             |
| `kakikudashi` | 書き下し文         |
| `yomiage`     | 読み上げ用テキスト |

## 関連パッケージ

- [@kanbun-skam/skam-xml-parser](https://github.com/berlysia/kanbun-annotation/tree/master/packages/skam-xml-parser) - SKAM-ML/XML パーサー
- [@kanbun-skam/skam-html-renderer](https://github.com/berlysia/kanbun-annotation/tree/master/packages/skam-html-renderer) - HTML レンダラー

## 仕様書

- [SKAM v0.1 仕様](https://github.com/berlysia/kanbun-annotation/blob/master/SKAM-draft.md)
- [SKAM-ML v0.1 仕様](https://github.com/berlysia/kanbun-annotation/blob/master/SKAM-ML-draft.md)

## ライセンス

MIT
npm package: @kanbun-skam/skam-canvas-renderer
Description: SKAM to Canvas renderer - SKAMドキュメントからCanvas APIで描画
Author: berlysia
Latest version: 0.1.0

# @kanbun-skam/skam-canvas-renderer

**SKAM ドキュメント**から **Canvas API** で描画するレンダラー。

画像エクスポートやサーバーサイドレンダリングに適した、3パスアーキテクチャの Canvas レンダラー。

## インストール

```bash
npm install @kanbun-skam/skam-canvas-renderer
# or
pnpm add @kanbun-skam/skam-canvas-renderer
```

## 使い方

### 基本的なレンダリング

```typescript
import { render } from '@kanbun-skam/skam-canvas-renderer';
import type { SKAMDocument } from '@kanbun-skam/skam';

const doc: SKAMDocument = {
  format: 'skam@0.1',
  tokens: [
    { id: 't1', text: '學' },
    { id: 't2', text: '而' },
  ],
  blocks: [{ id: 'b1', tokenIds: ['t1', 't2'] }],
  marks: [{ type: 'okurigana', anchor: { from: 't1', to: 't1' }, value: 'びて' }],
  readings: [],
};

const canvas = document.createElement('canvas');
render(doc, canvas, { fontSize: 24 });
```

### サイズ計測

```typescript
import { measure } from '@kanbun-skam/skam-canvas-renderer';

const ctx = canvas.getContext('2d')!;
const { width, height } = measure(doc, ctx, { fontSize: 24 });
canvas.width = width;
canvas.height = height;
```

### 表示プロファイル

```typescript
import { render, PROFILES } from '@kanbun-skam/skam-canvas-renderer';

// フルプロファイル（すべての要素を表示、デフォルト）
render(doc, canvas, { profile: PROFILES.full });

// 学習用基本プロファイル（返り点のみ）
render(doc, canvas, { profile: PROFILES.learningBasic });

// 学習用ヒント付きプロファイル（返り点+送り仮名）
render(doc, canvas, { profile: PROFILES.learningHint });
```

### フォントの読み込み

```typescript
import { loadDefaultFont, DEFAULT_FONT_FAMILY } from '@kanbun-skam/skam-canvas-renderer';

// デフォルトフォント（Noto Serif JP）を読み込み
await loadDefaultFont();
render(doc, canvas, { fontFamily: DEFAULT_FONT_FAMILY, fontSize: 24 });
```

### ブラウザバンドル

`<script>` タグで直接読み込み可能な IIFE バンドルも提供:

```html
<script src="node_modules/@kanbun-skam/skam-canvas-renderer/dist/index.iife.js"></script>
<script>
  const { render, measure, PROFILES } = SkamCanvasRenderer;
</script>
```

## レンダリング対応

全 13 種の SKAM v0.1 mark type をサポート:

| Mark Type   | 対応状況 |
| ----------- | -------- |
| `kaeri`     | ✅       |
| `okurigana` | ✅       |
| `yomigana`  | ✅       |
| `soegana`   | ✅       |
| `okimoji`   | ✅       |
| `joji`      | ✅       |
| `kutoten`   | ✅       |
| `emphasis`  | ✅       |
| `saidoku`   | ✅       |
| `tateten`   | ✅       |
| `highlight` | ✅       |
| `ref`       | ✅       |
| `okototen`  | ✅       |

## 内部アーキテクチャ

3パスパイプラインで描画:

1. **Pass 1** (render-tree): `SKAMDocument` → `CanvasRenderTree` (マーク解決・スロット割り当て)
2. **Pass 2** (layout): `CanvasRenderTree` → `DocumentLayout` (座標計算)
3. **Pass 3** (draw): `DocumentLayout` → Canvas API 描画

## 関連パッケージ

- [@kanbun-skam/skam](https://github.com/berlysia/kanbun-annotation/tree/master/packages/skam) - 型定義・バリデーター
- [@kanbun-skam/skam-html-renderer](https://github.com/berlysia/kanbun-annotation/tree/master/packages/skam-html-renderer) - HTML レンダラー
- [@kanbun-skam/skam-web-component](https://github.com/berlysia/kanbun-annotation/tree/master/packages/skam-web-component) - Web Component ラッパー

## ライセンス

UNLICENSED
npm package: @kanbun-skam/skam-xml-stringify
Description: SKAM JSON to SKAM-ML/XML stringifier - SKAM JSONからSKAM-ML/XMLへのシリアライザー
Author: berlysia
Latest version: 0.1.0

# @kanbun-skam/skam-xml-stringify

**SKAM JSON** から **SKAM-ML/XML** へのシリアライザー。

プログラムで処理した SKAM JSON を、人間が編集しやすい XML 形式にシリアライズ。

## インストール

```bash
npm install @kanbun-skam/skam-xml-stringify
# or
pnpm add @kanbun-skam/skam-xml-stringify
```

## 使い方

### 基本的なシリアライズ

```typescript
import { stringify } from '@kanbun-skam/skam-xml-stringify';
import type { SKAMDocument } from '@kanbun-skam/skam';

const doc: SKAMDocument = {
  format: 'skam@0.1',
  tokens: [
    { id: 't1', text: '學' },
    { id: 't2', text: '而' },
  ],
  blocks: [{ id: 'b1', tokenIds: ['t1', 't2'] }],
  marks: [
    { type: 'okurigana', anchor: { from: 't1', to: 't1' }, value: 'びて' },
    { type: 'okimoji', anchor: { from: 't2', to: 't2' } },
  ],
  readings: [{ kind: 'kakikudashi', text: '学びて' }],
};

const xml = stringify(doc);
// <?xml version="1.0" encoding="UTF-8"?>
// <skam:doc xmlns:skam="urn:skam:1" xml:lang="ja">
//   <skam:body>
//     <skam:block>
//       <skam:kun okuri="びて">學</skam:kun><skam:okimoji>而</skam:okimoji>
//     </skam:block>
//   </skam:body>
//   <skam:readings>
//     <skam:reading kind="kakikudashi">学びて</skam:reading>
//   </skam:readings>
// </skam:doc>
```

### オプション

```typescript
import { stringify } from '@kanbun-skam/skam-xml-stringify';

// XML 宣言なし
const xml = stringify(doc, { xmlDeclaration: false });

// インデントサイズの変更（デフォルト: 2）
const xml = stringify(doc, { indent: 4 });
```

## 対応 Mark Types

全 13 種の SKAM v0.1 mark type をサポート:

| type        | 出力形式                                      |
| ----------- | --------------------------------------------- |
| `kaeri`     | `<skam:kaeri kind="re"/>`                     |
| `okurigana` | `<skam:kun okuri="...">` 属性                 |
| `yomigana`  | `<skam:kun yomi="...">` 属性                  |
| `soegana`   | `<skam:kun soe="...">` 属性                   |
| `okimoji`   | `<skam:okimoji>...</skam:okimoji>`            |
| `joji`      | `<skam:joji>...</skam:joji>`                  |
| `kutoten`   | `<skam:kutoten value="..." kind="..."/>`      |
| `saidoku`   | `<skam:saidoku>...</skam:saidoku>`            |
| `okototen`  | `<skam:okototen>...</skam:okototen>`          |
| `emphasis`  | `<skam:span type="emphasis">...</skam:span>`  |
| `tateten`   | `<skam:tateten>...</skam:tateten>`            |
| `highlight` | `<skam:span type="highlight">...</skam:span>` |
| `ref`       | `<skam:ref .../>`                             |

## 関連パッケージ

- [@kanbun-skam/skam](https://github.com/berlysia/kanbun-annotation/tree/master/packages/skam) - 型定義・バリデーター
- [@kanbun-skam/skam-xml-parser](https://github.com/berlysia/kanbun-annotation/tree/master/packages/skam-xml-parser) - SKAM-ML/XML パーサー（逆方向の変換）
- [@kanbun-skam/skam-html-renderer](https://github.com/berlysia/kanbun-annotation/tree/master/packages/skam-html-renderer) - HTML レンダラー

## 仕様書

- [SKAM-ML v0.1 仕様](https://github.com/berlysia/kanbun-annotation/blob/master/SKAM-ML-draft.md)

## ライセンス

UNLICENSED