open-index/open-npm huggingface dataset:
npm package: @jiujue/weave-adapter-node
Description: Weave Node 适配：离屏渲染到 canvas，并可导出 PNG。
Latest version: 3.0.4

# @jiujue/weave-adapter-node

Node adapter for Weave: Creates a 2D context in Node environment and provides PNG export capability.

## Position in Weave (Layering)

| Layer               | Package                      | Role                                 |
| ------------------- | ---------------------------- | ------------------------------------ |
| Scene Data          | `@jiujue/weave-types`        | SceneNode/patch/TextMeasurer         |
| Engine Core         | `@jiujue/weave-core`         | layout + paint                       |
| Drawing Replay      | `@jiujue/weave-displaylist`  | replay to Node canvas 2D context     |
| Platform Adaptation | `@jiujue/weave-adapter-node` | Create Node canvas + export PNG      |
| End-to-End Entry    | `@jiujue/weave-app`          | Uses this adapter by default on Node |

## Installation

```bash
pnpm add @jiujue/weave-adapter-node
```

Requires installing any canvas backend:

```bash
pnpm add @napi-rs/canvas
# OR
pnpm add canvas
```

## Usage

```ts
import { renderDisplayListToPng } from '@jiujue/weave-adapter-node'
import type { DisplayList } from '@jiujue/weave-displaylist'

const displayList: DisplayList = []

const png = await renderDisplayListToPng(displayList, {
	width: 800,
	height: 600,
	dpr: 2,
	clearColor: '#ffffff',
})
```

Better to use the end-to-end entry: `createWeaveApp({ width, height, ... })` + `renderToPng()` from `@jiujue/weave-app`.

## Composition (Typical Usage)

- End-to-end export: `@jiujue/weave-app` (Recommended, simpler API)
- Self-driven: `@jiujue/weave-core` produces DisplayList → this package renderToPng

## AI / Skills

- [AI_GUIDE.md](./AI_GUIDE.md)
- [skills/SKILL.md](./skills/SKILL.md)
- [CHANGELOG.md](./CHANGELOG.md)

## Related Demos

- [weave-demo-node](../../apps/demo-node/README.md)
npm package: @jiujue/weave-adapter-offscreen
Description: Weave 浏览器 Worker 适配：消息协议 + OffscreenCanvas + replay。
Latest version: 3.0.4

# @jiujue/weave-adapter-offscreen

OffscreenCanvas adapter for Weave: Runs the engine in a Web Worker and communicates with the main thread via a message protocol.

## Position in Weave (Layering)

| Layer               | Package                           | Role                                       |
| ------------------- | --------------------------------- | ------------------------------------------ |
| Scene Data          | `@jiujue/weave-types`             | SceneNode/patch/TextMeasurer               |
| Engine Core         | `@jiujue/weave-core`              | layout + paint                             |
| Drawing Replay      | `@jiujue/weave-displaylist`       | Replay to OffscreenCanvas 2D context       |
| Platform Adaptation | `@jiujue/weave-adapter-offscreen` | Worker protocol + Lifecycle + Render drive |
| End-to-End Entry    | `@jiujue/weave-app`               | Uses this adapter by default on browsers   |

## Installation

```bash
pnpm add @jiujue/weave-adapter-offscreen
```

## Protocol

This adaptation layer uses a message-based protocol for communication between the main thread and the Worker.

### Requests (Main -> Worker)

- `WEAVE_INIT`: Initialize the engine.
- `WEAVE_PATCH`: Send scene updates (patches).
- `WEAVE_SET_SCENE`: Replace the entire scene.
- `WEAVE_RESIZE`: Update canvas dimensions.
- `WEAVE_RENDER`: Request a render frame.
- `WEAVE_HIT_TEST`: Request a hit test at specific coordinates.
  - Payload: `{ type: 'WEAVE_HIT_TEST', requestId: number, x: number, y: number }`

### Responses (Worker -> Main)

- `WEAVE_READY`: Engine is initialized.
- `WEAVE_ERROR`: An error occurred.
- `WEAVE_HIT_TEST_RESULT`: Response to hit test.
  - Payload: `{ type: 'WEAVE_HIT_TEST_RESULT', requestId: number, result: { id: string, path: string[] } | null }`

