@simple-mark/canvas 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 one-prime
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,29 @@
-# Temporary Holding Version
+# @simple-mark/canvas
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Draws Markdown on a `<canvas>` the way the [SimpleMark](https://github.com/one-prime/simple-mark)
+editor shows it: syntax visible and dimmed, headings bigger, code and tables in monospace
+(Korean, Chinese and Japanese exactly two columns wide), images and `$$` math below their
+lines. For canvas-based apps (diagram and layout tools) that show Markdown text boxes.
+
+```ts
+import { createMathImages, layoutMarkdown, paintMarkdown } from '@simple-mark/canvas';
+
+const measure = (text: string, font: string) => ((ctx.font = font), ctx.measureText(text).width);
+const math = createMathImages(() => redraw());
+
+const layout = layoutMarkdown('# Room 3\n\n**Locked** until the key is found.', {
+  width: 300,                                   // Infinity: keep the text's own lines
+  style: { fontFamily: 'sans-serif', fontSize: 16, fontWeight: 400, lineHeight: 1.5, color: '#222' },
+  measure,
+  imageSize: (src) => sizeOf(src),              // natural size; undefined while loading
+  mathSize: (tex, family) => math.size(tex, family),
+});
+paintMarkdown(ctx, layout, { image: (src) => loaded(src), math: (tex, color) => math.image(tex, color) }, '#222');
+// layout.width / layout.height: the box the text needs.
+```
+
+- `layoutMarkdown` has no DOM dependency: text widths come from your `measure`.
+- Math is rendered by `@simple-mark/math` (MathJax, loaded the first time it's needed) and
+  drawn as an image in the text's color.
+
+MIT

package/index.d.ts

@@ -0,0 +1,119 @@
+import { Theme } from "@simple-mark/model";
+//#region packages/canvas/src/layout.d.ts
+interface TextStyle {
+  fontFamily: string;
+  fontSize: number;
+  /** 100–900, as in CSS. */
+  fontWeight: number;
+  /** Line spacing as a multiple of the font size. */
+  lineHeight: number;
+  /** Color of text that has no style of its own. */
+  color: string;
+  textAlign?: 'left' | 'center' | 'right';
+}
+interface Size {
+  width: number;
+  height: number;
+}
+interface LayoutOptions {
+  /** Wrap width; Infinity keeps the text's own lines (automatic width). */
+  width: number;
+  style: TextStyle;
+  theme?: Theme;
+  /** Width of `text` drawn in `font` (a CSS font string, as for `ctx.font`). */
+  measure: (text: string, font: string) => number;
+  /** Natural size of an image (path as written): null if it can't load, undefined while loading. */
+  imageSize?: (src: string) => Size | null | undefined;
+  /**
+   * Size of rendered display math in em of `fontFamily` (see `createMathImages`): null if it
+   * has an error, undefined while rendering.
+   */
+  mathSize?: (tex: string, fontFamily: string) => Size | null | undefined;
+}
+/** A piece of text in one style. `top` is the top of its line box; text is drawn from `textTop`. */
+interface TextRun {
+  text: string;
+  x: number;
+  width: number;
+  top: number;
+  height: number;
+  textTop: number;
+  font: string;
+  fontSize: number;
+  color: string;
+  /** Behind this text only (inline code). */
+  background?: string;
+  strike?: boolean;
+  underline?: boolean;
+  /** Draw character by character on a grid of this column width (tables), wide ones in two columns. */
+  column?: number;
+}
+/** A line's full-width background or bar (code blocks, table rows, quotes). */
+interface LineDecoration {
+  top: number;
+  height: number;
+  background?: string;
+  /** A bar along the left edge: its color and width. */
+  bar?: {
+    color: string;
+    width: number;
+  };
+}
+interface ImageBox {
+  kind: 'image';
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  /** Path as written; null when a reference has no definition. */
+  src: string | null;
+  alt: string;
+  raw: string;
+  status: 'ready' | 'loading' | 'missing';
+}
+interface MathBox {
+  kind: 'math';
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  tex: string;
+  status: 'ready' | 'loading' | 'error';
+}
+interface MarkdownLayout {
+  width: number;
+  height: number;
+  runs: TextRun[];
+  lines: LineDecoration[];
+  boxes: (ImageBox | MathBox)[];
+  /** For placeholders and messages: the plain text font and colors. */
+  message: {
+    font: string;
+    dim: string;
+    error: string;
+  };
+}
+export declare function layoutMarkdown(source: string, options: LayoutOptions): MarkdownLayout;
+//#endregion
+//#region packages/canvas/src/math-images.d.ts
+interface MathImages {
+  /**
+   * Size in em of the text's font (`fontFamily`, whose x-height MathJax's ex units follow);
+   * null if the TeX has an error; undefined while rendering (starts it).
+   */
+  size(tex: string, fontFamily: string): Size | null | undefined;
+  /** The formula drawn in `color`, its error message, or undefined while it is being made. */
+  image(tex: string, color: string): CanvasImageSource | string | undefined;
+}
+export declare function createMathImages(onReady: () => void): MathImages;
+//#endregion
+//#region packages/canvas/src/paint.d.ts
+interface PaintSources {
+  /** A loaded image for a path as written; null or undefined while it can't be drawn. */
+  image?: (src: string) => CanvasImageSource | null | undefined;
+  /** Display math as an image in `color`, or its error message (see `createMathImages`). */
+  math?: (tex: string, color: string) => CanvasImageSource | string | null | undefined;
+}
+export declare function paintMarkdown(ctx: CanvasRenderingContext2D, layout: MarkdownLayout, sources?: PaintSources, color?: string): void;
+//#endregion
+export type { ImageBox, LayoutOptions, LineDecoration, MarkdownLayout, MathBox, MathImages, PaintSources, Size, TextRun, TextStyle };

package/index.js

@@ -0,0 +1,421 @@
+import { charWidth, defaultTheme, markdownParser, markdownStyles, previewBlocks, resolveLineLook, resolveLook } from "@simple-mark/model";
+//#region packages/canvas/src/layout.ts
+/** Editor sizes in em, so a canvas text at any font size looks like the editor at 15px. */
+const EM = {
+	previewTop: 4 / 15,
+	previewBottom: 8 / 15,
+	imageMaxHeight: 320 / 15,
+	imageGap: 8 / 15,
+	quoteBar: 3 / 15,
+	quoteIndent: 12 / 15
+};
+const ERROR_COLOR = "#cf222e";
+/** Characters a line may break between, like CJK in the browser (no spaces needed). */
+const BREAK_ANYWHERE = /[ᄀ-ᇿ⺀-鿿ꥠ-꥿가-힯豈-﫿＀-￯]/;
+function fontOf(look, style, theme, scale) {
+	const family = look.monospace ? theme.monospaceFamily : style.fontFamily;
+	return `${look.italic ? "italic " : ""}${look.fontWeight ?? style.fontWeight} ${style.fontSize * scale}px ${family}`;
+}
+/** Words, spaces, and single characters that may break anywhere. */
+function tokens(text) {
+	const out = [];
+	let word = "";
+	for (const ch of text) {
+		const space = ch === " " || ch === "	";
+		if (BREAK_ANYWHERE.test(ch)) {
+			if (word) out.push(word);
+			out.push(ch);
+			word = "";
+		} else if (space !== (word.length > 0 && (word[0] === " " || word[0] === "	"))) {
+			if (word) out.push(word);
+			word = ch;
+		} else word += ch;
+	}
+	if (word) out.push(word);
+	return out;
+}
+function layoutMarkdown(source, options) {
+	const theme = options.theme ?? defaultTheme;
+	const { style, measure } = options;
+	const text = source.replace(/\r\n?/g, "\n");
+	const tree = markdownParser.parse(text);
+	const { blocks, spans } = markdownStyles(tree);
+	const lineStarts = [0];
+	for (let i = text.indexOf("\n"); i !== -1; i = text.indexOf("\n", i + 1)) lineStarts.push(i + 1);
+	const isLineStart = new Set(lineStarts);
+	const lineEndOf = (n) => n + 1 < lineStarts.length ? lineStarts[n + 1] - 1 : text.length;
+	const lineOf = (pos) => {
+		let lo = 0;
+		let hi = lineStarts.length - 1;
+		while (lo < hi) {
+			const mid = lo + hi + 1 >> 1;
+			if (lineStarts[mid] <= pos) lo = mid;
+			else hi = mid - 1;
+		}
+		return lo;
+	};
+	const lineBlocks = lineStarts.map(() => /* @__PURE__ */ new Set());
+	for (const block of blocks) {
+		let end = block.to;
+		if (end > block.from && isLineStart.has(end)) end--;
+		for (let n = lineOf(block.from); n <= lineOf(end); n++) lineBlocks[n].add(block.style);
+	}
+	const previews = /* @__PURE__ */ new Map();
+	for (const preview of previewBlocks(tree, text)) {
+		const n = lineOf(preview.at);
+		previews.set(n, [...previews.get(n) ?? [], preview]);
+	}
+	const wrapWidth = options.width;
+	const runs = [];
+	/** The inline styles of each run (pieces join a run only when they come from the same span). */
+	const runStyles = [];
+	const lines = [];
+	const boxes = [];
+	/** Visual lines, for alignment: [first run, last run, width]. */
+	const rows = [];
+	let y = 0;
+	let maxWidth = 0;
+	let spanIndex = 0;
+	for (let n = 0; n < lineStarts.length; n++) {
+		const from = lineStarts[n];
+		const to = lineEndOf(n);
+		const styles = [...lineBlocks[n]];
+		const lineLook = resolveLineLook(styles, theme);
+		const scale = lineLook.fontScale ?? 1;
+		const lineHeight = style.lineHeight * style.fontSize * scale;
+		const textTop = (lineHeight - style.fontSize * scale) / 2;
+		const indent = lineLook.borderLeft ? EM.quoteIndent * style.fontSize : 0;
+		const table = styles.includes("table");
+		const available = wrapWidth - indent;
+		const pieces = [];
+		const pushText = (part, inline) => {
+			if (!part) return;
+			const font = fontOf(resolveLook(styles, inline, theme), style, theme, scale);
+			const column = table ? measure("0", font) : 0;
+			for (const token of tokens(part)) {
+				let width = 0;
+				if (table) for (const ch of token) width += charWidth(ch.codePointAt(0)) * column;
+				else width = measure(token, font);
+				pieces.push({
+					text: token,
+					width,
+					styles: inline
+				});
+			}
+		};
+		while (spanIndex < spans.length && spans[spanIndex].to <= from) spanIndex++;
+		let pos = from;
+		for (let k = spanIndex; k < spans.length && spans[k].from < to; k++) {
+			const span = spans[k];
+			pushText(text.slice(pos, Math.max(pos, span.from)), []);
+			pushText(text.slice(Math.max(pos, span.from), Math.min(span.to, to)), span.styles);
+			pos = Math.min(span.to, to);
+		}
+		pushText(text.slice(pos, to), []);
+		const visual = [[]];
+		let x = 0;
+		const newLine = () => {
+			visual.push([]);
+			x = 0;
+		};
+		for (const piece of pieces) {
+			const isSpace = /^[ \t]+$/.test(piece.text);
+			if (x + piece.width > available && x > 0) {
+				if (isSpace) {
+					newLine();
+					continue;
+				}
+				newLine();
+			}
+			if (piece.width > available && piece.text.length > 1 && !isSpace) {
+				const chars = Array.from(piece.text);
+				const each = piece.width / chars.length;
+				let part = "";
+				for (const ch of chars) {
+					if (x + (part.length + 1) * each > available && (x > 0 || part)) {
+						if (part) visual.at(-1).push({
+							text: part,
+							width: Array.from(part).length * each,
+							styles: piece.styles
+						});
+						newLine();
+						part = "";
+					}
+					part += ch;
+				}
+				if (part) {
+					const width = Array.from(part).length * each;
+					visual.at(-1).push({
+						text: part,
+						width,
+						styles: piece.styles
+					});
+					x += width;
+				}
+				continue;
+			}
+			visual.at(-1).push(piece);
+			x += piece.width;
+		}
+		for (const row of visual) {
+			const first = runs.length;
+			let rx = indent;
+			for (const piece of row) {
+				const last = runs.length > first ? runs.at(-1) : null;
+				if (last && runStyles.at(-1) === piece.styles) {
+					last.text += piece.text;
+					last.width += piece.width;
+				} else {
+					const look = resolveLook(styles, piece.styles, theme);
+					const font = fontOf(look, style, theme, scale);
+					runs.push({
+						text: piece.text,
+						x: rx,
+						width: piece.width,
+						top: y,
+						height: lineHeight,
+						textTop: y + textTop,
+						font,
+						fontSize: style.fontSize * scale,
+						color: look.color ?? style.color,
+						...look.background ? { background: look.background } : {},
+						...look.strike ? { strike: true } : {},
+						...look.underline ? { underline: true } : {},
+						...table ? { column: measure("0", font) } : {}
+					});
+					runStyles.push(piece.styles);
+				}
+				rx += piece.width;
+			}
+			rows.push([
+				first,
+				runs.length,
+				rx
+			]);
+			maxWidth = Math.max(maxWidth, rx);
+			if (lineLook.lineBackground || lineLook.borderLeft) lines.push({
+				top: y,
+				height: lineHeight,
+				...lineLook.lineBackground ? { background: lineLook.lineBackground } : {},
+				...lineLook.borderLeft ? { bar: {
+					color: lineLook.borderLeft,
+					width: EM.quoteBar * style.fontSize
+				} } : {}
+			});
+			y += lineHeight;
+		}
+		for (const preview of previews.get(n) ?? []) {
+			const top = y + EM.previewTop * style.fontSize;
+			if ("tex" in preview) {
+				const size = options.mathSize?.(preview.tex, style.fontFamily);
+				const width = size ? size.width * style.fontSize : 0;
+				const height = size ? size.height * style.fontSize : size === null ? style.lineHeight * style.fontSize : 3 * style.lineHeight * style.fontSize;
+				boxes.push({
+					kind: "math",
+					x: 0,
+					y: top,
+					width,
+					height,
+					tex: preview.tex,
+					status: size ? "ready" : size === null ? "error" : "loading"
+				});
+				maxWidth = Math.max(maxWidth, width);
+				y = top + height + EM.previewBottom * style.fontSize;
+				continue;
+			}
+			const gap = EM.imageGap * style.fontSize;
+			const maxHeight = EM.imageMaxHeight * style.fontSize;
+			let rowX = 0;
+			let rowHeight = 0;
+			let rowTop = top;
+			for (const image of preview.images) {
+				const natural = image.src === null ? null : options.imageSize?.(image.src);
+				let width;
+				let height;
+				if (natural) {
+					const scale = Math.min(1, maxHeight / natural.height, wrapWidth === Infinity ? 1 : wrapWidth / natural.width);
+					width = natural.width * scale;
+					height = natural.height * scale;
+				} else {
+					width = wrapWidth === Infinity ? 10 * style.fontSize : wrapWidth;
+					height = natural === null ? style.lineHeight * style.fontSize : maxHeight / 2;
+				}
+				if (rowX > 0 && rowX + gap + width > wrapWidth) {
+					rowTop += rowHeight + gap;
+					rowX = 0;
+					rowHeight = 0;
+				}
+				const x = rowX + (rowX > 0 ? gap : 0);
+				boxes.push({
+					kind: "image",
+					x,
+					y: rowTop,
+					width,
+					height,
+					src: image.src,
+					alt: image.alt,
+					raw: image.raw,
+					status: natural ? "ready" : natural === null ? "missing" : "loading"
+				});
+				rowX = x + width;
+				rowHeight = Math.max(rowHeight, height);
+				maxWidth = Math.max(maxWidth, rowX);
+			}
+			y = rowTop + rowHeight + EM.previewBottom * style.fontSize;
+		}
+	}
+	const width = wrapWidth === Infinity ? maxWidth : wrapWidth;
+	const align = style.textAlign ?? "left";
+	if (align !== "left") for (const [first, last, rowWidth] of rows) {
+		const shift = align === "center" ? (width - rowWidth) / 2 : width - rowWidth;
+		for (let i = first; i < last; i++) runs[i].x += shift;
+	}
+	for (const box of boxes) if (box.kind === "math") box.x = (width - box.width) / 2;
+	const message = {
+		font: fontOf({}, style, theme, .85),
+		dim: theme.inline.mark.color ?? "#8c959f",
+		error: ERROR_COLOR
+	};
+	return {
+		width,
+		height: y,
+		runs,
+		lines,
+		boxes,
+		message
+	};
+}
+//#endregion
+//#region packages/canvas/src/math-images.ts
+/** CSS ex as a share of the font size when it can't be measured. */
+const DEFAULT_EX = .5;
+/** Pixels per em of the images, so they stay sharp when a canvas is zoomed in. */
+const PIXELS_PER_EM = 64;
+const exRatios = /* @__PURE__ */ new Map();
+/** The x-height of a font as a share of its size: what CSS (and MathJax) call 1ex. */
+function exRatio(fontFamily) {
+	let ratio = exRatios.get(fontFamily);
+	if (ratio === void 0) {
+		const ctx = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
+		if (ctx) ctx.font = `100px ${fontFamily}`;
+		ratio = (ctx ? ctx.measureText("x").actualBoundingBoxAscent / 100 : 0) || DEFAULT_EX;
+		exRatios.set(fontFamily, ratio);
+	}
+	return ratio;
+}
+function createMathImages(onReady) {
+	let loading;
+	const rendered = /* @__PURE__ */ new Map();
+	const images = /* @__PURE__ */ new Map();
+	function render(tex) {
+		rendered.set(tex, "rendering");
+		loading ??= import("@simple-mark/math");
+		loading.then((m) => m.renderMath(tex, true)).then((result) => {
+			if (result.svg === void 0) rendered.set(tex, { error: result.error });
+			else {
+				const ex = (name) => parseFloat(new RegExp(`${name}="([\\d.]+)ex"`).exec(result.svg)?.[1] ?? "0");
+				rendered.set(tex, {
+					svg: result.svg,
+					ex: {
+						width: ex("width"),
+						height: ex("height")
+					}
+				});
+			}
+			onReady();
+		});
+	}
+	return {
+		size(tex, fontFamily) {
+			const entry = rendered.get(tex);
+			if (entry === void 0) render(tex);
+			if (entry === void 0 || entry === "rendering") return void 0;
+			if ("error" in entry) return null;
+			const ratio = exRatio(fontFamily);
+			return {
+				width: entry.ex.width * ratio,
+				height: entry.ex.height * ratio
+			};
+		},
+		image(tex, color) {
+			const entry = rendered.get(tex);
+			if (entry === void 0 || entry === "rendering") return void 0;
+			if ("error" in entry) return entry.error;
+			const key = `${color}\n${tex}`;
+			const known = images.get(key);
+			if (known instanceof HTMLImageElement) return known;
+			if (known === "loading") return void 0;
+			const svg = entry.svg.replace(/currentColor/g, color).replace(/width="[\d.]+ex"/, `width="${entry.ex.width * DEFAULT_EX * PIXELS_PER_EM}px"`).replace(/height="[\d.]+ex"/, `height="${entry.ex.height * DEFAULT_EX * PIXELS_PER_EM}px"`);
+			const img = new Image();
+			images.set(key, "loading");
+			img.onload = () => {
+				images.set(key, img);
+				onReady();
+			};
+			img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+		}
+	};
+}
+//#endregion
+//#region packages/canvas/src/paint.ts
+const PLACEHOLDER = "rgba(129, 139, 152, 0.15)";
+function paintMarkdown(ctx, layout, sources = {}, color = "#1f2328") {
+	ctx.save();
+	ctx.textBaseline = "top";
+	ctx.textAlign = "left";
+	for (const line of layout.lines) {
+		if (line.background) {
+			ctx.fillStyle = line.background;
+			ctx.fillRect(0, line.top, layout.width, line.height);
+		}
+		if (line.bar) {
+			ctx.fillStyle = line.bar.color;
+			ctx.fillRect(0, line.top, line.bar.width, line.height);
+		}
+	}
+	for (const run of layout.runs) {
+		ctx.font = run.font;
+		if (run.background) {
+			ctx.fillStyle = run.background;
+			ctx.fillRect(run.x, run.textTop - run.fontSize * .1, run.width, run.fontSize * 1.2);
+		}
+		ctx.fillStyle = run.color;
+		if (run.column) {
+			let x = run.x;
+			for (const ch of run.text) {
+				const cell = charWidth(ch.codePointAt(0)) * run.column;
+				ctx.fillText(ch, x + (cell - ctx.measureText(ch).width) / 2, run.textTop);
+				x += cell;
+			}
+		} else ctx.fillText(run.text, run.x, run.textTop);
+		if (run.strike || run.underline) {
+			ctx.fillStyle = run.color;
+			const thickness = Math.max(run.fontSize / 15, .5);
+			if (run.strike) ctx.fillRect(run.x, run.textTop + run.fontSize * .55, run.width, thickness);
+			if (run.underline) ctx.fillRect(run.x, run.textTop + run.fontSize * 1.02, run.width, thickness);
+		}
+	}
+	const message = (text, x, y, fill) => {
+		ctx.font = layout.message.font;
+		ctx.fillStyle = fill;
+		ctx.fillText(text, x, y);
+	};
+	for (const box of layout.boxes) if (box.kind === "image") {
+		const image = box.status === "ready" && box.src !== null ? sources.image?.(box.src) : null;
+		if (image) ctx.drawImage(image, box.x, box.y, box.width, box.height);
+		else if (box.status === "missing") message(box.src === null ? `No definition for ${box.raw}` : `Image not found: ${box.raw}`, box.x, box.y, layout.message.error);
+		else {
+			ctx.fillStyle = PLACEHOLDER;
+			ctx.fillRect(box.x, box.y, box.width, box.height);
+			if (box.alt) message(box.alt, box.x + 6, box.y + 6, layout.message.dim);
+		}
+	} else {
+		const math = sources.math?.(box.tex, color);
+		if (typeof math === "string") message(`Math error: ${math}`, box.x, box.y, layout.message.error);
+		else if (math && box.status === "ready") ctx.drawImage(math, box.x, box.y, box.width, box.height);
+		else if (box.status === "error") message("Math error", box.x, box.y, layout.message.error);
+	}
+	ctx.restore();
+}
+//#endregion
+export { createMathImages, layoutMarkdown, paintMarkdown };

package/package.json

@@ -1,6 +1,29 @@
 {
   "name": "@simple-mark/canvas",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Draws Markdown on a <canvas> without hiding its syntax: layout (no DOM) and Canvas 2D painting.",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/one-prime/simple-mark.git",
+    "directory": "packages/canvas"
+  },
+  "keywords": [
+    "markdown",
+    "wysiwyg",
+    "editor",
+    "gfm",
+    "canvas"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    }
+  },
+  "dependencies": {
+    "@simple-mark/math": "^0.2.0",
+    "@simple-mark/model": "^0.2.0"
+  }
+}