@beehexa/vueflow-tokens 2611.6.1 → 2611.8.1

package/README.md

@@ -24,47 +24,110 @@ host/dimension changes. The factory uses VueFlow 1's real `fitViewOnInit` option
 
 ## Public contracts
 
-- `createVueFlowTheme({ dark?, locale? })`: scoped source variables, real VueFlow
-  viewport settings, background and minimap bindings.
-- `NodeType`, `NODE_DIMENSIONS`, `GRID_SPACING`, `TASK_DATA_LAYOUT`: source-backed
-  fixed geometry shared by renderers and graph layout. Do not recreate these tables.
-- `getFlowNodeStyles(type, { hovered?, selected?, selfDependency? })`: typed custom
-  node body/content/icon/label/connector styles, without decorative motion or gradients.
-- `getNodeColorPalette(category)`: CSS-backed paired category roles, live across
-  theme switches. Categories are task, dependency, transformation, validation,
-  pushStep, decision, loop and grouped; they identify kinds, never execution status.
-- `getNodeColor(type)`, `getEdgeColorPalette(category)`, `styleTargetEdge(edge, nodes)`:
-  source-backed directed edge identity; target stroke and marker remain paired.
+- `createVueFlowTheme({ dark?, locale?, nodeTone? })`: scoped source variables, real VueFlow
+  viewport settings, background and minimap bindings. `nodeTone(node)` picks each MiniMap
+  node's tone (`blue`, VueFlow's default-node colour, when omitted).
+- `FLOW_TONES` / `FlowTone`: the generic colour tones `blue`, `red`, `green`, `crimson`,
+  `yellow`, `teal`, `magenta` and `purple`. Each tone reads one existing foundation
+  `flow.category.*` role set (foundation names unchanged); the package gives a tone no
+  meaning, and the consumer owns which of its concepts takes which tone. Tones identify
+  kinds, never execution status.
+- `getFlowTonePalette(tone)`: CSS-backed paired tone roles, live across theme switches.
+- `getFlowToneStyles(tone, part?)`: custom content role binding; `foreground` (default)
+  sets tone text, `border` sets border colour and `background` sets the tone surface.
+- `getFlowNodeStyles({ tone, width, height, shape? }, { hovered?, selected?, dashed? })`:
+  typed custom node body/content/icon/label/logo styles over consumer-owned geometry,
+  without decorative motion or gradients. `shape: 'circle'` rounds the body fully.
+- `styleTargetEdge(edge, nodes, toneOf?)`: directed edge identity from the target node's
+  tone (`blue` when omitted); 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
+- `getFlowIconStyles(toneOrRole, { size?, color?, disabled? })`: tone-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
+  icon roles. Sizes accept `small|medium|large` or a numeric API size; explicit colours
+  must already be source-resolved semantic roles.
+- `getFlowEdgeStyles(tone, suppliedStyle?)`: SVG width, non-scaling stroke and no fill.
+  A supplied directed target stroke wins over the tone fallback, and a supplied static
+  dash is kept; the consumer owns what a dash means.
+- Public option, tone, node-look, node-state, style and theme interfaces are emitted
   in `dist/index.d.ts`; CSS has a typed `./css` export.
 
 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.
+custom content. Keep kind 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 kind 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.
 
