@beehexa/vueflow-tokens 0.0.0-stage → 2611.3.4

package/README.md

@@ -1,3 +1,65 @@
-# 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.
+- 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.
+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.
+
+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-adapters.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,117 @@
+import type { CSSProperties } from 'vue';
+import { type FlowProps, type Node, type Edge } 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 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: CSSProperties;
+    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;

package/dist/index.js

@@ -0,0 +1,159 @@
+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', 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;
+}
+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 ?? 'task');
+    return {
+        ...edge, animated: false,
+        style: { ...(typeof edge.style === 'object' ? edge.style : {}), stroke },
+        markerEnd: {
+            ...(typeof edge.markerEnd === 'object' ? edge.markerEnd : { type: 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') }
+    };
+}

package/dist/styles.css

@@ -0,0 +1,116 @@
+.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-075);
+  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__controls-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 .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 {
+  background: var(--bh-color-surface);
+  border: var(--bh-border-width-default) solid var(--bh-color-border);
+  border-radius: var(--bh-radius-075);
+  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-bottom: var(--bh-border-width-default) solid var(--bh-color-border);
+}
+.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-075);
+  box-shadow: var(--bh-elevation-shadow-raised);
+}
+.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);
+  }
+}

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.3.4",
+  "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.3.4"
+  },
+  "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-adapters.mjs vueflow-tokens",
+    "check": "node ../../scripts/build-adapters.mjs vueflow-tokens --check",
+    "prepack": "npm run build"
+  },
+  "engines": {
+    "node": ">=22.22.0"
+  }
+}