@hagicode/hagilight-mermaid 0.20.1-dev.193.1.fb8173e → 0.20.1-dev.195.1.06f4ade

package/README.md

@@ -10,6 +10,8 @@ npm install @hagicode/hagilight-mermaid mermaid
 
 `mermaid` is a peer dependency (`^11`). The package never bundles it, and it is imported the first time a non-empty diagram renders.
 
+`pele` is an optional peer (`^1.13.0`) for the Pele engine described below. Install it only if a site selects Pele: `npm install pele@^1.13.0`. A site that never selects Pele does not need it.
+
 ## Quick start
 
 ```ts
@@ -46,8 +48,47 @@ handle.destroy(); // discard pending renders and empty the element
 | `viewer` | `true` | Adds an enlarge button to the toolbar and makes `handle.expand()` open the viewer. `false` removes both. |
 | `fit` | `'width'` | `'width'` fills the host's width and lets the height follow. `'contain'` fits the whole diagram in the host's height, for fixed-height tiles: give the host a height. |
 | `loadMermaid` | `import('mermaid')` | Supplies the `mermaid` module. Use it to control chunking or to test. |
+| `engine` | `'mermaid'` | `'mermaid'` or `'pele'`. Resolved from this option, then the stored choice (see below), then `'mermaid'`. An unrecognized value is ignored. |
+| `peleLoader` | `import('pele')` | Supplies the `pele` module when the Pele engine renders. Use it to control chunking or to test. |
 | `className` | | Extra class names on the diagram container. |
 
+## Pele engine (optional)
+
+[Pele](https://pele.run) renders the same Mermaid source to SVG without Mermaid's runtime. It is synchronous and small. Mermaid stays the default, so a site that does nothing keeps its current output.
+
+```ts
+import { mountMermaidDiagrams, writeStoredEngine } from '@hagicode/hagilight-mermaid';
+
+mountMermaidDiagrams(document, { engine: 'pele' }); // this page, whatever is stored
+writeStoredEngine('pele'); // remember the choice in this browser for later renders
+```
+
+The engine is resolved in this order, and an unrecognized value is ignored:
+
+1. the `engine` option, when given (so `engine: 'mermaid'` outranks a stored `pele`);
+2. the choice stored under the key `hagilight-mermaid:engine` in `localStorage`;
+3. `mermaid`.
+
+Rendering never writes the stored choice. Only `writeStoredEngine` does, so `update({ engine })` for one page does not change later pages. `readStoredEngine()` returns the stored value or `undefined`. Storage that throws or is absent is treated as no choice, and no call here throws.
+
+**Version.** `pele` is pinned to `^1.13.0` as a peer. The package's tests render one sample per supported type with the installed Pele and fail if a marker the adapters need (node and edge classes, `data-id`, `aria-roledescription`) is missing. Pele has no release page, so a Pele upgrade is checked by those tests before it is accepted.
+
+**What Pele changes.** The theme maps `--hagilight-mermaid-*` tokens to Pele's `--pele-*` variables on the container, so a mode or preset change restyles the diagram without calling Pele again. Pie series colors are set explicitly. The error panel shows Pele's position and writes every message with `textContent`.
+
+**Flowchart, state, class and ER under Pele.** Tracing, keyboard focus and the dependency-order reveal use the geometry of the rendered SVG: each edge's first and last points are matched to the nearest node box. Edge identifiers are never read for endpoints. For class and ER relations the drawn direction, from the start of the line to its end, is the trace direction. ER relations have no true direction, so this is a convention: in the fixtures the line leaves the entity named first in the relation (`Animal` to `Duck`, `CUSTOMER` to `ORDER`).
+
+**Other Pele types** (pie, sequence and the rest) reveal with the generic reveal and have no part focus in this version. Diagram types listed in the degraded set show a notice above the diagram.
+
+**Degraded types.** Pele draws these types in a clearly simpler way, so the container shows the notice `peleDegradedNotice` (overridable through `labels`) above the diagram:
+
+- `c4`: the scaled-down diagram's text is hard to read at the same width.
+- `gitGraph`: branch labels sit on mid-tone fills and are hard to read.
+- `treemap`: leaf labels are small and light on their fills.
+
+The list was set from a same-size screenshot comparison of the 36 demo samples, both engines at 440 px. It is a constant in the package and is extended only with that kind of comparison.
+
+**Phase 2 limits.** Part focus and type-specific reveals for pie, sequence and the other types are not included. Pele's own `mount()` is not used, so its zoom and resize behaviour is not available. Layouts differ from Mermaid's, so a Pele diagram is not a pixel match for the Mermaid one.
+
 ## What each diagram type does
 
 Every Mermaid diagram type moves and responds, not only the ones with nodes.
@@ -104,6 +145,8 @@ Blue and teal lead the order, then amber and violet, so neighbouring series neve
 To use a site's own names, pass `tokens` instead of redefining the package tokens:
 
 ```ts
+import { mountMermaidDiagrams } from '@hagicode/hagilight-mermaid';
+
 mountMermaidDiagrams(document, {
   tokens: { background: '--background', foreground: '--foreground', primary: '--primary', accent: '--accent', primaryForeground: '--primary-foreground' },
 });
@@ -116,6 +159,8 @@ Colors in `oklch()` or `lab()` are converted to `rgb()` through a canvas before
 All visible text comes from `labels`. Unspecified keys keep the English defaults, and `{value}` is replaced by the count in trace labels.
 
 ```ts
+import { mountMermaidDiagrams } from '@hagicode/hagilight-mermaid';
+
 mountMermaidDiagrams(document, {
   labels: {
     rendering: 'Rendering diagram...',
@@ -158,6 +203,7 @@ With Mermaid 11.16.1, every diagram type the demo covers renders an SVG, and non
 - **Part focus and the reveal** read Mermaid 11.16.1's SVG structure, which has no shared shape across diagram types. A later Mermaid release can rename a class: the affected type then loses its part focus, and its reveal falls back to the generic one, until the table in `src/adapters.ts` is updated. The browser checks pin the installed version.
 - **Thin lines** (a sequence message, a git branch) are hard to hit on their own, so the part includes its label: hover the label or the text beside the line.
 - **Block**, **kanban**, **architecture** and **Wardley** have no dependency graph the tracing can read, so they get part focus rather than upstream and downstream paths.
+- **Pele engine**: the layout is Pele's own, not Mermaid's. The degraded list above is the only place that says where Pele draws less clearly. Part focus and type-specific reveals wait for a later phase.
 - **Text halo**: the default preset draws a halo behind diagram text, white in light mode and `#111827` in dark mode. Set `--hagilight-mermaid-halo` to the page color when it differs. Text printed on a colored mark (pie slices, Gantt bars, timeline and branch labels) has no halo.
 
 ## Parity

package/dist/adapters.d.ts

@@ -10,6 +10,7 @@
  * through the graph model instead. Every selector here was read from Mermaid 11.16.1 output; a type
  * the table does not know falls back to its top-level pieces, so a new Mermaid diagram still moves.
  */
