npm - blue-chestnut-solar-expert - Versions diffs - 0.0.20 → 0.0.21 - Mend

blue-chestnut-solar-expert 0.0.20 → 0.0.21

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 (74) hide show

package/dist/stencil-library/p-1e2ddc82.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["outputCss","EraserIcon","inline","size","render","h","key","xmlns","width","this","height","viewBox","fill","stroke","class","d","HouseIcon","Icon","name","renderRGB","rgb","mask","canvas","document","createElement","dw","dh","ctx","getContext","img","getImageData","y","x","rgbIdx","Math","floor","imgIdx","factor","data","round","rasters","putImageData","renderSolarPanel","solarPanel","panelWidth","panelHeight","azimuthAngle","pitchAngle","pixelPosition","cos","PI","horizontal","save","translate","rotate","fillStyle","fillRect","strokeStyle","lineWidth","strokeRect","restore","renderCombinedWithZoom","zoom","rgbCanvas","undefined","imgData","zoomedWidth","zoomedHeight","startX","startY","zoomedImgData","ImageData","i","zoomedX","zoomedY","zoomedI","DOTTED_LINE_COLOR","ROW_SPACING","COLUMN_SPACING","BORDER_INSET","DEFAULT_SUNNINESS","HEAT_PUMP_CONSUMPTION","CONSUMPTION_PROFILES","mostly_at_home","mostly_away","projectPointPerpendicularToLine","lastPoint","secondLastPoint","dx","dy","perpDx","perpDy","perpLength","sqrt","normalizedPerpDx","normalizedPerpDy","vectorToMouse","projectionLength","drawPolygon","polygonCtx","polygonCanvas","polygon","shiftKeyPressed","mousePoint","strokeColor","fillColor","highlightedEdge","highlightColor","beginPath","points","forEach","point","index","moveTo","lineTo","closed","length","pointA","pointB","projectedPoint","drawPerpendicularDottedLine","startPoint","endPoint","drawCircle","radius","distance","pow","arc","dashPattern","setLineDash","isPointInPolygon","num_vertices","inside","p1","p2","min","max","x_intersection","polygonKeyboardCombinations","description","moveTool","ariaLabel","icon","cursor","keyboardShortcut","explanation","roofTool","keyboardCombinations","obstructionTool","deleteTool","markRoofEdgeTool","undoTool","tools","DEFAULT_SOLAR_EXPERT_CONFIG","openRoofColor","closedRoofColor","openObstructionColor","closedObstructionColor","roofPolygonFillColor","obstructionPolygonFillColor","roofPolygonHoverFillColor","obstructionPolygonHoverFillColor","roofPolygonSelectedFillColor","obstructionPolygonSelectedFillColor","DEFAULT_SOLAR_PANEL_TYPE","widthMeters","heightMeters","kWattPeak","efficiency","price","getFillColor","selectedPolygon","hoveredPolygon","_id","config","isHovered","type","isSelected","byteToHex","push","toString","slice","unsafeStringify","arr","offset","toLowerCase","getRandomValues","rnds8","Uint8Array","rng","crypto","bind","Error","randomUUID","native","v4","options","buf","rnds","random","calculatePolygonArea","area","j","abs","azimuthToCardinal","azimuth","latLngToPixel","bounds","latLng","latToPixel","lat","south","north","lngToPixel","lng","west","east","longitude","latitude","getPixelInMeters","rgbTiff","latDiff","pixelHeight","pixelInMeters","projectPoint","angle","sin","projectPolygon","map","details","offsetPolygon","offsetX","offsetY","minX","minY","maxX","maxY","newPoints","equalsPoints","point1","point2","intersects","line1","line2","start","end","p3","p4","d1","d2","d3","d4","getBestFittingRoofSegment","roof","roofSegmentStats","polygonBounds","p","bestSegment","bestIoU","segment","sw","boundingBox","ne","segmentBounds","interLeft","interRight","interTop","interBottom","interWidth","interHeight","intersectionArea","polygonArea","segmentArea","unionArea","iou","generateGrid","minMax","anker","rowSpacing","columnSpacing","grid","widthCount","ceil","heightCount","widthOffset","heightOffset","row","positionedSolarPanel","panel","getSolarPanelLines","lines","solarPanelInObstacle","obstacle","nextPoint","border","line","solarPanelInPolygon","isPanelObstructed","obstacles","getSolarPanelsInPolygon","solarPanels","newRow","isObstructed","getOptimalSolarPosition","horizontalSolarPanel","verticalSolarPanel","numberOfPanels","solarPanelsInPolygon","numberOfPanelsInPolygon","reduce","acc","projectObstacles","inset","result","offsetObstacle","projectedObstacle","insetObstacle","insetPolygon","isClockwise","sum","curr","next","isClockwisePolygon","insetPoints","prev","v1","v2","perp1","perp2","length1","length2","bisector","bisectorLength","insetPoint","getOptimalSolarPositionFully","insetRoof","projectedOffset","projectedObstacles","horizontalSolarPanels","unprojectedPanels","flat","unprojectedPanel","offsetPosition","en","settings","language","borderInset","mapSelector","accept","chooseOnMap","solarExpert","searchPlaceholder","solarSystemForm","title","systemInformation","panelPeakPower","totalSystemPeakPower","electricityPrice","compensationRate","autonomy","costSavings","householdConsumptionTitle","consumptionProfileTitle","electricityCostsTitle","compensationRateTitle","resultsTitle","savingsDisclaimer","annualConsumption","email","nameError","emailError","consumptionProfiles","mostlyAtHome","mostlyAway","chart","consumption","production","consumptionProfile","relativeConsumption","hourOfDay","validEmailError","requestOffer","requestOfferButton","year","additionalComponents","heatPump","electricCar","battery","chargingTime","chargingTimeDay","chargingTimeNight","annualPriceIncrease","costSavings25Years","mapDraw","instructions","show","hide","parts","obstruction","delete","move","noPolygonSelected","noAddressSelected","information","calculateSolarPanels","markRoofEdge","panels","pitch","undo","de","es","languageStrings","getLanguageStrings","lang","defaultLang","langStrings","mergedStrings","JSON","parse","stringify","deepMerge","target","source","Object","appendToMap","propName","value","items","get","set","includes","debounce","fn","ms","timeoutId","args","clearTimeout","setTimeout","isConnected","maybeElement","cleanupElements","keys","filter","stencilSubscription","getRenderingRef","elmsToUpdate","Map","dispose","clear","elm","elements","forceUpdate","reset","elms","unwrap","val","createObservableMap","defaultState","shouldUpdate","a","b","unwrappedState","states","entries","handlers","cb","oldValue","state","Proxy","_","ownKeys","Array","from","getOwnPropertyDescriptor","enumerable","configurable","has","on","eventName","callback","removeFromArray","onChange","unSet","newValue","unReset","use","subscriptions","unsubs","subscription","unsub","array","item","indexOf","createStore","radiusMeters","heatPumpM2Consumption","settingsVersion","isMobile","MapDraw","apiKey","showInstructions","showSettings","loadingState","draggedPointIndex","hoveredPointIndex","altKeyPressed","currentTool","roofPolygons","roofPolygonsSolarPanels","obstructionPolygons","buildingInsights","canvasElement","getCurrentPolygon","componentWillLoad","getBuildingImages","getBuildingInsights","componentDidLoad","requestAnimationFrame","rect","getBoundingClientRect","drawMap","sizeCanvas","sameLocation","center","clearRect","fetchSolarData","alert","maxPanels","solarPotential","maxArrayPanelsCount","approximatedPanels","positionedPanels","__","rotation","sunniness","buildingStats","sunshineQuantiles","convertToCanvasCoordinates","event","siteX","clientX","left","siteY","clientY","top","right","bottom","handleMouseMove","currentPolygon","redraw","distances","distanceA","distanceB","edgeLength","dist","edge","closestEdge","sort","newHoveredPointIndex","findIndex","newHoveredPolygon","values","metersInPixels","drawPolygons","convertedSolarPanel","deletePolygon","handleKeyDown","HTMLInputElement","shiftKey","altKey","pop","pressedKey","tool","find","t","handleKeyUp","handleMouseDown","contains","atan2","handleAzimuthChange","pointIndex","newPolygon","uuidv4","firstPoint","closePolygon","handleMouseUp","bestMatch","azimuthDegrees","pitchDegrees","scrollToCanvas","assignedRoofStats","stats","handlePitchChange","parseFloat","handleToolSelect","el","querySelector","scrollIntoView","behavior","handleSettingsClick","handleSettingsClose","handleSettingsSave","detail","id","onClick","onToolSelect","undoCallback","style","backgroundColor","aspectRatio","ref","selectEdgeTool","systemConfigs","onClose","onSave","MapSelector","isLoaded","autocomplete","marker","circle","inputElement","mapElement","loadGoogleMapsScript","loader","Loader","libraries","places","maps","Promise","all","importLibrary","initializeAutocomplete","initializeMap","error","console","Autocomplete","addListener","place","getPlace","geometry","location","setCenter","setZoom","mapTypeControl","streetViewControl","mapTypeId","mapId","tilt","e","updateMapLocation","google","Circle","strokeOpacity","strokeWeight","fillOpacity","handleRadiusChange","setRadius","handleAcceptPosition","log","placeholder","onInput","MoveIcon","OctagonMinusIcon","PolygonButtons","PolygonInformation","toFixed","onKeyDown","blur","SearchIcon","cx","cy","r","SettingsIcon","SettingsModal","tempSettings","close","handleClose","confirm","emit","handleSave","handleInputChange","x1","y1","x2","y2","selected","SolarExpert","Env","GOOGLE_MAPS_API_KEY","showMapSelector","iosPolyfill","slider","pageX","parseInt","getAttribute","segmentArr","segCopy","ind","String","test","navigator","userAgent","window","innerWidth","scrollToMapDraw","sliders","querySelectorAll","addEventListener","passive","solarSystemFormElement","mapDrawElement","handleChooseOnMap","Fragment","SOLAR_RADIATION","getSolarRadiation","discountFactor","DEFAULT_GENERAL_SIMULATION_CONFIG","simulationYears","generateElectricCarChargingHours","hours","simulateDay","dailyConsumption","batteryCharge","soldEnergy","energyUsageOfProduction","hour","energyDifference","simulate","generalConfig","general","householdConsumption","norm","additionalConsumption","m2","electricCarConsumption","electricCarNorm","electricCarChargingHours","chargingHours","dailyCarUsage","averageKilometersPerDay","consumptionkWhPer100km","batteryKWh","systemSize","solarSystem","panelType","summerProduction","solarRadiation","summerFactor","winterProduction","winterFactor","summerConsumptionWholeDay","averageConsumption","summerConsumptionFactor","summerConsumptionDaily","c","winterConsumptionWholeDay","winterConsumptionFactor","winterConsumptionDaily","summerDay","winterDay","savedCostsByYear","ownConsumption","energyPrice","purchase","savedCostsThisYear","increase","compensationPerDay","sell","byYearSavedCosts","SolarSystemForm","electricCarChargingTime","compensation25Years","savedCosts25Years","updateSystemConfigs","recalculate","simulationConfig","validateForm","isValid","trim","emailRegex","handleRequestOffer","systemConfig","readOnly","readonly","step","checked","htmlFor","disabled","color","ToolBox","undoToolStrings","toolStrings","UndoIcon"],"sources":["src/output.css?tag=eraser-icon","src/components/icons/eraser.tsx","src/output.css?tag=house-icon","src/components/icons/house.tsx","src/output.css?tag=icon-selector","src/components/icons/icon.tsx","src/utils/visualize.ts","src/constants.ts","src/utils/render/projection.ts","src/utils/render/polygon.ts","src/utils/render/tools.ts","src/config.ts","src/utils/render/color.ts","../../node_modules/uuid/dist/esm-browser/stringify.js","../../node_modules/uuid/dist/esm-browser/rng.js","../../node_modules/uuid/dist/esm-browser/native.js","../../node_modules/uuid/dist/esm-browser/v4.js","src/utils/utils.ts","src/utils/geometry/fitting.ts","src/utils/geometry/gridMatch.ts","src/utils/lang/english.ts","src/utils/lang/german.ts","src/utils/lang/spanish.ts","src/utils/lang/general.ts","../../node_modules/@stencil/store/dist/index.js","src/store.ts","src/output.css?tag=map-draw","src/components/map-draw/map-draw.tsx","src/output.css?tag=map-selector&encapsulation=shadow","src/components/map-draw/map-selector.tsx","src/output.css?tag=move-icon","src/components/icons/move.tsx","src/output.css?tag=octagon-minus-icon","src/components/icons/octagonMinus.tsx","src/output.css?tag=polygon-buttons","src/components/map-draw/polygon-buttons.tsx","src/output.css?tag=polygon-information&encapsulation=shadow","src/components/map-draw/polygon-information.tsx","src/output.css?tag=search-icon","src/components/icons/search.tsx","src/output.css?tag=settings-icon","src/components/icons/settings.tsx","src/output.css?tag=settings-modal","src/components/settings/settings.tsx","src/output.css?tag=solar-expert","src/components/solar-expert/solar-expert.tsx","src/utils/simulation/solarCurves.ts","src/utils/simulation/types.ts","src/utils/simulation/simulation.ts","src/output.css?tag=solar-system-form","src/components/solar-system-form/solar-system-form.tsx","src/output.css?tag=tool-box","src/components/map-draw/tool-box.tsx","src/output.css?tag=undo-icon","src/components/icons/undo.tsx"],"sourcesContent":["/*! 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","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"eraser-icon\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class EraserIcon {\r\n @Prop()\r\n inline: boolean = false;\r\n @Prop()\r\n size: number = 20;\r\n\r\n render() {\r\n return (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width={this.size}\r\n height={this.size}\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class={`lucide lucide-eraser-icon lucide-eraser ${\r\n this.inline ? \"inline-block\" : \"\"\r\n }`}\r\n >\r\n <path d=\"m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21\" />\r\n <path d=\"M22 21H7\" />\r\n <path d=\"m5 11 9 9\" />\r\n </svg>\r\n );\r\n }\r\n}\r\n","/*! 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","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"house-icon\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class HouseIcon {\r\n @Prop()\r\n inline: boolean = false;\r\n @Prop()\r\n size: number = 20;\r\n\r\n render() {\r\n return (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width={this.size}\r\n height={this.size}\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class={`lucide lucide-house-icon lucide-house ${\r\n this.inline ? \"inline-block\" : \"\"\r\n }`}\r\n >\r\n <path d=\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\" />\r\n <path d=\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\" />\r\n </svg>\r\n );\r\n }\r\n}\r\n","/*! 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","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"icon-selector\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class Icon {\r\n @Prop()\r\n name: string;\r\n @Prop()\r\n inline: boolean = false;\r\n @Prop()\r\n size: number = 20;\r\n\r\n render() {\r\n if (this.name === \"search\") {\r\n return <search-icon inline={this.inline} size={this.size} />;\r\n }\r\n if (this.name === \"house\") {\r\n return <house-icon inline={this.inline} size={this.size} />;\r\n }\r\n if (this.name === \"move\") {\r\n return <move-icon inline={this.inline} size={this.size} />;\r\n }\r\n if (this.name === \"octagon-minus\") {\r\n return <octagon-minus-icon inline={this.inline} size={this.size} />;\r\n }\r\n if (this.name === \"eraser\") {\r\n return <eraser-icon inline={this.inline} size={this.size} />;\r\n }\r\n if (this.name === \"settings\") {\r\n return <settings-icon inline={this.inline} size={this.size} />;\r\n }\r\n if (this.name === \"undo\") {\r\n return <undo-icon inline={this.inline} size={this.size} />;\r\n }\r\n return (\r\n <div class={`${this.inline ? \"inline-block\" : \"\"}`}>\r\n Icon {this.name}\r\n </div>\r\n );\r\n }\r\n}\r\n","/*\r\n Copyright 2023 Google LLC\r\n\r\n Licensed under the Apache License, Version 2.0 (the \"License\");\r\n you may not use this file except in compliance with the License.\r\n You may obtain a copy of the License at\r\n\r\n https://www.apache.org/licenses/LICENSE-2.0\r\n\r\n Unless required by applicable law or agreed to in writing, software\r\n distributed under the License is distributed on an \"AS IS\" BASIS,\r\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n See the License for the specific language governing permissions and\r\n limitations under the License.\r\n */\r\n\r\n import { PositionedSolarPanel } from './geometry/fitting';\r\nimport type { Bounds, GeoTiff, InternalSolarPanelConfig } from './solar';\r\n\r\n // [START visualize_render_rgb]\r\n /**\r\n * Renders an RGB GeoTiff image into an HTML canvas.\r\n *\r\n * The GeoTiff image must include 3 rasters (bands) which\r\n * correspond to [Red, Green, Blue] in that order.\r\n *\r\n * @param {GeoTiff} rgb GeoTiff with RGB values of the image.\r\n * @param {GeoTiff} mask Optional mask for transparency, defaults to opaque.\r\n * @return {HTMLCanvasElement} Canvas element with the rendered image.\r\n */\r\n export function renderRGB(rgb: GeoTiff, mask?: GeoTiff, canvas?: HTMLCanvasElement | null): HTMLCanvasElement {\r\n // Create an HTML canvas to draw the image.\r\n // https://www.w3schools.com/tags/canvas_createimagedata.asp\r\n if (!canvas) {\r\n canvas = document.createElement('canvas');\r\n }\r\n \r\n // Set the canvas size to the mask size if it's available,\r\n // otherwise set it to the RGB data layer size.\r\n canvas.width = mask ? mask.width : rgb.width;\r\n canvas.height = mask ? mask.height : rgb.height;\r\n \r\n // Since the mask size can be different than the RGB data layer size,\r\n // we calculate the \"delta\" between the RGB layer size and the canvas/mask\r\n // size. For example, if the RGB layer size is the same as the canvas size,\r\n // the delta is 1. If the RGB layer size is smaller than the canvas size,\r\n // the delta would be greater than 1.\r\n // This is used to translate the index from the canvas to the RGB layer.\r\n const dw = rgb.width / canvas.width;\r\n const dh = rgb.height / canvas.height;\r\n \r\n // Get the canvas image data buffer.\r\n const ctx = canvas.getContext('2d')!;\r\n const img = ctx.getImageData(0, 0, canvas.width, canvas.height);\r\n \r\n // Fill in every pixel in the canvas with the corresponding RGB layer value.\r\n // Since Javascript doesn't support multidimensional arrays or tensors,\r\n // everything is stored in flat arrays and we have to keep track of the\r\n // indices for each row and column ourselves.\r\n for (let y = 0; y < canvas.height; y++) {\r\n for (let x = 0; x < canvas.width; x++) {\r\n // RGB index keeps track of the RGB layer position.\r\n // This is multiplied by the deltas since it might be a different\r\n // size than the image size.\r\n const rgbIdx = Math.floor(y * dh) * rgb.width + Math.floor(x * dw);\r\n // Mask index keeps track of the mask layer position.\r\n const maskIdx = y * canvas.width + x;\r\n \r\n // Image index keeps track of the canvas image position.\r\n // HTML canvas expects a flat array with consecutive RGBA values.\r\n // Each value in the image buffer must be between 0 and 255.\r\n // The Alpha value is the transparency of that pixel,\r\n // if a mask was not provided, we default to 255 which is opaque.\r\n const imgIdx = y * canvas.width * 4 + x * 4;\r\n const factor = 0.8;\r\n img.data[imgIdx + 0] = Math.round(rgb.rasters[0][rgbIdx] * factor); // Red\r\n img.data[imgIdx + 1] = Math.round(rgb.rasters[1][rgbIdx] * factor); // Green\r\n img.data[imgIdx + 2] = Math.round(rgb.rasters[2][rgbIdx] * factor); // Blue\r\n img.data[imgIdx + 3] = mask // Alpha\r\n ? mask.rasters[0][maskIdx] * 255\r\n : 255;\r\n }\r\n }\r\n \r\n // Draw the image data buffer into the canvas context.\r\n ctx.putImageData(img, 0, 0);\r\n return canvas;\r\n }\r\n // [END visualize_render_rgb]\r\n \r\n // [START visualize_render_palette]\r\n /**\r\n * Renders a single value GeoTiff image into an HTML canvas.\r\n *\r\n * The GeoTiff image must include 1 raster (band) which contains\r\n * the values we want to display.\r\n *\r\n * @param {GeoTiff} data GeoTiff with the values of interest.\r\n * @param {GeoTiff} mask Optional mask for transparency, defaults to opaque.\r\n * @param {string[]} colors Hex color palette, defaults to ['000000', 'ffffff'].\r\n * @param {number} min Minimum value of the data range, defaults to 0.\r\n * @param {number} max Maximum value of the data range, defaults to 1.\r\n * @param {number} index Raster index for the data, defaults to 0.\r\n * @return {HTMLCanvasElement} Canvas element with the rendered image.\r\n */\r\n export function renderPalette({\r\n data,\r\n mask,\r\n colors,\r\n min,\r\n max,\r\n index,\r\n canvas,\r\n }: {\r\n data: GeoTiff;\r\n mask?: GeoTiff;\r\n colors?: string[];\r\n min?: number;\r\n max?: number;\r\n index?: number;\r\n canvas?: HTMLCanvasElement | null\t;\r\n }): HTMLCanvasElement {\r\n // First create a palette from a list of hex colors.\r\n const palette = createPalette(colors ?? ['000000', 'ffffff']);\r\n // Normalize each value of our raster/band of interest into indices,\r\n // such that they always map into a value within the palette.\r\n const indices = data.rasters[index ?? 0]\r\n .map((x) => normalize(x, max ?? 1, min ?? 0))\r\n .map((x) => Math.round(x * (palette.length - 1)));\r\n return renderRGB(\r\n {\r\n ...data,\r\n // Map each index into the corresponding RGB values.\r\n rasters: [\r\n indices.map((i: number) => palette[i].r),\r\n indices.map((i: number) => palette[i].g),\r\n indices.map((i: number) => palette[i].b),\r\n ],\r\n },\r\n mask,\r\n canvas,\r\n );\r\n }\r\n \r\n /**\r\n * Creates an {r, g, b} color palette from a hex list of colors.\r\n *\r\n * Each {r, g, b} value is a number between 0 and 255.\r\n * The created palette is always of size 256, regardless of the number of\r\n * hex colors passed in. Inbetween values are interpolated.\r\n *\r\n * @param {string[]} hexColors List of hex colors for the palette.\r\n * @return {{r, g, b}[]} RGB values for the color palette.\r\n */\r\n export function createPalette(hexColors: string[]): { r: number; g: number; b: number }[] {\r\n // Map each hex color into an RGB value.\r\n const rgb = hexColors.map(colorToRGB);\r\n // Create a palette with 256 colors derived from our rgb colors.\r\n const size = 256;\r\n const step = (rgb.length - 1) / (size - 1);\r\n return Array(size)\r\n .fill(0)\r\n .map((_, i) => {\r\n // Get the lower and upper indices for each color.\r\n const index = i * step;\r\n const lower = Math.floor(index);\r\n const upper = Math.ceil(index);\r\n // Interpolate between the colors to get the shades.\r\n return {\r\n r: lerp(rgb[lower].r, rgb[upper].r, index - lower),\r\n g: lerp(rgb[lower].g, rgb[upper].g, index - lower),\r\n b: lerp(rgb[lower].b, rgb[upper].b, index - lower),\r\n };\r\n });\r\n }\r\n \r\n /**\r\n * Convert a hex color into an {r, g, b} color.\r\n *\r\n * @param {string} color Hex color like 0099FF or #0099FF.\r\n * @return {{r, g, b}} RGB values for that color.\r\n */\r\n export function colorToRGB(color: string): { r: number; g: number; b: number } {\r\n const hex = color.startsWith('#') ? color.slice(1) : color;\r\n return {\r\n r: parseInt(hex.substring(0, 2), 16),\r\n g: parseInt(hex.substring(2, 4), 16),\r\n b: parseInt(hex.substring(4, 6), 16),\r\n };\r\n }\r\n \r\n /**\r\n * Normalizes a number to a given data range.\r\n *\r\n * @param {number} x Value of interest.\r\n * @param {number} max Maximum value in data range, defaults to 1.\r\n * @param {number} min Minimum value in data range, defaults to 0.\r\n * @return {number} Normalized value.\r\n */\r\n export function normalize(x: number, max: number = 1, min: number = 0): number {\r\n const y = (x - min) / (max - min);\r\n return clamp(y, 0, 1);\r\n }\r\n \r\n /**\r\n * Calculates the linear interpolation for a value within a range.\r\n *\r\n * @param {number} x Lower value in the range, when `t` is 0.\r\n * @param {number} y Upper value in the range, when `t` is 1.\r\n * @param {number} t \"Time\" between 0 and 1.\r\n * @return {number} Inbetween value for that \"time\".\r\n */\r\n export function lerp(x: number, y: number, t: number): number {\r\n return x + t * (y - x);\r\n }\r\n \r\n /**\r\n * Clamps a value to always be within a range.\r\n *\r\n * @param {number} x Value to clamp.\r\n * @param {number} min Minimum value in the range.\r\n * @param {number} max Maximum value in the range.\r\n * @return {number} Clamped value.\r\n */\r\n export function clamp(x: number, min: number, max: number): number {\r\n return Math.min(Math.max(x, min), max);\r\n }\r\n // [END visualize_render_palette]\r\n \r\n export function rgbToColor({ r, g, b }: { r: number; g: number; b: number }): string {\r\n const f = (x: number) => {\r\n const hex = Math.round(x).toString(16);\r\n return hex.length == 1 ? `0${hex}` : hex;\r\n };\r\n return `#${f(r)}${f(g)}${f(b)}`;\r\n }\r\n\r\n export function renderAzimuth(azimuth: number, ctx: CanvasRenderingContext2D) {\r\n if (azimuth === undefined) {\r\n return;\r\n }\r\n ctx.save();\r\n ctx.moveTo(0, 0);\r\n ctx.rotate((azimuth - 90) * Math.PI / 180);\r\n ctx.translate(ctx.canvas.width-100, 100);\r\n \r\n // Set arrow style\r\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';\r\n ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';\r\n ctx.lineWidth = 2;\r\n\r\n ctx.moveTo(-50, 0);\r\n ctx.lineTo(50,0);\r\n ctx.lineTo(40,-10);\r\n ctx.moveTo(50,0);\r\n ctx.lineTo(40,10);\r\n ctx.stroke();\r\n\r\n ctx.moveTo(0, 0);\r\n ctx.beginPath();\r\n ctx.arc(0, 0, 50, 0, Math.PI * 2);\r\n ctx.stroke();\r\n\r\n // Arrow parameters\r\n // const arrowLength = 100;\r\n // const arrowHeadLength = 15;\r\n // const arrowHeadAngle = Math.PI / 6; // 30 degrees\r\n\r\n // // Convert azimuth to radians (subtract 90 degrees to align with standard compass)\r\n // const angle = (azimuth - 90) * Math.PI / 180;\r\n\r\n // // Calculate arrow end point\r\n // const endX = arrowLength * Math.cos(angle);\r\n // const endY = arrowLength * Math.sin(angle);\r\n\r\n // // Draw main arrow line\r\n // ctx.beginPath();\r\n // ctx.moveTo(0, 0);\r\n // ctx.lineTo(endX, endY);\r\n // ctx.stroke();\r\n\r\n // // Calculate arrowhead points\r\n // const arrowHeadAngle1 = angle + Math.PI - arrowHeadAngle;\r\n // const arrowHeadAngle2 = angle + Math.PI + arrowHeadAngle;\r\n\r\n // const arrowHead1X = endX + arrowHeadLength * Math.cos(arrowHeadAngle1);\r\n // const arrowHead1Y = endY + arrowHeadLength * Math.sin(arrowHeadAngle1);\r\n // const arrowHead2X = endX + arrowHeadLength * Math.cos(arrowHeadAngle2);\r\n // const arrowHead2Y = endY + arrowHeadLength * Math.sin(arrowHeadAngle2);\r\n\r\n // // Draw arrowhead\r\n // ctx.beginPath();\r\n // ctx.moveTo(endX, endY);\r\n // ctx.lineTo(arrowHead1X, arrowHead1Y);\r\n // ctx.lineTo(arrowHead2X, arrowHead2Y);\r\n // ctx.closePath();\r\n // ctx.fill();\r\n\r\n // ctx.translate(ctx.canvas.width/2, 50);\r\n\r\n ctx.restore();\r\n\r\n console.log(\"renderAzimuth\", azimuth);\r\n }\r\n\r\n export function renderSolarPanel(solarPanel: PositionedSolarPanel, ctx: CanvasRenderingContext2D, panelWidth: number, panelHeight: number, azimuthAngle: number, pitchAngle: number) {\r\n const { x, y } = solarPanel.pixelPosition;\r\n let width = panelWidth;\r\n let height = panelHeight * Math.cos(pitchAngle * Math.PI / 180);\r\n if (solarPanel.horizontal) {\r\n width = panelHeight;\r\n height = panelWidth * Math.cos(pitchAngle * Math.PI / 180);\r\n }\r\n\r\n // Save the current context state\r\n ctx.save();\r\n \r\n // Translate to the panel's center point\r\n ctx.translate(x, y);\r\n \r\n // Rotate by the azimuth angle (convert to radians)\r\n ctx.rotate((azimuthAngle * Math.PI) / 180);\r\n \r\n // Draw panel rectangle centered at origin (since we translated)\r\n ctx.fillStyle = 'rgba(0, 51, 204, 0.8)';\r\n ctx.fillRect(-width/2, -height/2, width, height);\r\n \r\n // Draw panel border\r\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';\r\n ctx.lineWidth = 1;\r\n ctx.strokeRect(-width/2, -height/2, width, height);\r\n \r\n // Restore the context state\r\n ctx.restore();\r\n}\r\n\r\n export function renderPanels({canvas, panelConfig, bounds, zoom, roofSegments}: \r\n {canvas: HTMLCanvasElement | null, panelConfig: InternalSolarPanelConfig, bounds: Bounds, zoom: number, roofSegments: Record<number, { pitchDegrees: number; azimuthDegrees: number }>}): HTMLCanvasElement {\r\n if (!canvas) {\r\n canvas = document.createElement('canvas');\r\n }\r\n \r\n const ctx = canvas.getContext(\"2d\")!;\r\n\r\n // Calculate pre zoomed dimensions the canvas is already zoomed\r\n const preZoomedWidth = Math.floor(canvas.width / zoom);\r\n const preZoomedHeight = Math.floor(canvas.height / zoom);\r\n const startX = Math.floor((preZoomedWidth - canvas.width) / 2);\r\n const startY = Math.floor((preZoomedHeight - canvas.height) / 2);\r\n\r\n // Calculate the scale factors to convert lat/lng to pixel coordinates\r\n const latToPixel = (lat: number) => {\r\n return preZoomedHeight * (1 - (lat - bounds.south) / (bounds.north - bounds.south)) - startY;\r\n };\r\n \r\n const lngToPixel = (lng: number) => {\r\n return preZoomedWidth * (lng - bounds.west) / (bounds.east - bounds.west) - startX;\r\n };\r\n \r\n // Draw each panel\r\n for (const panel of panelConfig.panels) {\r\n // Convert panel center coordinates to pixel coordinates\r\n const centerX = lngToPixel(panel.center.longitude);\r\n const centerY = latToPixel(panel.center.latitude);\r\n \r\n // Calculate panel dimensions (assuming standard panel size)\r\n const panelWidth = panel.orientation === 'LANDSCAPE' ? 19 : 10; // pixels\r\n const panelHeight = panel.orientation === 'LANDSCAPE' ? 10 : 19;\r\n \r\n // Get the roof segment's azimuth angle for this panel\r\n const roofSegment = roofSegments[panel.segmentIndex];\r\n const azimuthAngle = roofSegment ? roofSegment.azimuthDegrees : 0;\r\n \r\n // Save the current context state\r\n ctx.save();\r\n \r\n // Translate to the panel's center point\r\n ctx.translate(centerX, centerY);\r\n \r\n // Rotate by the azimuth angle (convert to radians)\r\n ctx.rotate((azimuthAngle * Math.PI) / 180);\r\n \r\n // Draw panel rectangle centered at origin (since we translated)\r\n ctx.fillStyle = 'rgba(115, 143, 255, 1)';\r\n ctx.fillRect(-panelWidth/2, -panelHeight/2, panelWidth, panelHeight);\r\n \r\n // Draw panel border\r\n ctx.strokeStyle = 'rgba(0, 0, 0, 0.8)';\r\n ctx.lineWidth = 1;\r\n ctx.strokeRect(-panelWidth/2, -panelHeight/2, panelWidth, panelHeight);\r\n \r\n // Restore the context state\r\n ctx.restore();\r\n }\r\n \r\n return canvas;\r\n }\r\n \r\n export function renderCombinedWithZoom({\r\n rgb,\r\n zoom = 1,\r\n canvas,\r\n}: {\r\n rgb: GeoTiff;\r\n zoom?: number;\r\n canvas?: HTMLCanvasElement | null;\r\n}): HTMLCanvasElement {\r\n // First render the RGB image\r\n const rgbCanvas = renderRGB(rgb, undefined, canvas);\r\n const ctx = rgbCanvas.getContext(\"2d\")!;\r\n const imgData = ctx.getImageData(0, 0, rgbCanvas.width, rgbCanvas.height);\r\n\r\n // Calculate the center portion to show based on zoom\r\n const width = rgbCanvas.width;\r\n const height = rgbCanvas.height;\r\n const zoomedWidth = Math.floor(width * zoom);\r\n const zoomedHeight = Math.floor(height * zoom);\r\n const startX = Math.floor((width - zoomedWidth) / 2);\r\n const startY = Math.floor((height - zoomedHeight) / 2);\r\n\r\n // Create a new image data for the zoomed portion\r\n const zoomedImgData = new ImageData(zoomedWidth, zoomedHeight);\r\n \r\n // Copy RGB data and apply palette where mask is non-zero\r\n for (let y = 0; y < height; y++) {\r\n for (let x = 0; x < width; x++) {\r\n const i = (y * width + x) * 4;\r\n \r\n if (x >= startX && x < startX + zoomedWidth && \r\n y >= startY && y < startY + zoomedHeight) {\r\n // Calculate position in zoomed image\r\n const zoomedX = x - startX;\r\n const zoomedY = y - startY;\r\n const zoomedI = (zoomedY * zoomedWidth + zoomedX) * 4;\r\n \r\n zoomedImgData.data[zoomedI] = imgData.data[i];\r\n zoomedImgData.data[zoomedI + 1] = imgData.data[i + 1];\r\n zoomedImgData.data[zoomedI + 2] = imgData.data[i + 2];\r\n zoomedImgData.data[zoomedI + 3] = 255; // Alpha channel\r\n }\r\n }\r\n }\r\n\r\n // Resize canvas to match zoomed dimensions\r\n rgbCanvas.width = zoomedWidth;\r\n rgbCanvas.height = zoomedHeight;\r\n \r\n // Put the zoomed image data back to the canvas\r\n ctx.putImageData(zoomedImgData, 0, 0);\r\n return rgbCanvas;\r\n}\r\n ","\r\nconst OPEN_POLYGON_COLOR = \"red\"; //\"#ffffff\";\r\nconst CLOSED_POLYGON_COLOR = \"#fcba03\";\r\nconst DOTTED_LINE_COLOR = \"rgba(0, 0, 0, 0.5)\";\r\n\r\nconst ROW_SPACING = 1;\r\nconst COLUMN_SPACING = 1;\r\n\r\nconst BORDER_INSET = 0;\r\nconst DEFAULT_SUNNINESS = 600;\r\n\r\nconst HEAT_PUMP_CONSUMPTION = 0.05; // kWh per m² per day\r\n\r\nconst SOLAR_RADIATION = [\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0, // 00:00 - 05:00 - 6\r\n 0,\r\n 0.1,\r\n 0.2, // 8\r\n 0.4, \r\n 0.8,\r\n 1, // 06:00 - 11:00 - 12\r\n 1,\r\n 1,\r\n 1,\r\n 0.7,\r\n 0.5,\r\n 0.3, // 12:00 - 17:00 - 18\r\n 0.16,\r\n 0.02,\r\n 0,\r\n 0,\r\n 0,\r\n 0, // 18:00 - 23:00 - 24\r\n];\r\nconst CONSUMPTION_PROFILES = {\r\n mostly_at_home: [\r\n 0.1,\r\n 0.1,\r\n 0.1,\r\n 0.1,\r\n 0.1,\r\n 0.15, // 00:00 - 05:00 - 6\r\n 0.23,\r\n 0.26,\r\n 0.16,\r\n 0.16,\r\n 0.15,\r\n 0.19, // 06:00 - 11:00 - 12\r\n 0.23,\r\n 0.24,\r\n 0.35,\r\n 0.28,\r\n 0.275,\r\n 0.8, // 12:00 - 17:00 - 18\r\n 0.78,\r\n 0.74,\r\n 0.75,\r\n 0.73,\r\n 0.26,\r\n 0.1, // 18:00 - 23:00 - 24\r\n ],\r\n mostly_away: [\r\n 0.1,\r\n 0.1,\r\n 0.1,\r\n 0.1,\r\n 0.1,\r\n 0.15, // 00:00 - 05:00 - 6\r\n 0.29,\r\n 0.32,\r\n 0.25,\r\n 0.15,\r\n 0.12,\r\n 0.14, // 06:00 - 11:00 - 12\r\n 0.15,\r\n 0.12,\r\n 0.16,\r\n 0.21,\r\n 0.285,\r\n 1, // 12:00 - 17:00 - 18\r\n 0.81,\r\n 0.77,\r\n 0.79,\r\n 0.73,\r\n 0.26,\r\n 0.1, // 18:00 - 23:00 - 24\r\n ],\r\n};\r\n\r\nexport { OPEN_POLYGON_COLOR, CLOSED_POLYGON_COLOR, DOTTED_LINE_COLOR, ROW_SPACING, COLUMN_SPACING, BORDER_INSET, DEFAULT_SUNNINESS, CONSUMPTION_PROFILES, SOLAR_RADIATION, HEAT_PUMP_CONSUMPTION };\r\n","import { Point } from \"../../types/shapes\";\r\n\r\nexport function projectPointPerpendicularToLine({\r\n x,\r\n y,\r\n lastPoint,\r\n secondLastPoint,\r\n}: {\r\n x: number;\r\n y: number;\r\n lastPoint: { x: number; y: number };\r\n secondLastPoint: { x: number; y: number };\r\n}): Point {\r\n\r\n // Calculate the direction vector of the last line\r\n const dx = lastPoint.x - secondLastPoint.x;\r\n const dy = lastPoint.y - secondLastPoint.y;\r\n\r\n // Calculate perpendicular vector (rotate 90 degrees)\r\n const perpDx = -dy;\r\n const perpDy = dx;\r\n\r\n // Normalize the perpendicular vector\r\n const perpLength = Math.sqrt(perpDx * perpDx + perpDy * perpDy);\r\n const normalizedPerpDx = perpDx / perpLength;\r\n const normalizedPerpDy = perpDy / perpLength;\r\n\r\n // Project the mouse point onto the perpendicular line\r\n const vectorToMouse = {\r\n x: x - lastPoint.x,\r\n y: y - lastPoint.y,\r\n };\r\n\r\n // Calculate the projection length (dot product)\r\n const projectionLength = vectorToMouse.x * normalizedPerpDx +\r\n vectorToMouse.y * normalizedPerpDy;\r\n\r\n // Calculate the new point position using the projected length\r\n x = lastPoint.x + normalizedPerpDx * projectionLength;\r\n y = lastPoint.y + normalizedPerpDy * projectionLength;\r\n return { x, y };\r\n}\r\n","import { DOTTED_LINE_COLOR } from \"../../constants\";\r\nimport { Point, Polygon } from \"../../types/shapes\";\r\nimport { projectPointPerpendicularToLine } from \"./projection\";\r\n\r\nexport interface DrawPolygonProps {\r\n polygonCtx: CanvasRenderingContext2D;\r\n polygonCanvas: HTMLCanvasElement;\r\n polygon: Polygon;\r\n pixelInMeters: number;\r\n shiftKeyPressed: boolean;\r\n mousePoint: Point | null;\r\n strokeColor: string;\r\n highlightColor: string;\r\n fillColor?: string;\r\n highlightedEdge?: { pointA: Point; pointB: Point } | null;\r\n}\r\n\r\nexport interface Line{\r\n start: Point;\r\n end: Point;\r\n}\r\n\r\nexport interface DrawCircleProps {\r\n ctx: CanvasRenderingContext2D;\r\n x: number;\r\n y: number;\r\n radius: number;\r\n strokeStyle?: string;\r\n lineWidth?: number;\r\n}\r\n\r\nexport function drawPolygon({\r\n polygonCtx, polygonCanvas, polygon, shiftKeyPressed, mousePoint, strokeColor, fillColor, highlightedEdge, highlightColor\r\n}: DrawPolygonProps) {\r\n if (!polygonCtx || !polygonCanvas) return;\r\n\r\n // Draw the polygon\r\n polygonCtx.beginPath();\r\n polygonCtx.strokeStyle = strokeColor;\r\n polygonCtx.lineWidth = 2;\r\n\r\n polygon.points.forEach((point, index) => {\r\n if (index === 0) {\r\n polygonCtx.moveTo(point.x, point.y);\r\n } else {\r\n polygonCtx.lineTo(point.x, point.y);\r\n }\r\n });\r\n\r\n if (polygon.closed) {\r\n polygonCtx.lineTo(polygon.points[0].x, polygon.points[0].y);\r\n if (fillColor) {\r\n polygonCtx.fillStyle = fillColor;\r\n polygonCtx.fill();\r\n }\r\n }\r\n\r\n if (polygon.points.length > 0) {\r\n polygonCtx.stroke();\r\n }\r\n\r\n if (highlightedEdge && polygon.closed) {\r\n polygonCtx.beginPath();\r\n polygonCtx.strokeStyle = highlightColor;\r\n polygonCtx.lineWidth = 2;\r\n polygonCtx.moveTo(highlightedEdge.pointA.x, highlightedEdge.pointA.y);\r\n polygonCtx.lineTo(highlightedEdge.pointB.x, highlightedEdge.pointB.y);\r\n polygonCtx.stroke();\r\n polygonCtx.strokeStyle = strokeColor;\r\n polygonCtx.lineWidth = 1;\r\n }\r\n\r\n if (polygon.points.length > 1 && !polygon.closed && shiftKeyPressed) {\r\n const projectedPoint = projectPointPerpendicularToLine({\r\n x: mousePoint.x,\r\n y: mousePoint.y,\r\n lastPoint: polygon.points[polygon.points.length - 1],\r\n secondLastPoint: polygon.points[polygon.points.length - 2],\r\n });\r\n drawPerpendicularDottedLine({\r\n ctx: polygonCtx,\r\n startPoint: projectedPoint,\r\n endPoint: polygon.points[polygon.points.length - 1],\r\n strokeStyle: DOTTED_LINE_COLOR,\r\n });\r\n }\r\n\r\n if (shiftKeyPressed && polygon.points.length > 1 && !polygon.closed) {\r\n const projectedPoint = projectPointPerpendicularToLine({\r\n x: mousePoint.x,\r\n y: mousePoint.y,\r\n lastPoint: polygon.points[polygon.points.length - 1],\r\n secondLastPoint: polygon.points[polygon.points.length - 2],\r\n });\r\n drawCircle({\r\n ctx: polygonCtx,\r\n x: projectedPoint.x,\r\n y: projectedPoint.y,\r\n radius: 5,\r\n strokeStyle: DOTTED_LINE_COLOR,\r\n });\r\n }\r\n\r\n // Draw circles around each point\r\n polygon.points.forEach((point) => {\r\n polygonCtx.beginPath();\r\n const strokeStyle = strokeColor;\r\n const distance = Math.sqrt(\r\n Math.pow(point.x - mousePoint.x, 2) + Math.pow(point.y - mousePoint.y, 2)\r\n );\r\n\r\n // Highlight the point if it's being hovered or dragged\r\n if (\r\n distance < 10\r\n ) {\r\n drawCircle({\r\n ctx: polygonCtx,\r\n x: point.x,\r\n y: point.y,\r\n strokeStyle,\r\n radius: 8,\r\n });\r\n } else {\r\n drawCircle({\r\n ctx: polygonCtx,\r\n x: point.x,\r\n y: point.y,\r\n strokeStyle,\r\n radius: 5,\r\n });\r\n }\r\n\r\n polygonCtx.stroke();\r\n });\r\n}\r\n\r\nexport function drawCircle({\r\n ctx,\r\n x,\r\n y,\r\n radius,\r\n strokeStyle = \"black\",\r\n lineWidth = 2\r\n}: DrawCircleProps) {\r\n ctx.beginPath();\r\n ctx.strokeStyle = strokeStyle;\r\n ctx.lineWidth = lineWidth;\r\n \r\n ctx.arc(x, y, radius, 0, 2 * Math.PI);\r\n ctx.stroke();\r\n}\r\n\r\nexport function drawPerpendicularDottedLine({\r\n ctx,\r\n startPoint,\r\n endPoint,\r\n dashPattern = [5, 5],\r\n strokeStyle = \"black\",\r\n lineWidth = 2\r\n}: {\r\n ctx: CanvasRenderingContext2D;\r\n startPoint: Point;\r\n endPoint: Point;\r\n dashPattern?: number[];\r\n strokeStyle?: string;\r\n lineWidth?: number;\r\n}) {\r\n // Set up the line style\r\n ctx.beginPath();\r\n ctx.strokeStyle = strokeStyle;\r\n ctx.lineWidth = lineWidth;\r\n ctx.setLineDash(dashPattern);\r\n \r\n // Draw the dotted line\r\n ctx.moveTo(startPoint.x, startPoint.y);\r\n ctx.lineTo(endPoint.x, endPoint.y);\r\n ctx.stroke();\r\n \r\n // Reset the line dash\r\n ctx.setLineDash([]);\r\n}\r\n\r\nexport function isPointOnBorder(point: Point, polygon: Polygon): boolean {\r\n if (!polygon.closed || polygon.points.length < 3) return false;\r\n\r\n const x = point.x;\r\n const y = point.y;\r\n\r\n // For each edge of the polygon\r\n for (let i = 0; i < polygon.points.length; i++) {\r\n const p1 = polygon.points[i];\r\n const p2 = polygon.points[(i + 1) % polygon.points.length];\r\n // calculate the distance from point p1 to p2\r\n const distance = Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));\r\n const distanceToPoint = Math.sqrt(Math.pow(p1.x - x, 2) + Math.pow(p1.y - y, 2));\r\n const distanceFromPoint = Math.sqrt(Math.pow(p2.x - x, 2) + Math.pow(p2.y - y, 2));\r\n if (distance === distanceToPoint + distanceFromPoint) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n}\r\n\r\nexport function isPointInPolygon(point: Point, polygon: Polygon): boolean {\r\n if (!polygon.closed || polygon.points.length < 3) return false;\r\n\r\n const num_vertices = polygon.points.length;\r\n const x = point.x;\r\n const y = point.y;\r\n let inside = false;\r\n\r\n let p1 = polygon.points[0];\r\n let p2: Point;\r\n\r\n for (let i = 1; i <= num_vertices; i++) {\r\n p2 = polygon.points[i % num_vertices];\r\n\r\n if (y > Math.min(p1.y, p2.y)) {\r\n if (y <= Math.max(p1.y, p2.y)) {\r\n if (x <= Math.max(p1.x, p2.x)) {\r\n const x_intersection = ((y - p1.y) * (p2.x - p1.x)) / (p2.y - p1.y) + p1.x;\r\n\r\n if (p1.x === p2.x || x <= x_intersection) {\r\n inside = !inside;\r\n }\r\n }\r\n }\r\n }\r\n\r\n p1 = p2;\r\n }\r\n\r\n return inside;\r\n}","export type ToolType = \"move\" | \"roof\" | \"obstruction\" | \"delete\" | \"markRoofEdge\" | \"undo\";\r\n\r\nexport interface KeyboardCombination {\r\n key: string;\r\n description: string;\r\n}\r\n\r\nexport interface Tool {\r\n name: ToolType;\r\n ariaLabel: string;\r\n icon: string;\r\n cursor: string;\r\n keyboardShortcut?: string;\r\n keyboardCombinations?: KeyboardCombination[];\r\n explanation?: string;\r\n}\r\n\r\nconst polygonKeyboardCombinations: KeyboardCombination[] = [\r\n {\r\n key: \"shift\",\r\n description: \"add one point on perpendicular line\",\r\n },\r\n // {\r\n // key: \"alt\",\r\n // description: \"add parallel line\",\r\n // },\r\n];\r\n\r\nexport const moveTool: Tool = {\r\n name: \"move\",\r\n ariaLabel: \"Move\",\r\n icon: \"move\",\r\n cursor: \"move\",\r\n keyboardShortcut: \"m\",\r\n explanation: \"Move points of the active polygon\",\r\n}\r\n\r\nexport const roofTool: Tool = {\r\n name: \"roof\",\r\n ariaLabel: \"Roof Area\",\r\n icon: \"house\",\r\n cursor: \"crosshair\",\r\n keyboardShortcut: \"r\",\r\n keyboardCombinations: polygonKeyboardCombinations,\r\n explanation: \"Draw the roof of the building\",\r\n}\r\n\r\nexport const obstructionTool: Tool = {\r\n name: \"obstruction\",\r\n ariaLabel: \"Obstruction\",\r\n icon: \"octagon-minus\",\r\n cursor: \"crosshair\",\r\n keyboardShortcut: \"o\",\r\n keyboardCombinations: polygonKeyboardCombinations,\r\n explanation: \"Draw the obstruction of the building\",\r\n}\r\n\r\nexport const deleteTool: Tool = {\r\n name: \"delete\",\r\n ariaLabel: \"Delete\",\r\n icon: \"eraser\",\r\n cursor: \"default\",\r\n keyboardShortcut: \"d\",\r\n explanation: \"Delete the active polygon\",\r\n}\r\n\r\nexport const markRoofEdgeTool: Tool = {\r\n name: \"markRoofEdge\",\r\n ariaLabel: \"Mark Roof Edge\",\r\n icon: \"arrow-down-left-and-up-right-to-center\",\r\n cursor: \"pointer\",\r\n explanation: \"Mark the edge of the roof\",\r\n}\r\n\r\nexport const undoTool: Tool = {\r\n name: \"undo\",\r\n ariaLabel: \"Undo\",\r\n icon: \"undo\",\r\n cursor: \"default\",\r\n explanation: \"Undo the last action\",\r\n}\r\n\r\nexport const tools: Tool[] = [\r\n moveTool,\r\n roofTool,\r\n obstructionTool,\r\n deleteTool,\r\n];\r\n","import { SolarPanelType } from \"./utils/solar\";\r\n\r\nexport interface SolarExpertConfig {\r\n openRoofColor: string;\r\n closedRoofColor: string;\r\n openObstructionColor: string;\r\n closedObstructionColor: string;\r\n roofPolygonFillColor: string;\r\n obstructionPolygonFillColor: string;\r\n roofPolygonHoverFillColor: string;\r\n obstructionPolygonHoverFillColor: string;\r\n roofPolygonSelectedFillColor: string;\r\n obstructionPolygonSelectedFillColor: string;\r\n highlightColor: string;\r\n}\r\n\r\nexport const DEFAULT_SOLAR_EXPERT_CONFIG: SolarExpertConfig = {\r\n openRoofColor: \"#d6eeff\",\r\n closedRoofColor: \"#ffffff\",\r\n openObstructionColor: \"#f57242\",\r\n closedObstructionColor: \"rgba(255, 132, 107, 0.8)\",\r\n roofPolygonFillColor: \"rgba(92, 187, 255, 0.5)\",\r\n obstructionPolygonFillColor: \"rgba(255, 132, 107, 0.5)\",\r\n roofPolygonHoverFillColor: \"rgba(92, 187, 255, 0.8)\",\r\n obstructionPolygonHoverFillColor: \"rgba(255, 132, 107, 0.8)\",\r\n roofPolygonSelectedFillColor: \"rgba(92, 187, 255, 0.7)\",\r\n obstructionPolygonSelectedFillColor: \"rgba(255, 132, 107, 0.7)\",\r\n highlightColor: \"rgba(0, 89, 255, 1)\",\r\n}\r\n\r\nexport const DEFAULT_SOLAR_PANEL_TYPE: SolarPanelType = {\r\n widthMeters: 1.134,\r\n heightMeters: 1.762,\r\n kWattPeak: 0.455,\r\n efficiency: 0.224,\r\n price: 77.68,\r\n}\r\n","import { Polygon, SelectedPolygon } from \"../../types/shapes\";\r\nimport { SolarExpertConfig } from \"../../config\";\r\n\r\n\r\nexport function getFillColor(selectedPolygon: SelectedPolygon | null, hoveredPolygon: SelectedPolygon | null, _id: string, polygon: Polygon, config: SolarExpertConfig): string | undefined {\r\n const isHovered = hoveredPolygon?.type === polygon.type && hoveredPolygon?._id === _id;\r\n if (isHovered) {\r\n return polygon.type === \"roof\" ? config.roofPolygonHoverFillColor : config.obstructionPolygonHoverFillColor;\r\n }\r\n \r\n const isSelected = selectedPolygon?.type === polygon.type && selectedPolygon?._id === _id;\r\n\r\n if (isSelected) {\r\n return polygon.type === \"roof\" ? config.roofPolygonSelectedFillColor : config.obstructionPolygonSelectedFillColor;\r\n }\r\n\r\n if (polygon.type === \"roof\") {\r\n return polygon.closed ? config.roofPolygonFillColor : undefined;\r\n }\r\n return polygon.closed ? config.obstructionPolygonFillColor : undefined;\r\n}\r\n","import validate from './validate.js';\n\n/**\n * Convert array of 16 byte values to UUID string format of the form:\n * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX\n */\nvar byteToHex = [];\nfor (var i = 0; i < 256; ++i) {\n byteToHex.push((i + 0x100).toString(16).slice(1));\n}\nexport function unsafeStringify(arr, offset = 0) {\n // Note: Be careful editing this code! It's been tuned for performance\n // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434\n //\n // Note to future-self: No, you can't remove the `toLowerCase()` call.\n // REF: https://github.com/uuidjs/uuid/pull/677#issuecomment-1757351351\n return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();\n}\nfunction stringify(arr, offset = 0) {\n var uuid = unsafeStringify(arr, offset);\n // Consistency check for valid UUID. If this throws, it's likely due to one\n // of the following:\n // - One or more input array values don't map to a hex octet (leading to\n // \"undefined\" in the uuid)\n // - Invalid input values for the RFC `version` or `variant` fields\n if (!validate(uuid)) {\n throw TypeError('Stringified UUID is invalid');\n }\n return uuid;\n}\nexport default stringify;","// Unique ID creation requires a high quality random # generator. In the browser we therefore\n// require the crypto API and do not support built-in fallback to lower quality random number\n// generators (like Math.random()).\n\nvar getRandomValues;\nvar rnds8 = new Uint8Array(16);\nexport default function rng() {\n // lazy load so that environments that need to polyfill have a chance to do so\n if (!getRandomValues) {\n // getRandomValues needs to be invoked in a context where \"this\" is a Crypto implementation.\n getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);\n if (!getRandomValues) {\n throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n }\n }\n return getRandomValues(rnds8);\n}","var randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);\nexport default {\n randomUUID\n};","import native from './native.js';\nimport rng from './rng.js';\nimport { unsafeStringify } from './stringify.js';\nfunction v4(options, buf, offset) {\n if (native.randomUUID && !buf && !options) {\n return native.randomUUID();\n }\n options = options || {};\n var rnds = options.random || (options.rng || rng)();\n\n // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`\n rnds[6] = rnds[6] & 0x0f | 0x40;\n rnds[8] = rnds[8] & 0x3f | 0x80;\n\n // Copy bytes to buffer, if provided\n if (buf) {\n offset = offset || 0;\n for (var i = 0; i < 16; ++i) {\n buf[offset + i] = rnds[i];\n }\n return buf;\n }\n return unsafeStringify(rnds);\n}\nexport default v4;","import { Point } from \"../types/shapes\";\r\nimport { Bounds, GeoTiff, LatLng } from \"./solar\";\r\n\r\nexport function calculatePolygonArea(points: Point[]): number {\r\n let area = 0;\r\n for (let i = 0; i < points.length; i++) {\r\n const j = (i + 1) % points.length;\r\n area += points[i].x * points[j].y;\r\n area -= points[j].x * points[i].y;\r\n }\r\n return Math.abs(area / 2);\r\n};\r\n\r\nexport function azimuthToCardinal(azimuth: number): string {\r\n // Convert angle to cardinal direction\r\n if (azimuth >= 337.5 || azimuth < 22.5) return \"North\";\r\n if (azimuth >= 22.5 && azimuth < 67.5) return \"Northeast\";\r\n if (azimuth >= 67.5 && azimuth < 112.5) return \"East\";\r\n if (azimuth >= 112.5 && azimuth < 157.5) return \"Southeast\";\r\n if (azimuth >= 157.5 && azimuth < 202.5) return \"South\";\r\n if (azimuth >= 202.5 && azimuth < 247.5) return \"Southwest\";\r\n if (azimuth >= 247.5 && azimuth < 292.5) return \"West\";\r\n return \"Northwest\";\r\n}\r\n\r\nexport function calculatePolygonOrientation(points: Point[]): number {\r\n if (points.length < 3) return 0;\r\n\r\n // Calculate the average direction of the polygon\r\n let totalAngle = 0;\r\n for (let i = 0; i < points.length; i++) {\r\n const j = (i + 1) % points.length;\r\n const angle = Math.atan2(\r\n points[j].y - points[i].y,\r\n points[j].x - points[i].x,\r\n );\r\n totalAngle += angle;\r\n }\r\n\r\n const avgAngle = (totalAngle / points.length) * (180 / Math.PI);\r\n const normalizedAngle = (avgAngle + 360) % 360;\r\n return normalizedAngle;\r\n};\r\n\r\nexport function calculatePolygonAngle(points: Point[]): number {\r\n if (points.length < 3) return 0;\r\n\r\n // Calculate the average angle of the polygon\r\n let totalAngle = 0;\r\n for (let i = 0; i < points.length; i++) {\r\n const j = (i + 1) % points.length;\r\n const k = (i + 2) % points.length;\r\n\r\n const v1 = {\r\n x: points[j].x - points[i].x,\r\n y: points[j].y - points[i].y,\r\n };\r\n const v2 = {\r\n x: points[k].x - points[j].x,\r\n y: points[k].y - points[j].y,\r\n };\r\n\r\n const dot = v1.x * v2.x + v1.y * v2.y;\r\n const mag1 = Math.sqrt(v1.x * v1.x + v1.y * v1.y);\r\n const mag2 = Math.sqrt(v2.x * v2.x + v2.y * v2.y);\r\n\r\n const angle = Math.acos(dot / (mag1 * mag2));\r\n totalAngle += angle;\r\n }\r\n\r\n return (totalAngle / points.length) * (180 / Math.PI);\r\n};\r\n\r\nexport function latLngToPixel(bounds: Bounds, canvas: HTMLCanvasElement, latLng: LatLng): Point {\r\n const ctx = canvas.getContext('2d');\r\n if (!ctx) {\r\n throw new Error('Canvas context not found');\r\n }\r\n const latToPixel = (lat: number) => {\r\n return canvas.height * (1 - (lat - bounds.south) / (bounds.north - bounds.south));\r\n };\r\n \r\n const lngToPixel = (lng: number) => {\r\n return canvas.width * (lng - bounds.west) / (bounds.east - bounds.west);\r\n };\r\n\r\n return {\r\n x: lngToPixel(latLng.longitude),\r\n y: latToPixel(latLng.latitude),\r\n };\r\n}\r\n\r\nexport function getPixelInMeters(rgbTiff: GeoTiff): number {\r\n const latDiff = rgbTiff.bounds.north - rgbTiff.bounds.south;\r\n // const lngDiff = rgbTiff.bounds.east - rgbTiff.bounds.west;\r\n // const pixelWidth = rgbTiff.width;\r\n const pixelHeight = rgbTiff.height;\r\n const pixelInMeters = latDiff * 111320 / pixelHeight;\r\n // const latAvg = (rgbTiff.bounds.north + rgbTiff.bounds.south) / 2;\r\n // const pixelInMetersLng = lngDiff * 111320 * Math.cos(latAvg * Math.PI / 180) / pixelWidth;\r\n return pixelInMeters\r\n}","import { LineSegment, Polygon, SegmentMatch } from \"../../types/shapes\";\r\nimport { Bounds, LatLng, RoofSegmentSizeAndSunshineStats, SolarPanelType } from \"../solar\";\r\nimport { latLngToPixel } from \"../utils\";\r\nimport { Point } from \"../../types/shapes\";\r\nimport { isPointInPolygon, isPointOnBorder, Line } from \"../render/polygon\";\r\n\r\n\r\nexport interface SolarPanelSystemPart {\r\n positionedPanels: PositionedSolarPanel[];\r\n sunniness: number;\r\n}\r\n\r\nexport interface PositionedSolarPanel {\r\n panel: SolarPanelType;\r\n pixelPosition: {\r\n x: number;\r\n y: number;\r\n };\r\n horizontal: boolean;\r\n}\r\n\r\n/**\r\n * Get the intersections of a line parallel to the x-axis of the projected coordinate system with a polygon.\r\n * @param projectedPoint the point to draw the line from\r\n * @param projectedPolygon the polygon to get the intersections with\r\n * @returns the intersections of the line with the polygon\r\n */\r\nexport function getIntersections(projectedPoint: Point, projectedPolygon: Polygon): Point[] {\r\n const intersections: Point[] = [];\r\n\r\n if (projectedPolygon.points.length === 0) {\r\n return intersections;\r\n }\r\n \r\n // For each edge of the polygon\r\n for (let i = 0; i < projectedPolygon.points.length; i++) {\r\n const p1 = projectedPolygon.points[i];\r\n const p2 = projectedPolygon.points[(i + 1) % projectedPolygon.points.length];\r\n \r\n // Calculate intersection point\r\n const t = (projectedPoint.y - p1.y) / (p2.y - p1.y);\r\n const x = p1.x + t * (p2.x - p1.x);\r\n \r\n if (t > 0 && t <= 1) {\r\n intersections.push({ x, y: projectedPoint.y });\r\n }\r\n if (t === 0) {\r\n intersections.push({ x: p1.x, y: projectedPoint.y });\r\n }\r\n }\r\n \r\n // Sort intersections by y-coordinate\r\n return intersections.sort((a, b) => a.x - b.x);\r\n}\r\n\r\nexport function projectPoint(point: Point, azimuth: number): Point {\r\n const angle = azimuth * (Math.PI / 180);\r\n const x = point.x * Math.cos(angle) - point.y * Math.sin(angle);\r\n const y = point.x * Math.sin(angle) + point.y * Math.cos(angle);\r\n return { x, y };\r\n}\r\n\r\nexport function projectPolygon(polygon: Polygon, azimuth: number): Polygon {\r\n return {\r\n points: polygon.points.map((point) => projectPoint(point, azimuth)),\r\n type: polygon.type,\r\n closed: polygon.closed,\r\n _id: polygon._id,\r\n details: polygon.details,\r\n };\r\n}\r\n\r\nexport function offsetPolygon(polygon: Polygon, offset?: {x: number, y: number}): {polygon: Polygon, offset: {x: number, y: number}} {\r\n if (polygon.points.length === 0) {\r\n return { polygon: polygon, offset: {x: 0, y: 0} };\r\n }\r\n\r\n let offsetX = 0;\r\n let offsetY = 0;\r\n if (!offset) {\r\n const minX = Math.min(...polygon.points.map((point) => point.x));\r\n const minY = Math.min(...polygon.points.map((point) => point.y));\r\n const maxX = Math.max(...polygon.points.map((point) => point.x));\r\n const maxY = Math.max(...polygon.points.map((point) => point.y));\r\n\r\n offsetX = minX + (maxX - minX) / 2;\r\n offsetY = minY + (maxY - minY) / 2;\r\n }\r\n else {\r\n offsetX = offset.x;\r\n offsetY = offset.y;\r\n }\r\n\r\n const newPoints = polygon.points.map((point) => ({\r\n x: point.x - offsetX,\r\n y: point.y - offsetY,\r\n }));\r\n\r\n return { polygon: { ...polygon, points: newPoints }, offset: {x: offsetX, y: offsetY} };\r\n}\r\n\r\nfunction equalsPoints(point1: Point, point2: Point): boolean {\r\n return point1.x === point2.x && point1.y === point2.y;\r\n}\r\n\r\n/**\r\n * Checks if two lines intersect.\r\n * if the lines intersect in a start or end point they are not considered as intersecting\r\n * @param line1 The first line.\r\n * @param line2 The second line.\r\n * @returns True if the lines intersect, false otherwise.\r\n */\r\nexport function intersects(line1: Line, line2: Line): boolean {\r\n // Get the points of each line\r\n const p1 = line1.start;\r\n const p2 = line1.end;\r\n const p3 = line2.start;\r\n const p4 = line2.end;\r\n\r\n if (equalsPoints(p1, p3) || equalsPoints(p1, p4) || equalsPoints(p2, p3) || equalsPoints(p2, p4)) {\r\n return false;\r\n }\r\n\r\n // Calculate the cross products\r\n const d1 = (p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x);\r\n const d2 = (p4.x - p3.x) * (p2.y - p3.y) - (p4.y - p3.y) * (p2.x - p3.x);\r\n const d3 = (p2.x - p1.x) * (p3.y - p1.y) - (p2.y - p1.y) * (p3.x - p1.x);\r\n const d4 = (p2.x - p1.x) * (p4.y - p1.y) - (p2.y - p1.y) * (p4.x - p1.x);\r\n\r\n // Check if the lines intersect\r\n return (d1 * d2 < 0) && (d3 * d4 < 0);\r\n}\r\n\r\nexport function undoOffsetPolygon(polygon: Polygon, offset: {x: number, y: number}): Polygon {\r\n return {\r\n ...polygon,\r\n points: polygon.points.map((point) => ({\r\n x: point.x + offset.x,\r\n y: point.y + offset.y,\r\n })),\r\n };\r\n}\r\n\r\nexport function segmentPolygon(polygon: Polygon) {\r\n const segments: LineSegment[] = [];\r\n const segmentsMap: Record<string, boolean> = {};\r\n\r\n for (const point of polygon.points) {\r\n const intersections = getIntersections(point, polygon);\r\n for (const [index, intersection] of intersections.slice(0, -1).entries()) {\r\n const nextIntersection = intersections[index + 1];\r\n \r\n const halfPoint = {\r\n x: (intersection.x + nextIntersection.x) / 2,\r\n y: (intersection.y + nextIntersection.y) / 2,\r\n };\r\n\r\n const isInner = isPointInPolygon(halfPoint, polygon);\r\n const isOnBorder = isPointOnBorder(halfPoint, polygon);\r\n const key = `${intersection.x}-${intersection.y}-${nextIntersection.x}-${nextIntersection.y}`;\r\n \r\n if (segmentsMap[key]) {\r\n continue;\r\n }\r\n segments.push({ start: intersection, end: nextIntersection, type: isOnBorder ? \"border\" : (isInner ? \"inner\" : \"outer\") });\r\n segmentsMap[key] = true;\r\n }\r\n }\r\n return segments;\r\n}\r\n\r\n/**\r\n * for each segment this method will find all the following segments that are connected to it\r\n * \r\n * first the method subdivides the segments into y levels (all segments that have the same y coordinate are in the same level)\r\n * then it will check for each segment in each level if there is a following segment that is connected to it by checking it the \r\n * start point of the top segment to the end point of the bottom segment does not intersect with any of the polygon borders and the center point of the connection is in the polygon\r\n * \r\n * @param segments \r\n * @param roof \r\n * @returns \r\n */\r\nexport function matchSegments(segments: LineSegment[], roof: Polygon): {matches: SegmentMatch[], map: Record<string, LineSegment>} {\r\n const matches: SegmentMatch[] = [];\r\n const map: Record<string, LineSegment> = {};\r\n\r\n for (const segment of segments) {\r\n map[`${segment.start.x}-${segment.start.y}-${segment.end.x}-${segment.end.y}`] = segment;\r\n }\r\n \r\n // Group segments by y-coordinate (level)\r\n const levels: Record<number, LineSegment[]> = {};\r\n segments.forEach(segment => {\r\n const y = segment.start.y;\r\n if (!levels[y]) {\r\n levels[y] = [];\r\n }\r\n levels[y].push(segment);\r\n });\r\n\r\n // Sort levels by y-coordinate\r\n const sortedLevels = Object.keys(levels).map(Number).sort((a, b) => a - b);\r\n\r\n // For each level except the last one\r\n for (let i = 0; i < sortedLevels.length - 1; i++) {\r\n const currentLevel = levels[sortedLevels[i]];\r\n const nextLevel = levels[sortedLevels[i + 1]];\r\n\r\n // For each segment in current level\r\n for (const currentSegment of currentLevel) {\r\n if (currentSegment.type === \"outer\") {\r\n continue;\r\n }\r\n const matchedSegments: LineSegment[] = [];\r\n \r\n // For each segment in next level\r\n for (const nextSegment of nextLevel) {\r\n // Check if segments can be connected\r\n const connectionStart = currentSegment.start;\r\n const connectionEnd = nextSegment.end;\r\n\r\n let intersected = false;\r\n for (let i = 0; i < roof.points.length; i++) {\r\n const line = {\r\n start: roof.points[i],\r\n end: roof.points[(i + 1) % roof.points.length]\r\n };\r\n if (intersects(line, {start: connectionStart, end: connectionEnd})) {\r\n intersected = true;\r\n break;\r\n }\r\n }\r\n\r\n if (intersected) {\r\n continue;\r\n }\r\n\r\n // Check if center point of connection is inside polygon\r\n const centerPoint = {\r\n x: (connectionStart.x + connectionEnd.x) / 2,\r\n y: (connectionStart.y + connectionEnd.y) / 2\r\n };\r\n\r\n if (isPointInPolygon(centerPoint, roof)) {\r\n matchedSegments.push(nextSegment);\r\n }\r\n }\r\n\r\n if (matchedSegments.length > 0) {\r\n matches.push({\r\n segment: `${currentSegment.start.x}-${currentSegment.start.y}-${currentSegment.end.x}-${currentSegment.end.y}`,\r\n matchedSegments: matchedSegments.map(segment => `${segment.start.x}-${segment.start.y}-${segment.end.x}-${segment.end.y}`)\r\n });\r\n }\r\n }\r\n }\r\n\r\n return {matches, map};\r\n}\r\n\r\n/**\r\n * Fits panels to a roof polygon.\r\n * \r\n * Starts with positioning a solar panel row (a rectangle with the height of the solar panel and the width in the direction of the perpendicular of\r\n * the azimuth of the roof) at each corner of the roof.\r\n * For each corner there are four possible cases (the width is the width of the whole roof in the direction of the perpendicular of the azimuth):\r\n * 1. The row has height of the solar panel height and sits below the point in the direction of the azimuth of the roof.\r\n * 2. The row has height of the solar panel height and sits above the point in the direction of the azimuth of the roof.\r\n * 3. The row has the height of the solar panel width (solar panels are rotated) and sits below the point in the direction of the azimuth of the roof.\r\n * 4. The row has the height of the solar panel width (solar panels are rotated) and sits above the point in the direction of the azimuth of the roof.\r\n * \r\n * For each of these cases the function then places the solar panel rows directly above and below the current row.\r\n * \r\n * after the function has positioned all the rows it places the solar panels in the spaces between the rows.\r\n * For each of the four scenarios of each corner the number of panels are counted and the optimal placement is chosen.\r\n * \r\n * @param roof - The roof polygon.\r\n * @param panelType - The type of panel to fit.\r\n * @param borderOffset - The offset of the panel from the border of the roof. If negative, the panel can be partially overhanging the roof.\r\n * @param azimuth - The azimuth of the roof.\r\n * @returns The positioned panels.\r\n */\r\nexport function fitPanelsToRoof(roof: Polygon, panelType: SolarPanelType, borderOffset: number = 0, azimuth: number = 0): PositionedSolarPanel[] {\r\n if (!roof || !panelType || !roof.points || !roof.details) {\r\n return [];\r\n }\r\n console.log(borderOffset, azimuth)\r\n return [];\r\n \r\n // const minX = Math.min(...roof.points.map(p => p.x));\r\n // const maxX = Math.max(...roof.points.map(p => p.x));\r\n // const minY = Math.min(...roof.points.map(p => p.y));\r\n // const maxY = Math.max(...roof.points.map(p => p.y));\r\n\r\n // const projectedRoof = projectPolygon(roof, azimuth);\r\n // const projectedOffsetRoof = offsetPolygon(projectedRoof);\r\n\r\n // const segments = segmentPolygon(projectedOffsetRoof.polygon);\r\n // const {matches, map} = matchSegments(segments, projectedOffsetRoof.polygon);\r\n // const matchesMap: Record<string, LineSegment[]> = {};\r\n // for (const match of matches) {\r\n // matchesMap[match.segment] = match.matchedSegments.map(segment => map[segment]);\r\n // }\r\n\r\n // let panels: PositionedSolarPanel[] = [];\r\n // let undidPanels: PositionedSolarPanel[] = [];\r\n\r\n // for (const segment of segments) {\r\n // if (segment.type === \"outer\") {\r\n // continue;\r\n // }\r\n\r\n // const matches = matchesMap[`${segment.start.x}-${segment.start.y}-${segment.end.x}-${segment.end.y}`];\r\n // if (!matches || matches.length === 0) {\r\n // continue;\r\n // }\r\n\r\n // // Combine segments until we reach panel height\r\n // let combinedSegments: Array<Array<LineSegment>> = [[segment]];\r\n // let currentHeight = 0;\r\n // let currentMatches = matches;\r\n\r\n // // while (currentHeight < panelType.heightMeters && currentMatches.length > 0) {\r\n // // const nextSegment = currentMatches[0];\r\n // // combinedSegments.push(nextSegment);\r\n // // currentHeight += Math.abs(nextSegment.start.y - segment.start.y);\r\n // // currentMatches = matchesMap[`${nextSegment.start.x}-${nextSegment.start.y}-${nextSegment.end.x}-${nextSegment.end.y}`] || [];\r\n // // }\r\n\r\n // if (currentHeight < panelType.heightMeters) {\r\n // continue;\r\n // }\r\n\r\n // // Calculate minimum width\r\n // // let minEnd = Math.max(...combinedSegments.map(s => s.end.x));\r\n // // let maxStart = Math.min(...combinedSegments.map(s => s.start.x));\r\n // // let width = minEnd - maxStart;\r\n\r\n // // if (width >= panelType.widthMeters) {\r\n // // // Find highest segment for starting position\r\n // // const highestSegment = combinedSegments.reduce((prev, curr) => \r\n // // curr.start.y < prev.start.y ? curr : prev\r\n // // );\r\n\r\n // // // Place panels in a grid\r\n // // const panelSpacing = panelType.widthMeters + borderOffset;\r\n // // const rowSpacing = panelType.heightMeters + borderOffset;\r\n // // let currentX = maxStart;\r\n // // let currentY = highestSegment.start.y;\r\n\r\n // // while (currentX + panelType.widthMeters <= minEnd) {\r\n // // while (currentY + panelType.heightMeters <= highestSegment.start.y + currentHeight) {\r\n // // const panelCenter = {\r\n // // x: currentX + panelType.widthMeters / 2,\r\n // // y: currentY + panelType.heightMeters / 2\r\n // // };\r\n\r\n // // if (isPointInPolygon(panelCenter, projectedOffsetRoof.polygon)) {\r\n // // panels.push({\r\n // // panel: panelType,\r\n // // pixelPosition: panelCenter\r\n // // });\r\n // // }\r\n\r\n // // currentY += rowSpacing;\r\n // // }\r\n // // currentX += panelSpacing;\r\n // // currentY = highestSegment.start.y;\r\n // // }\r\n // // }\r\n // }\r\n\r\n // for (const panel of panels) {\r\n // const undoOffset = {\r\n // x: panel.pixelPosition.x + projectedOffsetRoof.offset.x,\r\n // y: panel.pixelPosition.y + projectedOffsetRoof.offset.y,\r\n // };\r\n // const projectedPanel = projectPoint(undoOffset, azimuth);\r\n // undidPanels.push({\r\n // panel: panel.panel,\r\n // pixelPosition: projectedPanel,\r\n // });\r\n // }\r\n\r\n // return panels;\r\n\r\n // project the polygon points such that the azimuth is 0 degrees\r\n // this means that the solar panel are aligned perfectly with the coordinate system\r\n //\r\n // 1. below point and height is height\r\n // for each point do the following\r\n // draw a line along the y-axis of the projected coordinate system (this is the perpendicular of the azimuth)\r\n // find all the intersection of that line with the roof polygon\r\n // get all points that are within the height of the solar panel in the direction of the azimuth\r\n // \r\n\r\n // for each point generate a line along the y-axis of the projected coordinate system (this is the perpendicular of the azimuth)\r\n // find all points on that line that intersect with the roof polygon bounds\r\n // if the number of points is even \r\n\r\n // \r\n\r\n // const positionedPanels: PositionedSolarPanel[] = [];\r\n // let bestPanelCount = 0;\r\n // let bestPanelArrangement: PositionedSolarPanel[] = [];\r\n\r\n // // Get roof details\r\n // const { azimuth } = roof.details;\r\n // const perpendicularAzimuth = (azimuth + 90) % 360;\r\n\r\n // for (const point of roof.points) {\r\n // const row = createPanelRow(point, false, false);\r\n // positionedPanels.push(...row);\r\n // }\r\n\r\n // Helper function to create a panel row\r\n // const createPanelRow = (startPoint: Point, isRotated: boolean, isAbove: boolean): PositionedSolarPanel[] => {\r\n // const rowPanels: PositionedSolarPanel[] = [];\r\n // const panelWidth = isRotated ? panelType.heightMeters : panelType.widthMeters;\r\n // const panelHeight = isRotated ? panelType.widthMeters : panelType.heightMeters;\r\n\r\n // // Calculate row direction based on azimuth\r\n // const rowAngle = perpendicularAzimuth * (Math.PI / 180);\r\n // const rowDirX = Math.cos(rowAngle);\r\n // const rowDirY = Math.sin(rowAngle);\r\n\r\n // // Calculate panel spacing direction based on azimuth\r\n // const panelAngle = azimuth * (Math.PI / 180);\r\n // const panelDirX = Math.cos(panelAngle);\r\n // const panelDirY = Math.sin(panelAngle);\r\n\r\n // // Calculate row width (distance from start to end of roof in perpendicular direction)\r\n // let maxRowWidth = 0;\r\n // for (const point of roof.points) {\r\n // const dx = point.x - startPoint.x;\r\n // const dy = point.y - startPoint.y;\r\n // const width = Math.abs(dx * rowDirX + dy * rowDirY);\r\n // maxRowWidth = Math.max(maxRowWidth, width);\r\n // }\r\n\r\n // // Place panels along the row\r\n // const numPanels = Math.floor(maxRowWidth / panelWidth);\r\n // for (let i = 0; i < numPanels; i++) {\r\n // const panelX = startPoint.x + i * panelWidth * rowDirX;\r\n // const panelY = startPoint.y + i * panelWidth * rowDirY;\r\n\r\n // // Check if panel center is within roof polygon\r\n // const panelCenter = {\r\n // x: panelX + (panelWidth / 2) * rowDirX + (panelHeight / 2) * panelDirX,\r\n // y: panelY + (panelWidth / 2) * rowDirY + (panelHeight / 2) * panelDirY\r\n // };\r\n\r\n // if (isPointInPolygon(panelCenter, roof)) {\r\n // rowPanels.push({\r\n // panel: panelType,\r\n // pixelPosition: {\r\n // x: panelCenter.x,\r\n // y: panelCenter.y\r\n // }\r\n // });\r\n // }\r\n // }\r\n\r\n // return rowPanels;\r\n // };\r\n\r\n // // Try each corner and arrangement\r\n // for (const corner of roof.points) {\r\n // // Try all four arrangements for this corner\r\n // const arrangements = [\r\n // { isRotated: false, isAbove: false },\r\n // { isRotated: false, isAbove: true },\r\n // { isRotated: true, isAbove: false },\r\n // { isRotated: true, isAbove: true }\r\n // ];\r\n\r\n // for (const arrangement of arrangements) {\r\n // const currentPanels: PositionedSolarPanel[] = [];\r\n // const { isRotated, isAbove } = arrangement;\r\n\r\n // // Create initial row\r\n // const initialRow = createPanelRow(corner, isRotated, isAbove);\r\n // currentPanels.push(...initialRow);\r\n\r\n // // Add rows above and below\r\n // const panelHeight = isRotated ? panelType.widthMeters : panelType.heightMeters;\r\n // const rowSpacing = panelHeight + borderOffset;\r\n\r\n // // Calculate direction for adding rows\r\n // const rowAngle = azimuth * (Math.PI / 180);\r\n // const rowDirX = Math.cos(rowAngle);\r\n // const rowDirY = Math.sin(rowAngle);\r\n\r\n // // Add rows in both directions\r\n // let rowOffset = rowSpacing;\r\n // while (true) {\r\n // const newRowPoint = {\r\n // x: corner.x + rowOffset * rowDirX,\r\n // y: corner.y + rowOffset * rowDirY\r\n // };\r\n // const newRow = createPanelRow(newRowPoint, isRotated, isAbove);\r\n // if (newRow.length === 0) break;\r\n // currentPanels.push(...newRow);\r\n // rowOffset += rowSpacing;\r\n // }\r\n\r\n // rowOffset = -rowSpacing;\r\n // while (true) {\r\n // const newRowPoint = {\r\n // x: corner.x + rowOffset * rowDirX,\r\n // y: corner.y + rowOffset * rowDirY\r\n // };\r\n // const newRow = createPanelRow(newRowPoint, isRotated, isAbove);\r\n // if (newRow.length === 0) break;\r\n // currentPanels.push(...newRow);\r\n // rowOffset -= rowSpacing;\r\n // }\r\n\r\n // // Update best arrangement if this one has more panels\r\n // if (currentPanels.length > bestPanelCount) {\r\n // bestPanelCount = currentPanels.length;\r\n // bestPanelArrangement = currentPanels;\r\n // }\r\n // }\r\n // }\r\n\r\n // return bestPanelArrangement;\r\n}\r\n\r\n/**\r\n * Uses the bounding box of the roof and the roof segment bounding boxes to find the best fitting roof segment.\r\n * @param roof the roof shape\r\n * @param roofSegmentStats the stats of the roof segments\r\n * @returns the best fitting roof segment\r\n */\r\nexport function getBestFittingRoofSegment(roof: Polygon, roofSegmentStats: RoofSegmentSizeAndSunshineStats[], bounds: Bounds, canvas: HTMLCanvasElement): RoofSegmentSizeAndSunshineStats {\r\n const polygonBounds = {\r\n minX: Math.min(...roof.points.map((p) => p.x)),\r\n maxX: Math.max(...roof.points.map((p) => p.x)),\r\n minY: Math.min(...roof.points.map((p) => p.y)),\r\n maxY: Math.max(...roof.points.map((p) => p.y)),\r\n };\r\n\r\n let bestSegment = null;\r\n let bestIoU = 0;\r\n\r\n for (const segment of roofSegmentStats) {\r\n const sw = latLngToPixel(bounds, canvas, {\r\n latitude: segment.boundingBox.sw.latitude,\r\n longitude: segment.boundingBox.sw.longitude,\r\n } as LatLng);\r\n const ne = latLngToPixel(bounds, canvas, {\r\n latitude: segment.boundingBox.ne.latitude,\r\n longitude: segment.boundingBox.ne.longitude,\r\n } as LatLng);\r\n const segmentBounds = {\r\n minX: sw.x,\r\n maxX: ne.x,\r\n minY: ne.y,\r\n maxY: sw.y,\r\n };\r\n\r\n // Calculate intersection\r\n const interLeft = Math.max(polygonBounds.minX, segmentBounds.minX);\r\n const interRight = Math.min(polygonBounds.maxX, segmentBounds.maxX);\r\n const interTop = Math.max(polygonBounds.minY, segmentBounds.minY);\r\n const interBottom = Math.min(polygonBounds.maxY, segmentBounds.maxY);\r\n\r\n const interWidth = interRight - interLeft;\r\n const interHeight = interBottom - interTop;\r\n let intersectionArea = 0;\r\n if (interWidth > 0 && interHeight > 0) {\r\n intersectionArea = interWidth * interHeight;\r\n }\r\n\r\n const polygonArea = (polygonBounds.maxX - polygonBounds.minX) * (polygonBounds.maxY - polygonBounds.minY);\r\n const segmentArea = (segmentBounds.maxX - segmentBounds.minX) * (segmentBounds.maxY - segmentBounds.minY);\r\n const unionArea = polygonArea + segmentArea - intersectionArea;\r\n const iou = unionArea > 0 ? intersectionArea / unionArea : 0;\r\n\r\n if (iou > bestIoU) {\r\n bestIoU = iou;\r\n bestSegment = segment;\r\n }\r\n }\r\n\r\n return bestSegment;\r\n}\r\n","import { COLUMN_SPACING, ROW_SPACING } from \"../../constants\";\r\nimport { Point, Polygon } from \"../../types/shapes\";\r\nimport { isPointInPolygon, Line } from \"../render/polygon\";\r\nimport { SolarPanelType } from \"../solar\";\r\nimport { intersects, offsetPolygon, PositionedSolarPanel, projectPoint, projectPolygon } from \"./fitting\";\r\n\r\nexport interface MinMax {\r\n minX: number;\r\n maxX: number;\r\n minY: number;\r\n maxY: number;\r\n}\r\n\r\nexport function generateGrid(minMax: MinMax, solarPanel: SolarPanelType, horizontal: boolean, anker: Point, rowSpacing: number, columnSpacing: number): Array<Array<PositionedSolarPanel>> {\r\n const grid: Array<Array<PositionedSolarPanel>> = [];\r\n const width = horizontal ? solarPanel.heightMeters : solarPanel.widthMeters;\r\n const widthCount = Math.ceil((minMax.maxX - minMax.minX) / width);\r\n const height = horizontal ? solarPanel.widthMeters : solarPanel.heightMeters;\r\n const heightCount = Math.ceil((minMax.maxY - minMax.minY) / height);\r\n\r\n const widthOffset = width / 2;\r\n const heightOffset = height / 2;\r\n\r\n // calculate the starting point based on the anker\r\n const startX = anker.x - (Math.ceil((anker.x - minMax.minX) / width) * width);\r\n const startY = anker.y - (Math.ceil((anker.y - minMax.minY) / height) * height);\r\n\r\n for (let i = 0; i < heightCount; i++) {\r\n const row: Array<PositionedSolarPanel> = [];\r\n for (let j = 0; j < widthCount; j++) {\r\n const x = startX + j * width + j * columnSpacing + widthOffset;\r\n const y = startY + i * height + i * rowSpacing + heightOffset;\r\n const positionedSolarPanel: PositionedSolarPanel = {\r\n panel: solarPanel,\r\n pixelPosition: {\r\n x: x,\r\n y: y\r\n },\r\n horizontal: horizontal\r\n }\r\n row.push(positionedSolarPanel);\r\n }\r\n grid.push(row);\r\n }\r\n return grid;\r\n}\r\n\r\nfunction getSolarPanelLines(positionedSolarPanel: PositionedSolarPanel, horizontal: boolean): Array<Line> {\r\n const width = horizontal ? positionedSolarPanel.panel.heightMeters : positionedSolarPanel.panel.widthMeters;\r\n const height = horizontal ? positionedSolarPanel.panel.widthMeters : positionedSolarPanel.panel.heightMeters;\r\n const p1 = {\r\n x: positionedSolarPanel.pixelPosition.x - width / 2,\r\n y: positionedSolarPanel.pixelPosition.y - height / 2\r\n }\r\n const p2 = {\r\n x: positionedSolarPanel.pixelPosition.x - width / 2,\r\n y: positionedSolarPanel.pixelPosition.y + height / 2\r\n }\r\n const p3 = {\r\n x: positionedSolarPanel.pixelPosition.x + width / 2,\r\n y: positionedSolarPanel.pixelPosition.y + height / 2\r\n }\r\n const p4 = {\r\n x: positionedSolarPanel.pixelPosition.x + width / 2,\r\n y: positionedSolarPanel.pixelPosition.y - height / 2\r\n }\r\n const lines = [\r\n {\r\n start: p1,\r\n end: p2\r\n },\r\n {\r\n start: p2,\r\n end: p3\r\n },\r\n {\r\n start: p3,\r\n end: p4\r\n },\r\n {\r\n start: p4,\r\n end: p1\r\n }\r\n ]\r\n return lines;\r\n}\r\n\r\n\r\nexport function solarPanelInObstacle(positionedSolarPanel: PositionedSolarPanel, obstacle: Polygon, horizontal: boolean): boolean {\r\n const lines = getSolarPanelLines(positionedSolarPanel, horizontal);\r\n if (isPointInPolygon(positionedSolarPanel.pixelPosition, obstacle)) {\r\n return true;\r\n }\r\n for (let i = 0; i < obstacle.points.length; i++) {\r\n const point = obstacle.points[i];\r\n const nextPoint = obstacle.points[(i + 1) % obstacle.points.length];\r\n const border = {\r\n start: point,\r\n end: nextPoint\r\n }\r\n for (const line of lines) {\r\n if (intersects(line, border)) {\r\n return true;\r\n }\r\n }\r\n }\r\n return false;\r\n}\r\n\r\nexport function solarPanelInPolygon(positionedSolarPanel: PositionedSolarPanel, polygon: Polygon, horizontal: boolean): boolean {\r\n const lines = getSolarPanelLines(positionedSolarPanel, horizontal);\r\n\r\n for (let i = 0; i < polygon.points.length; i++) {\r\n const point = polygon.points[i];\r\n const nextPoint = polygon.points[(i + 1) % polygon.points.length];\r\n const border = {\r\n start: point,\r\n end: nextPoint\r\n }\r\n for (const line of lines) {\r\n if (intersects(line, border)) {\r\n return false;\r\n }\r\n }\r\n }\r\n\r\n return isPointInPolygon(positionedSolarPanel.pixelPosition, polygon);\r\n}\r\n\r\nexport interface Obstacle {\r\n polygon: Polygon;\r\n boundingBox: {\r\n minX: number;\r\n maxX: number;\r\n minY: number;\r\n maxY: number;\r\n }\r\n}\r\n\r\nexport function isPanelObstructed(positionedSolarPanel: PositionedSolarPanel, obstacles: Obstacle[], horizontal: boolean): boolean {\r\n for (const obstacle of obstacles) {\r\n if (solarPanelInObstacle(positionedSolarPanel, obstacle.polygon, horizontal)) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n}\r\n\r\nexport function getSolarPanelsInPolygon(grid: Array<Array<PositionedSolarPanel>>, polygon: Polygon, horizontal: boolean, obstacles: Obstacle[]): Array<Array<PositionedSolarPanel>> {\r\n const solarPanels: Array<Array<PositionedSolarPanel>> = [];\r\n for (const row of grid) {\r\n let newRow: Array<PositionedSolarPanel> = [];\r\n for (const positionedSolarPanel of row) {\r\n const isObstructed = isPanelObstructed(positionedSolarPanel, obstacles, horizontal);\r\n if (solarPanelInPolygon(positionedSolarPanel, polygon, horizontal) && !isObstructed) {\r\n newRow.push(positionedSolarPanel);\r\n }\r\n }\r\n solarPanels.push(newRow);\r\n }\r\n return solarPanels;\r\n}\r\n\r\nexport function getOptimalSolarPosition(roof: Polygon, obstacles: Obstacle[], solarPanel: SolarPanelType, angle: number): Array<Array<PositionedSolarPanel>> {\r\n const minX = Math.min(...roof.points.map(p => p.x));\r\n const maxX = Math.max(...roof.points.map(p => p.x));\r\n const minY = Math.min(...roof.points.map(p => p.y));\r\n const maxY = Math.max(...roof.points.map(p => p.y));\r\n const minMax = {\r\n minX: minX,\r\n maxX: maxX,\r\n minY: minY,\r\n maxY: maxY\r\n } as MinMax; \r\n\r\n const horizontalSolarPanel = {\r\n ...solarPanel,\r\n widthMeters: solarPanel.widthMeters * Math.cos(angle * Math.PI / 180),\r\n heightMeters: solarPanel.heightMeters\r\n } as SolarPanelType;\r\n\r\n const verticalSolarPanel = {\r\n ...solarPanel,\r\n widthMeters: solarPanel.widthMeters,\r\n heightMeters: solarPanel.heightMeters * Math.cos(angle * Math.PI / 180)\r\n } as SolarPanelType;\r\n\r\n let solarPanels: Array<Array<PositionedSolarPanel>> = [];\r\n let numberOfPanels = 0;\r\n for (const point of roof.points) {\r\n for (const horizontal of [false]) { // TODO removed true\r\n const grid = generateGrid(minMax, horizontal ? horizontalSolarPanel : verticalSolarPanel, horizontal, point, ROW_SPACING, COLUMN_SPACING);\r\n const solarPanelsInPolygon = getSolarPanelsInPolygon(grid, roof, horizontal, obstacles);\r\n\r\n const numberOfPanelsInPolygon = solarPanelsInPolygon.reduce((acc, row) => acc + row.length, 0);\r\n if (numberOfPanelsInPolygon > numberOfPanels) {\r\n numberOfPanels = numberOfPanelsInPolygon;\r\n solarPanels = solarPanelsInPolygon;\r\n }\r\n }\r\n break;\r\n }\r\n return solarPanels;\r\n}\r\n\r\nfunction projectObstacles(obstacles: Polygon[], azimuth: number, offset: {x: number, y: number}, inset: number): Array<Obstacle> {\r\n const result: Array<Obstacle> = [];\r\n for (const obstacle of obstacles) {\r\n const offsetObstacle = offsetPolygon(obstacle, offset);\r\n const projectedObstacle = projectPolygon(offsetObstacle.polygon, -azimuth);\r\n const insetObstacle = insetPolygon(projectedObstacle, -inset);\r\n\r\n const minX = Math.min(...insetObstacle.points.map(p => p.x));\r\n const maxX = Math.max(...insetObstacle.points.map(p => p.x));\r\n const minY = Math.min(...insetObstacle.points.map(p => p.y));\r\n const maxY = Math.max(...insetObstacle.points.map(p => p.y));\r\n const boundingBox = {\r\n minX: minX,\r\n maxX: maxX,\r\n minY: minY,\r\n maxY: maxY\r\n } as MinMax;\r\n result.push({\r\n polygon: projectedObstacle,\r\n boundingBox: boundingBox\r\n });\r\n }\r\n return result;\r\n}\r\n\r\nfunction isClockwise(points: Point[]): boolean {\r\n let sum = 0;\r\n for (let i = 0; i < points.length; i++) {\r\n const curr = points[i];\r\n const next = points[(i + 1) % points.length];\r\n sum += (next.x - curr.x) * (next.y + curr.y);\r\n }\r\n return sum > 0;\r\n}\r\n\r\nexport function insetPolygon(polygon: Polygon, inset: number): Polygon {\r\n const points = polygon.points;\r\n const isClockwisePolygon = isClockwise(points);\r\n inset = inset * Math.sqrt(2) * (isClockwisePolygon ? -1 : 1);\r\n const insetPoints: Point[] = [];\r\n \r\n for (let i = 0; i < points.length; i++) {\r\n const prev = points[(i - 1 + points.length) % points.length];\r\n const curr = points[i];\r\n const next = points[(i + 1) % points.length];\r\n \r\n // Calculate vectors for the two edges meeting at current point\r\n const v1 = {\r\n x: curr.x - prev.x,\r\n y: curr.y - prev.y\r\n };\r\n const v2 = {\r\n x: next.x - curr.x,\r\n y: next.y - curr.y\r\n };\r\n \r\n // Calculate perpendicular vectors (90 degrees clockwise)\r\n const perp1 = {\r\n x: -v1.y,\r\n y: v1.x\r\n };\r\n const perp2 = {\r\n x: -v2.y,\r\n y: v2.x\r\n };\r\n \r\n // Normalize the perpendicular vectors\r\n const length1 = Math.sqrt(perp1.x * perp1.x + perp1.y * perp1.y);\r\n const length2 = Math.sqrt(perp2.x * perp2.x + perp2.y * perp2.y);\r\n \r\n perp1.x /= length1;\r\n perp1.y /= length1;\r\n perp2.x /= length2;\r\n perp2.y /= length2;\r\n \r\n // Calculate the bisector vector\r\n const bisector = {\r\n x: perp1.x + perp2.x,\r\n y: perp1.y + perp2.y\r\n };\r\n \r\n // Normalize the bisector\r\n const bisectorLength = Math.sqrt(bisector.x * bisector.x + bisector.y * bisector.y);\r\n bisector.x /= bisectorLength;\r\n bisector.y /= bisectorLength;\r\n \r\n // Calculate the inset point\r\n const insetPoint = {\r\n x: curr.x + bisector.x * inset,\r\n y: curr.y + bisector.y * inset\r\n };\r\n \r\n insetPoints.push(insetPoint);\r\n }\r\n \r\n return {\r\n points: insetPoints,\r\n type: polygon.type,\r\n closed: polygon.closed,\r\n _id: polygon._id,\r\n details: polygon.details\r\n };\r\n}\r\n\r\nexport function getOptimalSolarPositionFully(roof: Polygon, obstacles: Polygon[], solarPanel: SolarPanelType, azimuth: number, inset: number, angle: number): Array<PositionedSolarPanel> {\r\n const insetRoof = insetPolygon(roof, inset);\r\n const offset = offsetPolygon(insetRoof);\r\n const projectedOffset = projectPolygon(offset.polygon, -azimuth);\r\n\r\n const projectedObstacles = projectObstacles(obstacles, azimuth, offset.offset, inset);\r\n\r\n const horizontalSolarPanels = getOptimalSolarPosition(projectedOffset, projectedObstacles, solarPanel, angle);\r\n const unprojectedPanels: Array<PositionedSolarPanel> = [];\r\n\r\n for (const panel of horizontalSolarPanels.flat()) {\r\n const unprojectedPanel = projectPoint(panel.pixelPosition, azimuth);\r\n const offsetPosition = {\r\n x: unprojectedPanel.x + offset.offset.x,\r\n y: unprojectedPanel.y + offset.offset.y\r\n }\r\n unprojectedPanels.push({\r\n panel: panel.panel,\r\n pixelPosition: offsetPosition,\r\n horizontal: panel.horizontal\r\n });\r\n }\r\n return unprojectedPanels;\r\n}","import { LanguageStrings } from \"../../types/lang\";\r\n\r\nexport const en: LanguageStrings = {\r\n settings: {\r\n language: \"Language\",\r\n rowSpacing: \"Row Spacing\",\r\n columnSpacing: \"Column Spacing\",\r\n borderInset: \"Border Inset\",\r\n },\r\n mapSelector: {\r\n explanation: \"Select your house on the map and adjust the radius of the circle to fully encompase your roof.\",\r\n radius: \"Radius (meters)\",\r\n accept: \"Accept\",\r\n chooseOnMap: \"Choose on Map\",\r\n },\r\n solarExpert: {\r\n searchPlaceholder: \"Search for your address\"\r\n },\r\n solarSystemForm: {\r\n title: \"Solar System Configuration\",\r\n systemInformation: \"System Information\",\r\n numberOfPanels: \"Number of Solar Panels\",\r\n panelPeakPower: \"Panel Peak Power (kW)\",\r\n totalSystemPeakPower: \"Total System Peak Power (kW)\",\r\n electricityPrice: \"Electricity Price (€/kWh)\",\r\n compensationRate: \"Compensation Rate (€/kWh)\",\r\n autonomy: \"Autonomy\",\r\n costSavings: \"Cost Savings (€/year)\",\r\n householdConsumptionTitle: \"Household Electricity Consumption\",\r\n consumptionProfileTitle: \"Consumption Profile\",\r\n electricityCostsTitle: \"Electricity Costs\",\r\n compensationRateTitle: \"Compensation Rate\",\r\n resultsTitle: \"Results\",\r\n savingsDisclaimer: \"Disclaimer: The savings are based on the average electricity price in Spain.\",\r\n annualConsumption: \"Annual Consumption (kWh)\",\r\n name: \"Name\",\r\n email: \"Email\",\r\n nameError: \"Please enter your name\",\r\n emailError: \"Please enter a valid email address\",\r\n consumptionProfiles: {\r\n mostlyAtHome: \"Mostly at home\",\r\n mostlyAway: \"Mostly away\",\r\n },\r\n chart: {\r\n consumption: \"Consumption\",\r\n production: \"Production\",\r\n consumptionProfile: \"Consumption Profile\",\r\n relativeConsumption: \"Relative Consumption\",\r\n hourOfDay: \"Hour of Day\",\r\n },\r\n validEmailError: \"Please enter a valid email address\",\r\n requestOffer: \"Request Offer\",\r\n requestOfferButton: \"Request Offer\",\r\n year: \"year\",\r\n additionalComponents: {\r\n title: \"Additional Components\",\r\n heatPump: \"Heat Pump\",\r\n electricCar: \"Electric Car\",\r\n battery: \"Battery\",\r\n chargingTime: \"Charging Time\",\r\n chargingTimeDay: \"Day (06:00 - 18:00)\",\r\n chargingTimeNight: \"Night (18:00 - 06:00)\",\r\n },\r\n annualPriceIncrease: \"Annual Price Increase (%)\",\r\n costSavings25Years: \"25-Year Savings\",\r\n },\r\n mapDraw: {\r\n instructions: {\r\n show: \"Show Instructions\",\r\n hide: \"Hide Instructions\",\r\n parts: {\r\n roof: \"After you have searched and selected your address. Highlight the part of your roof that you want to add solar panels to. Mark each surface with a polygon with the roof tool\",\r\n obstruction: \". If you have skylights or other obstructions where you don't want to add solar panels, mark those as well with the obstruction tool\",\r\n delete: \". You can delete polygons with the delete tool\",\r\n move: \". If you want to change the corners of a polygon, select the move tool\",\r\n end: \", select the polygon you want to change and drag and drop the corners.\",\r\n }\r\n },\r\n noPolygonSelected: \"No polygon selected\",\r\n noAddressSelected: \"Please select an address\",\r\n information: \"Information\",\r\n calculateSolarPanels: \"Calculate Solar Panels\",\r\n markRoofEdge: \"Mark lower roof edge\",\r\n panels: \"Panels\",\r\n area: \"Area\",\r\n azimuth: \"Azimuth\",\r\n pitch: \"Pitch\",\r\n tools: {\r\n roof: {\r\n name: \"Roof\",\r\n explanation: \"Draw the roof of the building\",\r\n ariaLabel: \"Roof\",\r\n },\r\n obstruction: {\r\n name: \"Obstruction\",\r\n explanation: \"Draw the obstruction of the building\",\r\n ariaLabel: \"Obstruction\",\r\n },\r\n delete: {\r\n name: \"Delete\",\r\n explanation: \"Delete the selected polygon\",\r\n ariaLabel: \"Delete\",\r\n },\r\n move: {\r\n name: \"Move\",\r\n explanation: \"Move the selected polygon\",\r\n ariaLabel: \"Move\",\r\n },\r\n undo: {\r\n name: \"Undo\",\r\n explanation: \"Undo the last action\",\r\n ariaLabel: \"Undo\",\r\n }\r\n },\r\n }\r\n}","import { LanguageStrings } from \"../../types/lang\";\r\n\r\nexport const de: LanguageStrings = {\r\n settings: {\r\n language: \"Sprache\",\r\n rowSpacing: \"Zeilenabstand\",\r\n columnSpacing: \"Spaltenabstand\",\r\n borderInset: \"Randabstand\",\r\n },\r\n mapSelector: {\r\n explanation: \"Wählen Sie Ihre Adresse auf der Karte und passen Sie den Radius des Kreises an, um Ihr Dach vollständig zu erfassen.\",\r\n radius: \"Radius (Meter)\",\r\n accept: \"Akzeptieren\",\r\n chooseOnMap: \"Auf der Karte auswählen\",\r\n },\r\n solarExpert: {\r\n searchPlaceholder: \"Ihre Adresse\"\r\n },\r\n solarSystemForm: {\r\n title: \"Solarsystem Konfiguration\",\r\n systemInformation: \"System Information\",\r\n numberOfPanels: \"Anzahl der Solarpanel\",\r\n panelPeakPower: \"Panelleistung (kW)\",\r\n totalSystemPeakPower: \"Anlagengröße (kWp)\",\r\n electricityPrice: \"Strompreis (€/kWh)\",\r\n compensationRate: \"Einspeisevergütung (€/kWh)\",\r\n autonomy: \"Autarkie\",\r\n costSavings: \"Einsparungen (€/Jahr)\",\r\n householdConsumptionTitle: \"Haushaltsverbrauch\",\r\n consumptionProfileTitle: \"Verbrauchprofil\",\r\n electricityCostsTitle: \"Stromkosten\",\r\n compensationRateTitle: \"Einspeisevergütung\",\r\n resultsTitle: \"Ergebnisse\",\r\n savingsDisclaimer: \"Disclaimer: Die Einsparungen basieren auf dem durchschnittlichen Strompreis in Deutschland.\",\r\n annualConsumption: \"Jährlicher Verbrauch (kWh)\",\r\n name: \"Name\",\r\n email: \"Email\",\r\n nameError: \"Bitte geben Sie Ihren Namen ein\",\r\n emailError: \"Bitte geben Sie eine gültige E-Mail-Adresse ein\",\r\n consumptionProfiles: {\r\n mostlyAtHome: \"Hauptsächlich zu Hause\",\r\n mostlyAway: \"Erwerbstätig\",\r\n },\r\n chart: {\r\n consumption: \"Verbrauch\",\r\n production: \"Produktion\",\r\n consumptionProfile: \"Verbrauchprofil\",\r\n relativeConsumption: \"Verbrauch\",\r\n hourOfDay: \"Stunde des Tages\",\r\n },\r\n validEmailError: \"Bitte geben Sie eine gültige E-Mail-Adresse ein\",\r\n requestOffer: \"Angebot anfordern\",\r\n requestOfferButton: \"Angebot anfordern\",\r\n year: \"Jahr\",\r\n additionalComponents: {\r\n title: \"Zusätzliches\",\r\n heatPump: \"Wärmepumpe\",\r\n electricCar: \"Elektroauto\",\r\n battery: \"Batterie\",\r\n chargingTime: \"Zeitpunkt der Ladung\",\r\n chargingTimeDay: \"Tag (06:00 - 18:00)\",\r\n chargingTimeNight: \"Nacht (18:00 - 06:00)\",\r\n },\r\n annualPriceIncrease: \"Jährliche Preissteigerung (%)\t\",\r\n costSavings25Years: \"25-Jährige Einsparungen\",\r\n },\r\n mapDraw: {\r\n instructions: {\r\n show: \"Anleitung anzeigen\",\r\n hide: \"Anleitung ausblenden\",\r\n parts: {\r\n roof: \"Nachdem Sie Ihre Adresse gesucht und ausgewählt haben. Markieren Sie die Teile Ihres Daches, auf denen Sie Solarpanelleisten hinzufügen möchten. Markieren Sie jede Oberfläche mit einem Polygon mit dem Dachwerkzeug\",\r\n obstruction: \". Wenn Sie Dachfenster oder andere Hindernisse haben, auf denen Sie keine Solarpanele hinzufügen können, markieren Sie diese mit dem Hinderniswerkzeug\",\r\n delete: \". Sie können Polygone mit dem Löschwerkzeug löschen\",\r\n move: \". Wenn Sie die Ecken eines Polygons ändern möchten, wählen Sie das Verschiebewerkzeug\",\r\n end: \", wählen Sie das Polygon, das Sie ändern möchten, und verschieben Sie die Ecken.\",\r\n }\r\n },\r\n markRoofEdge: \"untere Dachkante markieren\",\r\n noPolygonSelected: \"Kein Polygon ausgewählt\",\r\n noAddressSelected: \"Bitte wählen Sie eine Adresse\",\r\n information: \"Information\",\r\n calculateSolarPanels: \"Berechnen Sie die Solarpanele\",\r\n panels: \"Panele\",\r\n area: \"Fläche\",\r\n azimuth: \"Ausrichtung\",\r\n pitch: \"Neigung\",\r\n tools: {\r\n roof: {\r\n name: \"Dach\",\r\n explanation: \"Zeichnen Sie das Dach des Gebäudes\",\r\n ariaLabel: \"Dach\",\r\n },\r\n obstruction: {\r\n name: \"Hindernis\",\r\n explanation: \"Zeichnen Sie das Hindernis des Gebäudes\",\r\n ariaLabel: \"Hindernis\",\r\n },\r\n delete: {\r\n name: \"Löschen\",\r\n explanation: \"Löschen Sie das ausgewählte Polygon\",\r\n ariaLabel: \"Löschen\",\r\n },\r\n move: {\r\n name: \"Verschieben\",\r\n explanation: \"Verschieben Sie Punkte des ausgewählten Polygons\",\r\n ariaLabel: \"Verschieben\",\r\n },\r\n undo: {\r\n name: \"Rückgängig\",\r\n explanation: \"Sie die letzte Aktion rückgängig\",\r\n ariaLabel: \"Rückgängig\",\r\n }\r\n },\r\n }\r\n}","import { LanguageStrings } from \"../../types/lang\";\r\n\r\nexport const es: LanguageStrings = {\r\n settings: {\r\n language: \"Idioma\",\r\n rowSpacing: \"Espaciado de filas\",\r\n columnSpacing: \"Espaciado de columnas\",\r\n borderInset: \"Espaciado de bordes\",\r\n },\r\n mapSelector: {\r\n explanation: \"Selecciona tu casa en el mapa y ajusta el radio del círculo para cubrir completamente tu tejado.\",\r\n radius: \"Radio (metros)\",\r\n accept: \"Aceptar\",\r\n chooseOnMap: \"Seleccionar en el mapa\",\r\n },\r\n solarExpert: {\r\n searchPlaceholder: \"Buscar tu dirección\"\r\n },\r\n solarSystemForm: {\r\n title: \"Configuración del sistema solar\",\r\n systemInformation: \"Información del sistema\",\r\n numberOfPanels: \"Número de paneles solares\",\r\n panelPeakPower: \"Potencia pico del panel (kW)\",\r\n totalSystemPeakPower: \"Potencia pico total del sistema (kW)\",\r\n electricityPrice: \"Precio de la electricidad (€/kWh)\",\r\n compensationRate: \"Tasa de compensación (€/kWh)\",\r\n autonomy: \"Autonomía\",\r\n costSavings: \"Ahorro (€/año)\",\r\n householdConsumptionTitle: \"Consumo de la casa\",\r\n consumptionProfileTitle: \"Perfil de consumo\",\r\n electricityCostsTitle: \"Costes de la electricidad\",\r\n compensationRateTitle: \"Tasa de compensación\",\r\n resultsTitle: \"Resultados\",\r\n savingsDisclaimer: \"Nota: Los ahorros se basan en el precio promedio de la electricidad en España.\",\r\n annualConsumption: \"Consumo anual (kWh)\",\r\n name: \"Nombre\",\r\n email: \"Email\",\r\n nameError: \"Por favor, ingrese su nombre\",\r\n emailError: \"Por favor, ingrese una dirección de correo electrónico válida\",\r\n consumptionProfiles: {\r\n mostlyAtHome: \"Principalmente en casa\",\r\n mostlyAway: \"Empleo\",\r\n },\r\n chart: {\r\n consumption: \"Consumo\",\r\n production: \"Producción\",\r\n consumptionProfile: \"Perfil de consumo\",\r\n relativeConsumption: \"Consumo\",\r\n hourOfDay: \"Hora del día\",\r\n },\r\n validEmailError: \"Por favor, ingrese una dirección de correo electrónico válida\",\r\n requestOffer: \"Solicitar una oferta\",\r\n requestOfferButton: \"Solicitar oferta\",\r\n year: \"Año\",\r\n additionalComponents: {\r\n title: \"Componentes adicionales\",\r\n heatPump: \"Caldera\",\r\n electricCar: \"Coche eléctrico\",\r\n battery: \"Batería\",\r\n chargingTime: \"Hora de carga\",\r\n chargingTimeDay: \"Día (06:00 - 18:00)\",\r\n chargingTimeNight: \"Noche (18:00 - 06:00)\",\r\n },\r\n annualPriceIncrease: \"Aumento anual del precio (%)\",\r\n costSavings25Years: \"Ahorro en 25 años\",\r\n },\r\n mapDraw: {\r\n instructions: {\r\n show: \"Mostrar instrucciones\",\r\n hide: \"Ocultar instrucciones\",\r\n parts: {\r\n roof: \"Después de buscar y seleccionar su dirección, resalte la parte del tejado donde desea añadir paneles solares. Marque cada superficie con un polígono con la herramienta de tejado\",\r\n obstruction: \". Si tiene claraboyas u otras obstrucciones donde no desea añadir paneles solares, márquelas también con la herramienta de obstrucción\",\r\n delete: \". Puede eliminar polígonos con la herramienta de eliminación\",\r\n move: \". Si desea cambiar las esquinas de un polígono, seleccione la herramienta de movimiento\",\r\n end: \", seleccione el polígono que desea modificar y arrastre y suelte los bordes.\",\r\n }\r\n },\r\n markRoofEdge: \"Marcar borde inferior del tejado\",\r\n noPolygonSelected: \"No se ha seleccionado un polígono\",\r\n noAddressSelected: \"Por favor, seleccione una dirección\",\r\n information: \"Información\",\r\n calculateSolarPanels: \"Calcular paneles solares\",\r\n panels: \"Paneles\",\r\n area: \"Área\",\r\n azimuth: \"Azimut\",\r\n pitch: \"Inclinación\",\r\n tools: {\r\n roof: {\r\n name: \"Tejado\",\r\n explanation: \"Dibuje el tejado del edificio\",\r\n ariaLabel: \"Tejado\",\r\n },\r\n obstruction: {\r\n name: \"Obstrucción\",\r\n explanation: \"Dibuje la obstrucción del edificio\",\r\n ariaLabel: \"Obstrucción\",\r\n },\r\n delete: {\r\n name: \"Eliminar\",\r\n explanation: \"Elimine el polígono seleccionado\",\r\n ariaLabel: \"Eliminar\",\r\n },\r\n move: {\r\n name: \"Mover\",\r\n explanation: \"Mueva los puntos del polígono seleccionado\",\r\n ariaLabel: \"Mover\",\r\n },\r\n undo: {\r\n name: \"Deshacer\",\r\n explanation: \"Deshaga la última acción\",\r\n ariaLabel: \"Deshacer\",\r\n }\r\n },\r\n }\r\n}","import { Language, LanguageStrings } from \"../../types/lang\";\r\nimport { en } from \"./english\";\r\nimport { de } from \"./german\";\r\nimport { es } from \"./spanish\";\r\n\r\nconst languageStrings: Record<Language, LanguageStrings> = {\r\n en: en,\r\n es: es,\r\n de: de,\r\n}\r\n\r\n\r\nexport function getLanguageStrings(lang: Language): LanguageStrings {\r\n const defaultLang = languageStrings[\"en\"];\r\n if (lang === \"en\") {\r\n return defaultLang;\r\n }\r\n const langStrings = languageStrings[lang];\r\n \r\n // Deep merge the default language strings with the selected language strings\r\n const mergedStrings = JSON.parse(JSON.stringify(defaultLang)); // Deep clone default\r\n \r\n function deepMerge(target: any, source: any) {\r\n for (const key in source) {\r\n if (source[key] instanceof Object && key in target) {\r\n deepMerge(target[key], source[key]);\r\n } else if (source[key] !== undefined) {\r\n target[key] = source[key];\r\n }\r\n }\r\n }\r\n \r\n deepMerge(mergedStrings, langStrings);\r\n return mergedStrings;\r\n}\r\n","import { getRenderingRef, forceUpdate } from '@stencil/core';\n\nconst appendToMap = (map, propName, value) => {\n const items = map.get(propName);\n if (!items) {\n map.set(propName, [value]);\n }\n else if (!items.includes(value)) {\n items.push(value);\n }\n};\nconst debounce = (fn, ms) => {\n let timeoutId;\n return (...args) => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n timeoutId = setTimeout(() => {\n timeoutId = 0;\n fn(...args);\n }, ms);\n };\n};\n\n/**\n * Check if a possible element isConnected.\n * The property might not be there, so we check for it.\n *\n * We want it to return true if isConnected is not a property,\n * otherwise we would remove these elements and would not update.\n *\n * Better leak in Edge than to be useless.\n */\nconst isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;\nconst cleanupElements = debounce((map) => {\n for (let key of map.keys()) {\n map.set(key, map.get(key).filter(isConnected));\n }\n}, 2_000);\nconst stencilSubscription = () => {\n if (typeof getRenderingRef !== 'function') {\n // If we are not in a stencil project, we do nothing.\n // This function is not really exported by @stencil/core.\n return {};\n }\n const elmsToUpdate = new Map();\n return {\n dispose: () => elmsToUpdate.clear(),\n get: (propName) => {\n const elm = getRenderingRef();\n if (elm) {\n appendToMap(elmsToUpdate, propName, elm);\n }\n },\n set: (propName) => {\n const elements = elmsToUpdate.get(propName);\n if (elements) {\n elmsToUpdate.set(propName, elements.filter(forceUpdate));\n }\n cleanupElements(elmsToUpdate);\n },\n reset: () => {\n elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));\n cleanupElements(elmsToUpdate);\n },\n };\n};\n\nconst unwrap = (val) => (typeof val === 'function' ? val() : val);\nconst createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {\n const unwrappedState = unwrap(defaultState);\n let states = new Map(Object.entries(unwrappedState ?? {}));\n const handlers = {\n dispose: [],\n get: [],\n set: [],\n reset: [],\n };\n const reset = () => {\n // When resetting the state, the default state may be a function - unwrap it to invoke it.\n // otherwise, the state won't be properly reset\n states = new Map(Object.entries(unwrap(defaultState) ?? {}));\n handlers.reset.forEach((cb) => cb());\n };\n const dispose = () => {\n // Call first dispose as resetting the state would\n // cause less updates ;)\n handlers.dispose.forEach((cb) => cb());\n reset();\n };\n const get = (propName) => {\n handlers.get.forEach((cb) => cb(propName));\n return states.get(propName);\n };\n const set = (propName, value) => {\n const oldValue = states.get(propName);\n if (shouldUpdate(value, oldValue, propName)) {\n states.set(propName, value);\n handlers.set.forEach((cb) => cb(propName, value, oldValue));\n }\n };\n const state = (typeof Proxy === 'undefined'\n ? {}\n : new Proxy(unwrappedState, {\n get(_, propName) {\n return get(propName);\n },\n ownKeys(_) {\n return Array.from(states.keys());\n },\n getOwnPropertyDescriptor() {\n return {\n enumerable: true,\n configurable: true,\n };\n },\n has(_, propName) {\n return states.has(propName);\n },\n set(_, propName, value) {\n set(propName, value);\n return true;\n },\n }));\n const on = (eventName, callback) => {\n handlers[eventName].push(callback);\n return () => {\n removeFromArray(handlers[eventName], callback);\n };\n };\n const onChange = (propName, cb) => {\n const unSet = on('set', (key, newValue) => {\n if (key === propName) {\n cb(newValue);\n }\n });\n // We need to unwrap the defaultState because it might be a function.\n // Otherwise we might not be sending the right reset value.\n const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));\n return () => {\n unSet();\n unReset();\n };\n };\n const use = (...subscriptions) => {\n const unsubs = subscriptions.reduce((unsubs, subscription) => {\n if (subscription.set) {\n unsubs.push(on('set', subscription.set));\n }\n if (subscription.get) {\n unsubs.push(on('get', subscription.get));\n }\n if (subscription.reset) {\n unsubs.push(on('reset', subscription.reset));\n }\n if (subscription.dispose) {\n unsubs.push(on('dispose', subscription.dispose));\n }\n return unsubs;\n }, []);\n return () => unsubs.forEach((unsub) => unsub());\n };\n const forceUpdate = (key) => {\n const oldValue = states.get(key);\n handlers.set.forEach((cb) => cb(key, oldValue, oldValue));\n };\n return {\n state,\n get,\n set,\n on,\n onChange,\n use,\n dispose,\n reset,\n forceUpdate,\n };\n};\nconst removeFromArray = (array, item) => {\n const index = array.indexOf(item);\n if (index >= 0) {\n array[index] = array[array.length - 1];\n array.length--;\n }\n};\n\nconst createStore = (defaultState, shouldUpdate) => {\n const map = createObservableMap(defaultState, shouldUpdate);\n map.use(stencilSubscription());\n return map;\n};\n\nexport { createObservableMap, createStore };\n","import { createStore } from \"@stencil/store\";\r\nimport { Language } from \"./components\";\r\n\r\nexport interface Settings {\r\n language: Language;\r\n rowSpacing: number;\r\n columnSpacing: number;\r\n borderInset: number;\r\n heatPumpM2Consumption: number;\r\n}\r\n\r\nexport interface State {\r\n latitude: number | null;\r\n longitude: number | null;\r\n radiusMeters: number;\r\n settings: Settings;\r\n settingsVersion: number;\r\n isMobile: boolean;\r\n}\r\n\r\nconst {state, onChange} = createStore<State>({\r\n latitude: null,\r\n longitude: null,\r\n radiusMeters: 15,\r\n settings: {\r\n language: \"en\",\r\n rowSpacing: 1,\r\n columnSpacing: 1,\r\n borderInset: 0.1,\r\n heatPumpM2Consumption: 85,\r\n },\r\n settingsVersion: 1,\r\n isMobile: false,\r\n});\r\n\r\nonChange(\"latitude\", (value) => {\r\n state.latitude = value;\r\n});\r\n\r\nonChange(\"longitude\", (value) => {\r\n state.longitude = value;\r\n});\r\n\r\nonChange(\"radiusMeters\", (value) => {\r\n state.radiusMeters = value;\r\n});\r\n\r\nonChange(\"settings\", (value) => {\r\n state.settings = value;\r\n});\r\n\r\nonChange(\"settingsVersion\", (value) => {\r\n state.settingsVersion = value;\r\n});\r\n\r\nonChange(\"isMobile\", (value) => {\r\n state.isMobile = value;\r\n});\r\n\r\nexport {state, onChange};\r\n","/*! 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","import {\r\n Component,\r\n Element,\r\n h,\r\n Listen,\r\n Prop,\r\n State,\r\n Watch,\r\n} from \"@stencil/core\";\r\n\r\nimport {\r\n renderCombinedWithZoom,\r\n renderSolarPanel,\r\n} from \"../../utils/visualize\";\r\nimport {\r\n BuildingInsightsResponse,\r\n GeoTiff,\r\n SolarPanelType,\r\n} from \"../../utils/solar\";\r\nimport { fetchSolarData, getBuildingImages } from \"../../utils/api\";\r\nimport { drawPolygon, isPointInPolygon } from \"../../utils/render/polygon\";\r\nimport { projectPointPerpendicularToLine } from \"../../utils/render/projection\";\r\nimport { Point, Polygon, SelectedPolygon } from \"../../types/shapes\";\r\nimport {\r\n deleteTool,\r\n markRoofEdgeTool,\r\n moveTool,\r\n obstructionTool,\r\n roofTool,\r\n Tool,\r\n tools,\r\n} from \"../../utils/render/tools\";\r\nimport {\r\n DEFAULT_SOLAR_EXPERT_CONFIG,\r\n DEFAULT_SOLAR_PANEL_TYPE,\r\n SolarExpertConfig,\r\n} from \"../../config\";\r\nimport { getFillColor } from \"../../utils/render/color\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\nimport { calculatePolygonArea, getPixelInMeters } from \"../../utils/utils\";\r\nimport {\r\n getBestFittingRoofSegment,\r\n SolarPanelSystemPart,\r\n} from \"../../utils/geometry/fitting\";\r\nimport { getOptimalSolarPositionFully } from \"../../utils/geometry/gridMatch\";\r\nimport { BORDER_INSET, DEFAULT_SUNNINESS } from \"../../constants\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { onChange, Settings, state } from \"../../store\";\r\n\r\n@Component({\r\n tag: \"map-draw\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class MapDraw {\r\n @Prop()\r\n apiKey: string = \"\";\r\n @Prop()\r\n config: SolarExpertConfig = DEFAULT_SOLAR_EXPERT_CONFIG;\r\n @Prop()\r\n solarPanel: SolarPanelType = DEFAULT_SOLAR_PANEL_TYPE;\r\n\r\n @State()\r\n showInstructions: boolean = true;\r\n @State()\r\n showSettings: boolean = false;\r\n @State()\r\n zoom: number = 1;\r\n @State()\r\n loadingState: \"empty\" | \"loading\" | \"loaded\" = \"empty\";\r\n @State()\r\n rgbTiff: GeoTiff | null = null;\r\n @State()\r\n draggedPointIndex: number | null = null;\r\n @State()\r\n hoveredPointIndex: number | null = null;\r\n @State()\r\n hoveredPolygon: SelectedPolygon | null = null;\r\n @State()\r\n shiftKeyPressed: boolean = false;\r\n @State()\r\n altKeyPressed: boolean = false;\r\n @State()\r\n mousePoint: Point | null = null;\r\n @State()\r\n currentTool: Tool = roofTool;\r\n @State()\r\n roofPolygons: { [id: string]: Polygon } = {};\r\n @State()\r\n roofPolygonsSolarPanels: { [id: string]: SolarPanelSystemPart } = {};\r\n @State()\r\n obstructionPolygons: { [id: string]: Polygon } = {};\r\n @State()\r\n selectedPolygon: SelectedPolygon | null = null;\r\n @State()\r\n buildingInsights: BuildingInsightsResponse | null = null;\r\n @State()\r\n pixelInMeters: number = 0.2;\r\n @State()\r\n isMobile: boolean = false;\r\n @State()\r\n highlightedEdge: { pointA: Point; pointB: Point } | null = null;\r\n\r\n @Element()\r\n el: HTMLElement;\r\n private canvasElement?: HTMLCanvasElement;\r\n private polygonCanvas?: HTMLCanvasElement;\r\n private polygonCtx?: CanvasRenderingContext2D;\r\n\r\n private getCurrentPolygon(): Polygon | null {\r\n if (!this.selectedPolygon) {\r\n return null;\r\n }\r\n const { _id, type } = this.selectedPolygon;\r\n return type === \"roof\"\r\n ? this.roofPolygons[_id]\r\n : this.obstructionPolygons[_id];\r\n }\r\n\r\n componentWillLoad() {\r\n onChange(\"latitude\", () => {\r\n this.getBuildingImages();\r\n this.getBuildingInsights();\r\n });\r\n onChange(\"longitude\", () => {\r\n this.getBuildingImages();\r\n this.getBuildingInsights();\r\n });\r\n }\r\n\r\n componentDidLoad() {\r\n if (state.latitude && state.longitude) {\r\n this.loadingState = \"loading\";\r\n this.getBuildingInsights();\r\n this.getBuildingImages();\r\n }\r\n\r\n requestAnimationFrame(() => {\r\n if (this.canvasElement) {\r\n const rect = this.canvasElement.getBoundingClientRect();\r\n this.canvasElement.width = rect.width;\r\n this.canvasElement.height = rect.height;\r\n this.drawMap();\r\n }\r\n });\r\n }\r\n\r\n private sizeCanvas(width: number, height: number) {\r\n if (this.canvasElement) {\r\n this.canvasElement.width = width;\r\n this.canvasElement.height = height;\r\n }\r\n if (this.polygonCanvas) {\r\n this.polygonCanvas.width = width;\r\n this.polygonCanvas.height = height;\r\n this.polygonCtx = this.polygonCanvas.getContext(\"2d\");\r\n }\r\n }\r\n\r\n async getBuildingInsights() {\r\n if (!state.latitude || !state.longitude) {\r\n return;\r\n }\r\n this.loadingState = \"loading\";\r\n\r\n if (this.buildingInsights) {\r\n const sameLocation =\r\n this.buildingInsights.center.latitude === state.latitude &&\r\n this.buildingInsights.center.longitude === state.longitude;\r\n if (sameLocation) {\r\n return;\r\n }\r\n this.obstructionPolygons = {};\r\n this.roofPolygons = {};\r\n this.selectedPolygon = null;\r\n this.hoveredPolygon = null;\r\n this.canvasElement.getContext(\"2d\")?.clearRect(\r\n 0,\r\n 0,\r\n this.canvasElement.width,\r\n this.canvasElement.height,\r\n );\r\n this.polygonCtx?.clearRect(\r\n 0,\r\n 0,\r\n this.polygonCanvas.width,\r\n this.polygonCanvas.height,\r\n );\r\n this.rgbTiff = null;\r\n }\r\n this.buildingInsights = await fetchSolarData(\r\n state.latitude,\r\n state.longitude,\r\n this.apiKey,\r\n );\r\n if (!this.buildingInsights) {\r\n alert(\"No building insights found. Please enter them manually.\");\r\n }\r\n\r\n // If on mobile, automatically calculate panels using Google API data\r\n if (state.isMobile && this.buildingInsights) {\r\n const maxPanels =\r\n this.buildingInsights.solarPotential.maxArrayPanelsCount;\r\n const approximatedPanels = Math.floor(maxPanels * 3 / 4); // Use two thirds of max panels\r\n\r\n const positionedPanels = Array(approximatedPanels).fill(null)\r\n .map((_, __) => ({\r\n panel: this.solarPanel,\r\n pixelPosition: {\r\n x: -1,\r\n y: -1,\r\n },\r\n horizontal: true,\r\n rotation: 0,\r\n }));\r\n\r\n this.roofPolygonsSolarPanels = {\r\n ...this.roofPolygonsSolarPanels,\r\n [\"mobile-panels\"]: {\r\n positionedPanels,\r\n sunniness:\r\n this.buildingInsights.solarPotential.buildingStats\r\n .sunshineQuantiles[5] ?? DEFAULT_SUNNINESS,\r\n },\r\n };\r\n }\r\n }\r\n\r\n async getBuildingImages() {\r\n if (!state.latitude || !state.longitude) {\r\n return;\r\n }\r\n if (this.buildingInsights) {\r\n const sameLocation =\r\n this.buildingInsights.center.latitude === state.latitude &&\r\n this.buildingInsights.center.longitude === state.longitude;\r\n if (sameLocation) {\r\n return;\r\n }\r\n }\r\n this.rgbTiff = await getBuildingImages(\r\n state.latitude,\r\n state.longitude,\r\n this.apiKey,\r\n state.radiusMeters,\r\n );\r\n this.pixelInMeters = getPixelInMeters(this.rgbTiff);\r\n this.loadingState = \"loaded\";\r\n }\r\n\r\n private convertToCanvasCoordinates(event: MouseEvent): Point {\r\n const rect = this.polygonCanvas.getBoundingClientRect();\r\n const siteX = event.clientX - rect.left;\r\n const siteY = event.clientY - rect.top;\r\n return {\r\n x: siteX / (rect.right - rect.left) * this.canvasElement.width,\r\n y: siteY / (rect.bottom - rect.top) * this.canvasElement.height,\r\n };\r\n }\r\n\r\n @Watch(\"rgbTiff\")\r\n @Watch(\"buildingInsights\")\r\n @Watch(\"canvasElement\")\r\n async drawMap() {\r\n if (\r\n !this.canvasElement || !this.rgbTiff || !this.buildingInsights\r\n ) return;\r\n\r\n this.sizeCanvas(this.rgbTiff.width, this.rgbTiff.height);\r\n\r\n renderCombinedWithZoom({\r\n rgb: this.rgbTiff,\r\n zoom: this.zoom,\r\n canvas: this.canvasElement,\r\n });\r\n }\r\n\r\n @Listen(\"mousemove\", { target: \"document\" })\r\n handleMouseMove(event: MouseEvent) {\r\n if (state.isMobile) return; // Prevent interactions on mobile\r\n if (!this.polygonCanvas || !this.polygonCtx) return;\r\n\r\n // translate the website pixel coordinates to the canvas coordinates\r\n const { x, y } = this.convertToCanvasCoordinates(event);\r\n this.mousePoint = { x, y };\r\n\r\n const currentPolygon = this.getCurrentPolygon();\r\n let redraw = false;\r\n\r\n if (this.currentTool.name === \"markRoofEdge\") {\r\n let distances = [];\r\n for (let i = 0; i < currentPolygon?.points.length; i++) {\r\n const pointA = currentPolygon?.points[i];\r\n const pointB = currentPolygon\r\n ?.points[(i + 1) % currentPolygon?.points.length];\r\n const distanceA = Math.sqrt(\r\n Math.pow(x - pointA.x, 2) + Math.pow(y - pointA.y, 2),\r\n );\r\n const distanceB = Math.sqrt(\r\n Math.pow(x - pointB.x, 2) + Math.pow(y - pointB.y, 2),\r\n );\r\n const edgeLength = Math.sqrt(\r\n Math.pow(pointA.x - pointB.x, 2) +\r\n Math.pow(pointA.y - pointB.y, 2),\r\n );\r\n distances.push({\r\n dist: distanceA + distanceB - edgeLength,\r\n edge: { pointA, pointB },\r\n });\r\n }\r\n const closestEdge = distances.sort((a, b) => a.dist - b.dist)[0];\r\n if (closestEdge && (closestEdge.dist < 10)) {\r\n this.highlightedEdge = closestEdge.edge;\r\n redraw = true;\r\n } else if (this.highlightedEdge) {\r\n this.highlightedEdge = null;\r\n redraw = true;\r\n }\r\n }\r\n\r\n // Check for point hover\r\n const newHoveredPointIndex = currentPolygon?.points.findIndex(\r\n (point) => {\r\n const distance = Math.sqrt(\r\n Math.pow(x - point.x, 2) + Math.pow(y - point.y, 2),\r\n );\r\n return distance < 10;\r\n },\r\n );\r\n\r\n // Check for polygon hover\r\n let newHoveredPolygon = null;\r\n for (const polygon of Object.values(this.obstructionPolygons)) {\r\n if (isPointInPolygon({ x, y }, polygon)) {\r\n newHoveredPolygon = { _id: polygon._id, type: \"obstruction\" };\r\n break;\r\n }\r\n }\r\n // obstruction polygons get priority\r\n if (!newHoveredPolygon) {\r\n for (const polygon of Object.values(this.roofPolygons)) {\r\n if (isPointInPolygon({ x, y }, polygon)) {\r\n newHoveredPolygon = { _id: polygon._id, type: \"roof\" };\r\n break;\r\n }\r\n }\r\n }\r\n\r\n // Only redraw if hover state changed\r\n if (\r\n this.hoveredPolygon ||\r\n newHoveredPointIndex !== this.hoveredPointIndex ||\r\n JSON.stringify(newHoveredPolygon) !==\r\n JSON.stringify(this.hoveredPolygon)\r\n ) {\r\n this.hoveredPointIndex = newHoveredPointIndex;\r\n this.hoveredPolygon = newHoveredPolygon;\r\n redraw = true;\r\n }\r\n\r\n // Handle dragging\r\n if (\r\n this.draggedPointIndex !== null && currentPolygon &&\r\n this.currentTool.name === \"move\"\r\n ) {\r\n currentPolygon.points[this.draggedPointIndex] = { x, y };\r\n // Recalculate area if this is a roof polygon\r\n if (currentPolygon.type === \"roof\" && currentPolygon.closed) {\r\n const metersInPixels = 1 / this.pixelInMeters;\r\n const area = calculatePolygonArea(currentPolygon.points) /\r\n (metersInPixels * metersInPixels);\r\n currentPolygon.details.area = area;\r\n }\r\n redraw = true;\r\n }\r\n\r\n if (this.shiftKeyPressed) {\r\n redraw = true;\r\n }\r\n\r\n if (redraw) {\r\n this.drawPolygons();\r\n }\r\n }\r\n\r\n private drawPolygons() {\r\n if (!this.polygonCanvas || !this.polygonCtx) return;\r\n\r\n // Clear the canvas and redraw the map\r\n this.polygonCtx.clearRect(\r\n 0,\r\n 0,\r\n this.polygonCanvas.width,\r\n this.polygonCanvas.height,\r\n );\r\n\r\n // draw roof polygons\r\n for (const polygon of Object.values(this.roofPolygons)) {\r\n const fillColor = getFillColor(\r\n this.selectedPolygon,\r\n this.hoveredPolygon,\r\n polygon._id,\r\n polygon,\r\n this.config,\r\n );\r\n\r\n drawPolygon({\r\n polygonCtx: this.polygonCtx,\r\n polygonCanvas: this.polygonCanvas,\r\n polygon,\r\n strokeColor: polygon.closed\r\n ? this.config.closedRoofColor\r\n : this.config.openRoofColor,\r\n fillColor,\r\n pixelInMeters: this.pixelInMeters,\r\n shiftKeyPressed: this.shiftKeyPressed,\r\n mousePoint: this.mousePoint,\r\n highlightColor: this.config.highlightColor,\r\n highlightedEdge: this.highlightedEdge,\r\n });\r\n\r\n const solarPanels = this.roofPolygonsSolarPanels[polygon._id];\r\n const convertedSolarPanel: SolarPanelType = {\r\n ...this.solarPanel,\r\n widthMeters: this.solarPanel.widthMeters / this.pixelInMeters,\r\n heightMeters: this.solarPanel.heightMeters / this.pixelInMeters,\r\n };\r\n if (solarPanels) {\r\n for (const panel of solarPanels.positionedPanels) {\r\n renderSolarPanel(\r\n panel,\r\n this.polygonCtx,\r\n convertedSolarPanel.widthMeters,\r\n convertedSolarPanel.heightMeters,\r\n polygon.details?.azimuth,\r\n polygon.details?.pitch,\r\n );\r\n }\r\n }\r\n }\r\n\r\n // draw obstruction polygons\r\n for (const polygon of Object.values(this.obstructionPolygons)) {\r\n const fillColor = getFillColor(\r\n this.selectedPolygon,\r\n this.hoveredPolygon,\r\n polygon._id,\r\n polygon,\r\n this.config,\r\n );\r\n\r\n drawPolygon({\r\n polygonCtx: this.polygonCtx,\r\n polygonCanvas: this.polygonCanvas,\r\n polygon,\r\n pixelInMeters: this.pixelInMeters,\r\n shiftKeyPressed: this.shiftKeyPressed,\r\n mousePoint: this.mousePoint,\r\n strokeColor: polygon.closed\r\n ? this.config.closedObstructionColor\r\n : this.config.openObstructionColor,\r\n fillColor,\r\n highlightColor: this.config.highlightColor,\r\n });\r\n }\r\n }\r\n\r\n private deletePolygon(_id: string) {\r\n if (this.selectedPolygon?._id === _id) {\r\n this.selectedPolygon = null;\r\n }\r\n if (this.roofPolygons[_id]) {\r\n delete this.roofPolygons[_id];\r\n delete this.roofPolygonsSolarPanels[_id];\r\n }\r\n if (this.obstructionPolygons[_id]) {\r\n delete this.obstructionPolygons[_id];\r\n }\r\n }\r\n\r\n @Listen(\"keydown\", { target: \"document\" })\r\n handleKeyDown(event: KeyboardEvent) {\r\n if (event.target instanceof HTMLInputElement) {\r\n return;\r\n }\r\n // Handle shift key for perpendicular points\r\n if (event.shiftKey && !this.shiftKeyPressed) {\r\n this.shiftKeyPressed = true;\r\n this.drawPolygons();\r\n return;\r\n }\r\n if (event.altKey && !this.altKeyPressed) {\r\n this.altKeyPressed = true;\r\n return;\r\n }\r\n if (\r\n (event.key === \"Delete\" || event.key === \"Backspace\") &&\r\n this.selectedPolygon\r\n ) {\r\n const currentPolygon = this.getCurrentPolygon();\r\n if (currentPolygon.closed) {\r\n this.deletePolygon(currentPolygon._id);\r\n this.drawPolygons();\r\n return;\r\n }\r\n currentPolygon.points.pop();\r\n this.drawPolygons();\r\n return;\r\n }\r\n\r\n // Handle tool selection shortcuts\r\n const pressedKey = event.key.toLowerCase();\r\n const tool = tools.find((t) =>\r\n t.keyboardShortcut?.toLowerCase() === pressedKey\r\n );\r\n if (tool) {\r\n this.currentTool = tool;\r\n }\r\n }\r\n\r\n @Listen(\"keyup\", { target: \"document\" })\r\n handleKeyUp(event: KeyboardEvent) {\r\n if (!event.shiftKey && this.shiftKeyPressed) {\r\n this.shiftKeyPressed = false;\r\n this.drawPolygons();\r\n }\r\n if (!event.altKey && this.altKeyPressed) {\r\n this.altKeyPressed = false;\r\n }\r\n }\r\n\r\n private undo() {\r\n const currentPolygon = this.getCurrentPolygon();\r\n if (!currentPolygon) {\r\n return;\r\n }\r\n if (currentPolygon.closed) {\r\n currentPolygon.closed = false;\r\n if (currentPolygon.type === \"roof\") {\r\n delete this.roofPolygonsSolarPanels[currentPolygon._id];\r\n this.currentTool = roofTool;\r\n this.highlightedEdge = null;\r\n } else if (currentPolygon.type === \"obstruction\") {\r\n this.currentTool = obstructionTool;\r\n }\r\n } else {\r\n currentPolygon.points.pop();\r\n }\r\n this.drawPolygons();\r\n }\r\n\r\n @Listen(\"mousedown\", { target: \"document\" })\r\n handleMouseDown(event: MouseEvent) {\r\n if (this.currentTool.name === \"undo\") {\r\n return;\r\n }\r\n if (state.isMobile) return; // Prevent interactions on mobile\r\n if (!this.polygonCanvas || !this.polygonCtx) return;\r\n if (!this.polygonCanvas.contains(event.target as Node)) return;\r\n\r\n let { x, y } = this.convertToCanvasCoordinates(event);\r\n\r\n if (this.currentTool.name === \"markRoofEdge\") {\r\n if (!this.highlightedEdge) {\r\n return;\r\n }\r\n const x = this.highlightedEdge.pointA.x -\r\n this.highlightedEdge.pointB.x;\r\n const y = this.highlightedEdge.pointA.y -\r\n this.highlightedEdge.pointB.y;\r\n const azimuth = Math.atan2(-x, y) * (180 / Math.PI);\r\n this.calculateSolarPanels();\r\n this.handleAzimuthChange({\r\n target: {\r\n value: azimuth,\r\n },\r\n } as unknown as Event);\r\n return;\r\n }\r\n if (this.currentTool.name === \"delete\") {\r\n if (!this.hoveredPolygon) {\r\n return;\r\n }\r\n const { _id, type } = this.hoveredPolygon;\r\n if (type === \"roof\") {\r\n delete this.roofPolygons[_id];\r\n delete this.roofPolygonsSolarPanels[_id];\r\n } else if (type === \"obstruction\") {\r\n delete this.obstructionPolygons[_id];\r\n }\r\n this.hoveredPolygon = null;\r\n if (this.selectedPolygon?._id === _id) {\r\n this.selectedPolygon = null;\r\n }\r\n this.drawPolygons();\r\n return;\r\n }\r\n const currentPolygon = this.getCurrentPolygon();\r\n if (this.currentTool.name === \"move\") {\r\n // Check if we're clicking on a point of the selected polygon\r\n if (this.selectedPolygon) {\r\n const pointIndex = currentPolygon?.points.findIndex((point) => {\r\n const distance = Math.sqrt(\r\n Math.pow(x - point.x, 2) + Math.pow(y - point.y, 2),\r\n );\r\n return distance < 10;\r\n });\r\n if (pointIndex !== undefined && pointIndex !== -1) {\r\n this.draggedPointIndex = pointIndex;\r\n return;\r\n }\r\n\r\n if (this.hoveredPolygon) {\r\n this.selectedPolygon = this.hoveredPolygon;\r\n return;\r\n }\r\n }\r\n this.selectedPolygon = null;\r\n this.drawPolygons();\r\n return;\r\n }\r\n if (\r\n !this.selectedPolygon || currentPolygon?.closed ||\r\n this.currentTool.name !== this.selectedPolygon?.type\r\n ) {\r\n // no polygon is active, create a new one\r\n const newPolygon: Polygon = {\r\n _id: uuidv4(),\r\n points: [{ x, y }],\r\n type: this.currentTool.name,\r\n closed: false,\r\n };\r\n let _id;\r\n if (this.currentTool.name === \"roof\") {\r\n this.roofPolygons = {\r\n ...this.roofPolygons,\r\n [newPolygon._id]: newPolygon,\r\n };\r\n _id = newPolygon._id;\r\n } else if (this.currentTool.name === \"obstruction\") {\r\n this.obstructionPolygons = {\r\n ...this.obstructionPolygons,\r\n [newPolygon._id]: newPolygon,\r\n };\r\n _id = newPolygon._id;\r\n }\r\n this.selectedPolygon = { _id, type: this.currentTool.name };\r\n this.drawPolygons();\r\n return;\r\n }\r\n\r\n if (currentPolygon.closed) {\r\n return;\r\n }\r\n\r\n // If we have at least one point, check if we're clicking near the first point\r\n if (currentPolygon.points.length > 2) {\r\n const firstPoint = currentPolygon.points[0];\r\n const distance = Math.sqrt(\r\n Math.pow(x - firstPoint.x, 2) + Math.pow(y - firstPoint.y, 2),\r\n );\r\n\r\n if (distance < 10) {\r\n this.closePolygon();\r\n return;\r\n }\r\n }\r\n\r\n // Handle shift key for perpendicular points\r\n if (event.shiftKey && currentPolygon?.points.length >= 2) {\r\n const projectedPoint = projectPointPerpendicularToLine({\r\n x,\r\n y,\r\n lastPoint:\r\n currentPolygon.points[currentPolygon.points.length - 1],\r\n secondLastPoint:\r\n currentPolygon.points[currentPolygon.points.length - 2],\r\n });\r\n x = projectedPoint.x;\r\n y = projectedPoint.y;\r\n }\r\n\r\n currentPolygon.points = [...currentPolygon.points, { x, y }];\r\n this.drawPolygons();\r\n }\r\n\r\n @Listen(\"mouseup\", { target: \"document\" })\r\n handleMouseUp() {\r\n this.draggedPointIndex = null;\r\n }\r\n\r\n private closePolygon() {\r\n const currentPolygon = this.getCurrentPolygon();\r\n if (\r\n currentPolygon.points.length >= 3 &&\r\n (this.currentTool.name === \"roof\" ||\r\n this.currentTool.name === \"obstruction\")\r\n ) {\r\n currentPolygon.closed = true;\r\n }\r\n\r\n if (currentPolygon.type === \"roof\") {\r\n // Calculate basic polygon details\r\n const metersInPixels = 1 / this.pixelInMeters;\r\n const area = calculatePolygonArea(currentPolygon.points) /\r\n (metersInPixels * metersInPixels);\r\n const bestMatch = getBestFittingRoofSegment(\r\n currentPolygon,\r\n this.buildingInsights?.solarPotential.roofSegmentStats,\r\n this.rgbTiff.bounds,\r\n this.canvasElement,\r\n );\r\n\r\n if (bestMatch) {\r\n currentPolygon.details = {\r\n area,\r\n azimuth: bestMatch.azimuthDegrees,\r\n pitch: bestMatch.pitchDegrees,\r\n };\r\n } else {\r\n currentPolygon.details = {\r\n area,\r\n azimuth: 0,\r\n pitch: 0,\r\n };\r\n }\r\n\r\n this.scrollToCanvas();\r\n }\r\n\r\n this.drawPolygons();\r\n this.currentTool = moveTool;\r\n }\r\n\r\n private calculateSolarPanels({ redraw = true }: { redraw?: boolean } = {}) {\r\n const currentPolygon = this.getCurrentPolygon();\r\n\r\n if (!currentPolygon.details) {\r\n return;\r\n }\r\n\r\n if (this.roofPolygonsSolarPanels[currentPolygon._id]) {\r\n delete this.roofPolygonsSolarPanels[currentPolygon._id];\r\n }\r\n\r\n const convertedSolarPanel: SolarPanelType = {\r\n ...this.solarPanel,\r\n widthMeters: this.solarPanel.widthMeters / this.pixelInMeters,\r\n heightMeters: this.solarPanel.heightMeters / this.pixelInMeters,\r\n };\r\n const inset = BORDER_INSET / this.pixelInMeters;\r\n const solarPanels = getOptimalSolarPositionFully(\r\n currentPolygon,\r\n Object.values(this.obstructionPolygons),\r\n convertedSolarPanel,\r\n currentPolygon.details?.azimuth,\r\n inset,\r\n currentPolygon.details?.pitch,\r\n );\r\n this.roofPolygonsSolarPanels = {\r\n ...this.roofPolygonsSolarPanels,\r\n [currentPolygon._id]: {\r\n positionedPanels: solarPanels,\r\n sunniness: currentPolygon.details?.assignedRoofStats?.stats\r\n .sunshineQuantiles[5] ??\r\n this.buildingInsights.solarPotential.buildingStats\r\n .sunshineQuantiles[5] ??\r\n DEFAULT_SUNNINESS,\r\n },\r\n };\r\n if (redraw) {\r\n this.drawPolygons();\r\n }\r\n }\r\n\r\n private handlePitchChange(event: Event) {\r\n const target = event.target as HTMLInputElement;\r\n const pitch = parseFloat(target.value);\r\n const currentPolygon = this.getCurrentPolygon();\r\n if (currentPolygon) {\r\n this.roofPolygons[currentPolygon._id].details.pitch = pitch;\r\n }\r\n if (\r\n currentPolygon.type === \"roof\" &&\r\n this.roofPolygonsSolarPanels[currentPolygon._id]\r\n ) {\r\n this.calculateSolarPanels();\r\n return;\r\n }\r\n }\r\n\r\n private handleAzimuthChange(event: Event) {\r\n const target = event.target as HTMLInputElement;\r\n const azimuth = parseFloat(target.value);\r\n const currentPolygon = this.getCurrentPolygon();\r\n if (currentPolygon) {\r\n this.roofPolygons[currentPolygon._id].details.azimuth = azimuth;\r\n }\r\n if (\r\n currentPolygon.type === \"roof\" &&\r\n this.roofPolygonsSolarPanels[currentPolygon._id]\r\n ) {\r\n this.calculateSolarPanels();\r\n return;\r\n }\r\n }\r\n\r\n private handleToolSelect(tool: Tool) {\r\n const currentPolygon = this.getCurrentPolygon();\r\n if (\r\n currentPolygon && !currentPolygon.closed &&\r\n currentPolygon.points.length > 0\r\n ) {\r\n alert(\"Please close the polygon before selecting a tool\");\r\n // TODO translate\r\n return;\r\n }\r\n this.currentTool = tool;\r\n }\r\n\r\n private scrollToCanvas() {\r\n const canvasElement = this.el.querySelector(\"#map-draw-canvas\");\r\n if (canvasElement) {\r\n canvasElement.scrollIntoView({ behavior: \"smooth\" });\r\n }\r\n }\r\n\r\n private handleSettingsClick = () => {\r\n this.showSettings = true;\r\n };\r\n\r\n private handleSettingsClose = () => {\r\n this.showSettings = false;\r\n };\r\n\r\n private handleSettingsSave = (event: CustomEvent<Settings>) => {\r\n state.settings = event.detail;\r\n state.settingsVersion++;\r\n };\r\n\r\n render() {\r\n const t = getLanguageStrings(state.settings.language);\r\n const currentPolygon = this.getCurrentPolygon();\r\n return (\r\n <div\r\n class=\"flex flex-col justify-center items-center w-full h-full gap-4\"\r\n id=\"map-draw\"\r\n >\r\n {this.showInstructions && !state.isMobile && (\r\n <div class=\"w-full rounded-4xl p-4 bg-white\">\r\n {t.mapDraw.instructions.parts.roof}{\" \"}\r\n <button\r\n class=\"inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors\"\r\n onClick={() => this.handleToolSelect(roofTool)}\r\n >\r\n <icon-selector name=\"house\" inline={true} />\r\n </button>{\" \"}\r\n {t.mapDraw.instructions.parts.obstruction}{\" \"}\r\n <button\r\n class=\"inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors\"\r\n onClick={() =>\r\n this.handleToolSelect(obstructionTool)}\r\n >\r\n <icon-selector name=\"octagon-minus\" inline={true} />\r\n </button>{\" \"}\r\n {t.mapDraw.instructions.parts.delete}{\" \"}\r\n <button\r\n class=\"inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors\"\r\n onClick={() => this.handleToolSelect(deleteTool)}\r\n >\r\n <icon-selector name=\"eraser\" inline={true} />\r\n </button>{\" \"}\r\n {t.mapDraw.instructions.parts.move}{\" \"}\r\n <button\r\n class=\"inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors\"\r\n onClick={() => this.handleToolSelect(moveTool)}\r\n >\r\n <icon-selector name=\"move\" inline={true} />\r\n </button>{\" \"}\r\n {t.mapDraw.instructions.parts.end}\r\n </div>\r\n )}\r\n <div class=\"w-full flex flex-row justify-between items-center\">\r\n {!state.isMobile && (this.showInstructions\r\n ? (\r\n <button\r\n class=\"px-4 py-2 rounded-4xl hover:bg-gray-300 transition-colors duration-200 bg-white p-4\"\r\n onClick={() => this.showInstructions = false}\r\n >\r\n {t.mapDraw.instructions.hide}\r\n </button>\r\n )\r\n : (\r\n <button\r\n class=\"px-4 py-2 rounded-4xl hover:bg-gray-300 transition-colors duration-200 bg-white p-4\"\r\n onClick={() => this.showInstructions = true}\r\n >\r\n {t.mapDraw.instructions.show}\r\n </button>\r\n ))}\r\n <button\r\n class=\"flex items-center gap-2 bg-white p-2 rounded-4xl hover:bg-gray-300\"\r\n onClick={this.handleSettingsClick}\r\n >\r\n <settings-icon />\r\n </button>\r\n </div>\r\n <div class=\"w-full\">\r\n {!state.isMobile && (\r\n <tool-box\r\n currentTool={this.currentTool}\r\n onToolSelect={(tool) => this.handleToolSelect(tool)}\r\n undoCallback={() => this.undo()}\r\n />\r\n )}\r\n </div>\r\n {this.loadingState === \"empty\" && (\r\n <div class=\"w-full\">\r\n <p\r\n class=\"text-white text-center flex items-center justify-center rounded-4xl p-4 w-full\"\r\n style={{\r\n backgroundColor: \"rgba(0, 0, 0, 0.5)\",\r\n }}\r\n >\r\n {t.mapDraw.noAddressSelected}\r\n </p>\r\n </div>\r\n )}\r\n {(state.latitude && state.longitude &&\r\n this.loadingState === \"loading\") && (\r\n <div class=\"flex items-center justify-center w-full bg-opacity-75 z-20 pt-7 rounded-4xl\">\r\n <div class=\"animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-[#271200]\">\r\n </div>\r\n </div>\r\n )}\r\n <div class=\"flex items-start justify-center h-full w-full bg-[#f3ebda] rounded-4xl\">\r\n <div\r\n class=\"relative h-full flex items-center justify-center w-full rounded-4xl bg-[#271200]\"\r\n style={{\r\n aspectRatio: this.rgbTiff\r\n ? `${this.rgbTiff.width}/${this.rgbTiff.height}`\r\n : \"1/1\",\r\n }}\r\n >\r\n <canvas\r\n ref={(el) => this.canvasElement = el}\r\n class=\"absolute top-0 left-0 w-full h-full rounded-4xl\"\r\n id=\"map-draw-canvas\"\r\n style={{\r\n cursor: this.currentTool.cursor,\r\n }}\r\n >\r\n </canvas>\r\n <canvas\r\n ref={(el) => this.polygonCanvas = el}\r\n class=\"absolute top-0 left-0 w-full h-full rounded-4xl\"\r\n style={{\r\n cursor: this.currentTool.cursor,\r\n }}\r\n >\r\n </canvas>\r\n </div>\r\n </div>\r\n {currentPolygon?.closed && (\r\n <div class=\"w-full\">\r\n <polygon-buttons\r\n currentTool={this.currentTool.name}\r\n calculateSolarPanels={() =>\r\n this.calculateSolarPanels()}\r\n selectEdgeTool={() =>\r\n this.handleToolSelect(markRoofEdgeTool)}\r\n />\r\n </div>\r\n )}\r\n {!state.isMobile && (\r\n <div class=\"w-full\">\r\n <polygon-information\r\n currentPolygon={currentPolygon}\r\n positionedPanels={currentPolygon\r\n ? this\r\n .roofPolygonsSolarPanels[currentPolygon._id]\r\n ?.positionedPanels\r\n : undefined}\r\n handleAzimuthChange={(event) =>\r\n this.handleAzimuthChange(event)}\r\n handlePitchChange={(event) =>\r\n this.handlePitchChange(event)}\r\n calculateSolarPanels={() =>\r\n this.calculateSolarPanels()}\r\n />\r\n </div>\r\n )}\r\n <div class=\"w-full\">\r\n <solar-system-form\r\n systemConfigs={this.roofPolygonsSolarPanels}\r\n roofPolygons={this.roofPolygons}\r\n obstructionPolygons={this.obstructionPolygons}\r\n />\r\n </div>\r\n {this.showSettings && (\r\n <settings-modal\r\n settings={state.settings}\r\n onClose={this.handleSettingsClose}\r\n onSave={this.handleSettingsSave}\r\n />\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n","/*! 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","import { Component, Element, h, Prop, State } from \"@stencil/core\";\r\nimport { Loader } from \"@googlemaps/js-api-loader\";\r\nimport { state } from \"../../store\";\r\nimport { Language } from \"../../types/lang\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\n\r\n@Component({\r\n tag: \"map-selector\",\r\n styleUrl: \"../../output.css\",\r\n shadow: true,\r\n})\r\nexport class MapSelector {\r\n @Element()\r\n el!: HTMLElement;\r\n\r\n @Prop()\r\n apiKey: string = \"\";\r\n @Prop()\r\n language: Language = \"en\";\r\n\r\n @State()\r\n isLoaded: boolean = false;\r\n @State()\r\n autocomplete: google.maps.places.Autocomplete | null = null;\r\n @State()\r\n map: google.maps.Map | null = null;\r\n @State()\r\n marker: google.maps.marker.AdvancedMarkerElement | null = null;\r\n @State()\r\n circle: google.maps.Circle | null = null;\r\n @State()\r\n radius: number = 20;\r\n @State()\r\n latitude: number | null = null;\r\n @State()\r\n longitude: number | null = null;\r\n\r\n private inputElement?: HTMLInputElement;\r\n private mapElement?: HTMLDivElement;\r\n\r\n componentWillLoad() {\r\n this.loadGoogleMapsScript();\r\n }\r\n\r\n private async loadGoogleMapsScript() {\r\n try {\r\n const loader = new Loader({\r\n apiKey: this.apiKey,\r\n libraries: [\"places\", \"maps\", \"marker\"],\r\n });\r\n\r\n const [places, maps, _] = await Promise.all([\r\n loader.importLibrary(\"places\"),\r\n loader.importLibrary(\"maps\"),\r\n loader.importLibrary(\"marker\"),\r\n ]);\r\n\r\n this.isLoaded = true;\r\n this.initializeAutocomplete(places);\r\n this.initializeMap(maps);\r\n } catch (error) {\r\n console.error(\"Error loading Google Maps: \", error);\r\n }\r\n }\r\n\r\n private initializeAutocomplete(places: google.maps.PlacesLibrary) {\r\n if (!this.inputElement || !this.isLoaded) return;\r\n this.autocomplete = new places.Autocomplete(this.inputElement);\r\n\r\n this.autocomplete.addListener(\"place_changed\", () => {\r\n const place = this.autocomplete?.getPlace();\r\n if (place?.geometry?.location) {\r\n const lat = place.geometry.location.lat();\r\n const lng = place.geometry.location.lng();\r\n\r\n this.latitude = lat;\r\n this.longitude = lng;\r\n\r\n this.map?.setCenter({ lat, lng });\r\n this.map?.setZoom(40);\r\n }\r\n });\r\n }\r\n\r\n private initializeMap(\r\n maps: google.maps.MapsLibrary,\r\n ) {\r\n if (!this.mapElement || !this.isLoaded) return;\r\n\r\n this.map = new maps.Map(this.mapElement, {\r\n center: {\r\n lat: state.latitude || 49.398531832926025,\r\n lng: state.longitude || 8.671214102081551,\r\n },\r\n zoom: 15,\r\n mapTypeControl: false,\r\n streetViewControl: false,\r\n mapTypeId: \"satellite\",\r\n mapId: \"map\",\r\n tilt: 0,\r\n });\r\n // this.updateMapLocation(state.latitude, state.longitude);\r\n\r\n // Add click listener to map\r\n this.map.addListener(\"click\", (e: google.maps.MapMouseEvent) => {\r\n if (e.latLng) {\r\n const lat = e.latLng.lat();\r\n const lng = e.latLng.lng();\r\n\r\n this.latitude = lat;\r\n this.longitude = lng;\r\n\r\n this.updateMapLocation(lat, lng);\r\n }\r\n });\r\n\r\n // Initialize marker and circle if we have coordinates\r\n if (state.latitude && state.longitude) {\r\n this.updateMapLocation(state.latitude, state.longitude);\r\n }\r\n }\r\n\r\n private updateMapLocation(lat: number, lng: number) {\r\n if (!this.map) return;\r\n\r\n // Update or create circle\r\n if (this.circle) {\r\n this.circle.setCenter({ lat, lng });\r\n } else {\r\n const circle = new google.maps.Circle({\r\n strokeColor: \"#ffffff\",\r\n strokeOpacity: 0.8,\r\n strokeWeight: 2,\r\n fillColor: \"rgba(255, 255, 255, 0.8)\",\r\n fillOpacity: 0.35,\r\n map: this.map,\r\n center: { lat, lng },\r\n radius: this.radius,\r\n });\r\n this.circle = circle;\r\n }\r\n }\r\n\r\n private handleRadiusChange(e: Event) {\r\n const value = parseFloat((e.target as HTMLInputElement).value);\r\n this.radius = value;\r\n if (this.circle) {\r\n this.circle.setRadius(value);\r\n }\r\n }\r\n\r\n private handleAcceptPosition() {\r\n console.log(\r\n \"Accepting position \",\r\n this.latitude,\r\n this.longitude,\r\n this.radius,\r\n );\r\n if (this.latitude !== null && this.longitude !== null) {\r\n state.latitude = this.latitude;\r\n state.longitude = this.longitude;\r\n state.radiusMeters = this.radius;\r\n }\r\n }\r\n\r\n render() {\r\n const t = getLanguageStrings(this.language);\r\n return (\r\n <div class=\"map-selector flex flex-col gap-4 pb-4\">\r\n <div class=\"relative\">\r\n <div class=\"absolute left-3 top-1/2 transform -translate-y-1/2\">\r\n <search-icon />\r\n </div>\r\n <input\r\n ref={(el) => this.inputElement = el}\r\n type=\"text\"\r\n placeholder={t.solarExpert.searchPlaceholder}\r\n class=\"w-full pl-10 pr-4 py-2 border border-gray-300 rounded-4xl focus:ring-[#271200] bg-white\"\r\n />\r\n </div>\r\n <div\r\n class=\"w-full rounded-4xl p-4\"\r\n style={{\r\n backgroundColor: \"rgba(0, 0, 0, 0.1)\",\r\n }}\r\n >\r\n {t.mapSelector.explanation}\r\n </div>\r\n <div class=\"flex items-center gap-4\">\r\n <label class=\"text-sm font-medium text-gray-700\">\r\n {t.mapSelector.radius}\r\n </label>\r\n <input\r\n type=\"range\"\r\n min=\"5\"\r\n max=\"100\"\r\n value={this.radius}\r\n onInput={(e) => this.handleRadiusChange(e)}\r\n class=\"input-slider 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\"\r\n />\r\n <span class=\"text-sm text-gray-600\">{this.radius}m</span>\r\n </div>\r\n\r\n <div\r\n ref={(el) => this.mapElement = el}\r\n class=\"w-full h-[400px] rounded-4xl border border-gray-300\"\r\n />\r\n\r\n <button\r\n onClick={() => this.handleAcceptPosition()}\r\n class=\"w-full py-2 px-4 bg-[#271200] text-white rounded-4xl hover:bg-[#3a1b00] transition-colors\"\r\n >\r\n {t.mapSelector.accept}\r\n </button>\r\n </div>\r\n );\r\n }\r\n}\r\n","/*! 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","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"move-icon\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class MoveIcon {\r\n @Prop()\r\n inline: boolean = false;\r\n @Prop()\r\n size: number = 20;\r\n\r\n render() {\r\n return (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width={this.size}\r\n height={this.size}\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class={`lucide lucide-move-icon lucide-move ${\r\n this.inline ? \"inline-block\" : \"\"\r\n }`}\r\n >\r\n <path d=\"M12 2v20\" />\r\n <path d=\"m15 19-3 3-3-3\" />\r\n <path d=\"m19 9 3 3-3 3\" />\r\n <path d=\"M2 12h20\" />\r\n <path d=\"m5 9-3 3 3 3\" />\r\n <path d=\"m9 5 3-3 3 3\" />\r\n </svg>\r\n );\r\n }\r\n}\r\n","/*! 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","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"octagon-minus-icon\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class OctagonMinusIcon {\r\n @Prop()\r\n inline: boolean = false;\r\n @Prop()\r\n size: number = 20;\r\n\r\n render() {\r\n return (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width={this.size}\r\n height={this.size}\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class={`lucide lucide-octagon-minus-icon lucide-octagon-minus ${\r\n this.inline ? \"inline-block\" : \"\"\r\n }`}\r\n >\r\n <path d=\"M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z\" />\r\n <path d=\"M8 12h8\" />\r\n </svg>\r\n );\r\n }\r\n}\r\n","/*! 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","import { Component, h, Prop } from \"@stencil/core\";\r\nimport { state } from \"../../store\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\n\r\n@Component({\r\n tag: \"polygon-buttons\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class PolygonButtons {\r\n @Prop()\r\n calculateSolarPanels: () => void;\r\n @Prop()\r\n selectEdgeTool: () => void;\r\n @Prop()\r\n currentTool: string;\r\n\r\n render() {\r\n const t = getLanguageStrings(state.settings.language);\r\n console.log(\"currentTool\", this.currentTool);\r\n\r\n return (\r\n <div class=\"flex w-full gap-2 justify-end\">\r\n <button\r\n class={`px-4 py-2 rounded-4xl hover:bg-[#0000003c] text-[#271200] transition-colors duration-200 text-xs ${\r\n this.currentTool === \"markRoofEdge\"\r\n ? \"bg-[#00000056]\"\r\n : \"bg-white\"\r\n }`}\r\n // style={edgeSelectedStyle}\r\n onClick={() => this.selectEdgeTool()}\r\n >\r\n {t.mapDraw.markRoofEdge}\r\n </button>\r\n <button\r\n class=\"px-4 py-2 rounded-4xl hover:bg-[#0000003c] text-[#271200] transition-colors duration-200 text-xs bg-[#ffffff]\"\r\n onClick={() => this.calculateSolarPanels()}\r\n >\r\n {t.mapDraw.calculateSolarPanels}\r\n </button>\r\n </div>\r\n );\r\n }\r\n}\r\n","/*! 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","import { Component, h, Prop } from \"@stencil/core\";\r\nimport { Polygon, SolarPanelSystemPart } from \"../../components\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\nimport { azimuthToCardinal } from \"../../utils/utils\";\r\n\r\n@Component({\r\n tag: \"polygon-information\",\r\n styleUrl: \"../../output.css\",\r\n shadow: true,\r\n})\r\nexport class PolygonInformation {\r\n @Prop()\r\n currentPolygon: Polygon;\r\n @Prop()\r\n positionedPanels: SolarPanelSystemPart[] | undefined;\r\n @Prop()\r\n handleAzimuthChange: (event: Event) => void;\r\n @Prop()\r\n handlePitchChange: (event: Event) => void;\r\n @Prop()\r\n calculateSolarPanels: () => void;\r\n\r\n render() {\r\n const t = getLanguageStrings(state.settings.language);\r\n\r\n return (\r\n <div class=\"flex gap-4 flex-row justify-center items-center w-full\">\r\n <div class=\"w-full bg-[#f3ebda] rounded-4xl p-4\">\r\n <h3 class=\"text-lg font-semibold mb-4 text-center\">\r\n {t.mapDraw.information}\r\n </h3>\r\n {this.currentPolygon?.details\r\n ? (\r\n <div class=\"space-y-4\">\r\n <div>\r\n <div class=\"grid grid-cols-2 gap-2\">\r\n <div>\r\n <h4 class=\"text-sm font-medium text-gray-600\">\r\n {t.mapDraw.area}\r\n </h4>\r\n <p class=\"text-lg\">\r\n {this.currentPolygon.details\r\n ?.area\r\n .toFixed(2)} m²\r\n </p>\r\n </div>\r\n <div>\r\n <div>\r\n <h4 class=\"text-sm font-medium text-gray-600\">\r\n {t.mapDraw.panels}\r\n </h4>\r\n <p class=\"text-lg\">\r\n {this.positionedPanels\r\n ?.length ?? 0}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div>\r\n <h4 class=\"text-sm font-medium text-gray-600\">\r\n {t.mapDraw.azimuth}\r\n </h4>\r\n <div class=\"flex gap-2 flex-row justify-start bg-white rounded-4xl p-2\">\r\n <input\r\n class=\"text-lg w-full\"\r\n onKeyDown={(e) => {\r\n if (e.key === \"Enter\") {\r\n this.handleAzimuthChange(\r\n e,\r\n );\r\n (e.target as HTMLInputElement)\r\n .blur();\r\n }\r\n }}\r\n value={this.currentPolygon\r\n .details\r\n ?.azimuth}\r\n />\r\n ({azimuthToCardinal(\r\n this.currentPolygon.details\r\n ?.azimuth,\r\n )})\r\n </div>\r\n <input\r\n type=\"range\"\r\n min=\"0\"\r\n max=\"360\"\r\n class=\"input-slider 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\"\r\n value={this.currentPolygon\r\n .details?.azimuth}\r\n onInput={(e) => {\r\n const target = e\r\n .target as HTMLInputElement;\r\n const azimuth = parseFloat(\r\n target.value,\r\n );\r\n this.currentPolygon.details\r\n .azimuth = azimuth;\r\n if (\r\n this.currentPolygon\r\n .type ===\r\n \"roof\" &&\r\n this.positionedPanels\r\n ) {\r\n this.calculateSolarPanels();\r\n }\r\n }}\r\n />\r\n </div>\r\n <div>\r\n <h4 class=\"text-sm font-medium text-gray-600 pl-2\">\r\n {t.mapDraw.pitch}\r\n </h4>\r\n <div class=\"flex gap-2 flex-row justify-start bg-white rounded-4xl p-2\">\r\n <input\r\n class=\"text-lg w-full\"\r\n onKeyDown={(e) => {\r\n if (e.key === \"Enter\") {\r\n this.handlePitchChange(\r\n e,\r\n );\r\n (e.target as HTMLInputElement)\r\n .blur();\r\n }\r\n }}\r\n value={this.currentPolygon\r\n .details\r\n ?.pitch}\r\n />\r\n °\r\n </div>\r\n <input\r\n type=\"range\"\r\n min=\"0\"\r\n max=\"90\"\r\n class=\"input-slider 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\"\r\n value={this.currentPolygon\r\n .details?.pitch}\r\n onInput={(e) => {\r\n const target = e\r\n .target as HTMLInputElement;\r\n const pitch = parseFloat(\r\n target.value,\r\n );\r\n this.currentPolygon.details\r\n .pitch = pitch;\r\n if (\r\n this.currentPolygon\r\n .type ===\r\n \"roof\" &&\r\n this.positionedPanels\r\n ) {\r\n this.calculateSolarPanels();\r\n }\r\n }}\r\n />\r\n </div>\r\n </div>\r\n )\r\n : (\r\n <p class=\"text-gray-500 text-center\">\r\n {t.mapDraw.noPolygonSelected}\r\n </p>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n","/*! 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","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"search-icon\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class SearchIcon {\r\n @Prop()\r\n inline: boolean = false;\r\n @Prop()\r\n size: number = 20;\r\n\r\n render() {\r\n return (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width={this.size}\r\n height={this.size}\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class={`lucide lucide-search-icon lucide-search ${\r\n this.inline ? \"inline-block\" : \"\"\r\n }`}\r\n >\r\n <path d=\"m21 21-4.34-4.34\" />\r\n <circle cx=\"11\" cy=\"11\" r=\"8\" />\r\n </svg>\r\n );\r\n }\r\n}\r\n","/*! 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","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"settings-icon\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class SettingsIcon {\r\n @Prop()\r\n inline: boolean = false;\r\n @Prop()\r\n size: number = 20;\r\n\r\n render() {\r\n return (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width={this.size}\r\n height={this.size}\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class={`lucide lucide-settings-icon lucide-settings ${\r\n this.inline ? \"inline-block\" : \"\"\r\n }`}\r\n >\r\n <path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\" />\r\n <circle cx=\"12\" cy=\"12\" r=\"3\" />\r\n </svg>\r\n );\r\n }\r\n}\r\n","/*! 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","import { Component, Event, EventEmitter, h, Prop, State } from \"@stencil/core\";\r\nimport { Settings, state } from \"../../store\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { Language } from \"../../types/lang\";\r\n\r\n@Component({\r\n tag: \"settings-modal\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class SettingsModal {\r\n @Prop()\r\n settings: Settings;\r\n\r\n @State()\r\n private tempSettings: Settings;\r\n\r\n @Event()\r\n close: EventEmitter<void>;\r\n\r\n @Event()\r\n save: EventEmitter<Settings>;\r\n\r\n componentWillLoad() {\r\n this.tempSettings = { ...this.settings };\r\n }\r\n\r\n private handleClose = () => {\r\n if (\r\n JSON.stringify(this.tempSettings) !== JSON.stringify(this.settings)\r\n ) {\r\n if (\r\n confirm(\r\n \"Are you sure you want to close without saving your changes?\",\r\n )\r\n ) {\r\n this.close.emit();\r\n }\r\n } else {\r\n this.close.emit();\r\n }\r\n };\r\n\r\n private handleSave = () => {\r\n this.save.emit(this.tempSettings);\r\n this.close.emit();\r\n };\r\n\r\n private handleInputChange = (\r\n key: keyof Settings,\r\n value: number | Language,\r\n ) => {\r\n this.tempSettings = {\r\n ...this.tempSettings,\r\n [key]: value,\r\n };\r\n };\r\n\r\n render() {\r\n const t = getLanguageStrings(state.settings.language);\r\n return (\r\n <div class=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50\">\r\n <div class=\"bg-[#f3ebda] rounded-4xl p-6 w-full max-w-md\">\r\n <div class=\"flex justify-between items-center mb-6\">\r\n <h2 class=\"text-xl font-semibold\">Settings</h2>\r\n <button\r\n class=\"p-2 hover:bg-gray-200 rounded-full transition-colors\"\r\n onClick={this.handleClose}\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <div class=\"space-y-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n {t.settings.language}\r\n </label>\r\n <select\r\n class=\"w-full bg-white rounded-4xl p-2\"\r\n onInput={(e) =>\r\n this.handleInputChange(\r\n \"language\",\r\n (e.target as HTMLSelectElement)\r\n .value as Language,\r\n )}\r\n >\r\n <option\r\n value=\"en\"\r\n selected={this.tempSettings.language ===\r\n \"en\"}\r\n >\r\n English\r\n </option>\r\n <option\r\n value=\"es\"\r\n selected={this.tempSettings.language ===\r\n \"es\"}\r\n >\r\n Español\r\n </option>\r\n <option\r\n value=\"de\"\r\n selected={this.tempSettings.language ===\r\n \"de\"}\r\n >\r\n Deutsch\r\n </option>\r\n </select>\r\n </div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n {t.settings.rowSpacing}\r\n </label>\r\n <input\r\n type=\"number\"\r\n class=\"w-full bg-white rounded-4xl p-2\"\r\n value={this.tempSettings.rowSpacing}\r\n onInput={(e) =>\r\n this.handleInputChange(\r\n \"rowSpacing\",\r\n parseFloat(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n ),\r\n )}\r\n />\r\n </div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n {t.settings.columnSpacing}\r\n </label>\r\n <input\r\n type=\"number\"\r\n class=\"w-full bg-white rounded-4xl p-2\"\r\n value={this.tempSettings.columnSpacing}\r\n onInput={(e) =>\r\n this.handleInputChange(\r\n \"columnSpacing\",\r\n parseFloat(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n ),\r\n )}\r\n />\r\n </div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n {t.settings.borderInset}\r\n </label>\r\n <input\r\n type=\"number\"\r\n class=\"w-full bg-white rounded-4xl p-2\"\r\n value={this.tempSettings.borderInset}\r\n onInput={(e) =>\r\n this.handleInputChange(\r\n \"borderInset\",\r\n parseFloat(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n ),\r\n )}\r\n />\r\n </div>\r\n </div>\r\n\r\n <div class=\"flex justify-end gap-4 mt-6\">\r\n <button\r\n class=\"px-4 py-2 bg-gray-200 rounded-4xl hover:bg-gray-300 transition-colors\"\r\n onClick={this.handleClose}\r\n >\r\n Cancel\r\n </button>\r\n <button\r\n class=\"px-4 py-2 bg-[#271200] text-white rounded-4xl hover:bg-gray-500 transition-colors\"\r\n onClick={this.handleSave}\r\n >\r\n Save Changes\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n","/*! 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","import { Component, Element, Env, h, Prop, State } from \"@stencil/core\";\r\nimport { Loader } from \"@googlemaps/js-api-loader\";\r\nimport { Language } from \"../../types/lang\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { onChange, state } from \"../../store\";\r\n\r\n@Component({\r\n tag: \"solar-expert\",\r\n shadow: false,\r\n styleUrl: \"../../output.css\",\r\n})\r\nexport class SolarExpert {\r\n @Element()\r\n el!: HTMLElement;\r\n\r\n @Prop()\r\n apiKey: string = Env.GOOGLE_MAPS_API_KEY;\r\n @Prop()\r\n language: Language = \"en\";\r\n\r\n @State()\r\n latitude: number | null = 40.581614;\r\n @State()\r\n longitude: number | null = -4.128423;\r\n @State()\r\n isLoaded: boolean = false;\r\n @State()\r\n autocomplete: google.maps.places.Autocomplete | null = null;\r\n @State()\r\n place: google.maps.places.PlaceResult | null = null;\r\n @State()\r\n showMapSelector: boolean = false;\r\n\r\n private inputElement?: HTMLInputElement;\r\n\r\n private iosPolyfill(slider: HTMLInputElement, e) {\r\n var val = (e.pageX - slider.getBoundingClientRect().left) /\r\n (slider.getBoundingClientRect().right -\r\n slider.getBoundingClientRect().left),\r\n max = parseInt(slider.getAttribute(\"max\") || \"0\", 10),\r\n segment = 1 / (max - 1),\r\n segmentArr = [];\r\n\r\n max++;\r\n\r\n for (var i = 0; i < max; i++) {\r\n segmentArr.push(segment * i);\r\n }\r\n\r\n var segCopy = segmentArr.slice(),\r\n ind =\r\n segmentArr.sort((a, b) =>\r\n Math.abs(val - a) - Math.abs(val - b)\r\n )[0];\r\n\r\n slider.value = String(segCopy.indexOf(ind) + 1);\r\n }\r\n\r\n componentWillLoad() {\r\n state.isMobile =\r\n /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i\r\n .test(navigator.userAgent) || window.innerWidth < 768;\r\n this.loadGoogleMapsScript();\r\n onChange(\"latitude\", () => {\r\n if (this.showMapSelector) {\r\n this.showMapSelector = false;\r\n this.scrollToMapDraw();\r\n }\r\n });\r\n state.settings.language = this.language;\r\n\r\n const sliders = document.querySelectorAll(\".input-slider\");\r\n sliders.forEach((slider) => {\r\n slider.addEventListener(\r\n \"touchend\",\r\n (e) => this.iosPolyfill(slider as HTMLInputElement, e),\r\n { passive: true },\r\n );\r\n });\r\n }\r\n\r\n private async loadGoogleMapsScript() {\r\n try {\r\n const loader = new Loader({\r\n apiKey: this.apiKey,\r\n libraries: [\"places\", \"maps\", \"marker\"],\r\n });\r\n\r\n const places = await loader.importLibrary(\"places\");\r\n this.isLoaded = true;\r\n this.initializeAutocomplete(places);\r\n } catch (error) {\r\n console.error(\"Error loading Google Maps: \", error);\r\n }\r\n }\r\n\r\n private initializeAutocomplete(\r\n places: google.maps.PlacesLibrary,\r\n ) {\r\n if (!this.inputElement || !this.isLoaded) return;\r\n this.autocomplete = new places.Autocomplete(this.inputElement);\r\n\r\n this.autocomplete.addListener(\"place_changed\", () => {\r\n const place = this.autocomplete?.getPlace();\r\n this.latitude = place?.geometry?.location?.lat() ?? 0;\r\n this.longitude = place?.geometry?.location?.lng() ?? 0;\r\n state.latitude = this.latitude;\r\n state.longitude = this.longitude;\r\n\r\n this.scrollToMapDraw();\r\n });\r\n }\r\n\r\n private scrollToMapDraw() {\r\n if (state.isMobile) {\r\n const solarSystemFormElement = this.el.querySelector(\r\n \"solar-system-form\",\r\n );\r\n if (solarSystemFormElement) {\r\n solarSystemFormElement.scrollIntoView({ behavior: \"smooth\" });\r\n }\r\n } else {\r\n const mapDrawElement = this.el.querySelector(\"map-draw\");\r\n if (mapDrawElement) {\r\n mapDrawElement.scrollIntoView({ behavior: \"smooth\" });\r\n }\r\n }\r\n }\r\n\r\n private handleChooseOnMap() {\r\n this.showMapSelector = true;\r\n }\r\n\r\n render() {\r\n const t = getLanguageStrings(this.language);\r\n return (\r\n <div\r\n class=\"flex flex-col w-full h-full p-3 m-auto\"\r\n id=\"solar-calculator\"\r\n >\r\n {this.showMapSelector\r\n ? (\r\n <map-selector\r\n api-key={this.apiKey}\r\n language={this.language}\r\n />\r\n )\r\n : (\r\n <>\r\n <div class=\"pb-3 flex flex-row gap-4 items-stretch w-full\">\r\n <div class=\"relative flex-3\">\r\n <div class=\"absolute left-3 top-1/2 transform -translate-y-1/2\">\r\n <search-icon />\r\n </div>\r\n <input\r\n ref={(el) => this.inputElement = el}\r\n type=\"text\"\r\n placeholder={t.solarExpert\r\n .searchPlaceholder}\r\n class=\"w-full pl-10 pr-4 py-2 border border-gray-300 rounded-4xl focus:ring-[#271200] bg-white h-full\"\r\n />\r\n </div>\r\n <button\r\n onClick={() => this.handleChooseOnMap()}\r\n class=\"flex-1 pl-4 pr-4 py-2 border border-gray-300 bg-white rounded-4xl focus:ring-[#271200] hover:bg-[#271200] hover:text-white\"\r\n >\r\n {t.mapSelector.chooseOnMap}\r\n </button>\r\n </div>\r\n <map-draw\r\n apiKey={this.apiKey}\r\n />\r\n </>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n","\r\nconst SOLAR_RADIATION = [\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0, // 00:00 - 05:00 - 6\r\n 0,\r\n 0.1,\r\n 0.2, // 8\r\n 0.4, \r\n 0.8,\r\n 0.9, // 06:00 - 11:00 - 12\r\n 1,\r\n 0.95,\r\n 0.9,\r\n 0.7,\r\n 0.5,\r\n 0.3, // 12:00 - 17:00 - 18\r\n 0.16,\r\n 0.02,\r\n 0,\r\n 0,\r\n 0,\r\n 0, // 18:00 - 23:00 - 24\r\n];\r\n\r\nexport { SOLAR_RADIATION };\r\n\r\nexport function getSolarRadiation(discountFactor: number) {\r\n return SOLAR_RADIATION.map(value => value * discountFactor);\r\n}","import { SolarPanelType } from \"../solar\";\r\n\r\nexport interface SimulationResult {\r\n autonomy: number;\r\n byYearSavedCosts: number[];\r\n compensationPerDay: number;\r\n}\r\n\r\nexport interface ElectricityPrice {\r\n purchase: number;\r\n sell: number;\r\n increase: number;\r\n}\r\n\r\nexport interface ElectricCarConfig {\r\n batteryKWh: number;\r\n // true if the car is charged at home, false if it is charged at work\r\n chargingHours: boolean[];\r\n averageKilometersPerDay: number;\r\n consumptionkWhPer100km: number;\r\n}\r\n\r\nexport interface HeatPumpConfig {\r\n m2: number;\r\n}\r\n\r\nexport interface SolarRadiation {\r\n winterFactor: number;\r\n summerFactor: number;\r\n}\r\n\r\nexport interface SolarSystem {\r\n numberOfPanels: number;\r\n panelType: SolarPanelType;\r\n pitch: number;\r\n}\r\n\r\nexport interface HouseholdConsumption {\r\n consumptionProfile: \"mostly_at_home\" | \"mostly_away\";\r\n winterConsumptionFactor: number;\r\n summerConsumptionFactor: number;\r\n averageConsumption: number;\r\n}\r\n\r\nexport interface GeneralSimulationConfig {\r\n simulationYears: number;\r\n}\r\n\r\nexport const DEFAULT_GENERAL_SIMULATION_CONFIG: GeneralSimulationConfig = {\r\n simulationYears: 25,\r\n}\r\n\r\nexport interface SimulationConfig {\r\n householdConsumption: HouseholdConsumption;\r\n electricityPrice: ElectricityPrice;\r\n solarSystem: SolarSystem;\r\n batteryKWh: number;\r\n electricCar?: ElectricCarConfig;\r\n heatPump?: HeatPumpConfig;\r\n solarRadiation: SolarRadiation;\r\n general?: GeneralSimulationConfig;\r\n}","import { CONSUMPTION_PROFILES, HEAT_PUMP_CONSUMPTION } from \"../../constants\";\r\nimport { getSolarRadiation } from \"./solarCurves\";\r\nimport { SimulationResult, SimulationConfig, DEFAULT_GENERAL_SIMULATION_CONFIG } from \"./types\";\r\n\r\nexport function generateElectricCarChargingHours(start: number, end: number): boolean[] {\r\n let hours = new Array(24).fill(false);\r\n if (start < end) {\r\n for (let i = start; i <= end; i++) {\r\n hours[i] = true;\r\n }\r\n } else {\r\n for (let i = start; i <= 24; i++) {\r\n hours[i] = true;\r\n }\r\n for (let i = 0; i <= end; i++) { \r\n hours[i] = true;\r\n }\r\n }\r\n return hours;\r\n}\r\n\r\nexport function simulateDay( production: number[], consumption: number[], dailyConsumption: number, battery: number): {\r\n autonomy: number;\r\n soldEnergy: number;\r\n energyUsageOfProduction: number;\r\n} {\r\n\r\n let batteryCharge = 0;\r\n let soldEnergy = 0;\r\n let energyUsageOfProduction = 0;\r\n for (let hour = 0; hour < production.length; hour++) {\r\n const energyDifference = production[hour] - consumption[hour];\r\n\r\n if (energyDifference > 0) {\r\n energyUsageOfProduction += consumption[hour];\r\n if (batteryCharge < battery) {\r\n batteryCharge = Math.min(batteryCharge + energyDifference, battery);\r\n } else {\r\n soldEnergy += energyDifference;\r\n }\r\n } else {\r\n if (batteryCharge > 0) {\r\n if (batteryCharge >= -energyDifference) {\r\n batteryCharge += energyDifference;\r\n energyUsageOfProduction += consumption[hour];\r\n } else {\r\n energyUsageOfProduction += production[hour] + batteryCharge;\r\n soldEnergy -= energyDifference + batteryCharge;\r\n batteryCharge = 0;\r\n }\r\n } else {\r\n energyUsageOfProduction += production[hour];\r\n }\r\n }\r\n }\r\n if (batteryCharge > 0) {\r\n soldEnergy += batteryCharge;\r\n }\r\n\r\n const autonomy = energyUsageOfProduction / dailyConsumption;\r\n return {\r\n autonomy: autonomy > 1 ? 1 : autonomy,\r\n soldEnergy,\r\n energyUsageOfProduction,\r\n };\r\n}\r\n\r\n\r\nexport function simulate(config: SimulationConfig): SimulationResult {\r\n const generalConfig = {\r\n ...DEFAULT_GENERAL_SIMULATION_CONFIG,\r\n ...config.general\r\n };\r\n\r\n const consumption = CONSUMPTION_PROFILES[config.householdConsumption.consumptionProfile];\r\n const norm = consumption.reduce((acc, curr) => acc + curr, 0);\r\n\r\n const additionalConsumption = config.heatPump?.m2 * HEAT_PUMP_CONSUMPTION || 0;\r\n\r\n let electricCarConsumption = 0;\r\n let electricCarNorm = 1;\r\n let electricCarChargingHours = consumption.map(_ => false);\r\n if (config.electricCar) {\r\n electricCarChargingHours = config.electricCar.chargingHours;\r\n const dailyCarUsage = config.electricCar.averageKilometersPerDay / 100 * config.electricCar.consumptionkWhPer100km;\r\n electricCarConsumption = Math.min(dailyCarUsage, config.electricCar.batteryKWh);\r\n electricCarNorm = config.electricCar.chargingHours.reduce((acc, curr) => acc + (curr ? 1 : 0), 0);\r\n if (electricCarNorm === 0) {\r\n electricCarNorm = 1;\r\n }\r\n }\r\n\r\n const systemSize = config.solarSystem.numberOfPanels * config.solarSystem.panelType.kWattPeak;\r\n const summerProduction = getSolarRadiation(config.solarRadiation.summerFactor * systemSize);\r\n const winterProduction = getSolarRadiation(config.solarRadiation.winterFactor * systemSize);\r\n\r\n const summerConsumptionWholeDay = config.householdConsumption.averageConsumption * config.householdConsumption.summerConsumptionFactor + additionalConsumption * config.householdConsumption.summerConsumptionFactor;\r\n const summerConsumptionDaily = consumption.map((c, i) => c / norm * summerConsumptionWholeDay + electricCarConsumption/electricCarNorm * (electricCarChargingHours[i] ? 1 : 0));\r\n const winterConsumptionWholeDay = config.householdConsumption.averageConsumption * config.householdConsumption.winterConsumptionFactor + additionalConsumption * config.householdConsumption.winterConsumptionFactor;\r\n const winterConsumptionDaily = consumption.map((c, i) => c / norm * winterConsumptionWholeDay + electricCarConsumption/electricCarNorm * (electricCarChargingHours[i] ? 1 : 0));\r\n\r\n const summerDay = simulateDay(summerProduction, summerConsumptionDaily, summerConsumptionWholeDay + electricCarConsumption, config.batteryKWh);\r\n const winterDay = simulateDay(winterProduction, winterConsumptionDaily, winterConsumptionWholeDay + electricCarConsumption, config.batteryKWh);\r\n\r\n let savedCosts = 0;\r\n let savedCostsByYear = [];\r\n const soldEnergy = (summerDay.soldEnergy + winterDay.soldEnergy) / 2;\r\n const ownConsumption = (summerDay.energyUsageOfProduction + winterDay.energyUsageOfProduction) / 2;\r\n\r\n let energyPrice = config.electricityPrice.purchase;\r\n for (let i = 0; i < generalConfig.simulationYears; i++) {\r\n const savedCostsThisYear = ownConsumption * energyPrice * 365;\r\n savedCosts += savedCostsThisYear;\r\n savedCostsByYear.push(savedCostsThisYear);\r\n\r\n energyPrice = (1 + config.electricityPrice.increase) * energyPrice;\r\n }\r\n\r\n return {\r\n autonomy: (summerDay.autonomy + winterDay.autonomy) / 2,\r\n compensationPerDay: soldEnergy * config.electricityPrice.sell,\r\n byYearSavedCosts: savedCostsByYear,\r\n } as SimulationResult;\r\n}","/*! 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","import { Component, h, Prop, State, Watch } from \"@stencil/core\";\r\nimport { DEFAULT_SOLAR_PANEL_TYPE } from \"../../config\";\r\nimport { SolarPanelSystemPart } from \"../../utils/geometry/fitting\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { Polygon } from \"../../types/shapes\";\r\nimport { state } from \"../../store\";\r\nimport { SimulationConfig } from \"../../utils/simulation/types\";\r\nimport {\r\n generateElectricCarChargingHours,\r\n simulate,\r\n} from \"../../utils/simulation/simulation\";\r\n\r\n@Component({\r\n tag: \"solar-system-form\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class SolarSystemForm {\r\n @Prop()\r\n systemConfigs: { [id: string]: SolarPanelSystemPart } = {};\r\n @Prop()\r\n roofPolygons: { [id: string]: Polygon } = {};\r\n @Prop()\r\n obstructionPolygons: { [id: string]: Polygon } = {};\r\n\r\n @State()\r\n householdConsumption: number = 4500;\r\n @State()\r\n consumptionProfile: \"mostly_at_home\" | \"mostly_away\" = \"mostly_at_home\";\r\n @State()\r\n electricityPrice: number = 0.3;\r\n @State()\r\n compensationRate: number = 0.07;\r\n @State()\r\n annualPriceIncrease: number = 2;\r\n @State()\r\n autonomy: number = 0;\r\n @State()\r\n costSavings: number = 0;\r\n @State()\r\n numberOfPanels: number = 5;\r\n @State()\r\n panelPeakPower: number = 0.4; // kW per panel\r\n @State()\r\n name: string = \"\";\r\n @State()\r\n email: string = \"\";\r\n @State()\r\n nameError: string = \"\";\r\n @State()\r\n emailError: string = \"\";\r\n @State()\r\n electricCar: boolean = false;\r\n @State()\r\n electricCarChargingTime: \"day\" | \"night\" = \"day\";\r\n @State()\r\n heatPump: number = 0;\r\n @State()\r\n battery: number = 0;\r\n\r\n @State()\r\n compensation25Years: number = 0;\r\n @State()\r\n savedCosts25Years: number = 0;\r\n @State()\r\n maxPanels: number = 5;\r\n\r\n @Watch(\"systemConfigs\")\r\n updateSystemConfigs() {\r\n if (Object.keys(this.systemConfigs).length === 0) {\r\n this.numberOfPanels = 0;\r\n this.maxPanels = 0;\r\n return;\r\n }\r\n this.numberOfPanels = Object.keys(this.systemConfigs).reduce(\r\n (acc, curr) =>\r\n acc + this.systemConfigs[curr].positionedPanels.length,\r\n 0,\r\n );\r\n this.maxPanels = Object.keys(this.systemConfigs).reduce(\r\n (acc, curr) =>\r\n acc + this.systemConfigs[curr].positionedPanels.length,\r\n 0,\r\n );\r\n\r\n this.panelPeakPower =\r\n Object.entries(this.systemConfigs)[0][1].positionedPanels[0].panel\r\n .kWattPeak;\r\n\r\n this.recalculate();\r\n }\r\n\r\n private recalculate() {\r\n const simulationConfig: SimulationConfig = {\r\n general: {\r\n simulationYears: 25,\r\n },\r\n householdConsumption: {\r\n consumptionProfile: this.consumptionProfile,\r\n winterConsumptionFactor: 1.2,\r\n summerConsumptionFactor: 0.8,\r\n averageConsumption: this.householdConsumption / 365,\r\n },\r\n electricityPrice: {\r\n purchase: this.electricityPrice,\r\n sell: this.compensationRate,\r\n increase: this.annualPriceIncrease / 100,\r\n },\r\n solarSystem: {\r\n numberOfPanels: this.numberOfPanels,\r\n panelType: DEFAULT_SOLAR_PANEL_TYPE,\r\n pitch: 30,\r\n },\r\n batteryKWh: this.battery,\r\n solarRadiation: {\r\n winterFactor: 0.2,\r\n summerFactor: 0.6,\r\n },\r\n heatPump: {\r\n m2: this.heatPump,\r\n },\r\n electricCar: this.electricCar\r\n ? {\r\n averageKilometersPerDay: 50,\r\n consumptionkWhPer100km: 17,\r\n batteryKWh: 20,\r\n chargingHours: this.electricCarChargingTime === \"day\"\r\n ? generateElectricCarChargingHours(6, 18)\r\n : generateElectricCarChargingHours(18, 6),\r\n }\r\n : undefined,\r\n };\r\n\r\n const result = simulate(simulationConfig);\r\n\r\n this.compensation25Years = result.compensationPerDay * 365 * 25;\r\n this.savedCosts25Years = result.byYearSavedCosts.reduce(\r\n (acc, curr) => acc + curr,\r\n 0,\r\n );\r\n this.costSavings = result.compensationPerDay * 365;\r\n this.autonomy = result.autonomy * 100;\r\n }\r\n\r\n componentWillLoad() {\r\n this.updateSystemConfigs();\r\n }\r\n\r\n private validateForm(): boolean {\r\n let isValid = true;\r\n const t = getLanguageStrings(state.settings.language);\r\n\r\n // Validate name\r\n if (!this.name.trim()) {\r\n this.nameError = t.solarSystemForm.nameError;\r\n isValid = false;\r\n } else {\r\n this.nameError = \"\";\r\n }\r\n\r\n // Validate email\r\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\r\n if (!this.email.trim()) {\r\n this.emailError = t.solarSystemForm.emailError;\r\n isValid = false;\r\n } else if (!emailRegex.test(this.email)) {\r\n this.emailError = t.solarSystemForm.validEmailError;\r\n isValid = false;\r\n } else {\r\n this.emailError = \"\";\r\n }\r\n\r\n return isValid;\r\n }\r\n\r\n private handleRequestOffer() {\r\n if (!this.validateForm()) {\r\n return;\r\n }\r\n // Here you can implement the logic to handle the offer request\r\n console.log(\"Requesting offer for: \", {\r\n name: this.name,\r\n email: this.email,\r\n systemConfig: this.systemConfigs,\r\n consumption: this.householdConsumption,\r\n autonomy: this.autonomy,\r\n costSavings: this.costSavings,\r\n roofPolygons: this.roofPolygons,\r\n obstructionPolygons: this.obstructionPolygons,\r\n });\r\n }\r\n\r\n render() {\r\n const t = getLanguageStrings(state.settings.language);\r\n return (\r\n <div\r\n class=\"flex flex-col justify-center items-center w-full h-full pt-4\" // style={{\r\n // display: (Object.keys(this.systemConfigs).length === 0)\r\n // ? \"none\"\r\n // : \"flex\",\r\n // }}\r\n id=\"solar-system-form\"\r\n >\r\n <h1 class=\"text-2xl font-bold text-[#271200] mb-4 w-full\">\r\n {t.solarSystemForm.title}\r\n </h1>\r\n\r\n <div class=\"w-full bg-[#f3ebda] rounded-4xl p-6 space-y-6\">\r\n {/* System Info Section */}\r\n <div class=\"space-y-4\">\r\n <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n {t.solarSystemForm.systemInformation}\r\n </h2>\r\n <div class=\"grid grid-rows-3 gap-0\">\r\n <div class=\"grid grid-cols-2 gap-4\">\r\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n {t.solarSystemForm.numberOfPanels}\r\n </label>\r\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n {t.solarSystemForm.panelPeakPower}\r\n </label>\r\n </div>\r\n <div class=\"grid grid-cols-2 gap-4\">\r\n <input\r\n type=\"number\"\r\n class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n value={this.numberOfPanels}\r\n readOnly\r\n />\r\n <input\r\n type=\"number\"\r\n class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n value={this.panelPeakPower}\r\n readonly\r\n />\r\n </div>\r\n <div class=\"grid grid-cols-2 gap-4\">\r\n <div class=\"w-full pt-2\">\r\n <input\r\n type=\"range\"\r\n min=\"1\"\r\n max={this.maxPanels}\r\n step=\"1\"\r\n class=\"input-slider 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\"\r\n value={this.numberOfPanels}\r\n onInput={(e) => {\r\n this.numberOfPanels = parseInt(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n );\r\n this.recalculate();\r\n }}\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"bg-white rounded-4xl p-4\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"text-gray-600\">\r\n {t.solarSystemForm.totalSystemPeakPower}\r\n </span>\r\n <span class=\"text-xl font-bold text-[#271200]\">\r\n {(DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *\r\n this.numberOfPanels).toFixed(1)} kW\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n {/* Household Consumption Section */}\r\n <div class=\"space-y-4\">\r\n <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n {t.solarSystemForm.householdConsumptionTitle}\r\n </h2>\r\n <div class=\"grid grid-rows-2 gap-0\">\r\n <div class=\"grid grid-cols-2 gap-4\">\r\n <label class=\"block text-sm font-medium text-gray-600\">\r\n {t.solarSystemForm.annualConsumption}\r\n </label>\r\n <label class=\"block text-sm font-medium text-gray-600\">\r\n {t.solarSystemForm.consumptionProfileTitle}\r\n </label>\r\n </div>\r\n <div class=\"grid grid-cols-2 gap-4\">\r\n <input\r\n type=\"number\"\r\n class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n value={this.householdConsumption}\r\n onInput={(e) => {\r\n this.householdConsumption = parseInt(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n );\r\n this.recalculate();\r\n }}\r\n />\r\n <select\r\n class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n onChange={(e) => {\r\n this.consumptionProfile =\r\n (e.target as HTMLSelectElement)\r\n .value as\r\n | \"mostly_at_home\"\r\n | \"mostly_away\";\r\n this.recalculate();\r\n }}\r\n >\r\n <option\r\n value=\"mostly_at_home\"\r\n selected={this.consumptionProfile ===\r\n \"mostly_at_home\"}\r\n >\r\n {t.solarSystemForm.consumptionProfiles\r\n .mostlyAtHome}\r\n </option>\r\n <option\r\n value=\"mostly_away\"\r\n selected={this.consumptionProfile ===\r\n \"mostly_away\"}\r\n >\r\n {t.solarSystemForm.consumptionProfiles\r\n .mostlyAway}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n {\r\n /* <div class=\"mt-4 h-48\">\r\n <canvas ref={(el) => this.chartRef = el}></canvas>\r\n </div> */\r\n }\r\n </div>\r\n <div class=\"space-y-4\">\r\n <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n {t.solarSystemForm.additionalComponents.title}\r\n </h2>\r\n <div class=\"flex flex-col gap-4\">\r\n {/* Heat Pump Section */}\r\n <div class=\"flex flex-col bg-white rounded-4xl p-4 gap-4\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"flex items-center gap-2\">\r\n <input\r\n type=\"checkbox\"\r\n id=\"heatPump\"\r\n class=\"w-4 h-4 accent-[#964500] border-gray-300 rounded-full focus:ring-[#964500] focus:ring-offset-0 focus:ring-2\"\r\n checked={this.heatPump > 0}\r\n onChange={(e) => {\r\n this.heatPump =\r\n (e.target as HTMLInputElement)\r\n .checked\r\n ? 100\r\n : 0;\r\n this.recalculate();\r\n }}\r\n />\r\n <label\r\n htmlFor=\"heatPump\"\r\n class=\"text-gray-600\"\r\n >\r\n {t.solarSystemForm\r\n .additionalComponents\r\n .heatPump}\r\n </label>\r\n </div>\r\n {this.heatPump > 0 && (\r\n <span class=\"text-gray-600\">\r\n {this.heatPump} m²\r\n </span>\r\n )}\r\n </div>\r\n {this.heatPump > 0 && (\r\n <div class=\"flex flex-col gap-2\">\r\n <input\r\n type=\"range\"\r\n min=\"10\"\r\n max=\"300\"\r\n step=\"10\"\r\n class=\"input-slider 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\"\r\n value={this.heatPump}\r\n onInput={(e) => {\r\n this.heatPump = parseInt(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n );\r\n this.recalculate();\r\n }}\r\n />\r\n </div>\r\n )}\r\n </div>\r\n\r\n {/* Electric Car Section */}\r\n <div class=\"flex flex-col bg-white rounded-4xl p-4 gap-4\">\r\n <div class=\"flex items-center justify-between\">\r\n <div class=\"flex items-center gap-2\">\r\n <input\r\n type=\"checkbox\"\r\n id=\"electricCar\"\r\n class=\"w-4 h-4 accent-[#964500] border-gray-300 rounded focus:ring-[#964500] focus:ring-offset-0 focus:ring-2\"\r\n checked={this.electricCar}\r\n onChange={(e) => {\r\n this.electricCar =\r\n (e.target as HTMLInputElement)\r\n .checked;\r\n this.recalculate();\r\n }}\r\n />\r\n <label\r\n htmlFor=\"electricCar\"\r\n class=\"text-gray-600\"\r\n >\r\n {t.solarSystemForm\r\n .additionalComponents\r\n .electricCar}\r\n </label>\r\n </div>\r\n </div>\r\n {this.electricCar && (\r\n <div class=\"flex flex-col gap-2\">\r\n <label class=\"text-sm text-gray-600\">\r\n {t.solarSystemForm\r\n .additionalComponents\r\n .chargingTime}\r\n </label>\r\n <select\r\n class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n onChange={(e) => {\r\n this.electricCarChargingTime =\r\n (e.target as HTMLSelectElement)\r\n .value as\r\n | \"day\"\r\n | \"night\";\r\n this.recalculate();\r\n }}\r\n >\r\n <option\r\n value=\"day\"\r\n selected={this\r\n .electricCarChargingTime ===\r\n \"day\"}\r\n >\r\n {t.solarSystemForm\r\n .additionalComponents\r\n .chargingTimeDay}\r\n </option>\r\n <option\r\n value=\"night\"\r\n selected={this\r\n .electricCarChargingTime ===\r\n \"night\"}\r\n >\r\n {t.solarSystemForm\r\n .additionalComponents\r\n .chargingTimeNight}\r\n </option>\r\n </select>\r\n </div>\r\n )}\r\n </div>\r\n\r\n {/* Battery Section */}\r\n <div class=\"flex flex-col bg-white rounded-4xl p-4 gap-4\">\r\n <div class=\"flex items-center justify-between\">\r\n <label class=\"text-gray-600\">\r\n {t.solarSystemForm.additionalComponents\r\n .battery}\r\n </label>\r\n <span class=\"text-gray-600\">\r\n {this.battery} kWh\r\n </span>\r\n </div>\r\n <div class=\"flex flex-col gap-2\">\r\n <input\r\n type=\"range\"\r\n min=\"0\"\r\n max=\"20\"\r\n step=\"1\"\r\n class=\"input-slider 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\"\r\n value={this.battery}\r\n onInput={(e) => {\r\n this.battery = parseInt(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n );\r\n this.recalculate();\r\n }}\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n {/* Electricity Price and Compensation Section */}\r\n <div class=\"space-y-4\">\r\n <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n {t.solarSystemForm.electricityCostsTitle}\r\n </h2>\r\n <div class=\"grid grid-rows-2 gap-0\">\r\n <div class=\"grid grid-cols-3 gap-4\">\r\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n {t.solarSystemForm.electricityPrice}\r\n </label>\r\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n {t.solarSystemForm.compensationRate}\r\n </label>\r\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n {t.solarSystemForm.annualPriceIncrease}\r\n </label>\r\n </div>\r\n <div class=\"grid grid-cols-3 gap-4\">\r\n <input\r\n type=\"number\"\r\n step=\"0.01\"\r\n class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n value={this.electricityPrice.toFixed(2)}\r\n onInput={(e) => {\r\n this.electricityPrice = parseFloat(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n );\r\n this.recalculate();\r\n }}\r\n />\r\n <input\r\n type=\"number\"\r\n step=\"0.01\"\r\n class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n value={this.compensationRate.toFixed(2)}\r\n onInput={(e) => {\r\n this.compensationRate = parseFloat(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n );\r\n this.recalculate();\r\n }}\r\n />\r\n <input\r\n type=\"number\"\r\n step=\"0.1\"\r\n class=\"w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white\"\r\n value={this.annualPriceIncrease.toFixed(1)}\r\n onInput={(e) => {\r\n this.annualPriceIncrease = parseFloat(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n );\r\n this.recalculate();\r\n }}\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n {/* Results Section */}\r\n <div class=\"space-y-4 pt-4 border-t border-gray-200\">\r\n <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n {t.solarSystemForm.resultsTitle}\r\n </h2>\r\n <div class=\"bg-white rounded-4xl p-4\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"text-gray-600\">\r\n {t.solarSystemForm.autonomy}\r\n </span>\r\n <span class=\"text-xl font-bold text-[#271200]\">\r\n {this.autonomy > 100\r\n ? \"100\"\r\n : this.autonomy.toFixed(1)}%\r\n </span>\r\n </div>\r\n <div class=\"flex items-center justify-between mt-4\">\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"text-gray-600\">\r\n {t.solarSystemForm.costSavings}\r\n </span>\r\n <div class=\"relative group\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"h-5 w-5 text-gray-400 cursor-help\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"currentColor\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z\"\r\n clip-rule=\"evenodd\"\r\n />\r\n </svg>\r\n <div class=\"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-64 p-2 bg-gray-800 text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none\">\r\n {t.solarSystemForm\r\n .savingsDisclaimer}\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"text-xl font-bold text-green-600\">\r\n {this.costSavings.toFixed(2)}€/{t\r\n .solarSystemForm.year}\r\n </span>\r\n </div>\r\n <div class=\"flex items-center justify-between mt-4\">\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"text-gray-600\">\r\n Einspeisevergütung 25 Jahre\r\n </span>\r\n </div>\r\n <span class=\"text-xl font-bold text-green-600\">\r\n {this.compensation25Years.toFixed(2)}€\r\n </span>\r\n </div>\r\n <div class=\"flex items-center justify-between mt-4\">\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"text-gray-600\">\r\n Geldwerter Vorteil 25 Jahre\r\n </span>\r\n </div>\r\n <span class=\"text-xl font-bold text-green-600\">\r\n {this.savedCosts25Years.toFixed(2)}€\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n {/* Contact Information Section */}\r\n <div class=\"space-y-4 pt-4 border-t border-gray-200\">\r\n <h2 class=\"text-lg font-semibold text-[#271200]\">\r\n {t.solarSystemForm.requestOffer}\r\n </h2>\r\n <div class=\"grid grid-rows-2 gap-0\">\r\n <div class=\"grid grid-cols-2 gap-4\">\r\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n {t.solarSystemForm.name}\r\n </label>\r\n <label class=\"block text-sm font-medium text-gray-600 mb-1\">\r\n {t.solarSystemForm.email}\r\n </label>\r\n </div>\r\n <div class=\"grid grid-cols-2 gap-4\">\r\n <input\r\n type=\"text\"\r\n class={`w-full px-4 py-2 rounded-4xl border ${\r\n this.nameError\r\n ? \"border-red-500\"\r\n : \"border-gray-300\"\r\n } focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white`}\r\n value={this.name}\r\n onInput={(e) => {\r\n this.name =\r\n (e.target as HTMLInputElement)\r\n .value;\r\n this.validateForm();\r\n }}\r\n placeholder=\"Your name\"\r\n />\r\n {this.nameError && (\r\n <p class=\"text-red-500 text-sm mt-1\">\r\n {this.nameError}\r\n </p>\r\n )}\r\n <input\r\n type=\"email\"\r\n class={`w-full px-4 py-2 rounded-4xl border ${\r\n this.emailError\r\n ? \"border-red-500\"\r\n : \"border-gray-300\"\r\n } focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white`}\r\n value={this.email}\r\n onInput={(e) => {\r\n this.email =\r\n (e.target as HTMLInputElement)\r\n .value;\r\n this.validateForm();\r\n }}\r\n placeholder=\"your.email@example.com\"\r\n />\r\n {this.emailError && (\r\n <p class=\"text-red-500 text-sm mt-1\">\r\n {this.emailError}\r\n </p>\r\n )}\r\n </div>\r\n </div>\r\n <div class=\"flex justify-center\">\r\n <button\r\n onClick={() => this.handleRequestOffer()}\r\n disabled={!this.name.trim() ||\r\n !this.email.trim() || !!this.nameError ||\r\n !!this.emailError}\r\n class=\"px-4 py-2 bg-[#271200] rounded-4xl hover:bg-[#964500] transition-colors duration-200\"\r\n style={{ color: \"white\" }}\r\n >\r\n {t.solarSystemForm.requestOfferButton}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n","/*! 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","import { Component, h, Prop } from \"@stencil/core\";\r\nimport { Tool } from \"../../utils/render/tools\";\r\nimport { getLanguageStrings } from \"../../utils/lang/general\";\r\nimport { state } from \"../../store\";\r\nimport { tools, undoTool } from \"../../utils/render/tools\";\r\n\r\n@Component({\r\n tag: \"tool-box\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class ToolBox {\r\n @Prop()\r\n currentTool: Tool;\r\n @Prop()\r\n undoCallback: () => void;\r\n @Prop()\r\n onToolSelect: (tool: Tool) => void;\r\n\r\n render() {\r\n const t = getLanguageStrings(state.settings.language);\r\n const undoToolStrings = t.mapDraw.tools[undoTool.name];\r\n\r\n return (\r\n <div class=\"flex lg:gap-4 rounded-4xl bg-[#f3ebda] p-4 flex-wrap justify-center w-full text-xs\">\r\n {tools.map((tool) => {\r\n const toolStrings = t.mapDraw.tools[tool.name];\r\n return (\r\n <button\r\n class={`px-4 py-2 rounded-4xl transition-colors duration-200 hover:bg-[#ffffff] ${\r\n this.currentTool.name === tool.name\r\n ? \"bg-[#271200] hover:bg-gray-500\"\r\n : \"bg-[#f3ebda] hover:bg-[#ffffff]\"\r\n }`}\r\n style={{\r\n color: this.currentTool.name === tool.name\r\n ? \"#ffffff\"\r\n : \"#000000\",\r\n }}\r\n aria-label={toolStrings.ariaLabel}\r\n title={toolStrings.explanation}\r\n onClick={() => this.onToolSelect(tool)}\r\n >\r\n <div class=\"flex items-center gap-1 flex-col\">\r\n <icon-selector name={tool.icon} />\r\n <span>{toolStrings.name}</span>\r\n </div>\r\n </button>\r\n );\r\n })}\r\n <button\r\n class={`px-4 py-2 rounded-4xl transition-colors duration-200 hover:bg-[#ffffff] ${\r\n this.currentTool.name === undoTool.name\r\n ? \"bg-[#271200] hover:bg-gray-500\"\r\n : \"bg-[#f3ebda] hover:bg-[#ffffff]\"\r\n }`}\r\n style={{\r\n color: \"#000000\",\r\n }}\r\n aria-label={undoToolStrings.ariaLabel}\r\n title={undoToolStrings.explanation}\r\n onClick={() => this.undoCallback()}\r\n >\r\n <div class=\"flex items-center gap-1 flex-col\">\r\n <undo-icon />\r\n <span>{undoToolStrings.name}</span>\r\n </div>\r\n </button>\r\n </div>\r\n );\r\n }\r\n}\r\n","/*! 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","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"undo-icon\",\r\n styleUrl: \"../../output.css\",\r\n shadow: false,\r\n})\r\nexport class UndoIcon {\r\n @Prop()\r\n inline: boolean = false;\r\n @Prop()\r\n size: number = 20;\r\n\r\n render() {\r\n return (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n class=\"lucide lucide-undo2-icon lucide-undo-2\"\r\n >\r\n <path d=\"M9 14 4 9l5-5\" />\r\n <path d=\"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11\" />\r\n </svg>\r\n );\r\n }\r\n}\r\n"],"mappings":"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","ignoreList":[]}