@yh-ui/flow 1.0.1 → 1.0.5

package/dist/__tests__/screenshot-capture.test.mjs

@@ -0,0 +1,124 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { captureElement } from "../utils/screenshot.mjs";
+describe("flow/utils/screenshot - captureElement", () => {
+  let mockToPng;
+  let mockToJpeg;
+  let mockToWebp;
+  let mockFetch;
+  beforeEach(() => {
+    vi.stubGlobal(
+      "fetch",
+      mockFetch = vi.fn().mockResolvedValue(
+        new Response(new Blob(["test"], { type: "image/png" }))
+      )
+    );
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+  const createMockHtmlToImage = () => {
+    mockToPng = vi.fn().mockResolvedValue("data:image/png;base64,test");
+    mockToJpeg = vi.fn().mockResolvedValue("data:image/jpeg;base64,test");
+    mockToWebp = vi.fn().mockResolvedValue("data:image/webp;base64,test");
+    return { toPng: mockToPng, toJpeg: mockToJpeg, toWebp: mockToWebp };
+  };
+  const createMockElement = () => {
+    const el = document.createElement("div");
+    Object.defineProperty(el, "offsetWidth", { value: 100, configurable: true });
+    Object.defineProperty(el, "offsetHeight", { value: 200, configurable: true });
+    return el;
+  };
+  const defaultOptions = {
+    imageType: "png",
+    imageQuality: 1,
+    pixelRatio: 2,
+    backgroundColor: "#ffffff"
+  };
+  describe("png capture", () => {
+    it("should capture as png", async () => {
+      vi.doMock("html-to-image", () => createMockHtmlToImage(), { virtual: true });
+      const mod = await import("html-to-image");
+      const htmlToImage = mod.toPng ? mod : mod.default;
+      const el = createMockElement();
+      const result = await captureElement(el, { ...defaultOptions, imageType: "png" });
+      expect(result.extension).toBe("png");
+      expect(result.mimeType).toBe("image/png");
+    });
+  });
+  describe("jpeg capture", () => {
+    it("should capture as jpeg", async () => {
+      const htmlToImage = createMockHtmlToImage();
+      vi.doMock("html-to-image", () => htmlToImage, { virtual: true });
+      const el = createMockElement();
+      const result = await captureElement(el, { ...defaultOptions, imageType: "jpeg" });
+      expect(result.extension).toBe("jpeg");
+      expect(result.mimeType).toBe("image/jpeg");
+    });
+  });
+  describe("webp capture", () => {
+    it("should capture as webp when supported", async () => {
+      const htmlToImage = createMockHtmlToImage();
+      vi.doMock("html-to-image", () => htmlToImage, { virtual: true });
+      const el = createMockElement();
+      const result = await captureElement(el, { ...defaultOptions, imageType: "webp" });
+      expect(result.extension).toBe("webp");
+      expect(result.mimeType).toBe("image/webp");
+    });
+    it("should fall back to png when webp not supported", async () => {
+      const htmlToImage = {
+        toPng: vi.fn().mockResolvedValue("data:image/png;base64,test"),
+        toJpeg: vi.fn().mockResolvedValue("data:image/jpeg;base64,test"),
+        toWebp: void 0
+      };
+      vi.doMock("html-to-image", () => htmlToImage, { virtual: true });
+      const el = createMockElement();
+      const result = await captureElement(el, { ...defaultOptions, imageType: "webp" });
+      expect(result.extension).toBe("png");
+    });
+  });
+  describe("dimensions", () => {
+    it("should calculate dimensions with pixel ratio", async () => {
+      const htmlToImage = createMockHtmlToImage();
+      vi.doMock("html-to-image", () => htmlToImage, { virtual: true });
+      const el = createMockElement();
+      const result = await captureElement(el, { ...defaultOptions, pixelRatio: 3 });
+      expect(result.width).toBe(300);
+      expect(result.height).toBe(600);
+    });
+  });
+  describe("image quality", () => {
+    it("should pass quality option for jpeg", async () => {
+      const htmlToImage = createMockHtmlToImage();
+      vi.doMock("html-to-image", () => htmlToImage, { virtual: true });
+      const el = createMockElement();
+      await captureElement(el, { ...defaultOptions, imageType: "jpeg", imageQuality: 0.8 });
+      expect(mockToJpeg).toHaveBeenCalledWith(el, expect.objectContaining({ quality: 0.8 }));
+    });
+    it("should pass quality option for webp", async () => {
+      const htmlToImage = createMockHtmlToImage();
+      vi.doMock("html-to-image", () => htmlToImage, { virtual: true });
+      const el = createMockElement();
+      await captureElement(el, { ...defaultOptions, imageType: "webp", imageQuality: 0.9 });
+      expect(mockToWebp).toHaveBeenCalledWith(el, expect.objectContaining({ quality: 0.9 }));
+    });
+  });
+  describe("background color", () => {
+    it("should pass background color option", async () => {
+      const htmlToImage = createMockHtmlToImage();
+      vi.doMock("html-to-image", () => htmlToImage, { virtual: true });
+      const el = createMockElement();
+      await captureElement(el, { ...defaultOptions, backgroundColor: "#ff0000" });
+      expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ backgroundColor: "#ff0000" }));
+    });
+  });
+  describe("data URL to blob conversion", () => {
+    it("should convert data URL to blob", async () => {
+      const htmlToImage = createMockHtmlToImage();
+      vi.doMock("html-to-image", () => htmlToImage, { virtual: true });
+      const el = createMockElement();
+      const result = await captureElement(el, defaultOptions);
+      expect(result.blob).toBeInstanceOf(Blob);
+      expect(mockFetch).toHaveBeenCalled();
+    });
+  });
+});

