@riebeckite/plugin-d2 0.0.1

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright Rerurate_514
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,129 @@
+# @riebeckite/plugin-d2
+
+D2 diagram rendering for ` ```d2 ` code blocks.
+
+[日本語](./README_ja.md)
+
+## Overview
+
+`d2()` replaces D2 code blocks with a `<figure class="rb-d2">` that renders to
+SVG. Diagrams are rendered at build time by the D2 WebAssembly engine running in
+Node, with an automatic client-side fallback. It runs with `order: -10`.
+
+## Usage
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { d2 } from "@riebeckite/plugin-d2";
+
+export default defineConfig({
+  // ...
+  plugins: [
+    d2({
+      render: "build",
+      theme: { light: 0, dark: 1 },
+      layout: "dagre",
+    }),
+  ],
+});
+```
+
+## Syntax
+
+````markdown
+```d2 title="Request flow"
+client -> server: request
+server -> database: query
+```
+````
+
+A caption can also be written as the first line of the block. D2 uses `#` for
+comments, so a leading `# caption: ...` line is treated as a caption and removed
+before rendering:
+
+````markdown
+```d2
+# caption: Request flow
+client -> server: request
+```
+````
+
+## Behavior
+
+### Build
+
+- Replaces each ` ```d2 ` `<pre>` with a `figure.rb-d2` containing:
+  - `figcaption.rb-d2__caption` — from the code block title or a
+    `# caption: ...` line
+  - `div.rb-d2__canvas` — the diagram (`role="img"`, labelled by the caption
+    when present)
+  - `details.rb-d2__fallback` — collapsible diagram source
+- Static SVG is rendered at build time when `render` is `"build"` or `"both"`
+  by running the D2.js WebAssembly engine (`@d2lang/d2`) directly in Node. No
+  browser, network access, or system D2 binary is required.
+- The generated figure always carries `data-d2`, `data-d2-source`, and
+  `data-d2-layout` attributes. `data-d2` is `rendered` when static SVG is
+  present and `pending` when the client must take over.
+- Invalid diagrams report `ruleId: "invalid-diagram"`; renderer failures report
+  `ruleId: "renderer-error"`. When build SVG is unavailable, the figure remains
+  `data-d2="pending"` for client fallback.
+
+### Client (`initD2Diagrams`)
+
+- Loads D2.js as an ESM module from jsDelivr unless `globalThis.d2` or an
+  injected module is provided
+- Renders every `[data-d2="pending"]` figure; failures set `data-d2="error"`
+  (placeholder message via CSS)
+- When `theme` is `{ light, dark }`, the theme is chosen from
+  `html[data-theme]` or `prefers-color-scheme`
+
+## Options
+
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| `render` | `"build" \| "client" \| "both"` | `"build"` | When diagrams are rendered |
+| `theme` | `number \| { light: number; dark: number }` | `{ light: 0, dark: 1 }` | D2 theme id(s) |
+| `layout` | `"dagre" \| "elk"` | `"dagre"` | D2 layout engine |
+| `caption` | `boolean` | `true` | Show title / `# caption:` as `figcaption` |
+| `fallback` | `boolean` | `true` | Show the diagram source in `<details>` |
+| `className` | `string` | `"rb-d2"` | Base CSS class for the figure |
+
+`render` modes:
+
+- `"build"` — render SVG at build time; diagrams that fail fall back to client
+  rendering
+- `"client"` — skip build-time rendering, render in the browser only
+- `"both"` — compatibility alias. It currently behaves like `"build"`: build
+  first, then client fallback only when build rendering fails
+
+## Offline requirements
+
+Build-time rendering is fully offline: `@d2lang/d2` ships a WebAssembly build
+that is loaded from `node_modules`. Client rendering (`render: "client"` or a
+build failure) downloads D2.js from jsDelivr; point `moduleUrl` at a self-hosted
+copy if the deployment has no outbound network access.
+
+## Output hooks
+
+- Set `globalThis.d2` to a preloaded D2.js module to skip the CDN import.
+- Pass `api` and `moduleUrl` to `initD2Diagrams()` when calling it directly.
+
+## Exports
+
+- `d2(options?)` — plugin factory (`d2Plugin` is an alias)
+- `initD2Diagrams` — client initializer
+- Types: `D2Options`, `D2ClientOptions`, `D2RenderMode`, `D2Layout`, `D2Theme`,
+  `D2ModuleApi`
+
+## Limitations
+
+- A diagram is rendered per build with a fresh D2 worker; very large batches pay
+  the WASM startup cost repeatedly.
+- `layout: "elk"` uses D2's ELK engine, which is slower than `dagre`.
+- Multi-board and animated D2 output are not configured by this plugin.
+- The renderer is `@d2lang/d2` (MPL-2.0), the current package for the D2.js WASM
+  build; `@terrastruct/d2` is its compatibility alias.
+
+## See also
+
+- [Plugin guide](../../docs/plugins_en.md)