+Native `.bh-workflow-canvas` consumers may opt into the `WorkflowEdge.tone` values
+`blue`, `red` and `green`. The companion binds `--wf-edge-tone-<tone>` to the existing
+foundation border roles `--bh-flow-category-task-border`, `-dependency-border` and
+`-transformation-border` (foundation names unchanged), with solid, short-dash (`2 4`) and
+dash-dot (`9 3 2 3`) cues through `--wf-edge-tone-<tone>-dash`. Tone is categorical,
+independent of failure; native stroke/arrowhead, interaction states and jump swatches
+share it. The consumer maps its own relation kinds onto these tones. PNG export reuses
+the native exporter's DOM/stylesheet serialization, with no tone-specific path.
+Omitting tone retains existing native styling. Do not add consumer edge renderers.
+
+Possible, context and toned-failure edges keep tone ink and dash in every state;
+their cues are native shapes, never new dashes or opacity. `certainty: 'possible'`
+draws a hollow source-end diamond (BPMN conditional flow). `context: true` draws an
+open arrowhead and the thinner resting stroke `--wf-edge-context-width`, a package-owned
+variable bound to the foundation `border.width.default`. A toned failure keeps its
+tone dash and adds the Lucide `CircleX` mark in `color.icon.danger`
+(`--wf-edge-failure-icon`) beside the label; an untoned failure keeps the failure dash.
+Pass the localized group name as `familyLabel` for `{family} jump to {target}` names,
+and localize the whole name/numbering through the viewer's `texts.jumps` (`WorkflowJumpTexts`).
+
+`NodeLook.sizing: 'content'` opts ordinary native cards into intrinsic width:
+minimum `diagram.card.width`, maximum twice that source role. The native theme owns
+only that width rule; this companion owns the roles
+`--wf-node-content-min-width` / `--wf-node-content-max-width` and the presentation
+recipe (title/kind wrap, growing head, logos bounded without hiding any), with no
+declaration duplicated in the native theme. Other cards retain their existing
+fixed sizing; stadium, diamond and ellipse cards ignore the opt-in.
+Native measurement/router and endpoint spreading are unchanged. Light/dark,
+long title/many-logo, interaction and exported-PNG acceptance remains manual.
+
+Native group frames (`WorkflowNode.group`, the built-in `wf-group` node) take the
+package-owned `--wf-group-*` variables, each bound to an existing foundation role:
+border `color.border`, border width `border.width.default`, radius `radius.card`, fill
+`color.surface.subtle`, nested fill `color.background.neutral`, padding `space.stack`
+and header gap `space.150`; high contrast draws the border in text ink. No flow-specific
+foundation token backs them. The native layout reads padding and header gap from the
+canvas, so both stay plain lengths.
+Diamond and ellipse titles and kind captions wrap at word boundaries and are never
+truncated (no `overflow-wrap: anywhere`, no ellipsis); only a single word wider than the
+content box breaks. Other cards may still break a long unbroken title anywhere. Frame
+look, toggle and exported-PNG acceptance remain manual.
+
+The native Shift + drag selection box takes `--wf-selection-*` from the same selection
+recipe as `.bh-vue-flow .vue-flow__selection`: transparent (no fill, so swept cards stay visible), a
+dashed `border.width.selected` border in `color.border.focus`, in both themes. Its look remains
+manual acceptance.
+
+The native find box (`WorkflowFind`, the viewer's `/` search) takes `--wf-find-*` and the
+shared `--wf-list-*` roles: an overlay (`color.surface.overlay`, `elevation.shadow.overlay`,
+`radius.overlay`, no border) with a `color.border` divider under the field. Field and empty
+state `font.body.default` (placeholder `color.text.subtlest`, empty state `color.text.subtle`);
+rows `font.label.default`, `space.075` / `space.item.x` padding, `size.control.default` minimum
+height (`size.target.touch` on coarse pointers and below 768px), `radius.item`; the kind label
+`font.body.small` in `color.text.subtle`; an unnamed node's id `font.code.default`. Names wrap at
+word boundaries, never truncated. Row states: hover `color.surface.overlay.hover`; the
+keyboard-active row `color.surface.overlay.selected` plus the `border.width.selected` /
+`color.border.selected` start bar; that row hovered `color.surface.overlay.selected.hover`.
+Focus is the field ring (`--wf-focus-outline`) around the box. The canvas previews the pointed
+row's node with its hover state and outer ring, without changing selection, trace or viewport.
+The `--wf-list-*` roles also paint the native jump list and dock menu rows. Look and contrast
+in both themes remain manual acceptance.
+
 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
+(12px), independently of its control Buttons. Node logos retain nested
+`radius.075` (6px). Circular 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`.
 
@@ -77,18 +140,18 @@ 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.
+`bh-flow-tone-mark[data-bh-tone="<FlowTone>"]` is a labelled 6px circular
+relationship marker in the tone's border role (`blue` when unset), 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'
+For a native kind Tag, bind the cached immutable result of
+`getFlowToneBadgeStyles(tone)` to its public `style` prop and omit its `color` prop.
+This pairs tone foreground, background and border; a frame/edge stroke from
+`getFlowTonePalette(tone).border` 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.
+Tags in the Ant Design Vue family. Tones 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
+Resting handles use the neutral icon role, not keyboard-focus color. 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. Editor takeovers use the same `z-index.modal` layer.
 
@@ -97,10 +160,10 @@ not global1001/1002. Editor takeovers use the same `z-index.modal` layer.
 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.
+stays private; only the authorized runner stamps real versions for this package and its internal requirements.
 
 Full authored guidance lives in `src/content/tools/vueflow.mdx` and ships through
 `@beehexa/design-rules`. Verify real light/dark and English/Vietnamese surfaces,
-contrast, all fixed dimensions, long labels, selection/focus/error, target-coloured
+contrast, consumer-owned dimensions, long labels, selection/focus/error, target-coloured
 markers, controls/minimap, zoom/snap/fit, expanded/cyclic graphs, fullscreen/ESC and PNG
 export. Typed configuration is not visual or accessibility proof.

package/dist/index.d.ts

@@ -1,61 +1,25 @@
 import type { CSSProperties } from 'vue';
 import { type FlowProps, type Node, type Edge, type Styles } from '@vue-flow/core';
+/**
+ * Generic colour tones. Each tone reads one existing foundation `flow.category.<key>` role set;
+ * the foundation keys keep their names and the package gives a tone no domain meaning. The
+ * consumer decides which of its own concepts takes which tone.
+ */
+export declare const FLOW_TONES: readonly ["blue", "red", "green", "crimson", "yellow", "teal", "magenta", "purple"];
+export type FlowTone = typeof FLOW_TONES[number];
 export interface VueFlowThemeOptions {
     dark?: boolean;
     locale?: 'en' | 'vi';
+    /** Tone of a MiniMap node; `blue` when omitted. */
+    nodeTone?: (node: Node) => FlowTone;
 }
-export type FlowCategory = 'task' | 'dependency' | 'transformation' | 'validation' | 'pushStep' | 'decision' | 'loop' | 'grouped';
-export type FlowEdgeCategory = 'dependency' | 'transformation' | 'dataFlow' | 'conditional';
-export interface FlowNodePalette {
+export interface FlowTonePalette {
     primary: string;
     text: string;
     background: string;
     border: string;
     hover: string;
-    connector: {
-        bg: string;
-        border: string;
-        logoBorder: string;
-    };
-}
-export declare enum NodeType {
-    MAIN_TASK = "task",
-    TASK_DEPENDENCY = "task_dependency",
-    TASK_TRANSFORMATION = "task_transformation",
-    TASK_DATA = "task_data",
-    TRANSFORMATION_GROUP = "transformationGroup",
-    VALIDATION_GROUP = "validationGroup",
-    PUSH_STEPS_GROUP = "pushStepsGroup",
-    TRANSFORMATION = "transformation",
-    VALIDATION = "validation",
-    PUSH_STEP = "push_step",
-    DECISION = "decision",
-    LOOP = "loop",
-    PROFILE = "profile"
-}
-export interface FlowDimensions {
-    width: number;
-    height: number;
 }
-export declare const NODE_DIMENSIONS: Record<NodeType, FlowDimensions>;
-export declare const GRID_SPACING: {
-    readonly HORIZONTAL: number;
-    readonly VERTICAL: number;
-    readonly TASK_DATA_X_GAP: number;
-    readonly GROUP_Y_OFFSET: number;
-};
-export declare const TASK_DATA_LAYOUT: {
-    readonly VALIDATION_NODE_Y_GAP: number;
-    readonly TRANSFORMATION_NODE_Y_GAP: number;
-    readonly PUSH_STEP_NODE_Y_GAP: number;
-    readonly PUSH_STEP_NODE_X_GAP: number;
-    readonly PUSH_STEP_BRANCH_X_GAP: number;
-    readonly EXPANDED_GROUP_X: number;
-    readonly EXPANDED_GROUP_Y_START: number;
-    readonly TREE_LEVEL_Y_GAP: number;
-    readonly TREE_SIBLING_X_GAP: number;
-    readonly TREE_MIN_WIDTH: number;
-};
 export declare const FLOW_EDGE: {
     readonly width: number;
     readonly marker: number;
@@ -68,24 +32,25 @@ export declare const FLOW_ICON: {
     readonly large: number;
 };
 /** CSS bindings stay reactive to the source theme/locale without rebuilding a graph. */
-export declare function getNodeColorPalette(category: FlowCategory): FlowNodePalette;
-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 declare function getFlowTonePalette(tone: FlowTone): FlowTonePalette;
+export type FlowTonePart = 'foreground' | 'border' | 'background';
+/** Apply a tone role to custom content without a consumer-owned recipe. */
+export declare function getFlowToneStyles(tone: FlowTone, part?: FlowTonePart): CSSProperties;
+/** Paired native Tag paint; a tone stroke is not an on-bold background. */
+export declare function getFlowToneBadgeStyles(tone: FlowTone): 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 type FlowIconRole = 'status-success' | 'status-warning' | 'status-error' | 'status-info' | 'status-loading' | 'control-expand' | 'control-collapse' | 'control-help';
+/** Tone glyphs take the tone's border role; status/control glyphs keep their own source roles. */
+export declare function getFlowIconStyles(role: FlowIconRole | FlowTone, options?: FlowIconOptions): CSSProperties;
+/**
+ * SVG presentation recipe for a custom edge path. A supplied directed target stroke wins over
+ * the tone fallback; a supplied static dash is kept (the consumer owns what a dash means).
+ */
+export declare function getFlowEdgeStyles(tone: FlowTone, suppliedStyle?: CSSProperties): Styles;
 export declare const FLOW_VIEWPORT: {
     minZoom: number;
     maxZoom: number;
@@ -109,12 +74,23 @@ export interface VueFlowTheme {
 }
 /** Apply to the actual VueFlow host; import the CSS companion after upstream styles. */
 export declare function createVueFlowTheme(options?: VueFlowThemeOptions): VueFlowTheme;
-/** Preserve target identity for both the visible stroke and arrow marker. */
-export declare function styleTargetEdge(edge: Edge, nodes: readonly Node[]): Edge;
+/**
+ * Preserve target identity for both the visible stroke and arrow marker. `toneOf` resolves the
+ * target node's tone (`blue` when omitted, or when the target is missing).
+ */
+export declare function styleTargetEdge(edge: Edge, nodes: readonly Node[], toneOf?: (node: Node) => FlowTone): Edge;
+/** A custom node body: its tone and the consumer-owned fixed geometry. */
+export interface FlowNodeLook {
+    tone: FlowTone;
+    width: number;
+    height: number;
+    /** `circle` rounds the body fully; `rectangle` (default) uses `radius.100`. */
+    shape?: 'rectangle' | 'circle';
+}
 export interface FlowNodeState {
     hovered?: boolean;
     selected?: boolean;
-    selfDependency?: boolean;
+    dashed?: boolean;
 }
 export interface FlowNodeStyles {
     container: Styles;
@@ -123,11 +99,9 @@ export interface FlowNodeStyles {
     label: CSSProperties;
     text: CSSProperties;
     loadingIcon: CSSProperties;
-    connectorLogo: CSSProperties;
-    connectorFlow: CSSProperties;
-    connectorArrow: CSSProperties;
+    logo: CSSProperties;
 }
-/** Custom content and layout share fixed source geometry, not viewport-dependent sizing. */
-export declare function getFlowNodeStyles(type: NodeType, state?: FlowNodeState): FlowNodeStyles;
+/** Custom content and layout share fixed consumer geometry, not viewport-dependent sizing. */
+export declare function getFlowNodeStyles(look: FlowNodeLook, 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

@@ -1,46 +1,23 @@
 import { tokens } from '@beehexa/design-tokens';
 import { MarkerType } from '@vue-flow/core';
-export var NodeType;
-(function (NodeType) {
-    NodeType["MAIN_TASK"] = "task";
-    NodeType["TASK_DEPENDENCY"] = "task_dependency";
-    NodeType["TASK_TRANSFORMATION"] = "task_transformation";
-    NodeType["TASK_DATA"] = "task_data";
-    NodeType["TRANSFORMATION_GROUP"] = "transformationGroup";
-    NodeType["VALIDATION_GROUP"] = "validationGroup";
-    NodeType["PUSH_STEPS_GROUP"] = "pushStepsGroup";
-    NodeType["TRANSFORMATION"] = "transformation";
-    NodeType["VALIDATION"] = "validation";
-    NodeType["PUSH_STEP"] = "push_step";
-    NodeType["DECISION"] = "decision";
-    NodeType["LOOP"] = "loop";
-    NodeType["PROFILE"] = "profile";
-})(NodeType || (NodeType = {}));
+/**
+ * Generic colour tones. Each tone reads one existing foundation `flow.category.<key>` role set;
+ * the foundation keys keep their names and the package gives a tone no domain meaning. The
+ * consumer decides which of its own concepts takes which tone.
+ */
+export const FLOW_TONES = ['blue', 'red', 'green', 'crimson', 'yellow', 'teal', 'magenta', 'purple'];
+/** Tone → existing foundation role set (unchanged foundation names). */
+const toneRoles = {
+    blue: 'flow.category.task', red: 'flow.category.dependency', green: 'flow.category.transformation',
+    crimson: 'flow.category.validation', yellow: 'flow.category.pushStep', teal: 'flow.category.decision',
+    magenta: 'flow.category.loop', purple: 'flow.category.grouped'
+};
+/** VueFlow's default node colour; the fallback tone wherever the consumer supplies none. */
+const DEFAULT_TONE = 'blue';
 const numberToken = (name) => {
     const value = tokens.light[name];
     return Number.parseFloat(value) * (value.endsWith('rem') ? 16 : 1);
 };
-export const NODE_DIMENSIONS = Object.fromEntries(Object.values(NodeType).map(type => [type, {
-        width: numberToken(`flow.geometry.${type}.width`),
-        height: numberToken(`flow.geometry.${type}.height`)
-    }]));
-export const GRID_SPACING = {
-    HORIZONTAL: numberToken('flow.grid.HORIZONTAL'), VERTICAL: numberToken('flow.grid.VERTICAL'),
-    TASK_DATA_X_GAP: numberToken('flow.grid.TASK_DATA_X_GAP'),
-    GROUP_Y_OFFSET: numberToken('flow.grid.GROUP_Y_OFFSET')
-};
-export const TASK_DATA_LAYOUT = {
-    VALIDATION_NODE_Y_GAP: numberToken('flow.layout.VALIDATION_NODE_Y_GAP'),
-    TRANSFORMATION_NODE_Y_GAP: numberToken('flow.layout.TRANSFORMATION_NODE_Y_GAP'),
-    PUSH_STEP_NODE_Y_GAP: numberToken('flow.layout.PUSH_STEP_NODE_Y_GAP'),
-    PUSH_STEP_NODE_X_GAP: numberToken('flow.layout.PUSH_STEP_NODE_X_GAP'),
-    PUSH_STEP_BRANCH_X_GAP: numberToken('flow.layout.PUSH_STEP_BRANCH_X_GAP'),
-    EXPANDED_GROUP_X: numberToken('flow.layout.EXPANDED_GROUP_X'),
-    EXPANDED_GROUP_Y_START: numberToken('flow.layout.EXPANDED_GROUP_Y_START'),
-    TREE_LEVEL_Y_GAP: numberToken('flow.layout.TREE_LEVEL_Y_GAP'),
-    TREE_SIBLING_X_GAP: numberToken('flow.layout.TREE_SIBLING_X_GAP'),
-    TREE_MIN_WIDTH: numberToken('flow.layout.TREE_MIN_WIDTH')
-};
 export const FLOW_EDGE = {
     width: numberToken('flow.edge.width'), marker: numberToken('flow.edge.marker'),
     radius: numberToken('flow.edge.radius'), handle: numberToken('flow.edge.handle')
@@ -49,51 +26,32 @@ export const FLOW_ICON = {
     small: numberToken('size.icon.default'), medium: numberToken('size.icon.medium'),
     large: numberToken('size.icon.large')
 };
-const nodeCategories = {
-    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',
-    pushStepsGroup: 'pushStep', decision: 'decision', loop: 'loop', grouped: 'grouped'
-};
 const variable = (name) => `var(--bh-${name.replaceAll('.', '-')})`;
-const palettes = Object.fromEntries([
-    'task', 'dependency', 'transformation', 'validation', 'pushStep', 'decision', 'loop', 'grouped'
-].map(category => {
-    const role = (part) => variable(`flow.category.${category}.${part}`);
-    return [category, {
+const palettes = Object.fromEntries(FLOW_TONES.map(tone => {
+    const role = (part) => variable(`${toneRoles[tone]}.${part}`);
+    return [tone, {
             primary: role('border'), text: role('foreground'), background: role('background'),
-            border: role('border'), hover: role('hover'),
-            connector: { bg: role('background'), border: role('border'), logoBorder: role('border') }
+            border: role('border'), hover: role('hover')
         }];
 }));
 /** CSS bindings stay reactive to the source theme/locale without rebuilding a graph. */
-export function getNodeColorPalette(category) {
-    return palettes[category];
+export function getFlowTonePalette(tone) {
+    return palettes[tone];
 }
-export function getEdgeColorPalette(category) {
-    return palettes[category === 'dataFlow' ? 'pushStep' :
-        category === 'conditional' ? 'decision' : category];
-}
-/** Unknown/custom node types retain the task category, matching VueFlow's default node. */
-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'];
+/** Apply a tone role to custom content without a consumer-owned recipe. */
+export function getFlowToneStyles(tone, part = 'foreground') {
+    const palette = palettes[tone];
     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({
+const toneBadgeStyles = {};
+/** Paired native Tag paint; a tone stroke is not an on-bold background. */
+export function getFlowToneBadgeStyles(tone) {
+    const palette = palettes[tone];
+    return toneBadgeStyles[tone] ??= Object.freeze({
         color: palette.text,
         backgroundColor: palette.background,
         borderColor: palette.border
@@ -105,25 +63,24 @@ const iconRoles = {
     '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 = {}) {
+/** Tone glyphs take the tone's border role; status/control glyphs keep their own source roles. */
+export function getFlowIconStyles(role, 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)),
+            options.color ?? (role in iconRoles ? variable(iconRoles[role]) : palettes[role].border),
         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) {
+/**
+ * SVG presentation recipe for a custom edge path. A supplied directed target stroke wins over
+ * the tone fallback; a supplied static dash is kept (the consumer owns what a dash means).
+ */
+export function getFlowEdgeStyles(tone, suppliedStyle) {
     return {
-        stroke: suppliedStyle?.stroke ?? getEdgeColorPalette(category).primary,
-        strokeWidth: FLOW_EDGE.width, strokeDasharray: edgeDashes[category],
+        stroke: suppliedStyle?.stroke ?? palettes[tone].border,
+        strokeWidth: FLOW_EDGE.width, strokeDasharray: suppliedStyle?.strokeDasharray,
         fill: 'none', vectorEffect: 'non-scaling-stroke'
     };
 }
@@ -135,6 +92,7 @@ export const FLOW_VIEWPORT = {
 export function createVueFlowTheme(options = {}) {
     const mode = { ...tokens.light, ...(options.dark ? tokens.dark : {}) };
     const typography = options.locale === 'vi' ? { ...mode, ...tokens.vi } : mode;
+    const nodeTone = options.nodeTone ?? (() => DEFAULT_TONE);
     return {
         class: 'bh-vue-flow',
         style: {
@@ -149,16 +107,19 @@ export function createVueFlowTheme(options = {}) {
         },
         flowOptions: { ...FLOW_VIEWPORT, snapGrid: [...FLOW_VIEWPORT.snapGrid] },
         minimap: {
-            nodeColor: node => getNodeColor(node.type ?? 'task'),
+            nodeColor: node => palettes[nodeTone(node)].border,
             maskColor: variable('color.surface.scrim'), nodeStrokeColor: variable('color.border.bold')
         },
         background: { patternColor: variable('color.border'), bgColor: mode['color.surface.page'] }
     };
 }
-/** Preserve target identity for both the visible stroke and arrow marker. */
-export function styleTargetEdge(edge, nodes) {
+/**
+ * Preserve target identity for both the visible stroke and arrow marker. `toneOf` resolves the
+ * target node's tone (`blue` when omitted, or when the target is missing).
+ */
+export function styleTargetEdge(edge, nodes, toneOf = () => DEFAULT_TONE) {
     const target = nodes.find(node => node.id === edge.target);
-    const stroke = getNodeColor(target?.type || target?.data?.nodeType || 'task');
+    const stroke = palettes[target ? toneOf(target) : DEFAULT_TONE].border;
     return {
         ...edge, animated: false,
         style: { ...(typeof edge.style === 'object' ? edge.style : {}), stroke },
@@ -170,11 +131,9 @@ export function styleTargetEdge(edge, nodes) {
         }
     };
 }
-/** Custom content and layout share fixed source geometry, not viewport-dependent sizing. */
-export function getFlowNodeStyles(type, state = {}) {
-    const dimensions = NODE_DIMENSIONS[type];
-    const palette = palettes[nodeCategories[type] ?? 'task'];
-    const round = type === NodeType.LOOP || type === NodeType.DECISION;
+/** Custom content and layout share fixed consumer geometry, not viewport-dependent sizing. */
+export function getFlowNodeStyles(look, state = {}) {
+    const palette = palettes[look.tone];
     const label = {
         font: variable('font.label.default'), color: palette.text, textAlign: 'center',
         overflowWrap: 'anywhere', width: '100%'
@@ -185,12 +144,12 @@ export function getFlowNodeStyles(type, state = {}) {
     };
     return {
         container: {
-            width: `${dimensions.width}px`, height: `${dimensions.height}px`,
+            width: `${look.width}px`, height: `${look.height}px`,
             boxSizing: 'border-box', display: 'flex', flexDirection: 'column',
             alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
             border: `${variable('border.width.selected')} solid ${palette.border}`,
-            borderStyle: state.selfDependency ? 'dashed' : 'solid',
-            borderRadius: round ? '50%' : variable('radius.100'),
+            borderStyle: state.dashed ? 'dashed' : 'solid',
+            borderRadius: look.shape === 'circle' ? '50%' : variable('radius.100'),
             background: state.hovered ? palette.hover : palette.background,
             color: palette.text, font: variable('font.body.default'),
             outline: state.selected ? `${variable('border.width.selected')} solid ${variable('color.border.selected')}` : undefined,
@@ -202,9 +161,7 @@ export function getFlowNodeStyles(type, state = {}) {
             padding: variable('space.150'), gap: variable('space.050')
         },
         icon, label, text: label, loadingIcon: icon,
-        connectorLogo: { borderRadius: variable('radius.075'), objectFit: 'contain' },
-        connectorFlow: { display: 'flex', alignItems: 'center', gap: variable('space.100') },
-        connectorArrow: { color: palette.primary, font: variable('font.label.default') }
+        logo: { borderRadius: variable('radius.075'), objectFit: 'contain' }
     };
 }
 /** Minimal detail removes costly decoration, never semantic contrast or graph data. */

package/dist/styles.css

@@ -71,7 +71,8 @@
 .bh-vue-flow .vue-flow__edge-textbg { fill: var(--bh-color-surface); }
 .bh-vue-flow .vue-flow__selection,
 .bh-vue-flow .vue-flow__nodesselection-rect {
-  background: var(--bh-color-background-selected);
+  /* Transparent: the swept cards stay visible through the box; only the dashed focus border marks it. */
+  background: transparent;
   border: var(--bh-border-width-selected) dashed var(--bh-color-border-focus);
 }
 .bh-vue-flow .vue-flow__controls {
@@ -155,8 +156,9 @@
   .bh-flow-icon[data-bh-loading='true'] { animation: none; }
 }
 
-/* Labelled relationship markers identify categories, never operational status. */
-.bh-flow-category-mark {
+/* Labelled relationship markers identify a colour tone, never operational status. Tones map
+   onto the existing foundation `flow.category.*` border roles (see FlowTone in index.ts). */
+.bh-flow-tone-mark {
   display: inline-block;
   flex: none;
   width: var(--bh-space-075);
@@ -164,13 +166,13 @@
   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); }
+.bh-flow-tone-mark[data-bh-tone='red'] { background: var(--bh-flow-category-dependency-border); }
+.bh-flow-tone-mark[data-bh-tone='green'] { background: var(--bh-flow-category-transformation-border); }
+.bh-flow-tone-mark[data-bh-tone='crimson'] { background: var(--bh-flow-category-validation-border); }
+.bh-flow-tone-mark[data-bh-tone='yellow'] { background: var(--bh-flow-category-pushStep-border); }
+.bh-flow-tone-mark[data-bh-tone='teal'] { background: var(--bh-flow-category-decision-border); }
+.bh-flow-tone-mark[data-bh-tone='magenta'] { background: var(--bh-flow-category-loop-border); }
+.bh-flow-tone-mark[data-bh-tone='purple'] { 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. */
@@ -200,6 +202,19 @@
   --wf-edge: var(--bh-diagram-edge);
   --wf-edge-active: var(--bh-diagram-selection-ring);
   --wf-edge-failure: var(--bh-diagram-fail-stroke);
+  /* Possible/context/toned-failure cues are shapes, never new dashes or opacity: context is a thinner resting
+     stroke (with the native open arrowhead); a toned failure keeps its tone dash and adds a circle-x mark.
+     Package-owned variable: it reads the foundation border width, no flow-specific token. */
+  --wf-edge-context-width: var(--bh-border-width-default);
+  --wf-edge-failure-icon: var(--bh-color-icon-danger);
+  /* Generic colour tones for `WorkflowEdge.tone`, mapped onto the existing foundation category border roles.
+     Tones are categorical, never execution/failure states; each keeps its static non-colour dash cue. */
+  --wf-edge-tone-blue: var(--bh-flow-category-task-border);
+  --wf-edge-tone-blue-dash: none;
+  --wf-edge-tone-red: var(--bh-flow-category-dependency-border);
+  --wf-edge-tone-red-dash: 2 4;
+  --wf-edge-tone-green: var(--bh-flow-category-transformation-border);
+  --wf-edge-tone-green-dash: 9 3 2 3;
   --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);
@@ -210,6 +225,8 @@
   --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-content-min-width: var(--bh-diagram-card-width);
+  --wf-node-content-max-width: calc(2 * 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);
@@ -227,6 +244,19 @@
   --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);
+  /* Group frames (the native `wf-group` node). Package-owned variables over foundation roles; the native layout
+     reads padding and header gap from here, so both stay plain lengths. */
+  --wf-group-border: var(--bh-color-border);
+  --wf-group-border-width: var(--bh-border-width-default);
+  --wf-group-radius: var(--bh-radius-card);
+  --wf-group-bg: var(--bh-color-surface-subtle);
+  --wf-group-nested-bg: var(--bh-color-background-neutral);
+  --wf-group-padding: var(--bh-space-stack);
+  --wf-group-header-gap: var(--bh-space-150);
+  /* The Shift + drag selection box: the same recipe as `.bh-vue-flow .vue-flow__selection` (transparent, dashed). */
+  --wf-selection-bg: transparent;
+  --wf-selection-border: var(--bh-color-border-focus);
+  --wf-selection-border-width: var(--bh-border-width-selected);
 }
 /* Opt-in graph contrast uses theme-resolved semantic ink, not a fixed light-mode
    palette. Preserve selection/failure colours and native edge/arrow pairing. */
@@ -241,6 +271,7 @@
   --wf-node-muted: var(--bh-color-text);
   --wf-node-kind-fg: var(--bh-color-text);
   --wf-tone-fg: var(--bh-color-text);
+  --wf-group-border: var(--bh-color-text);
 }
 /* Execution belongs to the node outline/content; the independent outer ring
    continues to carry selection, hover and keyboard focus. */
@@ -292,9 +323,21 @@
 .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);
 }
+/* A card may break a long unbroken title anywhere. A diamond or ellipse wraps its title and its kind caption at word
+   boundaries and never truncates them: its side padding follows its width, so a mid-word break reads as two words and
+   an ellipsis hides the node's own name. Only a single word wider than the whole content box breaks. */
+.bh-workflow-canvas .wf-node:not(.wf-node--shape-diamond, .wf-node--shape-ellipse) .wf-node__title {
+  overflow-wrap: anywhere;
+}
+.bh-workflow-canvas :is(.wf-node--shape-diamond, .wf-node--shape-ellipse) :is(.wf-node__title, .wf-node__kind) {
+  max-width: 100%;
+  white-space: normal;
+  overflow: visible;
+  overflow-wrap: break-word;
+  text-overflow: clip;
+}
 .bh-workflow-canvas .wf-node__head { height: auto; }
 .bh-workflow-canvas .wf-node__subtitle {
   font: var(--bh-font-body-default);
@@ -310,6 +353,18 @@
   width: auto;
   flex: none;
 }
+/* Opt-in ordinary-card recipe. The native theme owns the content width mechanism within the
+   `--wf-node-content-*` roles bound above; the head and logo flex are global rules here. Title/kind
+   wrap and the logo bound keep long titles and every logo readable. */
+.bh-workflow-canvas .wf-node[data-sizing='content']:not(.wf-node--shape-diamond, .wf-node--shape-ellipse)
+  :is(.wf-node__title, .wf-node__kind) {
+  white-space: normal;
+  overflow: visible;
+  overflow-wrap: anywhere;
+}
+.bh-workflow-canvas .wf-node[data-sizing='content'] .wf-node__logos > img {
+  max-width: 100%;
+}
 .bh-workflow-canvas .wf-node__execution > svg,
 .bh-workflow-canvas .wf-node__indicators svg {
   width: auto;
@@ -359,11 +414,57 @@
   width: auto;
   height: var(--bh-size-icon-default);
 }
+/* Native find box (WorkflowFind, the viewer's `/` search). It is an overlay holding a
+   search field and result rows: surface.overlay with elevation.shadow.overlay and
+   radius.overlay, no border (overlays are set apart by surface and shadow), a
+   color.border divider under the field. Rows take the overlay item states one step
+   apart: hover surface.overlay.hover; the keyboard-active row (aria-selected)
+   surface.overlay.selected plus the border.selected start bar as its non-colour cue;
+   that row hovered surface.overlay.selected.hover. Text keeps color.text in every
+   state. The shared --wf-list-* roles also paint the jump list and dock menu rows. */
+.bh-workflow-canvas .wf-canvas {
+  --wf-list-bg: var(--bh-color-surface-overlay);
+  --wf-list-fg: var(--bh-color-text);
+  --wf-list-muted: var(--bh-color-text-subtle);
+  --wf-list-border: var(--bh-color-border);
+  --wf-list-hover: var(--bh-color-surface-overlay-hover);
+  --wf-list-active: var(--bh-color-surface-overlay-selected);
+  --wf-list-active-hover: var(--bh-color-surface-overlay-selected-hover);
+  --wf-list-indicator: var(--bh-color-border-selected);
+  --wf-list-indicator-width: var(--bh-border-width-selected);
+  --wf-list-failure: var(--bh-color-text-danger);
+  --wf-find-border-width: 0;
+  --wf-find-radius: var(--bh-radius-overlay);
+  --wf-find-input-padding: var(--bh-space-075) var(--bh-space-control-x);
+  --wf-find-placeholder: var(--bh-color-text-subtlest);
+  --wf-find-list-padding: var(--bh-space-overlay);
+  --wf-find-option-padding: var(--bh-space-075) var(--bh-space-item-x);
+  --wf-find-option-min-height: var(--bh-size-control-default);
+  --wf-find-option-radius: var(--bh-radius-item);
+  --wf-find-empty-padding: var(--bh-space-075) var(--bh-space-control-x);
+}
+/* Search field and empty state body.default, result name label.default, the id of a
+   node without a name code.default, the kind label body.small in color.text.subtle
+   (--wf-list-muted). Names wrap at word boundaries and are never truncated. Focus is
+   the field's ring around the whole box (the companion's --wf-focus-outline). */
+.bh-workflow-canvas .wf-find {
+  font: var(--bh-font-body-default);
+}
+.bh-workflow-canvas .wf-find__text {
+  font: var(--bh-font-label-default);
+}
+.bh-workflow-canvas .wf-find__id {
+  font: var(--bh-font-code-default);
+}
+.bh-workflow-canvas .wf-find__detail {
+  font: var(--bh-font-body-small);
+}
 @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));
+    --wf-find-option-min-height: var(--bh-size-target-touch);
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beehexa/vueflow-tokens",
-  "version": "2611.6.1",
-  "description": "Source-backed Beehexa theme, semantic categories and geometry for VueFlow 1",
+  "version": "2611.8.1",
+  "description": "Source-backed Beehexa theme and generic colour tones for VueFlow 1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/beehexacorp/beehexa.design.git",
@@ -29,7 +29,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@beehexa/design-tokens": "2611.6.1"
+    "@beehexa/design-tokens": "2611.8.1"
   },
   "peerDependencies": {
     "@vue-flow/core": "^1.0.0",