@riebeckite/plugin-excalibrain 0.0.31 → 0.0.33

package/README.md

@@ -132,6 +132,13 @@ The `render` option selects where the map is produced:
 
 `heading` / `headingText` control the optional `<h2>`.
 
+## Live example
+
+The map is assembled from this page's links; the fence body is ignored.
+
+~~~excalibrain
+~~~
+
 ## Options
 
 | Option | Type | Default | Description |
@@ -179,7 +186,7 @@ wrapping an `<a href>` around its `<rect>` and `<text>`. Links are
 
 ## Exports
 
-- `excaliBrain(options?)` / `excaliBrainPlugin` — plugin factory
+- `excaliBrain(options?)` / `excaliBrain` — plugin factory
 - `resolveExcaliBrainOptions(options?)` — resolved defaults
 - `buildExcaliBrainGraph(input)` — pure graph builder
 - `layoutExcaliBrain(graph, options?)` — pure deterministic layout

package/README_ja.md

@@ -22,7 +22,7 @@
 
 関係は ExcaliBrain のオントロジーに従い、YAML frontmatter と本文中の Dataview インラインフィールドから取得します。明示されていない関係は、コンテンツグラフから推論します。
 
-## 設定する
+## 設定
 
 ```ts
 import { defineConfig } from "@riebeckite/core";
@@ -90,11 +90,11 @@ related:: [[note-a]] and [[note-b]] are similar
 - 相手からこのノートへのバックリンクは `parent`
 - 相互リンクは `leftFriend`
 
-`siblings` が有効な場合（既定）、親ノートの他の子ノートを `sibling` として追加します。兄弟の推論には `infer` も必要で、`infer: false` にすると無効になります。リンク先はコンテンツマニフェストから解決し、解決できない場合は元のリンクテキストをラベルにした仮想ノード（`data-node-virtual="true"`）にします。
+`siblings` が有効な場合（既定）、親ノートの他の子ノートを `sibling` として追加します。兄弟の推論にも `infer` が必要で、`infer: false` にすると無効になります。リンク先はコンテンツマニフェストから解決し、解決できない場合は元のリンクテキストをラベルにした仮想ノード（`data-node-virtual="true"`）にします。
 
 ## 公開範囲
 
-ノードはコンテンツマニフェストから解決します。`publishing.routable` が false のターゲットはマップから除外するため、公開対象外のノートがノードやリンクとして現れることはなく、タイトルやパーマリンクも漏れません。
+ノードはコンテンツマニフェストから解決します。`publishing.routable` が `false` のターゲットはマップから除外するため、公開対象外のノートがノードやリンクとして現れることはなく、タイトルやパーマリンクも漏れません。
 
 ## 描画
 
@@ -103,16 +103,23 @@ related:: [[note-a]] and [[note-b]] are similar
 | モード | 動作 |
 | --- | --- |
 | `"build"`（既定） | ビルド時に SVG を生成し、記事に埋め込みます |
-| `"client"` | `div.rb-excalibrain__canvas` にグラフとレイアウトのペイロードをエスケープして持ち、`initExcaliBrain()` がブラウザで SVG を生成します |
+| `"client"` | `div.rb-excalibrain__canvas` にグラフとレイアウトのペイロードをエスケープして保持し、`initExcaliBrain()` がブラウザで SVG を生成します |
 | `"both"` | 埋め込み SVG とクライアント側の描画を併用します（プログレッシブエンハンスメント） |
 
-### 差し込み方
+### 記事への差し込み
 
 - ` ```excalibrain ` フェンスがある場合は、そのプレースホルダーをマップに置き換えます。
 - フェンスがなく、`auto` が有効で関係が 1 つ以上ある場合は、記事 HTML の末尾にマップのセクションを追加します（マニフェストのエントリとキャッシュ済みの記事 HTML の両方を更新します）。
 
 `heading` と `headingText` は任意の `<h2>` を制御します。
 
+## 実行例
+
+マップはこのページのリンクから組み立てられます。フェンスの中身は使われません。
+
+~~~excalibrain
+~~~
+
 ## オプション
 
 | 項目 | 型 | 既定値 | 説明 |
@@ -150,11 +157,11 @@ related:: [[note-a]] and [[note-b]] are similar
 
 - マップは閲覧専用です。クライアント側の処理は SVG を生成するだけで、ドラッグ、ズーム、展開・折りたたみの操作はありません。
 - `maxPerRegion` は領域ごとのノード数を打ち切るため、関係が多いノートでは先頭のノードだけを表示します。