package/README_ja.md

@@ -0,0 +1,104 @@
+# @riebeckite/plugin-d2
+
+` ```d2 ` コードブロックを SVG の図として表示するプラグインです。既定ではビルド時に描画し、描画できなかった図だけをブラウザ側で再試行します。
+
+[English](./README.md)
+
+## 設定する
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { d2 } from "@riebeckite/plugin-d2";
+
+export default defineConfig({
+  // ...
+  plugins: [
+    d2({
+      render: "build",
+      theme: { light: 0, dark: 1 },
+      layout: "dagre",
+    }),
+  ],
+});
+```
+
+このプラグインは `order: -10` で実行されます。
+
+## 記法
+
+````markdown
+```d2 title="リクエストの流れ"
+client -> server: request
+server -> database: query
+```
+````
+
+キャプションはコードブロックの先頭行にも書けます。D2 は `#` をコメントとして扱うため、先頭の `# caption: ...` 行をキャプションとして取り込み、描画前に取り除きます。
+
+````markdown
+```d2
+# caption: リクエストの流れ
+client -> server: request
+```
+````
+
+## どのように描画されるか
+
+### ビルド時
+
+` ```d2 ` のコードブロックは `figure.rb-d2` に置き換わります。
+
+- `figcaption.rb-d2__caption`: コードブロックの title、または `# caption:` 行
+- `div.rb-d2__canvas`: 図本体（`role="img"`、キャプションがある場合はそれをラベルに使用）
+- `details.rb-d2__fallback`: 元の D2 記法を折りたたんで表示
+
+`render: "build"` または `"both"` では、D2.js の WebAssembly 版（`@d2lang/d2`）を Node 上で直接実行して静的な SVG を生成します。ブラウザ、ネットワーク接続、D2 本体のインストールはいずれも不要です。
+
+生成される figure には常に `data-d2`、`data-d2-source`、`data-d2-layout` が付きます。`data-d2` は静的 SVG があれば `rendered`、クライアント側の描画に委ねる場合は `pending` になります。
+
+構文エラーは `invalid-diagram`、描画環境の問題は `renderer-error` として区別して診断します。
+
+### クライアント側
+
+`initD2Diagrams` は保留中の図だけを描画します。D2.js がなければ jsDelivr から ESM として読み込みます。描画に失敗した場合は `data-d2="error"` となり、CSS のプレースホルダー表示に切り替わります。
+
+明暗別のテーマを指定した場合は、`html[data-theme]` を優先し、なければ OS の配色設定に従います。
+
+## オプション
+
+| 項目 | 既定値 | 説明 |
+| --- | --- | --- |
+| `render` | `"build"` | `"build"`、`"client"`、`"both"` のいずれで描画するか |
+| `theme` | `{ light: 0, dark: 1 }` | D2 のテーマ ID、または明暗別のテーマ ID |
+| `layout` | `"dagre"` | D2 のレイアウトエンジン（`"dagre"` または `"elk"`） |
+| `caption` | `true` | タイトルまたは `# caption:` をキャプションとして表示する |
+| `fallback` | `true` | 元の D2 記法を `<details>` に残す |
+| `className` | `"rb-d2"` | figure に付ける基準クラス |
+
+`"client"` はビルド時の描画を行いません。`"both"` は後方互換の値で、現在は `"build"` と同じくビルドを優先し、失敗時だけクライアント側へ切り替えます。
+
+## オフラインでの利用
+
+ビルド時の描画は完全にオフラインです。`@d2lang/d2` が同梱する WebAssembly を `node_modules` から読み込むだけで、外部通信は発生しません。クライアント側の描画（`render: "client"` またはビルド失敗時）は jsDelivr から D2.js を取得します。外部通信を避けたい場合は `moduleUrl` に自前でホストしたモジュールを指定してください。
+
+## 出力のフック
+
+- `globalThis.d2` に読み込み済みの D2.js モジュールを設定すると、CDN からの読み込みを省略できます
+- `initD2Diagrams()` を直接呼ぶ場合は `api` と `moduleUrl` を渡せます
+
+## 主なエクスポート
+
+- `d2(options?)`: プラグインを作成する（`d2Plugin` は別名）
+- `initD2Diagrams`: クライアント側の描画を初期化する
+- 型: `D2Options`、`D2ClientOptions`、`D2RenderMode`、`D2Layout`、`D2Theme`、`D2ModuleApi`
+
+## 制限
+
+- 図ごとに新しい D2 ワーカーを起動するため、大量の図を含むビルドでは WASM の起動コストが繰り返し発生します
+- `layout: "elk"` は D2 の ELK エンジンを使うため `dagre` より遅くなります
+- マルチボードやアニメーション付きの出力はこのプラグインでは設定できません
+- レンダラーには `@d2lang/d2`（MPL-2.0）を使用しています。`@terrastruct/d2` はその後方互換パッケージです
+
+## 関連資料
+
+- [プラグインシステム](../../../docs/ja/plugin-system.md)