+import type { Box, EdgeEnds } from './geometry.js';
 export type BeatKind = 'fade' | 'rise' | 'drop' | 'pop' | 'growX' | 'growY' | 'draw' | 'swing' | 'wipe';
 export interface Beat {
     els: Element[];
@@ -40,3 +41,27 @@ export declare function entranceBeats(svg: Element): Beat[];
  * is the second part, so they name it explicitly.
  */
 export declare function describeParts(svg: Element): PartFamily[];
+/** Pele's element for one node or edge of a graph, with what the geometry needs and nothing parsed from ids. */
+export interface PeleGraphNodePart {
+    el: SVGGElement;
+    /** The node's `data-id`, the stable key. Never parsed for endpoints. */
+    key: string;
+    label: string;
+    box: Box;
+}
+export interface PeleGraphEdgePart {
+    /** The line of the edge: the first child path that is not a marker. */
+    el: SVGPathElement;
+    /** Arrowheads and other `pele-marker` children, which travel with the line. */
+    markers: SVGElement[];
+    ends: EdgeEnds;
+}
+export interface PeleGraphParts {
+    nodes: PeleGraphNodePart[];
+    edges: PeleGraphEdgePart[];
+}
+/**
+ * The nodes and edges of a Pele flowchart, state, class or ER diagram, for the geometry matcher. Other Pele
+ * types have no graph here and return null, so they reveal and focus by their own parts instead.
+ */
+export declare function peleGraphParts(svg: SVGSVGElement): PeleGraphParts | null;

package/dist/adapters.js

@@ -357,3 +357,76 @@ export function describeParts(svg) {
         return family;
     });
 }
+/** Pele types whose graph is read from geometry: a node box per `g.pele-node`, an edge per `g.pele-edge`. */
+const PELE_GRAPH_TYPES = new Set(['flowchart', 'state', 'class', 'er']);
+/**
+ * The element's matrix into the root SVG's user space (its viewBox coordinates, the units Pele draws in). A
+ * child's own CTM also carries the viewBox-to-viewport scale, so that scale is divided out here. Every
+ * geometry check uses this one space, so distances are measured in the same units as the drawing.
+ */
+function toUserSpace(svg, el) {
+    const root = svg.getCTM();
+    const own = el.getCTM();
+    if (!root || !own)
+        return null;
+    return root.inverse().multiply(own);
+}
+/** A box in the root SVG's user space: the element's bounding box, carried through its own transform. */
+function boxInRoot(svg, el) {
+    if (typeof el.getBBox !== 'function' || typeof el.getCTM !== 'function')
+        return null;
+    const bounds = el.getBBox();
+    const matrix = toUserSpace(svg, el);
+    if (!matrix || (bounds.width === 0 && bounds.height === 0))
+        return null;
+    const corners = [
+        [bounds.x, bounds.y],
+        [bounds.x + bounds.width, bounds.y],
+        [bounds.x, bounds.y + bounds.height],
+        [bounds.x + bounds.width, bounds.y + bounds.height],
+    ].map(([x, y]) => ({ x: matrix.a * x + matrix.c * y + matrix.e, y: matrix.b * x + matrix.d * y + matrix.f }));
+    const xs = corners.map((corner) => corner.x);
+    const ys = corners.map((corner) => corner.y);
+    return { left: Math.min(...xs), top: Math.min(...ys), right: Math.max(...xs), bottom: Math.max(...ys) };
+}
+/** A point along a path, in the same root user space as `boxInRoot`. */
+function pointInRoot(svg, path, distance) {
+    const local = path.getPointAtLength(distance);
+    const matrix = toUserSpace(svg, path);
+    if (!matrix)
+        return { x: local.x, y: local.y };
+    return { x: matrix.a * local.x + matrix.c * local.y + matrix.e, y: matrix.b * local.x + matrix.d * local.y + matrix.f };
+}
+function peleLabel(node) {
+    for (const label of Array.from(node.querySelectorAll('.pele-label'))) {
+        const text = textOf(label);
+        if (text)
+            return text;
+    }
+    return '';
+}
+/**
+ * The nodes and edges of a Pele flowchart, state, class or ER diagram, for the geometry matcher. Other Pele
+ * types have no graph here and return null, so they reveal and focus by their own parts instead.
+ */
+export function peleGraphParts(svg) {
+    if (!PELE_GRAPH_TYPES.has(diagramType(svg)))
+        return null;
+    const nodes = [];
+    svg.querySelectorAll('g.pele-node[data-id]').forEach((el) => {
+        const box = boxInRoot(svg, el);
+        if (!box)
+            return;
+        nodes.push({ el, key: el.getAttribute('data-id') ?? '', label: peleLabel(el), box });
+    });
+    const edges = [];
+    svg.querySelectorAll('g.pele-edge').forEach((group) => {
+        const line = Array.from(group.children).find((child) => child.tagName.toLowerCase() === 'path' && !child.classList.contains('pele-marker'));
+        if (!line || typeof line.getTotalLength !== 'function')
+            return;
+        const length = line.getTotalLength();
+        const markers = Array.from(group.querySelectorAll('.pele-marker'));
+        edges.push({ el: line, markers, ends: { start: pointInRoot(svg, line, 0), end: pointInRoot(svg, line, length) } });
+    });
+    return { nodes, edges };
+}

package/dist/engine.d.ts

@@ -0,0 +1,14 @@
+import type { MermaidEngine } from './types.js';
+/** Storage key for the engine a visitor chose. The package never writes it on its own. */
+export declare const ENGINE_STORAGE_KEY = "hagilight-mermaid:engine";
+/** True for `mermaid` and `pele`. Anything else counts as no choice. */
+export declare function isMermaidEngine(value: unknown): value is MermaidEngine;
+/**
+ * The engine a render uses: the option when it is recognized, then the stored choice, then `mermaid`.
+ * An unrecognized option is ignored, so the next source in the order decides.
+ */
+export declare function resolveEngine(option?: unknown): MermaidEngine;
+/** The stored engine choice, or `undefined` when none is stored, the value is unrecognized, or storage is unavailable. */
+export declare function readStoredEngine(): MermaidEngine | undefined;
+/** Stores the engine choice for later renders with no explicit option. Unrecognized values and storage failures do nothing. */
+export declare function writeStoredEngine(engine: MermaidEngine): void;

package/dist/engine.js