## Usage

```typescript
import { createOffscreenClient } from '@jiujue/weave-adapter-offscreen'

const client = createOffscreenClient({
  canvas: document.querySelector('canvas'),
  worker: new Worker(...)
})

// Async Hit Test
const result = await client.hitTest(100, 100)
```

Better to use the end-to-end entry: `@jiujue/weave-app` (defaults to Worker + OffscreenCanvas on browsers).

## Composition (Typical Usage)

- End-to-end: `@jiujue/weave-app` (Browser) has this adapter built-in; usually no need for direct dependency.
- Worker protocol only: You can use the client/worker from this package directly to integrate custom Worker management.

## AI / Skills

- [AI_GUIDE.md](./AI_GUIDE.md)
- [skills/SKILL.md](./skills/SKILL.md)
- [CHANGELOG.md](./CHANGELOG.md)

## Related Demos

- [weave-demo](../../apps/demo/README.md)
npm package: @jiujue/weave-adapter-worker-image
Description: Weave Worker Image 适配：把渲染放到 Worker，并把结果以 ImageBitmap / ImageData 传回主线程。
Latest version: 3.0.4

# @jiujue/weave-adapter-worker-image

Runs Weave rendering in a Worker and sends the rendering result (PNG binary) back to the main thread. Suitable for "offscreen rendering to generate images" scenarios (reports, exports, thumbnails, etc.).

## Position in Weave (Layering)

| Layer               | Package                              | Role                                                                         |
| ------------------- | ------------------------------------ | ---------------------------------------------------------------------------- |
| Scene Data          | `@jiujue/weave-types`                | SceneNode/patch/TextMeasurer                                                 |
| Engine Core         | `@jiujue/weave-core`                 | layout + paint                                                               |
| Drawing Replay      | `@jiujue/weave-displaylist`          | replay to OffscreenCanvas 2D context                                         |
| Platform Adaptation | `@jiujue/weave-adapter-worker-image` | Worker rendering and return PNG                                              |
| End-to-End Entry    | `@jiujue/weave-app`                  | Suitable for "drawing to canvas"; use this package when PNG binary is needed |

## Installation

```bash
pnpm add @jiujue/weave-adapter-worker-image
```

## Usage

```ts
import { createWeaveImageClient } from '@jiujue/weave-adapter-worker-image'

const client = createWeaveImageClient({
	width: 794,
	height: 1123,
	dpr: 2,
	clearColor: '#ffffff',
	scene,
})

const r = await client.render()
const blob = new Blob([r.data], { type: r.mime })
const url = URL.createObjectURL(blob)
```

## Composition (Typical Usage)

- Reports/Exports/Thumbnails: This package (PNG binary) + business side converting `ArrayBuffer` to Blob/Download/Upload.
- Interactive Canvas: Use `@jiujue/weave-app` (it draws results to a canvas instead of exporting PNG).

## AI / Skills

- [AI_GUIDE.md](./AI_GUIDE.md)
- [skills/SKILL.md](./skills/SKILL.md)
- [CHANGELOG.md](./CHANGELOG.md)

## Related Packages

- `@jiujue/weave-core`: layout/paint
- `@jiujue/weave-displaylist`: replay
- `@jiujue/weave-types`: SceneNode/patch
npm package: @jiujue/weave-app
Description: Weave 端到端统一入口：createWeaveApp（browser/node）。
Latest version: 3.0.4

# @jiujue/weave-app

The unified end-to-end entry for Weave: Renders SceneNode to the browser (Worker + OffscreenCanvas) or Node (offscreen export to PNG).

## Position in Weave (Layering)

| Layer               | Package                                                                                                 | Role                                     |
| ------------------- | ------------------------------------------------------------------------------------------------------- | ---------------------------------------- |
| Scene Data          | `@jiujue/weave-types`                                                                                   | SceneNode/patch/TextMeasurer/JSX runtime |
| Engine Core         | `@jiujue/weave-core`                                                                                    | Yoga layout + paint + hitTest            |
| Drawing Replay      | `@jiujue/weave-displaylist`                                                                             | DisplayList schema + replay              |
| Platform Adaptation | `@jiujue/weave-adapter-offscreen` / `@jiujue/weave-adapter-node` / `@jiujue/weave-adapter-worker-image` | Worker/Node/Image Export                 |
| End-to-End Entry    | `@jiujue/weave-app`                                                                                     | Aggregates capabilities with unified API |