package/dist/__tests__/screenshot.test.cjs

@@ -0,0 +1,74 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _screenshot = require("../utils/screenshot.cjs");
+(0, _vitest.describe)("flow/utils/screenshot", () => {
+  let clickSpy;
+  (0, _vitest.beforeEach)(() => {
+    clickSpy = _vitest.vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(() => {});
+  });
+  (0, _vitest.afterEach)(() => {
+    clickSpy.mockRestore();
+  });
+  (0, _vitest.describe)("triggerDownload", () => {
+    (0, _vitest.it)("should create download link and click it", () => {
+      const dataUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==";
+      (0, _screenshot.triggerDownload)(dataUrl, "test-flow", "png");
+      (0, _vitest.expect)(clickSpy).toHaveBeenCalled();
+    });
+    (0, _vitest.it)("should set correct filename with extension", () => {
+      const dataUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==";
+      (0, _screenshot.triggerDownload)(dataUrl, "my-flow-chart", "jpeg");
+      (0, _vitest.expect)(clickSpy).toHaveBeenCalled();
+    });
+    (0, _vitest.it)("should handle webp extension", () => {
+      const dataUrl = "data:image/webp;base64,UklGRlYAAABXRUJQVlA4IEoAAADQAQCdASoQABAAAgA0JZQCdAEO/hAAA=";
+      (0, _screenshot.triggerDownload)(dataUrl, "webp-flow", "webp");
+      (0, _vitest.expect)(clickSpy).toHaveBeenCalled();
+    });
+  });
+  (0, _vitest.describe)("copyBlobToClipboard", () => {
+    (0, _vitest.it)("should throw when clipboard API is not available", async () => {
+      const blob = new Blob(["test"], {
+        type: "image/png"
+      });
+      _vitest.vi.stubGlobal("navigator", {
+        clipboard: {
+          write: void 0
+        }
+      });
+      await (0, _vitest.expect)((0, _screenshot.copyBlobToClipboard)(blob)).rejects.toThrow("[Flow Screenshot] Clipboard API not available");
+    });
+    (0, _vitest.it)("should call clipboard write when available", async () => {
+      const blob = new Blob(["test"], {
+        type: "image/png"
+      });
+      const writeMock = _vitest.vi.fn().mockResolvedValue(void 0);
+      _vitest.vi.stubGlobal("navigator", {
+        clipboard: {
+          write: writeMock
+        }
+      });
+      await (0, _screenshot.copyBlobToClipboard)(blob);
+      (0, _vitest.expect)(writeMock).toHaveBeenCalled();
+    });
+    (0, _vitest.it)("should include correct blob type in clipboard item", async () => {
+      const blob = new Blob(["test"], {
+        type: "image/png"
+      });
+      let capturedItems = [];
+      const writeMock = _vitest.vi.fn().mockImplementation(items => {
+        capturedItems = items;
+        return Promise.resolve();
+      });
+      _vitest.vi.stubGlobal("navigator", {
+        clipboard: {
+          write: writeMock
+        }
+      });
+      await (0, _screenshot.copyBlobToClipboard)(blob);
+      (0, _vitest.expect)(writeMock).toHaveBeenCalled();
+      (0, _vitest.expect)(capturedItems.length).toBe(1);
+    });
+  });
+});

