blue-chestnut-solar-expert 0.0.67 → 0.0.69

package/dist/components/{p-DlNHVTGB.js → p-BOe-Z8rz.js}

@@ -1,24 +1,472 @@
 
 if (typeof global === "undefined") { var global = globalThis || window || self; }
 import { p as proxyCustomElement, H, h, getAssetPath } from './index.js';
-import { r as requireDist$1, d as defineCustomElement$5, a as DEFAULT_SOLAR_EXPERT_CONFIG, b as DEFAULT_SOLAR_PANEL_TYPE, c as distExports$1, B as BORDER_INSET } from './p-PkMjF2if.js';
-import { d as defineCustomElement$3, r as roofTool, m as moveTool, a as markRoofEdgeTool, o as obstructionTool } from './p-DWirjxpO.js';
-import { d as defineCustomElement$9, g as getPixelInMeters } from './p-BFJHTJPM.js';
-import { s as state, o as onChange, g as getLanguageStrings } from './p-eDwaXClX.js';
+import { d as defineCustomElement$3, r as roofTool, m as moveTool, a as markRoofEdgeTool, o as obstructionTool } from './p-Cx7fffWb.js';
+import { d as defineCustomElement$5, a as DEFAULT_SOLAR_EXPERT_CONFIG, b as DEFAULT_SOLAR_PANEL_TYPE, B as BORDER_INSET } from './p-C3ZXE525.js';
+import { d as defineCustomElement$9, g as getPixelInMeters } from './p-OxUYjaAL.js';
+import { s as state, o as onChange, g as getLanguageStrings } from './p-DfzSejIb.js';
 import { d as defineCustomElement$g } from './p-CL74Q4VR.js';
 import { d as defineCustomElement$f } from './p-D8w3bTPO.js';
 import { d as defineCustomElement$e } from './p-C5QieOat.js';
 import { d as defineCustomElement$d } from './p-Umz6nJIv.js';
 import { d as defineCustomElement$c } from './p-FdEV2qPo.js';
 import { d as defineCustomElement$b } from './p-BJLO76Yi.js';
-import { d as defineCustomElement$a } from './p-i1uLweD0.js';
+import { d as defineCustomElement$a } from './p-26DHwbCE.js';
 import { d as defineCustomElement$8 } from './p-DBwr8xSB.js';
 import { d as defineCustomElement$7 } from './p-DTXeHbuh.js';
-import { d as defineCustomElement$6 } from './p-B4X-RCW0.js';
+import { d as defineCustomElement$6 } from './p-Ddk3b30j.js';
 import { d as defineCustomElement$4 } from './p-P28NBglk.js';
-import { d as defineCustomElement$2 } from './p-Dzl6kfPI.js';
+import { d as defineCustomElement$2 } from './p-D2AHNjbG.js';
 import { d as defineCustomElement$1 } from './p-waOPoUcA.js';
 