package/dist/client.d.ts

@@ -0,0 +1,2 @@
+export { initD2Diagrams } from "./src/init.js";
+export type { D2ClientOptions, D2ModuleApi } from "./src/types.js";

package/dist/client.js

@@ -0,0 +1,63 @@
+// src/init.ts
+var DEFAULT_THEME = { light: 0, dark: 1 };
+var DEFAULT_MODULE_URL = "https://cdn.jsdelivr.net/npm/@d2lang/d2@0.1.34/dist/browser/index.js";
+async function initD2Diagrams(options = {}) {
+  const figures = Array.from(
+    document.querySelectorAll('[data-d2="pending"]')
+  );
+  if (figures.length === 0) return;
+  const api = options.api ?? await loadD2(options.moduleUrl);
+  if (!api) return;
+  const renderer = new api.D2();
+  try {
+    for (const [index, figure] of figures.entries()) {
+      await renderFigure(renderer, figure, index, options);
+    }
+  } finally {
+    await renderer.dispose?.();
+  }
+}
+async function renderFigure(renderer, figure, index, options) {
+  const source = figure.dataset.d2Source;
+  const canvas = figure.querySelector("[data-d2-canvas]");
+  if (!source || !canvas) return;
+  try {
+    const compiled = await renderer.compile(source, {
+      layout: options.layout ?? figure.dataset.d2Layout ?? "dagre",
+      themeID: selectTheme(options.theme ?? DEFAULT_THEME),
+      salt: `rb-d2-client-${index}`
+    });
+    const svg = await renderer.render(compiled.diagram, {
+      ...compiled.renderOptions,
+      noXMLTag: true
+    });
+    canvas.innerHTML = svg;
+    figure.dataset.d2 = "rendered";
+  } catch {
+    figure.dataset.d2 = "error";
+  }
+}
+async function loadD2(moduleUrl = DEFAULT_MODULE_URL) {
+  const injected = globalThis.d2;
+  if (injected) return injected;
+  try {
+    const imported = await import(
+      /* @vite-ignore */
+      moduleUrl
+    );
+    if (typeof imported?.D2 !== "function") return void 0;
+    return imported;
+  } catch {
+    return void 0;
+  }
+}
+function selectTheme(theme) {
+  if (typeof theme === "number") return theme;
+  return prefersDark() ? theme.dark : theme.light;
+}
+function prefersDark() {
+  return document.documentElement.dataset.theme === "dark" ? true : document.documentElement.dataset.theme === "light" ? false : window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+export {
+  initD2Diagrams
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import type { D2Options } from "./src/types.js";
+export type { D2ClientOptions, D2Layout, D2ModuleApi, D2Options, D2RenderMode, D2Theme, } from "./src/types.js";
+export declare function d2(options?: D2Options): import("@riebeckite/core").RiebeckitePlugin<D2Options>;
+/** Alias matching the `*Plugin` convention used by several packages. */
+export declare const d2Plugin: typeof d2;

package/dist/index.js

@@ -0,0 +1,433 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res, err) => function __init() {
+  if (err) throw err[0];
+  try {
+    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+  } catch (e) {
+    throw err = [e], e;
+  }
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/hast.ts
+function visitElements(node, visitor, parent, index) {
+  if (isElementNode(node)) visitor(node, parent, index);
+  for (const [childIndex, child] of [...getChildren(node)].entries()) {
+    visitElements(
+      child,
+      visitor,
+      hasChildren(node) ? node : parent,
+      childIndex
+    );
+  }
+}
+function element(tagName, properties = {}, children = []) {
+  return { type: "element", tagName, properties, children };
+}
+function text(value) {
+  return { type: "text", value };
+}
+function getTextContent(node) {
+  if (node.type === "text" && "value" in node && typeof node.value === "string") {
+    return node.value;
+  }
+  return getChildren(node).map(getTextContent).join("");
+}
+function getStringProperty(node, key) {
+  const value = node.properties?.[key];
+  if (typeof value === "string") return value;
+  if (Array.isArray(value)) return value.join(" ");
+  return null;
+}
+function hasClass(node, className) {
+  const value = node.properties?.className;
+  const classes = Array.isArray(value) ? value.map(String) : typeof value === "string" ? value.split(/\s+/) : [];
+  return classes.includes(className);
+}
+function isElementNode(node) {
+  return node.type === "element";
+}
+function hasChildren(node) {
+  return Array.isArray(node.children);
+}
+function getChildren(node) {
+  const children = node.children;
+  return Array.isArray(children) ? children : [];
+}
+var init_hast = __esm({
+  "src/hast.ts"() {
+  }
+});
+
+// src/render-static.ts
+var render_static_exports = {};
+__export(render_static_exports, {
+  renderD2StaticSvg: () => renderD2StaticSvg
+});
+import { existsSync } from "node:fs";
+import { createRequire } from "node:module";
+import { join } from "node:path";
+import { pathToFileURL } from "node:url";
+async function renderD2StaticSvg(id, source, options) {
+  return enqueueD2Render(async () => {
+    let renderer;
+    try {
+      const module = await importD2Module();
+      renderer = new module.D2();
+    } catch (error) {
+      return {
+        ok: false,
+        kind: "renderer-error",
+        message: `Failed to load the D2 renderer: ${formatError(error)}`
+      };
+    }
+    try {
+      let compiled;
+      try {
+        compiled = await withTimeout(
+          renderer.compile(source, {
+            layout: options.layout,
+            themeID: options.themeID,
+            salt: id
+          }),
+          "D2 compilation timed out."
+        );
+      } catch (error) {
+        return {
+          ok: false,
+          kind: error instanceof D2TimeoutError ? "renderer-error" : "invalid-diagram",
+          message: formatError(error)
+        };
+      }
+      let svg;
+      try {
+        svg = await withTimeout(
+          Promise.resolve(
+            renderer.render(compiled.diagram, {
+              ...compiled.renderOptions,
+              noXMLTag: true
+            })
+          ),
+          "D2 rendering timed out."
+        );
+      } catch (error) {
+        return {
+          ok: false,
+          kind: "renderer-error",
+          message: formatError(error)
+        };
+      }
+      if (typeof svg !== "string" || !svg.includes("<svg")) {
+        return {
+          ok: false,
+          kind: "renderer-error",
+          message: "D2 renderer returned an invalid SVG."
+        };
+      }
+      return { ok: true, svg };
+    } finally {
+      if (typeof renderer.dispose === "function") {
+        try {
+          await renderer.dispose();
+        } catch {
+        }
+      }
+    }
+  });
+}
+async function importD2Module() {
+  const importModule = new Function(
+    "specifier",
+    "return import(specifier)"
+  );
+  try {
+    return normalizeD2Module(await importModule(D2_PACKAGE));
+  } catch (error) {
+    const fallback = resolveD2FromWorkingDirectory();
+    if (!fallback) throw error;
+    return normalizeD2Module(await importModule(fallback));
+  }
+}
+function normalizeD2Module(value) {
+  const module = value;
+  const D2 = typeof module?.D2 === "function" ? module.D2 : module?.default?.D2;
+  if (typeof D2 !== "function") {
+    throw new Error("The D2 module did not export a D2 class.");
+  }
+  return { D2 };
+}
+function resolveD2FromWorkingDirectory() {
+  try {
+    const require2 = createRequire(join(process.cwd(), "package.json"));
+    const resolved = require2.resolve(D2_PACKAGE);
+    const esm = resolved.replace(/dist[\\/]node-cjs[\\/]index\.js$/, "dist/node-esm/index.js").replace(/dist[\\/]cjs[\\/]index\.js$/, "dist/esm/index.js");
+    const target = esm !== resolved && existsSync(esm) ? esm : resolved;
+    return pathToFileURL(target).href;
+  } catch {
+    return null;
+  }
+}
+function withTimeout(promise, message) {
+  let timer;
+  const timeout = new Promise((_, reject) => {
+    timer = setTimeout(
+      () => reject(new D2TimeoutError(message)),
+      RENDER_TIMEOUT_MS
+    );
+  });
+  return Promise.race([promise, timeout]).finally(() => {
+    if (timer !== void 0) clearTimeout(timer);
+  });
+}
+async function enqueueD2Render(render) {
+  const current = renderQueue.then(render, render);
+  renderQueue = current.catch(() => void 0);
+  return current;
+}
+function formatError(error) {
+  if (error instanceof Error) return error.message;
+  return String(error);
+}
+var RENDER_TIMEOUT_MS, D2_PACKAGE, D2TimeoutError, renderQueue;
+var init_render_static = __esm({
+  "src/render-static.ts"() {
+    RENDER_TIMEOUT_MS = 3e4;
+    D2_PACKAGE = "@d2lang/d2";
+    D2TimeoutError = class extends Error {
+    };
+    renderQueue = Promise.resolve();
+  }
+});
+
+// src/rehype.ts
+var rehype_exports = {};
+__export(rehype_exports, {
+  rehypeD2: () => rehypeD2
+});
+function rehypeD2(options = {}) {
+  const resolved = {
+    render: options.render ?? "build",
+    theme: options.theme ?? DEFAULT_THEME,
+    layout: options.layout ?? DEFAULT_LAYOUT,
+    caption: options.caption !== false,
+    fallback: options.fallback !== false,
+    className: options.className?.trim() || DEFAULT_CLASS_NAME
+  };
+  return async (tree, file) => {
+    const replacements = [];
+    visitElements(tree, (node, parent, index) => {
+      if (!parent || index === void 0 || !isD2CodeBlock(node)) return;
+      replacements.push(replaceD2Block(parent, index, node, file, resolved));
+    });
+    await Promise.all(replacements);
+  };
+}
+async function replaceD2Block(parent, index, pre, file, options) {
+  const code = findDirectChild(pre, "code");
+  const rawSource = code ? getTextContent(code).trim() : getTextContent(pre).trim();
+  const { caption, body: source } = extractCaption(rawSource, pre, code);
+  const id = `rr-d2-${hashSource(source)}`;
+  const renderResult = shouldRenderAtBuild(options.render) ? await renderStaticSvg(id, source, options.theme, options.layout, file) : null;
+  const staticSvg = renderResult?.ok ? renderResult.svg : null;
+  parent.children = parent.children ?? [];
+  parent.children[index] = buildFigure({
+    className: options.className,
+    id,
+    source,
+    caption: options.caption ? caption : null,
+    layout: options.layout,
+    staticSvg,
+    fallback: options.fallback,
+    clientFallback: shouldRenderAtClient(options.render) || renderResult?.ok === false
+  });
+}
+function buildFigure(input) {
+  const base = input.className;
+  const labelId = `${input.id}-caption`;
+  const children = [];
+  if (input.caption) {
+    children.push(
+      element("figcaption", { id: labelId, className: `${base}__caption` }, [
+        text(input.caption)
+      ])
+    );
+  }
+  children.push(
+    element(
+      "div",
+      {
+        className: `${base}__canvas`,
+        dataD2Canvas: "true",
+        role: "img",
+        ariaLabelledby: input.caption ? labelId : void 0,
+        ariaLabel: input.caption ? void 0 : "D2 diagram"
+      },
+      input.staticSvg ? [{ type: "raw", value: input.staticSvg }] : []
+    )
+  );
+  if (input.fallback) {
+    children.push(
+      element("details", { className: `${base}__fallback` }, [
+        element("summary", {}, [text("Diagram source")]),
+        element("pre", {}, [element("code", {}, [text(input.source)])])
+      ])
+    );
+  }
+  return element(
+    "figure",
+    {
+      className: base,
+      dataD2: input.staticSvg ? "rendered" : "pending",
+      dataD2Source: input.source,
+      dataD2Layout: input.layout
+    },
+    children
+  );
+}
+async function renderStaticSvg(id, source, theme, layout, file) {
+  try {
+    const { renderD2StaticSvg: renderD2StaticSvg2 } = await Promise.resolve().then(() => (init_render_static(), render_static_exports));
+    const result = await renderD2StaticSvg2(id, source, {
+      themeID: selectTheme(theme, "light"),
+      layout
+    });
+    if (result.ok === false) {
+      reportD2Diagnostic(file, result.message, result.kind);
+      const label = result.kind === "invalid-diagram" ? "invalid diagram" : "renderer failed";
+      console.warn(`[d2] ${label}: ${result.message}`);
+    }
+    return result;
+  } catch (error) {
+    const message = formatError2(error);
+    reportD2Diagnostic(file, message, "renderer-error");
+    console.warn(`[d2] renderer failed: ${message}`);
+    return { ok: false, kind: "renderer-error", message };
+  }
+}
+function reportD2Diagnostic(file, message, kind) {
+  const reporter = file?.message;
+  if (typeof reporter !== "function") return;
+  const diagnostic = reporter.call(
+    file,
+    kind === "invalid-diagram" ? `Invalid D2 diagram: ${message}` : `D2 renderer failed: ${message}`
+  );
+  if (diagnostic && typeof diagnostic === "object") {
+    Object.assign(diagnostic, {
+      source: "@riebeckite/plugin-d2",
+      ruleId: kind
+    });
+  }
+}
+function isD2CodeBlock(node) {
+  if (node.tagName !== "pre") return false;
+  const code = findDirectChild(node, "code");
+  return Boolean(code && hasClass(code, "language-d2"));
+}
+function findDirectChild(node, tagName) {
+  return node.children?.find(
+    (child) => child.type === "element" && child.tagName === tagName
+  ) ?? null;
+}
+function extractCaption(source, pre, code) {
+  const title = getStringProperty(pre, "title") ?? getStringProperty(code ?? pre, "title");
+  const match = CAPTION_PATTERN.exec(source);
+  const caption = title ?? match?.[1] ?? null;
+  const body = match ? `${source.slice(0, match.index)}${source.slice(match.index + match[0].length)}` : source;
+  return { caption: caption?.trim() || null, body: body.trim() };
+}
+function shouldRenderAtBuild(render) {
+  return render === "build" || render === "both";
+}
+function shouldRenderAtClient(render) {
+  return render === "client";
+}
+function selectTheme(theme, mode) {
+  return typeof theme === "number" ? theme : theme[mode];
+}
+function hashSource(source) {
+  let hash = 0;
+  for (const char of source) hash = hash * 31 + char.charCodeAt(0) | 0;
+  return Math.abs(hash).toString(36);
+}
+function formatError2(error) {
+  if (error instanceof Error) return error.message;
+  return String(error);
+}
+var DEFAULT_THEME, DEFAULT_CLASS_NAME, DEFAULT_LAYOUT, CAPTION_PATTERN;
+var init_rehype = __esm({
+  "src/rehype.ts"() {
+    init_hast();
+    DEFAULT_THEME = { light: 0, dark: 1 };
+    DEFAULT_CLASS_NAME = "rb-d2";
+    DEFAULT_LAYOUT = "dagre";
+    CAPTION_PATTERN = /^#\s*caption\s*:\s*(.+)$/im;
+  }
+});
+
+// index.ts
+import {
+  createClientEntry,
+  createStyleAsset,
+  definePlugin
+} from "@riebeckite/core";
+var LAYOUTS = ["dagre", "elk"];
+function d2(options = {}) {
+  return definePlugin({
+    name: "d2",
+    order: -10,
+    options,
+    validateOptions: validateD2Options,
+    extendHtmlPipeline: (pipeline) => {
+      pipeline.use(rehypeD2Lazy, options);
+    },
+    assets: [createStyleAsset("d2")],
+    clientEntries: [createClientEntry("d2", "initD2Diagrams")]
+  });
+}
+var d2Plugin = d2;
+function validateD2Options(options) {
+  if (!options) return [];
+  const issues = [];
+  if (options.render !== void 0 && options.render !== "build" && options.render !== "client" && options.render !== "both") {
+    issues.push({
+      path: "render",
+      message: 'Expected "build", "client", or "both".'
+    });
+  }
+  if (options.layout !== void 0 && !LAYOUTS.includes(options.layout)) {
+    issues.push({ path: "layout", message: 'Expected "dagre" or "elk".' });
+  }
+  if (!isD2Theme(options.theme)) {
+    issues.push({
+      path: "theme",
+      message: "Expected a theme number or an object with light and dark numbers."
+    });
+  }
+  for (const key of ["caption", "fallback"]) {
+    if (options[key] !== void 0 && typeof options[key] !== "boolean") {
+      issues.push({ path: key, message: "Expected a boolean." });
+    }
+  }
+  if (options.className !== void 0 && (typeof options.className !== "string" || options.className.trim() === "")) {
+    issues.push({ path: "className", message: "Expected a non-empty string." });
+  }
+  return issues;
+}
+function isD2Theme(value) {
+  return value === void 0 || typeof value === "number" || typeof value === "object" && value !== null && "light" in value && "dark" in value && typeof value.light === "number" && typeof value.dark === "number";
+}
+function rehypeD2Lazy(options = {}) {
+  return async (tree, file) => {
+    const { rehypeD2: rehypeD22 } = await Promise.resolve().then(() => (init_rehype(), rehype_exports));
+    const transformer = rehypeD22(options);
+    await transformer(tree, file);
+  };
+}
+export {
+  d2,
+  d2Plugin
+};

package/dist/src/hast.d.ts

@@ -0,0 +1,7 @@
+import type { ElementNode, HastNode, ParentNode, TextNode } from "./types.js";
+export declare function visitElements(node: HastNode, visitor: (node: ElementNode, parent?: ParentNode, index?: number) => void, parent?: ParentNode, index?: number): void;
+export declare function element(tagName: string, properties?: Record<string, unknown>, children?: HastNode[]): ElementNode;
+export declare function text(value: string): TextNode;
+export declare function getTextContent(node: HastNode): string;
+export declare function getStringProperty(node: ElementNode, key: string): string | null;
+export declare function hasClass(node: ElementNode, className: string): boolean;

package/dist/src/init.d.ts

@@ -0,0 +1,10 @@
+import type { D2ClientOptions } from "./types.js";
+/**
+ * Renders every pending D2 figure in the document.
+ *
+ * The initializer is intentionally dependency-free at bundle time: D2.js is
+ * imported from `moduleUrl` in the browser, so a site that renders D2 at build
+ * time never ships the WASM renderer to visitors unless it opts into the
+ * `"client"` render mode.
+ */
+export declare function initD2Diagrams(options?: D2ClientOptions): Promise<void>;

package/dist/src/rehype.d.ts

@@ -0,0 +1,2 @@
+import type { D2Options, HastNode } from "./types.js";
+export declare function rehypeD2(options?: D2Options): (tree: HastNode, file: unknown) => Promise<void>;

package/dist/src/render-static.d.ts

@@ -0,0 +1,5 @@
+import type { D2BuildRenderResult, D2Layout } from "./types.js";
+export declare function renderD2StaticSvg(id: string, source: string, options: {
+    themeID: number;
+    layout: D2Layout;
+}): Promise<D2BuildRenderResult>;

package/dist/src/types.d.ts

@@ -0,0 +1,73 @@
+export type D2RenderMode = "build" | "client" | "both";
+export type D2Layout = "dagre" | "elk";
+/**
+ * D2 theme id, or a light/dark pair of theme ids. D2's default theme is `0`;
+ * `1` is the built-in dark theme.
+ */
+export type D2Theme = number | {
+    light: number;
+    dark: number;
+};
+export type D2Options = {
+    render?: D2RenderMode;
+    theme?: D2Theme;
+    layout?: D2Layout;
+    caption?: boolean;
+    fallback?: boolean;
+    /** Base CSS class for the generated figure. Defaults to `"rb-d2"`. */
+    className?: string;
+};
+export type D2BuildRenderErrorKind = "invalid-diagram" | "renderer-error";
+export type D2BuildRenderResult = {
+    ok: true;
+    svg: string;
+} | {
+    ok: false;
+    kind: D2BuildRenderErrorKind;
+    message: string;
+};
+/**
+ * Minimal structural surface of the D2.js instance used by the browser
+ * initializer. Declaring it locally keeps `@d2lang/d2` out of the published
+ * type surface.
+ */
+export type D2InstanceApi = {
+    compile(source: string, options?: Record<string, unknown>): Promise<{
+        diagram: unknown;
+        renderOptions?: Record<string, unknown>;
+    }>;
+    render(diagram: unknown, options?: Record<string, unknown>): Promise<string> | string;
+    dispose?(): Promise<void> | void;
+};
+export type D2ModuleApi = {
+    D2: new () => D2InstanceApi;
+};
+export type D2ClientOptions = {
+    theme?: D2Theme;
+    layout?: D2Layout;
+    /** A preloaded D2.js module. When omitted, `moduleUrl` is imported. */
+    api?: D2ModuleApi;
+    /** ESM URL used to load D2.js in the browser. */
+    moduleUrl?: string;
+};
+export type ElementNode = {
+    type: string;
+    tagName?: string;
+    properties?: Record<string, unknown>;
+    children?: HastNode[];
+};
+export type ParentNode = HastNode & {
+    children?: HastNode[];
+};
+export type TextNode = {
+    type: "text";
+    value: string;
+};
+export type RawNode = {
+    type: "raw";
+    value: string;
+};
+export type HastNode = ElementNode | TextNode | RawNode | {
+    type: string;
+    [key: string]: unknown;
+};

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@riebeckite/plugin-d2",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "source": "./index.ts",
+      "default": "./dist/index.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js",
+      "source": "./client.ts",
+      "default": "./dist/client.js"
+    },
+    "./style.css": "./style.css"
+  },
+  "dependencies": {
+    "@d2lang/d2": "^0.1.34",
+    "@riebeckite/core": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "README_ja.md",
+    "dist",
+    "style.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rerurate514/riebeckite.git",
+    "directory": "packages/plugins/d2"
+  },
+  "homepage": "https://github.com/Rerurate514/riebeckite#readme",
+  "bugs": {
+    "url": "https://github.com/Rerurate514/riebeckite/issues"
+  },
+  "description": "D2 diagram rendering for Riebeckite code blocks.",
+  "keywords": [
+    "riebeckite",
+    "plugin",
+    "d2",
+    "diagrams"
+  ],
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "sideEffects": [
+    "./style.css"
+  ],
+  "scripts": {
+    "build": "node ../../../scripts/build_package.mjs"
+  }
+}

