@beehexa/mermaid-tokens 2611.3.4 → 2611.5.2

package/README.md

@@ -24,6 +24,68 @@ fonts/CSS while preserving topology, definition state styles and unrelated layou
 directives. Embedded SVG CSS includes opaque edge-label roles and source `"cv05",
 "cv08"` features alongside complete font shorthands.
 
+For native compact worker flows, keep the native `compactFlowMermaid` output and
+`flowStylesheet()` from `@beehexa/hexasync-template-model`. Make that public sheet
+available **before Mermaid measures labels**, and include it in the resulting SVG
+for standalone export. Add `hx-flow` to the SVG root and apply
+`workerFlowSvgStyle(theme)` as its inline style. The native sheet supplies card
+geometry, family masks and typed run-state line-work; this adapter supplies literal
+source paint, neutral category tile/glyph pairs and the canonical tile radius.
+Do not copy its emitter, mutate label DOM, or infer execution from missing evidence.
+
+`mermaidEvidenceStyles(log, edges, { dark, locale })` consumes actual compact node
+IDs and edge indices. Reached and unfinished log cues remain separate from typed
+failure. It emits literal Source colours: Mermaid 12 rejects CSS functions in this
+DSL, and an `!important` suffix corrupts the native coloured-marker attributes.
+After native rendering/sanitization, call `preserveMermaidDefinitionPaint(svg)`:
+it promotes the actual native edge declarations and coloured-marker attributes
+above the worker sheet's important neutral rule, without changing IDs or geometry.
+
+Graph controls float **inside** `.bh-diagram-viewport`, default lower-left, as
+`.bh-diagram-dock` on a real native Space with `bh-control-group`
+`data-bh-variant="dock"`. No external toolbar row. The viewport uses the same
+`diagram.canvas`/`grid` and18px/1.2px native grid geometry as Data Flow.
+Bind camera x/y/scale through `--bh-canvas-grid-x`, `--bh-canvas-grid-y`,
+`--bh-canvas-grid-scale`; keep the dock outside the transformed drawing and
+captured SVG host. Source CSS keeps the live SVG transparent, and the default
+`diagram.group-fill` keeps native stage bodies from hiding the grid. Export
+retains its snapshotted opaque Source canvas and native evidence paint.
+
+The installed native compact-label API does not expose a rich-label callback.
+Its wrapped title/subtitle cannot be independently styled in full: the native
+sheet uses `p::first-line`. Full rich-title parity therefore requires an upstream
+public anatomy/label capability; a downstream first-line workaround is not one.
+
+For interactive preview nodes, add `bh-mermaid-interactive-node` to the actual SVG
+node group and bind real selection via `aria-selected` (supported selectable roles)
+or `aria-pressed` (toggle buttons). The embedded stylesheet supplies
+pointer affordance and an independent source outline on hover, keyboard focus and
+selection, without replacing definition-owned fill/stroke. Preserve role, tabindex,
+keyboard handlers and disclosure/selection distinctions. `bh-mermaid-category-glyph`
+on an authored icon path supplies the neutral glyph stroke, source 1px width and
+round joins/caps; applications retain the path and transform geometry.
+
+Import `@beehexa/mermaid-tokens/css` once for outer HTML evidence/viewport roles.
+`data-bh-diagram="canvas|code|key|value|description|badge"` binds the matching
+diagram roles; badge includes the neutral repeat-count frame and 4px label radius.
+Typography and structural layout stay separate. Embedded `foreignObject` text
+uses `-webkit-text-fill-color: currentcolor` so PNG cloning preserves resolved
+node-label colour instead of inheriting a competing host text-fill.
+`bh-diagram-viewport` enables real pan gesture affordances (grab, touch-action,
+user-select); bind `data-bh-dragging="true"` only while dragging. Rich interactive
+nodes with separately decorated ring geometry use `data-bh-clickable="true"` and
+`data-bh-ring="hover"` on that ring. The embedded CSS owns hover visibility; the
+application retains selection/disclosure state and the actual SVG ring geometry.
+Ordinal evidence-navigation buttons use `data-bh-diagram="occurrence"` and
+`aria-current="true"` for the current occurrence underline, preserving native
+button keyboard focus and action semantics.
+
+SVG node/cluster/actor/note rectangles, rich cards, category tiles and small label
+surfaces use `radius.100` (8 px) in live drawings and exports. True circles,
+diamonds and paths keep graph geometry. Custom inspector cards and viewport
+controls/toolbars use `--bh-radius-100`; dialogs/drawers use `radius.150` (12 px).
+The complete source Radius rule owns the role scale; `radius.200` has no current component role.
+
 Resolve context on each render and re-render on theme/locale changes. A completed
 step is neutral evidence, not a verified successful outcome; failure, never-reached,
 not-taken, repetition and selection retain separate semantics and non-colour cues.