package/dist/__tests__/screenshot.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/screenshot.test.mjs

@@ -0,0 +1,69 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { triggerDownload, copyBlobToClipboard } from "../utils/screenshot.mjs";
+describe("flow/utils/screenshot", () => {
+  let clickSpy;
+  beforeEach(() => {
+    clickSpy = vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(() => {
+    });
+  });
+  afterEach(() => {
+    clickSpy.mockRestore();
+  });
+  describe("triggerDownload", () => {
+    it("should create download link and click it", () => {
+      const dataUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==";
+      triggerDownload(dataUrl, "test-flow", "png");
+      expect(clickSpy).toHaveBeenCalled();
+    });
+    it("should set correct filename with extension", () => {
+      const dataUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==";
+      triggerDownload(dataUrl, "my-flow-chart", "jpeg");
+      expect(clickSpy).toHaveBeenCalled();
+    });
+    it("should handle webp extension", () => {
+      const dataUrl = "data:image/webp;base64,UklGRlYAAABXRUJQVlA4IEoAAADQAQCdASoQABAAAgA0JZQCdAEO/hAAA=";
+      triggerDownload(dataUrl, "webp-flow", "webp");
+      expect(clickSpy).toHaveBeenCalled();
+    });
+  });
+  describe("copyBlobToClipboard", () => {
+    it("should throw when clipboard API is not available", async () => {
+      const blob = new Blob(["test"], { type: "image/png" });
+      vi.stubGlobal("navigator", {
+        clipboard: {
+          write: void 0
+        }
+      });
+      await expect(copyBlobToClipboard(blob)).rejects.toThrow(
+        "[Flow Screenshot] Clipboard API not available"
+      );
+    });
+    it("should call clipboard write when available", async () => {
+      const blob = new Blob(["test"], { type: "image/png" });
+      const writeMock = vi.fn().mockResolvedValue(void 0);
+      vi.stubGlobal("navigator", {
+        clipboard: {
+          write: writeMock
+        }
+      });
+      await copyBlobToClipboard(blob);
+      expect(writeMock).toHaveBeenCalled();
+    });
+    it("should include correct blob type in clipboard item", async () => {
+      const blob = new Blob(["test"], { type: "image/png" });
+      let capturedItems = [];
+      const writeMock = vi.fn().mockImplementation((items) => {
+        capturedItems = items;
+        return Promise.resolve();
+      });
+      vi.stubGlobal("navigator", {
+        clipboard: {
+          write: writeMock
+        }
+      });
+      await copyBlobToClipboard(blob);
+      expect(writeMock).toHaveBeenCalled();
+      expect(capturedItems.length).toBe(1);
+    });
+  });
+});

package/dist/__tests__/theme.test.cjs