-- 描画できるのは上記のオントロジーのロールだけで、ノード単位のスタイルや領域単位の設定は下記のオプション以外にありません。
+- 描画できるのは上記のオントロジーのロールだけで、ノード単位のスタイルや領域単位の設定は上記のオプション以外にありません。
 
 ## 主なエクスポート
 
-- `excaliBrain(options?)` / `excaliBrainPlugin`: プラグインを作成する
+- `excaliBrain(options?)` / `excaliBrain`: プラグインを作成する
 - `resolveExcaliBrainOptions(options?)`: 既定値を解決する
 - `buildExcaliBrainGraph(input)`: 純粋なグラフ構築
 - `layoutExcaliBrain(graph, options?)`: 決定的なレイアウト

package/dist/client.js

@@ -27,6 +27,9 @@ function renderExcaliBrainSvg(graph, layout, options = {}) {
   parts.push(
     `<svg class="${className}__svg" viewBox="0 0 ${layout.width} ${layout.height}" role="img" aria-label="${escapeAttribute(`${graph.center.title} ExcaliBrain`)}" xmlns="http://www.w3.org/2000/svg" width="${layout.width}" height="${layout.height}">`
   );
+  parts.push(
+    `<defs><marker id="${className}-arrow" class="${className}__arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" /></marker></defs>`
+  );
   const links = layout.links.map((link) => renderLink(link, byId, className)).join("");
   parts.push(`<g class="${className}__links">${links}</g>`);
   for (const region of EXCALIBRAIN_REGION_ORDER) {
@@ -43,7 +46,7 @@ function renderExcaliBrainSvg(graph, layout, options = {}) {
   return parts.join("");
 }
 function renderNode(node, className) {
-  const box = `<rect class="${className}__node-box" x="${node.x}" y="${node.y}" width="${node.width}" height="${node.height}" rx="4" />`;
+  const box = `<rect class="${className}__node-box" x="${node.x}" y="${node.y}" width="${node.width}" height="${node.height}" rx="8" />`;
   const label = `<text class="${className}__node-label" x="${round(
     node.x + node.width / 2
   )}" y="${round(node.y + node.height / 2)}" text-anchor="middle" dominant-baseline="middle">${escapeHtml(node.title)}</text>`;
@@ -62,8 +65,12 @@ function renderLink(link, byId, className) {
   const from = byId.get(link.from);
   const to = byId.get(link.to);
   if (!from || !to) return "";
-  const d = `M ${round(from.x + from.width / 2)} ${round(from.y + from.height / 2)} L ${round(to.x + to.width / 2)} ${round(to.y + to.height / 2)}`;
-  return `<path class="${className}__link" data-link-role="${ROLE_ATTRIBUTE[link.role]}" data-relation-type="${link.relationType}" d="${d}" />`;
+  const fromX = from.x + from.width / 2;
+  const fromY = from.y + from.height / 2;
+  const toX = to.x + to.width / 2;
+  const toY = to.y + to.height / 2;
+  const d = `M ${round(fromX)} ${round(fromY)} L ${round(toX)} ${round(toY)}`;
+  return `<path class="${className}__link" data-link-role="${ROLE_ATTRIBUTE[link.role]}" data-relation-type="${link.relationType}" marker-end="url(#${className}-arrow)" d="${d}" />`;
 }
 function round(value) {
   return Math.round(value * 100) / 100;

package/dist/index.d.ts

@@ -8,4 +8,3 @@ export { resolveExcaliBrainOptions, validateExcaliBrainOptions, } from "./src/op
 export { renderExcaliBrainSection, renderExcaliBrainSvg, } from "./src/render.js";
 export type { ExcaliBrainBuildInput, ExcaliBrainClientOptions, ExcaliBrainGraph, ExcaliBrainLayout, ExcaliBrainLink, ExcaliBrainNode, ExcaliBrainNodeRole, ExcaliBrainOntology, ExcaliBrainOptions, ExcaliBrainPositionedLink, ExcaliBrainPositionedNode, ExcaliBrainRegion, ExcaliBrainRelationType, ExcaliBrainRenderMode, ExcaliBrainRole, } from "./src/types.js";
 export declare function excaliBrain(options?: ExcaliBrainOptions): import("@riebeckite/core").RiebeckitePlugin<ExcaliBrainOptions>;
-export declare const excaliBrainPlugin: typeof excaliBrain;

package/dist/index.js

@@ -443,6 +443,11 @@ function layoutExcaliBrain(graph, options = {}) {
     nearRadius,
     Math.min(nearRadius * 1.5, minDimension / 2 - 28)
   );
+  const sideFarRadius = Math.max(0, width / 2 - MAX_NODE_WIDTH / 2 - 4);
+  const sideNearRadius = Math.min(
+    sideFarRadius,
+    Math.max(MAX_CENTER_WIDTH / 2 + MAX_NODE_WIDTH / 2 + 20, width * 0.16)
+  );
   const positioned = [
     positionCenter(graph.center, cx, cy, width, height)
   ];
@@ -476,7 +481,7 @@ function layoutExcaliBrain(graph, options = {}) {
       continue;
     }
     const anchor = ROLE_ANCHOR[role];
-    const radius = anchor.radius === "far" ? farRadius : nearRadius;
+    const radius = role === "leftFriend" || role === "rightFriend" ? sideNearRadius : role === "previous" || role === "next" ? sideFarRadius : anchor.radius === "far" ? farRadius : nearRadius;
     group.forEach((node, index) => {
       const angle = spreadAngle(anchor.angle, index, group.length);
       positioned.push(positionNode(node, angle, radius, cx, cy, width, height));
@@ -652,6 +657,9 @@ function renderExcaliBrainSvg(graph, layout, options = {}) {
   parts.push(
     `<svg class="${className}__svg" viewBox="0 0 ${layout.width} ${layout.height}" role="img" aria-label="${escapeAttribute(`${graph.center.title} ExcaliBrain`)}" xmlns="http://www.w3.org/2000/svg" width="${layout.width}" height="${layout.height}">`
   );
+  parts.push(
+    `<defs><marker id="${className}-arrow" class="${className}__arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" /></marker></defs>`
+  );
   const links = layout.links.map((link) => renderLink(link, byId, className)).join("");
   parts.push(`<g class="${className}__links">${links}</g>`);
   for (const region of EXCALIBRAIN_REGION_ORDER) {
@@ -692,7 +700,7 @@ function renderExcaliBrainSection(input) {
   ].join("");
 }
 function renderNode(node, className) {
-  const box = `<rect class="${className}__node-box" x="${node.x}" y="${node.y}" width="${node.width}" height="${node.height}" rx="4" />`;
+  const box = `<rect class="${className}__node-box" x="${node.x}" y="${node.y}" width="${node.width}" height="${node.height}" rx="8" />`;
   const label = `<text class="${className}__node-label" x="${round(
     node.x + node.width / 2
   )}" y="${round(node.y + node.height / 2)}" text-anchor="middle" dominant-baseline="middle">${escapeHtml(node.title)}</text>`;
@@ -711,8 +719,12 @@ function renderLink(link, byId, className) {
   const from = byId.get(link.from);
   const to = byId.get(link.to);
   if (!from || !to) return "";
-  const d = `M ${round(from.x + from.width / 2)} ${round(from.y + from.height / 2)} L ${round(to.x + to.width / 2)} ${round(to.y + to.height / 2)}`;
-  return `<path class="${className}__link" data-link-role="${ROLE_ATTRIBUTE[link.role]}" data-relation-type="${link.relationType}" d="${d}" />`;
+  const fromX = from.x + from.width / 2;
+  const fromY = from.y + from.height / 2;
+  const toX = to.x + to.width / 2;
+  const toY = to.y + to.height / 2;
+  const d = `M ${round(fromX)} ${round(fromY)} L ${round(toX)} ${round(toY)}`;
+  return `<path class="${className}__link" data-link-role="${ROLE_ATTRIBUTE[link.role]}" data-relation-type="${link.relationType}" marker-end="url(#${className}-arrow)" d="${d}" />`;
 }
 function round(value) {
   return Math.round(value * 100) / 100;
@@ -802,14 +814,12 @@ function excaliBrain(options = {}) {
     ]
   });
 }
-var excaliBrainPlugin = excaliBrain;
 export {
   DEFAULT_ONTOLOGY,
   buildExcaliBrainGraph,
   collectDefinedRelations,
   collectHiddenTargets,
   excaliBrain,
-  excaliBrainPlugin,
   layoutExcaliBrain,
   normalizeFieldName,
   renderExcaliBrainSection,

package/dist/src/ontology.d.ts

@@ -1,9 +1,7 @@
 import type { ExcaliBrainNodeRole, ExcaliBrainOntology } from "./types.js";
-export type ExcaliBrainFieldRole = "parents" | "children" | "leftFriends" | "rightFriends" | "previous" | "next" | "hidden";
+type ExcaliBrainFieldRole = "parents" | "children" | "leftFriends" | "rightFriends" | "previous" | "next" | "hidden";
 /** ExcaliBrain's default ontology field names. */
 export declare const DEFAULT_ONTOLOGY: Required<ExcaliBrainOntology>;
-/** Canonical processing order; earlier roles win when a target is listed twice. */
-export declare const FIELD_ROLE_ORDER: readonly ExcaliBrainFieldRole[];
 export type ResolvedOntology = {
     /** Normalized field name to ontology role. */
     fieldRole: Map<string, ExcaliBrainFieldRole>;
@@ -15,7 +13,6 @@ export type DefinedRelation = {
 /** Lowercase a field name and normalize spaces to hyphens. */
 export declare function normalizeFieldName(value: string): string;
 export declare function resolveOntology(overrides?: ExcaliBrainOntology): ResolvedOntology;
-export declare function fieldRoleOf(field: string, ontology: ResolvedOntology): ExcaliBrainFieldRole | null;
 /**
  * Collect explicit relations from YAML frontmatter and dataview inline fields.
  * Results follow {@link FIELD_ROLE_ORDER} so defined relations are deterministic.
@@ -39,3 +36,4 @@ export declare function collectHiddenTargets(input: {
 export declare function extractWikilinkTargets(value: string): string[];
 /** Extract `Field:: value` pairs from the note body (frontmatter excluded). */
 export declare function extractInlineFields(markdown: string): Array<[string, string]>;
+export {};

package/dist/src/placeholder.d.ts

@@ -1,5 +1,3 @@
-export declare const EXCALIBRAIN_PLACEHOLDER_ATTRIBUTE = "data-rb-excalibrain";
 export declare function createExcaliBrainPlaceholder(): string;
-export declare function createExcaliBrainPlaceholderPattern(): RegExp;
 export declare function hasExcaliBrainPlaceholder(html: string): boolean;
 export declare function replaceExcaliBrainPlaceholders(html: string, replacement: string): string;

package/dist/src/rehype.d.ts

@@ -1,5 +1,5 @@
 import type { HastNode } from "./types.js";
-export type RehypeExcaliBrainOptions = {
+type RehypeExcaliBrainOptions = {
     language?: string;
 };
 /**
@@ -7,3 +7,4 @@ export type RehypeExcaliBrainOptions = {
  * resolved against the content manifest in `onManifestCreated`.
  */
 export declare function rehypeExcaliBrain(options?: RehypeExcaliBrainOptions): (tree: HastNode) => void;
+export {};

package/dist/src/render.d.ts

@@ -1,5 +1,5 @@
 import type { ExcaliBrainGraph, ExcaliBrainLayout, ExcaliBrainOptions, ExcaliBrainRenderMode } from "./types.js";
-export type ExcaliBrainSectionInput = {
+type ExcaliBrainSectionInput = {
     graph: ExcaliBrainGraph;
     layout: ExcaliBrainLayout;
     options?: ExcaliBrainOptions;
@@ -9,3 +9,4 @@ export type ExcaliBrainSectionInput = {
 export declare function renderExcaliBrainSvg(graph: ExcaliBrainGraph, layout: ExcaliBrainLayout, options?: ExcaliBrainOptions): string;
 /** Render the `<section>` wrapper, with inline SVG and/or a client canvas. */
 export declare function renderExcaliBrainSection(input: ExcaliBrainSectionInput): string;
+export {};

package/dist/src/types.d.ts

@@ -110,11 +110,11 @@ export type ElementNode = {
     properties?: Record<string, unknown>;
     children?: HastNode[];
 };
-export type TextNode = {
+type TextNode = {
     type: "text";
     value: string;
 };
-export type RawNode = {
+type RawNode = {
     type: "raw";
     value: string;
 };
@@ -122,3 +122,4 @@ export type HastNode = ElementNode | TextNode | RawNode | {
     type: string;
     [key: string]: unknown;
 };
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-excalibrain",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,11 +21,11 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.31"
+    "@riebeckite/core": "0.0.33"
   },
   "devDependencies": {
-    "tsx": "^4.22.4",
-    "@riebeckite/test": "0.0.31"
+    "@riebeckite/test": "0.0.33",
+    "tsx": "^4.22.4"
   },
   "publishConfig": {
     "access": "public"

package/style.css

@@ -3,6 +3,11 @@
   --rb-excalibrain-paper: var(--rb-color-paper, #ffffff);
   --rb-excalibrain-muted: var(--rb-color-muted, #69645c);
   --rb-excalibrain-accent: var(--rb-color-accent, #686868);
+  --rb-excalibrain-parent: #7656b5;
+  --rb-excalibrain-child: #16856f;
+  --rb-excalibrain-left-friend: #2776b7;
+  --rb-excalibrain-right-friend: #c05a2b;
+  --rb-excalibrain-sibling: #a55c96;
   --rb-excalibrain-rule: var(
     --rb-color-border,
     color-mix(in srgb, var(--rb-excalibrain-ink) 18%, transparent)
@@ -27,8 +32,12 @@
 
 .rb-excalibrain__canvas {
   overflow: auto;
-  border: 1px solid var(--rb-excalibrain-rule);
+  border: 1px solid
+    color-mix(in srgb, var(--rb-excalibrain-rule) 72%, transparent);
+  border-radius: 0.5rem;
   background: var(--rb-excalibrain-surface);
+  box-shadow: inset 0 1px
+    color-mix(in srgb, var(--rb-excalibrain-paper) 75%, transparent);
 }
 
 .rb-excalibrain__svg {
@@ -40,25 +49,75 @@
 
 .rb-excalibrain__link {
   fill: none;
-  stroke: var(--rb-excalibrain-rule);
-  stroke-width: 1.25;
+  stroke: var(--rb-excalibrain-accent);
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  opacity: 0.72;
+}
+
+.rb-excalibrain__arrow {
+  fill: context-stroke;
+}
+
+.rb-excalibrain__link[data-link-role="parent"] {
+  stroke: var(--rb-excalibrain-parent);
+}
+
+.rb-excalibrain__link[data-link-role="child"] {
+  stroke: var(--rb-excalibrain-child);
+}
+
+.rb-excalibrain__link[data-link-role="left-friend"] {
+  stroke: var(--rb-excalibrain-left-friend);
+}
+
+.rb-excalibrain__link[data-link-role="right-friend"] {
+  stroke: var(--rb-excalibrain-right-friend);
+}
+
+.rb-excalibrain__link[data-link-role="sibling"] {
+  stroke: var(--rb-excalibrain-sibling);
 }
 
 .rb-excalibrain__link[data-relation-type="defined"] {
-  stroke: var(--rb-excalibrain-accent);
+  opacity: 1;
 }
 
 .rb-excalibrain__node-box {
   fill: var(--rb-excalibrain-paper);
-  stroke: var(--rb-excalibrain-rule);
+  stroke: color-mix(in srgb, var(--rb-excalibrain-ink) 22%, transparent);
   stroke-width: 1.25;
+  filter: drop-shadow(
+    0 1px 1px color-mix(in srgb, var(--rb-excalibrain-ink) 16%, transparent)
+  );
 }
 
 .rb-excalibrain__node[data-node-role="center"] .rb-excalibrain__node-box {
+  fill: var(--rb-excalibrain-ink);
   stroke: var(--rb-excalibrain-ink);
   stroke-width: 2;
 }
 
+.rb-excalibrain__node[data-node-role="parent"] .rb-excalibrain__node-box {
+  stroke: var(--rb-excalibrain-parent);
+}
+
+.rb-excalibrain__node[data-node-role="child"] .rb-excalibrain__node-box {
+  stroke: var(--rb-excalibrain-child);
+}
+
+.rb-excalibrain__node[data-node-role="left-friend"] .rb-excalibrain__node-box {
+  stroke: var(--rb-excalibrain-left-friend);
+}
+
+.rb-excalibrain__node[data-node-role="right-friend"] .rb-excalibrain__node-box {
+  stroke: var(--rb-excalibrain-right-friend);
+}
+
+.rb-excalibrain__node[data-node-role="sibling"] .rb-excalibrain__node-box {
+  stroke: var(--rb-excalibrain-sibling);
+}
+
 .rb-excalibrain__node[data-node-virtual="true"] .rb-excalibrain__node-box {
   fill: none;
   stroke-dasharray: 4 3;
@@ -69,6 +128,11 @@
   font-size: 0.8125rem;
 }
 
+.rb-excalibrain__node[data-node-role="center"] .rb-excalibrain__node-label {
+  fill: var(--rb-excalibrain-paper);
+  font-weight: 700;
+}
+
 .rb-excalibrain__node-link {
   text-decoration: none;
 }