@@ -36,6 +98,6 @@ Build with the producer's adapter build orchestration. Until release approval,
 consume through explicit local package references only; registry-only consumer CI
 must never build a sibling checkout. Release managers stamp actual versions.
 
-`build-adapters.mjs` checks strict NodeNext source; packed-consumer checks cover
+`build-runtime-packages.mjs` checks strict NodeNext source; packed-consumer checks cover
 typed exports with strict TypeScript and `skipLibCheck` at the Mermaid vendor
 declaration boundary. Compilation does not prove actual render/export behavior.

package/dist/css.d.ts

@@ -0,0 +1,2 @@
+// CSS is imported for side effects only.
+export {};

package/dist/index.d.ts

@@ -5,11 +5,24 @@ export interface MermaidThemeOptions {
     locale?: 'en' | 'vi';
 }
 /** Descriptive execution and inspector roles, authored in tokens/diagram.json. */
-export declare const CANVAS_COLOR_ROLES: readonly ["canvas", "node-fill", "node-border", "node-title", "node-desc", "tile-bg", "tile-glyph", "state-ran-ok", "ran-ok-fill", "fail-stroke", "fail-fill", "fail-title", "fail-desc", "unreached-fill", "unreached-stroke", "unreached-title", "unreached-desc", "nottaken-stroke", "nottaken-fill", "nottaken-title", "nottaken-desc", "badge-bg", "badge-text", "badge-border", "edge", "edge-label-text", "edge-label-bg", "panel-bg", "panel-border", "code-bg", "code-key", "code-value"];
+export declare const CANVAS_COLOR_ROLES: readonly ["canvas", "grid", "group-fill", "node-fill", "node-border", "node-title", "node-desc", "tile-bg", "tile-glyph", "state-ran-ok", "ran-ok-fill", "log-reached", "log-unfinished", "fail-stroke", "fail-fill", "fail-title", "fail-desc", "unreached-fill", "unreached-stroke", "unreached-title", "unreached-desc", "nottaken-stroke", "nottaken-fill", "nottaken-title", "nottaken-desc", "badge-bg", "badge-text", "badge-border", "edge", "edge-label-text", "edge-label-bg", "panel-bg", "panel-border", "code-bg", "code-key", "code-value"];
 export type CanvasColorRole = (typeof CANVAS_COLOR_ROLES)[number];
 export type CanvasColorKey = CanvasColorRole | `${CanvasColorRole}-dark`;
 /** A literal colour for definition/SVG APIs that cannot resolve CSS variables. */
 export declare function canvasRoleColor(role: CanvasColorRole, options?: MermaidThemeOptions): string;
