npm - blue-chestnut-solar-expert - Versions diffs - 0.0.17 → 0.0.19 - Mend

blue-chestnut-solar-expert 0.0.17 → 0.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (104) hide show

package/dist/stencil-library/map-draw.entry.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { r as registerInstance, g as getElement, h } from './index-DZjEuBrX.js';
 import { f as fetchSolarData, g as getBuildingImages } from './api-E7GpMOpJ.js';
-import { D as DOTTED_LINE_COLOR, R as ROW_SPACING, C as COLUMN_SPACING, a as DEFAULT_SOLAR_EXPERT_CONFIG, b as DEFAULT_SOLAR_PANEL_TYPE, c as DEFAULT_SUNNINESS, B as BORDER_INSET } from './config-hh5GAFbi.js';
-import { r as roofTool, t as tools, m as moveTool, o as obstructionTool, d as deleteTool } from './tools-DO8CG56H.js';
-import { o as onChange, s as state, g as getLanguageStrings } from './store-CbFNgpiN.js';
+import { D as DOTTED_LINE_COLOR, R as ROW_SPACING, C as COLUMN_SPACING, a as DEFAULT_SOLAR_EXPERT_CONFIG, b as DEFAULT_SOLAR_PANEL_TYPE, c as DEFAULT_SUNNINESS, B as BORDER_INSET } from './config-BV_PiZGS.js';
+import { r as roofTool, t as tools, o as obstructionTool, m as moveTool, d as deleteTool, a as markRoofEdgeTool } from './tools-DU7Muwzb.js';
+import { l as latLngToPixel, g as getPixelInMeters, c as calculatePolygonArea } from './utils-CTW6J-87.js';
+import { o as onChange, s as state, g as getLanguageStrings } from './store-Dr69Zmu_.js';
 /*
  Copyright 2023 Google LLC
@@ -391,7 +392,7 @@ function projectPointPerpendicularToLine({ x, y, lastPoint, secondLastPoint, })
     return { x, y };
 }
-function drawPolygon({ polygonCtx, polygonCanvas, polygon, shiftKeyPressed, mousePoint, strokeColor, fillColor }) {
+function drawPolygon({ polygonCtx, polygonCanvas, polygon, shiftKeyPressed, mousePoint, strokeColor, fillColor, highlightedEdge, highlightColor }) {
     if (!polygonCtx || !polygonCanvas)
         return;
     // Draw the polygon
@@ -416,6 +417,16 @@ function drawPolygon({ polygonCtx, polygonCanvas, polygon, shiftKeyPressed, mous
     if (polygon.points.length > 0) {
         polygonCtx.stroke();
     }
+    if (highlightedEdge && polygon.closed) {
+        polygonCtx.beginPath();
+        polygonCtx.strokeStyle = highlightColor;
+        polygonCtx.lineWidth = 2;
+        polygonCtx.moveTo(highlightedEdge.pointA.x, highlightedEdge.pointA.y);
+        polygonCtx.lineTo(highlightedEdge.pointB.x, highlightedEdge.pointB.y);
+        polygonCtx.stroke();
+        polygonCtx.strokeStyle = strokeColor;
+        polygonCtx.lineWidth = 1;
+    }
     if (polygon.points.length > 1 && !polygon.closed && shiftKeyPressed) {
         const projectedPoint = projectPointPerpendicularToLine({
             x: mousePoint.x,
@@ -1342,101 +1353,6 @@ function version(uuid) {
   return parseInt(uuid.slice(14, 15), 16);
 }
-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) {
-    // Convert angle to cardinal direction
-    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;
-    // Calculate the average direction of the polygon
-    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;
-    // Calculate the average angle of the polygon
-    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);
-}
-;
-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 {
-        x: lngToPixel(latLng.longitude),
-        y: latToPixel(latLng.latitude),
-    };
-}
-function getPixelInMeters(rgbTiff) {
-    const latDiff = rgbTiff.bounds.north - rgbTiff.bounds.south;
-    // const lngDiff = rgbTiff.bounds.east - rgbTiff.bounds.west;
-    // const pixelWidth = rgbTiff.width;
-    const pixelHeight = rgbTiff.height;
-    const pixelInMeters = latDiff * 111320 / pixelHeight;
-    // const latAvg = (rgbTiff.bounds.north + rgbTiff.bounds.south) / 2;
-    // const pixelInMetersLng = lngDiff * 111320 * Math.cos(latAvg * Math.PI / 180) / pixelWidth;
-    return pixelInMeters;
-}
 /**
  * Get the intersections of a line parallel to the x-axis of the projected coordinate system with a polygon.
  * @param projectedPoint the point to draw the line from
@@ -2197,7 +2113,7 @@ function getOptimalSolarPositionFully(roof, obstacles, solarPanel, azimuth, inse
     return unprojectedPanels;
 }
-const outputCss = "/*! tailwindcss v4.1.7 | 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-500: oklch(63.7% 0.237 25.331);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-100: oklch(96.7% 0.003 264.542);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\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    --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  }\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  .top-1 {\n    top: calc(var(--spacing) * 1);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-4 {\n    bottom: calc(var(--spacing) * 4);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1 {\n    left: calc(var(--spacing) * 1);\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  .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-2 {\n    margin-bottom: calc(var(--spacing) * 2);\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  .inline-flex {\n    display: inline-flex;\n  }\n  .table {\n    display: table;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\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  .flex-3 {\n    flex: 3;\n  }\n  .border-collapse {\n    border-collapse: collapse;\n  }\n  .-translate-x-1 {\n    --tw-translate-x: calc(var(--spacing) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\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-1 {\n    --tw-translate-y: calc(var(--spacing) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-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-help {\n    cursor: help;\n  }\n  .resize {\n    resize: both;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, 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-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  .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-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\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-\\[\\#271200\\] {\n    border-color: #271200;\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-red-500 {\n    border-color: var(--color-red-500);\n  }\n  .bg-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\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-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\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-4 {\n    padding-right: calc(var(--spacing) * 4);\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-2 {\n    padding-left: calc(var(--spacing) * 2);\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-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-\\[\\#271200\\] {\n    color: #271200;\n  }\n  .text-\\[\\#964500\\] {\n    color: #964500;\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .underline {\n    text-decoration-line: underline;\n  }\n  .accent-\\[\\#964500\\] {\n    accent-color: #964500;\n  }\n  .opacity-0 {\n    opacity: 0%;\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  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\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  .transition-opacity {\n    transition-property: opacity;\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  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#3a1b00\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #3a1b00;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#271200\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #271200;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#964500\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #964500;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#ffffff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #ffffff;\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\n      }\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-\\[\\#271200\\] {\n    &:focus {\n      --tw-ring-color: #271200;\n    }\n  }\n  .focus\\:ring-\\[\\#964500\\] {\n    &:focus {\n      --tw-ring-color: #964500;\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\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  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\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-white {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-white);\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-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-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-duration {\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-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-outline-style: solid;\n      --tw-duration: initial;\n    }\n  }\n}\n";
+const outputCss = "/*! tailwindcss v4.1.7 | 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-500: oklch(63.7% 0.237 25.331);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-md: 28rem;\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    --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  }\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  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .bottom-full {\n    bottom: 100%;\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-20 {\n    z-index: 20;\n  }\n  .z-50 {\n    z-index: 50;\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-2 {\n    margin-bottom: calc(var(--spacing) * 2);\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  .inline-flex {\n    display: inline-flex;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-48 {\n    height: calc(var(--spacing) * 48);\n  }\n  .h-\\[400px\\] {\n    height: 400px;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-3 {\n    flex: 3;\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-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-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-help {\n    cursor: help;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .grid-rows-2 {\n    grid-template-rows: repeat(2, minmax(0, 1fr));\n  }\n  .grid-rows-3 {\n    grid-template-rows: repeat(3, 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-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  .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-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\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-\\[\\#271200\\] {\n    border-color: #271200;\n  }\n  .border-gray-200 {\n    border-color: var(--color-gray-200);\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .border-red-500 {\n    border-color: var(--color-red-500);\n  }\n  .bg-\\[\\#00000056\\] {\n    background-color: #00000056;\n  }\n  .bg-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\n  }\n  .bg-\\[\\#ffffff\\] {\n    background-color: #ffffff;\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-800 {\n    background-color: var(--color-gray-800);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\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-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\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-4 {\n    padding-right: calc(var(--spacing) * 4);\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-2 {\n    padding-left: calc(var(--spacing) * 2);\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-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-\\[\\#271200\\] {\n    color: #271200;\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-gray-700 {\n    color: var(--color-gray-700);\n  }\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .accent-\\[\\#964500\\] {\n    accent-color: #964500;\n  }\n  .opacity-0 {\n    opacity: 0%;\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  .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  .transition-opacity {\n    transition-property: opacity;\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  .group-hover\\:opacity-100 {\n    &:is(:where(.group):hover *) {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#0000003c\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #0000003c;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#3a1b00\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #3a1b00;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#271200\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #271200;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#964500\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #964500;\n      }\n    }\n  }\n  .hover\\:bg-\\[\\#ffffff\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #ffffff;\n      }\n    }\n  }\n  .hover\\:bg-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-200);\n      }\n    }\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-gray-500 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-500);\n      }\n    }\n  }\n  .hover\\:text-white {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-white);\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-black {\n    &:focus {\n      border-color: var(--color-black);\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-\\[\\#271200\\] {\n    &:focus {\n      --tw-ring-color: #271200;\n    }\n  }\n  .focus\\:ring-\\[\\#964500\\] {\n    &:focus {\n      --tw-ring-color: #964500;\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\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  .lg\\:gap-4 {\n    @media (width >= 64rem) {\n      gap: calc(var(--spacing) * 4);\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-white {\n    &::-webkit-slider-thumb {\n      background-color: var(--color-white);\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-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@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-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    }\n  }\n}\n";
 const MapDraw = class {
     constructor(hostRef) {
@@ -2225,6 +2141,7 @@ const MapDraw = class {
     buildingInsights = null;
     pixelInMeters = 0.2;
     isMobile = false;
+    highlightedEdge = null;
     get el() { return getElement(this); }
     canvasElement;
     polygonCanvas;
@@ -2300,9 +2217,9 @@ const MapDraw = class {
         // If on mobile, automatically calculate panels using Google API data
         if (state.isMobile && this.buildingInsights) {
             const maxPanels = this.buildingInsights.solarPotential.maxArrayPanelsCount;
-            const approximatedPanels = Math.floor(maxPanels / 3); // Use one third of max panels
+            const approximatedPanels = Math.floor(maxPanels * 3 / 4); // Use two thirds of max panels
             const positionedPanels = Array(approximatedPanels).fill(null)
-                .map((_, i) => ({
+                .map((_, __) => ({
                 panel: this.solarPanel,
                 pixelPosition: {
                     x: -1,
@@ -2364,6 +2281,32 @@ const MapDraw = class {
         const { x, y } = this.convertToCanvasCoordinates(event);
         this.mousePoint = { x, y };
         const currentPolygon = this.getCurrentPolygon();
+        let redraw = false;
+        if (this.currentTool.name === "markRoofEdge") {
+            let distances = [];
+            for (let i = 0; i < currentPolygon?.points.length; i++) {
+                const pointA = currentPolygon?.points[i];
+                const pointB = currentPolygon
+                    ?.points[(i + 1) % currentPolygon?.points.length];
+                const distanceA = Math.sqrt(Math.pow(x - pointA.x, 2) + Math.pow(y - pointA.y, 2));
+                const distanceB = Math.sqrt(Math.pow(x - pointB.x, 2) + Math.pow(y - pointB.y, 2));
+                const edgeLength = Math.sqrt(Math.pow(pointA.x - pointB.x, 2) +
+                    Math.pow(pointA.y - pointB.y, 2));
+                distances.push({
+                    dist: distanceA + distanceB - edgeLength,
+                    edge: { pointA, pointB },
+                });
+            }
+            const closestEdge = distances.sort((a, b) => a.dist - b.dist)[0];
+            if (closestEdge && (closestEdge.dist < 10)) {
+                this.highlightedEdge = closestEdge.edge;
+                redraw = true;
+            }
+            else if (this.highlightedEdge) {
+                this.highlightedEdge = null;
+                redraw = true;
+            }
+        }
         // Check for point hover
         const newHoveredPointIndex = currentPolygon?.points.findIndex((point) => {
             const distance = Math.sqrt(Math.pow(x - point.x, 2) + Math.pow(y - point.y, 2));
@@ -2393,7 +2336,7 @@ const MapDraw = class {
                 JSON.stringify(this.hoveredPolygon)) {
             this.hoveredPointIndex = newHoveredPointIndex;
             this.hoveredPolygon = newHoveredPolygon;
-            this.drawPolygons();
+            redraw = true;
         }
         // Handle dragging
         if (this.draggedPointIndex !== null && currentPolygon &&
@@ -2406,9 +2349,12 @@ const MapDraw = class {
                     (metersInPixels * metersInPixels);
                 currentPolygon.details.area = area;
             }
-            this.drawPolygons();
+            redraw = true;
         }
         if (this.shiftKeyPressed) {
+            redraw = true;
+        }
+        if (redraw) {
             this.drawPolygons();
         }
     }
@@ -2431,6 +2377,8 @@ const MapDraw = class {
                 pixelInMeters: this.pixelInMeters,
                 shiftKeyPressed: this.shiftKeyPressed,
                 mousePoint: this.mousePoint,
+                highlightColor: this.config.highlightColor,
+                highlightedEdge: this.highlightedEdge,
             });
             const solarPanels = this.roofPolygonsSolarPanels[polygon._id];
             const convertedSolarPanel = {
@@ -2458,6 +2406,7 @@ const MapDraw = class {
                     ? this.config.closedObstructionColor
                     : this.config.openObstructionColor,
                 fillColor,
+                highlightColor: this.config.highlightColor,
             });
         }
     }
@@ -2515,7 +2464,31 @@ const MapDraw = class {
             this.altKeyPressed = false;
         }
     }
+    undo() {
+        const currentPolygon = this.getCurrentPolygon();
+        if (!currentPolygon) {
+            return;
+        }
+        if (currentPolygon.closed) {
+            currentPolygon.closed = false;
+            if (currentPolygon.type === "roof") {
+                delete this.roofPolygonsSolarPanels[currentPolygon._id];
+                this.currentTool = roofTool;
+                this.highlightedEdge = null;
+            }
+            else if (currentPolygon.type === "obstruction") {
+                this.currentTool = obstructionTool;
+            }
+        }
+        else {
+            currentPolygon.points.pop();
+        }
+        this.drawPolygons();
+    }
     handleMouseDown(event) {
+        if (this.currentTool.name === "undo") {
+            return;
+        }
         if (state.isMobile)
             return; // Prevent interactions on mobile
         if (!this.polygonCanvas || !this.polygonCtx)
@@ -2523,6 +2496,23 @@ const MapDraw = class {
         if (!this.polygonCanvas.contains(event.target))
             return;
         let { x, y } = this.convertToCanvasCoordinates(event);
+        if (this.currentTool.name === "markRoofEdge") {
+            if (!this.highlightedEdge) {
+                return;
+            }
+            const x = this.highlightedEdge.pointA.x -
+                this.highlightedEdge.pointB.x;
+            const y = this.highlightedEdge.pointA.y -
+                this.highlightedEdge.pointB.y;
+            const azimuth = Math.atan2(-x, y) * (180 / Math.PI);
+            this.calculateSolarPanels();
+            this.handleAzimuthChange({
+                target: {
+                    value: azimuth,
+                },
+            });
+            return;
+        }
         if (this.currentTool.name === "delete") {
             if (!this.hoveredPolygon) {
                 return;
@@ -2542,10 +2532,10 @@ const MapDraw = class {
             this.drawPolygons();
             return;
         }
+        const currentPolygon = this.getCurrentPolygon();
         if (this.currentTool.name === "move") {
             // Check if we're clicking on a point of the selected polygon
             if (this.selectedPolygon) {
-                const currentPolygon = this.getCurrentPolygon();
                 const pointIndex = currentPolygon?.points.findIndex((point) => {
                     const distance = Math.sqrt(Math.pow(x - point.x, 2) + Math.pow(y - point.y, 2));
                     return distance < 10;
@@ -2563,7 +2553,8 @@ const MapDraw = class {
             this.drawPolygons();
             return;
         }
-        if (!this.selectedPolygon || this.getCurrentPolygon()?.closed) {
+        if (!this.selectedPolygon || currentPolygon?.closed ||
+            this.currentTool.name !== this.selectedPolygon?.type) {
             // no polygon is active, create a new one
             const newPolygon = {
                 _id: v4(),
@@ -2590,10 +2581,6 @@ const MapDraw = class {
             this.drawPolygons();
             return;
         }
-        const { _id, type } = this.selectedPolygon;
-        const currentPolygon = type === "roof"
-            ? this.roofPolygons[_id]
-            : this.obstructionPolygons[_id];
         if (currentPolygon.closed) {
             return;
         }
@@ -2655,7 +2642,7 @@ const MapDraw = class {
         this.drawPolygons();
         this.currentTool = moveTool;
     }
-    calculateSolarPanels() {
+    calculateSolarPanels({ redraw = true } = {}) {
         const currentPolygon = this.getCurrentPolygon();
         if (!currentPolygon.details) {
             return;
@@ -2681,7 +2668,9 @@ const MapDraw = class {
                     DEFAULT_SUNNINESS,
             },
         };
-        this.drawPolygons();
+        if (redraw) {
+            this.drawPolygons();
+        }
     }
     handlePitchChange(event) {
         const target = event.target;
@@ -2710,6 +2699,13 @@ const MapDraw = class {
         }
     }
     handleToolSelect(tool) {
+        const currentPolygon = this.getCurrentPolygon();
+        if (currentPolygon && !currentPolygon.closed &&
+            currentPolygon.points.length > 0) {
+            alert("Please close the polygon before selecting a tool");
+            // TODO translate
+            return;
+        }
         this.currentTool = tool;
     }
     scrollToCanvas() {
@@ -2731,72 +2727,24 @@ const MapDraw = class {
     render() {
         const t = getLanguageStrings(state.settings.language);
         const currentPolygon = this.getCurrentPolygon();
-        return (h("div", { key: 'bc5cb8df93f77ad4fe45c79b1deef0609a77253a', class: "flex flex-col justify-center items-center w-full h-full gap-4", id: "map-draw" }, this.showInstructions && !state.isMobile && (h("div", { key: '54410436177fb4a4f306e7526dcd3a04f20335ea', class: "w-full rounded-4xl p-4 bg-white" }, t.mapDraw.instructions.parts.roof, " ", h("button", { key: '642ed241afe9a207fde659f084149e3e35f6ccd1', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors", onClick: () => this.handleToolSelect(roofTool) }, h("icon-selector", { key: '4071eff3dcc4a6d3d1d5d49177c3b21c761a3861', name: "house", inline: true })), " ", t.mapDraw.instructions.parts.obstruction, " ", h("button", { key: '7b9188696846fbea5f06415649f71bbd7f3b13c7', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors", onClick: () => this.handleToolSelect(obstructionTool) }, h("icon-selector", { key: 'a2494edd178f787d96aff921aec005d93df4031e', name: "octagon-minus", inline: true })), " ", t.mapDraw.instructions.parts.delete, " ", h("button", { key: 'ff5aa2388ea6e657dc1435cbebfb9b911a687934', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors", onClick: () => this.handleToolSelect(deleteTool) }, h("icon-selector", { key: 'f3cbd140baf8cb028f66bff5a1a8968cbef89363', name: "eraser", inline: true })), " ", t.mapDraw.instructions.parts.move, " ", h("button", { key: '3e81bf328648f3d2a8b4f60075b33fe2cf9b5ad6', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors", onClick: () => this.handleToolSelect(moveTool) }, h("icon-selector", { key: 'be1d5191ed1b2a3c8cf66776b1ea159d4ff43afd', name: "move", inline: true })), " ", t.mapDraw.instructions.parts.end)), h("div", { key: 'e94aca98a9480808b71049af0e1fb7d7343f22a0', class: "w-full flex flex-row justify-between items-center" }, !state.isMobile && (this.showInstructions
+        return (h("div", { key: 'cbd284f644e2de18b7bdcf8e32bc4660dfd73c17', class: "flex flex-col justify-center items-center w-full h-full gap-4", id: "map-draw" }, this.showInstructions && !state.isMobile && (h("div", { key: 'fdac6c98216f25c59f818abd04d6b31749411f36', class: "w-full rounded-4xl p-4 bg-white" }, t.mapDraw.instructions.parts.roof, " ", h("button", { key: '33c4ec412af722afa4f49ac3b13a3dc5b2671dff', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors", onClick: () => this.handleToolSelect(roofTool) }, h("icon-selector", { key: '32a52f0c5e6d17d2ae91ff67735f61816c6300e5', name: "house", inline: true })), " ", t.mapDraw.instructions.parts.obstruction, " ", h("button", { key: 'cfc542a10d4c523c74628501e71b1a149a456bba', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors", onClick: () => this.handleToolSelect(obstructionTool) }, h("icon-selector", { key: '730c7ba279c261a07072065089e6e5a796dd65ce', name: "octagon-minus", inline: true })), " ", t.mapDraw.instructions.parts.delete, " ", h("button", { key: '4a0c1f35dd229d5d1f73706c946d875fdb19398c', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors", onClick: () => this.handleToolSelect(deleteTool) }, h("icon-selector", { key: '6cb8a652dcf655638d0b9383bce5e3bae04157ce', name: "eraser", inline: true })), " ", t.mapDraw.instructions.parts.move, " ", h("button", { key: 'ecbfa21a128a9469aceb11fa45bc3b2d29bf19d0', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors", onClick: () => this.handleToolSelect(moveTool) }, h("icon-selector", { key: 'fa25bf829d6baf05d6e850264722b22121b95e57', name: "move", inline: true })), " ", t.mapDraw.instructions.parts.end)), h("div", { key: 'c031d5061259dfd7b9440a090c7b765e17996069', class: "w-full flex flex-row justify-between items-center" }, !state.isMobile && (this.showInstructions
             ? (h("button", { class: "px-4 py-2 rounded-4xl hover:bg-gray-300 transition-colors duration-200 bg-white p-4", onClick: () => this.showInstructions = false }, t.mapDraw.instructions.hide))
-            : (h("button", { class: "px-4 py-2 rounded-4xl hover:bg-gray-300 transition-colors duration-200 bg-white p-4", onClick: () => this.showInstructions = true }, t.mapDraw.instructions.show))), h("button", { key: '0c6706ca25dee7f3a7c0c7f375a7c43216f4e5dc', class: "flex items-center gap-2 bg-white p-2 rounded-4xl hover:bg-gray-300", onClick: this.handleSettingsClick }, h("settings-icon", { key: 'a0c2d9d7c75444a497fd79e627efa80878b77b76' }))), h("div", { key: 'b4299108e6cf2b3c44781108204061ff1f868b17', class: "w-full" }, !state.isMobile && (h("tool-box", { key: '25958772c5bcad715eed7e61e9fcf8ba834085e4', currentTool: this.currentTool, onToolSelect: (tool) => this.handleToolSelect(tool) }))), this.loadingState === "empty" && (h("div", { key: '73298d935a0d154587f44aefa01e535b4724965f', class: "w-full" }, h("p", { key: '355a0d78e9429be46867be7918ebee5bb988d86b', class: "text-white text-center flex items-center justify-center rounded-4xl p-4 w-full", style: {
+            : (h("button", { class: "px-4 py-2 rounded-4xl hover:bg-gray-300 transition-colors duration-200 bg-white p-4", onClick: () => this.showInstructions = true }, t.mapDraw.instructions.show))), h("button", { key: 'aedbf225990bf5642d649b6ef408c06bb1095810', class: "flex items-center gap-2 bg-white p-2 rounded-4xl hover:bg-gray-300", onClick: this.handleSettingsClick }, h("settings-icon", { key: '48dff61fa919464eaaa85bae2bbfc14e77ad60d7' }))), h("div", { key: 'c988c8626c5264388b5b3c6f594814d7d8094e12', class: "w-full" }, !state.isMobile && (h("tool-box", { key: '73025cef91d5e6ce71d248fa8e9bedff4708ca78', currentTool: this.currentTool, onToolSelect: (tool) => this.handleToolSelect(tool), undoCallback: () => this.undo() }))), this.loadingState === "empty" && (h("div", { key: '1e6fced276e02c6cf0485615a03d9e2a69337cb3', class: "w-full" }, h("p", { key: 'af2f61ae5ed321ff78e9bb0071d350e892d5347e', class: "text-white text-center flex items-center justify-center rounded-4xl p-4 w-full", style: {
                 backgroundColor: "rgba(0, 0, 0, 0.5)",
             } }, t.mapDraw.noAddressSelected))), (state.latitude && state.longitude &&
-            this.loadingState === "loading") && (h("div", { key: '63ef7715a479e33e10f32e4ef73512e742feae52', class: "flex items-center justify-center w-full bg-opacity-75 z-20 pt-7 rounded-4xl" }, h("div", { key: '09e523207603a59802393725446693ab9dfb0eec', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-[#271200]" }))), h("div", { key: '1ba6f36469c629c4a735eb778a525e519b868dcc', class: "flex items-start justify-center h-full w-full bg-[#f3ebda] rounded-4xl" }, h("div", { key: '78a383993d84bd7a5a804a9b8aed982bca3593db', class: "relative h-full flex items-center justify-center w-full rounded-4xl bg-[#271200]", style: {
+            this.loadingState === "loading") && (h("div", { key: '49a12e888f221aed7121703431c7cd52e92032bf', class: "flex items-center justify-center w-full bg-opacity-75 z-20 pt-7 rounded-4xl" }, h("div", { key: 'b56761fb67070775f30cfc297eb1de0eb85d5ca3', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-[#271200]" }))), h("div", { key: 'a74ff52cd50960865311fa2e0d9424c269cfc773', class: "flex items-start justify-center h-full w-full bg-[#f3ebda] rounded-4xl" }, h("div", { key: '809984994b4e195419ceff03938cfd7985a59725', class: "relative h-full flex items-center justify-center w-full rounded-4xl bg-[#271200]", style: {
                 aspectRatio: this.rgbTiff
                     ? `${this.rgbTiff.width}/${this.rgbTiff.height}`
                     : "1/1",
-            } }, h("canvas", { key: '9f73b8eacc53d97584d1a1f2ad75cce42f94d883', 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: 'b866ab03c36c2bf9baf1f21a65149bae7effc2b4', 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: 'd817b13ad847248e5cccbe4a572db0d38115f40d', ref: (el) => this.polygonCanvas = el, class: "absolute top-0 left-0 w-full h-full rounded-4xl", style: {
+            } }), h("canvas", { key: '5d549d4f336085f1b5f3f71a0c9a6193356f624e', ref: (el) => this.polygonCanvas = el, class: "absolute top-0 left-0 w-full h-full rounded-4xl", style: {
                 cursor: this.currentTool.cursor,
-            } }), currentPolygon?.details && (h("button", { key: 'e1ac09242d33d5ff1df6442682c812734aec3ed6', class: "absolute bottom-4 right-4 px-4 py-2 bg-[#f3ebda] rounded-4xl hover:bg-[#ffffff] text-[#271200] transition-colors duration-200 z-10 text-xs", onClick: () => this.calculateSolarPanels() }, t.mapDraw.calculateSolarPanels)))), !state.isMobile && (h("div", { key: '08f69bf2844c1bced2dc1cc17c38a6aeccd4b8b7', class: "flex gap-4 flex-row justify-center items-center w-full" }, h("div", { key: 'e587229364e9644a764ebf57a22c73a8fd139054', class: "w-full bg-[#f3ebda] rounded-4xl p-4" }, h("h3", { key: '0606f98d16973c8dbf75ad59030de9716c757dbc', class: "text-lg font-semibold mb-4 text-center" }, t.mapDraw.information), currentPolygon?.details
-            ? (h("div", { class: "space-y-4" }, h("div", null, h("div", { class: "grid grid-cols-2 gap-2" }, h("div", null, h("h4", { class: "text-sm font-medium text-gray-600" }, t.mapDraw.area), h("p", { class: "text-lg" }, currentPolygon.details
-                ?.area
-                .toFixed(2), " m\u00B2")), h("div", null, h("div", null, h("h4", { class: "text-sm font-medium text-gray-600" }, t.mapDraw.panels), h("p", { class: "text-lg" }, this
-                .roofPolygonsSolarPanels[currentPolygon
-                ._id]?.positionedPanels
-                ?.length ?? 0))))), h("div", null, h("h4", { class: "text-sm font-medium text-gray-600" }, t.mapDraw.azimuth), h("div", { class: "flex gap-2 flex-row justify-start bg-white rounded-4xl p-2" }, h("input", { class: "text-lg w-full", onKeyDown: (e) => {
-                    if (e.key === "Enter") {
-                        this.handleAzimuthChange(e);
-                        e.target
-                            .blur();
-                    }
-                }, value: currentPolygon
-                    .details
-                    ?.azimuth }), "(", azimuthToCardinal(currentPolygon.details
-                ?.azimuth), ")"), h("input", { type: "range", min: "0", max: "360", class: "w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white", value: currentPolygon
-                    .details?.azimuth, onInput: (e) => {
-                    const target = e
-                        .target;
-                    const azimuth = parseFloat(target.value);
-                    currentPolygon.details
-                        .azimuth = azimuth;
-                    if (currentPolygon
-                        .type ===
-                        "roof" &&
-                        this.roofPolygonsSolarPanels[currentPolygon
-                            ._id]) {
-                        this.calculateSolarPanels();
-                    }
-                } })), h("div", null, h("h4", { class: "text-sm font-medium text-gray-600 pl-2" }, t.mapDraw.pitch), h("div", { class: "flex gap-2 flex-row justify-start bg-white rounded-4xl p-2" }, h("input", { class: "text-lg w-full", onKeyDown: (e) => {
-                    if (e.key === "Enter") {
-                        this.handlePitchChange(e);
-                        e.target
-                            .blur();
-                    }
-                }, value: currentPolygon
-                    .details
-                    ?.pitch }), "\u00B0"), h("input", { type: "range", min: "0", max: "90", class: "w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white", value: currentPolygon
-                    .details?.pitch, onInput: (e) => {
-                    const target = e
-                        .target;
-                    const pitch = parseFloat(target.value);
-                    currentPolygon.details
-                        .pitch = pitch;
-                    if (currentPolygon
-                        .type ===
-                        "roof" &&
-                        this.roofPolygonsSolarPanels[currentPolygon
-                            ._id]) {
-                        this.calculateSolarPanels();
-                    }
-                } }))))
-            : (h("p", { class: "text-gray-500 text-center" }, t.mapDraw.noPolygonSelected))))), h("div", { key: '1155d23559182bc9571bdeeba276896dae44d8e6', class: "w-full" }, h("solar-system-form", { key: 'dd918fdc47abf838cbb1d12932ec837bf357515f', systemConfigs: this.roofPolygonsSolarPanels, roofPolygons: this.roofPolygons, obstructionPolygons: this.obstructionPolygons })), this.showSettings && (h("settings-modal", { key: 'cedf9b3c329cf19870631da50950254de778977d', settings: state.settings, onClose: this.handleSettingsClose, onSave: this.handleSettingsSave }))));
+            } }))), currentPolygon?.closed && (h("div", { key: '34f6ccc30d1cb84cd131bb5fd5e5822952fbdc4b', class: "w-full" }, h("polygon-buttons", { key: 'a55d395407a9696c52fbbc9b1961019b84750666', currentTool: this.currentTool.name, calculateSolarPanels: () => this.calculateSolarPanels(), selectEdgeTool: () => this.handleToolSelect(markRoofEdgeTool) }))), !state.isMobile && (h("div", { key: 'b140b9a19d220424ed66723026b8d1253869ffaa', class: "w-full" }, h("polygon-information", { key: '9d241320683fd9f68454ebdab4fe099b4f7db115', currentPolygon: currentPolygon, positionedPanels: currentPolygon
+                ? this
+                    .roofPolygonsSolarPanels[currentPolygon._id]
+                    ?.positionedPanels
+                : undefined, handleAzimuthChange: (event) => this.handleAzimuthChange(event), handlePitchChange: (event) => this.handlePitchChange(event), calculateSolarPanels: () => this.calculateSolarPanels() }))), h("div", { key: 'd76fd150e00745e069bab4f03c3f06b25260d9f5', class: "w-full" }, h("solar-system-form", { key: 'b8b92e44de52ab612da319bab6e1dc77df9d8f56', systemConfigs: this.roofPolygonsSolarPanels, roofPolygons: this.roofPolygons, obstructionPolygons: this.obstructionPolygons })), this.showSettings && (h("settings-modal", { key: 'bc6c1c9ed2da06e741e386a0eb2c51e19365bbec', settings: state.settings, onClose: this.handleSettingsClose, onSave: this.handleSettingsSave }))));
     }
     static get watchers() { return {
         "rgbTiff": ["drawMap"],