## Installation

```bash
pnpm add @jiujue/weave-app
```

## Browser Usage

```ts
import { createWeaveApp } from '@jiujue/weave-app'

const app = createWeaveApp({
	canvas: document.querySelector('canvas')!,
	clearColor: '#0b1021',
})

app.render()
```

## Node Usage (Export to PNG)

Node requires installing any canvas backend:

```bash
pnpm add @napi-rs/canvas
# OR
pnpm add canvas
```

```ts
import { createWeaveApp } from '@jiujue/weave-app'

const app = createWeaveApp({
	width: 800,
	height: 600,
	clearColor: '#ffffff',
})

const png = await app.renderToPng()
app.dispose()
```

## Composition (Typical Usage)

- Scene Construction: Use `sceneFromJSX` from `@jiujue/weave-react` or `@jiujue/weave-types` JSX runtime to generate `SceneNode`.
- Browser Rendering: `createWeaveApp({ canvas, scene })` (internally uses `adapter-offscreen` + `core` + `displaylist`).
- Node Export: `createWeaveApp({ width, height, scene }).renderToPng()` (internally uses `adapter-node` + `core` + `displaylist`).
- Worker Image Export: When you need "PNG binary", prefer using `@jiujue/weave-adapter-worker-image`.

## AI / Skills

- [AI_GUIDE.md](./AI_GUIDE.md)
- [skills/SKILL.md](./skills/SKILL.md)
- [CHANGELOG.md](./CHANGELOG.md)

## Related Demos

- [weave-demo](../../apps/demo/README.md)
- [weave-demo-react](../../apps/demo-react/README.md)
- [weave-demo-node](../../apps/demo-node/README.md)
npm package: @jiujue/weave-core
Description: Weave 核心引擎：scene tree → Yoga layout → DisplayList。
Latest version: 3.0.4

# @jiujue/weave-core

The core engine of Weave: Maintains the scene tree, uses Yoga for layout, outputs drawing results as DisplayList, and supports hit testing and node information queries.

## Position in Weave (Layering)

| Layer            | Package                     | Role                          |
| ---------------- | --------------------------- | ----------------------------- |
| Scene Data       | `@jiujue/weave-types`       | SceneNode/patch/TextMeasurer  |
| Engine Core      | `@jiujue/weave-core`        | Yoga layout + paint + hitTest |
| Drawing Replay   | `@jiujue/weave-displaylist` | DisplayList schema + replay   |
| End-to-End Entry | `@jiujue/weave-app`         | browser/node unified entry    |

## Installation

```bash
pnpm add @jiujue/weave-core
```

## Minimal Usage (Canvas 2D)

`createEngine` only depends on the `TextMeasurer` interface and is not tied to a specific platform; on the browser side, a temporary canvas can be used for measurement.

```ts
import { createEngine } from '@jiujue/weave-core'
import type { TextMeasurer, TextStyle } from '@jiujue/weave-types'
import { replayDisplayList } from '@jiujue/weave-displaylist'

function fontFromTextStyle(style: TextStyle): string {
	const weight = style.fontWeight ?? 'normal'
	const fontStyle = style.fontStyle ?? 'normal'
	const size = style.fontSize
	const family = style.fontFamily ?? 'sans-serif'
	return `${fontStyle} ${weight} ${size}px ${family}`
}

function createBrowserTextMeasurer(): TextMeasurer {
	const canvas = document.createElement('canvas')
	const ctx = canvas.getContext('2d')!
	return {
		measure({ text, style }) {
			ctx.font = fontFromTextStyle(style)
			const width = Math.ceil(ctx.measureText(text).width)
			const lineHeight = style.lineHeight ?? Math.ceil(style.fontSize * 1.2)
			return { width, height: lineHeight, lineHeight }
		},
	}
}

const engine = await createEngine({ textMeasurer: createBrowserTextMeasurer() })
engine.setRoot({ id: 'root', type: 'container', children: [] })

const displayList = engine.render({ width: 360, height: 240 })
replayDisplayList(document.querySelector('canvas')!.getContext('2d')!, displayList, {
	dpr: window.devicePixelRatio,
})
```

