blue-chestnut-solar-expert 0.0.32 → 0.0.33

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 (34) hide show
  1. package/dist/cjs/eraser-icon.house-icon.icon-selector.map-draw.map-selector.move-icon.octagon-minus-icon.polygon-buttons.polygon-information.search-icon.settings-icon.settings-modal.solar-expert.solar-system-form.tool-box.undo-icon.entry.cjs.js.map +1 -1
  2. package/dist/cjs/eraser-icon_16.cjs.entry.js +117 -61
  3. package/dist/cjs/eraser-icon_16.cjs.entry.js.map +1 -1
  4. package/dist/collection/components/map-draw/map-draw.js +7 -7
  5. package/dist/collection/components/map-draw/map-draw.js.map +1 -1
  6. package/dist/collection/components/solar-expert/solar-expert.js +12 -4
  7. package/dist/collection/components/solar-expert/solar-expert.js.map +1 -1
  8. package/dist/collection/components/solar-system-form/solar-system-form.js +35 -25
  9. package/dist/collection/components/solar-system-form/solar-system-form.js.map +1 -1
  10. package/dist/collection/config.js +31 -0
  11. package/dist/collection/config.js.map +1 -1
  12. package/dist/collection/utils/theme.js +34 -26
  13. package/dist/collection/utils/theme.js.map +1 -1
  14. package/dist/components/map-draw.js +1 -1
  15. package/dist/components/{p-r9wMCtI3.js → p-ClYOM_0b.js} +10 -10
  16. package/dist/components/{p-r9wMCtI3.js.map → p-ClYOM_0b.js.map} +1 -1
  17. package/dist/components/{p-ao6bHDbv.js → p-CrzEBN9H.js} +69 -28
  18. package/dist/components/p-CrzEBN9H.js.map +1 -0
  19. package/dist/components/solar-expert.js +46 -31
  20. package/dist/components/solar-expert.js.map +1 -1
  21. package/dist/components/solar-system-form.js +1 -1
  22. package/dist/esm/eraser-icon.house-icon.icon-selector.map-draw.map-selector.move-icon.octagon-minus-icon.polygon-buttons.polygon-information.search-icon.settings-icon.settings-modal.solar-expert.solar-system-form.tool-box.undo-icon.entry.js.map +1 -1
  23. package/dist/esm/eraser-icon_16.entry.js +117 -61
  24. package/dist/esm/eraser-icon_16.entry.js.map +1 -1
  25. package/dist/stencil-library/eraser-icon.house-icon.icon-selector.map-draw.map-selector.move-icon.octagon-minus-icon.polygon-buttons.polygon-information.search-icon.settings-icon.settings-modal.solar-expert.solar-system-form.tool-box.undo-icon.entry.esm.js.map +1 -1
  26. package/dist/stencil-library/p-3d7da486.entry.js +2 -0
  27. package/dist/stencil-library/p-3d7da486.entry.js.map +1 -0
  28. package/dist/stencil-library/stencil-library.esm.js +1 -1
  29. package/dist/types/config.d.ts +1 -0
  30. package/dist/types/utils/theme.d.ts +7 -0
  31. package/package.json +1 -1
  32. package/dist/components/p-ao6bHDbv.js.map +0 -1
  33. package/dist/stencil-library/p-141320bb.entry.js +0 -2
  34. package/dist/stencil-library/p-141320bb.entry.js.map +0 -1