@@ -0,0 +1,38 @@
+/** Storage key for the engine a visitor chose. The package never writes it on its own. */
+export const ENGINE_STORAGE_KEY = 'hagilight-mermaid:engine';
+const ENGINES = ['mermaid', 'pele'];
+/** True for `mermaid` and `pele`. Anything else counts as no choice. */
+export function isMermaidEngine(value) {
+    return typeof value === 'string' && ENGINES.includes(value);
+}
+/**
+ * The engine a render uses: the option when it is recognized, then the stored choice, then `mermaid`.
+ * An unrecognized option is ignored, so the next source in the order decides.
+ */
+export function resolveEngine(option) {
+    if (isMermaidEngine(option))
+        return option;
+    return readStoredEngine() ?? 'mermaid';
+}
+/** The stored engine choice, or `undefined` when none is stored, the value is unrecognized, or storage is unavailable. */
+export function readStoredEngine() {
+    try {
+        const value = globalThis.localStorage?.getItem(ENGINE_STORAGE_KEY);
+        return isMermaidEngine(value) ? value : undefined;
+    }
+    catch {
+        // Blocked or throwing storage: rendering falls back to the default engine.
+        return undefined;
+    }
+}
+/** Stores the engine choice for later renders with no explicit option. Unrecognized values and storage failures do nothing. */
+export function writeStoredEngine(engine) {
+    if (!isMermaidEngine(engine))
+        return;
+    try {
+        globalThis.localStorage?.setItem(ENGINE_STORAGE_KEY, engine);
+    }
+    catch {
+        // The control still switches the engine for this page; the choice is just not remembered.
+    }
+}

package/dist/entrance.js

@@ -76,6 +76,8 @@ export function playMermaidEntrance(svg, graph) {
                     draw.finished.then(land, land);
                 }
             }
+            // Pele draws its arrowhead apart from the line; it arrives as the line lands, so it never leads the edge.
+            edge.markers.forEach((marker) => add(marker, [{ opacity: 0 }, { opacity: 1 }], { duration: edgeMs, delay: delay + edgeMs * 0.8 }));
             if (edge.labelEl) {
                 add(edge.labelEl, [{ opacity: 0 }, { opacity: 1 }], { duration: LABEL_MS, delay: delay + edgeMs * 0.65 });
             }

package/dist/geometry.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Pure matching of edge end points to node boxes, for Pele graphs. Plain numbers in, index out: the DOM layer
+ * (adapters.ts) reads the boxes and end points in one coordinate space, and this file decides which node
+ * each end belongs to. Edge identifiers are never read, because they do not reliably name their ends.
+ */
+export interface Box {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface EdgeEnds {
+    start: Point;
+    end: Point;
+}
+export interface LinkedEdge {
+    /** Index into the edges passed in. */
+    edge: number;
+    /** Index into the boxes passed in: the node the edge leaves. */
+    from: number;
+    /** Index into the boxes passed in: the node the edge enters. */
+    to: number;
+}
+/** A point this close outside a box still counts as touching it, for rounded borders and sub-pixel error. */
+export declare const CONTAINMENT_TOLERANCE = 2;
+/**
+ * The widest gap, in viewBox units, between an end point and a box that still matches. Pele stops a line short
+ * of its node to leave room for the arrowhead: about 7 units for flowchart arrows and about 12 for class
+ * relations in the probe, so 16 covers both with a margin.
+ */
+export declare const MATCH_LIMIT = 16;
+/** Distance from a point to a box: zero inside it, otherwise the gap to the nearest edge or corner. */
+export declare function distanceToBox(point: Point, box: Box): number;
+/**
+ * The box a point belongs to, as an index, or -1 when none is close enough. A point inside a box (with the
+ * tolerance) wins, and of several such boxes the smallest one, so a node nested in a cluster is the node.
+ * Otherwise the nearest box within `limit` wins, and between equally near boxes the smaller one.
+ */
+export declare function matchPoint(point: Point, boxes: readonly Box[], { tolerance, limit }?: {
+    tolerance?: number;
+    limit?: number;
+}): number;
+/**
+ * Links each edge from the node its start point belongs to to the node its end point belongs to. An edge whose
+ * end matches no box, or whose two ends match the same box (a self-loop), is left out; the rest still link.
+ */
+export declare function linkEdges(edges: readonly EdgeEnds[], boxes: readonly Box[], options?: {
+    tolerance?: number;
+    limit?: number;
+}): LinkedEdge[];

package/dist/geometry.js

@@ -0,0 +1,65 @@
+/**
+ * Pure matching of edge end points to node boxes, for Pele graphs. Plain numbers in, index out: the DOM layer
+ * (adapters.ts) reads the boxes and end points in one coordinate space, and this file decides which node
+ * each end belongs to. Edge identifiers are never read, because they do not reliably name their ends.
+ */
+/** A point this close outside a box still counts as touching it, for rounded borders and sub-pixel error. */
+export const CONTAINMENT_TOLERANCE = 2;
+/**
+ * The widest gap, in viewBox units, between an end point and a box that still matches. Pele stops a line short
+ * of its node to leave room for the arrowhead: about 7 units for flowchart arrows and about 12 for class
+ * relations in the probe, so 16 covers both with a margin.
+ */
+export const MATCH_LIMIT = 16;
+const area = (box) => (box.right - box.left) * (box.bottom - box.top);
+/** Distance from a point to a box: zero inside it, otherwise the gap to the nearest edge or corner. */
+export function distanceToBox(point, box) {
+    const dx = Math.max(box.left - point.x, 0, point.x - box.right);
+    const dy = Math.max(box.top - point.y, 0, point.y - box.bottom);
+    return Math.hypot(dx, dy);
+}
+/**
+ * The box a point belongs to, as an index, or -1 when none is close enough. A point inside a box (with the
+ * tolerance) wins, and of several such boxes the smallest one, so a node nested in a cluster is the node.
+ * Otherwise the nearest box within `limit` wins, and between equally near boxes the smaller one.
+ */
+export function matchPoint(point, boxes, { tolerance = CONTAINMENT_TOLERANCE, limit = MATCH_LIMIT } = {}) {
+    let best = -1;
+    let bestArea = Infinity;
+    boxes.forEach((box, index) => {
+        const inside = point.x >= box.left - tolerance && point.x <= box.right + tolerance && point.y >= box.top - tolerance && point.y <= box.bottom + tolerance;
+        if (inside && area(box) < bestArea) {
+            best = index;
+            bestArea = area(box);
+        }
+    });
+    if (best !== -1)
+        return best;
+    let bestDistance = Infinity;
+    boxes.forEach((box, index) => {
+        const distance = distanceToBox(point, box);
+        if (distance > limit)
+            return;
+        if (distance < bestDistance || (distance === bestDistance && area(box) < bestArea)) {
+            best = index;
+            bestDistance = distance;
+            bestArea = area(box);
+        }
+    });
+    return best;
+}
+/**
+ * Links each edge from the node its start point belongs to to the node its end point belongs to. An edge whose
+ * end matches no box, or whose two ends match the same box (a self-loop), is left out; the rest still link.
+ */
+export function linkEdges(edges, boxes, options) {
+    const linked = [];
+    edges.forEach((ends, edge) => {
+        const from = matchPoint(ends.start, boxes, options);
+        const to = matchPoint(ends.end, boxes, options);
+        if (from === -1 || to === -1 || from === to)
+            return;
+        linked.push({ edge, from, to });
+    });
+    return linked;
+}

package/dist/graph.d.ts

@@ -18,6 +18,8 @@ export interface MermaidGraphEdge {
     from: number;
     to: number;
     labelEl: SVGGElement | null;
+    /** Arrowheads drawn apart from the line (Pele). They reveal and dim with their edge. Empty for Mermaid. */
+    markers: SVGElement[];
 }
 export interface MermaidGraph {
     nodes: MermaidGraphNode[];

package/dist/graph.js

@@ -1,10 +1,5 @@
-/**
- * Graph model of a rendered Mermaid SVG. Mermaid's unified renderer (flowchart, state, class, ER,
- * requirement, mindmap, swimlane) emits `g.nodes > g.node` and `g.edgePaths > path`, and Sankey draws
- * its links as `g.links > g.link > path`, so the model is read from the DOM instead of re-parsing the
- * diagram source. Diagram types without that structure (sequence, gantt, ...) yield an empty graph;
- * `adapters.ts` describes their parts instead.
- */
+import { linkEdges } from './geometry.js';
+import { peleGraphParts } from './adapters.js';
 const NODE_KEY = /-(?:flowchart|state|class|classId|er)-(.+?)-\d+$/;
 /** Flowchart-style edges are `L_<from>_<to>_<n>`; class diagrams use `id_<from>_<to>_<n>`. */
 const EDGE_ID = /^(?:L|id)_(.+)_\d+$/;
@@ -64,7 +59,40 @@ function nearestNode(boxes, x, y) {
     });
     return best;
 }