+class Point {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+    equals(other) {
+        return this.x === other.x && this.y === other.y;
+    }
+}
+var PolygonType;
+(function (PolygonType) {
+    PolygonType["ROOF"] = "roof";
+    PolygonType["OBSTRUCTION"] = "obstruction";
+})(PolygonType || (PolygonType = {}));
+
+function isPointInPolygon(point, polygon) {
+    if (!polygon.closed || polygon.points.length < 3)
+        return false;
+    const num_vertices = polygon.points.length;
+    const x = point.x;
+    const y = point.y;
+    let inside = false;
+    let p1 = polygon.points[0];
+    let p2;
+    for (let i = 1; i <= num_vertices; i++) {
+        p2 = polygon.points[i % num_vertices];
+        if (y > Math.min(p1.y, p2.y)) {
+            if (y <= Math.max(p1.y, p2.y)) {
+                if (x <= Math.max(p1.x, p2.x)) {
+                    const x_intersection = ((y - p1.y) * (p2.x - p1.x)) / (p2.y - p1.y) + p1.x;
+                    if (p1.x === p2.x || x <= x_intersection) {
+                        inside = !inside;
+                    }
+                }
+            }
+        }
+        p1 = p2;
+    }
+    return inside;
+}
+
+async function fetchSolarData(latitude, longitude, apiKey) {
+    if (latitude === 0 || longitude === 0) {
+        return null;
+    }
+    try {
+        const args = {
+            "location.latitude": latitude.toFixed(5),
+            "location.longitude": longitude.toFixed(5),
+        };
+        const params = new URLSearchParams({
+            ...args,
+            key: apiKey,
+        });
+        const response = await fetch(`https://solar.googleapis.com/v1/buildingInsights:findClosest?${params}`);
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(`HTTP error! status: ${response.status}, body: ${errorText}`);
+        }
+        const contentType = response.headers.get("content-type");
+        if (!contentType || !contentType.includes("application/json")) {
+            const text = await response.text();
+            console.error("Unexpected content type:", contentType, "Response:", text);
+            return null;
+        }
+        const rawData = await response.json();
+        return rawData;
+    }
+    catch (error) {
+        console.error("Error fetching solar data:", error);
+        if (error instanceof TypeError &&
+            error.message === "Failed to fetch") {
+            throw new Error("Unable to connect to the solar data API.");
+        }
+        throw error;
+    }
+}
+
+function latLngToPixel(bounds, canvas, latLng) {
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+        throw new Error("Canvas context not found");
+    }
+    const latToPixel = (lat) => {
+        return canvas.height *
+            (1 - (lat - bounds.south) / (bounds.north - bounds.south));
+    };
+    const lngToPixel = (lng) => {
+        return canvas.width * (lng - bounds.west) / (bounds.east - bounds.west);
+    };
+    return new Point(lngToPixel(latLng.longitude), latToPixel(latLng.latitude));
+}
+
+function projectPoint(point, azimuth) {
+    const angle = azimuth * (Math.PI / 180);
+    const x = point.x * Math.cos(angle) - point.y * Math.sin(angle);
+    const y = point.x * Math.sin(angle) + point.y * Math.cos(angle);
+    return new Point(x, y);
+}
+function projectPolygon(polygon, azimuth) {
+    return {
+        points: polygon.points.map((point) => projectPoint(point, azimuth)),
+        type: polygon.type,
+        closed: polygon.closed,
+        id: polygon.id,
+    };
+}
+function intersects(line1, line2) {
+    const p1 = line1.start;
+    const p2 = line1.end;
+    const p3 = line2.start;
+    const p4 = line2.end;
+    if (p1.equals(p3) ||
+        p1.equals(p4) ||
+        p2.equals(p3) ||
+        p2.equals(p4)) {
+        return false;
+    }
+    const d1 = (p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x);
+    const d2 = (p4.x - p3.x) * (p2.y - p3.y) - (p4.y - p3.y) * (p2.x - p3.x);
+    const d3 = (p2.x - p1.x) * (p3.y - p1.y) - (p2.y - p1.y) * (p3.x - p1.x);
+    const d4 = (p2.x - p1.x) * (p4.y - p1.y) - (p2.y - p1.y) * (p4.x - p1.x);
+    return (d1 * d2 < 0) && (d3 * d4 < 0);
+}
+function offsetPolygon(polygon, offset) {
+    if (polygon.points.length === 0) {
+        return { polygon: polygon, offset: { x: 0, y: 0 } };
+    }
+    let offsetX = 0;
+    let offsetY = 0;
+    if (!offset) {
+        const minX = Math.min(...polygon.points.map((point) => point.x));
+        const minY = Math.min(...polygon.points.map((point) => point.y));
+        const maxX = Math.max(...polygon.points.map((point) => point.x));
+        const maxY = Math.max(...polygon.points.map((point) => point.y));
+        offsetX = minX + (maxX - minX) / 2;
+        offsetY = minY + (maxY - minY) / 2;
+    }
+    else {
+        offsetX = offset.x;
+        offsetY = offset.y;
+    }
+    const newPoints = polygon.points.map((point) => new Point(point.x - offsetX, point.y - offsetY));
+    return {
+        polygon: { ...polygon, points: newPoints },
+        offset: { x: offsetX, y: offsetY },
+    };
+}
+function getBestFittingRoofSegment(roof, roofSegmentStats, bounds, canvas) {
+    const polygonBounds = {
+        minX: Math.min(...roof.points.map((p) => p.x)),
+        maxX: Math.max(...roof.points.map((p) => p.x)),
+        minY: Math.min(...roof.points.map((p) => p.y)),
+        maxY: Math.max(...roof.points.map((p) => p.y)),
+    };
+    let bestSegment = null;
+    let bestIoU = 0;
+    for (const segment of roofSegmentStats) {
+        const sw = latLngToPixel(bounds, canvas, {
+            latitude: segment.boundingBox.sw.latitude,
+            longitude: segment.boundingBox.sw.longitude,
+        });
+        const ne = latLngToPixel(bounds, canvas, {
+            latitude: segment.boundingBox.ne.latitude,
+            longitude: segment.boundingBox.ne.longitude,
+        });
+        const segmentBounds = {
+            minX: sw.x,
+            maxX: ne.x,
+            minY: ne.y,
+            maxY: sw.y,
+        };
+        const interLeft = Math.max(polygonBounds.minX, segmentBounds.minX);
+        const interRight = Math.min(polygonBounds.maxX, segmentBounds.maxX);
+        const interTop = Math.max(polygonBounds.minY, segmentBounds.minY);
+        const interBottom = Math.min(polygonBounds.maxY, segmentBounds.maxY);
+        const interWidth = interRight - interLeft;
+        const interHeight = interBottom - interTop;
+        let intersectionArea = 0;
+        if (interWidth > 0 && interHeight > 0) {
+            intersectionArea = interWidth * interHeight;
+        }
+        const polygonArea = (polygonBounds.maxX - polygonBounds.minX) *
+            (polygonBounds.maxY - polygonBounds.minY);
+        const segmentArea = (segmentBounds.maxX - segmentBounds.minX) *
+            (segmentBounds.maxY - segmentBounds.minY);
+        const unionArea = polygonArea + segmentArea - intersectionArea;
+        const iou = unionArea > 0 ? intersectionArea / unionArea : 0;
+        if (iou > bestIoU) {
+            bestIoU = iou;
+            bestSegment = segment;
+        }
+    }
+    return bestSegment;
+}
+
+function generateGrid(minMax, solarPanel, horizontal, anker, rowSpacing, columnSpacing) {
+    const grid = [];
+    const width = horizontal ? solarPanel.heightMeters : solarPanel.widthMeters;
+    const widthCount = Math.ceil((minMax.maxX - minMax.minX) / width);
+    const height = horizontal
+        ? solarPanel.widthMeters
+        : solarPanel.heightMeters;
+    const heightCount = Math.ceil((minMax.maxY - minMax.minY) / height);
+    const widthOffset = width / 2;
+    const heightOffset = height / 2;
+    const startX = anker.x -
+        (Math.ceil((anker.x - minMax.minX) / width) * width);
+    const startY = anker.y -
+        (Math.ceil((anker.y - minMax.minY) / height) * height);
+    for (let i = 0; i < heightCount; i++) {
+        const row = [];
+        for (let j = 0; j < widthCount; j++) {
+            const x = startX + j * width + j * columnSpacing + widthOffset;
+            const y = startY + i * height + i * rowSpacing + heightOffset;
+            const positionedSolarPanel = {
+                panel: solarPanel,
+                pixelPosition: new Point(x, y),
+                horizontal: horizontal,
+            };
+            row.push(positionedSolarPanel);
+        }
+        grid.push(row);
+    }
+    return grid;
+}
+function getSolarPanelLines(positionedSolarPanel, horizontal) {
+    const width = horizontal
+        ? positionedSolarPanel.panel.heightMeters
+        : positionedSolarPanel.panel.widthMeters;
+    const height = horizontal
+        ? positionedSolarPanel.panel.widthMeters
+        : positionedSolarPanel.panel.heightMeters;
+    const p1 = new Point(positionedSolarPanel.pixelPosition.x - width / 2, positionedSolarPanel.pixelPosition.y - height / 2);
+    const p2 = new Point(positionedSolarPanel.pixelPosition.x - width / 2, positionedSolarPanel.pixelPosition.y + height / 2);
+    const p3 = new Point(positionedSolarPanel.pixelPosition.x + width / 2, positionedSolarPanel.pixelPosition.y + height / 2);
+    const p4 = new Point(positionedSolarPanel.pixelPosition.x + width / 2, positionedSolarPanel.pixelPosition.y - height / 2);
+    const lines = [
+        {
+            start: p1,
+            end: p2,
+        },
+        {
+            start: p2,
+            end: p3,
+        },
+        {
+            start: p3,
+            end: p4,
+        },
+        {
+            start: p4,
+            end: p1,
+        },
+    ];
+    return lines;
+}
+function solarPanelInObstacle(positionedSolarPanel, obstacle, horizontal) {
+    const lines = getSolarPanelLines(positionedSolarPanel, horizontal);
+    if (isPointInPolygon(positionedSolarPanel.pixelPosition, obstacle)) {
+        return true;
+    }
+    for (let i = 0; i < obstacle.points.length; i++) {
+        const point = obstacle.points[i];
+        const nextPoint = obstacle.points[(i + 1) % obstacle.points.length];
+        const border = {
+            start: point,
+            end: nextPoint,
+        };
+        for (const line of lines) {
+            if (intersects(line, border)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+function solarPanelInPolygon(positionedSolarPanel, polygon, horizontal) {
+    const lines = getSolarPanelLines(positionedSolarPanel, horizontal);
+    for (let i = 0; i < polygon.points.length; i++) {
+        const point = polygon.points[i];
+        const nextPoint = polygon.points[(i + 1) % polygon.points.length];
+        const border = {
+            start: point,
+            end: nextPoint,
+        };
+        for (const line of lines) {
+            if (intersects(line, border)) {
+                return false;
+            }
+        }
+    }
+    return isPointInPolygon(positionedSolarPanel.pixelPosition, polygon);
+}
+function isPanelObstructed(positionedSolarPanel, obstacles, horizontal) {
+    for (const obstacle of obstacles) {
+        if (solarPanelInObstacle(positionedSolarPanel, obstacle.polygon, horizontal)) {
+            return true;
+        }
+    }
+    return false;
+}
+function getSolarPanelsInPolygon(grid, polygon, horizontal, obstacles) {
+    const solarPanels = [];
+    for (const row of grid) {
+        let newRow = [];
+        for (const positionedSolarPanel of row) {
+            const isObstructed = isPanelObstructed(positionedSolarPanel, obstacles, horizontal);
+            if (solarPanelInPolygon(positionedSolarPanel, polygon, horizontal) && !isObstructed) {
+                newRow.push(positionedSolarPanel);
+            }
+        }
+        solarPanels.push(newRow);
+    }
+    return solarPanels;
+}
+function getOptimalSolarPosition(roof, obstacles, solarPanel, angle, columnSpacing, rowSpacing) {
+    const minX = Math.min(...roof.points.map((p) => p.x));
+    const maxX = Math.max(...roof.points.map((p) => p.x));
+    const minY = Math.min(...roof.points.map((p) => p.y));
+    const maxY = Math.max(...roof.points.map((p) => p.y));
+    const minMax = {
+        minX: minX,
+        maxX: maxX,
+        minY: minY,
+        maxY: maxY,
+    };
+    const verticalSolarPanel = {
+        ...solarPanel,
+        widthMeters: solarPanel.widthMeters,
+        heightMeters: solarPanel.heightMeters * Math.cos(angle * Math.PI / 180),
+    };
+    let solarPanels = [];
+    let numberOfPanels = 0;
+    for (const point of roof.points) {
+        for (const horizontal of [true]) {
+            const grid = generateGrid(minMax, verticalSolarPanel, horizontal, point, rowSpacing, columnSpacing);
+            const solarPanelsInPolygon = getSolarPanelsInPolygon(grid, roof, horizontal, obstacles);
+            const numberOfPanelsInPolygon = solarPanelsInPolygon.reduce((acc, row) => acc + row.length, 0);
+            if (numberOfPanelsInPolygon > numberOfPanels) {
+                numberOfPanels = numberOfPanelsInPolygon;
+                solarPanels = solarPanelsInPolygon;
+            }
+        }
+        break;
+    }
+    return solarPanels;
+}
+function projectObstacles(obstacles, azimuth, offset, inset) {
+    const result = [];
+    for (const obstacle of obstacles) {
+        const offsetObstacle = offsetPolygon(obstacle, offset);
+        const projectedObstacle = projectPolygon(offsetObstacle.polygon, -azimuth);
+        const insetObstacle = insetPolygon(projectedObstacle, -inset);
+        const minX = Math.min(...insetObstacle.points.map((p) => p.x));
+        const maxX = Math.max(...insetObstacle.points.map((p) => p.x));
+        const minY = Math.min(...insetObstacle.points.map((p) => p.y));
+        const maxY = Math.max(...insetObstacle.points.map((p) => p.y));
+        const boundingBox = {
+            minX: minX,
+            maxX: maxX,
+            minY: minY,
+            maxY: maxY,
+        };
+        result.push({
+            polygon: projectedObstacle,
+            boundingBox: boundingBox,
+        });
+    }
+    return result;
+}
+function isClockwise(points) {
+    let sum = 0;
+    for (let i = 0; i < points.length; i++) {
+        const curr = points[i];
+        const next = points[(i + 1) % points.length];
+        sum += (next.x - curr.x) * (next.y + curr.y);
+    }
+    return sum > 0;
+}
+function insetPolygon(polygon, inset) {
+    const points = polygon.points;
+    const isClockwisePolygon = isClockwise(points);
+    inset = inset * Math.sqrt(2) * (isClockwisePolygon ? -1 : 1);
+    const insetPoints = [];
+    for (let i = 0; i < points.length; i++) {
+        const prev = points[(i - 1 + points.length) % points.length];
+        const curr = points[i];
+        const next = points[(i + 1) % points.length];
+        const v1 = {
+            x: curr.x - prev.x,
+            y: curr.y - prev.y,
+        };
+        const v2 = {
+            x: next.x - curr.x,
+            y: next.y - curr.y,
+        };
+        const perp1 = {
+            x: -v1.y,
+            y: v1.x,
+        };
+        const perp2 = {
+            x: -v2.y,
+            y: v2.x,
+        };
+        const length1 = Math.sqrt(perp1.x * perp1.x + perp1.y * perp1.y);
+        const length2 = Math.sqrt(perp2.x * perp2.x + perp2.y * perp2.y);
+        perp1.x /= length1;
+        perp1.y /= length1;
+        perp2.x /= length2;
+        perp2.y /= length2;
+        const bisector = {
+            x: perp1.x + perp2.x,
+            y: perp1.y + perp2.y,
+        };
+        const bisectorLength = Math.sqrt(bisector.x * bisector.x + bisector.y * bisector.y);
+        bisector.x /= bisectorLength;
+        bisector.y /= bisectorLength;
+        const insetPoint = new Point(curr.x + bisector.x * inset, curr.y + bisector.y * inset);
+        insetPoints.push(insetPoint);
+    }
+    return {
+        points: insetPoints,
+        type: polygon.type,
+        closed: polygon.closed,
+        id: polygon.id,
+        area: polygon.area,
+    };
+}
+function getOptimalSolarPositionFully(roof, obstacles, solarPanel, azimuth, inset, angle, columnSpacing, rowSpacing) {
+    const insetRoof = insetPolygon(roof, inset);
+    const offset = offsetPolygon(insetRoof);
+    const projectedOffset = projectPolygon(offset.polygon, -azimuth);
+    const projectedObstacles = projectObstacles(obstacles, azimuth, offset.offset, inset);
+    const horizontalSolarPanels = getOptimalSolarPosition(projectedOffset, projectedObstacles, solarPanel, angle, columnSpacing, rowSpacing);
+    const unprojectedPanels = [];
+    for (const panel of horizontalSolarPanels.flat()) {
+        const unprojectedPanel = projectPoint(panel.pixelPosition, azimuth);
+        const offsetPosition = new Point(unprojectedPanel.x + offset.offset.x, unprojectedPanel.y + offset.offset.y);
+        unprojectedPanels.push({
+            panel: panel.panel,
+            pixelPosition: offsetPosition,
+            horizontal: panel.horizontal,
+        });
+    }
+    return unprojectedPanels;
+}
+
 const THIS_IS_NOT_AN_OBJECT = "This is not an object";
 const THIS_IS_NOT_A_FLOAT16ARRAY_OBJECT = "This is not a Float16Array object";
 const THIS_CONSTRUCTOR_IS_NOT_A_SUBCLASS_OF_FLOAT16ARRAY =
@@ -2515,7 +2963,7 @@ addDecoder(6, () => {
 addDecoder(7, () => import('./p-BGoSj_DR.js').then((m) => m.default));
 addDecoder([8, 32946], () => import('./p-B54Ul0nf.js').then((m) => m.default));
 addDecoder(32773, () => import('./p-ByX6QP-E.js').then((m) => m.default));
-addDecoder(34887, () => import('./p-BcVa4_YP.js')
+addDecoder(34887, () => import('./p-DLWzgdrw.js')
   .then(async (m) => {
     await m.zstd.init();
     return m;
@@ -14095,7 +14543,6 @@ async function downloadGeoTIFF(url, apiKey) {
 }
 // [END solar_api_download_geotiff]
 async function getBuildingImages(latitude, longitude, apiKey, radiusMeters = 15) {
-    console.log("getBuildingImages", latitude, longitude, radiusMeters);
     if (latitude === 0 || longitude === 0) {
         return null;
     }
@@ -14124,1052 +14571,950 @@ async function getBuildingImages(latitude, longitude, apiKey, radiusMeters = 15)
     }
 }
 
-var dist = {};
-
-var types = {};
-
-var hasRequiredTypes;
-
-function requireTypes () {
-	if (hasRequiredTypes) return types;
-	hasRequiredTypes = 1;
-	Object.defineProperty(types, "__esModule", { value: true });
-	types.Tool = void 0;
-	var Tool;
-	(function (Tool) {
-	    Tool["ROOF_POLYGON"] = "roof_polygon";
-	    Tool["OBSTRUCTION_POLYGON"] = "obstruction_polygon";
-	    Tool["MOVE"] = "move";
-	    Tool["MARK_ROOF_EDGE"] = "mark_roof_edge";
-	})(Tool || (types.Tool = Tool = {}));
-	
-	return types;
-}
-
-var canvasUpdate = {};
-
-var drawingUtils = {};
-
-var hasRequiredDrawingUtils;
-
-function requireDrawingUtils () {
-	if (hasRequiredDrawingUtils) return drawingUtils;
-	hasRequiredDrawingUtils = 1;
-	(function (exports) {
-		Object.defineProperty(exports, "__esModule", { value: true });
-		exports.CanvasUtils = exports.PREVIEW_POINT_RADIUS = exports.CLOSE_DISTANCE = exports.POINT_HOVER_RADIUS = exports.POINT_RADIUS = exports.CANVAS_COLORS = void 0;
-		const types_1 = requireTypes();
-		const harmonia_types_1 = requireDist$1();
-		exports.CANVAS_COLORS = {
-		    ROOF: "#4A90E2",
-		    OBSTRUCTION: "#E74C3C",
-		    ROOF_FILL: "rgba(74, 144, 226, 0.2)",
-		    OBSTRUCTION_FILL: "rgba(231, 76, 60, 0.2)",
-		    POINT: "#2C3E50",
-		    POINT_HOVER: "#E67E22",
-		    GRID: "#E5E5E5",
-		    PREVIEW_POINT: "rgba(74, 144, 226, 0.6)",
-		    PREVIEW_LINE: "rgba(74, 144, 226, 0.4)",
-		    START_POINT_HIGHLIGHT: "#27AE60",
-		    HIGHLIGHTED_EDGE: "#FF6B35",
-		    SOLAR_PANEL: "#2E86C1",
-		    SOLAR_PANEL_FILL: "rgba(46, 134, 193, 0.3)",
-		    SOLAR_PANEL_BORDER: "#1B4F72",
-		};
-		exports.POINT_RADIUS = 6;
-		exports.POINT_HOVER_RADIUS = 8;
-		exports.CLOSE_DISTANCE = 7;
-		exports.PREVIEW_POINT_RADIUS = 5;
-		class CanvasUtils {
-		    static screenToCanvas(screenPoint, canvasRect, coordinateSystem) {
-		        const scaleX = coordinateSystem.width / canvasRect.width;
-		        const scaleY = coordinateSystem.height / canvasRect.height;
-		        return new harmonia_types_1.Point((screenPoint.x - canvasRect.left) * scaleX, (screenPoint.y - canvasRect.top) * scaleY);
-		    }
-		    static canvasToScreen(canvasPoint, canvasRect, coordinateSystem) {
-		        const scaleX = canvasRect.width / coordinateSystem.width;
-		        const scaleY = canvasRect.height / coordinateSystem.height;
-		        return new harmonia_types_1.Point(canvasPoint.x * scaleX, canvasPoint.y * scaleY);
-		    }
-		    static getDistance(point1, point2) {
-		        const dx = point1.x - point2.x;
-		        const dy = point1.y - point2.y;
-		        return Math.sqrt(dx * dx + dy * dy);
-		    }
-		    static findNearestPoint(clickPoint, polygons, threshold = exports.CLOSE_DISTANCE) {
-		        for (const polygon of polygons) {
-		            for (let i = 0; i < polygon.points.length; i++) {
-		                const distance = this.getDistance(clickPoint, polygon.points[i]);
-		                if (distance <= threshold) {
-		                    return { polygon, pointIndex: i };
-		                }
-		            }
-		        }
-		        return null;
-		    }
-		    static isNearFirstPoint(polygon, point, threshold = exports.CLOSE_DISTANCE) {
-		        if (polygon.points.length < 3)
-		            return false;
-		        return this.getDistance(point, polygon.points[0]) <= threshold;
-		    }
-		    static findPolygonAtPoint(point, polygons) {
-		        for (let i = polygons.length - 1; i >= 0; i--) {
-		            const polygon = polygons[i];
-		            if (!polygon.closed || polygon.points.length < 3) {
-		                continue;
-		            }
-		            if (this.isPointInPolygon(point, polygon.points)) {
-		                return polygon;
-		            }
-		        }
-		        return null;
-		    }
-		    static isPointInPolygon(point, polygonPoints) {
-		        const x = point.x;
-		        const y = point.y;
-		        let inside = false;
-		        for (let i = 0, j = polygonPoints.length - 1; i < polygonPoints.length; j = i++) {
-		            const xi = polygonPoints[i].x;
-		            const yi = polygonPoints[i].y;
-		            const xj = polygonPoints[j].x;
-		            const yj = polygonPoints[j].y;
-		            if (((yi > y) !== (yj > y)) &&
-		                (x < (xj - xi) * (y - yi) / (yj - yi) + xi)) {
-		                inside = !inside;
-		            }
-		        }
-		        return inside;
-		    }
-		    static drawGrid(ctx, canvasSize, coordinateSystem, gridSize = 50) {
-		        ctx.save();
-		        ctx.strokeStyle = exports.CANVAS_COLORS.GRID;
-		        ctx.lineWidth = 1;
-		        const scaleX = canvasSize.width / coordinateSystem.width;
-		        const scaleY = canvasSize.height / coordinateSystem.height;
-		        for (let x = 0; x <= coordinateSystem.width; x += gridSize) {
-		            const screenX = x * scaleX;
-		            ctx.beginPath();
-		            ctx.moveTo(screenX, 0);
-		            ctx.lineTo(screenX, canvasSize.height);
-		            ctx.stroke();
-		        }
-		        for (let y = 0; y <= coordinateSystem.height; y += gridSize) {
-		            const screenY = y * scaleY;
-		            ctx.beginPath();
-		            ctx.moveTo(0, screenY);
-		            ctx.lineTo(canvasSize.width, screenY);
-		            ctx.stroke();
-		        }
-		        ctx.restore();
-		    }
-		    static drawPolygon(ctx, polygon, canvasSize, coordinateSystem, isActive = false) {
-		        if (polygon.points.length === 0)
-		            return;
-		        const scaleX = canvasSize.width / coordinateSystem.width;
-		        const scaleY = canvasSize.height / coordinateSystem.height;
-		        const color = polygon.type === harmonia_types_1.PolygonType.ROOF
-		            ? exports.CANVAS_COLORS.ROOF
-		            : exports.CANVAS_COLORS.OBSTRUCTION;
-		        const fillColor = polygon.type === harmonia_types_1.PolygonType.ROOF
-		            ? exports.CANVAS_COLORS.ROOF_FILL
-		            : exports.CANVAS_COLORS.OBSTRUCTION_FILL;
-		        ctx.save();
-		        if (polygon.closed && polygon.points.length >= 3) {
-		            ctx.fillStyle = fillColor;
-		            ctx.beginPath();
-		            ctx.moveTo(polygon.points[0].x * scaleX, polygon.points[0].y * scaleY);
-		            for (let i = 1; i < polygon.points.length; i++) {
-		                ctx.lineTo(polygon.points[i].x * scaleX, polygon.points[i].y * scaleY);
-		            }
-		            ctx.closePath();
-		            ctx.fill();
-		        }
-		        ctx.strokeStyle = color;
-		        ctx.lineWidth = isActive ? 3 : 2;
-		        ctx.beginPath();
-		        if (polygon.points.length > 0) {
-		            ctx.moveTo(polygon.points[0].x * scaleX, polygon.points[0].y * scaleY);
-		            for (let i = 1; i < polygon.points.length; i++) {
-		                ctx.lineTo(polygon.points[i].x * scaleX, polygon.points[i].y * scaleY);
-		            }
-		            if (polygon.closed) {
-		                ctx.closePath();
-		            }
-		        }
-		        ctx.stroke();
-		        ctx.restore();
-		    }
-		    static drawPoints(ctx, polygon, canvasSize, coordinateSystem, hoveredPointIndex = -1, showPoints = true) {
-		        if (!showPoints || polygon.points.length === 0)
-		            return;
-		        const scaleX = canvasSize.width / coordinateSystem.width;
-		        const scaleY = canvasSize.height / coordinateSystem.height;
-		        ctx.save();
-		        polygon.points.forEach((point, index) => {
-		            const screenX = point.x * scaleX;
-		            const screenY = point.y * scaleY;
-		            const isHovered = index === hoveredPointIndex;
-		            const radius = isHovered ? exports.POINT_HOVER_RADIUS : exports.POINT_RADIUS;
-		            ctx.fillStyle = isHovered
-		                ? exports.CANVAS_COLORS.POINT_HOVER
-		                : exports.CANVAS_COLORS.POINT;
-		            ctx.beginPath();
-		            ctx.arc(screenX, screenY, radius, 0, 2 * Math.PI);
-		            ctx.fill();
-		            ctx.strokeStyle = "#FFFFFF";
-		            ctx.lineWidth = 2;
-		            ctx.stroke();
-		        });
-		        ctx.restore();
-		    }
-		    static clearCanvas(ctx, width, height) {
-		        ctx.clearRect(0, 0, width, height);
-		    }
-		    static drawPreviewPoint(ctx, point, canvasSize, coordinateSystem, polygonType) {
-		        const scaleX = canvasSize.width / coordinateSystem.width;
-		        const scaleY = canvasSize.height / coordinateSystem.height;
-		        const screenX = point.x * scaleX;
-		        const screenY = point.y * scaleY;
-		        ctx.save();
-		        const color = polygonType === harmonia_types_1.PolygonType.ROOF
-		            ? exports.CANVAS_COLORS.ROOF
-		            : exports.CANVAS_COLORS.OBSTRUCTION;
-		        ctx.fillStyle = color;
-		        ctx.globalAlpha = 0.6;
-		        ctx.beginPath();
-		        ctx.arc(screenX, screenY, exports.PREVIEW_POINT_RADIUS, 0, 2 * Math.PI);
-		        ctx.fill();
-		        ctx.globalAlpha = 1;
-		        ctx.strokeStyle = "#FFFFFF";
-		        ctx.lineWidth = 1;
-		        ctx.stroke();
-		        ctx.restore();
-		    }
-		    static drawPreviewLine(ctx, fromPoint, toPoint, canvasSize, coordinateSystem, polygonType) {
-		        const scaleX = canvasSize.width / coordinateSystem.width;
-		        const scaleY = canvasSize.height / coordinateSystem.height;
-		        const fromScreenX = fromPoint.x * scaleX;
-		        const fromScreenY = fromPoint.y * scaleY;
-		        const toScreenX = toPoint.x * scaleX;
-		        const toScreenY = toPoint.y * scaleY;
-		        ctx.save();
-		        const color = polygonType === harmonia_types_1.PolygonType.ROOF
-		            ? exports.CANVAS_COLORS.ROOF
-		            : exports.CANVAS_COLORS.OBSTRUCTION;
-		        ctx.strokeStyle = color;
-		        ctx.globalAlpha = 0.4;
-		        ctx.lineWidth = 2;
-		        ctx.setLineDash([5, 5]);
-		        ctx.beginPath();
-		        ctx.moveTo(fromScreenX, fromScreenY);
-		        ctx.lineTo(toScreenX, toScreenY);
-		        ctx.stroke();
-		        ctx.restore();
-		    }
-		    static drawHighlightedStartPoint(ctx, point, canvasSize, coordinateSystem) {
-		        const scaleX = canvasSize.width / coordinateSystem.width;
-		        const scaleY = canvasSize.height / coordinateSystem.height;
-		        const screenX = point.x * scaleX;
-		        const screenY = point.y * scaleY;
-		        ctx.save();
-		        ctx.strokeStyle = exports.CANVAS_COLORS.START_POINT_HIGHLIGHT;
-		        ctx.lineWidth = 3;
-		        ctx.globalAlpha = 0.8;
-		        ctx.beginPath();
-		        ctx.arc(screenX, screenY, exports.POINT_HOVER_RADIUS + 3, 0, 2 * Math.PI);
-		        ctx.stroke();
-		        ctx.fillStyle = exports.CANVAS_COLORS.START_POINT_HIGHLIGHT;
-		        ctx.globalAlpha = 1;
-		        ctx.beginPath();
-		        ctx.arc(screenX, screenY, exports.POINT_RADIUS, 0, 2 * Math.PI);
-		        ctx.fill();
-		        ctx.strokeStyle = "#FFFFFF";
-		        ctx.lineWidth = 2;
-		        ctx.stroke();
-		        ctx.restore();
-		    }
-		    static drawHighlightedEdge(ctx, pointA, pointB, canvasSize, coordinateSystem) {
-		        const scaleX = canvasSize.width / coordinateSystem.width;
-		        const scaleY = canvasSize.height / coordinateSystem.height;
-		        const screenAX = pointA.x * scaleX;
-		        const screenAY = pointA.y * scaleY;
-		        const screenBX = pointB.x * scaleX;
-		        const screenBY = pointB.y * scaleY;
-		        ctx.save();
-		        ctx.strokeStyle = exports.CANVAS_COLORS.HIGHLIGHTED_EDGE;
-		        ctx.lineWidth = 4;
-		        ctx.globalAlpha = 0.9;
-		        ctx.beginPath();
-		        ctx.moveTo(screenAX, screenAY);
-		        ctx.lineTo(screenBX, screenBY);
-		        ctx.stroke();
-		        ctx.restore();
-		    }
-		    static drawSolarPanel(ctx, positionedPanel, canvasSize, coordinateSystem, azimuth = 0, pitch = 0) {
-		        const scaleX = canvasSize.width / coordinateSystem.width;
-		        const scaleY = canvasSize.height / coordinateSystem.height;
-		        const centerX = positionedPanel.pixelPosition.x * scaleX;
-		        const centerY = positionedPanel.pixelPosition.y * scaleY;
-		        const panelWidth = positionedPanel.horizontal
-		            ? positionedPanel.panel.heightMeters
-		            : positionedPanel.panel.widthMeters;
-		        const panelHeight = positionedPanel.horizontal
-		            ? positionedPanel.panel.widthMeters
-		            : positionedPanel.panel.heightMeters;
-		        let scaledWidth = panelWidth * scaleX;
-		        let scaledHeight = panelHeight * scaleY;
-		        const azimuthRad = (azimuth * Math.PI) / 180;
-		        ctx.save();
-		        ctx.translate(centerX, centerY);
-		        ctx.rotate(azimuthRad);
-		        ctx.fillStyle = exports.CANVAS_COLORS.SOLAR_PANEL_FILL;
-		        ctx.fillRect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight);
-		        ctx.strokeStyle = exports.CANVAS_COLORS.SOLAR_PANEL_BORDER;
-		        ctx.lineWidth = 1;
-		        ctx.strokeRect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight);
-		        ctx.strokeStyle = exports.CANVAS_COLORS.SOLAR_PANEL;
-		        ctx.lineWidth = 0.5;
-		        ctx.globalAlpha = 1;
-		        const cellSize = Math.min(scaledWidth / 6, scaledHeight / 10);
-		        for (let x = -scaledWidth / 2 + cellSize; x < scaledWidth / 2; x += cellSize) {
-		            ctx.beginPath();
-		            ctx.moveTo(x, -scaledHeight / 2);
-		            ctx.lineTo(x, scaledHeight / 2);
-		            ctx.stroke();
-		        }
-		        for (let y = -scaledHeight / 2 + cellSize; y < scaledHeight / 2; y += cellSize) {
-		            ctx.beginPath();
-		            ctx.moveTo(-scaledWidth / 2, y);
-		            ctx.lineTo(scaledWidth / 2, y);
-		            ctx.stroke();
-		        }
-		        ctx.restore();
-		    }
-		    static drawPositionedSolarPanels(ctx, positionedPanels, canvasSize, coordinateSystem, polygon) {
-		        if (!positionedPanels || positionedPanels.length === 0)
-		            return;
-		        const azimuth = polygon.azimuth || 0;
-		        const pitch = polygon.pitch || 0;
-		        positionedPanels.forEach((panel) => {
-		            this.drawSolarPanel(ctx, panel, canvasSize, coordinateSystem, azimuth, pitch);
-		        });
-		    }
-		    static drawState(ctx, state, solarPanelType, options = {}) {
-		        const { showGrid = true, showPoints = true, showPreview = true, showSolarPanels = true, hoveredPointIndex = -1, hoveredPolygonId = null, } = options;
-		        this.clearCanvas(ctx, state.canvasSize.width, state.canvasSize.height);
-		        if (showGrid) {
-		            this.drawGrid(ctx, state.canvasSize, state.coordinateSystem);
-		        }
-		        state.polygons.forEach((polygon) => {
-		            var _a;
-		            const isActive = polygon.id === (((_a = state.currentPolygon) === null || _a === void 0 ? void 0 : _a.id) || hoveredPolygonId);
-		            this.drawPolygon(ctx, polygon, state.canvasSize, state.coordinateSystem, isActive);
-		            if (showPoints) {
-		                const pointHoverIndex = polygon.id === hoveredPolygonId
-		                    ? hoveredPointIndex
-		                    : -1;
-		                this.drawPoints(ctx, polygon, state.canvasSize, state.coordinateSystem, pointHoverIndex, showPoints);
-		            }
-		        });
-		        if (state.currentPolygon &&
-		            !state.polygons.some((p) => { var _a; return p.id === ((_a = state.currentPolygon) === null || _a === void 0 ? void 0 : _a.id); })) {
-		            this.drawPolygon(ctx, state.currentPolygon, state.canvasSize, state.coordinateSystem, true);
-		            if (showPoints) {
-		                this.drawPoints(ctx, state.currentPolygon, state.canvasSize, state.coordinateSystem, hoveredPointIndex, showPoints);
-		            }
-		            if (state.isHoveringStartPoint &&
-		                state.currentPolygon.points.length > 2) {
-		                this.drawHighlightedStartPoint(ctx, state.currentPolygon.points[0], state.canvasSize, state.coordinateSystem);
-		            }
-		        }
-		        if (state.highlightedEdge) {
-		            this.drawHighlightedEdge(ctx, state.highlightedEdge.pointA, state.highlightedEdge.pointB, state.canvasSize, state.coordinateSystem);
-		        }
-		        if (showSolarPanels && state.positionedSolarPanels) {
-		            state.polygons.forEach((polygon) => {
-		                const panelsForPolygon = state.positionedSolarPanels[polygon.id];
-		                if (panelsForPolygon && panelsForPolygon.length > 0) {
-		                    this.drawPositionedSolarPanels(ctx, panelsForPolygon, state.canvasSize, state.coordinateSystem, polygon);
-		                }
-		            });
-		        }
-		        if (state.mousePosition && state.currentPolygon &&
-		            !state.currentPolygon.closed && showPreview) {
-		            const polygonType = state.selectedTool === types_1.Tool.ROOF_POLYGON
-		                ? harmonia_types_1.PolygonType.ROOF
-		                : harmonia_types_1.PolygonType.OBSTRUCTION;
-		            this.drawPreviewPoint(ctx, state.mousePosition, state.canvasSize, state.coordinateSystem, polygonType);
-		            if (state.currentPolygon.points.length > 0) {
-		                const lastPoint = state.currentPolygon
-		                    .points[state.currentPolygon.points.length - 1];
-		                this.drawPreviewLine(ctx, lastPoint, state.mousePosition, state.canvasSize, state.coordinateSystem, polygonType);
-		            }
-		        }
-		    }
-		}
-		exports.CanvasUtils = CanvasUtils;
-		
-	} (drawingUtils));
-	return drawingUtils;
-}
-
-var polygonUtils = {};
-
-var hasRequiredPolygonUtils;
-
-function requirePolygonUtils () {
-	if (hasRequiredPolygonUtils) return polygonUtils;
-	hasRequiredPolygonUtils = 1;
-	Object.defineProperty(polygonUtils, "__esModule", { value: true });
-	polygonUtils.calculatePolygonArea = calculatePolygonArea;
-	polygonUtils.azimuthToCardinal = azimuthToCardinal;
-	polygonUtils.calculatePolygonOrientation = calculatePolygonOrientation;
-	polygonUtils.calculatePolygonAngle = calculatePolygonAngle;
-	function calculatePolygonArea(points) {
-	    let area = 0;
-	    for (let i = 0; i < points.length; i++) {
-	        const j = (i + 1) % points.length;
-	        area += points[i].x * points[j].y;
-	        area -= points[j].x * points[i].y;
-	    }
-	    return Math.abs(area / 2);
-	}
-	function azimuthToCardinal(azimuth) {
-	    if (azimuth >= 337.5 || azimuth < 22.5)
-	        return "North";
-	    if (azimuth >= 22.5 && azimuth < 67.5)
-	        return "Northeast";
-	    if (azimuth >= 67.5 && azimuth < 112.5)
-	        return "East";
-	    if (azimuth >= 112.5 && azimuth < 157.5)
-	        return "Southeast";
-	    if (azimuth >= 157.5 && azimuth < 202.5)
-	        return "South";
-	    if (azimuth >= 202.5 && azimuth < 247.5)
-	        return "Southwest";
-	    if (azimuth >= 247.5 && azimuth < 292.5)
-	        return "West";
-	    return "Northwest";
-	}
-	function calculatePolygonOrientation(points) {
-	    if (points.length < 3)
-	        return 0;
-	    let totalAngle = 0;
-	    for (let i = 0; i < points.length; i++) {
-	        const j = (i + 1) % points.length;
-	        const angle = Math.atan2(points[j].y - points[i].y, points[j].x - points[i].x);
-	        totalAngle += angle;
-	    }
-	    const avgAngle = (totalAngle / points.length) * (180 / Math.PI);
-	    const normalizedAngle = (avgAngle + 360) % 360;
-	    return normalizedAngle;
-	}
-	function calculatePolygonAngle(points) {
-	    if (points.length < 3)
-	        return 0;
-	    let totalAngle = 0;
-	    for (let i = 0; i < points.length; i++) {
-	        const j = (i + 1) % points.length;
-	        const k = (i + 2) % points.length;
-	        const v1 = {
-	            x: points[j].x - points[i].x,
-	            y: points[j].y - points[i].y,
-	        };
-	        const v2 = {
-	            x: points[k].x - points[j].x,
-	            y: points[k].y - points[j].y,
-	        };
-	        const dot = v1.x * v2.x + v1.y * v2.y;
-	        const mag1 = Math.sqrt(v1.x * v1.x + v1.y * v1.y);
-	        const mag2 = Math.sqrt(v2.x * v2.x + v2.y * v2.y);
-	        const angle = Math.acos(dot / (mag1 * mag2));
-	        totalAngle += angle;
-	    }
-	    return (totalAngle / points.length) * (180 / Math.PI);
-	}
-	
-	return polygonUtils;
+var Tool;
+(function (Tool) {
+    Tool["ROOF_POLYGON"] = "roof_polygon";
+    Tool["OBSTRUCTION_POLYGON"] = "obstruction_polygon";
+    Tool["MOVE"] = "move";
+    Tool["MARK_ROOF_EDGE"] = "mark_roof_edge";
+})(Tool || (Tool = {}));
+
+const CANVAS_COLORS = {
+    ROOF: "#4A90E2",
+    OBSTRUCTION: "#E74C3C",
+    ROOF_FILL: "rgba(74, 144, 226, 0.2)",
+    OBSTRUCTION_FILL: "rgba(231, 76, 60, 0.2)",
+    POINT: "#2C3E50",
+    POINT_HOVER: "#E67E22",
+    GRID: "#E5E5E5",
+    START_POINT_HIGHLIGHT: "#27AE60",
+    HIGHLIGHTED_EDGE: "#FF6B35",
+    SOLAR_PANEL: "#2E86C1",
+    SOLAR_PANEL_FILL: "rgba(46, 134, 193, 0.3)",
+    SOLAR_PANEL_BORDER: "#1B4F72",
+};
+const POINT_RADIUS = 6;
+const POINT_HOVER_RADIUS = 8;
+const CLOSE_DISTANCE = 7;
+const PREVIEW_POINT_RADIUS = 5;
+class CanvasUtils {
+    static screenToCanvas(screenPoint, canvasRect, coordinateSystem) {
+        const scaleX = coordinateSystem.width / canvasRect.width;
+        const scaleY = coordinateSystem.height / canvasRect.height;
+        return new Point((screenPoint.x - canvasRect.left) * scaleX, (screenPoint.y - canvasRect.top) * scaleY);
+    }
+    static canvasToScreen(canvasPoint, canvasRect, coordinateSystem) {
+        const scaleX = canvasRect.width / coordinateSystem.width;
+        const scaleY = canvasRect.height / coordinateSystem.height;
+        return new Point(canvasPoint.x * scaleX, canvasPoint.y * scaleY);
+    }
+    static getDistance(point1, point2) {
+        const dx = point1.x - point2.x;
+        const dy = point1.y - point2.y;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+    static findNearestPoint(clickPoint, polygons, threshold = CLOSE_DISTANCE) {
+        for (const polygon of polygons) {
+            for (let i = 0; i < polygon.points.length; i++) {
+                const distance = this.getDistance(clickPoint, polygon.points[i]);
+                if (distance <= threshold) {
+                    return { polygon, pointIndex: i };
+                }
+            }
+        }
+        return null;
+    }
+    static isNearFirstPoint(polygon, point, threshold = CLOSE_DISTANCE) {
+        if (polygon.points.length < 3)
+            return false;
+        return this.getDistance(point, polygon.points[0]) <= threshold;
+    }
+    static findPolygonAtPoint(point, polygons) {
+        for (let i = polygons.length - 1; i >= 0; i--) {
+            const polygon = polygons[i];
+            if (!polygon.closed || polygon.points.length < 3) {
+                continue;
+            }
+            if (this.isPointInPolygon(point, polygon.points)) {
+                return polygon;
+            }
+        }
+        return null;
+    }
+    static isPointInPolygon(point, polygonPoints) {
+        const x = point.x;
+        const y = point.y;
+        let inside = false;
+        for (let i = 0, j = polygonPoints.length - 1; i < polygonPoints.length; j = i++) {
+            const xi = polygonPoints[i].x;
+            const yi = polygonPoints[i].y;
+            const xj = polygonPoints[j].x;
+            const yj = polygonPoints[j].y;
+            if (((yi > y) !== (yj > y)) &&
+                (x < (xj - xi) * (y - yi) / (yj - yi) + xi)) {
+                inside = !inside;
+            }
+        }
+        return inside;
+    }
+    static drawGrid(ctx, canvasSize, coordinateSystem, gridSize = 50) {
+        ctx.save();
+        ctx.strokeStyle = CANVAS_COLORS.GRID;
+        ctx.lineWidth = 1;
+        const scaleX = canvasSize.width / coordinateSystem.width;
+        const scaleY = canvasSize.height / coordinateSystem.height;
+        for (let x = 0; x <= coordinateSystem.width; x += gridSize) {
+            const screenX = x * scaleX;
+            ctx.beginPath();
+            ctx.moveTo(screenX, 0);
+            ctx.lineTo(screenX, canvasSize.height);
+            ctx.stroke();
+        }
+        for (let y = 0; y <= coordinateSystem.height; y += gridSize) {
+            const screenY = y * scaleY;
+            ctx.beginPath();
+            ctx.moveTo(0, screenY);
+            ctx.lineTo(canvasSize.width, screenY);
+            ctx.stroke();
+        }
+        ctx.restore();
+    }
+    static drawPolygon(ctx, polygon, canvasSize, coordinateSystem, isActive = false) {
+        if (polygon.points.length === 0)
+            return;
+        const scaleX = canvasSize.width / coordinateSystem.width;
+        const scaleY = canvasSize.height / coordinateSystem.height;
+        const color = polygon.type === PolygonType.ROOF
+            ? CANVAS_COLORS.ROOF
+            : CANVAS_COLORS.OBSTRUCTION;
+        const fillColor = polygon.type === PolygonType.ROOF
+            ? CANVAS_COLORS.ROOF_FILL
+            : CANVAS_COLORS.OBSTRUCTION_FILL;
+        ctx.save();
+        if (polygon.closed && polygon.points.length >= 3) {
+            ctx.fillStyle = fillColor;
+            ctx.beginPath();
+            ctx.moveTo(polygon.points[0].x * scaleX, polygon.points[0].y * scaleY);
+            for (let i = 1; i < polygon.points.length; i++) {
+                ctx.lineTo(polygon.points[i].x * scaleX, polygon.points[i].y * scaleY);
+            }
+            ctx.closePath();
+            ctx.fill();
+        }
+        ctx.strokeStyle = color;
+        ctx.lineWidth = isActive ? 3 : 2;
+        ctx.beginPath();
+        if (polygon.points.length > 0) {
+            ctx.moveTo(polygon.points[0].x * scaleX, polygon.points[0].y * scaleY);
+            for (let i = 1; i < polygon.points.length; i++) {
+                ctx.lineTo(polygon.points[i].x * scaleX, polygon.points[i].y * scaleY);
+            }
+            if (polygon.closed) {
+                ctx.closePath();
+            }
+        }
+        ctx.stroke();
+        ctx.restore();
+    }
+    static drawPoints(ctx, polygon, canvasSize, coordinateSystem, hoveredPointIndex = -1, showPoints = true) {
+        if (!showPoints || polygon.points.length === 0)
+            return;
+        const scaleX = canvasSize.width / coordinateSystem.width;
+        const scaleY = canvasSize.height / coordinateSystem.height;
+        ctx.save();
+        polygon.points.forEach((point, index) => {
+            const screenX = point.x * scaleX;
+            const screenY = point.y * scaleY;
+            const isHovered = index === hoveredPointIndex;
+            const radius = isHovered ? POINT_HOVER_RADIUS : POINT_RADIUS;
+            ctx.fillStyle = isHovered
+                ? CANVAS_COLORS.POINT_HOVER
+                : CANVAS_COLORS.POINT;
+            ctx.beginPath();
+            ctx.arc(screenX, screenY, radius, 0, 2 * Math.PI);
+            ctx.fill();
+            ctx.strokeStyle = "#FFFFFF";
+            ctx.lineWidth = 2;
+            ctx.stroke();
+        });
+        ctx.restore();
+    }
+    static clearCanvas(ctx, width, height) {
+        ctx.clearRect(0, 0, width, height);
+    }
+    static drawPreviewPoint(ctx, point, canvasSize, coordinateSystem, polygonType) {
+        const scaleX = canvasSize.width / coordinateSystem.width;
+        const scaleY = canvasSize.height / coordinateSystem.height;
+        const screenX = point.x * scaleX;
+        const screenY = point.y * scaleY;
+        ctx.save();
+        const color = polygonType === PolygonType.ROOF
+            ? CANVAS_COLORS.ROOF
+            : CANVAS_COLORS.OBSTRUCTION;
+        ctx.fillStyle = color;
+        ctx.globalAlpha = 0.6;
+        ctx.beginPath();
+        ctx.arc(screenX, screenY, PREVIEW_POINT_RADIUS, 0, 2 * Math.PI);
+        ctx.fill();
+        ctx.globalAlpha = 1;
+        ctx.strokeStyle = "#FFFFFF";
+        ctx.lineWidth = 1;
+        ctx.stroke();
+        ctx.restore();
+    }
+    static drawPreviewLine(ctx, fromPoint, toPoint, canvasSize, coordinateSystem, polygonType) {
+        const scaleX = canvasSize.width / coordinateSystem.width;
+        const scaleY = canvasSize.height / coordinateSystem.height;
+        const fromScreenX = fromPoint.x * scaleX;
+        const fromScreenY = fromPoint.y * scaleY;
+        const toScreenX = toPoint.x * scaleX;
+        const toScreenY = toPoint.y * scaleY;
+        ctx.save();
+        const color = polygonType === PolygonType.ROOF
+            ? CANVAS_COLORS.ROOF
+            : CANVAS_COLORS.OBSTRUCTION;
+        ctx.strokeStyle = color;
+        ctx.globalAlpha = 0.4;
+        ctx.lineWidth = 2;
+        ctx.setLineDash([5, 5]);
+        ctx.beginPath();
+        ctx.moveTo(fromScreenX, fromScreenY);
+        ctx.lineTo(toScreenX, toScreenY);
+        ctx.stroke();
+        ctx.restore();
+    }
+    static drawHighlightedStartPoint(ctx, point, canvasSize, coordinateSystem) {
+        const scaleX = canvasSize.width / coordinateSystem.width;
+        const scaleY = canvasSize.height / coordinateSystem.height;
+        const screenX = point.x * scaleX;
+        const screenY = point.y * scaleY;
+        ctx.save();
+        ctx.strokeStyle = CANVAS_COLORS.START_POINT_HIGHLIGHT;
+        ctx.lineWidth = 3;
+        ctx.globalAlpha = 0.8;
+        ctx.beginPath();
+        ctx.arc(screenX, screenY, POINT_HOVER_RADIUS + 3, 0, 2 * Math.PI);
+        ctx.stroke();
+        ctx.fillStyle = CANVAS_COLORS.START_POINT_HIGHLIGHT;
+        ctx.globalAlpha = 1;
+        ctx.beginPath();
+        ctx.arc(screenX, screenY, POINT_RADIUS, 0, 2 * Math.PI);
+        ctx.fill();
+        ctx.strokeStyle = "#FFFFFF";
+        ctx.lineWidth = 2;
+        ctx.stroke();
+        ctx.restore();
+    }
+    static drawHighlightedEdge(ctx, pointA, pointB, canvasSize, coordinateSystem) {
+        const scaleX = canvasSize.width / coordinateSystem.width;
+        const scaleY = canvasSize.height / coordinateSystem.height;
+        const screenAX = pointA.x * scaleX;
+        const screenAY = pointA.y * scaleY;
+        const screenBX = pointB.x * scaleX;
+        const screenBY = pointB.y * scaleY;
+        ctx.save();
+        ctx.strokeStyle = CANVAS_COLORS.HIGHLIGHTED_EDGE;
+        ctx.lineWidth = 4;
+        ctx.globalAlpha = 0.9;
+        ctx.beginPath();
+        ctx.moveTo(screenAX, screenAY);
+        ctx.lineTo(screenBX, screenBY);
+        ctx.stroke();
+        ctx.restore();
+    }
+    static drawSolarPanel(ctx, positionedPanel, canvasSize, coordinateSystem, azimuth = 0, pitch = 0) {
+        const scaleX = canvasSize.width / coordinateSystem.width;
+        const scaleY = canvasSize.height / coordinateSystem.height;
+        const centerX = positionedPanel.pixelPosition.x * scaleX;
+        const centerY = positionedPanel.pixelPosition.y * scaleY;
+        const panelWidth = positionedPanel.horizontal
+            ? positionedPanel.panel.heightMeters
+            : positionedPanel.panel.widthMeters;
+        const panelHeight = positionedPanel.horizontal
+            ? positionedPanel.panel.widthMeters
+            : positionedPanel.panel.heightMeters;
+        let scaledWidth = panelWidth * scaleX;
+        let scaledHeight = panelHeight * scaleY;
+        const azimuthRad = (azimuth * Math.PI) / 180;
+        ctx.save();
+        ctx.translate(centerX, centerY);
+        ctx.rotate(azimuthRad);
+        ctx.fillStyle = CANVAS_COLORS.SOLAR_PANEL_FILL;
+        ctx.fillRect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight);
+        ctx.strokeStyle = CANVAS_COLORS.SOLAR_PANEL_BORDER;
+        ctx.lineWidth = 1;
+        ctx.strokeRect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight);
+        ctx.strokeStyle = CANVAS_COLORS.SOLAR_PANEL;
+        ctx.lineWidth = 0.5;
+        ctx.globalAlpha = 1;
+        const cellSize = Math.min(scaledWidth / 6, scaledHeight / 10);
+        for (let x = -scaledWidth / 2 + cellSize; x < scaledWidth / 2; x += cellSize) {
+            ctx.beginPath();
+            ctx.moveTo(x, -scaledHeight / 2);
+            ctx.lineTo(x, scaledHeight / 2);
+            ctx.stroke();
+        }
+        for (let y = -scaledHeight / 2 + cellSize; y < scaledHeight / 2; y += cellSize) {
+            ctx.beginPath();
+            ctx.moveTo(-scaledWidth / 2, y);
+            ctx.lineTo(scaledWidth / 2, y);
+            ctx.stroke();
+        }
+        ctx.restore();
+    }
+    static drawPositionedSolarPanels(ctx, positionedPanels, canvasSize, coordinateSystem, polygon) {
+        if (!positionedPanels || positionedPanels.length === 0)
+            return;
+        const azimuth = polygon.azimuth || 0;
+        const pitch = polygon.pitch || 0;
+        positionedPanels.forEach((panel) => {
+            this.drawSolarPanel(ctx, panel, canvasSize, coordinateSystem, azimuth, pitch);
+        });
+    }
+    static drawState(ctx, state, solarPanelType, options = {}) {
+        const { showGrid = true, showPoints = true, showPreview = true, showSolarPanels = true, hoveredPointIndex = -1, hoveredPolygonId = null, } = options;
+        this.clearCanvas(ctx, state.canvasSize.width, state.canvasSize.height);
+        if (showGrid) {
+            this.drawGrid(ctx, state.canvasSize, state.coordinateSystem);
+        }
+        state.polygons.forEach((polygon) => {
+            const isActive = polygon.id === (state.currentPolygon?.id || hoveredPolygonId);
+            this.drawPolygon(ctx, polygon, state.canvasSize, state.coordinateSystem, isActive);
+            if (showPoints) {
+                const pointHoverIndex = polygon.id === hoveredPolygonId
+                    ? hoveredPointIndex
+                    : -1;
+                this.drawPoints(ctx, polygon, state.canvasSize, state.coordinateSystem, pointHoverIndex, showPoints);
+            }
+        });
+        if (state.currentPolygon &&
+            !state.polygons.some((p) => p.id === state.currentPolygon?.id)) {
+            this.drawPolygon(ctx, state.currentPolygon, state.canvasSize, state.coordinateSystem, true);
+            if (showPoints) {
+                this.drawPoints(ctx, state.currentPolygon, state.canvasSize, state.coordinateSystem, hoveredPointIndex, showPoints);
+            }
+            if (state.isHoveringStartPoint &&
+                state.currentPolygon.points.length > 2) {
+                this.drawHighlightedStartPoint(ctx, state.currentPolygon.points[0], state.canvasSize, state.coordinateSystem);
+            }
+        }
+        if (state.highlightedEdge) {
+            this.drawHighlightedEdge(ctx, state.highlightedEdge.pointA, state.highlightedEdge.pointB, state.canvasSize, state.coordinateSystem);
+        }
+        if (showSolarPanels && state.positionedSolarPanels) {
+            state.polygons.forEach((polygon) => {
+                const panelsForPolygon = state.positionedSolarPanels[polygon.id];
+                if (panelsForPolygon && panelsForPolygon.length > 0) {
+                    this.drawPositionedSolarPanels(ctx, panelsForPolygon, state.canvasSize, state.coordinateSystem, polygon);
+                }
+            });
+        }
+        if (state.mousePosition && state.currentPolygon &&
+            !state.currentPolygon.closed && showPreview) {
+            const polygonType = state.selectedTool === Tool.ROOF_POLYGON
+                ? PolygonType.ROOF
+                : PolygonType.OBSTRUCTION;
+            this.drawPreviewPoint(ctx, state.mousePosition, state.canvasSize, state.coordinateSystem, polygonType);
+            if (state.currentPolygon.points.length > 0) {
+                const lastPoint = state.currentPolygon
+                    .points[state.currentPolygon.points.length - 1];
+                this.drawPreviewLine(ctx, lastPoint, state.mousePosition, state.canvasSize, state.coordinateSystem, polygonType);
+            }
+        }
+    }
 }
 
-var hasRequiredCanvasUpdate;
-
-function requireCanvasUpdate () {
-	if (hasRequiredCanvasUpdate) return canvasUpdate;
-	hasRequiredCanvasUpdate = 1;
-	(function (exports) {
-		Object.defineProperty(exports, "__esModule", { value: true });
-		exports.useCanvasManager = exports.createCanvasManager = exports.CanvasManager = void 0;
-		const types_1 = requireTypes();
-		const drawingUtils_1 = requireDrawingUtils();
-		const polygonUtils_1 = requirePolygonUtils();
-		const harmonia_types_1 = requireDist$1();
-		class CanvasManager {
-		    constructor(config) {
-		        this.config = config;
-		        this.state = {
-		            polygons: [],
-		            currentPolygon: null,
-		            selectedTool: types_1.Tool.ROOF_POLYGON,
-		            draggedPointIndex: null,
-		            draggedPolygonId: null,
-		            canvasSize: { width: 800, height: 600 },
-		            coordinateSystem: config.coordinateSystem,
-		            mousePosition: null,
-		            isHoveringStartPoint: false,
-		            highlightedEdge: null,
-		            positionedSolarPanels: {},
-		        };
-		        this.interaction = {
-		            isDrawing: false,
-		            isDragging: false,
-		            lastTouchTime: 0,
-		        };
-		        this.history = [{
-		                polygons: [],
-		                currentPolygon: null,
-		                changedPolygon: null,
-		                positionedSolarPanels: {},
-		            }];
-		        this.historyIndex = 0;
-		        this.meterToPixelRatio = null;
-		    }
-		    notifyStateChange() {
-		        var _a, _b;
-		        (_b = (_a = this.config).onStateChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.state);
-		    }
-		    saveToHistory(polygons, currentPolygon = null, changedPolygon = null, positionedSolarPanels = {}) {
-		        const newHistory = this.history.slice(0, this.historyIndex + 1);
-		        newHistory.push({
-		            polygons: [...polygons],
-		            currentPolygon: currentPolygon ? Object.assign({}, currentPolygon) : null,
-		            changedPolygon: changedPolygon ? Object.assign({}, changedPolygon) : null,
-		            positionedSolarPanels: positionedSolarPanels,
-		        });
-		        this.history = newHistory;
-		        this.historyIndex = newHistory.length - 1;
-		    }
-		    generateId() {
-		        return `polygon_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-		    }
-		    setMeterToPixelRatio(meterToPixelRatio) {
-		        this.meterToPixelRatio = meterToPixelRatio;
-		    }
-		    getCurrentPolygon() {
-		        return this.state.currentPolygon;
-		    }
-		    updateOnPolygonChangeCallback(callback) {
-		        this.config.onPolygonChange = callback;
-		    }
-		    getObstacles() {
-		        return this.state.polygons.filter((p) => p.type === harmonia_types_1.PolygonType.OBSTRUCTION);
-		    }
-		    getHistory() {
-		        return this.history;
-		    }
-		    getDebugString() {
-		        return "0.0.1";
-		    }
-		    undo() {
-		        var _a, _b;
-		        if (this.historyIndex > 0) {
-		            const newIndex = this.historyIndex - 1;
-		            this.historyIndex = newIndex;
-		            const previousState = this.history[newIndex];
-		            this.state = Object.assign(Object.assign({}, this.state), { polygons: [...previousState.polygons], currentPolygon: previousState.currentPolygon
-		                    ? Object.assign({}, previousState.currentPolygon) : null, positionedSolarPanels: Object.assign({}, previousState.positionedSolarPanels) });
-		            this.interaction = Object.assign(Object.assign({}, this.interaction), { isDrawing: previousState.currentPolygon !== null });
-		            if (!((_a = this.state.currentPolygon) === null || _a === void 0 ? void 0 : _a.closed)) {
-		                if (((_b = this.state.currentPolygon) === null || _b === void 0 ? void 0 : _b.type) === harmonia_types_1.PolygonType.ROOF) {
-		                    this.setSelectedTool(types_1.Tool.ROOF_POLYGON);
-		                }
-		                else {
-		                    this.state.selectedTool = types_1.Tool.OBSTRUCTION_POLYGON;
-		                }
-		            }
-		            this.notifyStateChange();
-		            return true;
-		        }
-		        return false;
-		    }
-		    setPositionedSolarPanel(polygonId, positionedSolarPanels) {
-		        const newPositionedSolarPanels = Object.assign(Object.assign({}, this.state.positionedSolarPanels), { [polygonId]: positionedSolarPanels });
-		        this.saveToHistory(this.state.polygons, this.state.currentPolygon, this.state.currentPolygon, newPositionedSolarPanels);
-		        this.state.positionedSolarPanels = newPositionedSolarPanels;
-		        this.notifyStateChange();
-		    }
-		    getPositionedSolarPanels(polygonId) {
-		        return this.state.positionedSolarPanels[polygonId] || null;
-		    }
-		    getAllPositionedSolarPanels() {
-		        return this.state.positionedSolarPanels;
-		    }
-		    canUndo() {
-		        return this.historyIndex > 0;
-		    }
-		    getState() {
-		        return Object.assign({}, this.state);
-		    }
-		    getInteraction() {
-		        return Object.assign({}, this.interaction);
-		    }
-		    updateCanvasSize(size) {
-		        this.state = Object.assign(Object.assign({}, this.state), { canvasSize: size });
-		        this.notifyStateChange();
-		    }
-		    getEventPoint(event, canvasRect) {
-		        let clientX, clientY;
-		        if ("touches" in event && event.touches.length > 0) {
-		            clientX = event.touches[0].clientX;
-		            clientY = event.touches[0].clientY;
-		        }
-		        else if ("changedTouches" in event && event.changedTouches.length > 0) {
-		            clientX = event.changedTouches[0].clientX;
-		            clientY = event.changedTouches[0].clientY;
-		        }
-		        else {
-		            clientX = event.clientX;
-		            clientY = event.clientY;
-		        }
-		        return drawingUtils_1.CanvasUtils.screenToCanvas(new harmonia_types_1.Point(clientX, clientY), canvasRect, this.config.coordinateSystem);
-		    }
-		    getPolygon(id) {
-		        return this.state.polygons.find((p) => p.id === id) || null;
-		    }
-		    calculatePolygonArea(polygon) {
-		        const pixelsRatio = this.meterToPixelRatio || 1;
-		        const area = (0, polygonUtils_1.calculatePolygonArea)(polygon.points) * pixelsRatio *
-		            pixelsRatio;
-		        return area;
-		    }
-		    findClosestEdge(point, polygon, threshold = 10) {
-		        if (!polygon || !polygon.closed || polygon.points.length < 3) {
-		            return null;
-		        }
-		        let closestEdge = null;
-		        let minDistance = Infinity;
-		        for (let i = 0; i < polygon.points.length; i++) {
-		            const pointA = polygon.points[i];
-		            const pointB = polygon.points[(i + 1) % polygon.points.length];
-		            const distanceA = Math.sqrt(Math.pow(point.x - pointA.x, 2) +
-		                Math.pow(point.y - pointA.y, 2));
-		            const distanceB = Math.sqrt(Math.pow(point.x - pointB.x, 2) +
-		                Math.pow(point.y - pointB.y, 2));
-		            const edgeLength = Math.sqrt(Math.pow(pointA.x - pointB.x, 2) +
-		                Math.pow(pointA.y - pointB.y, 2));
-		            const distance = distanceA + distanceB - edgeLength;
-		            if (distance < minDistance && distance < threshold) {
-		                minDistance = distance;
-		                closestEdge = { pointA, pointB, distance };
-		            }
-		        }
-		        return closestEdge;
-		    }
-		    calculateEdgeAzimuth(pointA, pointB) {
-		        const dx = pointB.x - pointA.x;
-		        const dy = pointB.y - pointA.y;
-		        let angle = Math.atan2(dy, dx) * (180 / Math.PI);
-		        angle += 90;
-		        if (angle < 0) {
-		            angle += 360;
-		        }
-		        else if (angle >= 360) {
-		            angle -= 360;
-		        }
-		        return angle;
-		    }
-		    updatePolygon(polygon) {
-		        const newPolygons = this.state.polygons.map((p) => {
-		            if (p.id === polygon.id) {
-		                return polygon;
-		            }
-		            return p;
-		        });
-		        this.state = Object.assign(Object.assign({}, this.state), { polygons: newPolygons, currentPolygon: polygon });
-		    }
-		    convertMetersToPixels(meters) {
-		        return meters / (this.meterToPixelRatio || 1);
-		    }
-		    closePolygon(polygon) {
-		        var _a, _b;
-		        if (!polygon) {
-		            return;
-		        }
-		        const closedPolygon = Object.assign(Object.assign({}, polygon), { area: this.calculatePolygonArea(polygon), closed: true });
-		        const newPolygons = [...this.state.polygons, closedPolygon];
-		        this.state = Object.assign(Object.assign({}, this.state), { polygons: newPolygons, currentPolygon: closedPolygon });
-		        this.interaction = Object.assign(Object.assign({}, this.interaction), { isDrawing: false });
-		        this.saveToHistory(newPolygons, closedPolygon, closedPolygon, this.state.positionedSolarPanels);
-		        this.notifyStateChange();
-		        (_b = (_a = this.config).onPolygonChange) === null || _b === void 0 ? void 0 : _b.call(_a, closedPolygon);
-		    }
-		    handleCanvasClick(point) {
-		        var _a, _b, _c, _d;
-		        if (this.state.selectedTool === types_1.Tool.MOVE) {
-		            const nearestPoint = drawingUtils_1.CanvasUtils.findNearestPoint(point, this.state.polygons, drawingUtils_1.CLOSE_DISTANCE);
-		            if (nearestPoint) {
-		                this.state = Object.assign(Object.assign({}, this.state), { draggedPointIndex: nearestPoint.pointIndex, draggedPolygonId: nearestPoint.polygon.id, currentPolygon: nearestPoint.polygon });
-		                this.interaction = Object.assign(Object.assign({}, this.interaction), { isDragging: true });
-		                this.notifyStateChange();
-		                return;
-		            }
-		            const clickedPolygon = drawingUtils_1.CanvasUtils.findPolygonAtPoint(point, this.state.polygons);
-		            if (clickedPolygon) {
-		                this.state = Object.assign(Object.assign({}, this.state), { currentPolygon: clickedPolygon });
-		                this.notifyStateChange();
-		                return;
-		            }
-		            this.state = Object.assign(Object.assign({}, this.state), { currentPolygon: null });
-		            this.notifyStateChange();
-		            return;
-		        }
-		        if (this.state.selectedTool === types_1.Tool.MARK_ROOF_EDGE) {
-		            if (this.state.highlightedEdge) {
-		                const polygonId = this.state.highlightedEdge.polygonId;
-		                const edge = this.state.highlightedEdge;
-		                const azimuth = this.calculateEdgeAzimuth(edge.pointA, edge.pointB);
-		                const polygon = this.state.polygons.find((p) => p.id === polygonId);
-		                if (!polygon) {
-		                    return;
-		                }
-		                const newPolygon = Object.assign(Object.assign({}, polygon), { azimuth });
-		                const updatedPolygons = this.state.polygons.map((polygon) => {
-		                    if (polygon.id === polygonId) {
-		                        return newPolygon;
-		                    }
-		                    return polygon;
-		                });
-		                this.state = Object.assign(Object.assign({}, this.state), { polygons: updatedPolygons, currentPolygon: newPolygon || null });
-		                this.saveToHistory(updatedPolygons, newPolygon, newPolygon, this.state.positionedSolarPanels);
-		                this.notifyStateChange();
-		                (_b = (_a = this.config).onPolygonChange) === null || _b === void 0 ? void 0 : _b.call(_a, newPolygon);
-		                (_d = (_c = this.config).onLowerRoofEdgeMarked) === null || _d === void 0 ? void 0 : _d.call(_c, newPolygon);
-		            }
-		            return;
-		        }
-		        const polygonType = this.state.selectedTool === types_1.Tool.ROOF_POLYGON
-		            ? harmonia_types_1.PolygonType.ROOF
-		            : harmonia_types_1.PolygonType.OBSTRUCTION;
-		        if (!this.state.currentPolygon || this.state.currentPolygon.closed) {
-		            const newPolygon = {
-		                id: this.generateId(),
-		                points: [point],
-		                type: polygonType,
-		                closed: false,
-		            };
-		            this.state = Object.assign(Object.assign({}, this.state), { currentPolygon: newPolygon });
-		            this.interaction = Object.assign(Object.assign({}, this.interaction), { isDrawing: true });
-		            this.saveToHistory(this.state.polygons, newPolygon, newPolygon, this.state.positionedSolarPanels);
-		            this.notifyStateChange();
-		        }
-		        else {
-		            const shouldClose = drawingUtils_1.CanvasUtils.isNearFirstPoint(this.state.currentPolygon, point, drawingUtils_1.CLOSE_DISTANCE);
-		            if (shouldClose && this.state.currentPolygon.points.length >= 3) {
-		                this.closePolygon(this.state.currentPolygon);
-		            }
-		            else {
-		                const updatedPolygon = Object.assign(Object.assign({}, this.state.currentPolygon), { points: [...this.state.currentPolygon.points, point] });
-		                this.state = Object.assign(Object.assign({}, this.state), { currentPolygon: updatedPolygon });
-		                this.saveToHistory(this.state.polygons, updatedPolygon, updatedPolygon, this.state.positionedSolarPanels);
-		                this.notifyStateChange();
-		            }
-		        }
-		    }
-		    handleMouseDown(event, canvasRect) {
-		        const point = this.getEventPoint(event, canvasRect);
-		        this.handleCanvasClick(point);
-		    }
-		    handleTouchStart(event, canvasRect) {
-		        const now = Date.now();
-		        if (now - this.interaction.lastTouchTime < 300) {
-		            return;
-		        }
-		        this.interaction = Object.assign(Object.assign({}, this.interaction), { lastTouchTime: now });
-		        const point = this.getEventPoint(event, canvasRect);
-		        if (this.state.selectedTool === types_1.Tool.MARK_ROOF_EDGE) {
-		            let highlightedEdge = null;
-		            let minDistance = Infinity;
-		            for (const polygon of this.state.polygons) {
-		                if (polygon.closed) {
-		                    const closestEdge = this.findClosestEdge(point, polygon);
-		                    if (closestEdge && closestEdge.distance < minDistance) {
-		                        minDistance = closestEdge.distance;
-		                        highlightedEdge = {
-		                            pointA: closestEdge.pointA,
-		                            pointB: closestEdge.pointB,
-		                            polygonId: polygon.id,
-		                        };
-		                    }
-		                }
-		            }
-		            this.state = Object.assign(Object.assign({}, this.state), { highlightedEdge });
-		        }
-		        this.handleCanvasClick(point);
-		    }
-		    handleMouseMove(event, canvasRect) {
-		        const point = this.getEventPoint(event, canvasRect);
-		        if (this.interaction.isDragging && this.state.draggedPolygonId &&
-		            this.state.draggedPointIndex !== null) {
-		            const draggedPolygon = this.state.polygons.find((polygon) => polygon.id === this.state.draggedPolygonId);
-		            if (!draggedPolygon || this.state.draggedPointIndex === null) {
-		                return;
-		            }
-		            const newPoints = [...draggedPolygon.points];
-		            newPoints[this.state.draggedPointIndex] = point;
-		            const newPolygon = Object.assign(Object.assign({}, draggedPolygon), { points: newPoints });
-		            newPolygon.area = this.calculatePolygonArea(newPolygon);
-		            const newPolygons = this.state.polygons.map((polygon) => {
-		                if (polygon.id === this.state.draggedPolygonId) {
-		                    return newPolygon;
-		                }
-		                return polygon;
-		            });
-		            this.state = Object.assign(Object.assign({}, this.state), { polygons: newPolygons, currentPolygon: newPolygon });
-		            this.saveToHistory(newPolygons, newPolygon, newPolygon, this.state.positionedSolarPanels);
-		            this.notifyStateChange();
-		            return;
-		        }
-		        if (this.state.selectedTool === types_1.Tool.MARK_ROOF_EDGE) {
-		            let highlightedEdge = null;
-		            let minDistance = Infinity;
-		            for (const polygon of this.state.polygons) {
-		                if (polygon.closed) {
-		                    const closestEdge = this.findClosestEdge(point, polygon);
-		                    if (closestEdge && closestEdge.distance < minDistance) {
-		                        minDistance = closestEdge.distance;
-		                        highlightedEdge = {
-		                            pointA: closestEdge.pointA,
-		                            pointB: closestEdge.pointB,
-		                            polygonId: polygon.id,
-		                        };
-		                    }
-		                }
-		            }
-		            this.state = Object.assign(Object.assign({}, this.state), { mousePosition: point, highlightedEdge, isHoveringStartPoint: false });
-		            this.notifyStateChange();
-		            return;
-		        }
-		        if (this.state.selectedTool !== types_1.Tool.MOVE) {
-		            const isHoveringStartPoint = this.state.currentPolygon &&
-		                this.state.currentPolygon.points.length >= 3 &&
-		                drawingUtils_1.CanvasUtils.isNearFirstPoint(this.state.currentPolygon, point, drawingUtils_1.CLOSE_DISTANCE);
-		            this.state = Object.assign(Object.assign({}, this.state), { mousePosition: point, isHoveringStartPoint: !!isHoveringStartPoint, highlightedEdge: null });
-		            this.notifyStateChange();
-		        }
-		        else {
-		            this.state = Object.assign(Object.assign({}, this.state), { mousePosition: null, isHoveringStartPoint: false, highlightedEdge: null });
-		            this.notifyStateChange();
-		        }
-		    }
-		    handleTouchMove(event, canvasRect) {
-		        if (!this.interaction.isDragging || !this.state.draggedPolygonId ||
-		            this.state.draggedPointIndex === null) {
-		            return;
-		        }
-		        const point = this.getEventPoint(event, canvasRect);
-		        const draggedPolygon = this.state.polygons.find((polygon) => polygon.id === this.state.draggedPolygonId);
-		        if (!draggedPolygon || this.state.draggedPointIndex === null) {
-		            return;
-		        }
-		        const newPoints = [...draggedPolygon.points];
-		        newPoints[this.state.draggedPointIndex] = point;
-		        const newPolygon = Object.assign(Object.assign({}, draggedPolygon), { points: newPoints });
-		        newPolygon.area = this.calculatePolygonArea(newPolygon);
-		        const newPolygons = this.state.polygons.map((polygon) => {
-		            if (polygon.id === this.state.draggedPolygonId) {
-		                return newPolygon;
-		            }
-		            return polygon;
-		        });
-		        this.saveToHistory(newPolygons, newPolygon, newPolygon, this.state.positionedSolarPanels);
-		        this.state = Object.assign(Object.assign({}, this.state), { polygons: newPolygons, currentPolygon: newPolygon });
-		        this.notifyStateChange();
-		    }
-		    handleMouseUp(event) {
-		        if (this.interaction.isDragging) {
-		            this.saveToHistory(this.state.polygons, this.state.currentPolygon, this.state.polygons.find((polygon) => polygon.id === this.state.draggedPolygonId) || null, this.state.positionedSolarPanels);
-		        }
-		        this.state = Object.assign(Object.assign({}, this.state), { draggedPointIndex: null, draggedPolygonId: null });
-		        this.interaction = Object.assign(Object.assign({}, this.interaction), { isDragging: false });
-		        this.notifyStateChange();
-		    }
-		    handleTouchEnd(event) {
-		        if (this.interaction.isDragging) {
-		            this.saveToHistory(this.state.polygons, this.state.currentPolygon, this.state.polygons.find((polygon) => polygon.id === this.state.draggedPolygonId) || null, this.state.positionedSolarPanels);
-		        }
-		        this.state = Object.assign(Object.assign({}, this.state), { draggedPointIndex: null, draggedPolygonId: null });
-		        this.interaction = Object.assign(Object.assign({}, this.interaction), { isDragging: false });
-		        this.notifyStateChange();
-		    }
-		    handleMouseLeave() {
-		        this.state = Object.assign(Object.assign({}, this.state), { mousePosition: null, isHoveringStartPoint: false, highlightedEdge: null });
-		        this.notifyStateChange();
-		    }
-		    setSelectedTool(tool) {
-		        this.state = Object.assign(Object.assign({}, this.state), { selectedTool: tool, mousePosition: null, isHoveringStartPoint: false, highlightedEdge: null });
-		        this.interaction = Object.assign(Object.assign({}, this.interaction), { isDrawing: false });
-		        this.notifyStateChange();
-		    }
-		    setPolygons(polygons) {
-		        this.state = Object.assign(Object.assign({}, this.state), { polygons: [...polygons], currentPolygon: null, highlightedEdge: null });
-		        this.interaction = Object.assign(Object.assign({}, this.interaction), { isDrawing: false });
-		        this.saveToHistory(polygons, null, null, this.state.positionedSolarPanels);
-		        this.notifyStateChange();
-		    }
-		    getPolygons() {
-		        return [...this.state.polygons];
-		    }
-		    clearPolygons() {
-		        this.state = Object.assign(Object.assign({}, this.state), { polygons: [], currentPolygon: null, highlightedEdge: null });
-		        this.interaction = Object.assign(Object.assign({}, this.interaction), { isDrawing: false });
-		        this.saveToHistory([], null, null, this.state.positionedSolarPanels);
-		        this.notifyStateChange();
-		    }
-		    getSelectedPolygon() {
-		        if (!this.state.currentPolygon)
-		            return null;
-		        return this.state.polygons.find((p) => { var _a; return p.id === ((_a = this.state.currentPolygon) === null || _a === void 0 ? void 0 : _a.id); }) || null;
-		    }
-		    clearSelection() {
-		        this.state = Object.assign(Object.assign({}, this.state), { currentPolygon: null });
-		        this.notifyStateChange();
-		    }
-		    getHighlightedEdge() {
-		        return this.state.highlightedEdge;
-		    }
-		}
-		exports.CanvasManager = CanvasManager;
-		const createCanvasManager = (config) => {
-		    return new CanvasManager(config);
-		};
-		exports.createCanvasManager = createCanvasManager;
-		const useCanvasManager = (config) => {
-		    return (0, exports.createCanvasManager)(config);
-		};
-		exports.useCanvasManager = useCanvasManager;
-		
-	} (canvasUpdate));
-	return canvasUpdate;
+function calculatePolygonArea(points) {
+    let area = 0;
+    for (let i = 0; i < points.length; i++) {
+        const j = (i + 1) % points.length;
+        area += points[i].x * points[j].y;
+        area -= points[j].x * points[i].y;
+    }
+    return Math.abs(area / 2);
 }
 
-var rgbTiff = {};
-
-var hasRequiredRgbTiff;
-
-function requireRgbTiff () {
-	if (hasRequiredRgbTiff) return rgbTiff;
-	hasRequiredRgbTiff = 1;
-	Object.defineProperty(rgbTiff, "__esModule", { value: true });
-	rgbTiff.renderRGB = renderRGB;
-	rgbTiff.renderCombinedWithZoom = renderCombinedWithZoom;
-	function renderRGB(rgb, mask, canvas) {
-	    if (!canvas) {
-	        canvas = document.createElement("canvas");
-	    }
-	    canvas.width = mask ? mask.width : rgb.width;
-	    canvas.height = mask ? mask.height : rgb.height;
-	    const dw = rgb.width / canvas.width;
-	    const dh = rgb.height / canvas.height;
-	    const ctx = canvas.getContext("2d");
-	    const img = ctx.getImageData(0, 0, canvas.width, canvas.height);
-	    for (let y = 0; y < canvas.height; y++) {
-	        for (let x = 0; x < canvas.width; x++) {
-	            const rgbIdx = Math.floor(y * dh) * rgb.width + Math.floor(x * dw);
-	            const maskIdx = y * canvas.width + x;
-	            const imgIdx = y * canvas.width * 4 + x * 4;
-	            const factor = 0.8;
-	            img.data[imgIdx + 0] = Math.round(rgb.rasters[0][rgbIdx] * factor);
-	            img.data[imgIdx + 1] = Math.round(rgb.rasters[1][rgbIdx] * factor);
-	            img.data[imgIdx + 2] = Math.round(rgb.rasters[2][rgbIdx] * factor);
-	            img.data[imgIdx + 3] = mask
-	                ? mask.rasters[0][maskIdx] * 255
-	                : 255;
-	        }
-	    }
-	    ctx.putImageData(img, 0, 0);
-	    return canvas;
-	}
-	function renderCombinedWithZoom({ rgb, zoom = 1, canvas, }) {
-	    const rgbCanvas = renderRGB(rgb, undefined, canvas);
-	    const ctx = rgbCanvas.getContext("2d");
-	    const imgData = ctx.getImageData(0, 0, rgbCanvas.width, rgbCanvas.height);
-	    const width = rgbCanvas.width;
-	    const height = rgbCanvas.height;
-	    const zoomedWidth = Math.floor(width * zoom);
-	    const zoomedHeight = Math.floor(height * zoom);
-	    const startX = Math.floor((width - zoomedWidth) / 2);
-	    const startY = Math.floor((height - zoomedHeight) / 2);
-	    const zoomedImgData = new ImageData(zoomedWidth, zoomedHeight);
-	    for (let y = 0; y < height; y++) {
-	        for (let x = 0; x < width; x++) {
-	            const i = (y * width + x) * 4;
-	            if (x >= startX && x < startX + zoomedWidth &&
-	                y >= startY && y < startY + zoomedHeight) {
-	                const zoomedX = x - startX;
-	                const zoomedY = y - startY;
-	                const zoomedI = (zoomedY * zoomedWidth + zoomedX) * 4;
-	                zoomedImgData.data[zoomedI] = imgData.data[i];
-	                zoomedImgData.data[zoomedI + 1] = imgData.data[i + 1];
-	                zoomedImgData.data[zoomedI + 2] = imgData.data[i + 2];
-	                zoomedImgData.data[zoomedI + 3] = 255;
-	            }
-	        }
-	    }
-	    rgbCanvas.width = zoomedWidth;
-	    rgbCanvas.height = zoomedHeight;
-	    ctx.putImageData(zoomedImgData, 0, 0);
-	    return rgbCanvas;
-	}
-	
-	return rgbTiff;
+const VERSION = "0.0.4";
+const DEFAULT_MANAGER_CONFIG = {
+    closeDistance: 7,
+    pointHoverRadius: 8,
+    previewPointRadius: 5,
+    closestEdgeThreshold: 10,
+};
+class CanvasManager {
+    constructor(canvasConfig, managerConfig) {
+        this.canvasConfig = canvasConfig;
+        this.managerConfig = {
+            ...DEFAULT_MANAGER_CONFIG,
+            ...managerConfig,
+        };
+        this.state = {
+            polygons: [],
+            currentPolygon: null,
+            selectedTool: Tool.ROOF_POLYGON,
+            draggedPointIndex: null,
+            draggedPolygonId: null,
+            canvasSize: { width: 800, height: 600 },
+            coordinateSystem: canvasConfig.coordinateSystem,
+            mousePosition: null,
+            isHoveringStartPoint: false,
+            highlightedEdge: null,
+            positionedSolarPanels: {},
+        };
+        this.interaction = {
+            isDrawing: false,
+            isDragging: false,
+            lastTouchTime: 0,
+        };
+        this.history = [{
+                polygons: [],
+                currentPolygon: null,
+                changedPolygon: null,
+                positionedSolarPanels: {},
+            }];
+        this.historyIndex = 0;
+        this.meterToPixelRatio = null;
+    }
+    notifyStateChange() {
+        this.canvasConfig.onStateChange?.(this.state);
+    }
+    saveToHistory(polygons, currentPolygon = null, changedPolygon = null, positionedSolarPanels = {}) {
+        const newHistory = this.history.slice(0, this.historyIndex + 1);
+        newHistory.push({
+            polygons: [...polygons],
+            currentPolygon: currentPolygon ? { ...currentPolygon } : null,
+            changedPolygon: changedPolygon ? { ...changedPolygon } : null,
+            positionedSolarPanels: positionedSolarPanels,
+        });
+        this.history = newHistory;
+        this.historyIndex = newHistory.length - 1;
+    }
+    generateId() {
+        return `polygon_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    }
+    setMeterToPixelRatio(meterToPixelRatio) {
+        this.meterToPixelRatio = meterToPixelRatio;
+    }
+    getCurrentPolygon() {
+        return this.state.currentPolygon;
+    }
+    updateOnPolygonChangeCallback(callback) {
+        this.canvasConfig.onPolygonChange = callback;
+    }
+    getObstacles() {
+        return this.state.polygons.filter((p) => p.type === PolygonType.OBSTRUCTION);
+    }
+    getHistory() {
+        return this.history;
+    }
+    getDebugString() {
+        return VERSION;
+    }
+    undo() {
+        if (this.historyIndex > 0) {
+            const newIndex = this.historyIndex - 1;
+            this.historyIndex = newIndex;
+            const previousState = this.history[newIndex];
+            this.state = {
+                ...this.state,
+                polygons: [...previousState.polygons],
+                currentPolygon: previousState.currentPolygon
+                    ? { ...previousState.currentPolygon }
+                    : null,
+                positionedSolarPanels: {
+                    ...previousState.positionedSolarPanels,
+                },
+            };
+            this.interaction = {
+                ...this.interaction,
+                isDrawing: previousState.currentPolygon !== null,
+            };
+            if (!this.state.currentPolygon?.closed) {
+                if (this.state.currentPolygon?.type === PolygonType.ROOF) {
+                    this.setSelectedTool(Tool.ROOF_POLYGON);
+                }
+                else {
+                    this.state.selectedTool = Tool.OBSTRUCTION_POLYGON;
+                }
+            }
+            this.notifyStateChange();
+            return true;
+        }
+        return false;
+    }
+    setPositionedSolarPanel(polygonId, positionedSolarPanels) {
+        const newPositionedSolarPanels = {
+            ...this.state.positionedSolarPanels,
+            [polygonId]: positionedSolarPanels,
+        };
+        this.saveToHistory(this.state.polygons, this.state.currentPolygon, this.state.currentPolygon, newPositionedSolarPanels);
+        this.state.positionedSolarPanels = newPositionedSolarPanels;
+        this.notifyStateChange();
+    }
+    getPositionedSolarPanels(polygonId) {
+        return this.state.positionedSolarPanels[polygonId] || null;
+    }
+    getAllPositionedSolarPanels() {
+        return this.state.positionedSolarPanels;
+    }
+    canUndo() {
+        return this.historyIndex > 0;
+    }
+    getState() {
+        return { ...this.state };
+    }
+    getInteraction() {
+        return { ...this.interaction };
+    }
+    updateCanvasSize(size) {
+        this.state = {
+            ...this.state,
+            canvasSize: size,
+        };
+        this.notifyStateChange();
+    }
+    getEventPoint(event, canvasRect) {
+        let clientX, clientY;
+        if ("touches" in event && event.touches.length > 0) {
+            clientX = event.touches[0].clientX;
+            clientY = event.touches[0].clientY;
+        }
+        else if ("changedTouches" in event && event.changedTouches.length > 0) {
+            clientX = event.changedTouches[0].clientX;
+            clientY = event.changedTouches[0].clientY;
+        }
+        else {
+            clientX = event.clientX;
+            clientY = event.clientY;
+        }
+        return CanvasUtils.screenToCanvas(new Point(clientX, clientY), canvasRect, this.canvasConfig.coordinateSystem);
+    }
+    getPolygon(id) {
+        return this.state.polygons.find((p) => p.id === id) || null;
+    }
+    calculatePolygonArea(polygon) {
+        const pixelsRatio = this.meterToPixelRatio || 1;
+        const area = calculatePolygonArea(polygon.points) * pixelsRatio *
+            pixelsRatio;
+        return area;
+    }
+    findClosestEdge(point, polygon, threshold) {
+        if (!polygon || !polygon.closed || polygon.points.length < 3) {
+            return null;
+        }
+        let closestEdge = null;
+        let minDistance = Infinity;
+        for (let i = 0; i < polygon.points.length; i++) {
+            const pointA = polygon.points[i];
+            const pointB = polygon.points[(i + 1) % polygon.points.length];
+            const distanceA = Math.sqrt(Math.pow(point.x - pointA.x, 2) +
+                Math.pow(point.y - pointA.y, 2));
+            const distanceB = Math.sqrt(Math.pow(point.x - pointB.x, 2) +
+                Math.pow(point.y - pointB.y, 2));
+            const edgeLength = Math.sqrt(Math.pow(pointA.x - pointB.x, 2) +
+                Math.pow(pointA.y - pointB.y, 2));
+            const distance = distanceA + distanceB - edgeLength;
+            if (distance < minDistance && distance < threshold) {
+                minDistance = distance;
+                closestEdge = { pointA, pointB, distance };
+            }
+        }
+        return closestEdge;
+    }
+    calculateEdgeAzimuth(pointA, pointB) {
+        const dx = pointB.x - pointA.x;
+        const dy = pointB.y - pointA.y;
+        let angle = Math.atan2(dy, dx) * (180 / Math.PI);
+        angle += 90;
+        if (angle < 0) {
+            angle += 360;
+        }
+        else if (angle >= 360) {
+            angle -= 360;
+        }
+        return angle;
+    }
+    updatePolygon(polygon) {
+        const newPolygons = this.state.polygons.map((p) => {
+            if (p.id === polygon.id) {
+                return polygon;
+            }
+            return p;
+        });
+        this.state = {
+            ...this.state,
+            polygons: newPolygons,
+            currentPolygon: polygon,
+        };
+    }
+    convertMetersToPixels(meters) {
+        return meters / (this.meterToPixelRatio || 1);
+    }
+    closePolygon(polygon) {
+        if (!polygon) {
+            return;
+        }
+        const closedPolygon = {
+            ...polygon,
+            area: this.calculatePolygonArea(polygon),
+            closed: true,
+        };
+        const newPolygons = [...this.state.polygons, closedPolygon];
+        this.state = {
+            ...this.state,
+            polygons: newPolygons,
+            currentPolygon: closedPolygon,
+        };
+        this.interaction = { ...this.interaction, isDrawing: false };
+        this.saveToHistory(newPolygons, closedPolygon, closedPolygon, this.state.positionedSolarPanels);
+        this.notifyStateChange();
+        this.canvasConfig.onPolygonChange?.(closedPolygon);
+    }
+    handleCanvasClick(point) {
+        if (this.state.selectedTool === Tool.MOVE) {
+            const nearestPoint = CanvasUtils.findNearestPoint(point, this.state.polygons, this.managerConfig.closeDistance);
+            if (nearestPoint) {
+                this.state = {
+                    ...this.state,
+                    draggedPointIndex: nearestPoint.pointIndex,
+                    draggedPolygonId: nearestPoint.polygon.id,
+                    currentPolygon: nearestPoint.polygon,
+                };
+                this.interaction = { ...this.interaction, isDragging: true };
+                this.notifyStateChange();
+                return;
+            }
+            const clickedPolygon = CanvasUtils.findPolygonAtPoint(point, this.state.polygons);
+            if (clickedPolygon) {
+                this.state = {
+                    ...this.state,
+                    currentPolygon: clickedPolygon,
+                };
+                this.notifyStateChange();
+                return;
+            }
+            this.state = {
+                ...this.state,
+                currentPolygon: null,
+            };
+            this.notifyStateChange();
+            return;
+        }
+        if (this.state.selectedTool === Tool.MARK_ROOF_EDGE) {
+            if (this.state.highlightedEdge) {
+                const polygonId = this.state.highlightedEdge.polygonId;
+                const edge = this.state.highlightedEdge;
+                const azimuth = this.calculateEdgeAzimuth(edge.pointA, edge.pointB);
+                const polygon = this.state.polygons.find((p) => p.id === polygonId);
+                if (!polygon) {
+                    return;
+                }
+                const newPolygon = {
+                    ...polygon,
+                    azimuth,
+                };
+                const updatedPolygons = this.state.polygons.map((polygon) => {
+                    if (polygon.id === polygonId) {
+                        return newPolygon;
+                    }
+                    return polygon;
+                });
+                this.state = {
+                    ...this.state,
+                    polygons: updatedPolygons,
+                    currentPolygon: newPolygon || null,
+                };
+                this.saveToHistory(updatedPolygons, newPolygon, newPolygon, this.state.positionedSolarPanels);
+                this.notifyStateChange();
+                this.canvasConfig.onPolygonChange?.(newPolygon);
+                this.canvasConfig.onLowerRoofEdgeMarked?.(newPolygon);
+            }
+            return;
+        }
+        const polygonType = this.state.selectedTool === Tool.ROOF_POLYGON
+            ? PolygonType.ROOF
+            : PolygonType.OBSTRUCTION;
+        if (!this.state.currentPolygon || this.state.currentPolygon.closed) {
+            const newPolygon = {
+                id: this.generateId(),
+                points: [point],
+                type: polygonType,
+                closed: false,
+            };
+            this.state = { ...this.state, currentPolygon: newPolygon };
+            this.interaction = { ...this.interaction, isDrawing: true };
+            this.saveToHistory(this.state.polygons, newPolygon, newPolygon, this.state.positionedSolarPanels);
+            this.notifyStateChange();
+        }
+        else {
+            const shouldClose = CanvasUtils.isNearFirstPoint(this.state.currentPolygon, point, this.managerConfig.closeDistance);
+            if (shouldClose && this.state.currentPolygon.points.length >= 3) {
+                this.closePolygon(this.state.currentPolygon);
+            }
+            else {
+                const updatedPolygon = {
+                    ...this.state.currentPolygon,
+                    points: [...this.state.currentPolygon.points, point],
+                };
+                this.state = { ...this.state, currentPolygon: updatedPolygon };
+                this.saveToHistory(this.state.polygons, updatedPolygon, updatedPolygon, this.state.positionedSolarPanels);
+                this.notifyStateChange();
+            }
+        }
+    }
+    handleMouseDown(event, canvasRect) {
+        const point = this.getEventPoint(event, canvasRect);
+        this.handleCanvasClick(point);
+    }
+    handleTouchStart(event, canvasRect) {
+        const now = Date.now();
+        if (now - this.interaction.lastTouchTime < 300) {
+            return;
+        }
+        this.interaction = { ...this.interaction, lastTouchTime: now };
+        const point = this.getEventPoint(event, canvasRect);
+        if (this.state.selectedTool === Tool.MARK_ROOF_EDGE) {
+            let highlightedEdge = null;
+            let minDistance = Infinity;
+            for (const polygon of this.state.polygons) {
+                if (polygon.closed) {
+                    const closestEdge = this.findClosestEdge(point, polygon, this.managerConfig.closestEdgeThreshold);
+                    if (closestEdge && closestEdge.distance < minDistance) {
+                        minDistance = closestEdge.distance;
+                        highlightedEdge = {
+                            pointA: closestEdge.pointA,
+                            pointB: closestEdge.pointB,
+                            polygonId: polygon.id,
+                        };
+                    }
+                }
+            }
+            this.state = {
+                ...this.state,
+                highlightedEdge,
+            };
+        }
+        this.handleCanvasClick(point);
+    }
+    handleMouseMove(event, canvasRect) {
+        const point = this.getEventPoint(event, canvasRect);
+        if (this.interaction.isDragging && this.state.draggedPolygonId &&
+            this.state.draggedPointIndex !== null) {
+            const draggedPolygon = this.state.polygons.find((polygon) => polygon.id === this.state.draggedPolygonId);
+            if (!draggedPolygon || this.state.draggedPointIndex === null) {
+                return;
+            }
+            const newPoints = [...draggedPolygon.points];
+            newPoints[this.state.draggedPointIndex] = point;
+            const newPolygon = {
+                ...draggedPolygon,
+                points: newPoints,
+            };
+            newPolygon.area = this.calculatePolygonArea(newPolygon);
+            const newPolygons = this.state.polygons.map((polygon) => {
+                if (polygon.id === this.state.draggedPolygonId) {
+                    return newPolygon;
+                }
+                return polygon;
+            });
+            this.state = {
+                ...this.state,
+                polygons: newPolygons,
+                currentPolygon: newPolygon,
+            };
+            this.saveToHistory(newPolygons, newPolygon, newPolygon, this.state.positionedSolarPanels);
+            this.notifyStateChange();
+            return;
+        }
+        if (this.state.selectedTool === Tool.MARK_ROOF_EDGE) {
+            let highlightedEdge = null;
+            let minDistance = Infinity;
+            for (const polygon of this.state.polygons) {
+                if (polygon.closed) {
+                    const closestEdge = this.findClosestEdge(point, polygon, this.managerConfig.closestEdgeThreshold);
+                    if (closestEdge && closestEdge.distance < minDistance) {
+                        minDistance = closestEdge.distance;
+                        highlightedEdge = {
+                            pointA: closestEdge.pointA,
+                            pointB: closestEdge.pointB,
+                            polygonId: polygon.id,
+                        };
+                    }
+                }
+            }
+            this.state = {
+                ...this.state,
+                mousePosition: point,
+                highlightedEdge,
+                isHoveringStartPoint: false,
+            };
+            this.notifyStateChange();
+            return;
+        }
+        if (this.state.selectedTool !== Tool.MOVE) {
+            const isHoveringStartPoint = this.state.currentPolygon &&
+                this.state.currentPolygon.points.length >= 3 &&
+                CanvasUtils.isNearFirstPoint(this.state.currentPolygon, point, this.managerConfig.closeDistance);
+            this.state = {
+                ...this.state,
+                mousePosition: point,
+                isHoveringStartPoint: !!isHoveringStartPoint,
+                highlightedEdge: null,
+            };
+            this.notifyStateChange();
+        }
+        else {
+            this.state = {
+                ...this.state,
+                mousePosition: null,
+                isHoveringStartPoint: false,
+                highlightedEdge: null,
+            };
+            this.notifyStateChange();
+        }
+    }
+    handleTouchMove(event, canvasRect) {
+        if (!this.interaction.isDragging || !this.state.draggedPolygonId ||
+            this.state.draggedPointIndex === null) {
+            return;
+        }
+        const point = this.getEventPoint(event, canvasRect);
+        const draggedPolygon = this.state.polygons.find((polygon) => polygon.id === this.state.draggedPolygonId);
+        if (!draggedPolygon || this.state.draggedPointIndex === null) {
+            return;
+        }
+        const newPoints = [...draggedPolygon.points];
+        newPoints[this.state.draggedPointIndex] = point;
+        const newPolygon = {
+            ...draggedPolygon,
+            points: newPoints,
+        };
+        newPolygon.area = this.calculatePolygonArea(newPolygon);
+        const newPolygons = this.state.polygons.map((polygon) => {
+            if (polygon.id === this.state.draggedPolygonId) {
+                return newPolygon;
+            }
+            return polygon;
+        });
+        this.saveToHistory(newPolygons, newPolygon, newPolygon, this.state.positionedSolarPanels);
+        this.state = {
+            ...this.state,
+            polygons: newPolygons,
+            currentPolygon: newPolygon,
+        };
+        this.notifyStateChange();
+    }
+    handleMouseUp(event) {
+        if (this.interaction.isDragging) {
+            this.saveToHistory(this.state.polygons, this.state.currentPolygon, this.state.polygons.find((polygon) => polygon.id === this.state.draggedPolygonId) || null, this.state.positionedSolarPanels);
+        }
+        this.state = {
+            ...this.state,
+            draggedPointIndex: null,
+            draggedPolygonId: null,
+        };
+        this.interaction = { ...this.interaction, isDragging: false };
+        this.notifyStateChange();
+    }
+    handleTouchEnd(event) {
+        if (this.interaction.isDragging) {
+            this.saveToHistory(this.state.polygons, this.state.currentPolygon, this.state.polygons.find((polygon) => polygon.id === this.state.draggedPolygonId) || null, this.state.positionedSolarPanels);
+        }
+        this.state = {
+            ...this.state,
+            draggedPointIndex: null,
+            draggedPolygonId: null,
+        };
+        this.interaction = { ...this.interaction, isDragging: false };
+        this.notifyStateChange();
+    }
+    handleMouseLeave() {
+        this.state = {
+            ...this.state,
+            mousePosition: null,
+            isHoveringStartPoint: false,
+            highlightedEdge: null,
+        };
+        this.notifyStateChange();
+    }
+    setSelectedTool(tool) {
+        this.state = {
+            ...this.state,
+            selectedTool: tool,
+            mousePosition: null,
+            isHoveringStartPoint: false,
+            highlightedEdge: null,
+        };
+        this.interaction = { ...this.interaction, isDrawing: false };
+        this.notifyStateChange();
+    }
+    setPolygons(polygons) {
+        this.state = {
+            ...this.state,
+            polygons: [...polygons],
+            currentPolygon: null,
+            highlightedEdge: null,
+        };
+        this.interaction = { ...this.interaction, isDrawing: false };
+        this.saveToHistory(polygons, null, null, this.state.positionedSolarPanels);
+        this.notifyStateChange();
+    }
+    getPolygons() {
+        return [...this.state.polygons];
+    }
+    clearPolygons() {
+        this.state = {
+            ...this.state,
+            polygons: [],
+            currentPolygon: null,
+            highlightedEdge: null,
+        };
+        this.interaction = { ...this.interaction, isDrawing: false };
+        this.saveToHistory([], null, null, this.state.positionedSolarPanels);
+        this.notifyStateChange();
+    }
+    getSelectedPolygon() {
+        if (!this.state.currentPolygon)
+            return null;
+        return this.state.polygons.find((p) => p.id === this.state.currentPolygon?.id) || null;
+    }
+    clearSelection() {
+        this.state = {
+            ...this.state,
+            currentPolygon: null,
+        };
+        this.notifyStateChange();
+    }
+    getHighlightedEdge() {
+        return this.state.highlightedEdge;
+    }
 }
 
-var hasRequiredDist;
-
-function requireDist () {
-	if (hasRequiredDist) return dist;
-	hasRequiredDist = 1;
-	(function (exports) {
-		var __createBinding = (dist && dist.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-		    if (k2 === undefined) k2 = k;
-		    var desc = Object.getOwnPropertyDescriptor(m, k);
-		    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-		      desc = { enumerable: true, get: function() { return m[k]; } };
-		    }
-		    Object.defineProperty(o, k2, desc);
-		}) : (function(o, m, k, k2) {
-		    if (k2 === undefined) k2 = k;
-		    o[k2] = m[k];
-		}));
-		var __exportStar = (dist && dist.__exportStar) || function(m, exports) {
-		    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-		};
-		Object.defineProperty(exports, "__esModule", { value: true });
-		exports.calculatePolygonOrientation = exports.calculatePolygonArea = exports.calculatePolygonAngle = exports.PREVIEW_POINT_RADIUS = exports.POINT_RADIUS = exports.POINT_HOVER_RADIUS = exports.CLOSE_DISTANCE = exports.CanvasUtils = exports.CANVAS_COLORS = exports.useCanvasManager = exports.createCanvasManager = exports.CanvasManager = exports.Tool = void 0;
-		var types_1 = requireTypes();
-		Object.defineProperty(exports, "Tool", { enumerable: true, get: function () { return types_1.Tool; } });
-		var canvasUpdate_1 = requireCanvasUpdate();
-		Object.defineProperty(exports, "CanvasManager", { enumerable: true, get: function () { return canvasUpdate_1.CanvasManager; } });
-		Object.defineProperty(exports, "createCanvasManager", { enumerable: true, get: function () { return canvasUpdate_1.createCanvasManager; } });
-		Object.defineProperty(exports, "useCanvasManager", { enumerable: true, get: function () { return canvasUpdate_1.useCanvasManager; } });
-		var drawingUtils_1 = requireDrawingUtils();
-		Object.defineProperty(exports, "CANVAS_COLORS", { enumerable: true, get: function () { return drawingUtils_1.CANVAS_COLORS; } });
-		Object.defineProperty(exports, "CanvasUtils", { enumerable: true, get: function () { return drawingUtils_1.CanvasUtils; } });
-		Object.defineProperty(exports, "CLOSE_DISTANCE", { enumerable: true, get: function () { return drawingUtils_1.CLOSE_DISTANCE; } });
-		Object.defineProperty(exports, "POINT_HOVER_RADIUS", { enumerable: true, get: function () { return drawingUtils_1.POINT_HOVER_RADIUS; } });
-		Object.defineProperty(exports, "POINT_RADIUS", { enumerable: true, get: function () { return drawingUtils_1.POINT_RADIUS; } });
-		Object.defineProperty(exports, "PREVIEW_POINT_RADIUS", { enumerable: true, get: function () { return drawingUtils_1.PREVIEW_POINT_RADIUS; } });
-		var polygonUtils_1 = requirePolygonUtils();
-		Object.defineProperty(exports, "calculatePolygonAngle", { enumerable: true, get: function () { return polygonUtils_1.calculatePolygonAngle; } });
-		Object.defineProperty(exports, "calculatePolygonArea", { enumerable: true, get: function () { return polygonUtils_1.calculatePolygonArea; } });
-		Object.defineProperty(exports, "calculatePolygonOrientation", { enumerable: true, get: function () { return polygonUtils_1.calculatePolygonOrientation; } });
-		__exportStar(requireRgbTiff(), exports);
-		
-	} (dist));
-	return dist;
+function renderRGB(rgb, mask, canvas) {
+    if (!canvas) {
+        canvas = document.createElement("canvas");
+    }
+    canvas.width = rgb.width;
+    canvas.height = rgb.height;
+    const dw = rgb.width / canvas.width;
+    const dh = rgb.height / canvas.height;
+    const ctx = canvas.getContext("2d");
+    const img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    for (let y = 0; y < canvas.height; y++) {
+        for (let x = 0; x < canvas.width; x++) {
+            const rgbIdx = Math.floor(y * dh) * rgb.width + Math.floor(x * dw);
+            const imgIdx = y * canvas.width * 4 + x * 4;
+            const factor = 0.8;
+            img.data[imgIdx + 0] = Math.round(rgb.rasters[0][rgbIdx] * factor);
+            img.data[imgIdx + 1] = Math.round(rgb.rasters[1][rgbIdx] * factor);
+            img.data[imgIdx + 2] = Math.round(rgb.rasters[2][rgbIdx] * factor);
+            img.data[imgIdx + 3] = 255;
+        }
+    }
+    ctx.putImageData(img, 0, 0);
+    return canvas;
 }
 
-var distExports = requireDist();
-
 const outputCss = "/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-100: oklch(93.6% 0.032 17.717);\n    --color-red-300: oklch(80.8% 0.114 19.571);\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-red-700: oklch(50.5% 0.213 27.518);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\n    --container-2xl: 42rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-lg: 0.5rem;\n    --radius-4xl: 2rem;\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n    --color-primary: hsl(41 51% 90%);\n    --color-primary-foreground: hsl(0 0% 0%);\n    --color-secondary: hsl(28 100% 8%);\n    --color-secondary-foreground: hsl(0 0% 100%);\n    --color-tertiary: hsl(28 100% 29%);\n    --color-tertiary-foreground: hsl(0 0% 100%);\n    --color-muted: hsl(0 0% 100%);\n    --color-muted-foreground: hsl(0 0% 0%);\n    --color-error: hsl(0 100% 50%);\n    --color-error-foreground: hsl(0 0% 100%);\n    --color-surface: hsl(0 0% 88%);\n    --color-surface-hover: hsl(0 0% 82%);\n    --color-surface-active: hsl(0 0% 64%);\n    --color-text-muted: hsl(0 0% 45%);\n    --color-text-secondary: hsl(0 0% 55%);\n    --color-text-placeholder: hsl(0 0% 73%);\n    --color-border: hsl(0 0% 82%);\n    --color-border-light: hsl(0 0% 93%);\n    --color-success: hsl(142 76% 36%);\n    --color-info: hsl(221 83% 53%);\n    --color-hover: hsl(0 0% 88%);\n    --color-hover-dark: hsl(28 100% 8%);\n    --color-overlay: rgba(0, 0, 0, 0.24);\n    --color-tooltip: hsl(0 0% 13%);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .container {\n    width: 100%;\n    @media (width >= 40rem) {\n      max-width: 40rem;\n    }\n    @media (width >= 48rem) {\n      max-width: 48rem;\n    }\n    @media (width >= 64rem) {\n      max-width: 64rem;\n    }\n    @media (width >= 80rem) {\n      max-width: 80rem;\n    }\n    @media (width >= 96rem) {\n      max-width: 96rem;\n    }\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-64 {\n    height: calc(var(--spacing) * 64);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .max-h-full {\n    max-height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-20 {\n    width: calc(var(--spacing) * 20);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-2xl {\n    max-width: var(--container-2xl);\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-0 {\n    --tw-translate-y: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-2 {\n    --tw-translate-y: calc(var(--spacing) * 2);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .scale-95 {\n    --tw-scale-x: 95%;\n    --tw-scale-y: 95%;\n    --tw-scale-z: 95%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .scale-100 {\n    --tw-scale-x: 100%;\n    --tw-scale-y: 100%;\n    --tw-scale-z: 100%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-not-allowed {\n    cursor: not-allowed;\n  }\n  .resize {\n    resize: both;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-1 {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-stretch {\n    align-items: stretch;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-3 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-2 {\n    border-style: var(--tw-border-style);\n    border-width: 2px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-border {\n    border-color: var(--color-border);\n  }\n  .border-current {\n    border-color: currentcolor;\n  }\n  .border-error\\/20 {\n    border-color: color-mix(in srgb, hsl(0 100% 50%) 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-error) 20%, transparent);\n    }\n  }\n  .border-info\\/20 {\n    border-color: color-mix(in srgb, hsl(221 83% 53%) 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-info) 20%, transparent);\n    }\n  }\n  .border-red-300 {\n    border-color: var(--color-red-300);\n  }\n  .border-secondary {\n    border-color: var(--color-secondary);\n  }\n  .border-success\\/20 {\n    border-color: color-mix(in srgb, hsl(142 76% 36%) 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-success) 20%, transparent);\n    }\n  }\n  .border-t-transparent {\n    border-top-color: transparent;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-error\\/10 {\n    background-color: color-mix(in srgb, hsl(0 100% 50%) 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-error) 10%, transparent);\n    }\n  }\n  .bg-error\\/90 {\n    background-color: color-mix(in srgb, hsl(0 100% 50%) 90%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-error) 90%, transparent);\n    }\n  }\n  .bg-info\\/90 {\n    background-color: color-mix(in srgb, hsl(221 83% 53%) 90%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-info) 90%, transparent);\n    }\n  }\n  .bg-muted {\n    background-color: var(--color-muted);\n  }\n  .bg-overlay {\n    background-color: var(--color-overlay);\n  }\n  .bg-primary {\n    background-color: var(--color-primary);\n  }\n  .bg-red-100 {\n    background-color: var(--color-red-100);\n  }\n  .bg-secondary {\n    background-color: var(--color-secondary);\n  }\n  .bg-success\\/10 {\n    background-color: color-mix(in srgb, hsl(142 76% 36%) 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-success) 10%, transparent);\n    }\n  }\n  .bg-success\\/90 {\n    background-color: color-mix(in srgb, hsl(142 76% 36%) 90%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-success) 90%, transparent);\n    }\n  }\n  .bg-surface {\n    background-color: var(--color-surface);\n  }\n  .bg-tertiary {\n    background-color: var(--color-tertiary);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .object-contain {\n    object-fit: contain;\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .pt-3 {\n    padding-top: calc(var(--spacing) * 3);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-3 {\n    padding-right: calc(var(--spacing) * 3);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pl-3 {\n    padding-left: calc(var(--spacing) * 3);\n  }\n  .pl-4 {\n    padding-left: calc(var(--spacing) * 4);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-right {\n    text-align: right;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-error {\n    color: var(--color-error);\n  }\n  .text-error-foreground {\n    color: var(--color-error-foreground);\n  }\n  .text-muted {\n    color: var(--color-muted);\n  }\n  .text-muted-foreground {\n    color: var(--color-muted-foreground);\n  }\n  .text-primary-foreground {\n    color: var(--color-primary-foreground);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-red-700 {\n    color: var(--color-red-700);\n  }\n  .text-secondary {\n    color: var(--color-secondary);\n  }\n  .text-success {\n    color: var(--color-success);\n  }\n  .text-text-muted {\n    color: var(--color-text-muted);\n  }\n  .text-text-secondary {\n    color: var(--color-text-secondary);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .accent-tertiary {\n    accent-color: var(--color-tertiary);\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-100 {\n    opacity: 100%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .hover\\:bg-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-hover);\n      }\n    }\n  }\n  .hover\\:bg-muted {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-muted);\n      }\n    }\n  }\n  .hover\\:bg-overlay {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-overlay);\n      }\n    }\n  }\n  .hover\\:bg-secondary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-surface-hover {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-surface-hover);\n      }\n    }\n  }\n  .hover\\:bg-tertiary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-tertiary);\n      }\n    }\n  }\n  .hover\\:bg-tertiary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, hsl(28 100% 29%) 80%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-tertiary) 80%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-text-secondary {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-text-secondary);\n      }\n    }\n  }\n  .focus\\:border-2 {\n    &:focus {\n      border-style: var(--tw-border-style);\n      border-width: 2px;\n    }\n  }\n  .focus\\:border-secondary {\n    &:focus {\n      border-color: var(--color-secondary);\n    }\n  }\n  .focus\\:border-transparent {\n    &:focus {\n      border-color: transparent;\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-secondary {\n    &:focus {\n      --tw-ring-color: var(--color-secondary);\n    }\n  }\n  .focus\\:ring-tertiary {\n    &:focus {\n      --tw-ring-color: var(--color-tertiary);\n    }\n  }\n  .focus\\:ring-offset-0 {\n    &:focus {\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .sm\\:mt-0 {\n    @media (width >= 40rem) {\n      margin-top: calc(var(--spacing) * 0);\n    }\n  }\n  .sm\\:flex-3 {\n    @media (width >= 40rem) {\n      flex: 3;\n    }\n  }\n  .sm\\:flex-row {\n    @media (width >= 40rem) {\n      flex-direction: row;\n    }\n  }\n  .sm\\:items-center {\n    @media (width >= 40rem) {\n      align-items: center;\n    }\n  }\n  .sm\\:gap-4 {\n    @media (width >= 40rem) {\n      gap: calc(var(--spacing) * 4);\n    }\n  }\n  .md\\:grid-cols-2 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .md\\:pl-2 {\n    @media (width >= 48rem) {\n      padding-left: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n    &::-webkit-slider-runnable-track {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n    &::-webkit-slider-runnable-track {\n      background-color: color-mix(in srgb, #000 25%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n      }\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      height: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n    &::-webkit-slider-thumb {\n      width: 10px;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n    &::-webkit-slider-thumb {\n      appearance: none;\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n    &::-webkit-slider-thumb {\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-muted {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-muted);\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-scale-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-duration: initial;\n      --tw-ease: initial;\n    }\n  }\n}\n";
 
 const MapDraw = /*@__PURE__*/ proxyCustomElement(class MapDraw extends H {
@@ -15187,6 +15532,8 @@ const MapDraw = /*@__PURE__*/ proxyCustomElement(class MapDraw extends H {
     showMarkEdgeTutorial = false;
     showAdditionalToolsTutorial = false;
     additionalToolsTutorialShown = false;
+    showObstacleTutorial = false;
+    obstacleTutorialShown = false;
     firstPolygonClosed = false;
     zoom = 1;
     loadingState = "empty";
@@ -15223,11 +15570,7 @@ const MapDraw = /*@__PURE__*/ proxyCustomElement(class MapDraw extends H {
                 this.getBuildingImages();
                 this.getBuildingInsights();
                 // Reset tutorial states for new location
-                this.showTutorial = false;
-                this.showMarkEdgeTutorial = false;
-                this.showAdditionalToolsTutorial = false;
-                this.additionalToolsTutorialShown = false;
-                this.firstPolygonClosed = false;
+                this.resetTutorials();
                 // Show tutorial when coordinates are first set
                 this.showTutorial = true;
             }
@@ -15238,11 +15581,7 @@ const MapDraw = /*@__PURE__*/ proxyCustomElement(class MapDraw extends H {
                 this.getBuildingImages();
                 this.getBuildingInsights();
                 // Reset tutorial states for new location
-                this.showTutorial = false;
-                this.showMarkEdgeTutorial = false;
-                this.showAdditionalToolsTutorial = false;
-                this.additionalToolsTutorialShown = false;
-                this.firstPolygonClosed = false;
+                this.resetTutorials();
                 // Show tutorial when coordinates are first set
                 this.showTutorial = true;
             }
@@ -15295,7 +15634,14 @@ const MapDraw = /*@__PURE__*/ proxyCustomElement(class MapDraw extends H {
         if (!this.rgbTiff)
             return;
         // if (this.canvasManager) return;
-        this.canvasManager = new distExports.CanvasManager({
+        let managerConfig = {};
+        if (state.isMobile) {
+            managerConfig = {
+                ...managerConfig,
+                closeDistance: 20,
+            };
+        }
+        this.canvasManager = new CanvasManager({
             coordinateSystem: {
                 width: this.rgbTiff.width,
                 height: this.rgbTiff.height,
@@ -15311,7 +15657,7 @@ const MapDraw = /*@__PURE__*/ proxyCustomElement(class MapDraw extends H {
                         area: currentPolygon.area,
                     }
                     : null;
-                distExports.CanvasUtils.drawState(this.polygonCtx, this.canvasManager.getState(), this.solarPanel, {
+                CanvasUtils.drawState(this.polygonCtx, this.canvasManager.getState(), this.solarPanel, {
                     showGrid: false,
                     showPreview: !state.isMobile,
                 });
@@ -15319,12 +15665,13 @@ const MapDraw = /*@__PURE__*/ proxyCustomElement(class MapDraw extends H {
             onPolygonChange: (polygon) => this.handlePolygonsChange(polygon),
             onLowerRoofEdgeMarked: () => {
                 this.calculateSolarPanels(false);
+                // Show additional tools tutorial after mark edge tutorial is completed
                 if (!this.additionalToolsTutorialShown) {
                     this.showAdditionalToolsTutorial = true;
                     this.additionalToolsTutorialShown = true;
                 }
             },
-        });
+        }, managerConfig);
         console.log("debug", this.canvasManager?.getDebugString());
         // Add event listeners after canvas is initialized
         this.setupEventListeners();
@@ -15417,6 +15764,15 @@ const MapDraw = /*@__PURE__*/ proxyCustomElement(class MapDraw extends H {
         if (polygon.closed && !this.firstPolygonClosed &&
             polygon.type === "roof") {
             this.firstPolygonClosed = true;
+            // Show obstacle tutorial first instead of mark edge tutorial
+            this.showObstacleTutorial = true;
+        }
+        // Show mark edge tutorial when an obstacle polygon is closed (if obstacle tutorial was shown)
+        if (polygon.closed &&
+            polygon.type === "obstruction" &&
+            this.obstacleTutorialShown &&
+            !this.showMarkEdgeTutorial &&
+            !this.showObstacleTutorial) {
             this.showMarkEdgeTutorial = true;
         }
         if (polygon.closed || this.currentTool !== moveTool) {
@@ -15427,7 +15783,7 @@ const MapDraw = /*@__PURE__*/ proxyCustomElement(class MapDraw extends H {
                 }
                 return;
             }
-            const bestMatch = distExports$1.getBestFittingRoofSegment(polygon, this.buildingInsights?.solarPotential.roofSegmentStats ?? [], this.rgbTiff.bounds, this.canvasElement);
+            const bestMatch = getBestFittingRoofSegment(polygon, this.buildingInsights?.solarPotential.roofSegmentStats ?? [], this.rgbTiff.bounds, this.canvasElement);
             if (!bestMatch) {
                 const newPolygon = {
                     ...polygon,
@@ -15558,14 +15914,10 @@ const MapDraw = /*@__PURE__*/ proxyCustomElement(class MapDraw extends H {
             this.rgbTiff = null;
             this.canvasManager?.clearPolygons();
             // Reset tutorial states for new location
-            this.showTutorial = false;
-            this.showMarkEdgeTutorial = false;
-            this.showAdditionalToolsTutorial = false;
-            this.additionalToolsTutorialShown = false;
-            this.firstPolygonClosed = false;
+            this.resetTutorials();
         }
         try {
-            this.buildingInsights = await distExports$1.fetchSolarData(state.latitude, state.longitude, this.apiKey);
+            this.buildingInsights = await fetchSolarData(state.latitude, state.longitude, this.apiKey);
             if (!this.buildingInsights) {
                 console.error("No building insights found. Please enter them manually.");
             }
@@ -15619,7 +15971,7 @@ const MapDraw = /*@__PURE__*/ proxyCustomElement(class MapDraw extends H {
         // Add a small delay to ensure canvas sizing is complete
         await new Promise((resolve) => setTimeout(resolve, 0));
         try {
-            distExports.renderRGB(this.rgbTiff, undefined, this.canvasElement);
+            renderRGB(this.rgbTiff, undefined, this.canvasElement);
             this.loadingState = "loaded";
         }
         catch (error) {
@@ -15632,16 +15984,16 @@ const MapDraw = /*@__PURE__*/ proxyCustomElement(class MapDraw extends H {
             // Map harmonia-draw Tool enum back to local Tool
             const harmoniaTool = this.canvasManager.getState().selectedTool;
             switch (harmoniaTool) {
-                case distExports.Tool.ROOF_POLYGON:
+                case Tool.ROOF_POLYGON:
                     this.currentTool = roofTool;
                     break;
-                case distExports.Tool.OBSTRUCTION_POLYGON:
+                case Tool.OBSTRUCTION_POLYGON:
                     this.currentTool = obstructionTool;
                     break;
-                case distExports.Tool.MOVE:
+                case Tool.MOVE:
                     this.currentTool = moveTool;
                     break;
-                case distExports.Tool.MARK_ROOF_EDGE:
+                case Tool.MARK_ROOF_EDGE:
                     this.currentTool = markRoofEdgeTool;
                     break;
                 default:
@@ -15690,7 +16042,7 @@ const MapDraw = /*@__PURE__*/ proxyCustomElement(class MapDraw extends H {
             heightMeters: this.solarPanel.heightMeters / this.pixelInMeters,
         };
         const inset = BORDER_INSET / this.pixelInMeters;
-        const solarPanels = distExports$1.getOptimalSolarPositionFully(polygon, this.canvasManager.getObstacles(), convertedSolarPanel, polygon.azimuth, inset, polygon.pitch, state.settings.columnSpacing, state.settings.rowSpacing);
+        const solarPanels = getOptimalSolarPositionFully(polygon, this.canvasManager.getObstacles(), convertedSolarPanel, polygon.azimuth, inset, polygon.pitch, state.settings.columnSpacing, state.settings.rowSpacing);
         this.canvasManager.setPositionedSolarPanel(polygon.id, solarPanels);
         // Convert PositionedSolarPanel[] to SolarPanelSystemPart format
         const allPositionedPanels = this.canvasManager
@@ -15754,16 +16106,16 @@ const MapDraw = /*@__PURE__*/ proxyCustomElement(class MapDraw extends H {
         if (this.canvasManager) {
             switch (tool.name) {
                 case "roof":
-                    this.canvasManager.setSelectedTool(distExports.Tool.ROOF_POLYGON);
+                    this.canvasManager.setSelectedTool(Tool.ROOF_POLYGON);
                     break;
                 case "obstruction":
-                    this.canvasManager.setSelectedTool(distExports.Tool.OBSTRUCTION_POLYGON);
+                    this.canvasManager.setSelectedTool(Tool.OBSTRUCTION_POLYGON);
                     break;
                 case "move":
-                    this.canvasManager.setSelectedTool(distExports.Tool.MOVE);
+                    this.canvasManager.setSelectedTool(Tool.MOVE);
                     break;
                 case "markRoofEdge":
-                    this.canvasManager.setSelectedTool(distExports.Tool.MARK_ROOF_EDGE);
+                    this.canvasManager.setSelectedTool(Tool.MARK_ROOF_EDGE);
                     break;
             }
         }
@@ -15784,6 +16136,17 @@ const MapDraw = /*@__PURE__*/ proxyCustomElement(class MapDraw extends H {
     };
     handleAdditionalToolsTutorialClose = () => {
         this.showAdditionalToolsTutorial = false;
+        this.additionalToolsTutorialShown = true;
+    };
+    handleObstacleTutorialClose = () => {
+        this.showObstacleTutorial = false;
+        this.obstacleTutorialShown = true;
+        this.handleToolSelect(obstructionTool);
+    };
+    handleObstacleTutorialSkip = () => {
+        this.showObstacleTutorial = false;
+        this.obstacleTutorialShown = true;
+        this.showMarkEdgeTutorial = true;
     };
     showToastMessage(message, type = "success") {
         this.toastMessage = message;
@@ -15794,26 +16157,35 @@ const MapDraw = /*@__PURE__*/ proxyCustomElement(class MapDraw extends H {
             this.showToast = false;
         }, 3000);
     }
+    resetTutorials() {
+        this.showTutorial = false;
+        this.showMarkEdgeTutorial = false;
+        this.showAdditionalToolsTutorial = false;
+        this.showObstacleTutorial = false;
+        this.additionalToolsTutorialShown = false;
+        this.obstacleTutorialShown = false;
+        this.firstPolygonClosed = false;
+    }
     render() {
         const t = getLanguageStrings(state.settings.language);
-        return (h("div", { key: 'bb03c8f47839d4be66e0dc876434ba5f5e4bf8cc', class: "flex flex-col justify-center items-center w-full h-full gap-4", id: "map-draw" }, this.showTutorial && (h("tutorial-component", { key: '3dda85a148de1c63ef4d56130513eb7bc69315fe', onClose: this.handleTutorialClose, title: t.mapDraw.tutorial.title, description: t.mapDraw.tutorial.description, videoSource: getAssetPath("./assets/tutorial1.mp4") })), this.showMarkEdgeTutorial && (h("tutorial-component", { key: '8c301a37fac508d3ef10dc2b4d80ab65752b74cd', onClose: this.handleMarkEdgeTutorialClose, title: t.mapDraw.tutorial.markEdge.title, description: t.mapDraw.tutorial.markEdge
-                .description, videoSource: getAssetPath("./assets/tutorial2.mp4") })), this.showAdditionalToolsTutorial && (h("tutorial-component", { key: '17a9582624fdc5145030cc7622fd58a8062a2e51', onClose: this
+        return (h("div", { key: 'bb9de30bfdc8c301648b4e555ee91dd10790cfe1', class: "flex flex-col justify-center items-center w-full h-full gap-4", id: "map-draw" }, this.showTutorial && (h("tutorial-component", { key: '55fb0534409ded5116ef5d0848ef4e18429125dc', onClose: this.handleTutorialClose, title: t.mapDraw.tutorial.title, description: t.mapDraw.tutorial.description, videoSource: getAssetPath("./assets/tutorial1.mp4") })), this.showMarkEdgeTutorial && (h("tutorial-component", { key: '106bb6504bd30cc9fbaa45ea81bce7bc8e35ad89', onClose: this.handleMarkEdgeTutorialClose, title: t.mapDraw.tutorial.markEdge.title, description: t.mapDraw.tutorial.markEdge
+                .description, videoSource: getAssetPath("./assets/tutorial2.mp4") })), this.showAdditionalToolsTutorial && (h("tutorial-component", { key: '60e9697dc04c89ce174265021ec2f725fc894887', onClose: this
                 .handleAdditionalToolsTutorialClose, title: t.mapDraw.tutorial.additionalTools.title, description: t.mapDraw.tutorial.additionalTools
-                .description, videoSource: getAssetPath("./assets/tutorial3.mp4") })), (state.latitude && state.longitude &&
-            this.loadingState === "loading") && (h("div", { key: 'c1743c0f62d6bc5b050497676eec49d96b81013f', class: "flex items-center justify-center w-full bg-opacity-75 z-20 pt-7 rounded-4xl" }, h("div", { key: '00e47ecebd5e843f06837b6d60c974d53e512297', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-secondary" }))), (state.latitude && state.longitude &&
-            this.loadingState === "error") && (h("div", { key: '87836271f03dea80ca34636f56e6f332cdf0dcbc', class: "flex items-center justify-center w-full bg-opacity-75 z-20 pt-7 rounded-4xl" }, h("div", { key: '6aca2e9d4124772c5cf5264cb4d870d15e31b42d', class: "text-red-500 text-center text-lg font-semibold" }, t.mapDraw.imageLoadError))), h("div", { key: '93807c2d597f7505e756be9d5ed4152b24e01aad', class: "flex items-start justify-center w-full bg-primary rounded-4xl" }, h("div", { key: '2b3f7b1da9bf62ecc29909537c9c3b7432eda1a4', class: "relative flex items-center justify-center w-full rounded-4xl bg-secondary", style: {
+                .description, videoSource: getAssetPath("./assets/tutorial3.mp4") })), this.showObstacleTutorial && (h("tutorial-component", { key: 'b8ee4d273be4405f0e75433f3c3bfaf8fd38f6ea', onClose: this.handleObstacleTutorialClose, onSkip: this.handleObstacleTutorialSkip, showSkipButton: true, title: t.mapDraw.tutorial.obstacle.title, description: t.mapDraw.tutorial.obstacle.description, videoSource: getAssetPath("./assets/tutorial4.mp4") })), (state.latitude && state.longitude &&
+            this.loadingState === "loading") && (h("div", { key: '1d9795783a5a4001e8942214f9291ff17e5c9e81', class: "flex items-center justify-center w-full bg-opacity-75 z-20 pt-7 rounded-4xl" }, h("div", { key: '4fe8c9ed7e0f951047ade565c7c7d7c284880af7', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-secondary" }))), (state.latitude && state.longitude &&
+            this.loadingState === "error") && (h("div", { key: 'b573fea2e40fe903464df2f9c87418e10645bdbe', class: "flex items-center justify-center w-full bg-opacity-75 z-20 pt-7 rounded-4xl" }, h("div", { key: '8ca895577317ed846e88a74f460bacac13ba1102', class: "text-red-500 text-center text-lg font-semibold" }, t.mapDraw.imageLoadError))), h("div", { key: '5727a6899c7ef16fd65b328f879f382200cd0099', class: "flex items-start justify-center w-full bg-primary rounded-4xl" }, h("div", { key: '8d0cb90847e01380e795426f4eb0d82ee4472fc3', class: "relative flex items-center justify-center w-full rounded-4xl bg-secondary", style: {
                 aspectRatio: this.rgbTiff
                     ? `${this.rgbTiff.width}/${this.rgbTiff.height}`
                     : "",
-            } }, h("canvas", { key: '3c9f68c2c031850922cde46ab8d1476d09e418f0', ref: (el) => this.canvasElement = el, class: "absolute top-0 left-0 w-full h-full rounded-4xl", id: "map-draw-canvas", style: {
+            } }, h("canvas", { key: 'e5dace6eed7f881f26c453ec4a37786940618cea', ref: (el) => this.canvasElement = el, class: "absolute top-0 left-0 w-full h-full rounded-4xl", id: "map-draw-canvas", style: {
                 cursor: this.currentTool.cursor,
-            } }), h("canvas", { key: 'ac6fd8695d643938399625ae52bddbeb08579377', ref: (el) => this.polygonCanvas = el, class: "absolute top-0 left-0 w-full h-full rounded-4xl", style: {
+            } }), h("canvas", { key: '1e4bbef400cd1d95cd0c2bbfbe5c75de77687744', ref: (el) => this.polygonCanvas = el, class: "absolute top-0 left-0 w-full h-full rounded-4xl", style: {
                 cursor: this.currentTool.cursor,
-            } }))), this.rgbTiff && (h("div", { key: 'c9c8bb6156847b6510e4db0258028eb9922f1497', class: "w-full" }, h("div", { key: '0b3434f7fd235f42db89ae6374faeb6f733a286a', class: "w-full pb-4" }, h("tool-box", { key: '0710bd7a21553f8cf92a16693236206409230512', currentTool: this.currentTool, onToolSelect: (tool) => this.handleToolSelect(tool), undoCallback: () => this.undo() })), h("div", { key: 'a562acff3eb4edfe7c36f6aeef4893ceb1bb0387', class: "w-full" }, h("polygon-information", { key: 'e0a51152f7f69edb8a390e975c478d511b4c403f', currentPolygon: this.currentPolygon, numberOfPanels: this.currentPolygon
+            } }))), this.rgbTiff && (h("div", { key: '19e7119b1f12ea5a4380a6b1b1bd5aa70ce9be77', class: "w-full" }, h("div", { key: '3e192ed5048aaeeb3a251ef11b30eda3a5b78668', class: "w-full pb-4" }, h("tool-box", { key: '5d3ee6c1e561b836dfe3566fb95573f669d6e692', currentTool: this.currentTool, onToolSelect: (tool) => this.handleToolSelect(tool), undoCallback: () => this.undo() })), h("div", { key: 'e7a98bcf23ea1653547d7b3eeabd3f784ac7114e', class: "w-full" }, h("polygon-information", { key: 'ca3092abaea53001bf5d008e9e9128e91e07cf01', currentPolygon: this.currentPolygon, numberOfPanels: this.currentPolygon
                 ? this
                     .solarSystem[this.currentPolygon.id]
                     ?.numberOfPanels
-                : undefined, handleAzimuthChange: (event) => this.handleAzimuthChange(event), handlePitchChange: (event) => this.handlePitchChange(event), calculateSolarPanels: () => this.calculateSolarPanels(true), markAsFlatRoof: () => this.markAsFlatRoof(), currentTool: this.currentTool.name })), h("div", { key: '07bc9f2bc665186d0da23c9b8899e5095aff73d8', class: "w-full" }, h("solar-system-form", { key: '122f5fcfb4b82108e96659298f0b09d94ca196d1', systemConfigs: this.solarSystem, polygons: this.canvasManager?.getPolygons(), roofCanvas: this.canvasElement, polygonCanvas: this.polygonCanvas })))), this.showSettings && (h("settings-modal", { key: 'c310a679506c69302097f1c4907b913341707c66', settings: state.settings, onClose: this.handleSettingsClose, onSave: this.handleSettingsSave })), this.showToast && (h("toast-notification", { key: 'c111a1ee42b26bb3b953d39d1bfe6d270213ab94', message: this.toastMessage, type: this.toastType, duration: 3000 }))));
+                : undefined, handleAzimuthChange: (event) => this.handleAzimuthChange(event), handlePitchChange: (event) => this.handlePitchChange(event), calculateSolarPanels: () => this.calculateSolarPanels(true), markAsFlatRoof: () => this.markAsFlatRoof(), currentTool: this.currentTool.name })), h("div", { key: '004d65f46355bb244a1e7ddfa6c6df28ad3f31ad', class: "w-full" }, h("solar-system-form", { key: 'b9c095e76b308a5ab5de11de436eef7401516318', systemConfigs: this.solarSystem, polygons: this.canvasManager?.getPolygons(), roofCanvas: this.canvasElement, polygonCanvas: this.polygonCanvas, pixelInMeters: this.pixelInMeters })))), this.showSettings && (h("settings-modal", { key: 'adfa4fe395cb1a3a275cb1012b05ee7dce24ec45', settings: state.settings, onClose: this.handleSettingsClose, onSave: this.handleSettingsSave })), this.showToast && (h("toast-notification", { key: '5413c46de3d34e9910d011f49e9e39f778f40a69', message: this.toastMessage, type: this.toastType, duration: 3000 }))));
     }
     static get watchers() { return {
         "rgbTiff": ["setupCanvasManager", "drawMap"],
@@ -15831,6 +16203,8 @@ const MapDraw = /*@__PURE__*/ proxyCustomElement(class MapDraw extends H {
         "showMarkEdgeTutorial": [32],
         "showAdditionalToolsTutorial": [32],
         "additionalToolsTutorialShown": [32],
+        "showObstacleTutorial": [32],
+        "obstacleTutorialShown": [32],
         "firstPolygonClosed": [32],
         "zoom": [32],
         "loadingState": [32],
@@ -15944,6 +16318,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { LercParameters as L, MapDraw as M, LercAddCompression as a, defineCustomElement as d, global$1 as g };
-//# sourceMappingURL=p-DlNHVTGB.js.map
+//# sourceMappingURL=p-BOe-Z8rz.js.map
 
-//# sourceMappingURL=p-DlNHVTGB.js.map
+//# sourceMappingURL=p-BOe-Z8rz.js.map