## Composition (Typical Usage)

- End-to-End: Prefer using `@jiujue/weave-app` (it creates and drives the engine internally).
- "Engine only": Use `createEngine` from this package directly (you are responsible for `TextMeasurer`, driving render, and replaying DisplayList to the target platform).
- Scene Construction: Use `@jiujue/weave-types` JSX runtime or `sceneFromJSX` from `@jiujue/weave-react` to generate `SceneNode`.

## AI / Skills

- [AI_GUIDE.md](./AI_GUIDE.md)
- [skills/SKILL.md](./skills/SKILL.md)
- [CHANGELOG.md](./CHANGELOG.md)

## Related Packages

- `@jiujue/weave-types`: SceneNode/patch/TextMeasurer/Context2DLike
- `@jiujue/weave-displaylist`: DisplayList schema + replay
- `@jiujue/weave-app`: End-to-end entry (browser/node)
npm package: @jiujue/weave-devtools-runtime
Description: Weave DevTools runtime：在运行时收集与暴露调试信息。
Latest version: 3.0.4

# @jiujue/weave-devtools-runtime

Runtime capabilities for Weave DevTools: Inject hooks onto `globalThis` for instance registration, enumeration, and interactions like scene viewing and hit testing within the DevTools panel.

## Position in Weave (Layering)

| Layer            | Package                          | Role                                   |
| ---------------- | -------------------------------- | -------------------------------------- |
| Scene Data       | `@jiujue/weave-types`            | SceneNode/patch                        |
| End-to-End Entry | `@jiujue/weave-app`              | Optional integration of DevTools hook  |
| Debugging        | `@jiujue/weave-devtools-runtime` | hook definition + scene mirror (patch) |
| Tooling          | `apps/devtools-extension`        | Browser DevTools panel (Plasmo)        |

## Installation

```bash
pnpm add @jiujue/weave-devtools-runtime
```

## Usage

```ts
import { ensureWeaveDevtoolsHook } from '@jiujue/weave-devtools-runtime'

const hook = ensureWeaveDevtoolsHook()
hook.register({
	id: 'my-app',
	name: 'demo',
	canvas,
	hitTest: async (x, y) => ({ id: null, path: [] }),
	getNodeInfo: async () => null,
})
```

## Composition (Typical Usage)

- Application side: Enable `devtools: { enabled: true }` in `@jiujue/weave-app` to automatically register instances.
- Tooling side: Install and use the browser extension `apps/devtools-extension` to view the scene tree, inspect, and highlight nodes.

## AI / Skills

- [AI_GUIDE.md](./AI_GUIDE.md)
- [skills/SKILL.md](./skills/SKILL.md)
- [CHANGELOG.md](./CHANGELOG.md)

## Related Packages

- `@jiujue/weave-app`: Includes a built-in entry point for DevTools integration (optional).
npm package: @jiujue/weave-displaylist
Description: Weave DisplayList schema + replay：把绘制指令解释执行到 2D context。
Latest version: 3.0.4

# @jiujue/weave-displaylist

DisplayList schema + replay for Weave: Interprets and executes drawing commands produced by `@jiujue/weave-core` onto any `Context2DLike` (browser Canvas2D, OffscreenCanvas, Node canvas, etc.).

## Position in Weave (Layering)

| Layer            | Package                     | Role                            |
| ---------------- | --------------------------- | ------------------------------- |
| Scene Data       | `@jiujue/weave-types`       | Context2DLike / TextStyle types |
| Engine Core      | `@jiujue/weave-core`        | Produces DisplayList            |
| Drawing Replay   | `@jiujue/weave-displaylist` | Replays DisplayList to context  |
| End-to-End Entry | `@jiujue/weave-app`         | Unified browser/node entry      |

## Installation

```bash
pnpm add @jiujue/weave-displaylist
```

## Usage

```ts
import { replayDisplayList } from '@jiujue/weave-displaylist'
import type { DisplayList } from '@jiujue/weave-displaylist'

const dl: DisplayList = [
	{ op: 'fillRect', rect: { x: 0, y: 0, width: 100, height: 100 }, style: { color: '#111827' } },
	{ op: 'drawText', text: 'Hello', x: 12, y: 24, style: { fontSize: 16, color: '#fff' } },
]

replayDisplayList(canvas.getContext('2d')!, dl, { dpr: window.devicePixelRatio })
```

