open-index/open-npm huggingface dataset:
npm package: @skeptrune/sherp-cli
Description: CLI tool for creating Marp-style presentations with Markdown/MDX
Author: skeptrunedev
Latest version: 0.1.4
Deprecated: This package has moved to @skeptrunedev/sherp-cli

# @skeptrune/sherp-cli

A CLI for building presentations from Markdown/MDX.
Instant dev server, multiple themes, keyboard navigation, and PDF export.

```bash
npm install -g @skeptrune/sherp-cli
```

## Usage

```bash
# Create a new presentation
sherp init my-presentation

# Start development server
cd my-presentation
sherp dev

# Build for production
sherp build

# Preview production build
sherp preview
```

## Commands

- `sherp init <name>` - Initialize a new presentation project
- `sherp dev` - Start development server with live reload
- `sherp build` - Build presentation for production
- `sherp preview` - Preview production build

## Themes

Sherp comes with four built-in themes:

<table>
<tr>
<td align="center"><strong>Terminal</strong><br/><em>Green-on-black hacker aesthetic</em><br/><img src="../../assets/themes/terminal.png" width="400"/></td>
<td align="center"><strong>Paper</strong><br/><em>Sepia/cream academic style</em><br/><img src="../../assets/themes/paper.png" width="400"/></td>
</tr>
<tr>
<td align="center"><strong>Corporate</strong><br/><em>Professional navy/blue tones</em><br/><img src="../../assets/themes/corporate.png" width="400"/></td>
<td align="center"><strong>Default</strong><br/><em>Minimal, no custom styles</em><br/><img src="../../assets/themes/default.png" width="400"/></td>
</tr>
</table>

Select a theme during project creation:

```bash
# Use --theme or -t flag
sherp init my-presentation --theme terminal
sherp init my-presentation -t paper

# Or choose interactively
sherp init my-presentation
```

## Project Structure

Each Sherp project contains a single `presentation.mdx` file along with optional customization files:

- `presentation.mdx` - Your presentation content
- `sherp.config.json` - Project configuration
- `styles/` - Custom CSS files

## Documentation

See the [main README](../../README.md) for full documentation.

## License

MIT
npm package: @skeptrunedev/sherp-astro
Description: Astro-based presentation engine for Sherp
Author: skeptrunedev
Latest version: 0.1.7

# @skeptrune/sherp-astro

The Astro-based presentation engine for Sherp.

This package contains the core Astro application that powers Sherp presentations. It includes:

- Astro configuration and build setup
- Presentation viewer and slide components
- Markdown/MDX processing and slide parsing
- Keyboard navigation and overview mode
- Responsive design with 16:9 aspect ratio
- Built-in theme support

## Themes

The presentation engine supports customizable themes via CSS:

<table>
<tr>
<td align="center"><strong>Terminal</strong><br/><em>Green-on-black hacker aesthetic</em><br/><img src="../../assets/themes/terminal.png" width="400"/></td>
<td align="center"><strong>Paper</strong><br/><em>Sepia/cream academic style</em><br/><img src="../../assets/themes/paper.png" width="400"/></td>
</tr>
<tr>
<td align="center"><strong>Corporate</strong><br/><em>Professional navy/blue tones</em><br/><img src="../../assets/themes/corporate.png" width="400"/></td>
<td align="center"><strong>Default</strong><br/><em>Minimal, no custom styles</em><br/><img src="../../assets/themes/default.png" width="400"/></td>
</tr>
</table>

## Usage

This package is typically used by `@skeptrune/sherp-cli` and not installed directly by users.

## Development

```bash
# Install dependencies
npm install

# Start dev server
npm run dev

# Build
npm run build

# Preview build
npm run preview
```

## Documentation

See the [main README](../../README.md) for full documentation.

## License

MIT
npm package: @skeptrunedev/sherp-cli
Description: CLI tool for creating Marp-style presentations with Markdown/MDX
Author: skeptrunedev
Latest version: 0.1.7

# @skeptrune/sherp-cli

A CLI for building presentations from Markdown/MDX.
Instant dev server, multiple themes, keyboard navigation, and PDF export.

```bash
npm install -g @skeptrunedev/sherp-cli
```

## Usage

```bash
# Create a new presentation
sherp init my-presentation

# Start development server
cd my-presentation
sherp dev

# Build for production
sherp build

# Preview production build
sherp preview
```

## Commands

- `sherp init <name>` - Initialize a new presentation project
- `sherp dev` - Start development server with live reload
- `sherp build` - Build presentation for production
- `sherp preview` - Preview production build

## Themes

Sherp comes with four built-in themes:

<table>
<tr>
<td align="center"><strong>Terminal</strong><br/><em>Green-on-black hacker aesthetic</em><br/><img src="../../assets/themes/terminal.png" width="400"/></td>
<td align="center"><strong>Paper</strong><br/><em>Sepia/cream academic style</em><br/><img src="../../assets/themes/paper.png" width="400"/></td>
</tr>
<tr>
<td align="center"><strong>Corporate</strong><br/><em>Professional navy/blue tones</em><br/><img src="../../assets/themes/corporate.png" width="400"/></td>
<td align="center"><strong>Default</strong><br/><em>Minimal, no custom styles</em><br/><img src="../../assets/themes/default.png" width="400"/></td>
</tr>
</table>

Select a theme during project creation:

```bash
# Use --theme or -t flag
sherp init my-presentation --theme terminal
sherp init my-presentation -t paper

# Or choose interactively
sherp init my-presentation
```

## Project Structure

Each Sherp project contains a single `presentation.mdx` file along with optional customization files:

- `presentation.mdx` - Your presentation content
- `sherp.config.json` - Project configuration
- `styles/` - Custom CSS files

## Documentation

See the [main README](../../README.md) for full documentation.

## License

MIT
npm package: @sketch-hq/sketch-assistant-cli
Description: Sketch Assistants Node command-line utility.
Latest version: 6.5.2

# sketch-assistant-cli

Sketch Assistants Node command-line utility.

You can use this utility to run Assistants against Sketch files outside of Sketch.

It can run whichever Assistants have been added to the file by Sketch, or run a custom set of
Assistants passed in on the command line.

