@beehexa/vueflow-tokens 2611.5.4 → 2611.6.1

package/README.md

@@ -58,11 +58,15 @@ glass/gradients, or override core controls in each consumer.
 Preserve graph IDs, stored coordinates and relationship direction on theme changes.
 Exports must capture the current graph surface/font rather than force white/system fonts.
 
-Ordinary nodes, MiniMap cards and Controls use `radius.100` (8 px). Controls
-round exposed corners without clipping focus, and MiniMap fills clip.
-Connector logos retain nested `radius.075` (6 px). Decision/loop nodes and graph
-handles keep their circular geometry; `FLOW_EDGE.radius` remains edge-path geometry.
-Consumer-owned inspector cards and controls/toolbars use `--bh-radius-100`; dialogs/drawers use `radius.150` (12 px).
+Ordinary nodes, MiniMap cards and outer Controls/dock frames use `radius.100`
+(8px). Individual compact control Buttons and menu items retain `radius.050` (4px);
+floating zoom-menu surfaces use `radius.overlay` (8px), independently of those items.
+MiniMap fills clip; Controls retain exposed focus rings. Native legend popovers
+keep `radius.100`, while the native keyboard-shortcuts Dialog uses `radius.150`
+(12px), independently of its control Buttons. Connector logos retain nested
+`radius.075` (6px). Decision/loop nodes and graph handles keep their circular
+geometry; `FLOW_EDGE.radius` remains edge-path geometry. Consumer-owned inspector
+Cards use `radius.100`; dialogs/drawers use `radius.150`.
 
 Bind `data-bh-high-contrast="true"` on the actual `bh-vue-flow` host when the user's
 high-contrast setting is enabled. Native node/edge/path, graph buttons and custom
@@ -86,7 +90,7 @@ Tags in the Ant Design Vue family. Category labels are not execution status.
 Resting handles use the neutral icon role, not keyboard-focus color. TaskFlow-style
 graph fullscreen uses an isolated local stacking context at `z-index.modal` (400), allowing
 global inspectors above it. Child chrome may use private z10/z15 within that context,
-not global1001/1002. This is not an editor takeover at `z-index.fullscreen` (450).
+not global1001/1002. Editor takeovers use the same `z-index.modal` layer.
 
 ## Build and validation
 

package/dist/styles.css

@@ -215,7 +215,6 @@
   --wf-node-muted: var(--bh-diagram-node-desc);
   --wf-node-border: var(--bh-diagram-node-border);
   --wf-node-radius: var(--bh-radius-100);
-  --wf-node-selected-border: var(--bh-diagram-node-border);
   --wf-node-ring: var(--bh-diagram-selection-ring);
   --wf-node-shape-shadow: none;
   --wf-node-shape-selected: none;
@@ -229,6 +228,53 @@
   --wf-node-kind-bg: var(--bh-diagram-node-fill);
   --wf-node-kind-fg: var(--bh-diagram-node-desc);
 }