## Composition (Typical Usage)

- End-to-End: Prefer using `@jiujue/weave-app` (it calls replay internally).
- Engine Direct: `@jiujue/weave-core` handles layout/paint and produces DisplayList; this package draws the DisplayList to the platform context.
- Cross-platform: As long as the platform provides a `Context2DLike` compatibility layer, the DisplayList can be reused.

## AI / Skills

- [AI_GUIDE.md](./AI_GUIDE.md)
- [skills/SKILL.md](./skills/SKILL.md)
- [CHANGELOG.md](./CHANGELOG.md)

## Related Packages

- `@jiujue/weave-core`: Produces DisplayList.
- `@jiujue/weave-types`: Context2DLike / Text and Style types.
npm package: @jiujue/weave-editor-core
Description: Weave Editor 内核：组件注册、编辑器状态与代码生成等基础能力。
Latest version: 3.0.4

# @jiujue/weave-editor-core

Pure logic core for the Weave editor: component/property registration (Registry), editor state (EditorState), and SceneNode → JSX code generation tools.

## Position in Weave (Layering)

| Layer            | Package                     | Role                                    |
| ---------------- | --------------------------- | --------------------------------------- |
| Scene Data       | `@jiujue/weave-types`       | SceneNode/patch                         |
| Editor Core      | `@jiujue/weave-editor-core` | State/Registration/Code Generation      |
| Tool Application | `apps/builder-react`        | Visual editor prototype (uses this pkg) |

## Installation

```bash
pnpm add @jiujue/weave-editor-core
```

## Usage

```ts
import { EditorState, sceneToJSX } from '@jiujue/weave-editor-core'

const state = new EditorState({ id: 'root', type: 'container', children: [] })
const jsx = sceneToJSX(state.scene)
```

## Composition (Typical Usage)

- Scene Editing: Use this package to maintain editor state (selection/scene, etc.), generate/apply `ScenePatch`.
- Canvas Preview: Pass `SceneNode` to `@jiujue/weave-app` (browser) for real-time rendering.
- Code Export: `sceneToJSX(scene)` outputs a JSX string, which can be re-consumed by `@jiujue/weave-react` or the `@jiujue/weave-types` JSX runtime.

## AI / Skills

- [AI_GUIDE.md](./AI_GUIDE.md)
- [skills/SKILL.md](./skills/SKILL.md)
- [CHANGELOG.md](./CHANGELOG.md)

## Related Packages

- `@jiujue/weave-types`: SceneNode/patch type definitions.
- `@jiujue/weave-app`: Browser canvas rendering entry (preview).
- `@jiujue/weave-react`: React JSX ↔ SceneNode.
npm package: @jiujue/weave-react
Description: Weave 的 React 绑定：用 React JSX 构建 SceneNode。
Latest version: 3.0.4

# @jiujue/weave-react

Provides `sceneFromJSX`: Converts React JSX (intrinsic elements) to `@jiujue/weave-types` `SceneNode` (pure data).

## Position in Weave (Layering)

| Layer                      | Package               | Role                        |
| -------------------------- | --------------------- | --------------------------- |
| Scene Construction (React) | `@jiujue/weave-react` | React JSX → SceneNode       |
| Scene Data                 | `@jiujue/weave-types` | SceneNode/patch/JSX runtime |
| End-to-End Rendering       | `@jiujue/weave-app`   | Unified browser/node entry  |
| Engine Core                | `@jiujue/weave-core`  | layout + paint + hitTest    |

## Installation

```bash
pnpm add @jiujue/weave-react
```

## Usage

```tsx
import React from 'react'
import { sceneFromJSX } from '@jiujue/weave-react'
import type { SceneNode } from '@jiujue/weave-types'

const Text = 'text' as any

const scene: SceneNode = sceneFromJSX(
	<container id="root" style={{ width: 360, padding: 16, flexDirection: 'column' }}>
		<Text id="title" textStyle={{ fontSize: 18, color: '#e6e6e6' }}>
			Hello Weave
		</Text>
	</container>,
)
```

## Constraints