@@ -0,0 +1,185 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _theme = require("../utils/theme.cjs");
+(0, _vitest.describe)("flow/utils/theme", () => {
+  (0, _vitest.beforeEach)(() => {
+    _vitest.vi.restoreAllMocks();
+  });
+  (0, _vitest.describe)("flowTheme", () => {
+    (0, _vitest.it)("should have all required theme properties", () => {
+      (0, _vitest.expect)(_theme.flowTheme["flow-node-background"]).toBe("#ffffff");
+      (0, _vitest.expect)(_theme.flowTheme["flow-node-border"]).toBe("#dcdfe6");
+      (0, _vitest.expect)(_theme.flowTheme["flow-node-border-radius"]).toBe("8px");
+      (0, _vitest.expect)(_theme.flowTheme["flow-node-padding"]).toBe("10px");
+    });
+    (0, _vitest.it)("should have node label styles", () => {
+      (0, _vitest.expect)(_theme.flowTheme["flow-node-label-color"]).toBe("#303133");
+      (0, _vitest.expect)(_theme.flowTheme["flow-node-label-font-size"]).toBe("14px");
+      (0, _vitest.expect)(_theme.flowTheme["flow-node-label-font-weight"]).toBe("500");
+      (0, _vitest.expect)(_theme.flowTheme["flow-node-description-color"]).toBe("#909399");
+    });
+    (0, _vitest.it)("should have handle styles", () => {
+      (0, _vitest.expect)(_theme.flowTheme["flow-handle-background"]).toBe("#ffffff");
+      (0, _vitest.expect)(_theme.flowTheme["flow-handle-border"]).toBe("#409eff");
+      (0, _vitest.expect)(_theme.flowTheme["flow-handle-size"]).toBe("12px");
+    });
+    (0, _vitest.it)("should have edge styles", () => {
+      (0, _vitest.expect)(_theme.flowTheme["flow-edge-stroke"]).toBe("#b1b3b8");
+      (0, _vitest.expect)(_theme.flowTheme["flow-edge-stroke-width"]).toBe("2");
+      (0, _vitest.expect)(_theme.flowTheme["flow-edge-selected-stroke"]).toBe("#409eff");
+    });
+    (0, _vitest.it)("should have BPMN styles", () => {
+      (0, _vitest.expect)(_theme.flowTheme["flow-bpmn-start-fill"]).toBe("#e6f7ed");
+      (0, _vitest.expect)(_theme.flowTheme["flow-bpmn-start-stroke"]).toBe("#67c23a");
+      (0, _vitest.expect)(_theme.flowTheme["flow-bpmn-end-fill"]).toBe("#fef0f0");
+      (0, _vitest.expect)(_theme.flowTheme["flow-bpmn-end-stroke"]).toBe("#f56c6c");
+    });
+    (0, _vitest.it)("should have AI node styles", () => {
+      (0, _vitest.expect)(_theme.flowTheme["flow-ai-node-background"]).toBe("#f0f9ff");
+      (0, _vitest.expect)(_theme.flowTheme["flow-ai-node-border"]).toBe("#0ea5e9");
+      (0, _vitest.expect)(_theme.flowTheme["flow-ai-node-accent"]).toBe("#0284c7");
+    });
+    (0, _vitest.it)("should have background styles", () => {
+      (0, _vitest.expect)(_theme.flowTheme["flow-background-color"]).toBe("#fafafa");
+      (0, _vitest.expect)(_theme.flowTheme["flow-grid-color"]).toBe("#e4e7ed");
+      (0, _vitest.expect)(_theme.flowTheme["flow-grid-size"]).toBe("20");
+    });
+    (0, _vitest.it)("should have alignment line styles", () => {
+      (0, _vitest.expect)(_theme.flowTheme["flow-alignment-line-color"]).toBe("#c0c4cc");
+      (0, _vitest.expect)(_theme.flowTheme["flow-alignment-line-active-color"]).toBe("#409eff");
+    });
+    (0, _vitest.it)("should have selection box styles", () => {
+      (0, _vitest.expect)(_theme.flowTheme["flow-selection-box-border"]).toBe("#409eff");
+      (0, _vitest.expect)(_theme.flowTheme["flow-selection-box-background"]).toBe("rgba(64, 158, 255, 0.1)");
+    });
+    (0, _vitest.it)("should have control button styles", () => {
+      (0, _vitest.expect)(_theme.flowTheme["flow-control-background"]).toBe("#ffffff");
+      (0, _vitest.expect)(_theme.flowTheme["flow-control-border"]).toBe("#dcdfe6");
+      (0, _vitest.expect)(_theme.flowTheme["flow-control-icon-color"]).toBe("#606266");
+    });
+    (0, _vitest.it)("should have minimap styles", () => {
+      (0, _vitest.expect)(_theme.flowTheme["flow-minimap-background"]).toBe("#f5f7fa");
+      (0, _vitest.expect)(_theme.flowTheme["flow-minimap-mask-background"]).toBe("rgba(255, 255, 255, 0.8)");
+      (0, _vitest.expect)(_theme.flowTheme["flow-minimap-node-color"]).toBe("#c0c4cc");
+    });
+    (0, _vitest.it)("should have panel styles", () => {
+      (0, _vitest.expect)(_theme.flowTheme["flow-panel-background"]).toBe("#ffffff");
+      (0, _vitest.expect)(_theme.flowTheme["flow-panel-border"]).toBe("#e4e7ed");
+      (0, _vitest.expect)(_theme.flowTheme["flow-panel-shadow"]).toBe("0 4px 12px rgba(0, 0, 0, 0.15)");
+    });
+    (0, _vitest.it)("should have toolbar styles", () => {
+      (0, _vitest.expect)(_theme.flowTheme["flow-toolbar-background"]).toBe("#ffffff");
+      (0, _vitest.expect)(_theme.flowTheme["flow-toolbar-border"]).toBe("#e4e7ed");
+      (0, _vitest.expect)(_theme.flowTheme["flow-toolbar-icon-color"]).toBe("#606266");
+    });
+  });
+  (0, _vitest.describe)("flowThemeDark", () => {
+    (0, _vitest.it)("should have dark mode colors", () => {
+      (0, _vitest.expect)(_theme.flowThemeDark["flow-node-background"]).toBe("#1f1f1f");
+      (0, _vitest.expect)(_theme.flowThemeDark["flow-node-border"]).toBe("#3a3a3a");
+      (0, _vitest.expect)(_theme.flowThemeDark["flow-node-label-color"]).toBe("#e5e5e5");
+    });
+    (0, _vitest.it)("should have dark mode handle colors", () => {
+      (0, _vitest.expect)(_theme.flowThemeDark["flow-handle-background"]).toBe("#262626");
+    });
+    (0, _vitest.it)("should have dark mode edge colors", () => {
+      (0, _vitest.expect)(_theme.flowThemeDark["flow-edge-stroke"]).toBe("#5c5c5c");
+    });
+    (0, _vitest.it)("should have dark mode background", () => {
+      (0, _vitest.expect)(_theme.flowThemeDark["flow-background-color"]).toBe("#141414");
+      (0, _vitest.expect)(_theme.flowThemeDark["flow-grid-color"]).toBe("#2a2a2a");
+    });
+    (0, _vitest.it)("should have dark mode minimap colors", () => {
+      (0, _vitest.expect)(_theme.flowThemeDark["flow-minimap-background"]).toBe("#1a1a1a");
+    });
+  });
+  (0, _vitest.describe)("createCustomTheme", () => {
+    (0, _vitest.it)("should create theme with overrides", () => {
+      const customTheme = (0, _theme.createCustomTheme)({
+        "flow-node-background": "#ff0000",
+        "flow-node-border": "#00ff00"
+      });
+      (0, _vitest.expect)(customTheme["flow-node-background"]).toBe("#ff0000");
+      (0, _vitest.expect)(customTheme["flow-node-border"]).toBe("#00ff00");
+      (0, _vitest.expect)(customTheme["flow-node-label-color"]).toBe(_theme.flowTheme["flow-node-label-color"]);
+    });
+    (0, _vitest.it)("should merge with base theme", () => {
+      const customTheme = (0, _theme.createCustomTheme)({});
+      (0, _vitest.expect)(customTheme["flow-node-background"]).toBe(_theme.flowTheme["flow-node-background"]);
+    });
+    (0, _vitest.it)("should allow multiple overrides", () => {
+      const customTheme = (0, _theme.createCustomTheme)({
+        "flow-edge-stroke": "#ff00ff",
+        "flow-background-color": "#0000ff",
+        "flow-grid-size": "25"
+      });
+      (0, _vitest.expect)(customTheme["flow-edge-stroke"]).toBe("#ff00ff");
+      (0, _vitest.expect)(customTheme["flow-background-color"]).toBe("#0000ff");
+      (0, _vitest.expect)(customTheme["flow-grid-size"]).toBe("25");
+    });
+    (0, _vitest.it)("should not mutate original theme", () => {
+      const originalBg = _theme.flowTheme["flow-node-background"];
+      (0, _theme.createCustomTheme)({
+        "flow-node-background": "#ff0000"
+      });
+      (0, _vitest.expect)(_theme.flowTheme["flow-node-background"]).toBe(originalBg);
+    });
+  });
+  (0, _vitest.describe)("applyFlowTheme", () => {
+    (0, _vitest.it)("should apply theme to HTMLElement", () => {
+      const setPropertyMock = _vitest.vi.fn();
+      const mockElement = {
+        style: {
+          setProperty: setPropertyMock
+        }
+      };
+      (0, _theme.applyFlowTheme)(_theme.flowTheme, mockElement);
+      (0, _vitest.expect)(setPropertyMock).toHaveBeenCalled();
+      (0, _vitest.expect)(setPropertyMock).toHaveBeenCalledWith("--flow-node-background", "#ffffff");
+    });
+  });
+  (0, _vitest.describe)("flowThemePresets", () => {
+    (0, _vitest.it)("should have default preset", () => {
+      (0, _vitest.expect)(_theme.flowThemePresets.default).toBe(_theme.flowTheme);
+    });
+    (0, _vitest.it)("should have dark preset", () => {
+      (0, _vitest.expect)(_theme.flowThemePresets.dark).toBe(_theme.flowThemeDark);
+    });
+    (0, _vitest.it)("should have blue preset with custom colors", () => {
+      (0, _vitest.expect)(_theme.flowThemePresets.blue["flow-node-background"]).toBe("#e6f7ff");
+      (0, _vitest.expect)(_theme.flowThemePresets.blue["flow-node-border"]).toBe("#91d5ff");
+      (0, _vitest.expect)(_theme.flowThemePresets.blue["flow-node-selected-border"]).toBe("#1890ff");
+    });
+    (0, _vitest.it)("should have green preset with custom colors", () => {
+      (0, _vitest.expect)(_theme.flowThemePresets.green["flow-node-background"]).toBe("#f6ffed");
+      (0, _vitest.expect)(_theme.flowThemePresets.green["flow-node-border"]).toBe("#b7eb8f");
+      (0, _vitest.expect)(_theme.flowThemePresets.green["flow-node-selected-border"]).toBe("#52c41a");
+    });
+    (0, _vitest.it)("should have purple preset with custom colors", () => {
+      (0, _vitest.expect)(_theme.flowThemePresets.purple["flow-node-background"]).toBe("#f9f0ff");
+      (0, _vitest.expect)(_theme.flowThemePresets.purple["flow-node-border"]).toBe("#d3adf7");
+      (0, _vitest.expect)(_theme.flowThemePresets.purple["flow-node-selected-border"]).toBe("#722ed1");
+    });
+    (0, _vitest.it)("should inherit base theme values in presets", () => {
+      (0, _vitest.expect)(_theme.flowThemePresets.blue["flow-node-label-color"]).toBe(_theme.flowTheme["flow-node-label-color"]);
+      (0, _vitest.expect)(_theme.flowThemePresets.green["flow-node-label-color"]).toBe(_theme.flowTheme["flow-node-label-color"]);
+    });
+  });
+  (0, _vitest.describe)("Theme consistency", () => {
+    (0, _vitest.it)("light and dark themes should have same keys", () => {
+      const lightKeys = Object.keys(_theme.flowTheme).sort();
+      const darkKeys = Object.keys(_theme.flowThemeDark).sort();
+      (0, _vitest.expect)(lightKeys).toEqual(darkKeys);
+    });
+    (0, _vitest.it)("all presets should have same keys as base theme", () => {
+      const baseKeys = Object.keys(_theme.flowTheme);
+      Object.values(_theme.flowThemePresets).forEach(preset => {
+        const presetKeys = Object.keys(preset);
+        baseKeys.forEach(key => {
+          (0, _vitest.expect)(presetKeys).toContain(key);
+        });
+      });
+    });
+  });
+});

