@boceto/remark 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Maravilla Labs
+
+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/dist/index.cjs

@@ -0,0 +1,68 @@
+'use strict';
+
+var unistUtilVisit = require('unist-util-visit');
+var core = require('@boceto/core');
+
+// src/index.ts
+function remarkBoceto(options = {}) {
+  const mode = options.mode ?? "wc";
+  const tag = options.tag ?? "boceto-view";
+  const extraAttrs = options.attributes ?? {};
+  const width = options.width ?? 860;
+  const height = options.height ?? 600;
+  const svgRenderer = mode === "svg" ? new core.SvgRenderer() : null;
+  if (mode !== "svg") {
+    return (tree) => {
+      unistUtilVisit.visit(tree, "code", (node, index, parent) => {
+        if (!parent || index == null) return;
+        if ((node.lang ?? "") !== "boceto") return;
+        const source = node.value;
+        const meta = node.meta ?? null;
+        let html;
+        if (options.render) {
+          html = options.render(source, { lang: "boceto", meta });
+        } else {
+          const attrs = { ...extraAttrs, code: source };
+          if (meta) attrs["data-page"] = meta.trim();
+          html = renderTag(tag, attrs);
+        }
+        parent.children[index] = { type: "html", value: html };
+      });
+    };
+  }
+  return async (tree) => {
+    const targets = [];
+    unistUtilVisit.visit(tree, "code", (node, index, parent) => {
+      if (!parent || index == null) return;
+      if ((node.lang ?? "") !== "boceto") return;
+      targets.push({ node, index, parent });
+    });
+    if (targets.length === 0) return;
+    await core.initYoga();
+    for (const { node, index, parent } of targets) {
+      const source = node.value;
+      const meta = node.meta ?? null;
+      let html;
+      if (options.render) {
+        html = options.render(source, { lang: "boceto", meta });
+      } else {
+        const wrapped = "```boceto" + (meta ? ":" + meta : "") + "\n" + source + "\n```";
+        const doc = core.applyFlexLayout(core.parse(wrapped));
+        html = svgRenderer.renderToString(doc, { width, height });
+      }
+      parent.children[index] = { type: "html", value: html };
+    }
+  };
+}
+function renderTag(tag, attrs) {
+  const parts = [tag];
+  for (const [k, v] of Object.entries(attrs)) parts.push(`${k}="${escapeAttr(v)}"`);
+  return `<${parts.join(" ")}></${tag}>`;
+}
+function escapeAttr(s) {
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+module.exports = remarkBoceto;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":["SvgRenderer","visit","initYoga","applyFlexLayout","parse"],"mappings":"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","file":"index.cjs","sourcesContent":["import type { Code, Html, Root } from 'mdast'\nimport { visit } from 'unist-util-visit'\nimport { applyFlexLayout, initYoga, parse, SvgRenderer } from '@boceto/core'\n\nexport interface RemarkBocetoOptions {\n  /**\n   * Output mode.\n   *  - `'wc'` (default): emit `<boceto-view>` custom element. Requires the WC\n   *    runtime in the browser.\n   *  - `'svg'`: parse the source and inline a complete `<svg>` document.\n   *    Renders with **zero JS at runtime** — works in GitHub READMEs, RSS\n   *    readers, and SSGs.\n   */\n  mode?: 'wc' | 'svg'\n  /** Tag to emit in `'wc'` mode. Default `'boceto-view'`. Use `'boceto-edit'` for editable blocks. */\n  tag?: string\n  /** Extra static attributes to attach to every emitted element (`'wc'` mode only). */\n  attributes?: Record<string, string>\n  /** SVG render dimensions (`'svg'` mode only). Defaults: 860 × 600. */\n  width?: number\n  height?: number\n  /**\n   * Receive the boceto source and return arbitrary HTML. If provided, all\n   * other options are ignored. Use this if you want a custom wrapper or to\n   * swap renderers entirely.\n   */\n  render?: (source: string, info: { lang: string; meta: string | null }) => string\n}\n\nexport type Plugin = () => (tree: Root) => void | Promise<void>\n\n/**\n * remark plugin that transforms `code` nodes whose language is `boceto`\n * into `html` nodes.\n *\n * - `mode: 'wc'` (default): emits `<boceto-view code=\"…\">`.\n * - `mode: 'svg'`: emits a full `<svg>…</svg>` rendered server-side. The\n *   transformer is async in this mode so it can `await initYoga()` once\n *   before resolving FlexContainer layout.\n */\nexport default function remarkBoceto(\n  options: RemarkBocetoOptions = {},\n): (tree: Root) => void | Promise<void> {\n  const mode = options.mode ?? 'wc'\n  const tag = options.tag ?? 'boceto-view'\n  const extraAttrs = options.attributes ?? {}\n  const width = options.width ?? 860\n  const height = options.height ?? 600\n  const svgRenderer = mode === 'svg' ? new SvgRenderer() : null\n\n  if (mode !== 'svg') {\n    // Synchronous transformer for WC mode — no layout to resolve.\n    return (tree) => {\n      visit(tree, 'code', (node: Code, index, parent) => {\n        if (!parent || index == null) return\n        if ((node.lang ?? '') !== 'boceto') return\n        const source = node.value\n        const meta = node.meta ?? null\n        let html: string\n        if (options.render) {\n          html = options.render(source, { lang: 'boceto', meta })\n        } else {\n          const attrs: Record<string, string> = { ...extraAttrs, code: source }\n          if (meta) attrs['data-page'] = meta.trim()\n          html = renderTag(tag, attrs)\n        }\n        parent.children[index] = { type: 'html', value: html } as Html\n      })\n    }\n  }\n\n  // SVG mode: collect every boceto block, ensure Yoga is loaded once, then\n  // parse + lay out + render each in place.\n  return async (tree) => {\n    const targets: Array<{ node: Code; index: number; parent: Root | Code['data'] }> = []\n    visit(tree, 'code', (node: Code, index, parent) => {\n      if (!parent || index == null) return\n      if ((node.lang ?? '') !== 'boceto') return\n      targets.push({ node, index, parent: parent as Root })\n    })\n    if (targets.length === 0) return\n    await initYoga()\n    for (const { node, index, parent } of targets) {\n      const source = node.value\n      const meta = node.meta ?? null\n      let html: string\n      if (options.render) {\n        html = options.render(source, { lang: 'boceto', meta })\n      } else {\n        const wrapped = '```boceto' + (meta ? ':' + meta : '') + '\\n' + source + '\\n```'\n        const doc = applyFlexLayout(parse(wrapped))\n        html = svgRenderer!.renderToString(doc, { width, height })\n      }\n      ;(parent as Root).children[index] = { type: 'html', value: html } as Html\n    }\n  }\n}\n\nfunction renderTag(tag: string, attrs: Record<string, string>): string {\n  const parts = [tag]\n  for (const [k, v] of Object.entries(attrs)) parts.push(`${k}=\"${escapeAttr(v)}\"`)\n  return `<${parts.join(' ')}></${tag}>`\n}\n\nfunction escapeAttr(s: string): string {\n  return s.replace(/&/g, '&amp;').replace(/\"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,42 @@
+import { Root } from 'mdast';
+
+interface RemarkBocetoOptions {
+    /**
+     * Output mode.
+     *  - `'wc'` (default): emit `<boceto-view>` custom element. Requires the WC
+     *    runtime in the browser.
+     *  - `'svg'`: parse the source and inline a complete `<svg>` document.
+     *    Renders with **zero JS at runtime** — works in GitHub READMEs, RSS
+     *    readers, and SSGs.
+     */
+    mode?: 'wc' | 'svg';
+    /** Tag to emit in `'wc'` mode. Default `'boceto-view'`. Use `'boceto-edit'` for editable blocks. */
+    tag?: string;
+    /** Extra static attributes to attach to every emitted element (`'wc'` mode only). */
+    attributes?: Record<string, string>;
+    /** SVG render dimensions (`'svg'` mode only). Defaults: 860 × 600. */
+    width?: number;
+    height?: number;
+    /**
+     * Receive the boceto source and return arbitrary HTML. If provided, all
+     * other options are ignored. Use this if you want a custom wrapper or to
+     * swap renderers entirely.
+     */
+    render?: (source: string, info: {
+        lang: string;
+        meta: string | null;
+    }) => string;
+}
+type Plugin = () => (tree: Root) => void | Promise<void>;
+/**
+ * remark plugin that transforms `code` nodes whose language is `boceto`
+ * into `html` nodes.
+ *
+ * - `mode: 'wc'` (default): emits `<boceto-view code="…">`.
+ * - `mode: 'svg'`: emits a full `<svg>…</svg>` rendered server-side. The
+ *   transformer is async in this mode so it can `await initYoga()` once
+ *   before resolving FlexContainer layout.
+ */
+declare function remarkBoceto(options?: RemarkBocetoOptions): (tree: Root) => void | Promise<void>;
+
+export { type Plugin, type RemarkBocetoOptions, remarkBoceto as default };

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+import { Root } from 'mdast';
+
+interface RemarkBocetoOptions {
+    /**
+     * Output mode.
+     *  - `'wc'` (default): emit `<boceto-view>` custom element. Requires the WC
+     *    runtime in the browser.
+     *  - `'svg'`: parse the source and inline a complete `<svg>` document.
+     *    Renders with **zero JS at runtime** — works in GitHub READMEs, RSS
+     *    readers, and SSGs.
+     */
+    mode?: 'wc' | 'svg';
+    /** Tag to emit in `'wc'` mode. Default `'boceto-view'`. Use `'boceto-edit'` for editable blocks. */
+    tag?: string;
+    /** Extra static attributes to attach to every emitted element (`'wc'` mode only). */
+    attributes?: Record<string, string>;
+    /** SVG render dimensions (`'svg'` mode only). Defaults: 860 × 600. */
+    width?: number;
+    height?: number;
+    /**
+     * Receive the boceto source and return arbitrary HTML. If provided, all
+     * other options are ignored. Use this if you want a custom wrapper or to
+     * swap renderers entirely.
+     */
+    render?: (source: string, info: {
+        lang: string;
+        meta: string | null;
+    }) => string;
+}
+type Plugin = () => (tree: Root) => void | Promise<void>;
+/**
+ * remark plugin that transforms `code` nodes whose language is `boceto`
+ * into `html` nodes.
+ *
+ * - `mode: 'wc'` (default): emits `<boceto-view code="…">`.
+ * - `mode: 'svg'`: emits a full `<svg>…</svg>` rendered server-side. The
+ *   transformer is async in this mode so it can `await initYoga()` once
+ *   before resolving FlexContainer layout.
+ */
+declare function remarkBoceto(options?: RemarkBocetoOptions): (tree: Root) => void | Promise<void>;
+
+export { type Plugin, type RemarkBocetoOptions, remarkBoceto as default };

package/dist/index.js

@@ -0,0 +1,66 @@
+import { visit } from 'unist-util-visit';
+import { SvgRenderer, initYoga, applyFlexLayout, parse } from '@boceto/core';
+
+// src/index.ts
+function remarkBoceto(options = {}) {
+  const mode = options.mode ?? "wc";
+  const tag = options.tag ?? "boceto-view";
+  const extraAttrs = options.attributes ?? {};
+  const width = options.width ?? 860;
+  const height = options.height ?? 600;
+  const svgRenderer = mode === "svg" ? new SvgRenderer() : null;
+  if (mode !== "svg") {
+    return (tree) => {
+      visit(tree, "code", (node, index, parent) => {
+        if (!parent || index == null) return;
+        if ((node.lang ?? "") !== "boceto") return;
+        const source = node.value;
+        const meta = node.meta ?? null;
+        let html;
+        if (options.render) {
+          html = options.render(source, { lang: "boceto", meta });
+        } else {
+          const attrs = { ...extraAttrs, code: source };
+          if (meta) attrs["data-page"] = meta.trim();
+          html = renderTag(tag, attrs);
+        }
+        parent.children[index] = { type: "html", value: html };
+      });
+    };
+  }
+  return async (tree) => {
+    const targets = [];
+    visit(tree, "code", (node, index, parent) => {
+      if (!parent || index == null) return;
+      if ((node.lang ?? "") !== "boceto") return;
+      targets.push({ node, index, parent });
+    });
+    if (targets.length === 0) return;
+    await initYoga();
+    for (const { node, index, parent } of targets) {
+      const source = node.value;
+      const meta = node.meta ?? null;
+      let html;
+      if (options.render) {
+        html = options.render(source, { lang: "boceto", meta });
+      } else {
+        const wrapped = "```boceto" + (meta ? ":" + meta : "") + "\n" + source + "\n```";
+        const doc = applyFlexLayout(parse(wrapped));
+        html = svgRenderer.renderToString(doc, { width, height });
+      }
+      parent.children[index] = { type: "html", value: html };
+    }
+  };
+}
+function renderTag(tag, attrs) {
+  const parts = [tag];
+  for (const [k, v] of Object.entries(attrs)) parts.push(`${k}="${escapeAttr(v)}"`);
+  return `<${parts.join(" ")}></${tag}>`;
+}
+function escapeAttr(s) {
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+export { remarkBoceto as default };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import type { Code, Html, Root } from 'mdast'\nimport { visit } from 'unist-util-visit'\nimport { applyFlexLayout, initYoga, parse, SvgRenderer } from '@boceto/core'\n\nexport interface RemarkBocetoOptions {\n  /**\n   * Output mode.\n   *  - `'wc'` (default): emit `<boceto-view>` custom element. Requires the WC\n   *    runtime in the browser.\n   *  - `'svg'`: parse the source and inline a complete `<svg>` document.\n   *    Renders with **zero JS at runtime** — works in GitHub READMEs, RSS\n   *    readers, and SSGs.\n   */\n  mode?: 'wc' | 'svg'\n  /** Tag to emit in `'wc'` mode. Default `'boceto-view'`. Use `'boceto-edit'` for editable blocks. */\n  tag?: string\n  /** Extra static attributes to attach to every emitted element (`'wc'` mode only). */\n  attributes?: Record<string, string>\n  /** SVG render dimensions (`'svg'` mode only). Defaults: 860 × 600. */\n  width?: number\n  height?: number\n  /**\n   * Receive the boceto source and return arbitrary HTML. If provided, all\n   * other options are ignored. Use this if you want a custom wrapper or to\n   * swap renderers entirely.\n   */\n  render?: (source: string, info: { lang: string; meta: string | null }) => string\n}\n\nexport type Plugin = () => (tree: Root) => void | Promise<void>\n\n/**\n * remark plugin that transforms `code` nodes whose language is `boceto`\n * into `html` nodes.\n *\n * - `mode: 'wc'` (default): emits `<boceto-view code=\"…\">`.\n * - `mode: 'svg'`: emits a full `<svg>…</svg>` rendered server-side. The\n *   transformer is async in this mode so it can `await initYoga()` once\n *   before resolving FlexContainer layout.\n */\nexport default function remarkBoceto(\n  options: RemarkBocetoOptions = {},\n): (tree: Root) => void | Promise<void> {\n  const mode = options.mode ?? 'wc'\n  const tag = options.tag ?? 'boceto-view'\n  const extraAttrs = options.attributes ?? {}\n  const width = options.width ?? 860\n  const height = options.height ?? 600\n  const svgRenderer = mode === 'svg' ? new SvgRenderer() : null\n\n  if (mode !== 'svg') {\n    // Synchronous transformer for WC mode — no layout to resolve.\n    return (tree) => {\n      visit(tree, 'code', (node: Code, index, parent) => {\n        if (!parent || index == null) return\n        if ((node.lang ?? '') !== 'boceto') return\n        const source = node.value\n        const meta = node.meta ?? null\n        let html: string\n        if (options.render) {\n          html = options.render(source, { lang: 'boceto', meta })\n        } else {\n          const attrs: Record<string, string> = { ...extraAttrs, code: source }\n          if (meta) attrs['data-page'] = meta.trim()\n          html = renderTag(tag, attrs)\n        }\n        parent.children[index] = { type: 'html', value: html } as Html\n      })\n    }\n  }\n\n  // SVG mode: collect every boceto block, ensure Yoga is loaded once, then\n  // parse + lay out + render each in place.\n  return async (tree) => {\n    const targets: Array<{ node: Code; index: number; parent: Root | Code['data'] }> = []\n    visit(tree, 'code', (node: Code, index, parent) => {\n      if (!parent || index == null) return\n      if ((node.lang ?? '') !== 'boceto') return\n      targets.push({ node, index, parent: parent as Root })\n    })\n    if (targets.length === 0) return\n    await initYoga()\n    for (const { node, index, parent } of targets) {\n      const source = node.value\n      const meta = node.meta ?? null\n      let html: string\n      if (options.render) {\n        html = options.render(source, { lang: 'boceto', meta })\n      } else {\n        const wrapped = '```boceto' + (meta ? ':' + meta : '') + '\\n' + source + '\\n```'\n        const doc = applyFlexLayout(parse(wrapped))\n        html = svgRenderer!.renderToString(doc, { width, height })\n      }\n      ;(parent as Root).children[index] = { type: 'html', value: html } as Html\n    }\n  }\n}\n\nfunction renderTag(tag: string, attrs: Record<string, string>): string {\n  const parts = [tag]\n  for (const [k, v] of Object.entries(attrs)) parts.push(`${k}=\"${escapeAttr(v)}\"`)\n  return `<${parts.join(' ')}></${tag}>`\n}\n\nfunction escapeAttr(s: string): string {\n  return s.replace(/&/g, '&amp;').replace(/\"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')\n}\n"]}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@boceto/remark",
+  "version": "0.1.0",
+  "description": "remark plugin: render fenced ```boceto blocks as <boceto-view> custom elements.",
+  "license": "MIT",
+  "author": "Maravilla Labs",
+  "homepage": "https://maravilla-labs.github.io/boceto/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/maravilla-labs/boceto.git",
+    "directory": "packages/remark-boceto"
+  },
+  "bugs": {
+    "url": "https://github.com/maravilla-labs/boceto/issues"
+  },
+  "keywords": [
+    "boceto",
+    "wireframe",
+    "remark",
+    "unified",
+    "markdown",
+    "plugin"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "unified": "^11.0.0"
+  },
+  "dependencies": {
+    "unist-util-visit": "^5.0.0",
+    "@boceto/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/mdast": "^4.0.4",
+    "remark": "^15.0.1",
+    "remark-html": "^16.0.1",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.3",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0",
+    "vitest": "^2.1.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run"
+  }
+}