package/dist/stencil-library/p-3d7da486.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"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","DEFAULT_COLOR_SCHEME","primary","primaryForeground","secondary","secondaryForeground","tertiary","tertiaryForeground","muted","mutedForeground","error","errorForeground","surface","surfaceHover","surfaceActive","textMuted","textSecondary","textPlaceholder","border","borderLight","success","info","hover","hoverDark","overlay","tooltip","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","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","kilometersPerYear","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","isIOS","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","aspectRatio","ref","selectEdgeTool","systemConfigs","onClose","onSave","MapSelector","isLoaded","autocomplete","marker","circle","inputElement","mapElement","loadGoogleMapsScript","loader","Loader","libraries","places","maps","Promise","all","importLibrary","initializeAutocomplete","initializeMap","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","navigator","userAgent","maxTouchPoints","selected","applyThemeGlobally","colorScheme","applyThemeToElement","documentElement","element","setProperty","SolarExpert","Env","GOOGLE_MAPS_API_KEY","showMapSelector","test","window","innerWidth","scrollToMapDraw","isIPhone","isMac","applyTheme","colorSchemeChanged","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","kmDrivenPerYear","updateSystemConfigs","recalculate","simulationConfig","validateForm","isValid","trim","emailRegex","handleRequestOffer","systemConfig","readOnly","parseInt","readonly","step","checked","htmlFor","disabled","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","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","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/utils/theme.ts","src/output.css?tag=solar-expert&encapsulation=shadow","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.8 | 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-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\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 --color-primary: hsl(41 51% 90%);\n --color-primary-foreground: hsl(0 0% 0%);\n --color-secondary: hsl(28 100% 8%);\n --color-secondary-foreground: hsl(0 0% 100%);\n --color-tertiary: hsl(28 100% 29%);\n --color-tertiary-foreground: hsl(0 0% 100%);\n --color-muted: hsl(0 0% 100%);\n --color-muted-foreground: hsl(0 0% 0%);\n --color-error: hsl(0 100% 50%);\n --color-error-foreground: hsl(0 0% 100%);\n --color-surface: hsl(0 0% 88%);\n --color-surface-hover: hsl(0 0% 82%);\n --color-surface-active: hsl(0 0% 64%);\n --color-text-muted: hsl(0 0% 45%);\n --color-text-secondary: hsl(0 0% 55%);\n --color-text-placeholder: hsl(0 0% 73%);\n --color-border: hsl(0 0% 82%);\n --color-border-light: hsl(0 0% 93%);\n --color-success: hsl(142 76% 36%);\n --color-info: hsl(221 83% 53%);\n --color-hover: hsl(0 0% 88%);\n --color-hover-dark: hsl(28 100% 8%);\n --color-overlay: rgba(0, 0, 0, 0.24);\n --color-tooltip: hsl(0 0% 13%);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .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-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-border {\n border-color: var(--color-border);\n }\n .border-error {\n border-color: var(--color-error);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-secondary {\n border-color: var(--color-secondary);\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-gray-800 {\n background-color: var(--color-gray-800);\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .bg-overlay {\n background-color: var(--color-overlay);\n }\n .bg-primary {\n background-color: var(--color-primary);\n }\n .bg-secondary {\n background-color: var(--color-secondary);\n }\n .bg-surface {\n background-color: var(--color-surface);\n }\n .bg-surface-active {\n background-color: var(--color-surface-active);\n }\n .bg-text-secondary {\n background-color: var(--color-text-secondary);\n }\n .bg-transparent {\n background-color: transparent;\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-error {\n color: var(--color-error);\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-muted {\n color: var(--color-muted);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .text-primary-foreground {\n color: var(--color-primary-foreground);\n }\n .text-secondary {\n color: var(--color-secondary);\n }\n .text-secondary-foreground {\n color: var(--color-secondary-foreground);\n }\n .text-success {\n color: var(--color-success);\n }\n .text-text-muted {\n color: var(--color-text-muted);\n }\n .text-text-placeholder {\n color: var(--color-text-placeholder);\n }\n .text-text-secondary {\n color: var(--color-text-secondary);\n }\n .accent-tertiary {\n accent-color: var(--color-tertiary);\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-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover);\n }\n }\n }\n .hover\\:bg-hover-dark {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover-dark);\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-muted);\n }\n }\n }\n .hover\\:bg-overlay {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-overlay);\n }\n }\n }\n .hover\\:bg-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-secondary);\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-surface-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-surface-hover);\n }\n }\n }\n .hover\\:bg-tertiary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-tertiary);\n }\n }\n }\n .hover\\:bg-text-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-text-secondary);\n }\n }\n }\n .hover\\:text-muted {\n &:hover {\n @media (hover: hover) {\n color: var(--color-muted);\n }\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-info {\n &:focus {\n --tw-ring-color: var(--color-info);\n }\n }\n .focus\\:ring-secondary {\n &:focus {\n --tw-ring-color: var(--color-secondary);\n }\n }\n .focus\\:ring-tertiary {\n &:focus {\n --tw-ring-color: var(--color-tertiary);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .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-muted {\n &::-webkit-slider-thumb {\n background-color: var(--color-muted);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-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.8 | 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-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\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 --color-primary: hsl(41 51% 90%);\n --color-primary-foreground: hsl(0 0% 0%);\n --color-secondary: hsl(28 100% 8%);\n --color-secondary-foreground: hsl(0 0% 100%);\n --color-tertiary: hsl(28 100% 29%);\n --color-tertiary-foreground: hsl(0 0% 100%);\n --color-muted: hsl(0 0% 100%);\n --color-muted-foreground: hsl(0 0% 0%);\n --color-error: hsl(0 100% 50%);\n --color-error-foreground: hsl(0 0% 100%);\n --color-surface: hsl(0 0% 88%);\n --color-surface-hover: hsl(0 0% 82%);\n --color-surface-active: hsl(0 0% 64%);\n --color-text-muted: hsl(0 0% 45%);\n --color-text-secondary: hsl(0 0% 55%);\n --color-text-placeholder: hsl(0 0% 73%);\n --color-border: hsl(0 0% 82%);\n --color-border-light: hsl(0 0% 93%);\n --color-success: hsl(142 76% 36%);\n --color-info: hsl(221 83% 53%);\n --color-hover: hsl(0 0% 88%);\n --color-hover-dark: hsl(28 100% 8%);\n --color-overlay: rgba(0, 0, 0, 0.24);\n --color-tooltip: hsl(0 0% 13%);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .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-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-border {\n border-color: var(--color-border);\n }\n .border-error {\n border-color: var(--color-error);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-secondary {\n border-color: var(--color-secondary);\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-gray-800 {\n background-color: var(--color-gray-800);\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .bg-overlay {\n background-color: var(--color-overlay);\n }\n .bg-primary {\n background-color: var(--color-primary);\n }\n .bg-secondary {\n background-color: var(--color-secondary);\n }\n .bg-surface {\n background-color: var(--color-surface);\n }\n .bg-surface-active {\n background-color: var(--color-surface-active);\n }\n .bg-text-secondary {\n background-color: var(--color-text-secondary);\n }\n .bg-transparent {\n background-color: transparent;\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-error {\n color: var(--color-error);\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-muted {\n color: var(--color-muted);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .text-primary-foreground {\n color: var(--color-primary-foreground);\n }\n .text-secondary {\n color: var(--color-secondary);\n }\n .text-secondary-foreground {\n color: var(--color-secondary-foreground);\n }\n .text-success {\n color: var(--color-success);\n }\n .text-text-muted {\n color: var(--color-text-muted);\n }\n .text-text-placeholder {\n color: var(--color-text-placeholder);\n }\n .text-text-secondary {\n color: var(--color-text-secondary);\n }\n .accent-tertiary {\n accent-color: var(--color-tertiary);\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-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover);\n }\n }\n }\n .hover\\:bg-hover-dark {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover-dark);\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-muted);\n }\n }\n }\n .hover\\:bg-overlay {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-overlay);\n }\n }\n }\n .hover\\:bg-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-secondary);\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-surface-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-surface-hover);\n }\n }\n }\n .hover\\:bg-tertiary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-tertiary);\n }\n }\n }\n .hover\\:bg-text-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-text-secondary);\n }\n }\n }\n .hover\\:text-muted {\n &:hover {\n @media (hover: hover) {\n color: var(--color-muted);\n }\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-info {\n &:focus {\n --tw-ring-color: var(--color-info);\n }\n }\n .focus\\:ring-secondary {\n &:focus {\n --tw-ring-color: var(--color-secondary);\n }\n }\n .focus\\:ring-tertiary {\n &:focus {\n --tw-ring-color: var(--color-tertiary);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .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-muted {\n &::-webkit-slider-thumb {\n background-color: var(--color-muted);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-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.8 | 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-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\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 --color-primary: hsl(41 51% 90%);\n --color-primary-foreground: hsl(0 0% 0%);\n --color-secondary: hsl(28 100% 8%);\n --color-secondary-foreground: hsl(0 0% 100%);\n --color-tertiary: hsl(28 100% 29%);\n --color-tertiary-foreground: hsl(0 0% 100%);\n --color-muted: hsl(0 0% 100%);\n --color-muted-foreground: hsl(0 0% 0%);\n --color-error: hsl(0 100% 50%);\n --color-error-foreground: hsl(0 0% 100%);\n --color-surface: hsl(0 0% 88%);\n --color-surface-hover: hsl(0 0% 82%);\n --color-surface-active: hsl(0 0% 64%);\n --color-text-muted: hsl(0 0% 45%);\n --color-text-secondary: hsl(0 0% 55%);\n --color-text-placeholder: hsl(0 0% 73%);\n --color-border: hsl(0 0% 82%);\n --color-border-light: hsl(0 0% 93%);\n --color-success: hsl(142 76% 36%);\n --color-info: hsl(221 83% 53%);\n --color-hover: hsl(0 0% 88%);\n --color-hover-dark: hsl(28 100% 8%);\n --color-overlay: rgba(0, 0, 0, 0.24);\n --color-tooltip: hsl(0 0% 13%);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .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-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-border {\n border-color: var(--color-border);\n }\n .border-error {\n border-color: var(--color-error);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-secondary {\n border-color: var(--color-secondary);\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-gray-800 {\n background-color: var(--color-gray-800);\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .bg-overlay {\n background-color: var(--color-overlay);\n }\n .bg-primary {\n background-color: var(--color-primary);\n }\n .bg-secondary {\n background-color: var(--color-secondary);\n }\n .bg-surface {\n background-color: var(--color-surface);\n }\n .bg-surface-active {\n background-color: var(--color-surface-active);\n }\n .bg-text-secondary {\n background-color: var(--color-text-secondary);\n }\n .bg-transparent {\n background-color: transparent;\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-error {\n color: var(--color-error);\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-muted {\n color: var(--color-muted);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .text-primary-foreground {\n color: var(--color-primary-foreground);\n }\n .text-secondary {\n color: var(--color-secondary);\n }\n .text-secondary-foreground {\n color: var(--color-secondary-foreground);\n }\n .text-success {\n color: var(--color-success);\n }\n .text-text-muted {\n color: var(--color-text-muted);\n }\n .text-text-placeholder {\n color: var(--color-text-placeholder);\n }\n .text-text-secondary {\n color: var(--color-text-secondary);\n }\n .accent-tertiary {\n accent-color: var(--color-tertiary);\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-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover);\n }\n }\n }\n .hover\\:bg-hover-dark {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover-dark);\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-muted);\n }\n }\n }\n .hover\\:bg-overlay {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-overlay);\n }\n }\n }\n .hover\\:bg-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-secondary);\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-surface-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-surface-hover);\n }\n }\n }\n .hover\\:bg-tertiary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-tertiary);\n }\n }\n }\n .hover\\:bg-text-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-text-secondary);\n }\n }\n }\n .hover\\:text-muted {\n &:hover {\n @media (hover: hover) {\n color: var(--color-muted);\n }\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-info {\n &:focus {\n --tw-ring-color: var(--color-info);\n }\n }\n .focus\\:ring-secondary {\n &:focus {\n --tw-ring-color: var(--color-secondary);\n }\n }\n .focus\\:ring-tertiary {\n &:focus {\n --tw-ring-color: var(--color-tertiary);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .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-muted {\n &::-webkit-slider-thumb {\n background-color: var(--color-muted);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-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\r\nexport const DEFAULT_COLOR_SCHEME: ColorScheme = {\r\n primary: \"hsl(41 51% 90%)\",\r\n primaryForeground: \"hsl(0 0% 0%)\",\r\n secondary: \"hsl(28 100% 8%)\",\r\n secondaryForeground: \"hsl(0 0% 100%)\",\r\n tertiary: \"hsl(28 100% 29%)\",\r\n tertiaryForeground: \"hsl(0 0% 100%)\",\r\n muted: \"hsl(0 0% 100%)\",\r\n mutedForeground: \"hsl(0 0% 0%)\",\r\n error: \"hsl(0 100% 50%)\",\r\n errorForeground: \"hsl(0 0% 100%)\",\r\n \r\n // Surface colors\r\n surface: \"hsl(0 0% 88%)\", // gray-200\r\n surfaceHover: \"hsl(0 0% 82%)\", // gray-300\r\n surfaceActive: \"hsl(0 0% 64%)\", // gray-400\r\n \r\n // Text colors\r\n textMuted: \"hsl(0 0% 45%)\", // gray-600\r\n textSecondary: \"hsl(0 0% 55%)\", // gray-500\r\n textPlaceholder: \"hsl(0 0% 73%)\", // gray-400\r\n \r\n // Border colors\r\n border: \"hsl(0 0% 82%)\", // gray-300\r\n borderLight: \"hsl(0 0% 93%)\", // gray-200\r\n \r\n // Status colors\r\n success: \"hsl(142 76% 36%)\", // green-600\r\n info: \"hsl(221 83% 53%)\", // blue-500\r\n \r\n // Interactive colors\r\n hover: \"hsl(0 0% 88%)\", // gray-200\r\n hoverDark: \"hsl(28 100% 8%)\", // darker secondary for hover\r\n overlay: \"rgba(0, 0, 0, 0.24)\", // #0000003c\r\n tooltip: \"hsl(0 0% 13%)\", // gray-800\r\n}\r\n\r\nexport interface ColorScheme {\r\n primary: string;\r\n primaryForeground: string;\r\n secondary: string;\r\n secondaryForeground: string;\r\n tertiary: string;\r\n tertiaryForeground: string;\r\n muted: string;\r\n mutedForeground: string;\r\n error: string;\r\n errorForeground: string;\r\n // Surface colors\r\n surface: string;\r\n surfaceHover: string;\r\n surfaceActive: string;\r\n // Text colors\r\n textMuted: string;\r\n textSecondary: string;\r\n textPlaceholder: string;\r\n // Border colors\r\n border: string;\r\n borderLight: string;\r\n // Status colors\r\n success: string;\r\n info: string;\r\n // Interactive colors\r\n hover: string;\r\n hoverDark: string;\r\n overlay: string;\r\n tooltip: string;\r\n}\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/**\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 kilometersPerYear: \"Kilometers per Year\",\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 kilometersPerYear: \"Kilometer pro Jahr\",\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 kilometersPerYear: \"Kilómetros por año\",\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 isIOS: 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 isIOS: 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\nonChange(\"isIOS\", (value) => {\r\n state.isIOS = value;\r\n});\r\n\r\nexport {state, onChange};\r\n","/*! tailwindcss v4.1.8 | 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-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\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 --color-primary: hsl(41 51% 90%);\n --color-primary-foreground: hsl(0 0% 0%);\n --color-secondary: hsl(28 100% 8%);\n --color-secondary-foreground: hsl(0 0% 100%);\n --color-tertiary: hsl(28 100% 29%);\n --color-tertiary-foreground: hsl(0 0% 100%);\n --color-muted: hsl(0 0% 100%);\n --color-muted-foreground: hsl(0 0% 0%);\n --color-error: hsl(0 100% 50%);\n --color-error-foreground: hsl(0 0% 100%);\n --color-surface: hsl(0 0% 88%);\n --color-surface-hover: hsl(0 0% 82%);\n --color-surface-active: hsl(0 0% 64%);\n --color-text-muted: hsl(0 0% 45%);\n --color-text-secondary: hsl(0 0% 55%);\n --color-text-placeholder: hsl(0 0% 73%);\n --color-border: hsl(0 0% 82%);\n --color-border-light: hsl(0 0% 93%);\n --color-success: hsl(142 76% 36%);\n --color-info: hsl(221 83% 53%);\n --color-hover: hsl(0 0% 88%);\n --color-hover-dark: hsl(28 100% 8%);\n --color-overlay: rgba(0, 0, 0, 0.24);\n --color-tooltip: hsl(0 0% 13%);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .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-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-border {\n border-color: var(--color-border);\n }\n .border-error {\n border-color: var(--color-error);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-secondary {\n border-color: var(--color-secondary);\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-gray-800 {\n background-color: var(--color-gray-800);\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .bg-overlay {\n background-color: var(--color-overlay);\n }\n .bg-primary {\n background-color: var(--color-primary);\n }\n .bg-secondary {\n background-color: var(--color-secondary);\n }\n .bg-surface {\n background-color: var(--color-surface);\n }\n .bg-surface-active {\n background-color: var(--color-surface-active);\n }\n .bg-text-secondary {\n background-color: var(--color-text-secondary);\n }\n .bg-transparent {\n background-color: transparent;\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-error {\n color: var(--color-error);\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-muted {\n color: var(--color-muted);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .text-primary-foreground {\n color: var(--color-primary-foreground);\n }\n .text-secondary {\n color: var(--color-secondary);\n }\n .text-secondary-foreground {\n color: var(--color-secondary-foreground);\n }\n .text-success {\n color: var(--color-success);\n }\n .text-text-muted {\n color: var(--color-text-muted);\n }\n .text-text-placeholder {\n color: var(--color-text-placeholder);\n }\n .text-text-secondary {\n color: var(--color-text-secondary);\n }\n .accent-tertiary {\n accent-color: var(--color-tertiary);\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-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover);\n }\n }\n }\n .hover\\:bg-hover-dark {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover-dark);\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-muted);\n }\n }\n }\n .hover\\:bg-overlay {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-overlay);\n }\n }\n }\n .hover\\:bg-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-secondary);\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-surface-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-surface-hover);\n }\n }\n }\n .hover\\:bg-tertiary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-tertiary);\n }\n }\n }\n .hover\\:bg-text-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-text-secondary);\n }\n }\n }\n .hover\\:text-muted {\n &:hover {\n @media (hover: hover) {\n color: var(--color-muted);\n }\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-info {\n &:focus {\n --tw-ring-color: var(--color-info);\n }\n }\n .focus\\:ring-secondary {\n &:focus {\n --tw-ring-color: var(--color-secondary);\n }\n }\n .focus\\:ring-tertiary {\n &:focus {\n --tw-ring-color: var(--color-tertiary);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .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-muted {\n &::-webkit-slider-thumb {\n background-color: var(--color-muted);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-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-muted text-muted-foreground\">\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-surface-hover 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-surface-hover 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-surface-hover 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-surface-hover 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-surface-hover transition-colors duration-200 bg-muted p-4 text-muted-foreground\"\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-surface-hover transition-colors duration-200 bg-muted p-4 text-muted-foreground\"\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-muted p-2 rounded-4xl hover:bg-surface-hover text-muted-foreground\"\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 class=\"text-muted text-center flex items-center justify-center rounded-4xl p-4 w-full bg-text-secondary\">\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-secondary\">\r\n </div>\r\n </div>\r\n )}\r\n <div class=\"flex items-start justify-center h-full w-full bg-primary rounded-4xl\">\r\n <div\r\n class=\"relative h-full flex items-center justify-center w-full rounded-4xl bg-secondary\"\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.8 | 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-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\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 --color-primary: hsl(41 51% 90%);\n --color-primary-foreground: hsl(0 0% 0%);\n --color-secondary: hsl(28 100% 8%);\n --color-secondary-foreground: hsl(0 0% 100%);\n --color-tertiary: hsl(28 100% 29%);\n --color-tertiary-foreground: hsl(0 0% 100%);\n --color-muted: hsl(0 0% 100%);\n --color-muted-foreground: hsl(0 0% 0%);\n --color-error: hsl(0 100% 50%);\n --color-error-foreground: hsl(0 0% 100%);\n --color-surface: hsl(0 0% 88%);\n --color-surface-hover: hsl(0 0% 82%);\n --color-surface-active: hsl(0 0% 64%);\n --color-text-muted: hsl(0 0% 45%);\n --color-text-secondary: hsl(0 0% 55%);\n --color-text-placeholder: hsl(0 0% 73%);\n --color-border: hsl(0 0% 82%);\n --color-border-light: hsl(0 0% 93%);\n --color-success: hsl(142 76% 36%);\n --color-info: hsl(221 83% 53%);\n --color-hover: hsl(0 0% 88%);\n --color-hover-dark: hsl(28 100% 8%);\n --color-overlay: rgba(0, 0, 0, 0.24);\n --color-tooltip: hsl(0 0% 13%);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .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-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-border {\n border-color: var(--color-border);\n }\n .border-error {\n border-color: var(--color-error);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-secondary {\n border-color: var(--color-secondary);\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-gray-800 {\n background-color: var(--color-gray-800);\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .bg-overlay {\n background-color: var(--color-overlay);\n }\n .bg-primary {\n background-color: var(--color-primary);\n }\n .bg-secondary {\n background-color: var(--color-secondary);\n }\n .bg-surface {\n background-color: var(--color-surface);\n }\n .bg-surface-active {\n background-color: var(--color-surface-active);\n }\n .bg-text-secondary {\n background-color: var(--color-text-secondary);\n }\n .bg-transparent {\n background-color: transparent;\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-error {\n color: var(--color-error);\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-muted {\n color: var(--color-muted);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .text-primary-foreground {\n color: var(--color-primary-foreground);\n }\n .text-secondary {\n color: var(--color-secondary);\n }\n .text-secondary-foreground {\n color: var(--color-secondary-foreground);\n }\n .text-success {\n color: var(--color-success);\n }\n .text-text-muted {\n color: var(--color-text-muted);\n }\n .text-text-placeholder {\n color: var(--color-text-placeholder);\n }\n .text-text-secondary {\n color: var(--color-text-secondary);\n }\n .accent-tertiary {\n accent-color: var(--color-tertiary);\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-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover);\n }\n }\n }\n .hover\\:bg-hover-dark {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover-dark);\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-muted);\n }\n }\n }\n .hover\\:bg-overlay {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-overlay);\n }\n }\n }\n .hover\\:bg-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-secondary);\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-surface-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-surface-hover);\n }\n }\n }\n .hover\\:bg-tertiary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-tertiary);\n }\n }\n }\n .hover\\:bg-text-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-text-secondary);\n }\n }\n }\n .hover\\:text-muted {\n &:hover {\n @media (hover: hover) {\n color: var(--color-muted);\n }\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-info {\n &:focus {\n --tw-ring-color: var(--color-info);\n }\n }\n .focus\\:ring-secondary {\n &:focus {\n --tw-ring-color: var(--color-secondary);\n }\n }\n .focus\\:ring-tertiary {\n &:focus {\n --tw-ring-color: var(--color-tertiary);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .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-muted {\n &::-webkit-slider-thumb {\n background-color: var(--color-muted);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-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: false,\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-0 h-full flex items-center pointer-events-none\">\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-border rounded-4xl focus:ring-secondary bg-muted\"\r\n />\r\n </div>\r\n <div class=\"w-full rounded-4xl p-4 bg-overlay\">\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-text-muted\">\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-muted\"\r\n />\r\n <span class=\"text-sm text-text-muted\">{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-border\"\r\n />\r\n\r\n <button\r\n onClick={() => this.handleAcceptPosition()}\r\n class=\"w-full py-2 px-4 bg-secondary text-muted rounded-4xl hover:bg-hover-dark 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.8 | 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-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\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 --color-primary: hsl(41 51% 90%);\n --color-primary-foreground: hsl(0 0% 0%);\n --color-secondary: hsl(28 100% 8%);\n --color-secondary-foreground: hsl(0 0% 100%);\n --color-tertiary: hsl(28 100% 29%);\n --color-tertiary-foreground: hsl(0 0% 100%);\n --color-muted: hsl(0 0% 100%);\n --color-muted-foreground: hsl(0 0% 0%);\n --color-error: hsl(0 100% 50%);\n --color-error-foreground: hsl(0 0% 100%);\n --color-surface: hsl(0 0% 88%);\n --color-surface-hover: hsl(0 0% 82%);\n --color-surface-active: hsl(0 0% 64%);\n --color-text-muted: hsl(0 0% 45%);\n --color-text-secondary: hsl(0 0% 55%);\n --color-text-placeholder: hsl(0 0% 73%);\n --color-border: hsl(0 0% 82%);\n --color-border-light: hsl(0 0% 93%);\n --color-success: hsl(142 76% 36%);\n --color-info: hsl(221 83% 53%);\n --color-hover: hsl(0 0% 88%);\n --color-hover-dark: hsl(28 100% 8%);\n --color-overlay: rgba(0, 0, 0, 0.24);\n --color-tooltip: hsl(0 0% 13%);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .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-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-border {\n border-color: var(--color-border);\n }\n .border-error {\n border-color: var(--color-error);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-secondary {\n border-color: var(--color-secondary);\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-gray-800 {\n background-color: var(--color-gray-800);\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .bg-overlay {\n background-color: var(--color-overlay);\n }\n .bg-primary {\n background-color: var(--color-primary);\n }\n .bg-secondary {\n background-color: var(--color-secondary);\n }\n .bg-surface {\n background-color: var(--color-surface);\n }\n .bg-surface-active {\n background-color: var(--color-surface-active);\n }\n .bg-text-secondary {\n background-color: var(--color-text-secondary);\n }\n .bg-transparent {\n background-color: transparent;\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-error {\n color: var(--color-error);\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-muted {\n color: var(--color-muted);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .text-primary-foreground {\n color: var(--color-primary-foreground);\n }\n .text-secondary {\n color: var(--color-secondary);\n }\n .text-secondary-foreground {\n color: var(--color-secondary-foreground);\n }\n .text-success {\n color: var(--color-success);\n }\n .text-text-muted {\n color: var(--color-text-muted);\n }\n .text-text-placeholder {\n color: var(--color-text-placeholder);\n }\n .text-text-secondary {\n color: var(--color-text-secondary);\n }\n .accent-tertiary {\n accent-color: var(--color-tertiary);\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-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover);\n }\n }\n }\n .hover\\:bg-hover-dark {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover-dark);\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-muted);\n }\n }\n }\n .hover\\:bg-overlay {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-overlay);\n }\n }\n }\n .hover\\:bg-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-secondary);\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-surface-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-surface-hover);\n }\n }\n }\n .hover\\:bg-tertiary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-tertiary);\n }\n }\n }\n .hover\\:bg-text-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-text-secondary);\n }\n }\n }\n .hover\\:text-muted {\n &:hover {\n @media (hover: hover) {\n color: var(--color-muted);\n }\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-info {\n &:focus {\n --tw-ring-color: var(--color-info);\n }\n }\n .focus\\:ring-secondary {\n &:focus {\n --tw-ring-color: var(--color-secondary);\n }\n }\n .focus\\:ring-tertiary {\n &:focus {\n --tw-ring-color: var(--color-tertiary);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .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-muted {\n &::-webkit-slider-thumb {\n background-color: var(--color-muted);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-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.8 | 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-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\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 --color-primary: hsl(41 51% 90%);\n --color-primary-foreground: hsl(0 0% 0%);\n --color-secondary: hsl(28 100% 8%);\n --color-secondary-foreground: hsl(0 0% 100%);\n --color-tertiary: hsl(28 100% 29%);\n --color-tertiary-foreground: hsl(0 0% 100%);\n --color-muted: hsl(0 0% 100%);\n --color-muted-foreground: hsl(0 0% 0%);\n --color-error: hsl(0 100% 50%);\n --color-error-foreground: hsl(0 0% 100%);\n --color-surface: hsl(0 0% 88%);\n --color-surface-hover: hsl(0 0% 82%);\n --color-surface-active: hsl(0 0% 64%);\n --color-text-muted: hsl(0 0% 45%);\n --color-text-secondary: hsl(0 0% 55%);\n --color-text-placeholder: hsl(0 0% 73%);\n --color-border: hsl(0 0% 82%);\n --color-border-light: hsl(0 0% 93%);\n --color-success: hsl(142 76% 36%);\n --color-info: hsl(221 83% 53%);\n --color-hover: hsl(0 0% 88%);\n --color-hover-dark: hsl(28 100% 8%);\n --color-overlay: rgba(0, 0, 0, 0.24);\n --color-tooltip: hsl(0 0% 13%);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .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-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-border {\n border-color: var(--color-border);\n }\n .border-error {\n border-color: var(--color-error);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-secondary {\n border-color: var(--color-secondary);\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-gray-800 {\n background-color: var(--color-gray-800);\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .bg-overlay {\n background-color: var(--color-overlay);\n }\n .bg-primary {\n background-color: var(--color-primary);\n }\n .bg-secondary {\n background-color: var(--color-secondary);\n }\n .bg-surface {\n background-color: var(--color-surface);\n }\n .bg-surface-active {\n background-color: var(--color-surface-active);\n }\n .bg-text-secondary {\n background-color: var(--color-text-secondary);\n }\n .bg-transparent {\n background-color: transparent;\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-error {\n color: var(--color-error);\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-muted {\n color: var(--color-muted);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .text-primary-foreground {\n color: var(--color-primary-foreground);\n }\n .text-secondary {\n color: var(--color-secondary);\n }\n .text-secondary-foreground {\n color: var(--color-secondary-foreground);\n }\n .text-success {\n color: var(--color-success);\n }\n .text-text-muted {\n color: var(--color-text-muted);\n }\n .text-text-placeholder {\n color: var(--color-text-placeholder);\n }\n .text-text-secondary {\n color: var(--color-text-secondary);\n }\n .accent-tertiary {\n accent-color: var(--color-tertiary);\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-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover);\n }\n }\n }\n .hover\\:bg-hover-dark {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover-dark);\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-muted);\n }\n }\n }\n .hover\\:bg-overlay {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-overlay);\n }\n }\n }\n .hover\\:bg-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-secondary);\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-surface-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-surface-hover);\n }\n }\n }\n .hover\\:bg-tertiary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-tertiary);\n }\n }\n }\n .hover\\:bg-text-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-text-secondary);\n }\n }\n }\n .hover\\:text-muted {\n &:hover {\n @media (hover: hover) {\n color: var(--color-muted);\n }\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-info {\n &:focus {\n --tw-ring-color: var(--color-info);\n }\n }\n .focus\\:ring-secondary {\n &:focus {\n --tw-ring-color: var(--color-secondary);\n }\n }\n .focus\\:ring-tertiary {\n &:focus {\n --tw-ring-color: var(--color-tertiary);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .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-muted {\n &::-webkit-slider-thumb {\n background-color: var(--color-muted);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-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.8 | 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-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\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 --color-primary: hsl(41 51% 90%);\n --color-primary-foreground: hsl(0 0% 0%);\n --color-secondary: hsl(28 100% 8%);\n --color-secondary-foreground: hsl(0 0% 100%);\n --color-tertiary: hsl(28 100% 29%);\n --color-tertiary-foreground: hsl(0 0% 100%);\n --color-muted: hsl(0 0% 100%);\n --color-muted-foreground: hsl(0 0% 0%);\n --color-error: hsl(0 100% 50%);\n --color-error-foreground: hsl(0 0% 100%);\n --color-surface: hsl(0 0% 88%);\n --color-surface-hover: hsl(0 0% 82%);\n --color-surface-active: hsl(0 0% 64%);\n --color-text-muted: hsl(0 0% 45%);\n --color-text-secondary: hsl(0 0% 55%);\n --color-text-placeholder: hsl(0 0% 73%);\n --color-border: hsl(0 0% 82%);\n --color-border-light: hsl(0 0% 93%);\n --color-success: hsl(142 76% 36%);\n --color-info: hsl(221 83% 53%);\n --color-hover: hsl(0 0% 88%);\n --color-hover-dark: hsl(28 100% 8%);\n --color-overlay: rgba(0, 0, 0, 0.24);\n --color-tooltip: hsl(0 0% 13%);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .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-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-border {\n border-color: var(--color-border);\n }\n .border-error {\n border-color: var(--color-error);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-secondary {\n border-color: var(--color-secondary);\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-gray-800 {\n background-color: var(--color-gray-800);\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .bg-overlay {\n background-color: var(--color-overlay);\n }\n .bg-primary {\n background-color: var(--color-primary);\n }\n .bg-secondary {\n background-color: var(--color-secondary);\n }\n .bg-surface {\n background-color: var(--color-surface);\n }\n .bg-surface-active {\n background-color: var(--color-surface-active);\n }\n .bg-text-secondary {\n background-color: var(--color-text-secondary);\n }\n .bg-transparent {\n background-color: transparent;\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-error {\n color: var(--color-error);\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-muted {\n color: var(--color-muted);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .text-primary-foreground {\n color: var(--color-primary-foreground);\n }\n .text-secondary {\n color: var(--color-secondary);\n }\n .text-secondary-foreground {\n color: var(--color-secondary-foreground);\n }\n .text-success {\n color: var(--color-success);\n }\n .text-text-muted {\n color: var(--color-text-muted);\n }\n .text-text-placeholder {\n color: var(--color-text-placeholder);\n }\n .text-text-secondary {\n color: var(--color-text-secondary);\n }\n .accent-tertiary {\n accent-color: var(--color-tertiary);\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-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover);\n }\n }\n }\n .hover\\:bg-hover-dark {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover-dark);\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-muted);\n }\n }\n }\n .hover\\:bg-overlay {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-overlay);\n }\n }\n }\n .hover\\:bg-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-secondary);\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-surface-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-surface-hover);\n }\n }\n }\n .hover\\:bg-tertiary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-tertiary);\n }\n }\n }\n .hover\\:bg-text-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-text-secondary);\n }\n }\n }\n .hover\\:text-muted {\n &:hover {\n @media (hover: hover) {\n color: var(--color-muted);\n }\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-info {\n &:focus {\n --tw-ring-color: var(--color-info);\n }\n }\n .focus\\:ring-secondary {\n &:focus {\n --tw-ring-color: var(--color-secondary);\n }\n }\n .focus\\:ring-tertiary {\n &:focus {\n --tw-ring-color: var(--color-tertiary);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .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-muted {\n &::-webkit-slider-thumb {\n background-color: var(--color-muted);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-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\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-overlay text-secondary transition-colors duration-200 text-xs ${\r\n this.currentTool === \"markRoofEdge\"\r\n ? \"bg-surface-active\"\r\n : \"bg-muted\"\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-overlay text-secondary transition-colors duration-200 text-xs bg-muted\"\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.8 | 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-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\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 --color-primary: hsl(41 51% 90%);\n --color-primary-foreground: hsl(0 0% 0%);\n --color-secondary: hsl(28 100% 8%);\n --color-secondary-foreground: hsl(0 0% 100%);\n --color-tertiary: hsl(28 100% 29%);\n --color-tertiary-foreground: hsl(0 0% 100%);\n --color-muted: hsl(0 0% 100%);\n --color-muted-foreground: hsl(0 0% 0%);\n --color-error: hsl(0 100% 50%);\n --color-error-foreground: hsl(0 0% 100%);\n --color-surface: hsl(0 0% 88%);\n --color-surface-hover: hsl(0 0% 82%);\n --color-surface-active: hsl(0 0% 64%);\n --color-text-muted: hsl(0 0% 45%);\n --color-text-secondary: hsl(0 0% 55%);\n --color-text-placeholder: hsl(0 0% 73%);\n --color-border: hsl(0 0% 82%);\n --color-border-light: hsl(0 0% 93%);\n --color-success: hsl(142 76% 36%);\n --color-info: hsl(221 83% 53%);\n --color-hover: hsl(0 0% 88%);\n --color-hover-dark: hsl(28 100% 8%);\n --color-overlay: rgba(0, 0, 0, 0.24);\n --color-tooltip: hsl(0 0% 13%);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .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-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-border {\n border-color: var(--color-border);\n }\n .border-error {\n border-color: var(--color-error);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-secondary {\n border-color: var(--color-secondary);\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-gray-800 {\n background-color: var(--color-gray-800);\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .bg-overlay {\n background-color: var(--color-overlay);\n }\n .bg-primary {\n background-color: var(--color-primary);\n }\n .bg-secondary {\n background-color: var(--color-secondary);\n }\n .bg-surface {\n background-color: var(--color-surface);\n }\n .bg-surface-active {\n background-color: var(--color-surface-active);\n }\n .bg-text-secondary {\n background-color: var(--color-text-secondary);\n }\n .bg-transparent {\n background-color: transparent;\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-error {\n color: var(--color-error);\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-muted {\n color: var(--color-muted);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .text-primary-foreground {\n color: var(--color-primary-foreground);\n }\n .text-secondary {\n color: var(--color-secondary);\n }\n .text-secondary-foreground {\n color: var(--color-secondary-foreground);\n }\n .text-success {\n color: var(--color-success);\n }\n .text-text-muted {\n color: var(--color-text-muted);\n }\n .text-text-placeholder {\n color: var(--color-text-placeholder);\n }\n .text-text-secondary {\n color: var(--color-text-secondary);\n }\n .accent-tertiary {\n accent-color: var(--color-tertiary);\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-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover);\n }\n }\n }\n .hover\\:bg-hover-dark {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover-dark);\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-muted);\n }\n }\n }\n .hover\\:bg-overlay {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-overlay);\n }\n }\n }\n .hover\\:bg-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-secondary);\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-surface-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-surface-hover);\n }\n }\n }\n .hover\\:bg-tertiary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-tertiary);\n }\n }\n }\n .hover\\:bg-text-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-text-secondary);\n }\n }\n }\n .hover\\:text-muted {\n &:hover {\n @media (hover: hover) {\n color: var(--color-muted);\n }\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-info {\n &:focus {\n --tw-ring-color: var(--color-info);\n }\n }\n .focus\\:ring-secondary {\n &:focus {\n --tw-ring-color: var(--color-secondary);\n }\n }\n .focus\\:ring-tertiary {\n &:focus {\n --tw-ring-color: var(--color-tertiary);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .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-muted {\n &::-webkit-slider-thumb {\n background-color: var(--color-muted);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-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: false,\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-primary rounded-4xl p-4 text-secondary\">\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-text-muted\">\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-text-muted\">\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-text-muted\">\r\n {t.mapDraw.azimuth}\r\n </h4>\r\n <div class=\"flex gap-2 flex-row justify-start bg-muted 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 {!state.isIOS && (\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-muted\"\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 )}\r\n </div>\r\n <div>\r\n <h4 class=\"text-sm font-medium text-text-muted pl-2\">\r\n {t.mapDraw.pitch}\r\n </h4>\r\n <div class=\"flex gap-2 flex-row justify-start bg-muted 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 {!state.isIOS && (\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-muted\"\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 )}\r\n </div>\r\n </div>\r\n )\r\n : (\r\n <p class=\"text-text-secondary 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.8 | 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-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\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 --color-primary: hsl(41 51% 90%);\n --color-primary-foreground: hsl(0 0% 0%);\n --color-secondary: hsl(28 100% 8%);\n --color-secondary-foreground: hsl(0 0% 100%);\n --color-tertiary: hsl(28 100% 29%);\n --color-tertiary-foreground: hsl(0 0% 100%);\n --color-muted: hsl(0 0% 100%);\n --color-muted-foreground: hsl(0 0% 0%);\n --color-error: hsl(0 100% 50%);\n --color-error-foreground: hsl(0 0% 100%);\n --color-surface: hsl(0 0% 88%);\n --color-surface-hover: hsl(0 0% 82%);\n --color-surface-active: hsl(0 0% 64%);\n --color-text-muted: hsl(0 0% 45%);\n --color-text-secondary: hsl(0 0% 55%);\n --color-text-placeholder: hsl(0 0% 73%);\n --color-border: hsl(0 0% 82%);\n --color-border-light: hsl(0 0% 93%);\n --color-success: hsl(142 76% 36%);\n --color-info: hsl(221 83% 53%);\n --color-hover: hsl(0 0% 88%);\n --color-hover-dark: hsl(28 100% 8%);\n --color-overlay: rgba(0, 0, 0, 0.24);\n --color-tooltip: hsl(0 0% 13%);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .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-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-border {\n border-color: var(--color-border);\n }\n .border-error {\n border-color: var(--color-error);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-secondary {\n border-color: var(--color-secondary);\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-gray-800 {\n background-color: var(--color-gray-800);\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .bg-overlay {\n background-color: var(--color-overlay);\n }\n .bg-primary {\n background-color: var(--color-primary);\n }\n .bg-secondary {\n background-color: var(--color-secondary);\n }\n .bg-surface {\n background-color: var(--color-surface);\n }\n .bg-surface-active {\n background-color: var(--color-surface-active);\n }\n .bg-text-secondary {\n background-color: var(--color-text-secondary);\n }\n .bg-transparent {\n background-color: transparent;\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-error {\n color: var(--color-error);\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-muted {\n color: var(--color-muted);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .text-primary-foreground {\n color: var(--color-primary-foreground);\n }\n .text-secondary {\n color: var(--color-secondary);\n }\n .text-secondary-foreground {\n color: var(--color-secondary-foreground);\n }\n .text-success {\n color: var(--color-success);\n }\n .text-text-muted {\n color: var(--color-text-muted);\n }\n .text-text-placeholder {\n color: var(--color-text-placeholder);\n }\n .text-text-secondary {\n color: var(--color-text-secondary);\n }\n .accent-tertiary {\n accent-color: var(--color-tertiary);\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-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover);\n }\n }\n }\n .hover\\:bg-hover-dark {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover-dark);\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-muted);\n }\n }\n }\n .hover\\:bg-overlay {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-overlay);\n }\n }\n }\n .hover\\:bg-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-secondary);\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-surface-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-surface-hover);\n }\n }\n }\n .hover\\:bg-tertiary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-tertiary);\n }\n }\n }\n .hover\\:bg-text-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-text-secondary);\n }\n }\n }\n .hover\\:text-muted {\n &:hover {\n @media (hover: hover) {\n color: var(--color-muted);\n }\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-info {\n &:focus {\n --tw-ring-color: var(--color-info);\n }\n }\n .focus\\:ring-secondary {\n &:focus {\n --tw-ring-color: var(--color-secondary);\n }\n }\n .focus\\:ring-tertiary {\n &:focus {\n --tw-ring-color: var(--color-tertiary);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .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-muted {\n &::-webkit-slider-thumb {\n background-color: var(--color-muted);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-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.8 | 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-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\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 --color-primary: hsl(41 51% 90%);\n --color-primary-foreground: hsl(0 0% 0%);\n --color-secondary: hsl(28 100% 8%);\n --color-secondary-foreground: hsl(0 0% 100%);\n --color-tertiary: hsl(28 100% 29%);\n --color-tertiary-foreground: hsl(0 0% 100%);\n --color-muted: hsl(0 0% 100%);\n --color-muted-foreground: hsl(0 0% 0%);\n --color-error: hsl(0 100% 50%);\n --color-error-foreground: hsl(0 0% 100%);\n --color-surface: hsl(0 0% 88%);\n --color-surface-hover: hsl(0 0% 82%);\n --color-surface-active: hsl(0 0% 64%);\n --color-text-muted: hsl(0 0% 45%);\n --color-text-secondary: hsl(0 0% 55%);\n --color-text-placeholder: hsl(0 0% 73%);\n --color-border: hsl(0 0% 82%);\n --color-border-light: hsl(0 0% 93%);\n --color-success: hsl(142 76% 36%);\n --color-info: hsl(221 83% 53%);\n --color-hover: hsl(0 0% 88%);\n --color-hover-dark: hsl(28 100% 8%);\n --color-overlay: rgba(0, 0, 0, 0.24);\n --color-tooltip: hsl(0 0% 13%);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .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-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-border {\n border-color: var(--color-border);\n }\n .border-error {\n border-color: var(--color-error);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-secondary {\n border-color: var(--color-secondary);\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-gray-800 {\n background-color: var(--color-gray-800);\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .bg-overlay {\n background-color: var(--color-overlay);\n }\n .bg-primary {\n background-color: var(--color-primary);\n }\n .bg-secondary {\n background-color: var(--color-secondary);\n }\n .bg-surface {\n background-color: var(--color-surface);\n }\n .bg-surface-active {\n background-color: var(--color-surface-active);\n }\n .bg-text-secondary {\n background-color: var(--color-text-secondary);\n }\n .bg-transparent {\n background-color: transparent;\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-error {\n color: var(--color-error);\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-muted {\n color: var(--color-muted);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .text-primary-foreground {\n color: var(--color-primary-foreground);\n }\n .text-secondary {\n color: var(--color-secondary);\n }\n .text-secondary-foreground {\n color: var(--color-secondary-foreground);\n }\n .text-success {\n color: var(--color-success);\n }\n .text-text-muted {\n color: var(--color-text-muted);\n }\n .text-text-placeholder {\n color: var(--color-text-placeholder);\n }\n .text-text-secondary {\n color: var(--color-text-secondary);\n }\n .accent-tertiary {\n accent-color: var(--color-tertiary);\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-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover);\n }\n }\n }\n .hover\\:bg-hover-dark {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover-dark);\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-muted);\n }\n }\n }\n .hover\\:bg-overlay {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-overlay);\n }\n }\n }\n .hover\\:bg-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-secondary);\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-surface-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-surface-hover);\n }\n }\n }\n .hover\\:bg-tertiary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-tertiary);\n }\n }\n }\n .hover\\:bg-text-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-text-secondary);\n }\n }\n }\n .hover\\:text-muted {\n &:hover {\n @media (hover: hover) {\n color: var(--color-muted);\n }\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-info {\n &:focus {\n --tw-ring-color: var(--color-info);\n }\n }\n .focus\\:ring-secondary {\n &:focus {\n --tw-ring-color: var(--color-secondary);\n }\n }\n .focus\\:ring-tertiary {\n &:focus {\n --tw-ring-color: var(--color-tertiary);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .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-muted {\n &::-webkit-slider-thumb {\n background-color: var(--color-muted);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-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.8 | 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-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\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 --color-primary: hsl(41 51% 90%);\n --color-primary-foreground: hsl(0 0% 0%);\n --color-secondary: hsl(28 100% 8%);\n --color-secondary-foreground: hsl(0 0% 100%);\n --color-tertiary: hsl(28 100% 29%);\n --color-tertiary-foreground: hsl(0 0% 100%);\n --color-muted: hsl(0 0% 100%);\n --color-muted-foreground: hsl(0 0% 0%);\n --color-error: hsl(0 100% 50%);\n --color-error-foreground: hsl(0 0% 100%);\n --color-surface: hsl(0 0% 88%);\n --color-surface-hover: hsl(0 0% 82%);\n --color-surface-active: hsl(0 0% 64%);\n --color-text-muted: hsl(0 0% 45%);\n --color-text-secondary: hsl(0 0% 55%);\n --color-text-placeholder: hsl(0 0% 73%);\n --color-border: hsl(0 0% 82%);\n --color-border-light: hsl(0 0% 93%);\n --color-success: hsl(142 76% 36%);\n --color-info: hsl(221 83% 53%);\n --color-hover: hsl(0 0% 88%);\n --color-hover-dark: hsl(28 100% 8%);\n --color-overlay: rgba(0, 0, 0, 0.24);\n --color-tooltip: hsl(0 0% 13%);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .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-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-border {\n border-color: var(--color-border);\n }\n .border-error {\n border-color: var(--color-error);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-secondary {\n border-color: var(--color-secondary);\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-gray-800 {\n background-color: var(--color-gray-800);\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .bg-overlay {\n background-color: var(--color-overlay);\n }\n .bg-primary {\n background-color: var(--color-primary);\n }\n .bg-secondary {\n background-color: var(--color-secondary);\n }\n .bg-surface {\n background-color: var(--color-surface);\n }\n .bg-surface-active {\n background-color: var(--color-surface-active);\n }\n .bg-text-secondary {\n background-color: var(--color-text-secondary);\n }\n .bg-transparent {\n background-color: transparent;\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-error {\n color: var(--color-error);\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-muted {\n color: var(--color-muted);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .text-primary-foreground {\n color: var(--color-primary-foreground);\n }\n .text-secondary {\n color: var(--color-secondary);\n }\n .text-secondary-foreground {\n color: var(--color-secondary-foreground);\n }\n .text-success {\n color: var(--color-success);\n }\n .text-text-muted {\n color: var(--color-text-muted);\n }\n .text-text-placeholder {\n color: var(--color-text-placeholder);\n }\n .text-text-secondary {\n color: var(--color-text-secondary);\n }\n .accent-tertiary {\n accent-color: var(--color-tertiary);\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-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover);\n }\n }\n }\n .hover\\:bg-hover-dark {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover-dark);\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-muted);\n }\n }\n }\n .hover\\:bg-overlay {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-overlay);\n }\n }\n }\n .hover\\:bg-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-secondary);\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-surface-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-surface-hover);\n }\n }\n }\n .hover\\:bg-tertiary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-tertiary);\n }\n }\n }\n .hover\\:bg-text-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-text-secondary);\n }\n }\n }\n .hover\\:text-muted {\n &:hover {\n @media (hover: hover) {\n color: var(--color-muted);\n }\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-info {\n &:focus {\n --tw-ring-color: var(--color-info);\n }\n }\n .focus\\:ring-secondary {\n &:focus {\n --tw-ring-color: var(--color-secondary);\n }\n }\n .focus\\:ring-tertiary {\n &:focus {\n --tw-ring-color: var(--color-tertiary);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .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-muted {\n &::-webkit-slider-thumb {\n background-color: var(--color-muted);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-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-primary 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-hover 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 <h3 class=\"text-sm font-medium text-text-muted mb-1\">\r\n Debug Information\r\n </h3>\r\n <p class=\"text-sm text-text-muted mb-1\">\r\n state: {JSON.stringify(state, null, 2)}\r\n </p>\r\n <p class=\"text-sm text-text-muted mb-1\">\r\n {navigator.userAgent}\r\n </p>\r\n <p class=\"text-sm text-text-muted mb-1\">\r\n {navigator.userAgent.indexOf(\"Safari\")}\r\n </p>\r\n <p class=\"text-sm text-text-muted mb-1\">\r\n maxTouchPoints: {navigator.maxTouchPoints}\r\n </p>\r\n <p class=\"text-sm text-text-muted mb-1\">\r\n iPhone: {navigator.userAgent.indexOf(\"iPhone\")}\r\n </p>\r\n <p class=\"text-sm text-text-muted mb-1\">\r\n Mac OS: {navigator.userAgent.indexOf(\"Mac OS\")}\r\n </p>\r\n </div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-text-muted mb-1\">\r\n {t.settings.language}\r\n </label>\r\n <select\r\n class=\"w-full bg-muted 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-text-muted mb-1\">\r\n {t.settings.rowSpacing}\r\n </label>\r\n <input\r\n type=\"number\"\r\n class=\"w-full bg-muted 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-text-muted mb-1\">\r\n {t.settings.columnSpacing}\r\n </label>\r\n <input\r\n type=\"number\"\r\n class=\"w-full bg-muted 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-text-muted mb-1\">\r\n {t.settings.borderInset}\r\n </label>\r\n <input\r\n type=\"number\"\r\n class=\"w-full bg-muted 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-surface rounded-4xl hover:bg-surface-hover 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-secondary text-muted rounded-4xl hover:bg-text-secondary 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","import { ColorScheme } from \"../config\";\r\n\r\n/**\r\n * Applies a color scheme theme globally to the document root.\r\n * Since all components use global CSS (shadow: false), this will automatically \r\n * update the theme for all components.\r\n * \r\n * @param colorScheme - The color scheme object containing theme colors\r\n */\r\nexport function applyThemeGlobally(colorScheme: Partial<ColorScheme>): void {\r\n applyThemeToElement(document.documentElement, colorScheme);\r\n}\r\n\r\n/**\r\n * Applies a color scheme theme to a specific element (useful for Shadow DOM).\r\n * \r\n * @param element - The element to apply the theme to (e.g., Shadow DOM host)\r\n * @param colorScheme - The color scheme object containing theme colors\r\n */\r\nexport function applyThemeToElement(element: HTMLElement, colorScheme: Partial<ColorScheme>): void {\r\n // Set CSS custom properties on the specified element\r\n if (colorScheme.primary) {\r\n element.style.setProperty('--color-primary', colorScheme.primary);\r\n }\r\n if (colorScheme.primaryForeground) {\r\n element.style.setProperty('--color-primary-foreground', colorScheme.primaryForeground);\r\n }\r\n if (colorScheme.secondary) {\r\n element.style.setProperty('--color-secondary', colorScheme.secondary);\r\n }\r\n if (colorScheme.secondaryForeground) {\r\n element.style.setProperty('--color-secondary-foreground', colorScheme.secondaryForeground);\r\n }\r\n if (colorScheme.tertiary) {\r\n element.style.setProperty('--color-tertiary', colorScheme.tertiary);\r\n }\r\n if (colorScheme.tertiaryForeground) {\r\n element.style.setProperty('--color-tertiary-foreground', colorScheme.tertiaryForeground);\r\n }\r\n if (colorScheme.muted) {\r\n element.style.setProperty('--color-muted', colorScheme.muted);\r\n }\r\n if (colorScheme.mutedForeground) { \r\n element.style.setProperty('--color-muted-foreground', colorScheme.mutedForeground);\r\n }\r\n if (colorScheme.error) {\r\n element.style.setProperty('--color-error', colorScheme.error);\r\n }\r\n if (colorScheme.errorForeground) {\r\n element.style.setProperty('--color-error-foreground', colorScheme.errorForeground);\r\n }\r\n \r\n // Surface colors\r\n if (colorScheme.surface) {\r\n element.style.setProperty('--color-surface', colorScheme.surface);\r\n }\r\n if (colorScheme.surfaceHover) {\r\n element.style.setProperty('--color-surface-hover', colorScheme.surfaceHover);\r\n }\r\n if (colorScheme.surfaceActive) {\r\n element.style.setProperty('--color-surface-active', colorScheme.surfaceActive);\r\n }\r\n \r\n // Text colors\r\n if (colorScheme.textMuted) {\r\n element.style.setProperty('--color-text-muted', colorScheme.textMuted);\r\n }\r\n if (colorScheme.textSecondary) {\r\n element.style.setProperty('--color-text-secondary', colorScheme.textSecondary);\r\n }\r\n if (colorScheme.textPlaceholder) {\r\n element.style.setProperty('--color-text-placeholder', colorScheme.textPlaceholder);\r\n }\r\n \r\n // Border colors\r\n if (colorScheme.border) {\r\n element.style.setProperty('--color-border', colorScheme.border);\r\n }\r\n if (colorScheme.borderLight) {\r\n element.style.setProperty('--color-border-light', colorScheme.borderLight);\r\n }\r\n \r\n // Status colors\r\n if (colorScheme.success) {\r\n element.style.setProperty('--color-success', colorScheme.success);\r\n }\r\n if (colorScheme.info) {\r\n element.style.setProperty('--color-info', colorScheme.info);\r\n }\r\n \r\n // Interactive colors\r\n if (colorScheme.hover) {\r\n element.style.setProperty('--color-hover', colorScheme.hover);\r\n }\r\n if (colorScheme.hoverDark) {\r\n element.style.setProperty('--color-hover-dark', colorScheme.hoverDark);\r\n }\r\n if (colorScheme.overlay) {\r\n element.style.setProperty('--color-overlay', colorScheme.overlay);\r\n }\r\n if (colorScheme.tooltip) {\r\n element.style.setProperty('--color-tooltip', colorScheme.tooltip);\r\n }\r\n}","/*! tailwindcss v4.1.8 | 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-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\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 --color-primary: hsl(41 51% 90%);\n --color-primary-foreground: hsl(0 0% 0%);\n --color-secondary: hsl(28 100% 8%);\n --color-secondary-foreground: hsl(0 0% 100%);\n --color-tertiary: hsl(28 100% 29%);\n --color-tertiary-foreground: hsl(0 0% 100%);\n --color-muted: hsl(0 0% 100%);\n --color-muted-foreground: hsl(0 0% 0%);\n --color-error: hsl(0 100% 50%);\n --color-error-foreground: hsl(0 0% 100%);\n --color-surface: hsl(0 0% 88%);\n --color-surface-hover: hsl(0 0% 82%);\n --color-surface-active: hsl(0 0% 64%);\n --color-text-muted: hsl(0 0% 45%);\n --color-text-secondary: hsl(0 0% 55%);\n --color-text-placeholder: hsl(0 0% 73%);\n --color-border: hsl(0 0% 82%);\n --color-border-light: hsl(0 0% 93%);\n --color-success: hsl(142 76% 36%);\n --color-info: hsl(221 83% 53%);\n --color-hover: hsl(0 0% 88%);\n --color-hover-dark: hsl(28 100% 8%);\n --color-overlay: rgba(0, 0, 0, 0.24);\n --color-tooltip: hsl(0 0% 13%);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .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-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-border {\n border-color: var(--color-border);\n }\n .border-error {\n border-color: var(--color-error);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-secondary {\n border-color: var(--color-secondary);\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-gray-800 {\n background-color: var(--color-gray-800);\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .bg-overlay {\n background-color: var(--color-overlay);\n }\n .bg-primary {\n background-color: var(--color-primary);\n }\n .bg-secondary {\n background-color: var(--color-secondary);\n }\n .bg-surface {\n background-color: var(--color-surface);\n }\n .bg-surface-active {\n background-color: var(--color-surface-active);\n }\n .bg-text-secondary {\n background-color: var(--color-text-secondary);\n }\n .bg-transparent {\n background-color: transparent;\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-error {\n color: var(--color-error);\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-muted {\n color: var(--color-muted);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .text-primary-foreground {\n color: var(--color-primary-foreground);\n }\n .text-secondary {\n color: var(--color-secondary);\n }\n .text-secondary-foreground {\n color: var(--color-secondary-foreground);\n }\n .text-success {\n color: var(--color-success);\n }\n .text-text-muted {\n color: var(--color-text-muted);\n }\n .text-text-placeholder {\n color: var(--color-text-placeholder);\n }\n .text-text-secondary {\n color: var(--color-text-secondary);\n }\n .accent-tertiary {\n accent-color: var(--color-tertiary);\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-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover);\n }\n }\n }\n .hover\\:bg-hover-dark {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover-dark);\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-muted);\n }\n }\n }\n .hover\\:bg-overlay {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-overlay);\n }\n }\n }\n .hover\\:bg-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-secondary);\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-surface-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-surface-hover);\n }\n }\n }\n .hover\\:bg-tertiary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-tertiary);\n }\n }\n }\n .hover\\:bg-text-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-text-secondary);\n }\n }\n }\n .hover\\:text-muted {\n &:hover {\n @media (hover: hover) {\n color: var(--color-muted);\n }\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-info {\n &:focus {\n --tw-ring-color: var(--color-info);\n }\n }\n .focus\\:ring-secondary {\n &:focus {\n --tw-ring-color: var(--color-secondary);\n }\n }\n .focus\\:ring-tertiary {\n &:focus {\n --tw-ring-color: var(--color-tertiary);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .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-muted {\n &::-webkit-slider-thumb {\n background-color: var(--color-muted);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-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, Watch } 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\nimport { ColorScheme, DEFAULT_COLOR_SCHEME } from \"../../config\";\r\nimport { applyThemeGlobally, applyThemeToElement } from \"../../utils/theme\";\r\n\r\n@Component({\r\n tag: \"solar-expert\",\r\n shadow: true,\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 @Prop()\r\n colorScheme: Partial<ColorScheme> | null = null;\r\n // {\r\n // primary: \"hsl(0 0% 100%)\",\r\n // secondary: \"hsl(0 0% 100%)\",\r\n // tertiary: \"hsl(0 0% 100%)\",\r\n // muted: \"hsl(0 0% 100%)\",\r\n // error: \"hsl(0 0% 100%)\",\r\n // // secondary: \"hsl(180 100% 25%)\",\r\n // // tertiary: \"hsl(24 100% 18%)\",\r\n // // muted: \"hsl(0 0% 85%)\",\r\n // // error: \"hsl(240 75% 29%)\",\r\n // primaryForeground: \"hsl(0 0% 100%)\",\r\n // secondaryForeground: \"hsl(0 0% 100%)\",\r\n // tertiaryForeground: \"hsl(0 0% 100%)\",\r\n // mutedForeground: \"hsl(0 0% 100%)\",\r\n // errorForeground: \"hsl(0 0% 100%)\",\r\n // surface: \"hsl(0 0% 100%)\",\r\n // surfaceHover: \"hsl(0 0% 100%)\",\r\n // surfaceActive: \"hsl(0 0% 100%)\",\r\n // // Text colors\r\n // textMuted: \"hsl(0 0% 100%)\",\r\n // textSecondary: \"hsl(0 0% 100%)\",\r\n // textPlaceholder: \"hsl(0 0% 100%)\",\r\n // // Border colors\r\n // border: \"hsl(0 0% 100%)\",\r\n // borderLight: \"hsl(0 0% 100%)\",\r\n // // Status colors\r\n // success: \"hsl(0 0% 100%)\",\r\n // info: \"hsl(0 0% 100%)\",\r\n // // Interactive colors\r\n // hover: \"hsl(0 0% 100%)\",\r\n // hoverDark: \"hsl(0 0% 100%)\",\r\n // overlay: \"hsl(0 0% 100%)\",\r\n // tooltip: \"hsl(0 0% 100%)\",\r\n // };\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 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 isIPhone = navigator.userAgent.indexOf(\"iPhone\") != -1;\r\n const isMac = navigator.userAgent.indexOf(\"Mac OS\") != -1;\r\n\r\n state.isIOS = isIPhone || isMac || true;\r\n if (!this.colorScheme) {\r\n applyThemeToElement(this.el, DEFAULT_COLOR_SCHEME);\r\n applyThemeGlobally(DEFAULT_COLOR_SCHEME);\r\n }\r\n this.applyTheme();\r\n }\r\n\r\n @Watch(\"colorScheme\")\r\n colorSchemeChanged() {\r\n this.applyTheme();\r\n }\r\n\r\n private applyTheme() {\r\n if (this.colorScheme) {\r\n // Apply theme globally for non-shadow components\r\n applyThemeGlobally(this.colorScheme);\r\n // Apply theme to this component's Shadow DOM host element\r\n applyThemeToElement(this.el, this.colorScheme);\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-0 h-full flex items-center text-muted-foreground pointer-events-none\">\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-border rounded-4xl focus:ring-secondary bg-muted text-muted-foreground 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-border bg-muted rounded-4xl focus:ring-secondary hover:bg-secondary hover:text-muted\"\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.8 | 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-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\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 --color-primary: hsl(41 51% 90%);\n --color-primary-foreground: hsl(0 0% 0%);\n --color-secondary: hsl(28 100% 8%);\n --color-secondary-foreground: hsl(0 0% 100%);\n --color-tertiary: hsl(28 100% 29%);\n --color-tertiary-foreground: hsl(0 0% 100%);\n --color-muted: hsl(0 0% 100%);\n --color-muted-foreground: hsl(0 0% 0%);\n --color-error: hsl(0 100% 50%);\n --color-error-foreground: hsl(0 0% 100%);\n --color-surface: hsl(0 0% 88%);\n --color-surface-hover: hsl(0 0% 82%);\n --color-surface-active: hsl(0 0% 64%);\n --color-text-muted: hsl(0 0% 45%);\n --color-text-secondary: hsl(0 0% 55%);\n --color-text-placeholder: hsl(0 0% 73%);\n --color-border: hsl(0 0% 82%);\n --color-border-light: hsl(0 0% 93%);\n --color-success: hsl(142 76% 36%);\n --color-info: hsl(221 83% 53%);\n --color-hover: hsl(0 0% 88%);\n --color-hover-dark: hsl(28 100% 8%);\n --color-overlay: rgba(0, 0, 0, 0.24);\n --color-tooltip: hsl(0 0% 13%);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .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-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-border {\n border-color: var(--color-border);\n }\n .border-error {\n border-color: var(--color-error);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-secondary {\n border-color: var(--color-secondary);\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-gray-800 {\n background-color: var(--color-gray-800);\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .bg-overlay {\n background-color: var(--color-overlay);\n }\n .bg-primary {\n background-color: var(--color-primary);\n }\n .bg-secondary {\n background-color: var(--color-secondary);\n }\n .bg-surface {\n background-color: var(--color-surface);\n }\n .bg-surface-active {\n background-color: var(--color-surface-active);\n }\n .bg-text-secondary {\n background-color: var(--color-text-secondary);\n }\n .bg-transparent {\n background-color: transparent;\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-error {\n color: var(--color-error);\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-muted {\n color: var(--color-muted);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .text-primary-foreground {\n color: var(--color-primary-foreground);\n }\n .text-secondary {\n color: var(--color-secondary);\n }\n .text-secondary-foreground {\n color: var(--color-secondary-foreground);\n }\n .text-success {\n color: var(--color-success);\n }\n .text-text-muted {\n color: var(--color-text-muted);\n }\n .text-text-placeholder {\n color: var(--color-text-placeholder);\n }\n .text-text-secondary {\n color: var(--color-text-secondary);\n }\n .accent-tertiary {\n accent-color: var(--color-tertiary);\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-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover);\n }\n }\n }\n .hover\\:bg-hover-dark {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover-dark);\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-muted);\n }\n }\n }\n .hover\\:bg-overlay {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-overlay);\n }\n }\n }\n .hover\\:bg-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-secondary);\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-surface-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-surface-hover);\n }\n }\n }\n .hover\\:bg-tertiary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-tertiary);\n }\n }\n }\n .hover\\:bg-text-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-text-secondary);\n }\n }\n }\n .hover\\:text-muted {\n &:hover {\n @media (hover: hover) {\n color: var(--color-muted);\n }\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-info {\n &:focus {\n --tw-ring-color: var(--color-info);\n }\n }\n .focus\\:ring-secondary {\n &:focus {\n --tw-ring-color: var(--color-secondary);\n }\n }\n .focus\\:ring-tertiary {\n &:focus {\n --tw-ring-color: var(--color-tertiary);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .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-muted {\n &::-webkit-slider-thumb {\n background-color: var(--color-muted);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-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 @State()\r\n kmDrivenPerYear: number = 10000;\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: this.kmDrivenPerYear / 365,\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 private isIOS(): boolean {\r\n return state.isIOS;\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-secondary mb-4 w-full\">\r\n {t.solarSystemForm.title}\r\n </h1>\r\n\r\n <div class=\"w-full bg-primary 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-secondary\">\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-text-muted mb-1\">\r\n {t.solarSystemForm.numberOfPanels}\r\n </label>\r\n <label class=\"block text-sm font-medium text-text-muted 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 {!this.isIOS()\r\n ? (\r\n <input\r\n type=\"number\"\r\n class=\"w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground\"\r\n value={this.numberOfPanels}\r\n readOnly\r\n />\r\n )\r\n : (\r\n <input\r\n type=\"number\"\r\n min=\"1\"\r\n max={this.maxPanels}\r\n class=\"flex-1 px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground\"\r\n value={this.numberOfPanels}\r\n onInput={(e) => {\r\n const value = parseInt(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n );\r\n if (\r\n value >= 1 &&\r\n value <=\r\n this.maxPanels\r\n ) {\r\n this.numberOfPanels = value;\r\n this.recalculate();\r\n }\r\n }}\r\n />\r\n )}\r\n <input\r\n type=\"number\"\r\n class=\"w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground\"\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 {!this.isIOS() &&\r\n (\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-muted\"\r\n value={this.numberOfPanels}\r\n onInput={(e) => {\r\n this.numberOfPanels =\r\n parseInt(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n );\r\n this.recalculate();\r\n }}\r\n />\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"bg-muted rounded-4xl p-4\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"text-text-muted\">\r\n {t.solarSystemForm.totalSystemPeakPower}\r\n </span>\r\n <span class=\"text-xl font-bold text-secondary\">\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-secondary\">\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-text-muted\">\r\n {t.solarSystemForm.annualConsumption}\r\n </label>\r\n <label class=\"block text-sm font-medium text-text-muted\">\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-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground\"\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-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground\"\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-secondary\">\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-muted 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-tertiary border-border rounded-full focus:ring-tertiary 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-text-muted\"\r\n >\r\n {t.solarSystemForm\r\n .additionalComponents\r\n .heatPump}\r\n </label>\r\n </div>\r\n {(this.heatPump > 0 && !this.isIOS()) && (\r\n <span class=\"text-text-muted\">\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 {this.isIOS()\r\n ? (\r\n <div class=\"flex items-center gap-2\">\r\n <input\r\n type=\"number\"\r\n min=\"10\"\r\n max=\"300\"\r\n step=\"10\"\r\n class=\"flex-1 px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted\"\r\n style={{ //TODO fix this\r\n border:\r\n \"1px solid var(--color-border)\",\r\n }}\r\n value={this.heatPump}\r\n onInput={(e) => {\r\n const value =\r\n parseInt(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n );\r\n if (\r\n value >= 10 &&\r\n value <= 300\r\n ) {\r\n this.heatPump =\r\n value;\r\n this.recalculate();\r\n }\r\n }}\r\n />\r\n <span class=\"text-sm text-text-muted\">\r\n m²\r\n </span>\r\n </div>\r\n )\r\n : (\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-muted\"\r\n value={this.heatPump}\r\n onInput={(e) => {\r\n this.heatPump =\r\n parseInt(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n );\r\n this.recalculate();\r\n }}\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-muted 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-tertiary border-border rounded focus:ring-tertiary 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-text-muted\"\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 <div class=\"grid grid-cols-2 gap-4\">\r\n <label class=\"text-sm text-text-muted\">\r\n {t.solarSystemForm\r\n .additionalComponents\r\n .chargingTime}\r\n </label>\r\n <label class=\"text-sm text-text-muted\">\r\n {t.solarSystemForm\r\n .additionalComponents\r\n .kilometersPerYear}\r\n </label>\r\n </div>\r\n <div class=\"grid grid-cols-2 gap-4\">\r\n <select\r\n class=\"w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted\"\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 style={{ //TODO fix this\r\n border:\r\n \"1px solid var(--color-border)\",\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 <input\r\n type=\"number\"\r\n min=\"1000\"\r\n max=\"50000\"\r\n step=\"1000\"\r\n class=\"w-full px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted\"\r\n value={this.kmDrivenPerYear}\r\n onInput={(e) => {\r\n this.kmDrivenPerYear =\r\n parseInt(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n );\r\n this.recalculate();\r\n }}\r\n style={{ //TODO fix this\r\n border:\r\n \"1px solid var(--color-border)\",\r\n }}\r\n />\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n\r\n {/* Battery Section */}\r\n <div class=\"flex flex-col bg-muted rounded-4xl p-4 gap-4\">\r\n <div class=\"flex items-center justify-between\">\r\n <label class=\"text-text-muted\">\r\n {t.solarSystemForm.additionalComponents\r\n .battery}\r\n </label>\r\n {!this.isIOS() && (\r\n <span class=\"text-text-muted\">\r\n {this.battery} kWh\r\n </span>\r\n )}\r\n </div>\r\n <div class=\"flex flex-col gap-2\">\r\n {this.isIOS()\r\n ? (\r\n <div class=\"flex items-center gap-2\">\r\n <input\r\n type=\"number\"\r\n min=\"0\"\r\n max=\"20\"\r\n step=\"1\"\r\n class=\"flex-1 px-4 py-2 rounded-4xl border border-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted\"\r\n value={this.battery}\r\n onInput={(e) => {\r\n const value = parseInt(\r\n (e.target as HTMLInputElement)\r\n .value,\r\n );\r\n if (\r\n value >= 0 &&\r\n value <= 20\r\n ) {\r\n this.battery =\r\n value;\r\n this.recalculate();\r\n }\r\n }}\r\n placeholder=\"Battery capacity\"\r\n style={{ //TODO fix this\r\n border:\r\n \"1px solid var(--color-border)\",\r\n }}\r\n />\r\n <span class=\"text-sm text-text-muted\">\r\n kWh\r\n </span>\r\n </div>\r\n )\r\n : (\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-muted\"\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 )}\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-secondary\">\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-text-muted mb-1\">\r\n {t.solarSystemForm.electricityPrice}\r\n </label>\r\n <label class=\"block text-sm font-medium text-text-muted mb-1\">\r\n {t.solarSystemForm.compensationRate}\r\n </label>\r\n <label class=\"block text-sm font-medium text-text-muted mb-1\">\r\n {t.solarSystemForm.annualPriceIncrease}\r\n </label>\r\n </div>\r\n <div class=\"grid grid-cols-3 gap-4 text-primary-foreground\">\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-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted\"\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-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted\"\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-border focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted\"\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\r\n class=\"space-y-4 p-4 border border-border rounded-4xl\"\r\n style={{ //TODO fix this\r\n border: \"1px solid var(--color-border)\",\r\n }}\r\n >\r\n <h2 class=\"text-lg font-semibold text-secondary\">\r\n {t.solarSystemForm.resultsTitle}\r\n </h2>\r\n <div class=\"bg-muted rounded-4xl p-4\">\r\n <div class=\"flex items-center justify-between\">\r\n <span class=\"text-text-muted\">\r\n {t.solarSystemForm.autonomy}\r\n </span>\r\n <span class=\"text-xl font-bold text-secondary\">\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-text-muted\">\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-muted 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-success\">\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-text-muted\">\r\n Einspeisevergütung 25 Jahre\r\n </span>\r\n </div>\r\n <span class=\"text-xl font-bold text-success\">\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-text-muted\">\r\n Geldwerter Vorteil 25 Jahre\r\n </span>\r\n </div>\r\n <span class=\"text-xl font-bold text-success\">\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\">\r\n <h2 class=\"text-lg font-semibold text-secondary\">\r\n {t.solarSystemForm.requestOffer}\r\n </h2>\r\n <div class=\"grid gap-4\">\r\n <div class=\"grid grid-cols-2 gap-4\">\r\n <label class=\"block text-sm font-medium text-text-muted mb-1\">\r\n {t.solarSystemForm.name}\r\n </label>\r\n <label class=\"block text-sm font-medium text-text-muted 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 <div>\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-error\"\r\n : \"border-border\"\r\n } focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`}\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-error text-sm mt-1\">\r\n {this.nameError}\r\n </p>\r\n )}\r\n </div>\r\n <div>\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-error\"\r\n : \"border-border\"\r\n } focus:ring-2 focus:ring-tertiary focus:border-transparent bg-muted text-muted-foreground`}\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-error text-sm mt-1\">\r\n {this.emailError}\r\n </p>\r\n )}\r\n </div>\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-secondary rounded-4xl hover:bg-tertiary transition-colors duration-200 text-muted\"\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.8 | 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-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\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 --color-primary: hsl(41 51% 90%);\n --color-primary-foreground: hsl(0 0% 0%);\n --color-secondary: hsl(28 100% 8%);\n --color-secondary-foreground: hsl(0 0% 100%);\n --color-tertiary: hsl(28 100% 29%);\n --color-tertiary-foreground: hsl(0 0% 100%);\n --color-muted: hsl(0 0% 100%);\n --color-muted-foreground: hsl(0 0% 0%);\n --color-error: hsl(0 100% 50%);\n --color-error-foreground: hsl(0 0% 100%);\n --color-surface: hsl(0 0% 88%);\n --color-surface-hover: hsl(0 0% 82%);\n --color-surface-active: hsl(0 0% 64%);\n --color-text-muted: hsl(0 0% 45%);\n --color-text-secondary: hsl(0 0% 55%);\n --color-text-placeholder: hsl(0 0% 73%);\n --color-border: hsl(0 0% 82%);\n --color-border-light: hsl(0 0% 93%);\n --color-success: hsl(142 76% 36%);\n --color-info: hsl(221 83% 53%);\n --color-hover: hsl(0 0% 88%);\n --color-hover-dark: hsl(28 100% 8%);\n --color-overlay: rgba(0, 0, 0, 0.24);\n --color-tooltip: hsl(0 0% 13%);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .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-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-border {\n border-color: var(--color-border);\n }\n .border-error {\n border-color: var(--color-error);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-secondary {\n border-color: var(--color-secondary);\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-gray-800 {\n background-color: var(--color-gray-800);\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .bg-overlay {\n background-color: var(--color-overlay);\n }\n .bg-primary {\n background-color: var(--color-primary);\n }\n .bg-secondary {\n background-color: var(--color-secondary);\n }\n .bg-surface {\n background-color: var(--color-surface);\n }\n .bg-surface-active {\n background-color: var(--color-surface-active);\n }\n .bg-text-secondary {\n background-color: var(--color-text-secondary);\n }\n .bg-transparent {\n background-color: transparent;\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-error {\n color: var(--color-error);\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-muted {\n color: var(--color-muted);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .text-primary-foreground {\n color: var(--color-primary-foreground);\n }\n .text-secondary {\n color: var(--color-secondary);\n }\n .text-secondary-foreground {\n color: var(--color-secondary-foreground);\n }\n .text-success {\n color: var(--color-success);\n }\n .text-text-muted {\n color: var(--color-text-muted);\n }\n .text-text-placeholder {\n color: var(--color-text-placeholder);\n }\n .text-text-secondary {\n color: var(--color-text-secondary);\n }\n .accent-tertiary {\n accent-color: var(--color-tertiary);\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-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover);\n }\n }\n }\n .hover\\:bg-hover-dark {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover-dark);\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-muted);\n }\n }\n }\n .hover\\:bg-overlay {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-overlay);\n }\n }\n }\n .hover\\:bg-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-secondary);\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-surface-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-surface-hover);\n }\n }\n }\n .hover\\:bg-tertiary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-tertiary);\n }\n }\n }\n .hover\\:bg-text-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-text-secondary);\n }\n }\n }\n .hover\\:text-muted {\n &:hover {\n @media (hover: hover) {\n color: var(--color-muted);\n }\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-info {\n &:focus {\n --tw-ring-color: var(--color-info);\n }\n }\n .focus\\:ring-secondary {\n &:focus {\n --tw-ring-color: var(--color-secondary);\n }\n }\n .focus\\:ring-tertiary {\n &:focus {\n --tw-ring-color: var(--color-tertiary);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .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-muted {\n &::-webkit-slider-thumb {\n background-color: var(--color-muted);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-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-primary 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 ${\r\n this.currentTool.name === tool.name\r\n ? \"bg-secondary hover:bg-secondary/80 text-secondary-foreground\"\r\n : \"bg-primary hover:bg-muted text-primary-foreground\"\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 bg-primary hover:bg-muted text-primary-foreground`}\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.8 | 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-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\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 --color-primary: hsl(41 51% 90%);\n --color-primary-foreground: hsl(0 0% 0%);\n --color-secondary: hsl(28 100% 8%);\n --color-secondary-foreground: hsl(0 0% 100%);\n --color-tertiary: hsl(28 100% 29%);\n --color-tertiary-foreground: hsl(0 0% 100%);\n --color-muted: hsl(0 0% 100%);\n --color-muted-foreground: hsl(0 0% 0%);\n --color-error: hsl(0 100% 50%);\n --color-error-foreground: hsl(0 0% 100%);\n --color-surface: hsl(0 0% 88%);\n --color-surface-hover: hsl(0 0% 82%);\n --color-surface-active: hsl(0 0% 64%);\n --color-text-muted: hsl(0 0% 45%);\n --color-text-secondary: hsl(0 0% 55%);\n --color-text-placeholder: hsl(0 0% 73%);\n --color-border: hsl(0 0% 82%);\n --color-border-light: hsl(0 0% 93%);\n --color-success: hsl(142 76% 36%);\n --color-info: hsl(221 83% 53%);\n --color-hover: hsl(0 0% 88%);\n --color-hover-dark: hsl(28 100% 8%);\n --color-overlay: rgba(0, 0, 0, 0.24);\n --color-tooltip: hsl(0 0% 13%);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .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-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-border {\n border-color: var(--color-border);\n }\n .border-error {\n border-color: var(--color-error);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-secondary {\n border-color: var(--color-secondary);\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-gray-800 {\n background-color: var(--color-gray-800);\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .bg-overlay {\n background-color: var(--color-overlay);\n }\n .bg-primary {\n background-color: var(--color-primary);\n }\n .bg-secondary {\n background-color: var(--color-secondary);\n }\n .bg-surface {\n background-color: var(--color-surface);\n }\n .bg-surface-active {\n background-color: var(--color-surface-active);\n }\n .bg-text-secondary {\n background-color: var(--color-text-secondary);\n }\n .bg-transparent {\n background-color: transparent;\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-error {\n color: var(--color-error);\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-muted {\n color: var(--color-muted);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .text-primary-foreground {\n color: var(--color-primary-foreground);\n }\n .text-secondary {\n color: var(--color-secondary);\n }\n .text-secondary-foreground {\n color: var(--color-secondary-foreground);\n }\n .text-success {\n color: var(--color-success);\n }\n .text-text-muted {\n color: var(--color-text-muted);\n }\n .text-text-placeholder {\n color: var(--color-text-placeholder);\n }\n .text-text-secondary {\n color: var(--color-text-secondary);\n }\n .accent-tertiary {\n accent-color: var(--color-tertiary);\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-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover);\n }\n }\n }\n .hover\\:bg-hover-dark {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-hover-dark);\n }\n }\n }\n .hover\\:bg-muted {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-muted);\n }\n }\n }\n .hover\\:bg-overlay {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-overlay);\n }\n }\n }\n .hover\\:bg-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-secondary);\n }\n }\n }\n .hover\\:bg-secondary\\/80 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, hsl(28 100% 8%) 80%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);\n }\n }\n }\n }\n .hover\\:bg-surface-hover {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-surface-hover);\n }\n }\n }\n .hover\\:bg-tertiary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-tertiary);\n }\n }\n }\n .hover\\:bg-text-secondary {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-text-secondary);\n }\n }\n }\n .hover\\:text-muted {\n &:hover {\n @media (hover: hover) {\n color: var(--color-muted);\n }\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-info {\n &:focus {\n --tw-ring-color: var(--color-info);\n }\n }\n .focus\\:ring-secondary {\n &:focus {\n --tw-ring-color: var(--color-secondary);\n }\n }\n .focus\\:ring-tertiary {\n &:focus {\n --tw-ring-color: var(--color-tertiary);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .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-muted {\n &::-webkit-slider-thumb {\n background-color: var(--color-muted);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-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":[]}