@yh-ui/flow 1.0.1 → 1.0.4

package/dist/__tests__/useNodeDistribution.test.mjs

@@ -0,0 +1,297 @@
+import { describe, it, expect, vi } from "vitest";
+import { ref } from "vue";
+import { useNodeDistribution } from "../core/useNodeDistribution.mjs";
+function createMockFlowInstance() {
+  const nodes = ref([]);
+  const edges = ref([]);
+  const viewport = ref({ x: 0, y: 0, zoom: 1 });
+  const draggingNodeId = ref(null);
+  return {
+    nodes,
+    edges,
+    viewport,
+    draggingNodeId,
+    addNode: vi.fn(),
+    removeNode: vi.fn(),
+    updateNode: vi.fn(),
+    getNode: vi.fn(),
+    addEdge: vi.fn(),
+    removeEdge: vi.fn(),
+    updateEdge: vi.fn(),
+    getEdge: vi.fn(),
+    setViewport: vi.fn(),
+    fitView: vi.fn(),
+    zoomIn: vi.fn(),
+    zoomOut: vi.fn(),
+    centerView: vi.fn(),
+    selectNode: vi.fn(),
+    selectEdge: vi.fn(),
+    clearSelection: vi.fn(),
+    getNodes: vi.fn(() => nodes.value),
+    getEdges: vi.fn(() => edges.value),
+    getViewport: vi.fn(() => viewport.value),
+    screenToCanvas: vi.fn(),
+    canvasToScreen: vi.fn(),
+    on: vi.fn(),
+    off: vi.fn(),
+    emit: vi.fn(),
+    isValidConnection: vi.fn(() => true),
+    $el: void 0,
+    usePlugin: vi.fn(),
+    removePlugin: vi.fn()
+  };
+}
+describe("flow/core/useNodeDistribution", () => {
+  it("should return all distribution functions", () => {
+    const flow = createMockFlowInstance();
+    const {
+      distributeHorizontally,
+      distributeVertically,
+      alignNodesHorizontal,
+      alignNodesVertical
+    } = useNodeDistribution({ nodes: flow.nodes });
+    expect(typeof distributeHorizontally).toBe("function");
+    expect(typeof distributeVertically).toBe("function");
+    expect(typeof alignNodesHorizontal).toBe("function");
+    expect(typeof alignNodesVertical).toBe("function");
+  });
+  describe("distributeHorizontally", () => {
+    it("should not distribute when fewer than 3 nodes", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [
+        { id: "1", type: "default", position: { x: 0, y: 0 }, data: {} },
+        { id: "2", type: "default", position: { x: 100, y: 0 }, data: {} }
+      ];
+      const { distributeHorizontally } = useNodeDistribution({ nodes: flow.nodes });
+      distributeHorizontally(["1", "2"]);
+      expect(flow.nodes.value[0].position.x).toBe(0);
+      expect(flow.nodes.value[1].position.x).toBe(100);
+    });
+    it("should distribute 3 nodes horizontally with custom gap", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [
+        { id: "1", type: "default", position: { x: 0, y: 0 }, data: {}, width: 50, height: 50 },
+        { id: "2", type: "default", position: { x: 50, y: 0 }, data: {}, width: 50, height: 50 },
+        { id: "3", type: "default", position: { x: 100, y: 0 }, data: {}, width: 50, height: 50 }
+      ];
+      const { distributeHorizontally } = useNodeDistribution({ nodes: flow.nodes });
+      distributeHorizontally(["1", "2", "3"], 100);
+      const positions = flow.nodes.value.map((n) => n.position.x);
+      expect(positions[0]).toBe(0);
+      expect(positions[1]).toBe(150);
+      expect(positions[2]).toBe(300);
+    });
+    it("should distribute nodes that are too close", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [
+        { id: "1", type: "default", position: { x: 0, y: 0 }, data: {}, width: 50, height: 50 },
+        { id: "2", type: "default", position: { x: 10, y: 0 }, data: {}, width: 50, height: 50 },
+        { id: "3", type: "default", position: { x: 20, y: 0 }, data: {}, width: 50, height: 50 }
+      ];
+      const { distributeHorizontally } = useNodeDistribution({ nodes: flow.nodes });
+      distributeHorizontally(["1", "2", "3"], 50);
+      const positions = flow.nodes.value.map((n) => n.position.x);
+      expect(positions[0]).toBe(0);
+      expect(positions[1]).toBeGreaterThan(positions[0]);
+      expect(positions[2]).toBeGreaterThan(positions[1]);
+    });
+    it("should use selected nodes when no nodeIds provided", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [
+        {
+          id: "1",
+          type: "default",
+          position: { x: 0, y: 0 },
+          data: {},
+          width: 50,
+          height: 50,
+          selected: true
+        },
+        {
+          id: "2",
+          type: "default",
+          position: { x: 50, y: 0 },
+          data: {},
+          width: 50,
+          height: 50,
+          selected: true
+        },
+        {
+          id: "3",
+          type: "default",
+          position: { x: 100, y: 0 },
+          data: {},
+          width: 50,
+          height: 50,
+          selected: true
+        }
+      ];
+      const { distributeHorizontally } = useNodeDistribution({ nodes: flow.nodes });
+      distributeHorizontally(void 0, 50);
+      const positions = flow.nodes.value.map((n) => n.position.x);
+      expect(positions[0]).toBe(0);
+      expect(positions[1]).toBe(100);
+      expect(positions[2]).toBe(200);
+    });
+  });
+  describe("distributeVertically", () => {
+    it("should not distribute when fewer than 3 nodes", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [
+        { id: "1", type: "default", position: { x: 0, y: 0 }, data: {} },
+        { id: "2", type: "default", position: { x: 0, y: 100 }, data: {} }
+      ];
+      const { distributeVertically } = useNodeDistribution({ nodes: flow.nodes });
+      distributeVertically(["1", "2"]);
+      expect(flow.nodes.value[0].position.y).toBe(0);
+      expect(flow.nodes.value[1].position.y).toBe(100);
+    });
+    it("should distribute 3 nodes vertically", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [
+        { id: "1", type: "default", position: { x: 0, y: 0 }, data: {}, width: 50, height: 50 },
+        { id: "2", type: "default", position: { x: 0, y: 50 }, data: {}, width: 50, height: 50 },
+        { id: "3", type: "default", position: { x: 0, y: 100 }, data: {}, width: 50, height: 50 }
+      ];
+      const { distributeVertically } = useNodeDistribution({ nodes: flow.nodes });
+      distributeVertically(["1", "2", "3"], 100);
+      const positions = flow.nodes.value.map((n) => n.position.y);
+      expect(positions[0]).toBe(0);
+      expect(positions[1]).toBe(150);
+      expect(positions[2]).toBe(300);
+    });
+    it("should distribute nodes that are too close vertically", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [
+        { id: "1", type: "default", position: { x: 0, y: 0 }, data: {}, width: 50, height: 50 },
+        { id: "2", type: "default", position: { x: 0, y: 10 }, data: {}, width: 50, height: 50 },
+        { id: "3", type: "default", position: { x: 0, y: 20 }, data: {}, width: 50, height: 50 }
+      ];
+      const { distributeVertically } = useNodeDistribution({ nodes: flow.nodes });
+      distributeVertically(["1", "2", "3"], 50);
+      const positions = flow.nodes.value.map((n) => n.position.y);
+      expect(positions[0]).toBe(0);
+      expect(positions[1]).toBeGreaterThan(positions[0]);
+      expect(positions[2]).toBeGreaterThan(positions[1]);
+    });
+  });
+  describe("alignNodesHorizontal", () => {
+    it("should not align when fewer than 2 nodes", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [
+        { id: "1", type: "default", position: { x: 0, y: 0 }, data: {}, width: 100, height: 50 }
+      ];
+      const { alignNodesHorizontal } = useNodeDistribution({ nodes: flow.nodes });
+      alignNodesHorizontal(["1"]);
+      expect(flow.nodes.value[0].position.x).toBe(0);
+    });
+    it("should align to left edge", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [
+        { id: "1", type: "default", position: { x: 0, y: 0 }, data: {}, width: 100, height: 50 },
+        { id: "2", type: "default", position: { x: 50, y: 50 }, data: {}, width: 100, height: 50 },
+        { id: "3", type: "default", position: { x: 100, y: 100 }, data: {}, width: 100, height: 50 }
+      ];
+      const { alignNodesHorizontal } = useNodeDistribution({ nodes: flow.nodes });
+      alignNodesHorizontal(["1", "2", "3"], "left");
+      expect(flow.nodes.value[0].position.x).toBe(0);
+      expect(flow.nodes.value[1].position.x).toBe(0);
+      expect(flow.nodes.value[2].position.x).toBe(0);
+    });
+    it("should align to right edge", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [
+        { id: "1", type: "default", position: { x: 0, y: 0 }, data: {}, width: 100, height: 50 },
+        { id: "2", type: "default", position: { x: 50, y: 50 }, data: {}, width: 100, height: 50 }
+      ];
+      const { alignNodesHorizontal } = useNodeDistribution({ nodes: flow.nodes });
+      alignNodesHorizontal(["1", "2"], "right");
+      expect(flow.nodes.value[0].position.x).toBe(50);
+      expect(flow.nodes.value[1].position.x).toBe(50);
+    });
+    it("should align to center", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [
+        { id: "1", type: "default", position: { x: 0, y: 0 }, data: {}, width: 100, height: 50 },
+        { id: "2", type: "default", position: { x: 50, y: 50 }, data: {}, width: 200, height: 50 }
+      ];
+      const { alignNodesHorizontal } = useNodeDistribution({ nodes: flow.nodes });
+      alignNodesHorizontal(["1", "2"], "center");
+      expect(flow.nodes.value[0].position.x).toBe(50);
+      expect(flow.nodes.value[1].position.x).toBe(0);
+    });
+    it("should use selected nodes when no nodeIds provided", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [
+        {
+          id: "1",
+          type: "default",
+          position: { x: 0, y: 0 },
+          data: {},
+          width: 100,
+          height: 50,
+          selected: true
+        },
+        {
+          id: "2",
+          type: "default",
+          position: { x: 50, y: 0 },
+          data: {},
+          width: 100,
+          height: 50,
+          selected: true
+        }
+      ];
+      const { alignNodesHorizontal } = useNodeDistribution({ nodes: flow.nodes });
+      alignNodesHorizontal(void 0, "left");
+      expect(flow.nodes.value[0].position.x).toBe(0);
+      expect(flow.nodes.value[1].position.x).toBe(0);
+    });
+  });
+  describe("alignNodesVertical", () => {
+    it("should not align when fewer than 2 nodes", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [
+        { id: "1", type: "default", position: { x: 0, y: 0 }, data: {}, width: 100, height: 50 }
+      ];
+      const { alignNodesVertical } = useNodeDistribution({ nodes: flow.nodes });
+      alignNodesVertical(["1"]);
+      expect(flow.nodes.value[0].position.y).toBe(0);
+    });
+    it("should align to top edge", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [
+        { id: "1", type: "default", position: { x: 0, y: 0 }, data: {}, width: 100, height: 50 },
+        { id: "2", type: "default", position: { x: 0, y: 50 }, data: {}, width: 100, height: 50 },
+        { id: "3", type: "default", position: { x: 0, y: 100 }, data: {}, width: 100, height: 50 }
+      ];
+      const { alignNodesVertical } = useNodeDistribution({ nodes: flow.nodes });
+      alignNodesVertical(["1", "2", "3"], "top");
+      expect(flow.nodes.value[0].position.y).toBe(0);
+      expect(flow.nodes.value[1].position.y).toBe(0);
+      expect(flow.nodes.value[2].position.y).toBe(0);
+    });
+    it("should align to bottom edge", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [
+        { id: "1", type: "default", position: { x: 0, y: 0 }, data: {}, width: 100, height: 50 },
+        { id: "2", type: "default", position: { x: 0, y: 50 }, data: {}, width: 100, height: 50 }
+      ];
+      const { alignNodesVertical } = useNodeDistribution({ nodes: flow.nodes });
+      alignNodesVertical(["1", "2"], "bottom");
+      expect(flow.nodes.value[0].position.y).toBe(50);
+      expect(flow.nodes.value[1].position.y).toBe(50);
+    });
+    it("should align to middle", () => {
+      const flow = createMockFlowInstance();
+      flow.nodes.value = [
+        { id: "1", type: "default", position: { x: 0, y: 0 }, data: {}, width: 100, height: 50 },
+        { id: "2", type: "default", position: { x: 0, y: 50 }, data: {}, width: 100, height: 100 }
+      ];
+      const { alignNodesVertical } = useNodeDistribution({ nodes: flow.nodes });
+      alignNodesVertical(["1", "2"], "middle");
+      expect(flow.nodes.value[0].position.y).toBe(37.5);
+      expect(flow.nodes.value[1].position.y).toBe(12.5);
+    });
+  });
+});