+/** A log proves reachability or an unfinished interval, not a typed execution outcome. */
+export type MermaidLogReading = 'reached' | 'unfinished';
+/** A failed edge cue requires typed failure evidence, never an unfinished log interval. */
+export type MermaidEdgeReading = MermaidLogReading | 'failed';
+/** Native Mermaid statements keyed by public compact identity, with explicit literal theme paint. */
+export declare function mermaidEvidenceStyles(nodes: ReadonlyMap<string, MermaidLogReading>, edges: ReadonlyMap<number, MermaidEdgeReading>, options?: MermaidThemeOptions): string;
+/**
+ * Preserve native definition paint against the worker sheet's neutral !important rules.
+ * Mermaid 12 clones coloured arrowheads from the literal edge stroke; an !important
+ * suffix in its DSL becomes an invalid marker colour attribute. Promote only the
+ * actual rendered declarations/attributes, without rebuilding IDs, markers or geometry.
+ */
+export declare function preserveMermaidDefinitionPaint(svg: SVGSVGElement): void;
 /** Immutable source-backed light/dark pairs for non-reactive definition boundaries. */
 export declare const CANVAS_PALETTE: Readonly<{
     colors: Readonly<Record<CanvasColorKey, string>>;
@@ -35,5 +48,11 @@ export interface CanvasTheme {
 }
 /** Resolve a fresh theme for one render/export; no shared mutable Mermaid configuration. */
 export declare function createCanvasTheme(options?: MermaidThemeOptions): CanvasTheme;
+/**
+ * Inline variables for the native compact-flow SVG host. Native flowStylesheet()
+ * owns card geometry/icons/state line-work; this adapter owns semantic paint.
+ * Inline literals survive standalone SVG export without an application ancestor.
+ */
+export declare function workerFlowSvgStyle(theme: CanvasTheme): string;
 /** Configure every Mermaid rendering surface from the same source roles. */
 export declare function createMermaidConfig(options?: MermaidThemeOptions): MermaidConfig;

package/dist/index.js

@@ -1,8 +1,8 @@
 import { tokens } from '@beehexa/design-tokens';
 /** Descriptive execution and inspector roles, authored in tokens/diagram.json. */
 export const CANVAS_COLOR_ROLES = Object.freeze([
-    'canvas', 'node-fill', 'node-border', 'node-title', 'node-desc', 'tile-bg', 'tile-glyph',
-    'state-ran-ok', 'ran-ok-fill', 'fail-stroke', 'fail-fill', 'fail-title', 'fail-desc',
+    'canvas', 'grid', 'group-fill', 'node-fill', 'node-border', 'node-title', 'node-desc', 'tile-bg', 'tile-glyph',
+    'state-ran-ok', 'ran-ok-fill', 'log-reached', 'log-unfinished', 'fail-stroke', 'fail-fill', 'fail-title', 'fail-desc',
     'unreached-fill', 'unreached-stroke', 'unreached-title', 'unreached-desc',
     'nottaken-stroke', 'nottaken-fill', 'nottaken-title', 'nottaken-desc',
     'badge-bg', 'badge-text', 'badge-border', 'edge', 'edge-label-text', 'edge-label-bg',
@@ -24,6 +24,46 @@ function pixels(input) {
 export function canvasRoleColor(role, options = {}) {
     return value(`diagram.${role}`, options);
 }
+/** Native Mermaid statements keyed by public compact identity, with explicit literal theme paint. */
+export function mermaidEvidenceStyles(nodes, edges, options = {}) {
+    const reached = [];
+    const unfinished = [];
+    const lines = [];
+    for (const [id, reading] of nodes) {
+        (reading === 'unfinished' ? unfinished : reached).push(id);
+    }
+    if (reached.length)
+        lines.push(`class ${reached.join(',')} bh-log-reached`);
+    if (unfinished.length)
+        lines.push(`class ${unfinished.join(',')} bh-log-unfinished`);
+    for (const [index, reading] of edges) {
+        const role = reading === 'failed' ? 'fail-stroke' : reading === 'unfinished' ? 'log-unfinished' : 'log-reached';
+        const dash = reading === 'unfinished' ? ',stroke-dasharray:4 3' : '';
+        lines.push(`linkStyle ${index} stroke:${canvasRoleColor(role, options)},stroke-width:${pixels(value('border.width.focused', options))}${dash}`);
+    }
+    return lines.join('\n');
+}
+/**
+ * Preserve native definition paint against the worker sheet's neutral !important rules.
+ * Mermaid 12 clones coloured arrowheads from the literal edge stroke; an !important
+ * suffix in its DSL becomes an invalid marker colour attribute. Promote only the
+ * actual rendered declarations/attributes, without rebuilding IDs, markers or geometry.
+ */
+export function preserveMermaidDefinitionPaint(svg) {
+    for (const edge of svg.querySelectorAll('.flowchart-link')) {
+        const stroke = edge.style.getPropertyValue('stroke');
+        if (stroke)
+            edge.style.setProperty('stroke', stroke, 'important');
+    }
+    const properties = ['stroke', 'fill'];
+    for (const marker of svg.querySelectorAll('.marker [stroke], .marker [fill]')) {
+        for (const property of properties) {
+            const paint = marker.getAttribute(property);
+            if (paint)
+                marker.style.setProperty(property, paint, 'important');
+        }
+    }
+}
 /** Immutable source-backed light/dark pairs for non-reactive definition boundaries. */
 export const CANVAS_PALETTE = Object.freeze({
     colors: Object.freeze(Object.fromEntries(CANVAS_COLOR_ROLES.flatMap((role) => [
@@ -59,6 +99,32 @@ export function createCanvasTheme(options = {}) {
         locale: options.locale ?? 'en'
     };
 }
+/**
+ * Inline variables for the native compact-flow SVG host. Native flowStylesheet()
+ * owns card geometry/icons/state line-work; this adapter owns semantic paint.
+ * Inline literals survive standalone SVG export without an application ancestor.
+ */
+export function workerFlowSvgStyle(theme) {
+    const c = theme.colors;
+    return `
+    background-color:transparent;
+    --hx-node-fill:${c['node-fill']};
+    --hx-node-border:${c['node-border']};
+    --hx-node-title:${c['node-title']};
+    --hx-node-subtitle:${c['node-desc']};
+    --hx-node-tile:${c['tile-bg']};
+    --hx-node-glyph:${c['tile-glyph']};
+    --hx-edge:${c.edge};
+    --hx-plate:${c['edge-label-bg']};
+    --hx-run-ok:${c['state-ran-ok']};
+    --hx-run-failed:${c['fail-stroke']};
+    --hx-run-failed-fill:${c['fail-fill']};
+    --hx-run-muted:${c['unreached-stroke']};
+    --hx-run-declined:${c['nottaken-stroke']};
+    --hx-log-reached:${c['log-reached']};
+    --hx-log-unfinished:${c['log-unfinished']};
+  `;
+}
 /** Configure every Mermaid rendering surface from the same source roles. */
 export function createMermaidConfig(options = {}) {
     const theme = createCanvasTheme(options);
@@ -92,7 +158,7 @@ export function createMermaidConfig(options = {}) {
             lineColor: c.edge,
             textColor: c['node-title'],
             edgeLabelBackground: c['edge-label-bg'],
-            clusterBkg: c.canvas,
+            clusterBkg: c['group-fill'],
             clusterBorder: c.edge,
             titleColor: c['node-title'],
             noteBkgColor: c['panel-bg'],
@@ -111,6 +177,64 @@ export function createMermaidConfig(options = {}) {
       }
       /* Mermaid's generic span paint must not erase definition-owned state text. */
       .nodeLabel * { color: inherit !important; }
+      /* HTML-to-image clones may inherit host text-fill paint independently of color. */
+      foreignObject * { -webkit-text-fill-color: currentcolor; }
+      /* Native compact-flow masks keep native size/path; source roles own paint.
+         Native tiles hardcode 9px, so the adapter supplies the canonical 8px role. */
+      g.node[class*="ic-"] .nodeLabel::before {
+        background: var(--hx-node-tile);
+        box-shadow: none;
+        border-radius: ${pixels(value('radius.100', options))};
+      }
+      g.node[class*="ic-"] .nodeLabel::after {
+        background: var(--hx-node-glyph);
+      }
+      /* Log-only readings never assign a typed native run state. */
+      .node.bh-log-reached {
+        --hx-node-border: var(--hx-log-reached);
+        --hx-accent: var(--hx-log-reached);
+      }
+      .node.bh-log-unfinished {
+        --hx-node-border: var(--hx-log-unfinished);
+        --hx-node-fill: ${c['node-fill']};
+        --hx-node-title: ${c['node-title']};
+        --hx-node-subtitle: ${c['node-desc']};
+        --hx-accent: var(--hx-log-unfinished);
+      }
+      g.node:is(.rs-ranOk, .rs-ranFailed, .bh-log-reached, .bh-log-unfinished) > :is(rect, polygon, path),
+      g.node:is(.rs-ranOk, .rs-ranFailed, .bh-log-reached, .bh-log-unfinished) > g.label-container path {
+        stroke-width: ${pixels(value('border.width.focused', options))} !important;
+      }
+      g.node.bh-log-unfinished > :is(rect, polygon, path),
+      g.node.bh-log-unfinished > g.label-container path { stroke-dasharray: 4 3 !important; }
+      .node.rs-ranOk .nodeLabel p::before { content: "\\2713"; }
+      .node.rs-ranFailed .nodeLabel p::before { content: "\\26A0"; }
+      .node.bh-log-reached .nodeLabel p::before { content: "\\203A"; }
+      .node.bh-log-unfinished .nodeLabel p::before { content: "\\2026"; }
+      .node:is(.rs-ranOk, .rs-ranFailed, .bh-log-reached, .bh-log-unfinished) .nodeLabel p::before {
+        display: inline-block;
+        margin-inline-end: ${pixels(value('space.050', options))};
+      }
+      .node .bh-mermaid-category-glyph,
+      .bh-mermaid-category-glyph {
+        fill: none;
+        stroke: ${c['tile-glyph']};
+        stroke-width: ${pixels(value('border.width.default', options))};
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        vector-effect: non-scaling-stroke;
+      }
+      .bh-mermaid-interactive-node { cursor: pointer; outline: none; }
+      .bh-mermaid-interactive-node:hover,
+      .bh-mermaid-interactive-node:focus-visible,
+      .bh-mermaid-interactive-node[aria-selected='true'],
+      .bh-mermaid-interactive-node[aria-pressed='true'] {
+        outline: ${pixels(value('border.width.focused', options))} solid ${theme.selectionRing};
+        outline-offset: ${pixels(value('state.focus.offset', options))};
+      }
+      [data-bh-clickable='true'] { cursor: pointer; }
+      [data-bh-ring='hover'] { visibility: hidden; }
+      [data-bh-clickable='true']:hover [data-bh-ring='hover'] { visibility: visible; }
       .edgeLabel rect { opacity: 1; }
       .labelBkg { background-color: ${c['edge-label-bg']}; }
       .edgeLabel, .edgeLabel p, .edgeLabel span {
@@ -118,32 +242,14 @@ export function createMermaidConfig(options = {}) {
         color: ${c['edge-label-text']};
         pointer-events: none;
       }
-      .hx-node-card {
-        width: ${pixels(value('diagram.card-width', options))} !important;
-        min-width: ${pixels(value('diagram.card-width', options))} !important;
-        grid-template-columns: ${pixels(value('diagram.tile-size', options))} minmax(0, 1fr) !important;
-        column-gap: ${pixels(value('space.100', options))} !important;
-        font: ${theme.font} !important;
-        font-feature-settings: ${value('font.features', options)} !important;
-      }
-      .hx-node-card__title, .hx-node-card__title strong {
-        font: ${pixels(value('font.heading.xsmall', options))} !important;
-        font-feature-settings: ${value('font.features', options)} !important;
-      }
-      .hx-node-card__subtitle {
-        font: ${pixels(value('font.body.small', options))} !important;
-        font-feature-settings: ${value('font.features', options)} !important;
+      /* Rectangular nodes/cards and small label surfaces use the 8px role. */
+      .node rect, .cluster rect, .actor, .note {
+        rx: ${pixels(value('radius.100', options))} !important;
+        ry: ${pixels(value('radius.100', options))} !important;
       }
-      .hx-node-card__copy { row-gap: ${pixels(value('space.050', options))} !important; }
-      .hx-node-card__icon {
-        width: ${pixels(value('diagram.tile-size', options))} !important;
-        min-height: ${pixels(value('diagram.tile-size', options))} !important;
-        border-radius: ${pixels(value('radius.100', options))} !important;
-        background: ${c['tile-bg']} !important;
-        color: ${c['tile-glyph']} !important;
-        box-shadow: none !important;
-        font-size: ${pixels(value('diagram.glyph-size', options))} !important;
-        line-height: 1 !important;
+      .labelBox {
+        rx: ${pixels(value('radius.100', options))} !important;
+        ry: ${pixels(value('radius.100', options))} !important;
       }
     `,
         flowchart: { htmlLabels: true, curve: 'basis', padding: theme.nodePadding }

package/dist/styles.css

@@ -0,0 +1,54 @@
+/* Host/evidence roles complement the literal, export-safe stylesheet embedded in SVG. */
+[data-bh-diagram='canvas'] {
+  background: var(--bh-diagram-canvas);
+  color: var(--bh-diagram-node-title);
+}
+[data-bh-diagram='code'] {
+  background: var(--bh-diagram-code-bg);
+  color: var(--bh-diagram-code-value);
+}
+[data-bh-diagram='key'] { color: var(--bh-diagram-code-key); }
+[data-bh-diagram='value'] { color: var(--bh-diagram-code-value); }
+[data-bh-diagram='description'] { color: var(--bh-diagram-node-desc); }
+[data-bh-diagram='badge'] {
+  background: var(--bh-diagram-badge-bg);
+  color: var(--bh-diagram-badge-text);
+  border: var(--bh-border-width-default) solid var(--bh-diagram-badge-border);
+  border-radius: var(--bh-radius-050);
+}
+
+/* Opt in only on a host with real pan/zoom handlers; structure remains local. */
+.bh-diagram-viewport {
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+  position: relative;
+  background-color: var(--bh-diagram-canvas);
+  background-image: radial-gradient(circle, var(--bh-diagram-grid) calc(var(--bh-diagram-grid-dot) * var(--bh-canvas-grid-scale, 1)), transparent calc(var(--bh-diagram-grid-dot) * var(--bh-canvas-grid-scale, 1)));
+  background-size: calc(var(--bh-diagram-grid-gap) * var(--bh-canvas-grid-scale, 1)) calc(var(--bh-diagram-grid-gap) * var(--bh-canvas-grid-scale, 1));
+  background-position: var(--bh-canvas-grid-x, 0px) var(--bh-canvas-grid-y, 0px);
+}
+.bh-diagram-viewport[data-bh-dragging='true'] { cursor: grabbing; }
+.bh-diagram-viewport .bh-control-group { cursor: default; }
+
+/* The camera transforms only the drawing. Native controls float inside its viewport. */
+.bh-diagram-viewport > .bh-diagram-dock {
+  position: absolute;
+  inset-inline-start: var(--bh-space-200);
+  inset-block-end: var(--bh-space-200);
+  max-inline-size: calc(100% - 2 * var(--bh-space-200));
+  z-index: 1;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  cursor: default;
+  touch-action: auto;
+}
+/* Mermaid supplies an opaque root inline background; the viewport owns live grid paint.
+   Capture uses the separately snapshotted opaque Source canvas, never this UI dock. */
+.bh-diagram-viewport svg { background-color: transparent !important; }
+
+/* Ordinal evidence navigation: current occurrence is not a business status. */
+[data-bh-diagram='occurrence'][aria-current='true'] {
+  text-decoration: underline;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beehexa/mermaid-tokens",
-  "version": "2611.3.4",
+  "version": "2611.5.2",
   "description": "Beehexa source-backed Mermaid configuration and execution diagram roles",
   "repository": {
     "type": "git",
@@ -14,16 +14,22 @@
     "dist",
     "README.md"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./css": {
+      "types": "./dist/css.d.ts",
+      "default": "./dist/styles.css"
+    },
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@beehexa/design-tokens": "2611.3.4"
+    "@beehexa/design-tokens": "2611.5.2"
   },
   "peerDependencies": {
     "mermaid": "^12.0.0"
@@ -32,8 +38,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "node ../../scripts/build-adapters.mjs mermaid-tokens",
-    "check": "node ../../scripts/build-adapters.mjs mermaid-tokens --check",
+    "build": "node ../../scripts/build-runtime-packages.mjs mermaid-tokens",
+    "check": "node ../../scripts/build-runtime-packages.mjs mermaid-tokens --check",
     "prepack": "npm run build"
   },
   "engines": {