## Installation

### Global

```sh
npm i -g @sketch-hq/sketch-assistant-cli
```

Or,

```sh
yarn global add @sketch-hq/sketch-assistant-cli
```

The `sketch-assistants` command will then be available. See below for usage instructions.

### Local

Alternatively the CLI will work when installed locally to a project too.

```sh
yarn add @sketch-hq/sketch-assistant-cli
```

The `sketch-assistants` command will then be available to use in your `package.json` scripts.

## Local development

Setup the monorepo according to the [Getting Started](../../README.md#getting-started) instructions,
and then in this folder:

```sh
yarn build
./bin/cli.js <args>
```

## Usage

Run a Sketch file's configured Assistants.

```sh
sketch-assistants "./path/to/file.sketch"
```

Run multiple files:

```sh
sketch-assistants "./path/to/file-1.sketch" "./path/to/file-2.sketch"
```

Or use globs to run all Sketch files that match a pattern:

```sh
sketch-assistants "./**/*.sketch"
```

### Flags

#### `--json`

Switch from human-readable output to JSON. Example:

```sh
sketch-assistants --json "./path/to/file.sketch"
```

#### `--clear-cache`

When Assistants are installed before a run, they are cached in a temporary folder to make future
runs faster. Pass this flag to delete the cache folder.

#### `--workspace`

Optionally supply and overwrite the Assistant workspace configuration within the Sketch file(s) with
your own. This can be useful for running Assistants against a file that haven't yet been setup with
Assistants in the Sketch app.

```sh
sketch-assistants --workspace=./workspace.json "./path/to/file.sketch"
```

The data shape of the workspace itself is essentially a package.json, with the dependencies section
indicating the active Assistants. The workspace JSON example below activates two Assistants:

```json
{
  "dependencies": {
    "@sketch-hq/sketch-tidy-assistant": "latest",
    "@sketch-hq/sketch-naming-conventions-assistant": "latest"
  }
}
```

#### `--assistant`

Optionally supply a custom Assistant to use on the files. This is an Assistant defined entirely in
JSON. Assistants to extend, as well as a custom configuration of object can be supplied.

```sh
sketch-assistants --assistant=./assistant.json "./path/to/file.sketch"
```

Example Assistant definition in JSON:

```json
{
  "name": "max-3",
  "dependencies": {
    "@sketch-hq/sketch-core-assistant": "latest"
  },
  "assistant": {
    "extends": ["@sketch-hq/sketch-core-assistant"],
    "config": {
      "rules": {
        "@sketch-hq/sketch-core-assistant/groups-max-layers": {
          "active": true,
          "maxLayers": 3,
          "skipClasses": []
        }
      }
    }
  }
}
```
npm package: @sketch-hq/sketch-assistant-types
Description: TypeScript types for Sketch Assistants.
Latest version: 6.5.0

# sketch-assistant-types

TypeScript types for Sketch Assistants.

> 🙋‍♀️ The types exported from this module are generally useful to any TypeScript project related to
> Assistants, including the development of individual Assistant packages themselves.

## Usage

```sh
yarn add @sketch-hq/sketch-assistant-types
```
npm package: @sketch-hq/sketch-assistant-utils
Description: Utility functions and types for Sketch Assistants.
Latest version: 6.5.2

# sketch-assistant-utils

Utility functions and types for Sketch Assistants.

> 🙋‍♀️ These utility functions are mainly of use when creating Sketch Assistant Runners, i.e. tools
> that invoke Assistants against Sketch files and present the results to a user.

## Usage

```sh
yarn add @sketch-hq/sketch-assistant-utils
```

## Development

This section of the readme is related to developing the package. If you just want to consume the
package you can safely ignore this.

### Scripts

| Script               | Description                                                     |
| -------------------- | --------------------------------------------------------------- |
| yarn build           | Builds package to `dist`                                        |
| yarn test            | Runs the Jest tests                                             |
| yarn lint            | Lints with eslint                                               |
| yarn format-check    | Checks the formatting with prettier                             |
| yarn package-tarball | Creates an installable tarball from the current module contents |

### Workflows

#### Conventional commits

Try and use the [conventional commits](https://www.conventionalcommits.org/) convention when writing
commit messages.

#### Releases

This repo uses [Atlassian Changesets](https://github.com/atlassian/changesets) to automate the npm
release process. Read the docs for more information, but the top-level summary is:

- A GitHub Action maintains a permanently open PR that when merged will publish the package to npm
  with the latest changes and an automatically determined semver
- If the work you do in a PR should affect the next release, then you need to commit a "changeset"
  to the repo together with the rest of your code changes - do this by running `yarn changeset`.
  You'll be asked to provide a change type (major, minor or patch) and a message
npm package: @sketch-hq/sketch-file
Description: Utilities to read and write Sketch documents
Latest version: 1.1.5

# Sketch File

Read and write Sketch documents from TypeScript.

## Usage

### `fromFile` function

Read a Sketch Library file containing Color Variables, and dump them to JSON:

```ts
import { fromFile } from '@sketch-hq/sketch-file'
import { resolve } from 'path'

const sketchDocumentPath = './sketch-color-library.sketch'

// Custom type color swatches should be converted to
type ColorToken = {
  name: string
  value: {
    r: number
    g: number
    b: number
    a: number
  }
}

// Transform swatches into list of `ColorToken` after parsing the file successfully
fromFile(resolve(__dirname, sketchDocumentPath)).then((parsedFile) => {
  const doc = parsedFile.contents.document
  if (!doc.sharedSwatches) return

  var colors: Array<ColorToken> = []
  doc.sharedSwatches.objects.forEach((color) => {
    colors.push({
      name: color.name,
      value: {
        r: color.value.red,
        g: color.value.green,
        b: color.value.blue,
        a: color.value.alpha,
      },
    })
  })

  console.log(JSON.stringify(colors, null, 2))
})
```

### `toFile` function

Set the'Background color › Include in Export' option to `true` for all Artboards
in a Sketch document:

```ts
import { fromFile, SketchFile, toFile } from '@sketch-hq/sketch-file'
import { Artboard } from '@sketch-hq/sketch-file-format-ts/dist/cjs/types'
import { resolve } from 'path'

const sketchDocumentPath = './artboards-with-background.sketch'

fromFile(resolve(__dirname, sketchDocumentPath)).then((parsedFile) => {
  parsedFile.contents.document.pages.forEach((page) => {
    page.layers
      .filter((layer): layer is Artboard => true)
      .forEach((artboard) => {
        artboard.includeBackgroundColorInExport = true
      })
  })
  var exportableFile: SketchFile = {
    contents: parsedFile.contents,
    filepath: sketchDocumentPath,
  }
  toFile(exportableFile)
})
```
npm package: @sketch-hq/sketch-naming-conventions-assistant
Description: - [Page names](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/name-pattern-pages)   should start with an emoji, e.g. `🚧 Work in Progress`. - [Artboard names](https://github.com/sketch-hq/sketch-assistants/tree/main/ass
Author: Sketch
Latest version: 6.5.0

## Rules

- [Page names](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/name-pattern-pages)
  should start with an emoji, e.g. `🚧 Work in Progress`.
- [Artboard names](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/name-pattern-artboards)
  should start with numbers followed by a space, e.g. `1.1 Splash Screen`.
- [Group names](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/name-pattern-groups),
  default names such as `Group` are forbidden.
- [Symbol names](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/name-pattern-symbols)
  should be using forward-slash grouping, e.g. `Icon/Frog`.
npm package: @sketch-hq/sketch-reuse-suggestions-assistant
Description: - [Prefer shared styles](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/layer-styles-prefer-shared)   , maximum number of identical layer styles: `2` - [Prefer shared text styles](https://github.com/sketch-hq/sketch-ass
Author: Sketch
Latest version: 6.5.0

## Rules

- [Prefer shared styles](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/layer-styles-prefer-shared)
  , maximum number of identical layer styles: `2`
- [Prefer shared text styles](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/text-styles-prefer-shared),
  maximum number of identical text styles: `2`
- [Prefer symbols](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/groups-no-similar),
  maximum number of identical groups: `2`
- [Prefer color variables](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/colors-prefer-variable),
  maximum number of identical colors: `2`
npm package: @sketch-hq/sketch-tidy-assistant
Description: - [Maximum ungrouped layers in an artboard](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/artboards-max-ungrouped-layers):   `5` - [Borders should not be disabled](https://github.com/sketch-hq/sketch-assistants/tree/ma
Author: Sketch
Latest version: 6.5.0

## Rules

- [Maximum ungrouped layers in an artboard](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/artboards-max-ungrouped-layers):
  `5`
- [Borders should not be disabled](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/borders-no-disabled)
- [Fills should not be disabled](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/fills-no-disabled)
- [Inner shadows should not be disabled](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/inner-shadows-no-disabled)
- [Shadows should not be disabled](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/shadows-no-disabled)
- [Layer styles should not be dirty](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/layer-styles-no-dirty)
- [Text styles should not be dirty](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/text-styles-no-dirty)
- [Groups should not be empty](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/groups-no-empty)
- [Groups should not be redundant](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/groups-no-redundant)
- [Layers should not be hidden](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/layers-no-hidden)
- [Layers should not be positioned on sub-pixels](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/layers-subpixel-positioning),
  `0.5` increments are allowed
- [Shared styles should not be unused](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/shared-styles-no-unused)
- [Layers should not be loose outside artboards](https://github.com/sketch-hq/sketch-assistants/tree/main/assistants/core/src/rules/layers-no-loose)
npm package: @sketch2react/sketch2react-assistant
Description: [Sketch2React](https://sketch2react.io/) lets you build responsive prototypes and [even very simple websites](https://sketch2react.io/demoupload/artbyastor/index.html). No plugins, no code, only using the built-in tools **directly inside Sketch app**. Whe
Author: Team Sketch2React
Latest version: 1.0.9

## About Sketch2React

[Sketch2React](https://sketch2react.io/) lets you build responsive prototypes and [even very simple websites](https://sketch2react.io/demoupload/artbyastor/index.html). No plugins, no code, only using the built-in tools **directly inside Sketch app**. When you’re ready with your masterpiece just export to HTML or React 💥

## Rules

- Document must contain one page named
  ["Start here"](https://sketch2react.gitbook.io/sketch2react-io/learn/cheat-sheet) -
  [@sketch2react/sketch2react-core-assistant/occurrence-of-page](https://github.com/sketch2react/sketch-assistants/tree/master/core/src/rules/occurrence-of-page)
- Document must contain one artboard named
  ["Start"](https://sketch2react.gitbook.io/sketch2react-io/learn/cheat-sheet) on a page named
  "Start here" -
  [@sketch2react/sketch2react-core-assistant/occurrence-of-artboard](https://github.com/sketch2react/sketch-assistants/tree/master/core/src/rules/occurrence-of-artboard)
- Group name must contain one pair of curly brackets -
  [@sketch2react/sketch2react-core-assistant/group-name-component-name](https://github.com/sketch2react/sketch-assistants/tree/master/core/src/rules/group-name-component-name)
- Text name must contain one pair of curly brackets -
  [@sketch2react/sketch2react-core-assistant/text-name-component-name](https://github.com/sketch2react/sketch-assistants/tree/master/core/src/rules/text-name-component-name)
- Group name may contain zero or one pair of square brackets -
  [@sketch2react/sketch2react-core-assistant/group-name-css-classnames](https://github.com/sketch2react/sketch-assistants/tree/master/core/src/rules/group-name-css-classnames)
- Text name may contain zero or one pair of square brackets -
  [@sketch2react/sketch2react-core-assistant/text-name-css-classnames](https://github.com/sketch2react/sketch-assistants/tree/master/core/src/rules/text-name-css-classnames)
  - Artboards must contain at least one text layer named {externalasset.css} as a direct decendant. - [@sketch2react/sketch2react-assistant/artboard-contains-external-css-asset](https://github.com/sketch2react/sketch-assistants/tree/master/sketch2react/src/rules/artboard-contains-external-css-asset)
npm package: @sketch2react/sketch2react-core-assistant
Description: This is a "rules only" Assistant, meaning it contains only rule implementations and no configuration. Adding this Assistant to Sketch won't do anything because rules need to be activated in configuration before they will report anything.
Author: Team Sketch2React
Latest version: 1.0.5

This is a "rules only" Assistant, meaning it contains only rule implementations and no
configuration. Adding this Assistant to Sketch won't do anything because rules need to be activated
in configuration before they will report anything.

Make use of this Assistant by _extending_ from it in your own Assistants and adding configuration
for the rules listed below.

## Available rules

This Assistant exports the following rules.

- [@sketch2react/sketch2react-core-assistant/group-name-component-name](https://github.com/sketch2react/sketch-assistants/tree/master/core/src/rules/group-name-component-name)
- [@sketch2react/sketch2react-core-assistant/text-name-component-name](https://github.com/sketch2react/sketch-assistants/tree/master/core/src/rules/text-name-component-name)
- [@sketch2react/sketch2react-core-assistant/occurrence-of-artboard](https://github.com/sketch2react/sketch-assistants/tree/master/core/src/rules/occurrence-of-artboard)
- [@sketch2react/sketch2react-core-assistant/occurrence-of-page](https://github.com/sketch2react/sketch-assistants/tree/master/core/src/rules/occurrence-of-page)
- [@sketch2react/sketch2react-core-assistant/group-name-css-classnames](https://github.com/sketch2react/sketch-assistants/tree/master/core/src/rules/group-name-css-classnames)
- [@sketch2react/sketch2react-core-assistant/text-name-css-classnames](https://github.com/sketch2react/sketch-assistants/tree/master/core/src/rules/text-name-css-classnames)
npm package: @sketchbook-js/sketchbook
Description: The design tool that lives in your repo.
Latest version: 0.3.1

<div align="center">
  <h1>
    <img src="images/logo.png" alt="Sketchbook.js" width="160" />
  </h1>
  <p>The design tool that lives in your repo.</p>
  <p>
    <a href="https://github.com/sketchbook-js/sketchbook/actions"><img alt="Github Actions CI build status" src="https://img.shields.io/github/workflow/status/sketchbook-js/sketchbook/build-ci/master" /></a>
  </p>
</div>

## Official website

https://sketchbookjs.com

## Demo

https://demo.sketchbookjs.com

![](images/screenshot.png)

## Getting started

1.  Install the package:

    ```
    yarn add -D @sketchbook-js/sketchbook
    ```

2.  Create the default `sketchbook/config.js` and `sketchbook/example.json` files:

    ```
    yarn sketchbook init
    ```

3.  Run on `http://localhost:3000/`:

    ```
    yarn sketchbook start sketchbook/example.json
    ```

## Contributing

Take a look at the roadmap to see what's planned:

https://github.com/orgs/sketchbook-js/projects/1

Ask questions and discuss ideas in the Github Discussions section:

https://github.com/sketchbook-js/sketchbook/discussions

Have a read of the guidelines to start contributing:

https://github.com/sketchbook-js/sketchbook/blob/master/CONTRIBUTING.md

---

[![ColonyDB](images/colonydb-sponsor.svg)](https://colonydb.com/?utm_source=sketchbook-js&utm_campaign=oss)
[![Powered by Vercel](images/powered-by-vercel.svg)](https://vercel.com?utm_source=sketchbook-js&utm_campaign=oss)
npm package: @sketcher-app/sketchapp-json-plugin
Description: Utilities for working with the Sketch JSON internal formats
Author: Nusrath Khan
Latest version: 0.1.4

# Sketch.app JSON Plugin library

Provides utilities for basing your plugins on the JSON format instead of learning all of the sketch private API objects.

This is indended to be used within the Sketch plugin environment; to generate sketch files entirely in node.js, you need a different library.

There are 2 main APIs:

    // Converts an object, eg from context.selection into a JSON string representation
    toSJSON(sketchObject);

    // Takes a Sketch JSON tree and turns it into a native object. May throw on invalid data
    fromSJSON(json);


Additionally, if you would like to create layers from a dictionary, you want this:

    // Pass in a javascript object literal
    const obj: SJTextLayer = {
    "_class": "text",
    "do_objectID": generateID(),
    "frame": {
      "_class": "rect",
      "constrainProportions": false,
      "height": 17,
      "width": 117,
      "x": 146,
      "y": 253
    },
    "isVisible": true,
    "name": "My hot hot ABCD",
    ...

    };
    fromSJSONObject(obj);

If you want to verify your version of Sketch is compatible (v43+):

    import JSONPlugin from 'sketchapp-json-plugin';
    if (JSONPlugin.appVersionSupported()) {
      const layer = SJSON.fromSJSON(myJSON);
      ...
      document.pages[0].addLayers([layer]);
    } else {
      // Use old code path
    }
npm package: @sketchjs/runtime
Description: Sketch 运行时核心，提供画布渲染、节点树管理与 Yoga 布局能力。适合在纯 H5 环境中直接使用，也可作为框架封装的基础。
Author: yu.pan
Latest version: 0.1.2

# @sketchjs/runtime

Sketch 运行时核心，提供画布渲染、节点树管理与 Yoga 布局能力。适合在纯 H5 环境中直接使用，也可作为框架封装的基础。

## 🎯 适用场景

- 纯 H5 或业务自定义渲染环境
- 希望直接控制节点树与渲染过程
- 需要把运行时嵌入到已有框架中

## ✨ 功能特性

- 节点树管理与生命周期
- Yoga 布局计算与样式映射
- 事件系统与渲染调度

## 📦 安装

### npm

```sh
npm add @sketchjs/runtime
```

### pnpm

```sh
pnpm add @sketchjs/runtime
```

### yarn

```sh
yarn add @sketchjs/runtime
```

## 🚀 快速开始

```ts
import { SketchRoot, SketchText, SketchView, StyleSheet, SketchImage } from '@sketchjs/runtime'
import logo from './assets/logo.png'
import './styles.less'

const style = StyleSheet.create({
  root: {
    width: 500,
    height: 500,
    backgroundColor: '#ffffff'
  },
  view: {
    width: 500,
    height: 500,
    justifyContent: 'center',
    alignItems: 'center'
  },
  logo: {
    width: 200,
    height: 200
  },
  text: {
    width: 500,
    marginTop: 20,
    color: '#282c34',
    fontSize: 50,
    fontWeight: 400,
    lineHeight: 50,
    textAlign: 'center'
  }
})

(async () => {
  const app = document.getElementById('app')
  const canvasNode = document.createElement('canvas')
  const canvasCtx = canvasNode.getContext('2d')
  canvasNode.classList.add('canvas')
  if (!app || !canvasCtx) return

  const root = SketchRoot.create({ canvas: canvasNode, ctx: canvasCtx, style: style.root })
  root.addEventListener('initialized', (event) => console.log('initialized', event))
  root.addEventListener('elementUpdate', (event) => console.log('elementUpdate', event))
  await root.init()

  const view = SketchView.create({ style: style.view })
  const image = SketchImage.create({ src: logo, style: style.logo })
  const text = SketchText.create({ text: 'Hello  World!', style: style.text })

  await root.appendChild(view)
  await view.appendChild(image)
  await view.appendChild(text)

  app.appendChild(canvasNode)
  app.addEventListener('click', () => {
    const dataUrl = root.toDataURL('image/png', 1)
    console.log({ dataUrl })
  })

  return root.render()
})()
```

## 💡 核心概念

- `SketchRoot`：渲染根节点，负责绑定 `canvas/ctx` 并驱动渲染
- `SketchView`：布局容器节点
- `SketchImage`：图片节点
- `SketchText`：文本节点
- `StyleSheet`：样式定义与布局映射工具

## 🧩 事件

- `initialized`：`root.init()` 完成后触发
- `elementUpdate`：节点树更新后触发

## 📝 使用说明

- `root.init()` 需要 `canvas` 与 `ctx`
- `root.render()` 执行一次渲染，通常在节点更新后调用
- 样式中的 `width/height` 会影响 Canvas 像素尺寸

## 🧭 初始化流程

1. 创建 `canvas` 与 `ctx`
2. `SketchRoot.create` 创建根节点
3. `await root.init()` 完成挂载
4. 创建并挂载子节点
5. 调用 `root.render()` 渲染

## ❓ 常见问题

- 画布空白？
- 检查 `canvas/ctx` 是否有效，并确保根节点样式有 `width/height`
npm package: @sketchmark/plugin-anchors
Description: Named edge anchors for Sketchmark. Rewrites a@right --> b@left into ordinary edges with anchor metadata.
Author: sketchmark contributors
Latest version: 0.1.0

# @sketchmark/plugin-anchors

Named edge anchors for Sketchmark.

This plugin keeps the syntax friendly by rewriting endpoint refs like `a@right --> b@left` into ordinary Sketchmark edges with anchor metadata. The core renderer still only sees normal edges.

## Install

```bash
npm install sketchmark @sketchmark/plugin-anchors
```

## Usage

```ts
import { render } from "sketchmark";
import { anchors } from "@sketchmark/plugin-anchors";

render({
  container: document.getElementById("diagram")!,
  dsl: `
diagram
layout row
config gap=48

box app label="App"
box api label="API"
box db label="DB"

app@right --> api@left label="request"
api@bottom --> db@top label="query"
end
`.trim(),
  plugins: [anchors()],
});
```

## Supported Anchors

- `top`
- `right`
- `bottom`
- `left`
- `center`
- `top-left`
- `top-right`
- `bottom-left`
- `bottom-right`

## Notes

- The plugin rewrites only edge definition lines, not `step draw a-->b` targets.
- It ignores content inside triple-quoted blocks.
- You can still write `anchor-from=...` and `anchor-to=...` manually if you prefer.
npm package: @sketchmark/plugin-annotations
Description: Annotation plugin for Sketchmark. Adds lightweight geometry-style marks like angle arcs, right angles, equal ticks, midpoint marks, and dimension lines.
Author: sketchmark contributors
Latest version: 0.1.0

# @sketchmark/plugin-annotations

Lightweight textbook-style marks for Sketchmark.

This first version focuses on geometry-friendly annotations that compile into ordinary Sketchmark nodes after parsing. It complements `@sketchmark/plugin-geometry` without adding new renderer logic to the core bundle.

## Install

```bash
npm install sketchmark @sketchmark/plugin-annotations
```

## Usage

```ts
import { render } from "sketchmark";
import { annotations } from "@sketchmark/plugin-annotations";
import { geometry } from "@sketchmark/plugin-geometry";

render({
  container: document.getElementById("diagram")!,
  dsl: `
diagram
geo.point A x=90 y=220
geo.point B x=290 y=220
geo.point C x=190 y=90

geo.triangle tri points=[A,B,C]
annot.dimension base from=A to=B label="6 cm"
annot.equal eq1 from=A to=C count=1
annot.equal eq2 from=B to=C count=1
annot.angle ang a=A b=C c=B mode=interior label="theta"
annot.angle ref a=A b=C c=B mode=reflex label="360-theta" radius=60
end
`.trim(),
  plugins: [annotations(), geometry()],
});
```

## Supported Commands

- `annot.angle <id> a=<pointId> b=<pointId> c=<pointId> [mode=interior|reflex] [label="..."] [radius=<n>] [label-distance=<n>] [label-dx=<n>] [label-dy=<n>] [invert=true]`
- `annot.right-angle <id> a=<pointId> b=<pointId> c=<pointId> [label="..."] [size=<n>] [label-dx=<n>] [label-dy=<n>] [invert=true]`
- `annot.equal <id> from=<pointId> to=<pointId> [count=<n>] [label="..."] [label-dx=<n>] [label-dy=<n>] [invert=true]`
- `annot.midpoint <id> from=<pointId> to=<pointId> [label="..."] [r=<n>]`
- `annot.dimension <id> from=<pointId> to=<pointId> [label="..."] [offset=<n>] [invert=true]`

## Notes

- `v1` is intended for absolute-positioned, geometry-style diagrams.
- Commands resolve point positions from already-authored nodes, so `layout absolute` is required.
- Annotation labels are emitted as helper `text` nodes.
- `annot.angle` defaults to `mode=interior`.
- `mode=reflex` draws the major arc between the two rays.
- Exterior angles are best expressed by explicit geometry such as `geo.ray` plus an authored helper point, then annotated as a normal angle.
- `invert=true` is the shared flip control for annotations.
- For legacy `annot.angle` interior behavior, `invert=true` keeps the mark on the same angle and flips between a looser and tighter bend.
- For `annot.right-angle`, `invert=true` keeps the square on the same corner and flips the label inward vs outward.
- For `annot.equal` and `annot.dimension`, `invert=true` flips the mark to the opposite side of the segment.
- For explicit angle modes, prefer `label-distance=<n>` when you want finer label placement control.
- `@sketchmark/plugin-notation` can still run afterward to transform annotation labels too.
npm package: @sketchmark/plugin-chem-molecule
Description: Primitive molecule diagrams for Sketchmark. Compiles lightweight chem.* commands into standard Sketchmark groups and nodes.
Author: sketchmark contributors
Latest version: 0.1.0

# @sketchmark/plugin-chem-molecule

Primitive molecule diagrams for Sketchmark.

This first release stays draw-focused. It compiles `chem.*` commands into ordinary Sketchmark groups, `path` nodes, and `text` nodes, so the core renderer does not need chemistry-specific logic.

## Install

```bash
npm install sketchmark @sketchmark/plugin-chem-molecule
```

## Usage

```ts
import { render } from "sketchmark";
import { chemMolecule } from "@sketchmark/plugin-chem-molecule";

render({
  container: document.getElementById("diagram")!,
  dsl: `
diagram
chem.atom O x=120 y=150 element=O
chem.atom H1 x=70 y=220 element=H
chem.atom H2 x=170 y=220 element=H
chem.bond b1 from=O to=H1
chem.bond b2 from=O to=H2
chem.label water target=O side=top text="Water"
end
`.trim(),
  plugins: [chemMolecule()],
});
```

## Supported Commands

- `chem.atom <id> x=<n> y=<n> [element=C] [label="..."] [charge=+]`
- `chem.bond <id> from=<ref> to=<ref> [order=1|2|3|single|double|triple]`
- `chem.ring <id> x=<n> y=<n> [kind=benzene|hexagon|pentagon] [sides=<n>] [radius=<n>] [aromatic=true] [order=alternating] [labels=[...]]`
- `chem.label <id> target=<ref> text="..." [side=top|right|bottom|left|center]`

## Notes

- `chem.atom` uses `x` / `y` as the atom center and renders text labels by default.
- `chem.bond` supports atom refs directly and ring refs like `ring1.center` or `ring1.v1`.
- The plugin auto-inserts `layout absolute` if the diagram does not declare a layout yet.
- If a diagram already declares a layout, it must be `layout absolute`.
- This version does not do valence validation, automatic molecule layout, or reaction solving.
npm package: @sketchmark/plugin-circuit
Description: Primitive circuit diagrams for Sketchmark. Compiles lightweight ckt.* commands into standard Sketchmark groups and nodes.
Author: sketchmark contributors
Latest version: 0.1.0

# @sketchmark/plugin-circuit

Primitive circuit diagrams for Sketchmark.

This first release stays draw-focused. It compiles `ckt.*` commands into ordinary Sketchmark groups, `path` nodes, `circle` nodes, and `text` nodes, so the core renderer does not need circuit-specific logic.

## Install

```bash
npm install sketchmark @sketchmark/plugin-circuit
```

## Usage

```ts
import { render } from "sketchmark";
import { circuit } from "@sketchmark/plugin-circuit";

render({
  container: document.getElementById("diagram")!,
  dsl: `
diagram
ckt.port vin x=80 y=140 label="Vin"
ckt.comp r1 kind=resistor x=220 y=140 label="R1" value="10k"
ckt.comp c1 kind=capacitor x=380 y=140 orient=v label="C1" value="100n"
ckt.comp gnd kind=ground x=380 y=260
ckt.port vout x=520 y=140 label="Vout"

ckt.wire w1 from=vin to=r1.left
ckt.wire w2 from=r1.right to=vout
ckt.wire w3 from=r1.right to=c1.top
ckt.wire w4 from=c1.bottom to=gnd.top
end
`.trim(),
  plugins: [circuit()],
});
```

## Supported Commands

- `ckt.comp <id> kind=<resistor|capacitor|inductor|diode|source|ground|switch> x=<n> y=<n> [label="..."] [label-dx=<n>] [label-dy=<n>]`
- `ckt.port <id> x=<n> y=<n> [label="..."] [label-dx=<n>] [label-dy=<n>]`
- `ckt.junction <id> x=<n> y=<n> [label="..."] [label-dx=<n>] [label-dy=<n>]`
- `ckt.wire <id> from=<ref> to=<ref> [mode=straight|hv|vh|auto] [label="..."] [label-dx=<n>] [label-dy=<n>]`

## Notes

- `ckt.comp`, `ckt.port`, and `ckt.junction` use `x` / `y` as their center point in circuit space.
- The plugin auto-inserts `layout absolute` if the diagram does not declare a layout yet.
- If a diagram already declares a layout, it must be `layout absolute`.
- Wire refs can target ports and junctions directly, or component pins like `r1.left`, `r1.right`, `c1.top`, `c1.bottom`, or `d1.anode`.
- This version does not do validation, simulation, or automatic circuit solving.
npm package: @sketchmark/plugin-geometry
Description: Geometry plugin for Sketchmark. Compiles lightweight geo.* commands into standard Sketchmark nodes.
Author: sketchmark contributors
Latest version: 0.1.0

# @sketchmark/plugin-geometry

Lightweight textbook-style geometry for Sketchmark.

This first version keeps the core renderer small by compiling `geo.*` commands into ordinary Sketchmark `circle`, `path`, and `text` nodes. It focuses on drawing and labeling, not solving.

## Install

```bash
npm install sketchmark @sketchmark/plugin-geometry
```

## Usage

```ts
import { render } from "sketchmark";
import { geometry } from "@sketchmark/plugin-geometry";

render({
  container: document.getElementById("diagram")!,
  dsl: `
diagram
title label="Triangle"
geo.point A x=90 y=220
geo.point B x=290 y=220
geo.point C x=190 y=90

geo.triangle tri points=[A,B,C]
geo.segment AB from=A to=B label="c"
geo.segment BC from=B to=C label="a"
geo.segment CA from=C to=A label="b"
end
`.trim(),
  plugins: [geometry()],
});
```

## Supported Commands

- `geo.point <id> x=<n> y=<n> [label="..."] [r=<n>]`
- `geo.segment <id> from=<pointId> to=<pointId> [label="..."]`
- `geo.ray <id> from=<pointId> to=<pointId> [extend=<n>] [label="..."]`
- `geo.line <id> from=<pointId> to=<pointId> [extend=<n>] [label="..."]`
- `geo.circle <id> center=<pointId> r=<n> [label="..."]`
- `geo.arc <id> center=<pointId> r=<n> start=<deg> end=<deg> [close=none|chord|center] [label="..."]`
- `geo.ellipse <id> center=<pointId> rx=<n> ry=<n> [label="..."]`
- `geo.polygon <id> points=[A,B,C,...] [label="..."]`
- `geo.triangle <id> points=[A,B,C] [label="..."]`

## Notes

- Geometry commands are root-level in `v1`.
- The plugin auto-inserts `layout absolute` if the diagram does not declare a layout yet.
- If a diagram already declares a layout, it must be `layout absolute`.
- `geo.ray` renders with a single arrow tip at the extending end.
- `geo.arc` uses degree-based angles with `0` pointing right and `90` pointing up.
- `geo.arc close=none` draws an open arc, `close=chord` closes it with a straight chord, and `close=center` draws a sector.
- Labels are emitted as helper `text` nodes positioned near the geometry primitive.

## Options

```ts
geometry({
  pointRadius: 4,
  pointLabelDx: 10,
  pointLabelDy: -12,
  lineExtend: 80,
  autoAbsoluteLayout: true,
});
```
npm package: @sketchmark/plugin-graph
Description: Graph plotting plugin for Sketchmark. Compiles graph.* commands into standard Sketchmark nodes.
Author: sketchmark contributors
Latest version: 0.1.0

# @sketchmark/plugin-graph

Lightweight coordinate-plane graphing for Sketchmark.

This package keeps the core renderer small by compiling `graph.*` commands into ordinary Sketchmark `path`, `circle`, and `text` nodes. It focuses on plotting and teaching visuals, not symbolic math or CAS-style solving.

## Install

```bash
npm install sketchmark @sketchmark/plugin-graph
```

## Usage

```ts
import { render } from "sketchmark";
import { graph } from "@sketchmark/plugin-graph";
import { annotations } from "@sketchmark/plugin-annotations";

render({
  container: document.getElementById("diagram")!,
  dsl: `
diagram
title label="Sine Graph"

graph.axes plane x=80 y=60 width=520 height=280 xmin=-6.28 xmax=6.28 ymin=-1.5 ymax=1.5 grid=true xlabel="x" ylabel="y"
graph.plot sinCurve axes=plane expr="sin(x)" label="sin(x)"
graph.point O axes=plane at=[0,0] label="O"
graph.point P axes=plane at=[1.57,1] label="P"

annot.dimension rise from=O to=P label="rise"
end
`.trim(),
  plugins: [graph(), annotations()],
});
```

## Supported Commands

- `graph.axes <id> x=<n> y=<n> width=<n> height=<n> xmin=<n> xmax=<n> ymin=<n> ymax=<n> [grid=true] [ticks=true]`
- `graph.plot <id> axes=<axesId> expr="..." [from=<n>] [to=<n>] [samples=<n>] [label="..."]`
- `graph.point <id> axes=<axesId> at=[x,y] [label="..."] [r=<n>]`
- `graph.label <id> axes=<axesId> at=[x,y] text="..."` or `graph.label <id> target=<pointId> text="..."`
- `graph.line <id> axes=<axesId> from=[x1,y1] to=[x2,y2] [label="..."]`
- `graph.arrow <id> axes=<axesId> from=[x1,y1] to=[x2,y2] [label="..."]`
- `graph.region <id> axes=<axesId> points=[[x1,y1],[x2,y2],...] [label="..."]`
- `graph.tangent <id> axes=<axesId>|plot=<plotId> expr="..."|plot=<plotId> at=<n> [span=<n>] [label="..."]`
- `graph.area <id> axes=<axesId>|plot=<plotId> expr="..."|plot=<plotId> from=<n> to=<n> [baseline=<n>] [label="..."]`

## Notes

- Graph commands are root-level in `v1`.
- The plugin auto-inserts `layout absolute` if the diagram does not declare a layout yet.
- If a diagram already declares a layout, it must be `layout absolute`.
- `graph.point` compiles to a real authored node, so existing `annot.*` commands can target graph points directly.
- `graph.plot`, `graph.tangent`, and `graph.area` support lightweight expression strings like `sin(x)`, `cos(x)`, `x^2`, `sqrt(x)`, and `exp(x)`.
- This is draw-first graphing, not a full symbolic math system.

## Options

```ts
graph({
  autoAbsoluteLayout: true,
  axisStroke: "#2b190d",
  gridStroke: "#cbbba3",
  pointRadius: 4,
  samples: 96,
});
```
npm package: @sketchmark/plugin-notation
Description: Notation plugin for Sketchmark. Converts lightweight TeX-style math into Unicode text labels and narration.
Author: sketchmark contributors
Latest version: 0.1.1

# @sketchmark/plugin-notation

Lightweight notation support for Sketchmark.

This first version keeps the core renderer lightweight by converting common TeX-style math into Unicode text that Sketchmark can already render inside labels and narration.

## Install

```bash
npm install sketchmark @sketchmark/plugin-notation
```

## Usage

```ts
import { render } from "sketchmark";
import { notation } from "@sketchmark/plugin-notation";

render({
  container: document.getElementById("diagram")!,
  dsl: `
diagram
title label="Right Triangle"
box eq label="$x^2 + y^2 = z^2$"
note hint label="$\\theta = 45^\\circ$"
step narrate "$\\sqrt{2} \\approx 1.414$"
end
`.trim(),
  plugins: [notation()],
});
```

## What v1 supports

- Inline math delimited by `$...$`
- Inline math delimited by `\\(...\\)`
- Common Greek letters and operators such as `\\alpha`, `\\theta`, `\\times`, `\\leq`, `\\rightarrow`
- Simple `^` superscripts and `_` subscripts
- `\\frac{a}{b}` and `\\sqrt{x}`
- Label and narration text transforms across nodes, edges, groups, tables, charts, titles, and `step narrate`

## What v1 does not do

- Full LaTeX layout or fraction stacking
- KaTeX/MathJax-quality typesetting
- Markdown math parsing by default

This package is meant to be a small first plugin package and a good foundation for richer notation later.
npm package: @sketchmark/plugin-wireframe
Description: Wireframe primitives for Sketchmark. Compiles lightweight wf.* commands into standard Sketchmark nodes and groups.
Author: sketchmark contributors
Latest version: 0.1.0

# @sketchmark/plugin-wireframe

Primitive UI wireframes for Sketchmark.

This plugin keeps the mental model small by compiling a handful of `wf.*` commands into ordinary Sketchmark groups, text, lines, boxes, and circles. It focuses on reusable primitives, not prebuilt app components.

## Install

```bash
npm install sketchmark @sketchmark/plugin-wireframe
```

## Usage

```ts
import { render } from "sketchmark";
import { wireframe } from "@sketchmark/plugin-wireframe";

render({
  container: document.getElementById("diagram")!,
  dsl: `
diagram
layout row
config gap=28

wf.screen mobile frame=phone width=390 height=640 items=[hero,form]
wf.panel hero label="Hero" items=[cover,title,body,cta] width=300 height=300
wf.media cover kind=image width=260 height=120
wf.text title kind=heading lines=2 width=220
wf.text body kind=body lines=3 width=240
wf.control cta kind=button label="Continue" width=140

wf.panel form label="Sign In" items=[email,password,remember,submit] width=300 height=240
wf.control email kind=input placeholder="Email"
wf.control password kind=input placeholder="Password"
wf.control remember kind=checkbox label="Remember me"
wf.control submit kind=button label="Sign In"
end
`.trim(),
  plugins: [wireframe()],
});
```

## Supported Commands

- `wf.screen <id> [frame=browser|phone|plain] [items=[...]]`
- `wf.panel <id> [items=[...]]`
- `wf.text <id> [kind=heading|body|caption|label] [lines=<n>] [label="..."]`
- `wf.media <id> [kind=image|avatar|icon]`
- `wf.control <id> [kind=button|input|textarea|select|checkbox|radio]`
- `wf.divider <id> [orientation=horizontal|vertical] [label="..."]`

## Notes

- `wf.screen` and `wf.panel` are visible group containers.
- `wf.text` can render authored text, or placeholder bars when no `label` is given.
- `wf.control` stays generic on purpose so compounds like navbars, forms, and cards can be built from a small primitive set.
- `wf.control kind=checkbox|radio` now auto-sizes short labels more tightly and lays them out as compact top-aligned inline rows; use `text-width=` when you want a wider label area.
- The plugin works with normal Sketchmark layouts and absolute positioning.
npm package: @sketchmine/helpers
Description: A collection of plattform independend helpers
Author: Lukas Holzer
Latest version: 3.0.0

![Github banner for sketchmine](https://dt-cdn.net/images/github-banner-2x-1777-2b23e499af.png)

# @sketchmine/helpers

This package is a collection of platform independent helpers that have to work in the browser and on [Node.js](https://nodejs.org/en/).

- [@sketchmine/helpers](#sketchminehelpers)
  - [Dependency graph](#dependency-graph)
  - [List of helpers](#list-of-helpers)
  - [Building the package](#building-the-package)
  - [Linting](#linting)
  - [Testing the package](#testing-the-package)

## Dependency graph

![Dependency graph of the sketchmine helpers](https://dt-cdn.net/images/helpers-3920-bdf2b6b640.png)

## List of helpers

- **[asyncForEach](./src/async-for-each.ts)** await able forEach loop.
- **[capitalizeFirstLetter](./src/capitalize-first-letter.ts)** Capitalizes the first letter of a word.
- **[kebabCaseToCamelCase](./src/kebab-case-to-camel-case.ts)** Converts kebab-case-words to camelCase
- **[rgbToHex](./src/rgb-to-hex.ts)** converts rgb color to HEX.
- **[StyleDeclaration](./src/style-declaration.ts)** Subset Class of the CSSStyleDeclaration with Browser default values.
- **[UUID](./src/uuid.ts)** Fast UUID generator, RFC4122 version 4 compliant.

## Building the package

For building the package [Rollup.js](https://rollupjs.org/guide/en) is used as a module bundler. The configuration can be found in the `rollup.config.js` and is orchestrated by the [yarn](https://yarnpkg.com/en/) package manager.
The package bundle is in the **commonjs** format and meant to be consumed only be node.js applications.

The build can be started with the following two commands:

- `yarn build` for building the package.
- `yarn dev` for building and watching the sources of the package. *(rebuilds after safe)*

## Linting

The source code of this package is going to be linted by our CI environment. To ensure a coding standard and quality use the configured linter [tslint](https://palantir.github.io/tslint/). This package extends from the `tslint-config-airbnb` and the linting configuration extends from the root `tslint.json`.

Run `yarn lint` to execute the linter.

## Testing the package

To ensure that the helpers are working, write tests and put them in a proper named file.

**Note**: All tests according to this package should be wrapped in a `describe` with the prefix: `[helpers] › ...` like the following:

```typescript
// import statements

describe('[helpers] › ${description of the functionality that should be tested}', () => {
  // your tests should be placed here
});
```

> For tests the Jest Framework was selected. See [jestjs.io](https://jestjs.io/) for details.

Run `yarn test` to run all tests specified for the helpers. Run `yarn test -f filename.test` to run only tests that matches the provided RegExp for the filename.