@beehexa/vueflow-tokens 2611.3.4 → 2611.5.3

package/README.md

@@ -36,16 +36,53 @@ host/dimension changes. The factory uses VueFlow 1's real `fitViewOnInit` option
 - `getNodeColor(type)`, `getEdgeColorPalette(category)`, `styleTargetEdge(edge, nodes)`:
   source-backed directed edge identity; target stroke and marker remain paired.
 - `FLOW_EDGE`, `FLOW_ICON`: numeric source values at VueFlow/icon API boundaries.
+- `getFlowCategoryStyles(type, part?)`: custom semantic content role binding;
+  `foreground` (default) sets category text, `border` sets border colour and
+  `background` sets the category surface.
+- `getFlowIconStyles(type, { size?, color?, disabled? })`: category-border glyphs
+  or separate `status-success|warning|error|info|loading` / `control-expand|collapse|help`
+  icon roles. Edge icon keys use `edge-dependency|edge-transformation`.
+  Sizes accept `small|medium|large` or a numeric API size; explicit colours must
+  already be source-resolved semantic roles.
+- `getFlowEdgeStyles(category, suppliedStyle?)`: SVG width, non-scaling stroke,
+  no-fill and static relation dashes. The supplied directed target stroke wins
+  over category fallback, preserving stroke/arrow identity.
 - Public option, category, dimension, node-state, style and theme interfaces are emitted
   in `dist/index.d.ts`; CSS has a typed `./css` export.
 