+/** Pele output carries the `data-mermaid-engine` marker the post-processor sets, or at least its `pele` root class. */
+function isPeleSvg(svg) {
+    return svg.getAttribute('data-mermaid-engine') === 'pele' || svg.classList.contains('pele');
+}
+/** Builds the graph of a Pele flowchart, state, class or ER diagram from geometry. Ids are keys, never endpoints. */
+function buildPeleGraph(svg) {
+    const parts = peleGraphParts(svg);
+    const nodes = (parts?.nodes ?? []).map((part, index) => ({
+        index,
+        el: part.el,
+        key: part.key,
+        label: part.label,
+    }));
+    const edges = [];
+    for (const link of linkEdges(parts?.edges.map((edge) => edge.ends) ?? [], parts?.nodes.map((node) => node.box) ?? [])) {
+        const edge = parts.edges[link.edge];
+        edges.push({ index: edges.length, el: edge.el, from: link.from, to: link.to, labelEl: null, markers: edge.markers });
+    }
+    return finishGraph(nodes, edges);
+}
+/** Per-node adjacency from the edge list. */
+function finishGraph(nodes, edges) {
+    const out = nodes.map(() => []);
+    const inc = nodes.map(() => []);
+    edges.forEach((edge) => {
+        out[edge.from].push(edge.index);
+        inc[edge.to].push(edge.index);
+    });
+    return { nodes, edges, out, inc };
+}
 export function buildMermaidGraph(svg) {
+    // The adapter set follows the SVG's origin: Pele's geometry for Pele output, Mermaid's classes otherwise.
+    if (isPeleSvg(svg))
+        return buildPeleGraph(svg);
     const nodeEls = Array.from(svg.querySelectorAll('g.nodes > g.node'));
     const edgeEls = Array.from(svg.querySelectorAll(EDGE_PATHS));
     const nodes = nodeEls.map((el, index) => ({
@@ -113,15 +141,10 @@ export function buildMermaidGraph(svg) {
             from: ends[0],
             to: ends[1],
             labelEl: labelById.get(dataId)?.closest('g.edgeLabel') ?? null,
+            markers: [],
         });
     });
-    const out = nodes.map(() => []);
-    const inc = nodes.map(() => []);
-    edges.forEach((edge) => {
-        out[edge.from].push(edge.index);
-        inc[edge.to].push(edge.index);
-    });
-    return { nodes, edges, out, inc };
+    return finishGraph(nodes, edges);
 }
 /**
  * Longest-path layering with back edges ignored, so cycles (retry loops) cannot push a node past

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { renderMermaid } from './render.js';
 export { mountMermaidDiagrams } from './mount.js';
-export type { MermaidHandle, MermaidInteractionConfig, MermaidLabelOverrides, MermaidLabels, MermaidMode, MermaidMountHandle, MermaidMountOptions, MermaidPreset, MermaidRenderOptions, MermaidTokenRole, MermaidTokens, MermaidTraceSummary, MermaidUpdate, } from './types.js';
+export { ENGINE_STORAGE_KEY, readStoredEngine, resolveEngine, writeStoredEngine } from './engine.js';
+export type { MermaidEngine, MermaidHandle, MermaidInteractionConfig, MermaidLabelOverrides, MermaidLabels, MermaidMode, MermaidMountHandle, MermaidMountOptions, MermaidPreset, MermaidRenderOptions, MermaidTokenRole, MermaidTokens, MermaidTraceSummary, MermaidUpdate, PeleErrorShape, PeleModule, PeleRenderResult, } from './types.js';

package/dist/index.js

@@ -1,2 +1,3 @@
 export { renderMermaid } from './render.js';
 export { mountMermaidDiagrams } from './mount.js';
+export { ENGINE_STORAGE_KEY, readStoredEngine, resolveEngine, writeStoredEngine } from './engine.js';

package/dist/interaction.js

@@ -129,7 +129,8 @@ export function attachMermaidDiagramInteraction(root, config = {}, prebuilt) {
         graph.edges.forEach((edge) => {
             const up = trace.upstreamEdges.has(edge.index);
             const down = trace.downstreamEdges.has(edge.index);
-            const targets = edge.labelEl ? [edge.el, edge.labelEl] : [edge.el];
+            // Arrowheads drawn apart from the line (Pele) dim and light with their edge.
+            const targets = [edge.el, ...edge.markers, ...(edge.labelEl ? [edge.labelEl] : [])];
             targets.forEach((el) => {
                 if (!up && !down)
                     el.classList.add('mermaid-trace-dim');
@@ -155,7 +156,7 @@ export function attachMermaidDiagramInteraction(root, config = {}, prebuilt) {
             return;
         layer = svgEl('g', 'mermaid-trace-layer');
         layer.setAttribute('aria-hidden', 'true');
-        host.insertBefore(layer, svg.querySelector('g.edgePaths')?.nextSibling ?? null);
+        host.insertBefore(layer, svg.querySelector('g.edgePaths, g.pele-edges')?.nextSibling ?? null);
         edgesWithHop.forEach(({ index, delay, direction }) => {
             const source = graph.edges[index].el;
             const length = typeof source.getTotalLength === 'function' ? source.getTotalLength() : 0;

package/dist/labels.js

@@ -7,6 +7,7 @@ export const DEFAULT_LABELS = {
     renderingErrorPrefix: 'Rendering error:',
     noValidDiagram: 'No valid diagram detected',
     unknownDiagramType: 'Unknown diagram type',
+    peleDegradedNotice: 'This diagram type is simplified by the Pele engine. Switch to Mermaid for the full layout.',
     diagramLabel: 'Diagram',
     replay: 'Replay animation',
     expand: 'Enlarge diagram',

package/dist/pele-degraded.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Pele diagram types that render in a clearly degraded way, so the container shows a notice above them. The list
+ * is filled from the same-size screenshot comparison of the demo samples (see the change's design notes), and
+ * each entry is a Pele type name, as `PeleRenderResult.type` reports it. Falling back to Mermaid is not used,
+ * because it would load `mermaid` on a Pele-only site.
+ */
+export declare const PELE_DEGRADED_TYPES: readonly string[];
+/** True when a Pele diagram of this type should show the degraded notice. */
+export declare function isPeleDegraded(type: string | undefined): boolean;