package/dist/__tests__/theme.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/theme.test.mjs

@@ -0,0 +1,191 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import {
+  flowTheme,
+  flowThemeDark,
+  createCustomTheme,
+  applyFlowTheme,
+  flowThemePresets
+} from "../utils/theme.mjs";
+describe("flow/utils/theme", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+  describe("flowTheme", () => {
+    it("should have all required theme properties", () => {
+      expect(flowTheme["flow-node-background"]).toBe("#ffffff");
+      expect(flowTheme["flow-node-border"]).toBe("#dcdfe6");
+      expect(flowTheme["flow-node-border-radius"]).toBe("8px");
+      expect(flowTheme["flow-node-padding"]).toBe("10px");
+    });
+    it("should have node label styles", () => {
+      expect(flowTheme["flow-node-label-color"]).toBe("#303133");
+      expect(flowTheme["flow-node-label-font-size"]).toBe("14px");
+      expect(flowTheme["flow-node-label-font-weight"]).toBe("500");
+      expect(flowTheme["flow-node-description-color"]).toBe("#909399");
+    });
+    it("should have handle styles", () => {
+      expect(flowTheme["flow-handle-background"]).toBe("#ffffff");
+      expect(flowTheme["flow-handle-border"]).toBe("#409eff");
+      expect(flowTheme["flow-handle-size"]).toBe("12px");
+    });
+    it("should have edge styles", () => {
+      expect(flowTheme["flow-edge-stroke"]).toBe("#b1b3b8");
+      expect(flowTheme["flow-edge-stroke-width"]).toBe("2");
+      expect(flowTheme["flow-edge-selected-stroke"]).toBe("#409eff");
+    });
+    it("should have BPMN styles", () => {
+      expect(flowTheme["flow-bpmn-start-fill"]).toBe("#e6f7ed");
+      expect(flowTheme["flow-bpmn-start-stroke"]).toBe("#67c23a");
+      expect(flowTheme["flow-bpmn-end-fill"]).toBe("#fef0f0");
+      expect(flowTheme["flow-bpmn-end-stroke"]).toBe("#f56c6c");
+    });
+    it("should have AI node styles", () => {
+      expect(flowTheme["flow-ai-node-background"]).toBe("#f0f9ff");
+      expect(flowTheme["flow-ai-node-border"]).toBe("#0ea5e9");
+      expect(flowTheme["flow-ai-node-accent"]).toBe("#0284c7");
+    });
+    it("should have background styles", () => {
+      expect(flowTheme["flow-background-color"]).toBe("#fafafa");
+      expect(flowTheme["flow-grid-color"]).toBe("#e4e7ed");
+      expect(flowTheme["flow-grid-size"]).toBe("20");
+    });
+    it("should have alignment line styles", () => {
+      expect(flowTheme["flow-alignment-line-color"]).toBe("#c0c4cc");
+      expect(flowTheme["flow-alignment-line-active-color"]).toBe("#409eff");
+    });
+    it("should have selection box styles", () => {
+      expect(flowTheme["flow-selection-box-border"]).toBe("#409eff");
+      expect(flowTheme["flow-selection-box-background"]).toBe("rgba(64, 158, 255, 0.1)");
+    });
+    it("should have control button styles", () => {
+      expect(flowTheme["flow-control-background"]).toBe("#ffffff");
+      expect(flowTheme["flow-control-border"]).toBe("#dcdfe6");
+      expect(flowTheme["flow-control-icon-color"]).toBe("#606266");
+    });
+    it("should have minimap styles", () => {
+      expect(flowTheme["flow-minimap-background"]).toBe("#f5f7fa");
+      expect(flowTheme["flow-minimap-mask-background"]).toBe("rgba(255, 255, 255, 0.8)");
+      expect(flowTheme["flow-minimap-node-color"]).toBe("#c0c4cc");
+    });
+    it("should have panel styles", () => {
+      expect(flowTheme["flow-panel-background"]).toBe("#ffffff");
+      expect(flowTheme["flow-panel-border"]).toBe("#e4e7ed");
+      expect(flowTheme["flow-panel-shadow"]).toBe("0 4px 12px rgba(0, 0, 0, 0.15)");
+    });
+    it("should have toolbar styles", () => {
+      expect(flowTheme["flow-toolbar-background"]).toBe("#ffffff");
+      expect(flowTheme["flow-toolbar-border"]).toBe("#e4e7ed");
+      expect(flowTheme["flow-toolbar-icon-color"]).toBe("#606266");
+    });
+  });
+  describe("flowThemeDark", () => {
+    it("should have dark mode colors", () => {
+      expect(flowThemeDark["flow-node-background"]).toBe("#1f1f1f");
+      expect(flowThemeDark["flow-node-border"]).toBe("#3a3a3a");
+      expect(flowThemeDark["flow-node-label-color"]).toBe("#e5e5e5");
+    });
+    it("should have dark mode handle colors", () => {
+      expect(flowThemeDark["flow-handle-background"]).toBe("#262626");
+    });
+    it("should have dark mode edge colors", () => {
+      expect(flowThemeDark["flow-edge-stroke"]).toBe("#5c5c5c");
+    });
+    it("should have dark mode background", () => {
+      expect(flowThemeDark["flow-background-color"]).toBe("#141414");
+      expect(flowThemeDark["flow-grid-color"]).toBe("#2a2a2a");
+    });
+    it("should have dark mode minimap colors", () => {
+      expect(flowThemeDark["flow-minimap-background"]).toBe("#1a1a1a");
+    });
+  });
+  describe("createCustomTheme", () => {
+    it("should create theme with overrides", () => {
+      const customTheme = createCustomTheme({
+        "flow-node-background": "#ff0000",
+        "flow-node-border": "#00ff00"
+      });
+      expect(customTheme["flow-node-background"]).toBe("#ff0000");
+      expect(customTheme["flow-node-border"]).toBe("#00ff00");
+      expect(customTheme["flow-node-label-color"]).toBe(flowTheme["flow-node-label-color"]);
+    });
+    it("should merge with base theme", () => {
+      const customTheme = createCustomTheme({});
+      expect(customTheme["flow-node-background"]).toBe(flowTheme["flow-node-background"]);
+    });
+    it("should allow multiple overrides", () => {
+      const customTheme = createCustomTheme({
+        "flow-edge-stroke": "#ff00ff",
+        "flow-background-color": "#0000ff",
+        "flow-grid-size": "25"
+      });
+      expect(customTheme["flow-edge-stroke"]).toBe("#ff00ff");
+      expect(customTheme["flow-background-color"]).toBe("#0000ff");
+      expect(customTheme["flow-grid-size"]).toBe("25");
+    });
+    it("should not mutate original theme", () => {
+      const originalBg = flowTheme["flow-node-background"];
+      createCustomTheme({ "flow-node-background": "#ff0000" });
+      expect(flowTheme["flow-node-background"]).toBe(originalBg);
+    });
+  });
+  describe("applyFlowTheme", () => {
+    it("should apply theme to HTMLElement", () => {
+      const setPropertyMock = vi.fn();
+      const mockElement = {
+        style: {
+          setProperty: setPropertyMock
+        }
+      };
+      applyFlowTheme(flowTheme, mockElement);
+      expect(setPropertyMock).toHaveBeenCalled();
+      expect(setPropertyMock).toHaveBeenCalledWith("--flow-node-background", "#ffffff");
+    });
+  });
+  describe("flowThemePresets", () => {
+    it("should have default preset", () => {
+      expect(flowThemePresets.default).toBe(flowTheme);
+    });
+    it("should have dark preset", () => {
+      expect(flowThemePresets.dark).toBe(flowThemeDark);
+    });
+    it("should have blue preset with custom colors", () => {
+      expect(flowThemePresets.blue["flow-node-background"]).toBe("#e6f7ff");
+      expect(flowThemePresets.blue["flow-node-border"]).toBe("#91d5ff");
+      expect(flowThemePresets.blue["flow-node-selected-border"]).toBe("#1890ff");
+    });
+    it("should have green preset with custom colors", () => {
+      expect(flowThemePresets.green["flow-node-background"]).toBe("#f6ffed");
+      expect(flowThemePresets.green["flow-node-border"]).toBe("#b7eb8f");
+      expect(flowThemePresets.green["flow-node-selected-border"]).toBe("#52c41a");
+    });
+    it("should have purple preset with custom colors", () => {
+      expect(flowThemePresets.purple["flow-node-background"]).toBe("#f9f0ff");
+      expect(flowThemePresets.purple["flow-node-border"]).toBe("#d3adf7");
+      expect(flowThemePresets.purple["flow-node-selected-border"]).toBe("#722ed1");
+    });
+    it("should inherit base theme values in presets", () => {
+      expect(flowThemePresets.blue["flow-node-label-color"]).toBe(
+        flowTheme["flow-node-label-color"]
+      );
+      expect(flowThemePresets.green["flow-node-label-color"]).toBe(
+        flowTheme["flow-node-label-color"]
+      );
+    });
+  });
+  describe("Theme consistency", () => {
+    it("light and dark themes should have same keys", () => {
+      const lightKeys = Object.keys(flowTheme).sort();
+      const darkKeys = Object.keys(flowThemeDark).sort();
+      expect(lightKeys).toEqual(darkKeys);
+    });
+    it("all presets should have same keys as base theme", () => {
+      const baseKeys = Object.keys(flowTheme);
+      Object.values(flowThemePresets).forEach((preset) => {
+        const presetKeys = Object.keys(preset);
+        baseKeys.forEach((key) => {
+          expect(presetKeys).toContain(key);
+        });
+      });
+    });
+  });
+});