-Use semantic typography/spacing directly in custom content. Keep category labels and
-icons, selected outline, separate keyboard focus and readable error messages. Do not
-append hexadecimal alpha suffixes to CSS variables. Do not animate idle graph nodes,
-rotate category icons, add glass/gradients, or override core controls in each consumer.
+Use public source typography/content markers and graph presentation factories in
+custom semantic content. Keep category labels and icons, selected outline, separate
+keyboard focus and readable error messages. Do not append hexadecimal alpha suffixes
+to CSS variables. Do not animate idle graph nodes, rotate category icons, add
+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).
+
+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
+`role="button"` focus rings then use `border.width.accent` (4px), retaining the
+source focus colour and offset. The default is `border.width.focused` (2px).
+Bind `data-bh-large-text="true"` and `data-bh-increased-spacing="true"` on that
+same host for the existing user accessibility settings (1.125em node text;
+1.6 line-height / 0.02em letter-spacing). These are opt-in adaptations, not new
+default typography. `bh-flow-icon[data-bh-loading="true"]` animates only an
+actual loading glyph and respects reduced motion.
+`bh-flow-category-mark[data-bh-category="<FlowCategory>"]` is a labelled 6px
+circular relationship marker in the category's border role, never a status dot.
+
+For a native category Tag, bind the cached immutable result of
+`getFlowCategoryBadgeStyles(type)` to its public `style` prop and omit its
+`color` prop. This pairs category foreground, background and border; a frame/edge
+stroke from `getNodeColor(type)` is not a filled badge background. Both themes'
+small-text pairs are checked at WCAG AA 4.5:1 and demonstrated with real native
+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,
@@ -53,7 +90,7 @@ not global1001/1002. This is not an editor takeover at `z-index.fullscreen` (450
 
 ## Build and validation
 
-The shared `build-adapters.mjs` compiles strict NodeNext source and checks generated
+The shared `build-runtime-packages.mjs` compiles strict NodeNext source and checks generated
 output. Actual packed-consumer checks exercise exports/CSS with strict TypeScript and
 `skipLibCheck` at the upstream vendor-declaration boundary. Source version `0.0.0`
 stays private; only the authorized runner stamps real package/internal dependency versions.

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'vue';
-import { type FlowProps, type Node, type Edge } from '@vue-flow/core';
+import { type FlowProps, type Node, type Edge, type Styles } from '@vue-flow/core';
 export interface VueFlowThemeOptions {
     dark?: boolean;
     locale?: 'en' | 'vi';
@@ -72,6 +72,20 @@ export declare function getNodeColorPalette(category: FlowCategory): FlowNodePal
 export declare function getEdgeColorPalette(category: FlowEdgeCategory): FlowNodePalette;
 /** Unknown/custom node types retain the task category, matching VueFlow's default node. */
 export declare function getNodeColor(type: string): string;
+export type FlowCategoryPart = 'foreground' | 'border' | 'background';
+/** Apply a category role to custom semantic content without a consumer-owned recipe. */
+export declare function getFlowCategoryStyles(type: string, part?: FlowCategoryPart): CSSProperties;
+/** Paired native Tag paint; a category stroke is not an on-bold background. */
+export declare function getFlowCategoryBadgeStyles(type: string): Readonly<CSSProperties>;
+export interface FlowIconOptions {
+    size?: keyof typeof FLOW_ICON | number;
+    color?: string;
+    disabled?: boolean;
+}
+/** Category glyphs and operational/status glyphs retain distinct source roles. */
+export declare function getFlowIconStyles(type: string, options?: FlowIconOptions): CSSProperties;
+/** Directed target stroke wins over category fallback; dashes communicate relation kind. */
+export declare function getFlowEdgeStyles(category: FlowEdgeCategory, suppliedStyle?: CSSProperties): Styles;
 export declare const FLOW_VIEWPORT: {
     minZoom: number;
     maxZoom: number;
@@ -103,7 +117,7 @@ export interface FlowNodeState {
     selfDependency?: boolean;
 }
 export interface FlowNodeStyles {
-    container: CSSProperties;
+    container: Styles;
     content: CSSProperties;
     icon: CSSProperties;
     label: CSSProperties;
@@ -115,3 +129,5 @@ export interface FlowNodeStyles {
 }
 /** Custom content and layout share fixed source geometry, not viewport-dependent sizing. */
 export declare function getFlowNodeStyles(type: NodeType, state?: FlowNodeState): FlowNodeStyles;
+/** Minimal detail removes costly decoration, never semantic contrast or graph data. */
+export declare function getFlowDetailStyles(level: 'minimal' | 'basic' | 'detailed', suppliedStyle: Styles): Styles;

package/dist/index.js

@@ -50,7 +50,7 @@ export const FLOW_ICON = {
     large: numberToken('size.icon.large')
 };
 const nodeCategories = {
-    task: 'task', task_data: 'task', profile: 'task', task_dependency: 'dependency',
+    task: 'task', task_data: 'task', profile: 'task', dependency: 'dependency', task_dependency: 'dependency',
     task_transformation: 'transformation', transformation: 'transformation',
     transformationGroup: 'transformation', validation: 'validation',
     validationGroup: 'validation', push_step: 'pushStep', pushStep: 'pushStep',
@@ -79,6 +79,54 @@ export function getEdgeColorPalette(category) {
 export function getNodeColor(type) {
     return palettes[nodeCategories[type] ?? 'task'].border;
 }
+/** Apply a category role to custom semantic content without a consumer-owned recipe. */
+export function getFlowCategoryStyles(type, part = 'foreground') {
+    const palette = palettes[nodeCategories[type] ?? 'task'];
+    if (part === 'border')
+        return { borderColor: palette.border };
+    if (part === 'background')
+        return { backgroundColor: palette.background };
+    return { color: palette.text };
+}
+const categoryBadgeStyles = {};
+/** Paired native Tag paint; a category stroke is not an on-bold background. */
+export function getFlowCategoryBadgeStyles(type) {
+    const category = nodeCategories[type] ?? 'task';
+    const palette = palettes[category];
+    return categoryBadgeStyles[category] ??= Object.freeze({
+        color: palette.text,
+        backgroundColor: palette.background,
+        borderColor: palette.border
+    });
+}
+const iconRoles = {
+    'status-success': 'color.icon.success', 'status-warning': 'color.icon.warning',
+    'status-error': 'color.icon.danger', 'status-info': 'color.icon.info',
+    'status-loading': 'color.icon.info', 'control-expand': 'color.icon',
+    'control-collapse': 'color.icon', 'control-help': 'color.icon'
+};
+/** Category glyphs and operational/status glyphs retain distinct source roles. */
+export function getFlowIconStyles(type, options = {}) {
+    const size = options.size ?? 'medium';
+    const category = type.startsWith('edge-') ? type.slice(5) : type;
+    return {
+        fontSize: `${typeof size === 'number' ? size : FLOW_ICON[size]}px`,
+        color: options.disabled ? variable('color.icon.disabled') :
+            options.color ?? (iconRoles[type] ? variable(iconRoles[type]) : getNodeColor(category)),
+        display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
+    };
+}
+const edgeDashes = {
+    dependency: undefined, transformation: '5,5', conditional: '2,2', dataFlow: '8,3,2,3'
+};
+/** Directed target stroke wins over category fallback; dashes communicate relation kind. */
+export function getFlowEdgeStyles(category, suppliedStyle) {
+    return {
+        stroke: suppliedStyle?.stroke ?? getEdgeColorPalette(category).primary,
+        strokeWidth: FLOW_EDGE.width, strokeDasharray: edgeDashes[category],
+        fill: 'none', vectorEffect: 'non-scaling-stroke'
+    };
+}
 export const FLOW_VIEWPORT = {
     minZoom: 0.2, maxZoom: 4, snapToGrid: true,
     snapGrid: [20, 20], fitViewOnInit: true
@@ -110,12 +158,14 @@ export function createVueFlowTheme(options = {}) {
 /** Preserve target identity for both the visible stroke and arrow marker. */
 export function styleTargetEdge(edge, nodes) {
     const target = nodes.find(node => node.id === edge.target);
-    const stroke = getNodeColor(target?.type ?? 'task');
+    const stroke = getNodeColor(target?.type || target?.data?.nodeType || 'task');
     return {
         ...edge, animated: false,
         style: { ...(typeof edge.style === 'object' ? edge.style : {}), stroke },
         markerEnd: {
-            ...(typeof edge.markerEnd === 'object' ? edge.markerEnd : { type: MarkerType.ArrowClosed }),
+            ...(typeof edge.markerEnd === 'object' ? edge.markerEnd : {
+                type: edge.markerEnd === MarkerType.Arrow ? MarkerType.Arrow : MarkerType.ArrowClosed
+            }),
             color: stroke, width: FLOW_EDGE.marker, height: FLOW_EDGE.marker
         }
     };
@@ -157,3 +207,7 @@ export function getFlowNodeStyles(type, state = {}) {
         connectorArrow: { color: palette.primary, font: variable('font.label.default') }
     };
 }
+/** Minimal detail removes costly decoration, never semantic contrast or graph data. */
+export function getFlowDetailStyles(level, suppliedStyle) {
+    return level === 'minimal' ? { ...suppliedStyle, boxShadow: 'none' } : suppliedStyle;
+}

package/dist/styles.css

@@ -18,7 +18,7 @@
 .bh-vue-flow .vue-flow__node-output {
   background: var(--bh-color-surface);
   border: var(--bh-border-width-default) solid var(--bh-color-border-bold);
-  border-radius: var(--bh-radius-075);
+  border-radius: var(--bh-radius-100);
   padding: var(--bh-space-150);
 }
 .bh-vue-flow .vue-flow__node-default.selectable:hover,
@@ -33,10 +33,16 @@
 }
 .bh-vue-flow .vue-flow__node:focus-visible,
 .bh-vue-flow .vue-flow__node :focus-visible,
-.bh-vue-flow .vue-flow__controls-button:focus-visible {
+.bh-vue-flow .vue-flow__edge:focus-visible,
+.bh-vue-flow .vue-flow__edge-path:focus-visible,
+.bh-vue-flow :is(button, [role='button']):focus-visible {
   outline: var(--bh-border-width-focused) solid var(--bh-flow-focus, var(--bh-color-border-focus));
   outline-offset: var(--bh-state-focus-offset);
 }
+.bh-vue-flow[data-bh-high-contrast='true'] :is(.vue-flow__node, .vue-flow__edge, .vue-flow__edge-path, button, [role='button']):focus-visible,
+.bh-vue-flow[data-bh-high-contrast='true'] .vue-flow__node :focus-visible {
+  outline-width: var(--bh-border-width-accent);
+}
 .bh-vue-flow .vue-flow__node[data-error='true'] {
   border-color: var(--bh-flow-error, var(--bh-color-border-danger));
   border-style: dashed;
@@ -69,9 +75,14 @@
   border: var(--bh-border-width-selected) dashed var(--bh-color-border-focus);
 }
 .bh-vue-flow .vue-flow__controls {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--bh-space-050);
+  padding: var(--bh-space-050);
   background: var(--bh-color-surface);
   border: var(--bh-border-width-default) solid var(--bh-color-border);
-  border-radius: var(--bh-radius-075);
+  border-radius: var(--bh-radius-100);
   box-shadow: var(--bh-elevation-shadow-raised);
 }
 .bh-vue-flow .vue-flow__controls-button {
@@ -82,7 +93,10 @@
   background: var(--bh-color-surface);
   color: var(--bh-color-icon);
   fill: currentColor;
-  border-bottom: var(--bh-border-width-default) solid var(--bh-color-border);
+  border: 0;
+}
+.bh-vue-flow .vue-flow__controls-button {
+  border-radius: var(--bh-radius-050);
 }
 .bh-vue-flow .vue-flow__controls-button:hover {
   background: var(--bh-color-background-neutral-subtle-hover);
@@ -98,8 +112,9 @@
 .bh-vue-flow .vue-flow__minimap {
   background: var(--bh-color-surface);
   border: var(--bh-border-width-default) solid var(--bh-color-border-bold);
-  border-radius: var(--bh-radius-075);
+  border-radius: var(--bh-radius-100);
   box-shadow: var(--bh-elevation-shadow-raised);
+  overflow: hidden;
 }
 .bh-vue-flow .vue-flow__minimap-mask { fill: var(--bh-color-surface-scrim); }
 .bh-vue-flow .vue-flow__minimap-node { stroke: var(--bh-color-border-bold); }
@@ -114,3 +129,173 @@
     height: var(--bh-size-target-touch);
   }
 }
+@media (width < 768px) {
+  .bh-vue-flow .vue-flow__controls-button {
+    width: var(--bh-size-target-touch);
+    height: var(--bh-size-target-touch);
+  }
+}
+
+/* User-selected accessibility adaptations belong to the actual graph host. */
+.bh-vue-flow[data-bh-large-text='true'] .vue-flow__node {
+  font-size: 1.125em;
+}
+.bh-vue-flow[data-bh-increased-spacing='true'] .vue-flow__node {
+  line-height: 1.6;
+  letter-spacing: 0.02em;
+}
+
+.bh-flow-icon[data-bh-loading='true'] {
+  animation: bh-flow-loading 1s linear infinite;
+}
+@keyframes bh-flow-loading {
+  to { transform: rotate(360deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .bh-flow-icon[data-bh-loading='true'] { animation: none; }
+}
+
+/* Labelled relationship markers identify categories, never operational status. */
+.bh-flow-category-mark {
+  display: inline-block;
+  flex: none;
+  width: var(--bh-space-075);
+  height: var(--bh-space-075);
+  border-radius: 50%;
+  background: var(--bh-flow-category-task-border);
+}
+.bh-flow-category-mark[data-bh-category='dependency'] { background: var(--bh-flow-category-dependency-border); }
+.bh-flow-category-mark[data-bh-category='transformation'] { background: var(--bh-flow-category-transformation-border); }
+.bh-flow-category-mark[data-bh-category='validation'] { background: var(--bh-flow-category-validation-border); }
+.bh-flow-category-mark[data-bh-category='pushStep'] { background: var(--bh-flow-category-pushStep-border); }
+.bh-flow-category-mark[data-bh-category='decision'] { background: var(--bh-flow-category-decision-border); }
+.bh-flow-category-mark[data-bh-category='loop'] { background: var(--bh-flow-category-loop-border); }
+.bh-flow-category-mark[data-bh-category='grouped'] { background: var(--bh-flow-category-grouped-border); }
+
+/* Native workflow-canvas theme variables are its public styling API. Scope the host
+   protocol here; never change application-wide primary/text variables. */
+.bh-workflow-canvas {
+  --background: var(--bh-color-surface-page);
+  --foreground: var(--bh-color-text);
+  --card: var(--bh-color-surface);
+  --popover: var(--bh-color-surface-overlay);
+  --muted: var(--bh-color-background-neutral);
+  --muted-foreground: var(--bh-color-text-subtle);
+  --primary: var(--bh-color-border-focus);
+  --destructive: var(--bh-color-border-danger);
+  --border: var(--bh-color-border);
+  --radius: var(--bh-radius-050);
+  --wf-font-mono: var(--bh-font-family-mono);
+  --wf-control-height: var(--bh-size-control-default);
+  --wf-dock-radius: var(--bh-radius-100);
+  --wf-focus-outline: var(--bh-border-width-focused) solid var(--bh-color-border-focus);
+  --wf-focus-outline-offset: var(--bh-state-focus-offset);
+  --wf-chrome-shadow: var(--bh-elevation-shadow-overlay);
+  color: var(--bh-color-text);
+  font: var(--bh-font-body-default);
+}
+.bh-workflow-canvas .wf-canvas {
+  --wf-bg: var(--bh-diagram-canvas);
+  --wf-grid: var(--bh-diagram-grid);
+  --wf-edge: var(--bh-diagram-edge);
+  --wf-edge-active: var(--bh-diagram-selection-ring);
+  --wf-edge-failure: var(--bh-diagram-fail-stroke);
+  --wf-label-bg: var(--bh-diagram-edge-label-bg);
+  --wf-label-fg: var(--bh-diagram-edge-label-text);
+  --wf-label-border: var(--bh-color-border);
+  --wf-chrome-bg: var(--bh-color-surface);
+  --wf-chrome-fg: var(--bh-color-text);
+  --wf-chrome-hover: var(--bh-color-background-neutral-subtle-hover);
+  --wf-chrome-border: var(--bh-color-border-bold);
+  --wf-dock-height: calc(var(--bh-size-control-default) + var(--bh-space-100) + 2 * var(--bh-border-width-default));
+  --wf-chrome-radius: var(--bh-radius-050);
+  --wf-node-width: var(--bh-diagram-card-width);
+  --wf-node-bg: var(--bh-diagram-node-fill);
+  --wf-node-fg: var(--bh-diagram-node-title);
+  --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;
+  --wf-node-padding-block: var(--bh-diagram-padding);
+  --wf-node-column-gap: var(--bh-space-150);
+  --wf-node-row-gap: var(--bh-space-050);
+  --wf-node-status-size: var(--bh-size-icon-default);
+  --wf-node-logo-size: var(--bh-content-partner-logo-image-size);
+  --wf-tone-bg: var(--bh-diagram-tile-bg);
+  --wf-tone-fg: var(--bh-diagram-tile-glyph);
+  --wf-node-kind-bg: var(--bh-diagram-node-fill);
+  --wf-node-kind-fg: var(--bh-diagram-node-desc);
+}
+.bh-workflow-canvas .wf-node__badge {
+  width: var(--bh-diagram-tile-size);
+  height: var(--bh-diagram-tile-size);
+}
+.bh-workflow-canvas .wf-node__badge > svg {
+  width: auto;
+  height: var(--bh-diagram-glyph-size);
+}
+.bh-workflow-canvas .wf-node__content > .wf-node__kind {
+  padding: 0;
+  background: transparent;
+}
+.bh-workflow-canvas .wf-node__title {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+.bh-workflow-canvas .wf-node__head { 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 {
+  width: auto;
+  flex: none;
+}
+.bh-workflow-canvas .wf-node__execution > svg,
+.bh-workflow-canvas .wf-node__indicators svg {
+  width: auto;
+}
+
+/* Native dock geometry has fixed-pixel gaps/type and opacity-only disabled paint,
+   without corresponding variables. Keep its actual controls, but scale this
+   shared compact family through the same Source roles as native AntD docks. */
+.bh-workflow-canvas .wf-dock__bar {
+  gap: var(--bh-space-025);
+  padding: var(--bh-space-050);
+  border-width: var(--bh-border-width-default);
+}
+.bh-workflow-canvas .wf-dock__group {
+  gap: var(--bh-space-025);
+}
+.bh-workflow-canvas .wf-dock__group + .wf-dock__group {
+  margin-left: var(--bh-space-025);
+  padding-left: var(--bh-space-050);
+  border-left-width: var(--bh-border-width-default);
+}
+.bh-workflow-canvas .wf-dock__btn {
+  gap: var(--bh-space-050);
+  padding-inline: var(--bh-space-075);
+  font: var(--bh-font-label-small);
+}
+.bh-workflow-canvas .wf-dock__btn:not(:disabled):active {
+  background: var(--bh-color-background-neutral-subtle-pressed);
+}
+.bh-workflow-canvas .wf-dock__btn:disabled {
+  opacity: 1;
+  color: var(--bh-color-text-disabled);
+  background: transparent;
+  cursor: not-allowed;
+}
+.bh-workflow-canvas .wf-dock__icon {
+  width: auto;
+  height: var(--bh-size-icon-default);
+}
+@media (pointer: coarse), (width < 768px) {
+  .bh-workflow-canvas {
+    --wf-control-height: var(--bh-size-target-touch);
+  }
+  .bh-workflow-canvas .wf-canvas {
+    --wf-dock-height: calc(var(--bh-size-target-touch) + var(--bh-space-100) + 2 * var(--bh-border-width-default));
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beehexa/vueflow-tokens",
-  "version": "2611.3.4",
+  "version": "2611.5.3",
   "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.3.4"
+    "@beehexa/design-tokens": "2611.5.3"
   },
   "peerDependencies": {
     "@vue-flow/core": "^1.0.0",
@@ -41,8 +41,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "node ../../scripts/build-adapters.mjs vueflow-tokens",
-    "check": "node ../../scripts/build-adapters.mjs vueflow-tokens --check",
+    "build": "node ../../scripts/build-runtime-packages.mjs vueflow-tokens",
+    "check": "node ../../scripts/build-runtime-packages.mjs vueflow-tokens --check",
     "prepack": "npm run build"
   },
   "engines": {