package/dist/pele-degraded.js

@@ -0,0 +1,14 @@
+/**
+ * Pele diagram types that render in a clearly degraded way, so the container shows a notice above them. The list
+ * is filled from the same-size screenshot comparison of the demo samples (see the change's design notes), and
+ * each entry is a Pele type name, as `PeleRenderResult.type` reports it. Falling back to Mermaid is not used,
+ * because it would load `mermaid` on a Pele-only site.
+ */
+// Found in the 2026-10-31 same-size comparison of examples/demo-web/src/mermaid-samples.ts (36 samples, both engines
+// at 440px): c4 scales to unreadable text, gitGraph branch labels are white on mid-tone fills, and treemap leaf
+// labels are white and too small on their fills.
+export const PELE_DEGRADED_TYPES = Object.freeze(['c4', 'gitGraph', 'treemap']);
+/** True when a Pele diagram of this type should show the degraded notice. */
+export function isPeleDegraded(type) {
+    return type !== undefined && PELE_DEGRADED_TYPES.includes(type);
+}

package/dist/pele-theme.d.ts

@@ -0,0 +1,32 @@
+import type { MermaidPreset, MermaidThemeMode, MermaidTokens } from './types.js';
+/** Text on a surface, and slice labels on a series color, must hold this ratio (WCAG AA for normal text). */
+export declare const PELE_MIN_CONTRAST = 4.5;
+/** Pele reads `--pele-series-1` to `--pele-series-8` for categorical fills. */
+export declare const PELE_SERIES_COUNT = 8;
+/** Every custom property the mapping writes, in order. Pele reads each of them, with its own fallback. */
+export declare const PELE_VARIABLE_NAMES: readonly string[];
+export interface PeleThemeOptions {
+    /** Site token names for the theme roles, the same option Mermaid takes. */
+    tokens?: MermaidTokens;
+    /** Font stack for the diagram text. Defaults to `sans-serif`; the render path passes the container's font. */
+    font?: string;
+}
+/**
+ * Moves `color` toward black or white, whichever gives more contrast on `background`, until the pair reaches
+ * `minimum`. A color that already passes is returned unchanged. The palette's colors are hex, so the steps
+ * are exact; any other form is passed through, as the contrast check cannot read it.
+ */
+export declare function ensureContrast(color: string, background: string, minimum?: number): string;
+/**
+ * The custom properties for Pele in one mode and preset. Series colors come from the preset palette, adjusted per
+ * background so the slice label (drawn in the background color) holds 4.5:1 on each slice.
+ */
+export declare function peleVariables(mode: MermaidThemeMode, preset?: MermaidPreset, options?: PeleThemeOptions): Record<string, string>;
+/** Writes the variables as inline custom properties on the container. Pele's SVG inherits them; no render call. */
+export declare function applyPeleVariables(element: {
+    style: {
+        setProperty: (name: string, value: string) => void;
+    };
+}, variables: Record<string, string>): void;
+/** The container's computed font stack, so Pele text matches the page. Falls back to `sans-serif` without a DOM. */
+export declare function peleFontFamily(element: unknown): string;

package/dist/pele-theme.js

@@ -0,0 +1,75 @@
+import { mixColors } from './palette.js';
+import { getContrastRatio, getMermaidSemanticTheme } from './theme.js';
+/** Text on a surface, and slice labels on a series color, must hold this ratio (WCAG AA for normal text). */
+export const PELE_MIN_CONTRAST = 4.5;
+/** Pele reads `--pele-series-1` to `--pele-series-8` for categorical fills. */
+export const PELE_SERIES_COUNT = 8;
+const DEFAULT_RADIUS = '4px';
+const DEFAULT_FONT = 'sans-serif';
+/** Every custom property the mapping writes, in order. Pele reads each of them, with its own fallback. */
+export const PELE_VARIABLE_NAMES = [
+    '--pele-bg',
+    '--pele-fg',
+    '--pele-muted',
+    '--pele-line',
+    '--pele-surface',
+    '--pele-surface-alt',
+    '--pele-border',
+    '--pele-accent',
+    '--pele-font',
+    '--pele-radius',
+    ...Array.from({ length: PELE_SERIES_COUNT }, (_, index) => `--pele-series-${index + 1}`),
+];
+/**
+ * Moves `color` toward black or white, whichever gives more contrast on `background`, until the pair reaches
+ * `minimum`. A color that already passes is returned unchanged. The palette's colors are hex, so the steps
+ * are exact; any other form is passed through, as the contrast check cannot read it.
+ */
+export function ensureContrast(color, background, minimum = PELE_MIN_CONTRAST) {
+    if (getContrastRatio(background, color) >= minimum)
+        return color;
+    const target = getContrastRatio(background, '#000000') >= getContrastRatio(background, '#ffffff') ? '#000000' : '#ffffff';
+    let candidate = color;
+    for (let step = 1; step <= 50; step += 1) {
+        candidate = mixColors(color, target, step / 50);
+        if (getContrastRatio(background, candidate) >= minimum)
+            return candidate;
+    }
+    return candidate;
+}
+/**
+ * The custom properties for Pele in one mode and preset. Series colors come from the preset palette, adjusted per
+ * background so the slice label (drawn in the background color) holds 4.5:1 on each slice.
+ */
+export function peleVariables(mode, preset = 'default', options = {}) {
+    const theme = getMermaidSemanticTheme(mode, preset, { tokens: options.tokens });
+    const { background, foreground } = theme;
+    // Secondary text: a mix toward the background, kept only when it still reads at 4.5:1.
+    const mutedMix = mixColors(foreground, background, 0.35);
+    const muted = getContrastRatio(mutedMix, background) >= PELE_MIN_CONTRAST ? mutedMix : foreground;
+    const series = Object.fromEntries(theme.series.slice(0, PELE_SERIES_COUNT).map((tone, index) => [`--pele-series-${index + 1}`, ensureContrast(tone.mark, background)]));
+    return {
+        '--pele-bg': background,
+        '--pele-fg': foreground,
+        '--pele-muted': muted,
+        '--pele-line': theme.edge.line,
+        '--pele-surface': theme.node.fill,
+        '--pele-surface-alt': theme.cluster.fill,
+        '--pele-border': theme.node.border,
+        '--pele-accent': theme.accent,
+        '--pele-font': options.font ?? DEFAULT_FONT,
+        '--pele-radius': DEFAULT_RADIUS,
+        ...series,
+    };
+}
+/** Writes the variables as inline custom properties on the container. Pele's SVG inherits them; no render call. */
+export function applyPeleVariables(element, variables) {
+    for (const [name, value] of Object.entries(variables))
+        element.style.setProperty(name, value);
+}
+/** The container's computed font stack, so Pele text matches the page. Falls back to `sans-serif` without a DOM. */
+export function peleFontFamily(element) {
+    if (typeof getComputedStyle !== 'function' || typeof Element === 'undefined' || !(element instanceof Element))
+        return DEFAULT_FONT;
+    return getComputedStyle(element).fontFamily || DEFAULT_FONT;
+}

