@arronqzy/react-blueprint 1.0.10 → 1.0.11

package/dist/blueprint.css

@@ -0,0 +1,327 @@
+/* 画布：与 panel / next-themes 主题一致 */
+.bp-canvas,
+[data-workspace-region="blueprint"] .bp-canvas {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+.bp-canvas .react-flow__pane,
+.bp-flow.react-flow__pane {
+  cursor: default;
+}
+
+.bp-canvas .react-flow,
+.bp-flow.react-flow,
+[data-workspace-region="blueprint"] .react-flow {
+  --xy-background-color: transparent;
+  --xy-edge-stroke: #2563eb;
+  --xy-edge-stroke-width: 2.5;
+  --xy-edge-stroke-selected: #1d4ed8;
+  --xy-connectionline-stroke: #2563eb;
+  --xy-connectionline-stroke-width: 2.5;
+  --xy-handle-background-color: hsl(var(--primary));
+  --xy-handle-border-color: hsl(var(--background));
+  background-color: transparent;
+}
+
+/*
+ * 全局 reset（apps/web style.css、Tailwind preflight）会给 svg 设 max-width:100%，
+ * 导致 React Flow 边线 SVG 坐标系被压扁；连线预览单独有 z-index:1001 所以能看见。
+ */
+.bp-canvas svg.react-flow__connectionline,
+.bp-canvas .react-flow__edges svg,
+.bp-flow svg.react-flow__connectionline,
+.bp-flow .react-flow__edges svg,
+[data-workspace-region="blueprint"] svg.react-flow__connectionline,
+[data-workspace-region="blueprint"] .react-flow__edges svg {
+  display: block;
+  max-width: none !important;
+  max-height: none !important;
+  width: auto !important;
+  height: auto !important;
+  overflow: visible !important;
+}
+
+/*
+ * 边层必须在节点之上：.react-flow__edges 与 .react-flow__nodes 为兄弟节点，
+ * 默认 DOM 顺序下节点后渲染会盖住边；连接线因有 z-index:1001 不受影响。
+ */
+.bp-canvas .react-flow__edges,
+.bp-flow .react-flow__edges,
+[data-workspace-region="blueprint"] .react-flow__edges {
+  z-index: 1000 !important;
+  pointer-events: none;
+}
+
+.bp-canvas .react-flow__nodes,
+.bp-flow .react-flow__nodes,
+[data-workspace-region="blueprint"] .react-flow__nodes {
+  z-index: 0 !important;
+}
+
+.bp-canvas .react-flow__edge,
+.bp-flow .react-flow__edge,
+[data-workspace-region="blueprint"] .react-flow__edge {
+  pointer-events: visibleStroke;
+}
+
+/* 持久边 path：强制描边（覆盖 currentColor / 主题色） */
+.bp-canvas .react-flow__edges path.react-flow__edge-path,
+.bp-canvas .react-flow__edges path.bp-edge-visible,
+.bp-flow .react-flow__edges path.react-flow__edge-path,
+.bp-flow .react-flow__edges path.bp-edge-visible,
+[data-workspace-region="blueprint"] .react-flow__edges path.react-flow__edge-path,
+[data-workspace-region="blueprint"] .react-flow__edges path.bp-edge-visible {
+  fill: none !important;
+  stroke: #2563eb !important;
+  stroke-width: 2.5px !important;
+  opacity: 1 !important;
+}
+
+.bp-canvas .react-flow__edge.selected path.react-flow__edge-path,
+.bp-flow .react-flow__edge.selected path.react-flow__edge-path,
+[data-workspace-region="blueprint"] .react-flow__edge.selected path.react-flow__edge-path {
+  stroke: #1d4ed8 !important;
+  stroke-width: 3px !important;
+}
+
+.bp-canvas .react-flow__edge.bp-edge--signal-true path.react-flow__edge-path,
+.bp-flow .react-flow__edge.bp-edge--signal-true path.react-flow__edge-path,
+[data-workspace-region="blueprint"] .react-flow__edge.bp-edge--signal-true path.react-flow__edge-path {
+  stroke: #16a34a !important;
+  stroke-width: 3px !important;
+}
+
+.bp-canvas .react-flow__edge.bp-edge--signal-false path.react-flow__edge-path,
+.bp-flow .react-flow__edge.bp-edge--signal-false path.react-flow__edge-path,
+[data-workspace-region="blueprint"] .react-flow__edge.bp-edge--signal-false path.react-flow__edge-path {
+  stroke: #dc2626 !important;
+  stroke-width: 3px !important;
+}
+
+.bp-canvas .react-flow__edge.bp-edge--signal-true .react-flow__arrowhead polyline,
+.bp-flow .react-flow__edge.bp-edge--signal-true .react-flow__arrowhead polyline,
+[data-workspace-region="blueprint"] .react-flow__edge.bp-edge--signal-true .react-flow__arrowhead polyline {
+  stroke: #16a34a;
+  fill: #16a34a;
+}
+
+.bp-canvas .react-flow__edge.bp-edge--signal-false .react-flow__arrowhead polyline,
+.bp-flow .react-flow__edge.bp-edge--signal-false .react-flow__arrowhead polyline,
+[data-workspace-region="blueprint"] .react-flow__edge.bp-edge--signal-false .react-flow__arrowhead polyline {
+  stroke: #dc2626;
+  fill: #dc2626;
+}
+
+.bp-canvas .react-flow__edge.bp-edge--signal-clock-blue path.react-flow__edge-path,
+.bp-flow .react-flow__edge.bp-edge--signal-clock-blue path.react-flow__edge-path,
+[data-workspace-region="blueprint"] .react-flow__edge.bp-edge--signal-clock-blue path.react-flow__edge-path {
+  stroke: #2563eb !important;
+  stroke-width: 3px !important;
+}
+
+.bp-canvas .react-flow__edge.bp-edge--signal-clock-blue .react-flow__arrowhead polyline,
+.bp-flow .react-flow__edge.bp-edge--signal-clock-blue .react-flow__arrowhead polyline,
+[data-workspace-region="blueprint"] .react-flow__edge.bp-edge--signal-clock-blue .react-flow__arrowhead polyline {
+  stroke: #2563eb;
+  fill: #2563eb;
+}
+
+.bp-canvas .react-flow__arrowhead polyline,
+.bp-flow .react-flow__arrowhead polyline,
+[data-workspace-region="blueprint"] .react-flow__arrowhead polyline {
+  stroke: #2563eb;
+  fill: #2563eb;
+}
+
+.bp-canvas .react-flow__connection-path,
+.bp-flow .react-flow__connection-path,
+[data-workspace-region="blueprint"] .react-flow__connection-path {
+  fill: none !important;
+  stroke: #2563eb !important;
+  stroke-width: 2.5px !important;
+}
+
+.bp-canvas .react-flow__edge-interaction,
+.bp-flow .react-flow__edge-interaction,
+[data-workspace-region="blueprint"] .react-flow__edge-interaction {
+  pointer-events: stroke;
+  stroke: transparent !important;
+  stroke-opacity: 0 !important;
+  stroke-width: 18px !important;
+}
+
+.bp-canvas .react-flow__edge.selected .react-flow__edge-interaction,
+.bp-flow .react-flow__edge.selected .react-flow__edge-interaction,
+[data-workspace-region="blueprint"] .react-flow__edge.selected .react-flow__edge-interaction {
+  pointer-events: stroke;
+}
+
+/* 节点容器：去掉默认包裹样式 */
+.bp-canvas .react-flow__node,
+.bp-flow .react-flow__node,
+[data-workspace-region="blueprint"] .react-flow__node {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+}
+
+/* 连接点：禁止 transform，避免覆盖 React Flow 的 translate(-50%, -50%) 定位 */
+.bp-canvas .react-flow__handle.bp-flow-handle,
+.bp-flow .react-flow__handle.bp-flow-handle,
+[data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle {
+  z-index: 3;
+  width: 10px;
+  height: 10px;
+  min-width: 10px;
+  min-height: 10px;
+  border: 2px solid hsl(var(--background)) !important;
+  border-radius: 9999px;
+  background-color: hsl(var(--foreground) / 0.42) !important;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.bp-canvas .react-flow__handle.bp-flow-handle:hover,
+.bp-flow .react-flow__handle.bp-flow-handle:hover,
+[data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle:hover {
+  background-color: hsl(var(--primary)) !important;
+  border-color: hsl(var(--background)) !important;
+  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.28);
+}
+
+.bp-canvas .react-flow__handle.bp-flow-handle--target,
+.bp-flow .react-flow__handle.bp-flow-handle--target,
+[data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle--target {
+  background-color: hsl(var(--foreground) / 0.48) !important;
+}
+
+.bp-canvas .react-flow__handle.bp-flow-handle--source,
+.bp-flow .react-flow__handle.bp-flow-handle--source,
+[data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle--source {
+  background-color: hsl(var(--primary) / 0.72) !important;
+}
+
+.bp-node--selected .bp-flow-handle {
+  border-color: hsl(var(--card)) !important;
+  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.35);
+}
+
+.bp-node--selected .bp-flow-handle--target {
+  background-color: hsl(var(--foreground) / 0.55) !important;
+}
+
+.bp-node--selected .bp-flow-handle--source {
+  background-color: hsl(var(--primary)) !important;
+}
+
+.bp-node--execution-true .bp-node-card {
+  border-color: rgb(22 163 74 / 0.65);
+  box-shadow:
+    0 0 0 1px rgb(22 163 74 / 0.35),
+    0 4px 14px rgb(22 163 74 / 0.18);
+}
+
+.bp-node--execution-true .bp-flow-handle {
+  border-color: hsl(var(--card));
+  box-shadow: 0 0 0 2px rgb(22 163 74 / 0.45);
+}
+
+.bp-node--execution-true .bp-flow-handle--source {
+  background-color: #16a34a !important;
+}
+
+.bp-node--execution-true .bp-flow-handle--target {
+  background-color: rgb(22 163 74 / 0.55) !important;
+}
+
+.bp-node--execution-false .bp-node-card {
+  border-color: hsl(var(--destructive) / 0.65);
+  box-shadow:
+    0 0 0 1px hsl(var(--destructive) / 0.4),
+    0 4px 14px hsl(var(--destructive) / 0.16);
+}
+
+.bp-node--execution-false .bp-flow-handle {
+  border-color: hsl(var(--card));
+  box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.4);
+}
+
+.bp-node--execution-false .bp-flow-handle--source {
+  background-color: hsl(var(--destructive)) !important;
+}
+
+.bp-node--execution-false .bp-flow-handle--target {
+  background-color: hsl(var(--destructive) / 0.55) !important;
+}
+
+/* 生命周期节点无输入口：隐藏任何左侧/目标连接点（含旧数据产生的幽灵 handle） */
+.bp-node--lifecycle .react-flow__handle.bp-flow-handle--target,
+.bp-node--lifecycle .react-flow__handle-left,
+.bp-node--lifecycle .react-flow__handle[data-handlepos="left"] {
+  display: none !important;
+  visibility: hidden !important;
+  pointer-events: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  opacity: 0 !important;
+}
+
+.bp-canvas .react-flow__handle.bp-flow-handle--signal,
+.bp-flow .react-flow__handle.bp-flow-handle--signal,
+[data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle--signal {
+  background-color: hsl(38 92% 50% / 0.75) !important;
+  width: 8px;
+  height: 8px;
+}
+
+.bp-node--selected .bp-flow-handle--signal {
+  background-color: hsl(38 92% 50%) !important;
+}
+
+/* 右键菜单 */
+.bp-context-menu {
+  position: fixed;
+  z-index: 10050;
+  min-width: 148px;
+  padding: 4px;
+  border-radius: 8px;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
+}
+
+.bp-context-menu__item {
+  display: block;
+  width: 100%;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  text-align: left;
+  font-size: 12px;
+  color: inherit;
+  cursor: pointer;
+}
+
+.bp-context-menu__item:hover {
+  background: hsl(var(--accent));
+}
+
+.bp-context-menu__item--danger {
+  color: hsl(var(--destructive));
+}
+
+.bp-context-menu__item--danger:hover {
+  background: hsl(var(--destructive) / 0.1);
+}
+
+.bp-context-menu__separator {
+  height: 1px;
+  margin: 4px 0;
+  background: hsl(var(--border));
+}

package/package.json

@@ -1,19 +1,25 @@
 {
   "name": "@arronqzy/react-blueprint",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "",
+  "files": [
+    "index.ts",
+    "src",
+    "dist",
+    "README.md"
+  ],
   "main": "index.ts",
   "exports": {
     ".": "./index.ts",
-    "./blueprint.css": "./src/blueprint.css"
+    "./blueprint.css": "./dist/blueprint.css"
   },
   "dependencies": {
     "react": "^19",
     "dayjs": "^1.11.13",
     "react-dom": "^19",
     "@xyflow/react": "^12.9.3",
-    "@arronqzy/i18n": "0.1.7",
     "@arronqzy/blueprint-dsl": "1.0.9",
+    "@arronqzy/i18n": "0.1.7",
     "@arronqzy/react-rx-store": "1.1.5",
     "@arronqzy/ui": "1.0.6"
   },
@@ -38,7 +44,8 @@
   "scripts": {
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "build": "pnpm run lint && pnpm run typecheck && vite build",
+    "build:css": "mkdir -p dist && cp src/blueprint.css dist/blueprint.css",
+    "build": "pnpm run lint && pnpm run typecheck && pnpm run build:css",
     "dev": "vite"
   }
 }

package/.eslintrc.cjs

@@ -1,5 +0,0 @@
-/** @type {import("eslint").Linter.Config} */
-module.exports = {
-  root: true,
-  extends: ["@arronqzy/eslint-config/index.js"],
-};

package/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>blue-print</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/postcss.config.cjs

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

package/tailwind.config.ts

@@ -1,6 +0,0 @@
-import preset from "../tailwind/src/preset";
-
-export default {
-  presets: [preset],
-  content: ["./index.html", "./src/**/*.{ts,tsx}"],
-};

package/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "extends": "@arronqzy/typescript-config/react-library.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@arronqzy/blueprint-dsl": ["../blueprint-dsl/src/index.ts"],
-      "@arronqzy/ui": ["../ui/index.ts"]
-    }
-  },
-  "include": ["."],
-  "exclude": ["node_modules"]
-}

package/vite.config.ts

@@ -1,16 +0,0 @@
-import path from "node:path";
-
-import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
-
-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      "@arronqzy/ui": path.resolve(process.cwd(), "../ui/index.ts"),
-    },
-  },
-  server: {
-    port: 31012,
-  },
-});