@beehexa/vueflow-tokens 0.0.0-stage → 2611.5.2

package/README.md

@@ -1,3 +1,102 @@
-# Temporary Holding Version
+# @beehexa/vueflow-tokens
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Typed ESM Beehexa adapter for VueFlow 1. The authoritative design values are in
+`@beehexa/design-tokens`, not in an application-owned palette. Vue 3 and VueFlow core,
+controls and minimap are peers; no framework source is copied or bundled.
+
+## Integrate
+
+Import native Beehexa token CSS once (16px root, 14px body). In the lazy graph entry,
+load upstream core, theme, controls and minimap CSS before `@beehexa/vueflow-tokens/css`.
+
+```ts
+import { createVueFlowTheme } from '@beehexa/vueflow-tokens'
+import '@beehexa/vueflow-tokens/css'
+
+const theme = createVueFlowTheme({ dark: false, locale: 'en' })
+```
+
+Bind `theme.class`, `theme.style` and `theme.flowOptions` to the actual `<VueFlow>`; the viewport object is typed with `FlowProps`, not deprecated `FlowOptions`.
+Bind `theme.background` to `<Background>` and `theme.minimap` to `<MiniMap>`; show
+`<Controls>`. Recompute the theme when the theme or locale changes. Keep existing
+ready/error handlers and call the actual viewport `fitView({ padding: 0.2 })` after
+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.
+- `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 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,
+not global1001/1002. This is not an editor takeover at `z-index.fullscreen` (450).
+
+## Build and validation
+
+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.
+
+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
+markers, controls/minimap, zoom/snap/fit, expanded/cyclic graphs, fullscreen/ESC and PNG
+export. Typed configuration is not visual or accessibility proof.

package/dist/css.d.ts

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

package/dist/index.d.ts

@@ -0,0 +1,133 @@
+import type { CSSProperties } from 'vue';
+import { type FlowProps, type Node, type Edge, type Styles } from '@vue-flow/core';
+export interface VueFlowThemeOptions {
+    dark?: boolean;
+    locale?: 'en' | 'vi';
+}
+export type FlowCategory = 'task' | 'dependency' | 'transformation' | 'validation' | 'pushStep' | 'decision' | 'loop' | 'grouped';
+export type FlowEdgeCategory = 'dependency' | 'transformation' | 'dataFlow' | 'conditional';
+export interface FlowNodePalette {
+    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;
+    readonly radius: number;
+    readonly handle: number;
+};
+export declare const FLOW_ICON: {
+    readonly small: number;
+    readonly medium: number;
+    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 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;
+    snapToGrid: true;
+    snapGrid: [number, number];
+    fitViewOnInit: true;
+};
+export interface VueFlowTheme {
+    class: 'bh-vue-flow';
+    style: CSSProperties;
+    flowOptions: Partial<FlowProps>;
+    minimap: {
+        nodeColor: (node: Node) => string;
+        maskColor: string;
+        nodeStrokeColor: string;
+    };
+    background: {
+        patternColor: string;
+        bgColor: string;
+    };
+}
+/** 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;
+export interface FlowNodeState {
+    hovered?: boolean;
+    selected?: boolean;
+    selfDependency?: boolean;
+}
+export interface FlowNodeStyles {
+    container: Styles;
+    content: CSSProperties;
+    icon: CSSProperties;
+    label: CSSProperties;
+    text: CSSProperties;
+    loadingIcon: CSSProperties;
+    connectorLogo: CSSProperties;
+    connectorFlow: CSSProperties;
+    connectorArrow: CSSProperties;
+}
+/** 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

@@ -0,0 +1,213 @@
+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 = {}));
+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')
+};
+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, {
+            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') }
+        }];
+}));
+/** CSS bindings stay reactive to the source theme/locale without rebuilding a graph. */
+export function getNodeColorPalette(category) {
+    return palettes[category];
+}
+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'];
+    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
+};
+/** Apply to the actual VueFlow host; import the CSS companion after upstream styles. */
+export function createVueFlowTheme(options = {}) {
+    const mode = { ...tokens.light, ...(options.dark ? tokens.dark : {}) };
+    const typography = options.locale === 'vi' ? { ...mode, ...tokens.vi } : mode;
+    return {
+        class: 'bh-vue-flow',
+        style: {
+            ...Object.fromEntries(Object.entries(mode).filter(([name]) => name.startsWith('color.') || name.startsWith('flow.category.')).map(([name, value]) => [`--bh-${name.replaceAll('.', '-')}`, value])),
+            ...(options.locale === 'vi' ? Object.fromEntries(Object.entries(tokens.vi)
+                .map(([name, value]) => [`--bh-${name.replaceAll('.', '-')}`, value])) : {}),
+            '--bh-flow-surface': mode['color.surface.page'],
+            '--bh-flow-font': typography['font.body.default'],
+            '--bh-flow-focus': mode['color.border.focus'],
+            '--bh-flow-selected': mode['color.border.selected'],
+            '--bh-flow-error': mode['color.border.danger']
+        },
+        flowOptions: { ...FLOW_VIEWPORT, snapGrid: [...FLOW_VIEWPORT.snapGrid] },
+        minimap: {
+            nodeColor: node => getNodeColor(node.type ?? 'task'),
+            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) {
+    const target = nodes.find(node => node.id === edge.target);
+    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: edge.markerEnd === MarkerType.Arrow ? MarkerType.Arrow : MarkerType.ArrowClosed
+            }),
+            color: stroke, width: FLOW_EDGE.marker, height: FLOW_EDGE.marker
+        }
+    };
+}
+/** 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;
+    const label = {
+        font: variable('font.label.default'), color: palette.text, textAlign: 'center',
+        overflowWrap: 'anywhere', width: '100%'
+    };
+    const icon = {
+        color: palette.primary, fontSize: variable('size.icon.large'),
+        display: 'flex', alignItems: 'center', justifyContent: 'center'
+    };
+    return {
+        container: {
+            width: `${dimensions.width}px`, height: `${dimensions.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'),
+            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,
+            outlineOffset: variable('state.focus.offset')
+        },
+        content: {
+            display: 'flex', flexDirection: 'column', justifyContent: 'center',
+            alignItems: 'center', boxSizing: 'border-box', height: '100%', width: '100%',
+            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') }
+    };
+}
+/** 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

@@ -0,0 +1,301 @@
+.bh-vue-flow.vue-flow {
+  background: var(--bh-flow-surface, var(--bh-color-surface-page));
+  color: var(--bh-color-text);
+  font: var(--bh-flow-font, var(--bh-font-body-default));
+}
+.bh-vue-flow .vue-flow__node {
+  --vf-node-bg: var(--bh-color-surface);
+  --vf-node-text: var(--bh-color-text);
+  --vf-node-color: var(--bh-flow-category-task-border);
+  --vf-handle: var(--bh-color-icon);
+  --vf-box-shadow: var(--bh-color-border-selected);
+  box-sizing: border-box;
+  font: inherit;
+  color: var(--bh-color-text);
+}
+.bh-vue-flow .vue-flow__node-default,
+.bh-vue-flow .vue-flow__node-input,
+.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-100);
+  padding: var(--bh-space-150);
+}
+.bh-vue-flow .vue-flow__node-default.selectable:hover,
+.bh-vue-flow .vue-flow__node-input.selectable:hover,
+.bh-vue-flow .vue-flow__node-output.selectable:hover {
+  box-shadow: var(--bh-elevation-shadow-raised);
+}
+.bh-vue-flow .vue-flow__node.selected {
+  outline: var(--bh-border-width-selected) solid var(--bh-flow-selected, var(--bh-color-border-selected));
+  outline-offset: var(--bh-state-focus-offset);
+  box-shadow: 0 0 0 var(--bh-border-width-accent) var(--bh-color-border-selected);
+}
+.bh-vue-flow .vue-flow__node:focus-visible,
+.bh-vue-flow .vue-flow__node :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;
+}
+.bh-vue-flow .vue-flow__handle {
+  width: var(--bh-flow-edge-handle);
+  height: var(--bh-flow-edge-handle);
+  border: var(--bh-border-width-selected) solid var(--bh-color-surface);
+  background: var(--bh-color-icon);
+}
+.bh-vue-flow .vue-flow__edge-path,
+.bh-vue-flow .vue-flow__connection-path {
+  stroke: var(--bh-flow-category-task-border);
+  stroke-width: var(--bh-flow-edge-width);
+}
+.bh-vue-flow .vue-flow__edge.updating .vue-flow__edge-path {
+  stroke: var(--bh-color-border-focus);
+}
+.bh-vue-flow .vue-flow__edge.selected .vue-flow__edge-path {
+  stroke-width: var(--bh-border-width-accent);
+}
+.bh-vue-flow .vue-flow__edge-text {
+  fill: var(--bh-color-text);
+  font: var(--bh-font-label-small);
+}
+.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);
+  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-100);
+  box-shadow: var(--bh-elevation-shadow-raised);
+}
+.bh-vue-flow .vue-flow__controls-button {
+  box-sizing: border-box;
+  width: var(--bh-size-control-default);
+  height: var(--bh-size-control-default);
+  padding: var(--bh-space-100);
+  background: var(--bh-color-surface);
+  color: var(--bh-color-icon);
+  fill: currentColor;
+  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);
+}
+.bh-vue-flow .vue-flow__controls-button:active {
+  background: var(--bh-color-background-neutral-subtle-pressed);
+}
+.bh-vue-flow .vue-flow__controls-button:disabled {
+  background: var(--bh-color-background-disabled);
+  color: var(--bh-color-icon-disabled);
+}
+.bh-vue-flow .vue-flow__controls-button:disabled svg { fill-opacity: 1; }
+.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-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); }
+.bh-vue-flow .vue-flow__attribution {
+  background: var(--bh-color-surface);
+  color: var(--bh-color-text-subtle);
+  font: var(--bh-font-body-small);
+}
+@media (pointer: coarse) {
+  .bh-vue-flow .vue-flow__controls-button {
+    width: var(--bh-size-target-touch);
+    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,51 @@
 {
   "name": "@beehexa/vueflow-tokens",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "2611.5.2",
+  "description": "Source-backed Beehexa theme, semantic categories and geometry for VueFlow 1",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/beehexacorp/beehexa.design.git",
+    "directory": "packages/vueflow-tokens"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "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.5.2"
+  },
+  "peerDependencies": {
+    "@vue-flow/core": "^1.0.0",
+    "@vue-flow/controls": "^1.0.0",
+    "@vue-flow/minimap": "^1.0.0",
+    "vue": "^3.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "node ../../scripts/build-runtime-packages.mjs vueflow-tokens",
+    "check": "node ../../scripts/build-runtime-packages.mjs vueflow-tokens --check",
+    "prepack": "npm run build"
+  },
+  "engines": {
+    "node": ">=22.22.0"
+  }
+}