- Only supports intrinsic elements (e.g., `<container />`, `<text />`).
- Do not pass function components/class components (e.g., `<MyScene />`), otherwise an error will be thrown.

## Composition (Typical Usage)

- "Writing scenes" in React projects: Use `sceneFromJSX` from this package to get `SceneNode`.
- Hand over to engine rendering: `SceneNode` → `@jiujue/weave-app` (browser/Node) or `@jiujue/weave-core` (custom drive).
- If you prefer DSL/strong typing: Switch to the `@jiujue/weave-types` JSX runtime (which is a "post-compilation" form, suitable for TS/TSX).

## AI / Skills

- [AI_GUIDE.md](./AI_GUIDE.md)
- [skills/SKILL.md](./skills/SKILL.md)
- [CHANGELOG.md](./CHANGELOG.md)

## Related Packages

- `@jiujue/weave-types`: SceneNode/type definitions/JSX runtime.
- `@jiujue/weave-app`: End-to-end rendering entry (browser/Node).
- `@jiujue/weave-core`: Engine core (layout/paint).
npm package: @jiujue/weave-types
Description: Weave 数据模型与协议（SceneNode、patch、TextMeasurer、JSX runtime）。
Latest version: 3.0.4

# @jiujue/weave-types

Data model and protocol layer for Weave: Defines SceneNode, patch, TextMeasurer, Context2DLike, and the JSX runtime for "direct SceneNode output".

## Position in Weave (Layering)

| Layer            | Package                     | Role                                                   |
| ---------------- | --------------------------- | ------------------------------------------------------ |
| Scene Data       | `@jiujue/weave-types`       | SceneNode/patch/TextMeasurer/Context2DLike/JSX runtime |
| Engine Core      | `@jiujue/weave-core`        | Yoga layout + paint + hitTest                          |
| Drawing Replay   | `@jiujue/weave-displaylist` | DisplayList schema + replay                            |
| End-to-End Entry | `@jiujue/weave-app`         | Unified browser/node entry                             |

## Installation

```bash
pnpm add @jiujue/weave-types
```

## Usage as Types/Protocol

```ts
import type { SceneNode } from '@jiujue/weave-types'

const scene: SceneNode = { id: 'root', type: 'container', children: [] }
```

## JSX Runtime (DSL approach)

### Method A: Directly call the runtime (no JSX compilation required)

```ts
import { jsx, jsxs } from '@jiujue/weave-types/jsx-runtime'

const scene = jsxs('container', {
	id: 'root',
	style: { padding: 16, flexDirection: 'column', gap: 12 },
	children: [
		jsx('text', { id: 't1', textStyle: { fontSize: 16, color: '#111827' }, children: 'Hello' }),
	],
})
```

### Method B: Write JSX in TS/TSX (requires jsxImportSource configuration)

```ts
/** @jsxImportSource @jiujue/weave-types */
import type { SceneNode } from '@jiujue/weave-types'

const scene: SceneNode = (
  <container id="root" style={{ padding: 16, flexDirection: 'column' }}>
    <text id="title" textStyle={{ fontSize: 18, color: '#111827' }}>
      Hello Weave
    </text>
  </container>
)
```

## Composition (Typical Usage)

- Browser Rendering: Pass the `SceneNode` produced by this package to `@jiujue/weave-app` or `@jiujue/weave-core`.
- React Projects: If you prefer React JSX syntax and mental models, use `sceneFromJSX` from `@jiujue/weave-react` (which ultimately also produces this package's `SceneNode`).
- Custom Platforms: Implement `TextMeasurer` and `Context2DLike` to make `@jiujue/weave-core` / `@jiujue/weave-displaylist` work on new platforms.

## AI / Skills

- [AI_GUIDE.md](./AI_GUIDE.md)
- [skills/SKILL.md](./skills/SKILL.md)
- [CHANGELOG.md](./CHANGELOG.md)

## Related Packages

- `@jiujue/weave-core`: Consumes `SceneNode`, produces DisplayList.
- `@jiujue/weave-displaylist`: Consumes DisplayList, replays to 2D context.
- `@jiujue/weave-app`: Encapsulates the end-to-end pipeline into a unified API.
- `@jiujue/weave-react`: React JSX → SceneNode.