package/dist/__tests__/viewport-types.test.cjs

@@ -0,0 +1,324 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _viewport = require("../types/viewport.cjs");
+(0, _vitest.describe)("flow/types/viewport", () => {
+  (0, _vitest.describe)("ViewportTransform", () => {
+    (0, _vitest.it)("should define viewport with x, y, zoom", () => {
+      const transform = {
+        x: 100,
+        y: 50,
+        zoom: 1.5
+      };
+      (0, _vitest.expect)(transform.x).toBe(100);
+      (0, _vitest.expect)(transform.y).toBe(50);
+      (0, _vitest.expect)(transform.zoom).toBe(1.5);
+    });
+    (0, _vitest.it)("should allow negative coordinates", () => {
+      const transform = {
+        x: -100,
+        y: -50,
+        zoom: 0.5
+      };
+      (0, _vitest.expect)(transform.x).toBe(-100);
+      (0, _vitest.expect)(transform.y).toBe(-50);
+    });
+    (0, _vitest.it)("should allow zoom less than 1", () => {
+      const transform = {
+        x: 0,
+        y: 0,
+        zoom: 0.1
+      };
+      (0, _vitest.expect)(transform.zoom).toBe(0.1);
+    });
+    (0, _vitest.it)("should allow zoom greater than 1", () => {
+      const transform = {
+        x: 0,
+        y: 0,
+        zoom: 5
+      };
+      (0, _vitest.expect)(transform.zoom).toBe(5);
+    });
+  });
+  (0, _vitest.describe)("ViewportOptions", () => {
+    (0, _vitest.it)("should define full viewport options", () => {
+      const options = {
+        minZoom: 0.1,
+        maxZoom: 5,
+        translateExtent: [[0, 0], [1e3, 1e3]],
+        zoomStep: 0.1,
+        panZoomSpeed: 1,
+        zoomInMultiplier: 1.2,
+        zoomOutMultiplier: 0.8,
+        panning: true,
+        zooming: true,
+        zoomOnScroll: true,
+        zoomOnPinch: true,
+        panOnScroll: true,
+        panOnDrag: true,
+        fitViewOnInit: true,
+        fitViewOnInitOptions: {
+          padding: 0.2
+        }
+      };
+      (0, _vitest.expect)(options.minZoom).toBe(0.1);
+      (0, _vitest.expect)(options.maxZoom).toBe(5);
+      (0, _vitest.expect)(options.fitViewOnInit).toBe(true);
+    });
+    (0, _vitest.it)("should allow partial options", () => {
+      const options = {
+        minZoom: 0.2,
+        maxZoom: 3
+      };
+      (0, _vitest.expect)(options.minZoom).toBe(0.2);
+      (0, _vitest.expect)(options.maxZoom).toBe(3);
+    });
+  });
+  (0, _vitest.describe)("FitViewOptions", () => {
+    (0, _vitest.it)("should define fit view options", () => {
+      const options = {
+        padding: 0.3,
+        includeHiddenNodes: false,
+        minZoom: 0.5,
+        maxZoom: 2
+      };
+      (0, _vitest.expect)(options.padding).toBe(0.3);
+      (0, _vitest.expect)(options.includeHiddenNodes).toBe(false);
+    });
+  });
+  (0, _vitest.describe)("ScreenToFlowPositionOptions", () => {
+    (0, _vitest.it)("should define screen to flow position options", () => {
+      const options = {
+        offset: {
+          x: 10,
+          y: 20
+        },
+        snapToGrid: true,
+        gridSize: 15
+      };
+      (0, _vitest.expect)(options.offset?.x).toBe(10);
+      (0, _vitest.expect)(options.snapToGrid).toBe(true);
+      (0, _vitest.expect)(options.gridSize).toBe(15);
+    });
+  });
+  (0, _vitest.describe)("getViewportForBounds", () => {
+    (0, _vitest.it)("should calculate viewport to fit bounds within container", () => {
+      const bounds = {
+        x: 0,
+        y: 0,
+        width: 200,
+        height: 200
+      };
+      const viewport = (0, _viewport.getViewportForBounds)(bounds, 800, 600, 0.1, 5, 0.2);
+      (0, _vitest.expect)(viewport).toHaveProperty("x");
+      (0, _vitest.expect)(viewport).toHaveProperty("y");
+      (0, _vitest.expect)(viewport).toHaveProperty("zoom");
+      (0, _vitest.expect)(viewport.zoom).toBeGreaterThanOrEqual(0.1);
+      (0, _vitest.expect)(viewport.zoom).toBeLessThanOrEqual(5);
+    });
+    (0, _vitest.it)("should use default padding of 0.2", () => {
+      const bounds = {
+        x: 100,
+        y: 100,
+        width: 100,
+        height: 100
+      };
+      const viewport1 = (0, _viewport.getViewportForBounds)(bounds, 400, 300, 0.1, 5);
+      const viewport2 = (0, _viewport.getViewportForBounds)(bounds, 400, 300, 0.1, 5, 0.2);
+      (0, _vitest.expect)(viewport1.zoom).toBe(viewport2.zoom);
+    });
+    (0, _vitest.it)("should handle bounds at origin", () => {
+      const bounds = {
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 50
+      };
+      const viewport = (0, _viewport.getViewportForBounds)(bounds, 800, 400, 0.1, 5, 0.1);
+      (0, _vitest.expect)(viewport.zoom).toBeGreaterThan(0);
+    });
+    (0, _vitest.it)("should respect minZoom constraint", () => {
+      const bounds = {
+        x: 0,
+        y: 0,
+        width: 1e4,
+        height: 1e4
+      };
+      const viewport = (0, _viewport.getViewportForBounds)(bounds, 800, 600, 0.5, 5, 0.2);
+      (0, _vitest.expect)(viewport.zoom).toBeGreaterThanOrEqual(0.5);
+    });
+    (0, _vitest.it)("should respect maxZoom constraint", () => {
+      const bounds = {
+        x: 0,
+        y: 0,
+        width: 10,
+        height: 10
+      };
+      const viewport = (0, _viewport.getViewportForBounds)(bounds, 800, 600, 0.1, 2, 0.2);
+      (0, _vitest.expect)(viewport.zoom).toBeLessThanOrEqual(2);
+    });
+  });
+  (0, _vitest.describe)("project", () => {
+    (0, _vitest.it)("should project screen coordinates to canvas coordinates", () => {
+      const transform = {
+        x: 100,
+        y: 50,
+        zoom: 2
+      };
+      const screenPos = {
+        x: 300,
+        y: 250
+      };
+      const canvasPos = (0, _viewport.project)(screenPos, transform);
+      (0, _vitest.expect)(canvasPos).toEqual({
+        x: 100,
+        y: 100
+      });
+    });
+    (0, _vitest.it)("should handle zoom of 1", () => {
+      const transform = {
+        x: 0,
+        y: 0,
+        zoom: 1
+      };
+      const screenPos = {
+        x: 100,
+        y: 200
+      };
+      const canvasPos = (0, _viewport.project)(screenPos, transform);
+      (0, _vitest.expect)(canvasPos).toEqual({
+        x: 100,
+        y: 200
+      });
+    });
+    (0, _vitest.it)("should handle negative viewport offset", () => {
+      const transform = {
+        x: -100,
+        y: -50,
+        zoom: 1
+      };
+      const screenPos = {
+        x: 0,
+        y: 0
+      };
+      const canvasPos = (0, _viewport.project)(screenPos, transform);
+      (0, _vitest.expect)(canvasPos.x).toBe(100);
+      (0, _vitest.expect)(canvasPos.y).toBe(50);
+    });
+    (0, _vitest.it)("should handle fractional zoom", () => {
+      const transform = {
+        x: 0,
+        y: 0,
+        zoom: 0.5
+      };
+      const screenPos = {
+        x: 100,
+        y: 100
+      };
+      const canvasPos = (0, _viewport.project)(screenPos, transform);
+      (0, _vitest.expect)(canvasPos.x).toBe(200);
+      (0, _vitest.expect)(canvasPos.y).toBe(200);
+    });
+  });
+  (0, _vitest.describe)("unproject", () => {
+    (0, _vitest.it)("should unproject canvas coordinates to screen coordinates", () => {
+      const transform = {
+        x: 100,
+        y: 50,
+        zoom: 2
+      };
+      const canvasPos = {
+        x: 100,
+        y: 100
+      };
+      const screenPos = (0, _viewport.unproject)(canvasPos, transform);
+      (0, _vitest.expect)(screenPos).toEqual({
+        x: 300,
+        y: 250
+      });
+    });
+    (0, _vitest.it)("should be inverse of project", () => {
+      const transform = {
+        x: 100,
+        y: 50,
+        zoom: 2
+      };
+      const originalScreen = {
+        x: 500,
+        y: 300
+      };
+      const canvas = (0, _viewport.project)(originalScreen, transform);
+      const restored = (0, _viewport.unproject)(canvas, transform);
+      (0, _vitest.expect)(restored).toEqual(originalScreen);
+    });
+  });
+  (0, _vitest.describe)("isNodeVisible", () => {
+    const transform = {
+      x: 0,
+      y: 0,
+      zoom: 1
+    };
+    const viewportWidth = 800;
+    const viewportHeight = 600;
+    (0, _vitest.it)("should return true for node within viewport", () => {
+      const node = {
+        position: {
+          x: 100,
+          y: 100
+        },
+        width: 100,
+        height: 100
+      };
+      (0, _vitest.expect)((0, _viewport.isNodeVisible)(node, transform, viewportWidth, viewportHeight)).toBe(true);
+    });
+    (0, _vitest.it)("should return true for node at viewport edge", () => {
+      const node = {
+        position: {
+          x: 0,
+          y: 0
+        },
+        width: 100,
+        height: 100
+      };
+      (0, _vitest.expect)((0, _viewport.isNodeVisible)(node, transform, viewportWidth, viewportHeight)).toBe(true);
+    });
+    (0, _vitest.it)("should return false for node completely outside viewport", () => {
+      const node = {
+        position: {
+          x: 2e3,
+          y: 2e3
+        },
+        width: 100,
+        height: 100
+      };
+      (0, _vitest.expect)((0, _viewport.isNodeVisible)(node, transform, viewportWidth, viewportHeight)).toBe(false);
+    });
+    (0, _vitest.it)("should return true for node with zero dimensions", () => {
+      const node = {
+        position: {
+          x: 100,
+          y: 100
+        },
+        width: 0,
+        height: 0
+      };
+      (0, _vitest.expect)((0, _viewport.isNodeVisible)(node, transform, viewportWidth, viewportHeight)).toBe(true);
+    });
+    (0, _vitest.it)("should handle zoomed viewport", () => {
+      const zoomedTransform = {
+        x: 0,
+        y: 0,
+        zoom: 2
+      };
+      const node = {
+        position: {
+          x: 100,
+          y: 100
+        },
+        width: 100,
+        height: 100
+      };
+      (0, _vitest.expect)((0, _viewport.isNodeVisible)(node, zoomedTransform, viewportWidth, viewportHeight)).toBe(true);
+    });
+  });
+});

package/dist/__tests__/viewport-types.test.d.ts

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