package/dist/render.js

@@ -5,8 +5,11 @@ import { playMermaidEntrance } from './entrance.js';
 import { attachMermaidPartFocus } from './focus.js';
 import { buildMermaidGraph } from './graph.js';
 import { attachMermaidDiagramInteraction } from './interaction.js';
+import { resolveEngine } from './engine.js';
 import { resolveLabels } from './labels.js';
 import { resolveMode, watchMode } from './mode.js';
+import { isPeleDegraded } from './pele-degraded.js';
+import { applyPeleVariables, peleFontFamily, peleVariables } from './pele-theme.js';
 import { ensureSvgViewBox, normalizeMermaidSvgViewBox, postProcessMermaidSvg } from './svg.js';
 import { getMermaidThemeConfig, resolvePreset } from './theme.js';
 import { openMermaidViewer } from './viewer.js';
@@ -50,6 +53,38 @@ async function initializeOnce(mermaid, config) {
 function defaultLoader() {
     return import('mermaid');
 }
+function defaultPeleLoader() {
+    return import('pele');
+}
+/** Pele is loaded once per loader. A failed import is not kept, so the next render tries again. */
+const PELE_MODULES = new WeakMap();
+function loadPele(loader) {
+    let pending = PELE_MODULES.get(loader);
+    if (!pending) {
+        pending = loader().catch((error) => {
+            PELE_MODULES.delete(loader);
+            throw error;
+        });
+        PELE_MODULES.set(loader, pending);
+    }
+    return pending;
+}
+/** Mermaid backend: the shared Mermaid instance, queued so renders never overlap. */
+function renderWithMermaid(source, options, mode, preset) {
+    return enqueue(async () => {
+        const { default: mermaid } = await (options.loadMermaid ?? defaultLoader)();
+        const config = getMermaidThemeConfig(mode, preset, { tokens: options.tokens });
+        await initializeOnce(mermaid, config);
+        const id = `mermaid-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+        return (await mermaid.render(id, source)).svg;
+    });
+}
+/** Pele backend: a direct synchronous call, never Pele's own mount. Mermaid is not loaded on this path. */
+async function renderWithPele(source, options) {
+    const pele = await loadPele(options.peleLoader ?? defaultPeleLoader);
+    const { svg, type } = pele.render(source);
+    return { svg, type };
+}
 /** Maps Mermaid's parser messages onto the labels, as the web app does. */
 /** Trace for a graph the model can read, part focus for every other type, nothing when interaction is off. */
 function attachInteraction(host, svg, config, onTraceChange, graph = buildMermaidGraph(svg)) {
@@ -58,17 +93,42 @@ function attachInteraction(host, svg, config, onTraceChange, graph = buildMermai
         return attachMermaidDiagramInteraction(host, wired, graph);
     return attachMermaidPartFocus(host, wired, describeParts(svg));
 }
+/** Pele's `PeleError` is recognized by its shape, because the class is only reachable once `pele` has loaded. */
+function isPeleError(error) {
+    if (!(error instanceof Error))
+        return false;
+    const candidate = error;
+    return error.name === 'PeleError' || (typeof candidate.code === 'string' && typeof candidate.line === 'number');
+}
+/**
+ * Keeps the position visible after the Mermaid label replaces "Parse error on line N:": the first line gets
+ * "(line N, column M)" unless the message already names a line. Only the first line changes.
+ */
+function withPosition(message, error) {
+    if (!error.line || /\bline \d+/i.test(message))
+        return message;
+    const position = `line ${error.line}${error.column ? `, column ${error.column}` : ''}`;
+    const [first = '', ...rest] = message.split('\n');
+    const head = first.endsWith(':') ? `${first.slice(0, -1)} (${position}):` : `${first} (${position})`;
+    return [head, ...rest].join('\n');
+}
 function describeError(error, labels) {
     let message = labels.unableToRender;
     if (error instanceof Error)
         message = error.message;
     else if (typeof error === 'string')
         message = error;
-    return message
+    const described = message
         .replace(/^Parse error on line \d+:/, labels.syntaxErrorPrefix)
         .replace(/^Error:/, labels.renderingErrorPrefix)
         .replace(/no diagram type detected/i, labels.noValidDiagram)
         .replace(/unknown diagram type/i, labels.unknownDiagramType);
+    return isPeleError(error) ? withPosition(described, error) : described;
+}
+/** The options a Pele restyle may change without a render. Everything else still needs a render. */
+function withoutRestyleKeys(options) {
+    const { mode: _mode, preset: _preset, tokens: _tokens, ...rest } = options;
+    return rest;
 }
 /** Objects compare by value and functions by identity, so a new loader or callback counts as a change. */
 function sameValue(left, right) {
@@ -99,6 +159,11 @@ class MermaidDiagram {
     entrance = null;
     observer = null;
     unwatchMode = null;
+    /** What the shown diagram was rendered from, so a Pele restyle is only taken when nothing else changed. */
+    renderedEngine = null;
+    renderedSource = '';
+    renderedOptions = {};
+    renderedPreset = 'default';
     constructor(host, source, options) {
         this.host = host;
         this.source = source;
@@ -153,6 +218,8 @@ class MermaidDiagram {
     }
     async render() {
         const version = ++this.version;
+        if (this.restylePele())
+            return;
         this.teardownDiagram();
         if (!this.source.trim()) {
             this.host.replaceChildren();
@@ -162,17 +229,15 @@ class MermaidDiagram {
         const { source, options } = this;
         const mode = resolveMode(options.mode ?? 'auto');
         const preset = resolvePreset(options.preset);
+        const engine = resolveEngine(options.engine);
         try {
-            const svg = await enqueue(async () => {
-                const { default: mermaid } = await (options.loadMermaid ?? defaultLoader)();
-                const config = getMermaidThemeConfig(mode, preset, { tokens: options.tokens });
-                await initializeOnce(mermaid, config);
-                const id = `mermaid-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
-                return (await mermaid.render(id, source)).svg;
-            });
+            const rendered = engine === 'pele' ? await renderWithPele(source, options) : { svg: await renderWithMermaid(source, options, mode, preset), type: '' };
             if (this.isStale(version))
                 return;
-            this.showDiagram(postProcessMermaidSvg(svg), mode, preset);
+            this.renderedSource = source;
+            this.renderedOptions = withoutRestyleKeys(options);
+            this.renderedEngine = engine;
+            this.showDiagram(postProcessMermaidSvg(rendered.svg, {}, engine), mode, preset, rendered.type);
         }
         catch (error) {
             if (this.isStale(version))
@@ -181,8 +246,9 @@ class MermaidDiagram {
             this.host.replaceChildren(this.errorPanel(describeError(error, this.labels)));
         }
     }
-    showDiagram(svg, mode, preset) {
+    showDiagram(svg, mode, preset, peleType = '') {
         this.renderedMode = mode;
+        this.renderedPreset = preset;
         this.markup = svg;
         const container = el('div', [this.baseClasses(), `mermaid-preset-${preset}`].join(' '));
         container.dataset.mermaidPreset = preset;
@@ -193,6 +259,14 @@ class MermaidDiagram {
         container.appendChild(diagramHost);
         this.container = container;
         this.diagramHost = diagramHost;
+        // Pele's SVG reads its colors from these variables, so they are written once here and restyled in place.
+        if (this.renderedEngine === 'pele')
+            this.paintPele(container, mode, preset);
+        if (this.renderedEngine === 'pele' && isPeleDegraded(peleType)) {
+            const notice = el('p', 'mermaid-engine-notice', this.labels.peleDegradedNotice);
+            notice.setAttribute('role', 'note');
+            container.insertBefore(notice, diagramHost);
+        }
         // Layout-dependent work runs once the SVG is in the document: the viewBox needs getBBox, and the
         // reveal's hidden first frame has to be in place before the browser paints.
         const svgElement = diagramHost.querySelector('svg');
@@ -218,6 +292,33 @@ class MermaidDiagram {
         }
         this.scheduleEntrance(svgElement, graph, diagramHost);
     }
+    /** Writes the Pele variables for a mode and preset onto the container. No Pele call is made. */
+    paintPele(container, mode, preset) {
+        applyPeleVariables(container, peleVariables(mode, preset, { tokens: this.options.tokens, font: peleFontFamily(container) }));
+    }
+    /**
+     * A mode, preset or token change on a shown Pele diagram only rewrites its variables and classes. Source,
+     * engine and every other option still take the full render path. Returns false when a render is needed.
+     */
+    restylePele() {
+        if (this.renderedEngine !== 'pele' || !this.container || this.renderedSource !== this.source)
+            return false;
+        if (resolveEngine(this.options.engine) !== 'pele')
+            return false;
+        if (!sameOptions(withoutRestyleKeys(this.options), this.renderedOptions))
+            return false;
+        const mode = resolveMode(this.options.mode ?? 'auto');
+        const preset = resolvePreset(this.options.preset);
+        const container = this.container;
+        container.classList.remove(`mermaid-preset-${this.renderedPreset}`);
+        container.classList.add(`mermaid-preset-${preset}`);
+        container.dataset.mermaidPreset = preset;
+        container.dataset.mermaidMode = mode;
+        this.renderedMode = mode;
+        this.renderedPreset = preset;
+        this.paintPele(container, mode, preset);
+        return true;
+    }
     scheduleEntrance(svg, graph, diagramHost) {
         if (this.options.entrance === false)
             return;

package/dist/svg.d.ts

@@ -1,9 +1,11 @@
-import type { MermaidSvgPostProcessorConfig } from './types.js';
+import type { MermaidEngine, MermaidSvgPostProcessorConfig } from './types.js';
 export declare function normalizeMermaidSvgViewBox(svg: SVGSVGElement, padding?: number): void;
 /** Gives an SVG that Mermaid left without a viewBox one from its content, so it can be fitted and scaled. */
 export declare function ensureSvgViewBox(svg: SVGSVGElement, padding?: number): void;
 /**
- * Adds scoped semantic classes to Mermaid output. Non-SVG input is returned
- * unchanged so unrelated application SVGs can never be affected.
+ * Adds scoped semantic classes to Mermaid or Pele output. Non-SVG input is returned
+ * unchanged so unrelated application SVGs can never be affected. Pele output gets only the
+ * engine-neutral steps: Mermaid's node, cluster and edge classes, gradients and shadows are skipped,
+ * because they target Mermaid's markup.
  */
-export declare function postProcessMermaidSvg(svg: string, options?: MermaidSvgPostProcessorConfig): string;
+export declare function postProcessMermaidSvg(svg: string, options?: MermaidSvgPostProcessorConfig, engine?: MermaidEngine): string;

package/dist/svg.js

@@ -23,10 +23,12 @@ export function ensureSvgViewBox(svg, padding = 8) {
     svg.setAttribute('viewBox', `${bounds.x - padding} ${bounds.y - padding} ${bounds.width + padding * 2} ${bounds.height + padding * 2}`);
 }
 /**
- * Adds scoped semantic classes to Mermaid output. Non-SVG input is returned
- * unchanged so unrelated application SVGs can never be affected.
+ * Adds scoped semantic classes to Mermaid or Pele output. Non-SVG input is returned
+ * unchanged so unrelated application SVGs can never be affected. Pele output gets only the
+ * engine-neutral steps: Mermaid's node, cluster and edge classes, gradients and shadows are skipped,
+ * because they target Mermaid's markup.
  */
-export function postProcessMermaidSvg(svg, options = {}) {
+export function postProcessMermaidSvg(svg, options = {}, engine = 'mermaid') {
     if (typeof DOMParser === 'undefined')
         return svg;
     // C4 diagrams use `xlink:href` on their icons without declaring the prefix, which an XML parser rejects.
@@ -51,6 +53,26 @@ export function postProcessMermaidSvg(svg, options = {}) {
         else
             root.removeAttribute('style');
     }
+    if (engine === 'pele') {
+        // Pele's root carries a fixed width and height; the viewBox keeps the proportions, so both attributes go.
+        // The origin marker lets graph.ts choose Pele's geometry adapters for this SVG.
+        root.setAttribute('data-mermaid-engine', 'pele');
+        const pele = root.getAttribute('aria-roledescription');
+        if (pele)
+            root.setAttribute('data-mermaid-type', pele);
+        if (!root.getAttribute('viewBox')) {
+            root.setAttribute('viewBox', `0 0 ${root.getAttribute('width') ?? 0} ${root.getAttribute('height') ?? 0}`);
+        }
+        root.removeAttribute('height');
+        root.setAttribute('width', '100%');
+        // The neutral node class lets hover, pinning and keyboard focus find Pele nodes. Core emphasis stays Mermaid's.
+        document.querySelectorAll('g.pele-node').forEach((node) => node.classList.add('mermaid-node'));
+        document.querySelectorAll('text, foreignObject').forEach((label) => {
+            label.classList.add('mermaid-label');
+            label.setAttribute('aria-hidden', 'true');
+        });
+        return new XMLSerializer().serializeToString(root);
+    }
     root.setAttribute('width', '100%');
     document.querySelectorAll('.node').forEach((node, index) => {
         node.classList.add('mermaid-node');

package/dist/theme.d.ts

@@ -1,4 +1,6 @@
 import type { MermaidConfig } from 'mermaid';
+import { ARCHIFY_DARK_SERIES, ARCHIFY_LIGHT_SERIES, DEFAULT_DARK_SERIES, DEFAULT_LIGHT_SERIES } from './palette.js';
+export { ARCHIFY_DARK_SERIES, ARCHIFY_LIGHT_SERIES, DEFAULT_DARK_SERIES, DEFAULT_LIGHT_SERIES };
 import type { MermaidLayoutConfig, MermaidPreset, MermaidSemanticTheme, MermaidThemeMode, MermaidTokenRole, MermaidTokens } from './types.js';
 export interface MermaidThemeOptions {
     /** Custom property names for the theme roles. Unset roles read `--hagilight-mermaid-*`. */
@@ -10,6 +12,8 @@ export declare const MERMAID_LAYOUT_DEFAULTS: MermaidLayoutConfig;
 /** Unknown names select the default preset, so a stale stored value never breaks rendering. */
 export declare function resolvePreset(value: unknown): MermaidPreset;
 export declare function getContrastRatio(foreground: string, background: string): number;
+/** Resolves the site tokens for a mode into the semantic theme. Shared by Mermaid and Pele. */
+export declare function buildTheme(mode: MermaidThemeMode, tokens: MermaidTokens): MermaidSemanticTheme;
 export declare function getMermaidSemanticTheme(mode: MermaidThemeMode, preset?: MermaidPreset, options?: MermaidThemeOptions): MermaidSemanticTheme;
 /**
  * Builds the Mermaid configuration for a mode and preset. Configurations are reused while the

package/dist/theme.js

@@ -1,4 +1,6 @@
 import { ARCHIFY_DARK_SERIES, ARCHIFY_LIGHT_SERIES, DEFAULT_DARK_SERIES, DEFAULT_LIGHT_SERIES, buildSeriesVariables, } from './palette.js';
+// Shared with the Pele mapping (pele-theme.ts): the preset palettes are read from here, not copied.
+export { ARCHIFY_DARK_SERIES, ARCHIFY_LIGHT_SERIES, DEFAULT_DARK_SERIES, DEFAULT_LIGHT_SERIES };
 /** Custom properties read for each role when a site does not map its own. */
 export const TOKEN_PROPERTIES = {
     background: '--hagilight-mermaid-background',
@@ -140,7 +142,8 @@ export function getContrastRatio(foreground, background) {
     const darker = Math.min(foregroundLuminance, backgroundLuminance);
     return (lighter + 0.05) / (darker + 0.05);
 }
-function buildTheme(mode, tokens) {
+/** Resolves the site tokens for a mode into the semantic theme. Shared by Mermaid and Pele. */
+export function buildTheme(mode, tokens) {
     const fallback = mode === 'dark' ? DARK_THEME : LIGHT_THEME;
     const read = (role) => readCssToken(tokens[role] ?? TOKEN_PROPERTIES[role], fallback[role]);
     const background = read('background');

package/dist/types.d.ts

@@ -5,6 +5,35 @@ export type MermaidMode = 'light' | 'dark' | 'auto';
 export type MermaidThemeMode = 'light' | 'dark';
 /** Appearance preset. `archify` uses fixed palettes and its own stylesheet. */
 export type MermaidPreset = 'default' | 'archify';
+/** Diagram renderer. `mermaid` is the default; `pele` is the optional Pele engine (`pele` must be installed). */
+export type MermaidEngine = 'mermaid' | 'pele';
+/**
+ * Shape of the `pele` module this package calls. Declared here instead of imported, because `pele` is an
+ * optional peer and its types must not be required when a site never selects it.
+ */
+export interface PeleRenderResult {
+    svg: string;
+    width: number;
+    height: number;
+    /** Pele's diagram type, for example `flowchart` or `pie`. */
+    type: string;
+    mermaidType: string;
+}
+export interface PeleModule {
+    render: (source: string) => PeleRenderResult;
+}
+/**
+ * Shape of a `PeleError`, recognized by its fields because the class itself is only reachable after `pele`
+ * loads. `line` and `column` are 1-based; Pele reports 0 when it could not locate the error.
+ */
+export interface PeleErrorShape extends Error {
+    code: string;
+    line?: number;
+    column?: number;
+    type?: string | null;
+    mermaidType?: string | null;
+    snippet?: string;
+}
 /** Semantic roles a site color can map to. */
 export type MermaidTokenRole = 'background' | 'foreground' | 'primary' | 'accent' | 'primaryForeground';
 /** Maps each role to the custom property a site defines, for example `{ background: '--background' }`. */
@@ -19,6 +48,8 @@ export interface MermaidLabels {
     renderingErrorPrefix: string;
     noValidDiagram: string;
     unknownDiagramType: string;
+    /** Shown above a diagram of a type the Pele engine draws in a simplified way. */
+    peleDegradedNotice: string;
     diagramLabel: string;
     replay: string;
     /** Opens the enlarged viewer. */
@@ -154,8 +185,15 @@ export interface MermaidRenderOptions {
      * Defaults to `width`.
      */
     fit?: 'width' | 'contain';
+    /**
+     * Diagram renderer. Resolved from this option, then the choice stored in this browser by
+     * `writeStoredEngine`, then `mermaid`. An unrecognized value is ignored. Explicit `mermaid` outranks storage.
+     */
+    engine?: MermaidEngine;
     /** Supplies the `mermaid` module. Defaults to a dynamic import of `mermaid`. */
     loadMermaid?: () => Promise<MermaidModule>;
+    /** Supplies the `pele` module when the Pele engine renders. Defaults to a dynamic import of `pele`. */
+    peleLoader?: () => Promise<PeleModule>;
     /** Extra class names for the diagram container. */
     className?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hagicode/hagilight-mermaid",
-  "version": "0.20.1-dev.193.1.fb8173e",
+  "version": "0.20.1-dev.195.1.06f4ade",
   "type": "module",
   "description": "Framework-agnostic Mermaid rendering with the HagiCode look: themes, presets, entrance reveal and path tracing for Astro, Starlight and Docusaurus sites",
   "repository": {
@@ -59,7 +59,13 @@
     "dist/**/*.d.ts"
   ],
   "peerDependencies": {
-    "mermaid": "^11"
+    "mermaid": "^11",
+    "pele": "^1.13.0"
+  },
+  "peerDependenciesMeta": {
+    "pele": {
+      "optional": true
+    }
   },
   "keywords": [
     "hagicode",

package/styles.css

@@ -749,6 +749,16 @@
   line-height: 1.5;
 }
 
+.mermaid-container .mermaid-engine-notice {
+  margin: 0 0 8px;
+  padding: 8px 12px;
+  border: 1px dashed var(--hagilight-mermaid-muted-ink, #64748b);
+  border-radius: 6px;
+  color: var(--hagilight-mermaid-muted-ink, #64748b);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
 .mermaid-container .mermaid-error-message {
   margin: 0 0 12px 0;
   font-size: 0.875rem;