package/style.css

@@ -0,0 +1,65 @@
+.rb-d2 {
+  --rb-d2-paper: var(--rb-color-paper, #ffffff);
+  --rb-d2-ink: var(--rb-color-ink, #000000);
+  --rb-d2-muted: var(--rb-color-muted, #69645c);
+  --rb-d2-rule: var(
+    --rb-color-border,
+    color-mix(in srgb, var(--rb-d2-ink) 18%, transparent)
+  );
+  --rb-d2-accent: var(--rb-color-accent, #686868);
+  margin: 2rem 0;
+  border: 1px solid var(--rb-d2-rule);
+  background: color-mix(in srgb, var(--rb-d2-paper) 96%, var(--rb-d2-ink));
+  color: var(--rb-d2-ink);
+}
+
+.rb-d2__caption {
+  padding: 0.625rem 0.75rem;
+  border-bottom: 1px solid var(--rb-d2-rule);
+  color: var(--rb-d2-muted);
+  font-size: 0.875rem;
+}
+
+.rb-d2__canvas {
+  overflow: auto;
+  padding: 1rem;
+}
+
+.rb-d2__canvas > svg {
+  display: block;
+  justify-self: center;
+  max-width: 100%;
+  height: auto;
+}
+
+.rb-d2__fallback {
+  border-top: 1px solid var(--rb-d2-rule);
+  color: var(--rb-d2-muted);
+  font-size: 0.8125rem;
+}
+
+.rb-d2__fallback summary {
+  cursor: pointer;
+  padding: 0.5rem 0.75rem;
+}
+
+.rb-d2__fallback pre {
+  overflow: auto;
+  margin: 0 1rem;
+  padding: 0.75rem;
+  border-top: 1px solid var(--rb-d2-rule);
+  color: var(--rb-d2-ink);
+  background: color-mix(in srgb, var(--rb-d2-ink) 6%, transparent);
+}
+
+.rb-d2[data-d2="error"] .rb-d2__canvas::before,
+.rb-d2[data-d2="pending"] .rb-d2__canvas:empty::before {
+  content: "Diagram could not be rendered.";
+  color: var(--rb-d2-muted);
+}
+
+html[data-theme="dark"] .rb-d2,
+html.dark .rb-d2 {
+  --rb-d2-paper: var(--rb-color-ink, #000000);
+  --rb-d2-ink: var(--rb-color-paper, #ffffff);
+}