+/* Opt-in graph contrast uses theme-resolved semantic ink, not a fixed light-mode
+   palette. Preserve selection/failure colours and native edge/arrow pairing. */
+.bh-workflow-canvas[data-bh-contrast='high'] {
+  --wf-focus-outline: var(--bh-border-width-accent) solid var(--bh-color-border-focus);
+}
+.bh-workflow-canvas[data-bh-contrast='high'] .wf-canvas {
+  --wf-edge: var(--bh-color-text);
+  --wf-label-fg: var(--bh-color-text);
+  --wf-label-border: var(--bh-color-text);
+  --wf-node-border: var(--bh-color-text);
+  --wf-node-muted: var(--bh-color-text);
+  --wf-node-kind-fg: var(--bh-color-text);
+  --wf-tone-fg: var(--bh-color-text);
+}
+/* Execution belongs to the node outline/content; the independent outer ring
+   continues to carry selection, hover and keyboard focus. */
+.bh-workflow-canvas .wf-node {
+  --wf-node-selected-border: var(--wf-node-border);
+}
+.bh-workflow-canvas .wf-node[data-execution-state='ranOk'] {
+  --wf-node-border: var(--bh-diagram-state-ran-ok);
+  --wf-node-bg: var(--bh-diagram-ran-ok-fill);
+  --wf-node-state-ink: var(--bh-diagram-state-ran-ok);
+}
+.bh-workflow-canvas .wf-node[data-execution-state='ranFailed'] {
+  --wf-node-border: var(--bh-diagram-fail-stroke);
+  --wf-node-bg: var(--bh-diagram-fail-fill);
+  --wf-node-fg: var(--bh-diagram-fail-title);
+  --wf-node-muted: var(--bh-diagram-fail-desc);
+}
+.bh-workflow-canvas .wf-node[data-execution-state='neverReached'] {
+  --wf-node-border: var(--bh-diagram-unreached-stroke);
+  --wf-node-bg: var(--bh-diagram-unreached-fill);
+  --wf-node-fg: var(--bh-diagram-unreached-title);
+  --wf-node-muted: var(--bh-diagram-unreached-desc);
+}
+.bh-workflow-canvas .wf-node[data-execution-state='branchNotTaken'] {
+  --wf-node-border: var(--bh-diagram-nottaken-stroke);
+  --wf-node-bg: var(--bh-diagram-nottaken-fill);
+  --wf-node-fg: var(--bh-diagram-nottaken-title);
+  --wf-node-muted: var(--bh-diagram-nottaken-desc);
+}
+.bh-workflow-canvas .wf-node[data-execution-state='branchNotTaken'] .wf-node__outline {
+  stroke-dasharray: 6 3;
+}
+.bh-workflow-canvas .wf-node__execution { color: var(--wf-node-state-ink, var(--wf-node-fg)); }
+.bh-workflow-canvas .wf-node__body { align-items: flex-start; }
 .bh-workflow-canvas .wf-node__badge {
   width: var(--bh-diagram-tile-size);
   height: var(--bh-diagram-tile-size);
@@ -241,11 +287,23 @@
   padding: 0;
   background: transparent;
 }
+/* The native minimum is not enough for a Source title, glyph and run marker.
+   Grow to their intrinsic width; the native maximum still wraps long titles. */
+.bh-workflow-canvas .wf-node.wf-node--shape-stadium { width: max-content; }
 .bh-workflow-canvas .wf-node__title {
   white-space: normal;
   overflow-wrap: anywhere;
+  font: var(--bh-font-heading-xsmall);
 }
 .bh-workflow-canvas .wf-node__head { height: auto; }
+.bh-workflow-canvas .wf-node__subtitle {
+  font: var(--bh-font-body-default);
+  min-height: 0;
+}
+.bh-workflow-canvas :is(.wf-node__kind, .wf-node__caption, .wf-node__indicators) {
+  font: var(--bh-font-body-small);
+}
+.bh-workflow-canvas .wf-node__foot { height: auto; }
 .bh-workflow-canvas .wf-node__logos { padding-block-start: var(--bh-space-050); }
 /* Native node image geometry has no independent aspect-ratio input. */
 .bh-workflow-canvas .wf-node__logos > img {
@@ -273,6 +331,16 @@
   padding-left: var(--bh-space-050);
   border-left-width: var(--bh-border-width-default);
 }
+/* Floating menu surfaces use the overlay role, independently of compact controls. */
+.bh-workflow-canvas .wf-dock__menu {
+  border-radius: var(--bh-radius-overlay);
+}
+.bh-workflow-canvas :is(.vue-flow__minimap, .wf-legend__box) {
+  border-radius: var(--bh-radius-100);
+}
+.bh-workflow-canvas .wf-shortcuts__dialog {
+  border-radius: var(--bh-radius-150);
+}
 .bh-workflow-canvas .wf-dock__btn {
   gap: var(--bh-space-050);
   padding-inline: var(--bh-space-075);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beehexa/vueflow-tokens",
-  "version": "2611.5.4",
+  "version": "2611.6.1",
   "description": "Source-backed Beehexa theme, semantic categories and geometry for VueFlow 1",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@beehexa/design-tokens": "2611.5.4"
+    "@beehexa/design-tokens": "2611.6.1"
   },
   "peerDependencies": {
     "@vue-flow/core": "^1.0.0",